This assignment is due by 7:00 p.m. on Monday, February 4.
For this assignment you are required to work in pairs, according to the guidelines on the assignment page. One member of each pair submits the assignment to Checkmate, taking care that both partners' names are included at the top of the document submitted. You may work with the same person as before, but you may also pick a new partner. But either way, the point of having partners is to work jointly, discussing the tasks; it is not okay just to split up the work with each partner doing half independently.
Read "Guidelines for Designing Web Navigation," by David K. Farkas and Jean B. Farkas. Technical Communication 4 (2000), 341-358; it's available electronically for class use at http://www.ics.uci.edu/~kobsa/courses/ICS104/lit/Farkas&Farkas-TC.pdf.
Also read Jakob Nielsen's Top Ten Mistakes in Web Design.
There's nothing to turn in for this part.
Pick a partner who is also enrolled in the class. Together, find three different web sites that perform the same function: travel sites (expedia.com, orbitz.com, kayak.com), book sites (amazon.com, barnesandnoble.com, borders.com), departmental home pages (anthro.uci.edu, anthro.ucla.edu, anthro.ucsd.edu), government sites (whitehouse.gov, www.number10.gov.uk, www.eylsee.fr), anything.
As you're browsing for your three sites, write down in your HCI notebook any particularly good (clear, clever, attractive, efficient, informative) web pages you encounter, and any that are particularly bad (unclear, frustrating, clumsy, ugly). Besides the URL, write down briefly what impressed you (positively or negatively) about the site.
Next, identify a task that each of the three sites performs: For example, find a flight to Paris on a given date, order the textbook for this course, find all the faculty who study people's use of technology, identify the leader's policy on energy conservation. Pick a task of moderate complexity: Don't pick one that only requires three or four clicks on one page and don't pick one that requires 25. Of course, the different sites will probably require different steps to perform the task.
Which of the three sites lets the user perform the task the most quickly? Consider everything the user needs to do: reading and recognition time, mouse movement time, anything else. (Pay less attention to slow response time, since that may vary from one time of day to another. But if a site is consistently slow to respond, it's worth mentioning.)
Which of the three sites is the slowest? Is there something about the slowest site that explains the slowness—for example, that it gives the user more choices than the others?
You'll want to decide on the characteristics of the hypothetical user you're talking about here—beginning or experienced, old or young or in-between, whatever characteristics are relevant—and keep those assumptions constant throughout.
Produce screen shots of the steps involved for the fastest and slowest sites. Describe and explain your conclusions in at most half a (single-spaced) page (not counting illustrations). As always, give reasons that relate to what we've covered, such as these: The button is too small to hit easily; the alternatives are lined up so it's easy to scan the list; the user is required to make too many fine visual distinctions based on the amount of blue in the images; the categories are named using terms that the intended users will know.
Then, take your best-performing website and redesign it for the task you analyzed to make that task even faster. (If you think your winning site is perfect, choose one of the other sites and redesign it to improve it, maintaining consistency with the rest of the original site—that is, don't just redesign it to look like the winner.) Think about how to rearrange the elements on the page, how to use features like color and alignment to group items and guide the user's eye, how to categorize and organize the content, and anything else we've discussed in class or you've read in the book. Of course not every aspect will apply to your task on your site.
Sketch out your redesign on paper. You and your partner should each walk through the redesign (following through the task, step by step), looking for problems and making improvements.
After you're satisfied with your redesign, decide whether your redesign would be better represented as a low-fidelity prototype or a high-fidelity prototype. If the improvements are mostly about layout and interaction, choose low-fidelity. If they're more about color, typography, detailed illustrations, or fine-tuned arrangement of elements, choose high-fidelity.
• If you've chosen a low-fidelity prototype, create a mock-up of your redesign using Mockingbird (gomockingbird.com) or Moqups (moqups.com). Mockingbird and Moqups are "wireframe mockup" tools for building low-fidelity prototypes of web sites. They let you place user interface items on a screen to create a page, they let you create multiple pages, and they let you establish hyperlinks between pages. Then you (or a user) can run the prototype, following the links to test out the behavior you want to examine. (To save or export your work, Mockingbird asks you to sign up; you can sign up for a free account that has a few limitations that won't affect our work, or for an inexpensive paid account that's less limited. Moqups also asks you to sign up, but there's no for-pay version and there are fewer limitations. They're pretty similar and you can choose either one.)
For this assignment, you just need to show the new (redesigned) screen(s) and how they link to each other; you don't need to implement the underlying functionality of your redesign. This is a mock-up, not a polished design, so don't spend more than an hour or two putting the redesign mock-up together. When you're done, export your work to a PDF file and share the file (the system will give you a URL). Submit that PDF file along with the main electronic document you turn in; in that document, be sure you paste the sharing URL.
• If you've chosen a high-fidelity prototype, use a WYSIWYG GUI builder (software that lets you place predesigned buttons, menus, scrollbars, and other user interface elements onto a screen design, e.g., Visual Basic, Visual C++, Dreamweaver, FrontPage, Interface Builder or RapidWeaver or OmniGraffle (on the Mac)). Some of these tools are available on the ICS lab machines or for free trial download; nobody needs to purchase new software for this part. Even if neither partner is a proficient software user, you should try to learn your way around one of these tools. If you'd like to use Photoshop for this task, you may, but the tools listed above have built-in interface elements like windows, buttons, and so on, while in Photoshop you have to build them from the ground up. Incorporate your high-fidelity illustrations into the electronic document you turn in.
In half a page at most, describe your redesign and explain how it improves the original. Give reasons for each change that relate to what we've covered (i.e., not, "We think this looks cooler," but something like, "We used terms familiar to the user, following Nielsen's guideline of matching the system with the real world; we grouped similar tasks together visually, following the gestalt principle of using physical proximity to reinforce the closeness in meaning; we listed more available options on the first page, promoting recognition over recall (Nielsen) and following users' general preference for broad, shallow hierarchies over narrow, deep ones").
Combine all your group's written answers into one electronic document (plus the wireframe PDF export file in the low-fidelity case) and submit it via Checkmate. Make sure the document includes the names of both partners.