Principles of Graphic Design: Iterative Design, Evaluation Techniques, and Prototyping
Principles of Graphic Design
Simplicity
Contrast
Whitespace
Proximity
Alignment
Color
Typography
Iterative Design
Design guidelines reduce # of iterations
Set usability goals for your iterative design process
Evaluation Techniques
Evaluation
Tests usability & functionality
Occurs in lab or field
Evaluates design & implementation
At all stages in design life cycle
Heuristic Evaluation
Form of ‘expert evaluation’
Guided by heuristics (principles, guidelines)
Nielsen’s 10 heuristics
Visibility of system status/feedback
Match b/w system & real world (no jargon, follows irl conventions)
User control & freedom
Emergency exit for choosing wrong function
Supports undo & redo
Consistency & standards
Users shouldn’t wonder whether dif words/situations/actions mean the same thing
Follow platform conventions
Error prevention
Recognition rather than recall
Minimize user’s memory load – make objects/actions/options visible
Instructions should be visible or easily retrievable
Flexibility & efficiency of use
System caters to inexperienced & exp users
Allow users to tailor frequent actions
Aesthetic & minimal design
Avoid extraneous text
Help users recognize, diagnose, recover from errors
Error messages should be clear, precisely indicate problem, constructively suggest a solution
Help & documentation
Better if system can be used w/o documentation
Info should be easy to search, focused on user’s task, list concrete steps to be carried out, not be too long
Severity of usability problems
I don’t agree that this is a usability problem
Cosmetic problem
Minor usability problem
Major usability problem
Catastrophic problem
User Studies
Laboratory studies
Pros: equipment, controlled envrmt, focused testing of specific features
Cons: lack of context, poor user familiarity, difficult to observe cooperation
Field studies
Pros: natural envrmt, context retained, longitudinal study possible
Cons: lack of control, distractions, noise
Think alouds
Pros: simple, shows how system is actually used
Cons: subjective, act of describing may alter task performance
Retrospective think aloud
Transcript played back to participant for comment
Immediately: fresh in mind
Delayed: evaluator has time to identify questions
Necessary where think aloud not possible; useful supplement to TAs
Interviews & Questionnaires
Informal, subjective, relatively cheap
Pro: context-variable, issue exploration, user views, identify unanticipated problems
Con: subjective, time-consuming
Questionnaires
Set of fixed questions given to users
Pro: quick, reaches many users
Con: less flexible, less probing
Need careful design
Req info
Analysis of answers
Question styles
General, open-ended, scalar, MC, ranked
E.g. System Usability Scale (SUS) on Likert scale
Prototyping
Spiral model
Room built for several iterations of design process
Radial dimension: cost of iteration step (fidelity/accuracy)
Why prototype?
Cheaper & earlier feedback
Experiment w/ alternatives
Easier to change/throw away
Prototype fidelity
Low fidelity: omits details
High fidelity: more like finished product
Fidelity is multidimensional
Breadth (broad/narrow): proportion of features covered (horizontal)
Broad but shallow: features not fully implemented, limited choices, canned data, no error handling
Depth (deep/shallow): degree of functionality (vertical)
Deep but narrow: only enough features to fully implement certain tasks, superficial implementations for other features
Other dimensions: look & feel
Look: appearance/graphic design
Sketchy vs. polished
Feel: input method, physical methods which user interacts with prototype
Paper: pointing & writing feels different from mouse & keyboard
Low-fidelity for desktop app
Common prototyping techniques
Paper prototypes (vertical)
Fast & easy
Focuses on big picture
Natural interaction
Look & feel: low fidelity
Depth: high fidelity (backend is simulated)
What you can learn
Conceptual model: do users understand it?
Functionality: does it do what’s needed?
Navigation & task flow: can users find their way around?
Terminology: do users understand labels & conventions?
What you can’t learn
Final look: color, font, whitespace
Efficiency & technical feasibility
Scrolling
Exploration vs deliberation
Users are more deliberate w/ paper prototypes
Don’t explore as much
User may be less likely to say what they really think
Roles: computer, facilitator, observer
Wireframes
Line drawings of UI screens (hand drawn or computer-drawn)
Great tool for making paper prototype
Computer prototypes (horizontal)
Look & feel: high-fidelity
Depth: low-fidelity
Generally doesn’t have backend
What you can learn:
Most of what you can from paper proto – minus depth
Screen layout: clear/distracting? can users find important elements?
Colors, fonts, icons, other elements
Interactive feedback
Do users notice & respond to status bar messages, cursor changes, other feedback?
Techniques
Storyboard/wireframes: screenshots connected by hyperlinks
Form builder: real windows assembled from a palette of widgets
Draw real, working form interface
Pros: actual controls (not just pics), can hook into backend, can keep some code
Cons: limits thinking & design w/ standard widgets, less helpful for rich graphic interfaces e.g. circuit-drawing editor
Wizard of Oz: computer frontend, human backend
Wizard of Oz prototype
Software simulation w/ human in backend
Often used to simulate future tech
2 interfaces to worry about: user’s & wizard’s
Sketching & Storyboarding
Properties of Sketches
Quick, cheap, disposable, plentiful, minimal detail, ambiguous
If you can’t afford to throw it away, it’s prob not a sketch
Dialog w/ Sketch
Create: mind (new knowledge) -> sketch (new knowledge)
Read: sketch -> mind
Sketches are not prototypes
SKETCH
PROTOTYPE
Evocative
Didactic
Suggest
Describe
Explore
Refine
Question
Answer
Propose
Test
Provoke
Test
Tentative
Specific
Noncommittal
Depiction
Storyboards: capture the experience – not just the UI