Exercise 4: Prototyping

Question 1

Nielsen’s 10 heuristics

Answer 1

• Meet expectations
  
  • 1. Match the real world
  • 2. Consistency & standards
  • 3. Help & documentation
• The user is the boss
  
  • 4. User control & freedom
  • 5. Visibility of system status
  • 6. Flexibility & efficiency
• Handle errors
  • 7. Error prevention
  • 8. Recognition, not recall
  • 9. Error reporting, diagnosis, and recovery
• Keep it simple
  10. Aesthetic & minimalist design

Question 2

1. Match the real world

Answer 2

• Speak the user‘s language
  
  • Use common words, not techie jargon
  • Use application domain-specific terms where appropriate
• Don’t put limits on user-defined names
  
  • Example: 8 character limit on filenames is bad
• Allow aliases/synonyms in command languages
  
  • Different users rarely agree on the same name for an object or command
• Use metaphors
  
  • A well-chosen metaphor can be quite effective and appealing.

Question 3

2. Consistency and Standards

Answer 3

• Principle of Least Surprise
  
  • Similar things should look and act similar
  • Different things should look different
• Other properties
  
  • Consistent size, location, color, wording, ordering, …
  • “share price” in one place, “stock price” in another, and “stock quote” in a third
• Command/argument order
  
  • Noun-verb order
  • Verb-noun order
• Follow platform standards
  
  • Mouse based vs touch based
  • Natural scrolling

Question 4

3. Help and Documentation

Answer 4

• Users don’t read manuals
  
  • They prefer to spend time working toward their task goals, not learning about your system
• But manuals and online help are vital
  
  • Usually used when user is frustrated or in crisis
• Help should be: Searchable Context-sensitive Task-oriented Concrete Short

Question 5

4. User Control and Freedom

Answer 5

• Also called “Clearly Marked Exits”
• Users should be able to explore the interface
  
  • A good user interface provides a undo command
• Users should not feel trapped by the interface Long operations should be interruptible
• All dialogs should have a cancel button.

Question 6

5. Visibility of System Status

Answer 6

• Keep user informed of system state Cursor change
  
  • Spinning wheel
  • Selection highlight
  • Status bar
  • Don’t overdo it…
• Response time
• < 0.1 sec: seems instantaneous
• 0.1-1 sec: user notices, but no feedback needed
• 1-5 sec: display busy cursor
• > 1-5 sec: display progress bar

Question 7

6. Flexibility and Efficiency

Answer 7

• Provide shortcuts for frequent operations Keyboard accelerators
  
  • Command abbreviations
  • Styles
  • Bookmarks History

Question 8

7. Error Prevention

Answer 8

• Selection is less error-prone than typing
  
  • Misspellings become impossible
• But don’t go overboard…
• Disable illegal commands
  
  • Example: Copy is impossible if nothing is selected
• Avoid modes

Question 9

8. Recognition, Not Recall

Answer 9

• Use menus, not command languages
• Use combo boxes, not text boxes
• Use generic (polymorphic) commands where possible
  
  • Open, Save, Copy & Paste
• All needed information should be visible.

Question 10

9. Error Reporting, Diagnosis, and Recovery

Answer 10

• Be precise; restate user’s input
  
  • Not “Cannot open file”, but “Cannot open file named paper.doc”
• Give constructive help
  
  • why the error occurred and how to fix it
• Be polite and non blaming
• Not “fatal error”, not “illegal command”
• Hide technical details (stack trace) until requested.

Question 11

10. Aesthetic and Minimalist Design

Answer 11

• Good design is about Simplicity
  
  • “Less is More”
  • Omit extraneous info, graphics, features
  • Especially important on mobile devices!
• Good graphic design
  
  • Few, well-chosen colors and fonts
  • Follow color guidelines
  • Group with whitespace
  • Align controls sensibly
• Use concise language
  
  • Choose labels carefully

Question 12

Heuristic Evaluation

Answer 12

• Heuristic Evaluation is an application of Nielsen’s 10 heuristics
• Heuristic Evaluation is an inspection method
  
  • Different from user testing
  • Similar to the difference between code inspection and testing
• Performed by a usability expert
• Basic steps
  
  • Evaluator inspects the User Interface thoroughly
  • Compares User Interface against the 10 heuristics
  • Provides a list of usability problems.

Question 13

Good Heuristic Evaluation

Answer 13

• Justify every problem with a heuristic
  
  • You cannot just say “I don’t like the colors”
  • “Too many choices on the home page violates Nr. 10 Aesthetic & Minimalist Design”
• List every problem
  
  • If an interface element has multiple problems, list them all
• Go through the interface at least twice
  
  • Once to get the feel of the system
  • Again to focus on particular interface elements
• Don’t limit yourself to the 10 heuristics
  
  • Nielsen’s heuristics are a good start to compare against
  • But consider also limitations of humans in general, consider affordances, constraints, Fitts’s Law, perceptual fusion, color principles

Question 14

Prototyping Definition

Answer 14

• “Prototyping is externalizing and making concrete a design idea for the purpose of evaluation.“ (Bill Verplank in Muñoz & Miller-Jacobs, 1992, S. 579)
• „Prototypes are for traversing a design space, leading to the creation of meaningful knowledge about the final design […], and are purposefully formed manifestations of design ideas.“ (Lim et al., 2008, S. 3)
• “A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” (Wikipedia)

Question 15

Horizontal vs. Vertical Prototype

Answer 15

• Horizontal Prototypes
  
  • Show wide range of features
  • Horizontal integration: Bottom Up, Top Down
  • Used in linear processes: No full implementation up to the end
  • Executable
 Prototype
  • Database
• Vertical Prototypes
  
  • Show small range of features (scenario, user story)
  • Full implementation of these features
  • Vertical Integration
  • Used in agile processes

Question 16

Review: Revolutionary vs. Evolutionary Prototyping

Answer 16

• Revolutionary Prototyping: Get user experience with a throwaway version
  
  • Advantage: Can be developed in a short amount of time.
  • Disadvantage: Users may have to accept that features in the prototype are expensive to implement
• Evolutionary Prototyping: Used as the basis for the implementation of the final system
  
  • Advantage: Short time to market
  • Disadvantage: Can be used only if target system can be constructed in a prototype

Question 17

Low vs. High Fidelity Prototypes

Answer 17

Low Fidelity

• Advantages
  
  • Easy to produce •
  • More feedback
  • No design decisions
• Disadvantages
  
  • Mostly not reused
  • Important details are ignored

High Fidelity

• Advantages
  
  • More Realistic
  • More impressiv
  • More problems can be identified
• Disadvantages
  
  • May cause much effort
  • Less feedback
  • High expectations

Question 18

Summary

Answer 18

• Benefits of Prototyping
  
  • Prototypes allow you to get early feedback —> using them saves time while developing
  • Prototypes are often easier to understand than text of diagrams —> they make communication easier
  • Prototypes are a useful tool for requirements validation —> they show possible implementation issues
  • Prototyping helps to improve the usability
• Prototyping Risks
  
  • In case of high fidelity prototyping: one may limit himself to use only standard GUI elements
  • Wrong expectations about the progress of nonprogrammer
  • User confusion of prototype and finished system
  • Developer attachment to prototype