UX Design Essentials Cheat Sheet

User Experience (UX) encompasses all aspects of a user's interaction with a company's products and services, focusing on creating effective, efficient, and satisfying interactions. It's a multidisciplinary field that requires understanding user needs and designing solutions that address 'wicked problems'.

Core Principles

• UX is multidisciplinary, iterative, and a philosophy.
• UX is NOT just usability or a technology problem.
• Cost of fixing errors increases exponentially post-design.
• Wicked problems are complex, contested, and never fully solved.
• Empathy is crucial for understanding user needs.
• Information Architecture (IA) maps the site structure; UI is the on-screen interface.
• Visual design bridges information and interaction design.
• Focus on user needs and goals throughout the design process.

Action Steps

• Define the problem: Is it Tame (solvable) or Wicked (complex)?
• Gather user insights through research methods like interviews and surveys.
• Apply empathy to understand user motivations and pain points.
• Design for consistency and offer informative feedback.
• Prevent errors and permit easy reversal of actions.
• Reduce memory load by keeping information concise.
• Structure content logically using Information Architecture.
• Create wireframes to define layout and hierarchy.
• Develop visual design that aligns with branding and user perception.
• Test designs using methods like A/B testing and tree testing.

Key Terms

• UX (User Experience): All aspects of a user's interaction with a company, its services, and its products.
• Tame Problem: A problem that is clearly defined, solvable, and measurable.
• Wicked Problem: A complex, contested problem that is difficult or impossible to solve definitively.
• Usability: Effectiveness, efficiency, and satisfaction of users interacting with a product.
• Information Architecture (IA): The underlying organization and structure of content; the map of a site/app.
• UI Design: The visual aspects of an interface: layout, look, feel, and consistency.
• Interaction Design: The design of the interaction between users and products, focusing on the sequence of actions and feedback.
• Affordance: What an object enables a user to do; exists in the relationship between object and actor.
• Signifier: A design feature that communicates an affordance; deliberately perceivable.
• Metaphor (in UI): Design language that maps familiar real-world concepts to digital interfaces (e.g., desktop folders).
• Persona: A fictional character representing a target user group, based on research.
• Customer Journey Map: A visualization of a customer's relationship with a product over time, showing touchpoints and emotions.
• Wireframe: A low-fidelity representation of an interface's structure and hierarchy, without visual design elements.
• Card Sorting: A research method to understand users' mental models for organizing content (generative).
• Tree Testing: A research method to evaluate the findability of content within an IA (evaluative).

Pro Tips

• For mobile design: simple navigation, large touch areas (44-48px min), and consistency.
• Reduce clutter and avoid hover effects on mobile.
• Use simple forms for mobile interactions.
• Prioritize clear headings, bullets, and concise text for scannability.
• Mobile-first design ensures usability across all screen sizes.

Pitfalls to Avoid

• Confusing UX with just UI or usability.
• Treating wicked problems as tame problems.
• Excluding marginalized users from the design process.
• Overlooking the cost of fixing errors late in the development cycle.
• Designing based on assumptions rather than user research.
• Making users remember information between screens.
• Using technical jargon instead of user-friendly language.
• Ignoring the difference between what users say and what they do.
• Creating complex navigation that hinders findability.
• Using too many typefaces or inconsistent styling.

Myth vs Reality

• Empathy is the same as sympathy.: Empathy is understanding from the user's perspective; sympathy is feeling concern without full understanding. Empathy fuels connection, sympathy drives disconnection.
• Design thinking can solve all wicked problems.: Design thinking is helpful, but wicked problems often require structural or policy changes beyond typical design solutions. Empathy doesn't equal structural change, and prototyping doesn't always scale.
• Wireframes should include color and real text.: Wireframes are low-fidelity representations focusing on structure, hierarchy, layout, and navigation. Use placeholder boxes for images and bars for text; avoid color and real content.

Real World Examples

• A user trying to find contact information on a website.: Good IA and clear navigation (UI) allow the user to find it quickly. Poor IA or hidden contact details lead to frustration (UX failure).
• An online checkout process.: Clear steps, informative feedback (e.g., order confirmation), and easy error correction (Interaction Design) lead to a successful purchase (UX success). Confusing forms or lack of confirmation lead to cart abandonment (UX failure).
• A mobile app button.: A large, clearly labeled button (Signifier) that changes color when tapped (Feedback) affords pressing (Affordance), creating a positive interaction (UX).

Statistics

• Cost of fixing errors (Design phase): 1 unit
• Cost of fixing errors (Development): 10 units
• Cost of fixing errors (Testing): 100 units
• Cost of fixing errors (Post-launch): 1000 units
• Short-term memory capacity: 4-7 items
• Minimum touch target size (mobile): 44-48px

People

• Don Norman: Coined the term UX (Apple, 1990s)
• Frank Chimero: Author of quote: 'People ignore design that ignores people.'
• Brené Brown: Author of quote: 'Empathy fuels connection. Sympathy drives disconnection.'