2. The Five Principles of Interaction Design
1. Consistency
2. Visibility
3. Learnability
4. Predictability
5. Feedback
3. Consistency
■ Consistency is expressed throughout the following:
■ COLOR & PATTERN • Black, Grey or Blue Colors • Plenty of negative space
■ SIZE & ROTATION • scaling • skewing •positioning
■ SHAPE & PROPORTION • Clean Lines • Simple Buttons
■ BEHAVIOR •Transitions, rollovers, tooltips, etc. behave consistently •Allows the
visitor’s prior experience for ease of use
■ VOICE • Labels and terms should be the same throughout • Content and imagery –
photos, illustrations, and icons – All have a stable and consistent style.
■ UI PATTERN • Content may change, but interaction and processes don’t • Patterns of
interactions and outcomes become consistent (and predictable)
4. Example of consistent web design
Why is this website a good example of
consistent design
• The white space in the header is equally divided.
• The typography is consistently aligned, flush left
with a ragged right.
• The persistent paginated navigation at the top is
both clever and familiar.
• Images for posts are always black and white.
Website: 52 Weeks of UX
5. Visibility
■ Good visibility, according to David Hogue’s principles, means that obvious
prompts and cues are present, which:
■ Lead the user through an interaction
■ Guide them through a series of tasks
■ Indicate what possible actions are available to them
■ Communicate the context of the situation.
6. Example of visible web design
Website: Asos
Why is this website q good example of visible
design
• It lead the user through an interaction
• It guide them through a series of tasks
• It Indicate what possible actions are available to them
• It communicate the context of the situation.
7. Learnability
■ The learnability can be measured in the following ways:
■ Effectiveness:The number of functions learned, or the percentage of users who
successfully learn and use the product.
■ Efficiency:The time it takes someone to learn (or re-learn) how to use a product, and
their efficiency in doing so.
■ Satisfaction:The perceived value the person associates with their investment (time,
effort, cost) in learning how to use the product.
■ Errors: Number of errors made, the ability to recover from those errors and the time it
takes to do so
8. Example of learnable
web design
Website: Google
Why is this website q good example of
learnable design
Effectiveness and satisfaction without any error,
Google is probably the best search engine in the
market with no doubts.
9. Predictability
■ Natoli states “The sense of comfort that is created as a result is a critical factor in
keeping people on the site, fully engaged and moving forward.A sense of control –
which is a hardwired cognitive requirement in the brain – speeds task completion and
makes people feel good about what they’re using, what they’re doing and what they’ll
be able to accomplish.”
10. Example of Predictable
web design
Website: Nike
Why is this website q good example of predictable
design
• provided a strong sense of place
• set the correct expectations
• made it possible for people to accurately predict the
outcomes of their interactions.
11. Feedback
■ Feedback communicates the results of any interaction, making it visible and
understandable. Its job is to give the user a signal that they (or the product) have
succeeded or failed at performing a task
■ According to Hogue, feedback answers questions across four categories:
■ Location:Where am I?
■ Current Status:What’s happening — and is it still happening?
■ Future Status:What will happen next?
■ Outcomes & Results:What just happened?
12. Example of feedback
web design
■ Why is this website q good example of predictable
design
■ Users know where am I
■ Users know what’s happening — and is it happening
■ Users know what will happen next
■ Users know what just happened
Website:ECC
