Scenario for finding a photographer
Blanco, a 29 year old Mexican investment banker living in North Dakota (zipcode: 58102) is getting married to Oprah on July 4, 2011. He's looking for a wedding photographer and the price limit is 10,000$ for the coverage of the whole day. His friends told him about ShutterConnect and he is using the website for the first time. He would like to get a bunch of prints for his extended family in Mexico City. 3 photographers come up:
1. Kalashnikov (40 miles away, 9000$, 4-star reviews by 20 people)
2. Mobutu (55 miles away, 5000$, 3.5-star reviews by 13 people)
3. Emilio (55.9 miles away, 10000$, 5-star reviews by 42 people)
After checking out their profiles and sample photos, Blanco decides to go with Emilio.
Design 1
- Learnability
- Simple homepage, with few elements
- Looks like Google page (consistency with popular interfaces)
- Visibility
- Having search parameters at the top of the results page makes it clear what was searched for.
- Efficiency
- Search bar at the top of results page makes it efficient to start over
- Typing whatever you want and letting the system parse makes searching efficient
- Reviews can be filtered to show ones that are most similar to your case
- Error Prevention/Correction
- Modifying search criteria is easy
- Coding up the natural language processing will be difficult.
Design 2
In this design, Blanco is first presented with a login page, where he enters his user name and password. Upon logging in, Blanco is directed to the client's home page, where he can either click on the 'Search for photographer' button, or decide to review a photographer. Blanco clicks on the 'Search for photographer' button, and is then directed to a page where he can enter his desired search parameters. He enters Boston as the location at which he would like to receive the photography services, on the 4th of July starting at 8am. In the budget textbox, he indicates that he is willing to spend between $5,000 and $10,000. He then clicks the 'Search' button to proceed. This directs him to a page where he is requested to confirm his search parameters. If he is not satisfied, he can click the 'Back' button to re-enter his parameters. Blanco is satisfied with his parameters, so he clicks the 'Proceed' button to conduct the search. Blanco now sees the results of his query. His search parameters are at the top of the page, and his results are below. Blanco uses the provided scroll-bar to look at the first few photographers, and decides that he would like to hire Emilio's services.
- Learnability
- Starting page is a series of forms consisting of textboxes and buttons, which is familiar to Internet users.
- Wizard Pattern helps guide the user through the stages.
- Visibility
- Having search parameters at the top of the results page makes it clear what was searched for.
- Efficiency
- Confirmation page increases time taken to view search results.
- Error Prevention/Correction
- Confirmation page gives a chance to check search criteria
Design 3
- Learnability
- Looks similar to flight/hotel booking websites
- Presence of tab bar with different actions (e.g. "find photographers", "review photographers") makes it easy for new users to get an idea of what they can do with the site
- Visibility
- Search criteria is always visible in the sidebar area
- Highlighted tabs to show the task they're performing
- Number of results and pages shown to get an idea of how many photographers are available
- Efficiency
- Dynamically update results
- Slider to adjust budget range instead of typing numbers
- Primary and secondary sorting of search results for efficiency
- Error Prevention/Correction
- Effects are immediately visible, and actions are easily revertible (e.g. toggle checkbox, select a different option from dropdown)
Scenario for writing a review
On July 5th, Blanco wakes up with a throbbing headache. He checks his email, and finds that the photographer, Emilio, has attached some pics he took at the event. Half excited and half anxious, Blanco opens the attachment, only to find that every picture has red eyes, the Armani logo on his suit is not visible, and his wife's gown magically changed color from white to cream. Furious, Blanco logs into ShutterConnect, to let the world know about the atrocities that have been committed against his person.
Design 1
- Learnability
- Not as learnable as just having a form that is always visible on the page
- Visibility
- Visibility problem: need to be on photographer's page before "add review" button is even visible
- Efficiency
- Adding review can be done in the same page (doesn't require going to a new page or any additional scrolling)
- Error Prevention/Correction
- Cancel button to escape "review entering mode"
- Error correction: there's an "edit" link on the reviews you wrote so you can change/delete them
Design 2
In this design, Blanco is first presented with the login page, where he enters his user name and password, and logs in to ShutterConnect. He is then presented with the client's home page, which has a textbox provided for those users wishing to review a certain photographer. Blanco enters Emilio's name in the textbox, and, upon pressing enter, is directed to Emilio's profile page.
- Learnability
- Standard form-format with widgets like textboxes and dropdowns
- Visibility
- "Review photographer" is explicitly mentioned as a task upon login
- Photographer's info is also shown on the add review page so that users can easily refer to details about the photographer
- Efficiency
- Internal scrollbar for the review items makes it less efficient to view all reviews
- Error Prevention/Correction
- Photographer's info shown on add review page to help prevent mishaps
Design 3
- Learnability
- Uses standard widgets: dropdowns, textboxes, star ratings (like in itunes)
- Visibility
- The state of the ratings for each criteria is shown at all times
- Updating ratings/fields is done in-place so effects of changes are also always visible
- Efficiency
- The reviews are quite detailed, so adding a review requires more time than some users would like.
- Error Prevention/Correction
- Disambiguation page for different photographers with same name
Scenario for photographer account registration
Having grown up the son of a lowly sheep farmer and a housewife, Emilio decided to make his own way in the world, and improve upon his parent's station. While in college, he studied the arts, and planned on getting into either fashion design or photography. He met a beautiful American girl who was a promising landscape painter. One thing led to another, and Emilio found himself in North Dakota. Once there, he realized there was a painful shortage of photographers, and that North Dakotans are very ceremonious people. Therefore, he picked photography, and has had a successful career, having taken professional pictures for the past 10 years. In his second year of photography, Emilio was introduced to ShutterConnect by his friend, and decided it would do good to his budding business. People noticed his prowess, and he is now one of the most highly rated photographer on ShutterConnect.
His business is called Emilio Shoot. His phone is 533 444 5343. He typically charges between 8000-12,000$ for whole-day wedding shoots. He also does portraiture and charges 465$ per hour.
Design 1
- Learnability
- Consistent with popular web2.0 sites like flickr, but might be difficult for a beginner to learn
- Visibility
- Editable fields appear only when you click on an item. This is less visible than having a textbox always visible.
- Efficiency
- To element, you click on it (e.g. clicking on photo brings up the upload photo overlay)
- You can switch tasks (search for photographer) by using the search bar at the top
- Error Prevention/Correction
- If you make a mistake, just click on the element and change it.
Design 2
- Learnability
- Standard form layout for each step of signup
- Wizard pattern to guide between one profile editing page to another
- Visibility
- Visible confirmation via message bar upon creation of profile
- Efficiency
- Less efficient because process is split into multiple steps
- Sample photos are added one at a time.
- Price structure is entered as text so photographers can enter their customized price message.
- Error Prevention/Correction
- Distinct buttons: "sign up as photographer" and "sign up as user" to prevent users accidentally signing up as photographers
Design 3
- Learnability
- Assumes greater computer skills because of fewer affordances (e.g. clicking on your name turns it into a textbox where you can change your name. Compare with having a textbox on the page at all times).
- Visibility
- Profile editing page looks very similar to the profile page that user's see. This way, photographer knows exactly how the change will be reflected.
- Profile items become editable widgets (textboxes and textareas) when clicked. This presents a visibility problem.
- Efficiency
- Single page presentation
- Instant updating (no 'save page'/'submit' button instead you have 'save' button per field/section)
- Error Prevention/Correction
- Requires details for sign-up (business address, phone) so that users will not accidentally sign up as photographers
- Accidental deletions can be reverted by pressing cancel