Comprehensive Guide to UI/UX Design and HCI

Fundamentals of UI/UX and Human-Computer Interaction

  • User Interface (UI) vs. User Experience (UX):

    • UI (User Interface): Refers to the visual and interactive elements of a digital product. It encompasses the layout, colors, typography, buttons, icons, and other design elements users see and interact with on screen. UI designers focus on creating visually appealing and easy-to-navigate interfaces, including choosing color palettes, fonts, and organizing page layouts.
    • UX (User Experience): Deals generally with a user's overall experience with a product or service. This includes the user's perceptions, emotions, attitudes toward the product, and overall satisfaction. UX designers focus on user research to identify goals, needs, and behaviors through "requirements gathering."

  • Human-Computer Interaction (HCI):

    • Definition: A discipline concerned with the design, evaluation, and implementation of interactive computing systems for human use and the study of major phenomena surrounding them.
    • Golden Principle: People should come first.
    • The Three Main Actors:
      • Human: Can be an individual or a group. Humans have limited capacity to process information. They receive information and give responses via input/output channels (visual, auditory, movement), store information in short-term and long-term memory, and process information via reasoning, problem-solving, and skill acquisition. Capabilities are influenced by emotion and health.
      • Computer/Machine: Includes any electronic device (hardware and software). It involves input devices (keyboards, speech, handwriting), output devices (screens, speakers, printers), and processing power (the effects of systems running too fast or too slow).
      • Interaction: Any direct or indirect communication between human and computer. Interaction models translate user desires to system actions. Ergonomics focuses on physical characteristics, UI on visual design, and UX on the overall experience.

  • Goals and Importance of HCI:

    • Primary Goal: To develop or improve the safety, utility, effectiveness, efficiency, and usability of systems that include computers.
    • Impact: HCI affects effectiveness, productivity, morale, and safety. Good design focuses on the user rather than the developer.
    • Real-World Consequences of HCI:
      • Safety (Negative Example): In 1989, near Leicestershire, England, on the M1 motorway, a pilot shut down the wrong engine, causing a crash that killed 47 people.
      • Economic (Positive Example): NYNEX (a telecommunication company in Italy) improved helpdesk operator interface usability, reducing process time by 1 sec1\,\text{sec} per call, resulting in a benefit of $3,000,000\$3,000,000 per year.

The Software Development Life Cycle (SDLC) and Design

  • SDLC Generic Model Phases:

    1. Planning
    2. Analysis
    3. Design (The primary stage for UI/UX interventions)
    4. Development
    5. Integration & Testing
    6. Implementation
    7. Maintenance

  • Core Skillsets:

    • UX Skills: Product strategy, user research, information architecture, testing and iteration, empathy, collaboration, design thinking, and prototyping.
    • UI Skills: Color theory, typography, design patterns, interactivity, and animation.

Usability Principles and Requirements

  • Defining Usability: The effectiveness of users achieving tasks while using software. A usable system is easy to use, easy to learn, easy to remember, efficient, safe, and enjoyable.

  • Risks of Bad Design: Can be annoying, frustrating, or deadly; increases data entry mistakes; makes functions inaccessible; leads to system failure through user rejection.

  • Measuring Usability (ISO 9241):

    • Time to learn.
    • Speed of performance.
    • Rate of errors.
    • Retention over time.
    • Subjective satisfaction.

  • Usability Requirements Analysis:

    • Ascertain User Needs: Define tasks/subtasks, frequency of use, and environment.
    • Reliability: Actions must function as specified, data must be correct, updates must work, and privacy/security must be ensured.
    • Standardization, Integration, Consistency, Portability:
      • Standardization: Common UI features across platforms (Apple, Web, Windows).
      • Integration: Shared file formats across packages.
      • Consistency: Common terms, units, layouts, and colors within an application.
      • Portability: Converting data across hardware/software environments (HTML, PDF, ASCII).

Design Frameworks and Interactive Guidelines

  • Hick’s Law: States that the greater the number of choices, the longer it takes to make a decision. Simpler solutions satisfy users more.

    • Solutions: Reduce menu elements into categories; highlight search and filter; break long forms into manageable steps; limit excessive customization.

  • Shneiderman’s Eight Golden Rules:

    1. Strive for Consistency: Use identical terminology (menus, prompts) and visual layouts (fonts, colors).
    2. Enable Shortcuts: Use abbreviations and function keys for expert users to increase pace.
    3. Offer Informative Feedback: Provide system feedback for every action (e.g., progress bars like "About 25 seconds remaining").
    4. Design Dialog to Yield Closure: Organize actions into groups with a beginning, middle, and end to provide a sense of accomplishment.
    5. Offer Simple Error Handling: Prevent serious errors and provide comprehensible instructions for recovery.
    6. Permit Easy Reversal of Actions: Include an undo feature to relieve anxiety and encourage exploration.
    7. Support Internal Locus of Control: Allow users to feel like they are initiators of action, not responders.
    8. Reduce Short-Term Memory Load: Keep displays simple; users should not have to remember information from one screen to use on another.

  • Norman’s 7 Principles:

    1. Knowledge in World/Head: Information should be apparent; use clear, concise language.
    2. Simplify Task Structure: Minimize irrelevant information and group choices.
    3. Make Things Visible: Always give feedback about the state of the system.
    4. Get Mappings Right: Relationship between a control and its effect should be clear (e.g., folder icons for documents).
    5. Exploit the Power of Constraints: Prevent errors by limiting user control (e.g., validating email addresses twice).
    6. Design for Error: Assume errors will happen, describe the problem briefly, and aid recovery.
    7. Standardize: Do not "reinvent the wheel" if a standard behavior already exists.

Nielsen’s 10 Usability Heuristics

  1. Visibility of System Status: Keep users informed through immediate feedback.
  2. Match Between System and Real World: Use user-familiar language and natural mapping for controls.
  3. User Control and Freedom: Support Undo/Redo and provide clear exit paths (Cancel buttons).
  4. Consistency and Standards (Jakob's Law): Users prefer your site to work like others they know. Use standard patterns (e.g., blue underlined text for links).
  5. Error Prevention: Eliminate error-prone conditions or require confirmation (e.g., warning before sending an email to "all").
  6. Recognition Rather Than Recall: Make elements and actions visible so users don't have to remember details between screens.
  7. Flexibility and Efficiency of Use: Provide accelerators (shortcuts, drag-and-drop, autocomplete) for expert users.
  8. Aesthetic and Minimalististic Design: Focus on essentials; avoid "noisy" or crowded designs. Minimalist design provides maximum utility.
  9. Help Users Recognize, Diagnose, and Recover from Errors: Use plain language (no error codes), bold red text, and constructive solutions.
  10. Help and Documentation: Content should be easy to search, task-focused, and concise.

Prototype Design and Fidelity

  • Purpose of Prototyping: To elicit, clarify, validate, and negotiate requirements; to test ideas (A/B testing); to check feasibility and usefulness; to get early feedback earlier.

  • Definition of Fidelity: The level of detail, functionality, and realism in a prototype. It conveys the look-and-feel of the final product.

  • Dimensions of Fidelity:

    • Breadth (Horizontal Prototype): The percentage of features covered. High breadth includes many features; low breadth might have only enough for specific tasks (e.g., a word processor omitting spell-check).
    • Depth (Vertical Prototype): The detail of implementation and logic (back-end). Low depth might include "canned responses" (always printing the same text) or lack error handling (crashing if a printer is offline).
    • Look: The appearance (e.g., hand-sketched is low fidelity; high fidelity looks like the finished product).
    • Feel: The physical method of interaction (e.g., pointing at paper is low fidelity; interacting with a tablet is high fidelity).

  • Types of Fidelity:

    • Low Fidelity: Simple, low-tech (sketches, wireframes, storyboards). Omits details.
    • Medium Fidelity: Limited functions, more visual detail. Static renderings closer to the solution (mockups).
    • High Fidelity: Detailed, clickable, software-based version that looks and feels like the final product.

Wireframes vs. Mockups vs. Prototypes

  • Wireframes: Low-fidelity blueprints (gray boxes). They outline structure, layout, and typographic hierarchy. They are fast and cheap (no code investment).
    • Learnings: Functionality, navigation, task flow, screen contents.
    • Limitations: Missing colors, fonts, interaction feel.
  • Mockups: Static but realistic renderings. Add logos, color schemes, fonts, and icons to wireframes. They encourage detailed visual critique but take more time to create.
  • Design Prototypes: Functional, clickable software versions. Usually horizontal (covering many features) but lacks a true backend (low depth) due to time constraints.

Universal Usability and Accessibility

  • Diversity in Users: Interfaces should handle variations in background, ability, motivation, personality, and culture.
  • Legal Requirements: The 1998 Amendment to the Rehabilitation Act ensures federal access to IT for people with disabilities.
  • Physical and Cognitive Variation:
    • Vision: Blindness, low-vision, color-blindness (needs: screen magnification, color coding, bill-readers).
    • Hearing: Deafness, limited hearing.
    • Mobility: Ambidexterity, elderly users (needs: head-mounted optical mice, mouse alternatives).
    • Learning: Dyslexia, attention deficit (needs: text-to-speech, font-size adjustments).

Industry Tools

  • General Tools:
    • Figma: (https://www.figma.com/)
    • Canva: (https://www.canva.com/)
    • Adobe Illustrator: (https://www.adobe.com/products/illustrator.html)
  • AI-Enhanced Tools:
    • Designs.ai: (https://designs.ai/en)
    • Visily.ai: (https://www.visily.ai/)

Questions & Discussion

  • Discussion Prompt: Identify a website with substantial HCI design choices and discuss whether it is good or bad. Does it focus on the user or the developer?
  • Interactive Design Scenarios: Discuss why a pilot might shut down the wrong engine or why reducing call times by even one second has major financial impacts for companies like NYNEX.
  • Self-Reflection: Is UI/UX the same thing? Why is the SDLC relevant to designers?
  • Homework: Research the concept of Storyboarding as a low-fidelity prototyping method.