Chapter 8: User Interface Design
Why User Interface Design is Important?
Definition
- User interface (UI) design (meaning: the process of creating how users interact with a software system) focuses on making systems easy, efficient, and safe to use.
Causes
- Users often judge a system by its interface, not its features
- Poor design leads to user errors, frustration, or abandonment
- Systems with bad interfaces are never used, even if they work well internally
Goals / Objectives
- To match the interface to users’ skills, experience, and expectations
- To reduce user errors
- To improve usability and user satisfaction
Importance
- A good UI can make or break a product
- Small UI improvements can lead to big financial gains
- UI problems are often treated as bugs, even if the code works perfectly
- Great UI ideas (like the web browser) can create new markets
Procedures
- Not specified in notes
Advantages & Disadvantages
-
Advantages:
- Increases user adoption and productivity
- Reduces training and support costs
- Builds user trust and loyalty
-
Disadvantages:
- Poor design can cause catastrophic errors
- Fixing UI issues late is expensive and time-consuming
Impact / Effect
- Directly affects whether a system is used or ignored
- Influences user stress levels and error rates
Examples
- Web browser: Replaced tedious tools like Gopher by offering a visual, easy-to-use interface
- AOL: Beat CompuServe not by better tech, but by friendlier UI
Key Takeaways
- Users care more about how a system feels than how it works inside
- Bad UI = users won’t use it, no matter how powerful it is
- Good UI design is a strategic advantage, not just decoration
Human Factors in Interface Design
Definition
- Human factors (meaning: how people’s natural abilities and limits affect their use of technology) are key considerations in UI design.
Causes
- Humans have biological and cognitive limits that affect interaction
- Ignoring these leads to mistakes, stress, and poor performance
Goals / Objectives
- To design interfaces that fit how people actually think and act
- To reduce memory load, errors, and confusion
Importance
- Respecting human limits makes systems safer and more efficient
- Prevents user frustration and system rejection
Procedures
- Consider these human traits when designing:
- Limited short-term memory (~7 items at once)
- Tendency to make mistakes
- Physical and cognitive diversity
- Different interaction preferences (text vs. visuals)
Advantages & Disadvantages
-
Advantages:
- Interfaces become more intuitive and forgiving
- Supports diverse users, including beginners and people with disabilities
-
Disadvantages:
- Requires more upfront research and testing
Impact / Effect
- Reduces user errors and stress
- Makes systems accessible to a wider audience
Examples
- Presenting more than 7 menu options overwhelms users → more mistakes
- Poor error messages increase stress → more errors in a cycle
Key Takeaways
- People remember only about 7 things at once—don’t overload them
- Everyone is different—don’t design just for yourself
- Mistakes are normal—design systems that help users recover
Graphical User Interface (GUI) Characteristics
Definition
- A Graphical User Interface (GUI) (meaning: a visual way to interact with a computer using pictures, icons, and pointers instead of text commands) uses visual elements to make interaction easier.
Causes
- Needed to replace hard-to-learn command-line systems
- Driven by advances in display and input hardware (e.g., mouse, color screens)
Goals / Objectives
- To provide visual, intuitive interaction
- To support multitasking and fast screen access
Importance
- Made computers accessible to non-technical users
- Enabled modern software experiences (web, apps, etc.)
Procedures
- GUIs use five core characteristics:
- Windows: Show multiple info areas at once
- Icons: Visual symbols for files, apps, or actions
- Menus: Lists of commands to choose from
- Pointing: Use mouse or touch to select
- Graphics: Mix images and text on screen
Advantages & Disadvantages
-
Advantages:
- Easy to learn and use
- Quick for beginners
- Allows switching between tasks
- Enables full-screen, fast interaction
-
Disadvantages:
- A GUI is not automatically good—poor design still causes errors
- Can be slow for expert users compared to commands
Impact / Effect
- Democratized computing for non-programmers
- But bad GUIs still lead to system abandonment
Examples
- Windows OS: Uses all five characteristics (icons, menus, windows, etc.)
- CAD software: Relies on direct manipulation via GUI
Key Takeaways
- GUI = visual interaction (windows, icons, menus, mouse)
- Great for beginners, but must be well-designed
- Just having a GUI doesn’t guarantee usability
Interaction Styles
Definition
- Interaction styles (meaning: different ways users can give input and receive output from a system) define how users communicate with software.
Causes
- Different tasks and users need different interaction methods
- Technology and context influence what style works best
Goals / Objectives
- To choose the most effective style for the task and user
- To balance speed, learnability, and error prevention
Importance
- The right style improves efficiency and satisfaction
- Wrong style can frustrate or confuse users
Procedures
- Four main interaction styles:
- Direct Manipulation
- Menu Selection
- Form Fill-in
- Command Language
Advantages & Disadvantages
-
Advantages:
- Direct manipulation: Fast, intuitive, gives immediate feedback
- Menu selection: Reduces errors, minimal typing
- Form fill-in: Simple for data entry, easy to learn
- Command language: Powerful, flexible, concise for experts
-
Disadvantages:
- Direct manipulation: Hard to program, needs visual metaphor
- Menu selection: Slow for experts, complex with many options
- Form fill-in: Takes lots of screen space
- Command language: Hard to learn, poor error handling, needs typing skill
Impact / Effect
- Affects learning time, error rates, and user satisfaction
- Influences who can use the system (beginners vs. experts)
Examples
- Direct manipulation: Video games, CAD systems
- Menu selection: Most office software (e.g., Microsoft Word)
- Form fill-in: Loan applications, stock control systems
- Command language: UNIX/Linux terminals, library systems
Key Takeaways
- Direct manipulation = drag, click, visual control (great for games/CAD)
- Menus = safe and simple, but slow for power users
- Forms = best for structured data entry
- Commands = fast for experts, but scary for beginners
Direct Manipulation
Definition
- Direct manipulation (meaning: interacting with on-screen objects as if they were real, physical things) lets users act directly on visual representations.
Causes
- Users want to feel in control and see immediate results
Goals / Objectives
- To make interaction intuitive and responsive
- To reduce learning time and errors
Importance
- Creates a strong sense of control and engagement
- Critical for creative or spatial tasks (design, gaming)
Procedures
- User performs actions (drag, click, resize) on visual objects
- System provides instant visual feedback
- Requires a clear visual metaphor (e.g., folder = file container)
Advantages & Disadvantages
-
Advantages:
- Users feel in control and less intimidated
- Short learning time
- Immediate feedback helps catch mistakes fast
-
Disadvantages:
- Hard to design a good visual model for complex data
- Navigation in large information spaces is challenging
- Computationally heavy and complex to program
Impact / Effect
- Increases user confidence and satisfaction
- But can overwhelm if the visual model is unclear
Examples
- Dragging a file to a trash can to delete it
- Rotating a 3D model in a CAD program
Key Takeaways
- Feels like “touching” digital objects
- Great for visual tasks, but needs a strong metaphor
- Always give instant feedback so users know what happened
Menu Systems
Definition
- Menu systems let users choose actions from a list presented by the system.
Causes
- Needed to simplify choices and prevent invalid commands
Goals / Objectives
- To limit user input to valid options
- To reduce typing and memory load
Importance
- Makes systems safer and easier for beginners
- Common in most general-purpose software
Procedures
- Present options via drop-down, pop-up, or toolbar menus
- User selects with mouse, keyboard, or touchscreen
- Can include shortcuts, submenus, icons, and mnemonics
Advantages & Disadvantages
-
Advantages:
- Users don’t need to remember command names
- Minimal typing required
- Errors are trapped by the interface
- Context-sensitive help can be provided
-
Disadvantages:
- Slow for experienced users
- Complex with many options (needs good organization)
- Hard to represent “AND/OR” logic in choices
Impact / Effect
- Lowers barrier to entry for new users
- But can frustrate experts who want speed
Examples
- Microsoft Word menus (File → Save, Edit → Copy)
- Touchscreen kiosks in restaurants or ATMs
Key Takeaways
- Menus show you what you can do—no guessing
- Great for beginners, but organize well to avoid clutter
- Always allow keyboard shortcuts for power users
Form-Based Interfaces
Definition
- Form-based interfaces present users with fields to fill in, like a paper form.
Causes
- Needed for structured data entry (e.g., registration, orders)
Goals / Objectives
- To collect specific information in a predictable format
- To guide users step-by-step through input
Importance
- Essential for business, admin, and transactional systems
- Reduces data entry errors
Procedures
- Display labeled fields (text boxes, dropdowns, checkboxes)
- User fills in values and submits
- Often includes validation and error highlighting
Advantages & Disadvantages
-
Advantages:
- Simple and familiar (like paper forms)
- Easy to learn
- Good for batch data entry
-
Disadvantages:
- Takes up lots of screen space
- Can feel rigid or slow for complex tasks
Impact / Effect
- Improves data quality and consistency
- But poor layout can confuse users
Examples
- Online student registration forms
- Bank loan applications
Key Takeaways
- Best for collecting structured info (names, dates, numbers)
- Keep forms short and clear
- Use labels and examples to guide users
Command Language Interfaces
Definition
- Command language interfaces require users to type text commands to control the system.
Causes
- Used when precision, speed, or automation is needed
- Common in early computing and expert tools
Goals / Objectives
- To allow powerful, flexible control with minimal interface
- To support scripting and automation
Importance
- Still vital for system administrators, developers, and power users
- Enables complex operations in few keystrokes
Procedures
- User types commands (e.g.,
ipconfig,ls -l) - System executes and returns text output
- Often supports command chaining and scripting
Advantages & Disadvantages
-
Advantages:
- Powerful and flexible
- Fast for experts
- Minimal screen space needed
- Easy to automate with scripts
-
Disadvantages:
- Hard to learn—users must memorize syntax
- Poor error recovery
- Requires typing skill
- Not suitable for occasional users
Impact / Effect
- Enables high productivity for experts
- But excludes beginners and increases error risk
Examples
- UNIX/Linux terminal
- DOS command prompt
- Database query consoles
Key Takeaways
- Commands = fast and powerful, but hard to learn
- Best for experts or automated tasks
- Often paired with menus in modern tools (e.g., keyboard shortcuts)
Information Presentation
Definition
- Information presentation (meaning: how system data is shown to users) involves choosing the right format (text, graph, color, etc.) to communicate clearly.
Causes
- Users need to understand data quickly and accurately
- Poor presentation leads to misinterpretation or missed insights
Goals / Objectives
- To match the display to the user’s task
- To highlight important changes or relationships
- To support both static and dynamic data
Importance
- Good presentation helps users make better decisions
- Critical for dashboards, reports, and monitoring systems
Procedures
- Decide based on:
- Is info static (unchanging) or dynamic (updates in real time)?
- Does user need exact values or trends/relationships?
- Must user act on changes?
- Is data textual or numeric?
- Choose between:
- Digital (exact numbers) vs. Analogue (graphs, gauges)
- Text, tables, charts, or visualizations
Advantages & Disadvantages
-
Advantages:
- Digital: Compact, precise
- Analogue: Quick “at-a-glance” understanding, shows trends and exceptions
-
Disadvantages:
- Digital: Hard to see patterns
- Analogue: Less precise, takes more space
Impact / Effect
- Affects speed and accuracy of user decisions
- Poor choices can hide critical information
Examples
- Table: Monthly sales numbers (2842, 2851, 3164…)
- Bar chart: Same data as bars—shows May dip clearly
- Gauges: Pressure and temperature meters showing relative levels
Key Takeaways
- Use numbers when precision matters
- Use graphs/gauges to show trends or compare values
- Always ask: “What does the user need to DO with this info?”
Use of Color in UI Design
Definition
- Color use in UI means applying color purposefully to improve understanding, not just for decoration.
Causes
- Color can highlight, organize, or warn—but misuse causes confusion
- Some users are color-blind or view on monochrome screens
Goals / Objectives
- To enhance usability, not just aesthetics
- To communicate meaning (e.g., red = danger)
- To support user tasks, not distract
Importance
- Color adds a powerful visual dimension
- But overuse or poor choices reduce readability and accessibility
Procedures
- Follow these guidelines:
- Don’t use too many colors
- Use color coding consistently (e.g., always red for errors)
- Design for monochrome first, then add color
- Let users control color settings
- Avoid clashing color pairs
- Use color change to show status (e.g., green = ready, red = error)
- Be aware of color blindness and cultural differences
Advantages & Disadvantages
-
Advantages:
- Highlights important info (alerts, changes)
- Groups related items visually
- Improves data comprehension in visualizations
-
Disadvantages:
- Overuse causes visual clutter
- Color-blind users may miss meaning
- Colors look different on various screens
Impact / Effect
- Good color use = faster understanding and fewer errors
- Bad color use = confusion, eye strain, or missed alerts
Examples
- Red error messages (universal danger signal)
- Green progress bar (success/ongoing)
- TARUC welcome screen (as shown in notes—likely uses color for branding)
Key Takeaways
- Less is more—use color sparingly and purposefully
- Always test in grayscale to ensure meaning is clear
- Red = danger, green = go—but check cultural context
Message Wording and Error Handling
Definition
- Message wording refers to how system messages (especially errors) are written to guide and inform users.
Causes
- Poor messages confuse or insult users
- Users have different experience levels and cultural backgrounds
Goals / Objectives
- To provide clear, helpful, and polite feedback
- To match message style to user skill and context
- To help users recover from errors quickly
Importance
- Error messages can make users love or hate a system
- Good wording reduces support calls and frustration
Procedures
-
Consider these factors:
- Context: What is the user doing now?
- Experience: Beginner vs. expert
- Skill level: Use familiar terms
- Style: Be positive, active, and polite—never funny or insulting
- Culture: Avoid phrases that offend in other regions
-
Provide two message types:
- Short/terse for experts
- Detailed/helpful for beginners
-
Let users control message detail level
Advantages & Disadvantages
-
Advantages:
- Builds user trust
- Reduces error recovery time
- Supports global users
-
Disadvantages:
- Requires more writing and testing
- Hard to balance brevity and clarity
Impact / Effect
- Good messages = users feel supported
- Bad messages = users give up or feel stupid
Examples
- Bad: “Error #27”
- Good: “Patient J. Bates is not registered. Click Retry to enter a name, or Help for more info.”
- Google sign-in: “The username or password you entered is incorrect.” (clear, polite, actionable)
Key Takeaways
- Never blame the user—say what went wrong and how to fix it
- Match tone to user skill (simple for newbies, short for pros)
- Always offer a way forward (Retry, Help, Cancel)
User Guidance and Documentation
Definition
- User guidance includes in-system help and external documentation that support users at different skill levels.
Causes
- Users need different help at different times
- No one reads manuals unless they’re easy and relevant
Goals / Objectives
- To provide just-in-time, relevant help
- To support beginners, experts, and admins with appropriate materials
Importance
- Reduces training costs and support requests
- Increases user independence and satisfaction
Procedures
-
Provide multiple documentation types:
- Introductory manual: “Getting started” for beginners
- System reference manual: Full feature guide for experienced users
- Installation manual: For system administrators
- Admin manual: Operation and maintenance guides
- Functional description: For evaluators (what the system does)
-
In-system guidance:
- Tooltips, error messages, context-sensitive help
Advantages & Disadvantages
-
Advantages:
- Meets diverse user needs
- Helps users learn and recover independently
-
Disadvantages:
- Creating good docs is time-consuming
- Docs become outdated if not maintained
Impact / Effect
- Good guidance = faster onboarding and fewer errors
- Poor docs = user frustration and abandonment
Examples
- Quick Start Guide for new users
- Advanced Search Manual for expert librarians
- Tooltips that explain icons on hover
Key Takeaways
- One size doesn’t fit all—provide help for beginners AND experts
- In-system help (tooltips, error messages) is more used than manuals
- Keep docs short, task-focused, and up to date
UI Design Principles
Definition
- UI design principles are core rules that guide the creation of effective, user-friendly interfaces.
Causes
- Based on decades of research into how people interact with technology
- Addresses common user frustrations and errors
Goals / Objectives
- To create interfaces that are predictable, efficient, and forgiving
- To respect user diversity and limitations
Importance
- These principles prevent common design mistakes
- They form the foundation of professional UI design
Procedures
- Follow these six key principles:
- User Familiarity: Use terms and concepts from users’ real-world experience
- Consistency: Same actions work the same way everywhere
- Minimal Surprises: System behavior should be predictable
- Recoverability: Users can undo mistakes easily
- User Guidance: Provide feedback, help, and error support
- User Diversity: Support different skills, cultures, and needs
Advantages & Disadvantages
-
Advantages:
- Leads to intuitive, low-error interfaces
- Reduces learning time
- Increases user satisfaction
-
Disadvantages:
- Requires discipline and user research
- May limit creative freedom (but for good reason)
Impact / Effect
- Interfaces feel natural and trustworthy
- Users stay longer and make fewer mistakes
Examples
- User Familiarity: E-learning platform uses “Enroll” (not “Add to Basket”)
- Recoverability: Photo app allows “Undo”
- Minimal Surprises: ATM always asks for confirmation before giving cash
- User Diversity: Library app offers both “Quick Start” and “Advanced Manual”
Key Takeaways
- Be consistent—users shouldn’t relearn basics in every screen
- Let users undo—mistakes are normal
- Design for real people, not ideal users
- Predictability beats cleverness every time
The 3 Golden Rules of UI Design
Definition
- The 3 Golden Rules are a simplified set of essential UI best practices focused on user control, memory, and consistency.
Causes
- Summarizes key human factors into easy-to-remember guidelines
- Addresses the most common UI failures
Goals / Objectives
- To ensure users feel in control, aren’t overwhelmed, and can transfer skills
Importance
- These rules cover 80% of good UI design in three points
- Used by professional designers worldwide
Procedures
- Apply these three rules:
- Place the user in control:
- Show system status
- Allow interruptible actions
- Avoid forced sequences
- Reduce the user’s memory load:
- Use recognition over recall (menus > commands)
- Keep displays simple
- Provide defaults and shortcuts
- Make the interface consistent:
- Reuse layouts, colors, and terms
- Follow platform conventions
- Ensure knowledge transfers across the system
- Place the user in control:
Advantages & Disadvantages
-
Advantages:
- Simple to remember and apply
- Covers core usability issues
- Works for all types of software
-
Disadvantages:
- Doesn’t cover aesthetics or advanced interaction
- Still requires good judgment to apply well
Impact / Effect
- Systems feel responsive, simple, and reliable
- Users learn faster and stay confident
Examples
- User Control: Music app shows progress bar (you always know what’s playing)
- Reduce Memory Load: Shopping app saves your cart if you close the browser
- Consistency: “Add to Cart” button is always in the same place
Key Takeaways
- Let users feel in charge—show status, allow undo
- Don’t make users remember—show options, save progress
- Be consistent—same actions, same places, same words everywhere