CMSC 434 - Spring 2009
Introduction to Human-Computer Interaction
Prof Bederson


Homework #4: Design & Prototyping (100 points)
(Due 3/6/09, 11:59pm)

1) Web Design (50 points)

(10 points per site) a: Use The Wayback Machine at www.archive.org to examine how three major home pages changed over at least 5 years.
  • Count the number of links and the apparent screen size it was designed for. 
  • What other main design elements about the site changed?
  • Describe positive or negative aspects of how elements were grouped according to Gestalt theory.

(20 points) b: For one of the sites above that still uses poor grouping (by your judgement), redesign the home page to address your concerns.  You can use any technology you would like for this redesign including paper prototyping, Photoshop, Gimp, Word, any HTML editor, etc.  Whatever you do, your design must keep the same essential information and use no more space than the existing design.  Turn in a screenshot of the original design and your current design.

 

2) Paper-based Low Fidelity Prototype (50 points)

(30 40 points for a and b) a: Build a paper-based low fidelity prototype of the in-cart grocery cart scanner that you explored for homework #2.  You should not build a three-dimensional cart, but you should prototype all the essential elements of the interaction including any scanning hardware, displays, and physical buttons.

You should sketch the different elements of the interface on paper so that your interface can be used to simulate the main interactions (do not use screenshots or a computer authoring tool of any kind).

(10 points) b: Using the paper interface you just constructed and a copy machine (or a digital camera), provide a 10-20 frame storyboard or short video showing the key steps of using the cart.

(10 points) c: From your study of this interaction, briefly describe two ways to improve the current design. Explain all your answers.

Notes:

  • Follow all advice in the reading about paper prototypes and storyboards. You need to show that you learned something from the relevant lecture and readings.

  • Emphasize clarity and utility over beauty. All text must be readable and photocopies and photos must be clear enough to show what kind of materials were used to make them.

  • As an alternative to photocopies in step 2b, you're welcome to take digital photos or a short video showing the same thing. If you take photos, 1600x1200 is probably the ideal resolution. Use whichever method is easiest for you.

  • Attachments must be <10 MB. However, at 1600x1200, you can fit about 10 JPG images in 3.5 MB, so this shouldn't be a problem. If you want to take a video instead, put the video online at any site of your choosing, such as youtube.

  • Send any digital materials by email to the TA, with "CMSC434-hw4" in the subject line.

  • Turn in any paper materials in class. Your paper prototype should be in a sealed envelope with your full name written on it. If you made photocopies, submit those in class, too, stapled to the envelope with your actual prototype.