Interface Design & Usability Principles Flashcards
What are Norman’s 6 interaction design principles?
Visibility, Feedback, Constraints, Consistency, Affordance, Mapping
Visibility
Make functions/status clearly visible to users
Visibility examples
+ Clean login screen with only essential fields
- Unclear clickable elements
Visibility risks
Overloading users with info causing confusion
Feedback
Immediate response to user actions (e.g. visual, audio)
Feedback example
Message after a payment submission
Feedback vs Visibility
Feedback is reactive (post-action), visibility is proactive (ongoing status)
Feedback risk
Excessive feedback annoys users
Constraints
Limit user actions to prevent errors
Constraints examples
+ Disabling submit button until completion
+ Horizontal-only swipe in photo galleries
Constraints risk
Over-restriction frustrates users
Consistency
Uniformity in design (navigation, colours, buttons etc)
Consistency examples
+ Same button styles across pages
+ Standard date format
Consistency risk
Too much consistency stifles creativity
Affordance
Design suggests how to use an element
Affordance types
+ Explicit: Obvious (e.g. login button)
+ Hidden: Revealed on hover (e.g. dropdown)
- False: Looks usable but isn’t (bad design)
Affordance example
Trash bin icon = delete function
Affordance risk
Poor affordance misleads users
Mapping
Controls match their effects intuitively
Mapping example
Stove knobs aligned with burners, scrollbar position shows location on page
Mapping risk
Poor managing causes errors (e.g. confusing button layout)
How the principles work together
Visibility: shows what to do
Feedback: confirms actions
Affordance: guides interaction
Mapping: makes controls logical
Constraints: reduce mistakes
Consistency: builds user comfort
Nielsen’s 10 usability heuristics
- Visibility of system status
- Match real-world conventions
- User control & freedom
- Consistency & standards
- Error prevention
- Recognition over recall
- Flexibility & efficiency
- Aesthetic, minimalist design
- Help users recover from errors
- Help & documentation
- Visibility of system status
progress bars
- Match real-world conventions
familiar terms/icons
- User control & freedom
undo options
- Consistency & standards
common ui patterns
- Error prevention
confirmation dialogs
- Recognition over recall
show options, don’t rely on memory
- Flexibility & efficiency
shortcuts for experts
- Aesthetic, minimalist design
avoid clutter
- Help users recover from errors
clear error messages
- Help & documentation
accessible user guides
Constraints vs Affordances
Constraints actively restrict, negative affordance visually implies restriction
