/FlickrAPI

UI Design, Assignment 1: Using Flickr API with NPM to make flickr-searchable interface

Primary LanguageJavaScript

Ariana Giorgi ang2144 ang2144@columbia.edu UI Design Project 1 Part 3 Flickr API Image Search

To run the program, launch the index.html file in your browser and make sure all files are in the same folder. To search by keyword or username/userid, you can type it in the corresponding search box and hit 'Enter' or click the Search button. You can further specify if there are certain dates you want to cutoff at, though these must be in addition to a keyword or username/userid - it seems the API doesn't return results otherwise (that might be a flaw in the API).

All of my design decisions were based off of what comes to mind when I think of standard search. I wanted minimal instructions - since many times people don't read instructions, I put in multiple search bars for advanced search, and I added a search button in case people feel more comfortable pushing a button than hitting 'Enter'. I decided to make the results part of the page invisibile until the search was entered because it wasn't necessary to show until that point. Also, I didn't want the search entries to go away once the pictures showed up, in case the user forgot what they searched for or wanted to append it. The 'Next' and 'Previous' button were definitely an obvious addition for me so that the user wouldn't be overwhelmed by photos on one page and could see that there were more photos to display. I made sure that when you were on the first page or the last page, the corresponding button was disabled so that a user would recognize that. While constructing everything in the assignment, I made sure that I kept in mind the usability heuristics and maximaized simplicity and ease of user and understanding. Finally, I imported the same text that flickr uses so that users can make the connection between the flickr product and this search site.