Unit 5

1. Quality of Service

a. Models of Response Time Impacts

• Response time: How long the system takes to respond to a user action.

• Types of response time:

o Instant (<0.1 sec) – Feels immediate (like clicking a button).

o Immediate (0.1–1 sec) – Slight delay, but still smooth.

o Delayed (>1 sec) – Noticeable wait; may need progress indicators.

• Impact models:

o Direct control model: Fast response helps user feel in control.

o Error-prone model: Slow systems cause user frustration and more mistakes.

o System pace model: If slow, user slows down too, reducing productivity.

b. User Productivity

• Productivity is affected by:

o Fast and consistent response time.

o Less waiting = More tasks completed.

o Delays can distract or confuse users.

• Goal: Make system speed match the speed of human thinking or action.

c. Variability in Response Time

• Inconsistency in response time is worse than slow but predictable performance.

• Example: Sometimes a page loads in 2 sec, other times in 10 sec – users get
frustrated.

• Stable systems are easier to use, learn, and trust.

a. Error Messages

• Should be clear, polite, and helpful.

• Example: Instead of “Error 404,” use “Page not found. Check the link or try again.”

• Avoid technical terms.

• Tell the user what went wrong and how to fix it.

b. Display Design

• Show only what is necessary – avoid clutter.

• Use grouping, alignment, and white space to improve clarity.

• Fonts, icons, and labels should be readable and meaningful.

c. Web Page Design

• Keep it simple, fast, and mobile-friendly.

• Use headings, menus, and links for easy navigation.

• Follow standard layouts (users expect menus on top or left).

• Use visual hierarchy (important things should stand out).

d. Window Design

• Each window should have a clear purpose.

• Use modal windows for tasks needing full attention.

• Avoid too many pop-ups or overlapping windows.

• Keep interface consistent across all windows.

e. Color

• Use color to highlight or group things, not just for decoration.

• Use contrast: Light text on dark background or vice versa.

• Be mindful of color blindness (avoid relying only on red/green).

• Stick to a limited color palette to avoid confusion.

Information visualization means presenting data visually (like charts, graphs, maps) to help
users understand and analyze information quickly.

a. Data Type by Task Taxonomy (Proposed by Ben Shneiderman)

This model helps designers decide how to show data based on what kind of data it is and
what the user wants to do with it.

Data Types:

1. 1D – Linear data (e.g., text, time series).

2. 2D – Spatial data (e.g., maps, images).

3. 3D – 3D models or spaces (e.g., virtual tours).

4. Temporal – Time-based data (e.g., sales over months).

5. Multidimensional – Multiple variables (e.g., Excel tables).

6. Tree – Hierarchical data (e.g., folder structures).

7. Network – Relationships (e.g., social networks, links between webpages).

User Tasks (What users want to do with the data):

1. Overview – Get a summary or big picture.

2. Zoom – Focus on a part of the data.

3. Filter – Show only data that meets some criteria.

4. Details-on-demand – Click to get more info about an item.

5. Relate – See how different data items are connected.

6. History – Keep track of actions or steps taken.

7. Extract – Save or use data for another purpose.

Example: In Google Maps (2D data):

• Overview: See whole city.

• Zoom: Zoom in on a street.

• Filter: Show only restaurants.

b. Challenges for Information Visualization

1. Too much data (Information overload):

o Hard to display large or complex datasets in a clear way.

2. Choosing the right visualization:

o Wrong charts can confuse users (e.g., pie chart for trends is bad).

3. User diversity:

o Different users may interpret data differently or have different goals.

4. Screen size limitations:

o Designing for mobile, tablets, desktops all need adjustments.

5. Interaction complexity:

o Advanced tools might require training or be hard for beginners.

6. Real-time data:

o Updating visualizations quickly and smoothly can be challenging.

7. Accessibility:

o Visualizations should work for color-blind or visually impaired users.

c. Societal and Individual Impact of User Interface

Societal Impact:

1. Increased access to information:

o Interfaces like websites and apps allow more people to access education,
news, and services.

2. Digital divide:

o Poorly designed interfaces can exclude older adults or non-tech-savvy users.

3. Cultural considerations:
 o UI must be localized (language, colors, icons) to suit different regions.

4. Influence on communication:

o Social media UIs shape how people interact, share, and form opinions.

5. Data privacy concerns:

o UIs must clearly show what data is collected and allow user control.

Individual Impact:

1. Ease of use and satisfaction:

o Good UIs reduce stress, make tasks enjoyable (e.g., online shopping,
banking).

2. Productivity:

o Professionals work faster and better with efficient UIs (e.g., doctors using
digital health records).

3. Mental and emotional impact:

o Bad UIs can cause frustration, errors, or even accidents (e.g., in aviation or
healthcare).

4. Accessibility:

o Inclusive UI helps people with disabilities (screen readers, voice input, etc.).

4. Information Visualization

Usability evaluation helps assess how easy and efficient a user interface is for real users.
These methods are typically used during different phases of the design process.

a. Usability Testing
• What: Real users complete tasks while observers collect data.
• Purpose: Identify pain points, measure task success, time on task.
• Example: Testing a mobile banking app with 5 users to find navigation issues.
b. Heuristic Evaluation
• What: Experts evaluate the interface using predefined heuristics (e.g., Nielsen’s 10
usability heuristics).
• Purpose: Quickly catch common usability issues without users.
• Example: Checking if error messages are clear, or if the interface maintains
consistency.
 c. Cognitive Walkthrough
• What: Experts simulate a user's thought process step-by-step through tasks.
• Purpose: Evaluate how easy it is for first-time users to learn the system.
• Example: Testing how easily a new user can upload a resume to a job portal.
d. Surveys & Questionnaires
• What: Collect subjective feedback from users on usability, satisfaction, etc.
• Purpose: Gather large-scale user sentiment and post-task feedback.
• Example: System Usability Scale (SUS), or a Google Form asking about task
difficulty.
e. Eye Tracking
• What: Monitors where users look on the screen.
• Purpose: Analyze attention, navigation flow, and visual hierarchy.
• Example: Testing whether users notice a CTA button on a landing page.
f. A/B Testing
• What: Comparing two versions (A and B) to see which performs better.
• Purpose: Test design changes based on real user behavior and data.
• Example: Testing two signup page designs to see which has more conversions.
g. Remote Usability Testing
• What: Users complete tasks from their own environment, often recorded.
• Purpose: Cost-effective and scalable, especially for diverse or global users.
• Example: Using platforms like Maze or Lookback to gather remote feedback.
h. Think-Aloud Protocol
• What: Users verbalize thoughts while performing tasks.
• Purpose: Gain insight into user decision-making and confusion points.
• Example: Watching a user narrate their process while shopping on an e-commerce
site.
i. Comparative Usability Evaluation
• What: Compare multiple systems or design versions.
• Purpose: Understand relative strengths and weaknesses.
• Example: Comparing two competing food delivery apps based on usability.

5. Industry Trends in UI/UX

1. Voice and Conversational UI – Designing for voice assistants and chatbots.

2. AI-Powered Personalization – Interfaces that adapt to user behavior.

3. Dark Mode & Accessibility – Inclusive design is a growing standard.

4. Microinteractions – Tiny animations that enhance user experience.

6. UX Writing & Content Design – Focus on words as part of the experience. 7. Data-
Driven UX – Using analytics and testing to drive design decisions.

Case Studies

• Airbnb – Improved booking flow through usability testing; result: higher conversion.

• Spotify – Uses A/B testing and machine learning for better playlist recommendations.

• Google Maps – Employs eye tracking to prioritize information visibility.

6. Professional Practices and Career Opportunities in UI/UX Design

Professional Practices

• Use design tools: Figma, Adobe XD, Sketch.

• Follow UX processes:

o Research → Wireframes → Prototypes → Testing → Final Design.

• Work with developers, product managers, and stakeholders.

• Stay updated with trends, user needs, and design patterns.

Career Opportunities

1. UI Designer – Focuses on look, layout, typography, colors.

2. UX Designer – Focuses on user research, flows, testing, structure.

3. UX Researcher – Studies user behavior and feedback.

4. Interaction Designer – Designs user interactions and animations.

5. Product Designer – Combines UI/UX with business goals.

6. UX Writer– Content, microcopy, tone of voice.

Skills needed:

• Creativity, problem-solving

• Empathy for users

• Knowledge of HTML/CSS (optional but helpful)