Pick a partner who is also enrolled in the class. Together, find three different web sites that perform the same function: any type of site, such as travel sites (expedia.com, orbitz.com,
kayak.com), book sites (amazon.com, barnesandnoble.com, powells.com/), departmental home pages (anthropology.uci.edu, anthro.ucla.edu, anthro.ucsd.edu), government sites (whitehouse.gov,
www.number10.gov.uk, www.elysee.fr), anything (but not the sites we discussed in class).
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.
Analyze the sites in terms of external consistency. Are there clear norms or standards that are evident across the sites? Identify at least 3 external consistencies or inconsistencies across the
sites.
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.
Write up your analysis from Part B. In the write-up, you should:
• Provide a brief description of the 3 sites you chose
• Identify the 3 forms of external consistency and write a brief explanation of each
• Briefly describe your hypothetical user
• Briefly describe the user’s goals and task
• Identify the fastest and slowest website for your chosen task, and explain why they are fast or slow. Provide screen shots of the steps involved for these 2 sites. As always, give reasons
that relate to usability topics 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.
Your write-up (not including screenshots) should be approximately 1 page (about 250 words) long.
Part C
With your partner, 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).
Steps to take (not items to turn in):
1. 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.
2. 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.
3. 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.
4. If you’ve chosen a low-fidelity prototype:
Create a mockup of your redesign using (Links to an external site.)Links to an external site.Balsamiq (Links to an external site.)Links to an external site., Moqups (Links to an external site.)
Links to an external site., Mockingbird (Links to an external site.)Links to an external site., or similar wireframe mockup tool. These tools help you build 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. (Note: These tools all have free trial periods, typically for one month, They tools are pretty similar and you can
choose whichever you want.)
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 mockup together. When you’re done, export your work to a PDF file and also obtain a URL for your design
from the mockup tool if possible (Note: If this is not possible with the tool you’ve chosen, please email the TAs and we can make alternate arrangements). Submit that PDF file along with the main
electronic document you turn in; in that document, be sure you paste the URL where your design is hosted.
4. 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, such as Visual Basic, Visual C++,
Dreamweaver, FrontPage, Axure, Interface Builder, RapidWeaver, OmniGraffle, etc.). 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 or PowerPoint for this
task, you may, but the tools listed above have built-in interface elements like windows, buttons, and so on, while in Photoshop or PowerPoint you have to build them from the ground up. Incorporate
your high-fidelity illustrations into the electronic document you turn in.
5. 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”).