Core Concepts
Usability
The ease with which users can learn and use a system to achieve their goals. Measured by effectiveness, efficiency, and satisfaction.
User Experience (UX)
The overall experience a person has when interacting with a product, system, or service, including emotions and attitudes.
Cognitive Load
The mental effort required to use an interface. Good design minimizes unnecessary cognitive load.
Affordance
The perceived properties of an object that suggest how it can be used. A button affords clicking.
Accessibility
Designing products so people with disabilities can use them. Includes screen readers, keyboard navigation, color contrast.
Prototyping
Creating preliminary versions of a design to test ideas before full implementation.
Heuristic Evaluation
A usability inspection method where experts evaluate a UI against established usability principles.
Worked Examples & Applications
Nielsen's 10 Heuristics: 1. Visibility of system status 2. Match between system and real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation
Fitts's Law: MT = a + b × log₂(2D/W) — The time to move to a target is proportional to the distance (D) and inversely proportional to the width (W). Larger, closer targets are faster to click.
Hick's Law: RT = a + b × log₂(n+1) — Decision time increases logarithmically with the number of choices. More options = slower decisions.
Practice Questions
Q: What is the difference between usability and UX? A: Usability focuses on effectiveness, efficiency, and satisfaction. UX is broader, encompassing emotions, perceptions, and the overall experience.
Q: Name three accessibility guidelines. A: 1) Provide alt text for images 2) Ensure keyboard navigability 3) Maintain minimum 4.5:1 color contrast ratio
Q: What is a wireframe? A: A low-fidelity visual guide that represents the skeletal framework of a page, showing layout and element placement without visual design.