2.18.09 HCI

Feedback on Scenario assignment:

How to decide on the right level of detail?

• Could someone who has never seen your system imagine your persona using it?
• You can assume that you don't need to describe very common knowledge
• example: what it means to 'click' or 'type' or change text
  
• Does your scenario inform your design?

Today's lecture:

Mockups

• Definitions
• Pictures of screens as they would appear at various stages of user interaction
• Very early prototypes made of low-fidelity materials
• Usually on paper; don't go through and do the programming
  
• Prototypes with limited interactions and content
• Typically Paper (or Cardboard)
• drawn or created with software tools
• PPT, Photoshop, Pencil
• Omnigraffle is popular for MACs
• Use different pages for new windows

Mockups = Low-Fidelity Prototypes = Paper Prototypes

Example Mockups

PDA travel application

• http://www.youtube.com/watch?v=Bq1rkVTZLtU&NR=1

Website design (Not in English …)

• http://www.youtube.com/watch?v=4WbxisFDYk4&feature=related
• http://www.youtube.com/watch?v=AtfWM2jRS2w
  

Google Reader (Demonstration Prototype)

• http://www.youtube.com/watch?v=VSPZ2Uu_X3Y

Mockups

• Purpose
• Facilitate design evaluation BEFORE spending lots of time and money on a high-fidelity design
• Reduces programming time
• Can save money by identifying changes early
  

• Concrete design improves feedback/evaluation
• Prototyping: Same quality with 40% less code & 45% less effort (Boehm, Gray, Seewaldt, 1984)

• Use whatever is fast and easy for *you*
• Hand drawn?
• PowerPoint?
• Photoshop?
• Pencil (add-on to Firefox)
• Supports rapid paper prototyping for web/software interfaces
  

https://addons.mozilla.org/en-US/firefox/addon/8487

Check out Omnigraffle.

Local vs. Global Mockups

• Local
• Target selected aspects of the system
• Identify KEY issues. What is most tricky?!
• What terms to use in menus
• How to provide feedback, etc.
  

• Global
• Overall interaction with your system
• More holistic in nature
• Covers numerous tasks with the same prototype

Vertical vs. Horizontal

• Vertical <-> Local
• Implement one section of your system in detail
• Leave the rest as low-fidelity
  

• Horizontal <-> Global
• Implement all of your system in detail at high levels
• Make all high-level features interactive
• Leave in-depth content unspecified
• E.g., actual description of grants, actual help files

High-fidelity Prototypes

• Also known as
• Prototypes
• Version 0 systems
  

• Use after you have clarified your design requirements
• A working release of your system
• Developed with same tools as final system
• May lack some functionality/content

Working with your Mockups

• Evaluating without users
• Discuss readings
  

• Issues for creating mockups?
• (Next week: Cognitive Walkthroughs)

Hands-On Work

• Begin mockups for your system
• Decide on your design method
• Our focus is on the quality of your design (not the method you used to mock it up)
  

• Target 2+ tasks from your Design Briefs
• Eventually you want your mockups to cover all tasks
  

• Work on Design Briefs
• Due next week
• (No reading assignment this week)

Cognitive Walkthrough and Heuristic Evaluation (need to choose which will be used for which).

Should partner up for evaluation purposes on project to use evaluations.