Design 3
Scenario for finding a photographer
...
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.
Analysis of Design 2 for this scenario
- 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)
...
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
This design requires Blanco to log in and go to Emilio's page (either via saved search, starting a new search, or by looking at photographer's he's dealt with recently). A photographer's profile page looks like the following:
Blanco then clicks on the "Add Review" Button placed at the top of all the reviews. The following add-review section appears in the same page:
He can then express his displeasure by providing a star rating, a review title and a detailed review explaining how Emilio failed him. Once he's done, he can click the "Save Review" button, or he can click "Cancel" if he wishes to write a review later when he's not as agitated.
Design 1 Analysis for Writing Review Task
- 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
...
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 a page with some of Emilio's info, and some fields which act as a guide for him to review Emilio's services. On this page is a drop down box for Event Type, under which Blanco enters 'Wedding'. He also enters the date as July 4th 2011, and enters some prose in the textbox labeled as 'Experience' describing the pictures that he received for his wedding. Blanco then gives Emilio a 3/5 rating, and hits the 'Submit' button. Blanco is now directed to a page where he can see the review he entered, and is given a choice of proceeding- a 'Continue' button, updating the review- a button labeled 'Update Review', or deleting the just-entered review altogether- a button labeled 'Delete Review'. Blanco hits the 'Continue' button, and is directed back to the client's home page. 
Analysis of Design 2 for this scenario
- 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
...
In this design, Emilio is first presented with the canonical login page upon first accessing the site. Not having an account, Emilio clicks the 'Create Account' link, and is directed to a page where he is asked to provide some personal information- his name, email, desired user name and physical address. Last but not least, Emilio is asked if he would like to sign up as a photographer or a regular user. He hits the 'Sign up as photographer' button. Emilio is then asked to upload any sample photos he might have. He has a few, so he clicks the 'Browse' button, selects some pictures from his desktop in the dialog that pops up, and hits the 'Upload' button to upload the pictures to ShutterConnect. Emilio then provides a link to his personal website in the provided textbox, enters his pricing package in the provided textbox, and decides to upload his profile picture. He then hits the 'Continue' button, and is directed to a page where his profile page is presented to him as it would appear to a regular user. He has the option to update his new profile by hitting the 'Change' button; Emilio is satisfied, so he proceeds by pressing the 'Continue' button.
...
- 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