HCI Track-A Visual Design Week39

Lecture Notes: Visual Design in Graphical User Interfaces

Introduction

• Previous Lecture: Covered principles of user interface design, focusing on high-level concepts like heuristics and golden rules.
• Today’s Focus: Practical aspects of designing graphical user interfaces (GUIs), particularly visual design.
• Main Topics:
  • Mental Models and their relation to metaphors and conceptual blends.
  • Visual Design Principles for creating effective and aesthetically pleasing interfaces.
  • Tips and Tricks for good visual design.

---

Designing Graphical User Interfaces: An Easy/Hard Activity

• Ease of Entry: Building a basic user interface is relatively straightforward.
• Challenges:
  • Creating a UI that is both functional and visually appealing is difficult.
  • Requires experience, practice, and understanding of design principles.
  • Involves experimentation and iteration, possibly with user testing.
• Standardization:
  • Many UIs look similar due to reliance on standard libraries and frameworks.
  • Custom UI design is sometimes necessary but is more complex and time-consuming.

Examples of Custom UI Design

1. EasyPark App:
   • Function: Allows users to set parking duration using a rolling wheel interface.
   • Design Goal: Provide a quick and convenient way to select parking time.
   • Reason for Custom Design:
     • Conventional date and time pickers were too slow for the task.
     • The custom wheel interface enhances user experience by simplifying the interaction.
2. Hospital Logistics Interface:
   • Requirement: No interaction should take more than 30 seconds.
   • Design Approach:
     • Custom UI elements to avoid complex menus.
     • Streamlined processes for setting dates and moving patients.
   • Outcome: Improved efficiency and usability in a critical environment.

---

Two Core Challenges in UI Design

1. Conveying Possibilities and Actions:
   • Users need to understand:
     • What they can do.
     • How to do it.
     • What is happening during interactions.
   • Involves establishing effective mental models.
2. Visually Supporting Users:
   • Help users decode information on the screen.
   • Clarify hierarchy, importance, and relationships between elements.
   • Achieved through visual design principles.

---

Mental Models

• Definition: Internal representations that help users understand and predict how a system works.
• Formation:
  • Users simulate actions mentally before performing them.
  • They refine their models based on experiences and outcomes.
• Importance:
  • Aids in learning new systems.
  • Reduces errors and increases efficiency.

Metaphors and Conceptual Blends

• Metaphors:
  • Link unfamiliar concepts to familiar ones.
  • Facilitate understanding by drawing parallels.
• Conceptual Blending:
  • Theory by Fauconnier and Turner.
  • Combines elements from different domains to create new meaning.
  • Fundamental to human cognition and creativity.

Conceptual Blending Example: The Monk Riddle

• Riddle:
  • A monk ascends a mountain and descends it on different days.
  • Question: Is there a point on the path occupied at the same time on both days?
• Solution:
  • Conceptually blend the two journeys as occurring simultaneously.
  • Visualize two monks (one ascending, one descending) meeting at some point.
  • Conclusion: There must be such a point.
• 谜题中的“不同天”的上山和下山，可以被看作是两个不相交的事件。然而，通过概念性融合，我们引入了一种“同时发生”的虚拟场景，将这两个过程投射为两名僧侣分别同时从山下和山顶出发。通过这样的重构，我们摆脱了时间线上的分隔，从而使问题简化为“两个移动物体是否在某个时刻相遇”。 这种方法利用了人类认知的强大图像化能力，能够在头脑中快速建构一个动态的相遇场景。即便问题中并没有真的两个僧侣，概念性融合使得虚拟的两个“角色”赋予了逻辑和直觉上的清晰性。

Metaphors in Software

• Desktop Metaphor:
  • Files, folders, and trash cans mimic a physical office environment.
  • Helps users understand file management intuitively.
• Chat Applications:
  • Rooms and Channels:
    • Create mental models of physical spaces or communication pathways.
    • Discord uses servers and channels to organize discussions.
  • Implication:
    • Users perceive they are entering spaces or tuning into channels.
• Mobile Pay App:
  • Metaphor: Sending money like sending a text message.
  • Effect: Simplifies digital transactions by relating them to familiar actions.
• Personal Hotspot Feature:
  • Phone as Wi-Fi Router:
    • Users can share their phone’s internet connection.
    • Mental model simplifies complex networking processes.
• Spotify Interface:
  • Playlists and Albums:
    • Mimic physical music collections and mixtapes.
    • Discover Weekly:
      • Acts like a personalized DJ creating new mixes.

---

Visual Design Principles

Visual design supports users in decoding on-screen information effectively.

1. Scale

• Definition: Using the relative size of elements to indicate importance or hierarchy.
• Guidelines:
  • Use no more than three different sizes for consistency.
• Examples:
  • Parking Garage Signage:
    • Larger text for important information (location), smaller for directions.
  • Email Headers:
    • Larger fonts for sender and subject, smaller for recipient and date.

2. Visual Hierarchy

• Definition: Guiding the user’s eye through the page in order of importance.
• Methods:
  • Size(Two to three typeface), color(Bright and muted ), contrast, area, and depth.
• Examples:
  • Slack Interface Critique:
    • Poor hierarchy can lead to confusion.
    • Similar-looking elements make navigation difficult.
  • Spotify Interface:
    • Current playlist area is larger, indicating priority.
    • Use of bold and color to highlight key elements.

3. Balance

• Definition: Arrangement of elements to create harmony and stability.
  • Origin version: The principle of balance refers to a satisfying arrangement or proportion of design elements. Balance occurs when there is an equally distributed (but not necessarily symmetrical) amount of visual signal on both sides of an imaginary axis going through the middle of the screen. This axis is often vertical but can also be horizontal.
• Types:
  • Symmetrical Balance:
    • Elements evenly distributed around a central axis.
    • Creates a sense of calm.
  • Asymmetrical Balance:
    • Uneven distribution for dynamic and engaging designs.
  • Radial Balance:
    • Elements radiate from a central point.
    • Focuses attention on the center.
• Examples:
  • Symmetrical Balance in Spotify:
    • Equal visual weight on both sides of the interface.
  • Asymmetrical Balance in Apple Notes:
    • Content offset to draw attention to the note area.
    • Darker background on the main content area.
  • Radial Balance in Game Menus:
    • Central focus with options arranged around it.

4. Contrast

• Definition: Juxtaposing different elements to highlight differences.

• Applications:

  • Color, size, and shape variations.
• Examples:
  • Zoom’s Share Screen Button:
    • Green color stands out among other controls.
  • Slack’s Delete Message Option:
    • Red color signals caution for irreversible actions.
  • Spotify’s Use of Green:
    • Play button and current track highlighted in green.

5. Gestalt Principles

• Definition: Psychological principles explaining how humans perceive visual elements as unified wholes.
• Key Principles:
  • Proximity: Grouping based on closeness.
  • Similarity: Grouping based on shared attributes.
  • Enclosure: Grouping within boundaries.
  • Closure: Filling in missing parts to perceive a whole.
  • Continuity: Preferring continuous figures.
  • Connection: Linked elements are perceived as related.

• Examples:

  • Grouped Buttons:
    • Buttons within a box are seen as related functions.
  • Spotify Layout:
    • Sections are visually grouped for easier navigation.

---

Tips and Tricks for Good Visual Design

Deliberate Design

• Principle: Every element should have a purpose.
• Practice:
  • Be able to explain why each element exists and is styled a certain way.
• Example:
  • Apple’s design philosophy emphasizes intentionality in every detail.

Alignment

• Guideline: Elements should align with others to create cohesion.
• Effect:
  • Misaligned elements can cause visual discomfort.
• Implementation:
  • Use grids and consistent spacing.
  • Even partial alignment can convey intentional design.

Mathematical Relationships

• Concept: Use mathematical ratios for measurements.
• Application:
  • Text sizes and spacing should relate systematically.
  • Grid Layouts:
    • Use a 12-column grid for flexibility (divisible by 2, 3, 4, 6).

Color and Weight over Size

• Recommendation: Use font weight (boldness) and color instead of varying sizes to establish hierarchy.
• Benefits:
  • Simplifies alignment.
  • Creates a cleaner look.

Avoid Gray Text on Colored Backgrounds

• Issue: Gray text can be hard to read on colored backgrounds.
• Solution:
  • Adjust text transparency to let background color bleed through.
  • Enhances cohesion and readability.

Minimize Borders

• Advice: Use spacing and color differences to separate elements.
• Reason:
  • Borders can clutter the design.
• Example:
  • In lists, increase spacing instead of adding lines.

Near Black and Near White

• Suggestion: Use shades close to black and white rather than pure black (#000000) and white (#FFFFFF).
• Effect:
  • Reduces stark contrast.
  • Creates a softer visual experience.
• Accessibility Note:
  • Ensure sufficient contrast for readability.

Color Integration

• Technique: Incorporate foreground color into background elements.
• Purpose:
  • Unifies the design.
  • Enhances visual harmony.

Depth and Hierarchy

• Method: Use lightness and darkness to create depth.
• Guideline:
  • Closer elements appear lighter.
  • Background elements are darker.
• Outcome:
  • Emphasizes important elements.
  • Adds dimensionality to the interface.

Proper Nesting in Rounded Corners

• Rule:
  • Inner corner radius = Outer corner radius minus border width.
• Reason:
  • Ensures visual consistency in nested elements.
• Example:
  • A card with rounded corners containing an image or text box.

---

Visual Design Techniques Resources

• Resource Website:
  • Contains numerous visual design techniques with explanations and examples.
  • Link to Visual Design Techniques (Note: Insert actual link if available)

Selected Techniques

1. Brightness Change Menu Highlight:
   • Use: Highlight current menu items with a lighter or darker background.
   • When to Use:
     • For subtle emphasis in menus.
   • Considerations:
     • Ensure sufficient contrast for visibility.
2. Card Containers:
   • Use: Enclose content in card-shaped backgrounds.
   • Benefits:
     • Groups related content.
     • Enhances scannability.
3. Grey Background for Secondary Areas:
   • Use: Differentiate secondary content without adding borders.
   • Effect:
     • Creates a visual hierarchy.
     • Maintains a clean design.
4. Aligning Icons with Background Shapes:
   • Use: Place icons on uniform background shapes (e.g., circles).
   • Advantages:
     • Simplifies alignment.
     • Provides consistent appearance.

Encouragement to Explore

• Recommendation:
  • Experiment with various techniques.
  • Adapt methods to suit specific design challenges.
  • Utilize resources to enhance creativity and problem-solving.

---

Conclusion

• Visual Design Importance:
  • Crucial for usability and user satisfaction.
  • Supports users in navigating and understanding interfaces.
• Key Takeaways:
  • Apply principles like scale, hierarchy, balance, contrast, and Gestalt psychology.
  • Design deliberately, with attention to detail and purpose.
  • Use alignment, color, and spacing effectively.
  • Continuously learn and experiment with new techniques.
• Next Steps:
  • Practice applying these principles in your projects.
  • Seek feedback and iterate on your designs.
  • Stay updated with emerging trends and best practices.