Unit V

User Experience (UX)

It is the process of designing products, systems, or services that provide

meaningful and enjoyable experiences to users.

It focuses on how users interact with a product, aiming to enhance

usability, accessibility, and overall satisfaction.

Five stages of UX Design :

1. Strategy (User Needs & Business Goals)
 Understanding what users want and what the business aims to
achieve.
 Conducting user research, market analysis, and defining objectives.
2. Scope (Functional & Content Requirements)
 Determining features, functions, and content needed in the product.
 Defining technical and content specifications to meet user needs.
3. Structure (Information Architecture & Interaction Design)
 Organizing content and designing navigation to ensure logical flow.
 Creating interaction models to guide users smoothly through the
experience.
4. Skeleton (Wireframes & Layout Design)
 Designing low-fidelity wireframes to visualize content placement.
 Ensuring a user-friendly interface that is intuitive and responsive.
5. Surface (Visual Design & Aesthetics)
 Defining typography, color schemes, icons, and branding elements.
 Enhancing usability through clear, attractive, and engaging design.
Visual Design Principles in UX:
Visual design plays a crucial role in UX by enhancing usability, guiding
user attention, and creating aesthetically pleasing experiences.
It combines typography, color, imagery, layout, and interaction design to
improve user engagement and satisfaction.
1. Hierarchy & Emphasis
What it is: Organizing elements to show their importance.
How to apply:
 Use size, color, and contrast to highlight key elements (e.g., CTAs).
 Arrange content in an F-pattern or Z-pattern for better readability.
 Ensure the most important information is easily scannable.
2. Contrast & Readability
What it is: Differentiating elements to make them stand out.
How to apply:
 Use dark text on light backgrounds (or vice versa) for clarity.
 Ensure sufficient contrast between text and background (WCAG
guidelines).
 Use bold fonts and color variations to emphasize key elements.
3. Consistency & Unity
What it is: Keeping design elements uniform across the product.
How to apply:
 Use a design system or style guide.
 Keep fonts, button styles, and spacing consistent.
 Ensure the layout follows a predictable pattern for familiarity.
4. Alignment & Spacing
What it is: Positioning elements for a clean, balanced look.
How to apply:
 Use a grid system for structured layouts.
 Maintain adequate whitespace to avoid clutter.
 Align text, buttons, and images logically to guide the user’s eye.
5. Color Psychology & Aesthetics
What it is: Using colors to evoke emotions and improve user engagement.
How to apply:
 Use brand colors strategically.
 Apply complementary color schemes for harmony.
 Consider color meanings (e.g., blue = trust, red = urgency).
6. Typography & Legibility
What it is: Choosing the right fonts and text styles for readability.
How to apply:
 Use a maximum of 2-3 fonts for clarity.
 Ensure font sizes are readable (e.g., 16px for body text).
 Maintain proper line height (1.5x font size) for better readability.
7. Accessibility & Inclusivity
What it is: Designing for all users, including those with disabilities.
How to apply:
 Use alt text for images.
 Ensure designs work with screen readers.
UI Interaction Design:
Design focuses on how users engage with digital interfaces, ensuring
smooth, intuitive, and efficient interactions.
It involves elements like navigation, feedback, responsiveness, and
accessibility to enhance user experience (UX).
Prototyping Tools:
1. Figma

🔹 Best for: Collaborative UI/UX design

🔹 Features:
 Cloud-based with real-time collaboration
 Interactive prototyping with smart animations
 Plugins for enhanced functionality
2. Adobe XD

🔹 Best for: Designers using Adobe ecosystem

🔹 Features:
 Auto-animate for smooth transitions
 Voice prototyping
 Integration with Photoshop & Illustrator
3. Sketch

🔹 Best for: macOS users, UI design teams

🔹 Features:
 Vector-based design tools
 Extensive third-party plugins
 Symbols for reusable components
4. InVision

🔹 Best for: Interactive prototypes and collaboration

🔹 Features:
 Clickable wireframes and animations
 Cloud-based sharing for feedback
 User testing integration
5. Axure RP

🔹 Best for: Advanced prototyping with logic and conditions

🔹 Features:
 Dynamic interactions and conditional logic
 Code-free animations
 Enterprise-level collaboration tools
6. Proto.io

🔹 Best for: High-fidelity interactive prototypes

🔹 Features:
 Drag-and-drop interface
 Usability testing support
 Mobile-friendly prototyping
7. Framer

🔹 Best for: Designers needing advanced animations

🔹 Features:
 No-code interactive prototyping
 Supports React components
 Smart components for reusable UI elements