UI/UX[BCS456C]

Module 5
UX Design Guidelines:Using and interpreting design guidelines, Human memory
limitations, UX design guidelines & examples, Planning, Translation, Physical action,
Outcomes, Assessment, Overall
UX (User Experience) Design Guidelines, covering core principles and best practices that
apply across digital products like websites, apps, and software interfaces.

Using and interpreting design guidelines

Using and interpreting UX design guidelines effectively requires understanding not just what the
rules are, but why they exist and how to apply them in different contexts. Here’s a breakdown to
help you use and interpret design guidelines with clarity and confidence:
1. Understanding the Purpose Behind Guidelines

Design guidelines are meant to:

 Ensure consistency across a product.

 Improve usability and accessibility.
 Speed up the design and development process.
 Reflect brand identity through design systems.

2. How to Use UX Design Guidelines

Step-by-Step Approach

Step Action Notes

Identify the relevant Use product-specific (e.g., iOS HIG, Material Design) or
1
guidelines universal (e.g., WCAG) guidelines
2 Match to the context Consider your user personas, tasks, and platforms
3 Adapt with rationale Adjust or break a guideline only with user-centered justification
4 Test your application Use usability testing or heuristics review to validate decisions
Document your
5 Helpful for team collaboration and future iterations
reasoning

3. Interpreting Specific Guidelines

Here’s how to interpret different types of guidelines with examples:

Visual Hierarchy Guideline

"Use size and contrast to highlight important information."

 Intent: Help users scan content quickly.

Asst.Prof Meghana V Page 1

 UI/UX[BCS456C]

 Interpretation: Make key calls-to-action (CTAs) bold, larger, or more colorful than
surrounding text.
 Adaptation: On a minimal UI, you might use spacing instead of heavy contrast.

Navigation Guideline

"Provide a clear indication of the user’s current location."

 Intent: Prevent users from getting lost.

 Interpretation: Use active states in tabs or breadcrumbs.
 Adaptation: For a mobile app, this may mean a highlighted tab icon rather than text.

Accessibility Guideline

"Ensure color is not the only means of conveying information."

 Intent: Help colorblind or visually impaired users.

 Interpretation: Add text labels, icons, or patterns.
 Adaptation: Even if your palette is visually distinct, include redundancies like status
icons.

When to Adapt or Break Guidelines

Break or modify a guideline only when:

 It conflicts with user research or task-specific needs.

 It limits accessibility or creates friction.
 You can justify it through A/B testing or usability testing.

⚠⚠ Always document the why. Product managers, devs, or QA will likely ask.

Tools for Applying Guidelines

 Design Systems: Material Design, Fluent UI, or your in-house library.

 Accessibility Tools: Axe, Lighthouse, WAVE.
 Prototyping Tools: Figma, Adobe XD (most allow shared libraries with guidelines
embedded).
 Documentation: Use tools like Notion or Zeroheight to centralize and interpret
guidelines for your team.

Human memory limitations:

Understanding human memory limitations is essential in UX design, as it helps create

interfaces that reduce cognitive load, avoid errors, and improve usability. Here’s a breakdown of
the most important concepts, and how they apply to design:

Asst.Prof Meghana V Page 2

 UI/UX[BCS456C]

Types of Human Memory

1. Sensory Memory

 Duration: A few milliseconds (visual) to 1–2 seconds (auditory).

 Implication: Don’t rely on fleeting stimuli—information should be persistent or
repeated.

2. Short-Term / Working Memory

 Capacity: 5–9 items (Miller’s Law), more realistically 4±1.

 Duration: 15–30 seconds without rehearsal.
 Implication: Limit choices, steps, and complexity per screen.

3. Long-Term Memory

 Capacity: Virtually unlimited.

 Retrieval: Requires cues, context, and repetition.
 Implication: Use recognizable patterns and visual cues to help users recall.

UX design guidelines & examples

List of UX Design Guidelines with real-world examples to illustrate how they are applied
effectively in digital products:

1. Keep It Simple (Simplicity)

�Guideline:

Eliminate unnecessary elements. Design should be as simple as possible to meet user goals
efficiently.

� Example:

Google Search homepage – Minimal distractions, just the search bar and a couple of buttons.

2. Use Recognition Over Recall

�Guideline:

Design interfaces that allow users to recognize options rather than forcing them to recall
information from memory.

� Example:

Asst.Prof Meghana V Page 3

 UI/UX[BCS456C]

Amazon's search autocomplete – Suggests previously searched terms and products to reduce
effort.

3. Provide Feedback

�Guideline:

Users should receive immediate feedback for every action.

� Example:

Instagram "like" animation – A heart icon fills instantly when tapped, showing the action was
successful.

4. Maintain Consistency

�Guideline:

Consistent design helps users learn faster and predict outcomes.

� Example:

Apple's Human Interface Guidelines – Tabs, buttons, and swipe gestures behave the same
across all iOS apps.

5. Prioritize Accessibility

�Guideline:

Design for users of all abilities by following WCAG standards (e.g., contrast, keyboard
navigation, screen reader support).

� Example:

LinkedIn – Provides text alternatives, keyboard-friendly navigation, and ARIA labels.

6. Provide Clear Navigation

�Guideline:

Make it easy to find and understand how to move through the interface.

� Example:

Spotify's bottom navigation bar – Easily switches between Home, Search, and Library, always
visible on mobile.

Asst.Prof Meghana V Page 4

 UI/UX[BCS456C]

7. Visual Hierarchy Matters

�Guideline:

Use size, color, spacing, and layout to prioritize the most important information.

� Example:

Airbnb – Uses large imagery and bold titles for listings, with supporting info in smaller text
below.

8. Design for Mobile First

�Guideline:

Prioritize mobile screens since many users will interact via phones.

� Example:

Twitter mobile app – Optimized interactions with thumb-friendly buttons, clear CTAs, and
vertical stacking.

9. Error Prevention & Recovery

�Guideline:

Prevent errors when possible, and make it easy to recover if they occur.

� Example:

Gmail's “Undo Send” – Gives users a few seconds to undo sending an email.

10. Use Progressive Disclosure

�Guideline:

Show only necessary information up front; reveal more details as needed.

� Example:

Slack channel settings – Basic options are shown first, with an "Advanced Settings" link for
more complex controls.

1.Planning

�Purpose:

Asst.Prof Meghana V Page 5

 UI/UX[BCS456C]

Define the problem, goals, users, and constraints.

�Activities:

 Stakeholder interviews
 Define user personas
 Set business and UX goals
 Identify key user tasks
 Map out project scope and timelines

� Example:

Planning a ride-sharing app: Identify primary users (riders, drivers), goal (easy trip booking), and
pain points (wait time, unclear pricing).

2. Translation

(Turning insights and strategy into design concepts)

�Purpose:

Translate user needs and goals into user flows, features, and structure.

�Activities:

 Create user journeys and task flows

 Build information architecture (sitemaps)
 Wireframe key screens
 Define content strategy

� Example:

Convert user journey (open app → book ride → track ride) into screen flows and interactions.

3. Physical Action

(Users interact with the interface — usability in action)

�Purpose:

Design and build interactive elements that enable users to take action.

�Activities:

 Design UI components (buttons, forms, navigation)

 Build interactive prototypes

Asst.Prof Meghana V Page 6

 UI/UX[BCS456C]

 Ensure accessibility and responsiveness

 Apply visual hierarchy and feedback cues

� Example:

Users tap ―Book Ride‖ button; app confirms ride with animation, shows real-time driver
location.

4. Outcomes

�Purpose:

What happens after the user’s action — both system response and user result.

�Activities:

 Provide success/failure feedback

 Trigger next step in user flow
 Confirm task completion or redirect
 Ensure system handles edge cases (e.g., error states)

� Example:

After tapping ―Pay,‖ the app confirms the transaction, sends a receipt, and updates ride history.

5. Assessment

(Evaluating whether the UX is effective and user-friendly)

�Purpose:

Evaluate user performance, satisfaction, and design success.

�Activities:

 Usability testing
 A/B testing
 Analytics review (task success rate, drop-off points)
 Heuristic evaluations

� Example:

Test shows users abandon ride booking at the payment screen. Redesign for simpler payment
flow.

Asst.Prof Meghana V Page 7