HCI Overview Week 39 - GUI design in praxis & Responsive Web

TRACK - A

---

1. What Are Mental Models and Their Role in UI Design

Definition of Mental Models

Mental models are internal representations that users form to understand and predict how a system operates. They are essentially the user’s perception of how things work, allowing them to interact with interfaces effectively.

Role in UI Design

• Facilitating Understanding: Mental models help users comprehend new systems by relating them to their existing knowledge and experiences.
• Predicting System Behavior: By having a clear mental model, users can anticipate the outcomes of their actions within the interface, leading to more efficient interactions.
• Reducing Errors: When the UI aligns with the user’s mental model, it minimizes confusion and errors, enhancing overall usability.
• Aiding Learning: A well-designed interface that aligns with users’ mental models makes it easier for them to learn and adapt to new functionalities.

Key Points from Lecture Notes

• Users simulate actions mentally before performing them and refine their models based on experiences and outcomes.
• Effective mental models aid in learning new systems, reduce errors, and increase efficiency.

---

2. How Mental Models Are Related to Metaphors and Conceptual Blends

Metaphors in UI Design

• Definition: Metaphors link unfamiliar concepts to familiar ones, facilitating understanding by drawing parallels.
• Examples:
  • Desktop Metaphor: Uses files, folders, and trash cans to mimic a physical office environment, making file management intuitive.
  • Chat Applications: Use rooms and channels (e.g., Discord’s servers and channels) to create mental models of physical spaces or communication pathways.

Conceptual Blending

• Definition: A theory by Fauconnier and Turner that involves combining elements from different domains to create new meanings. It is fundamental to human cognition and creativity.
• Example from Lecture:
  • The Monk Riddle: Conceptually blending two separate journeys (ascending and descending a mountain on different days) by visualizing two monks traveling simultaneously to solve the riddle.

Relationship Between Mental Models, Metaphors, and Conceptual Blends

• Enhancing Mental Models: Metaphors and conceptual blends enrich users’ mental models by providing familiar frameworks and novel combinations that aid in understanding complex systems.
• Facilitating Cognition: By leveraging metaphors and conceptual blends, designers can create more intuitive and relatable interfaces that align with users’ existing knowledge and cognitive processes.

Key Points from Lecture Notes

• Metaphors link unfamiliar concepts to familiar ones, facilitating understanding.
• Conceptual blending combines elements from different domains to create new meaning, aiding in problem-solving and creativity.
• Examples like the desktop metaphor and chat application structures demonstrate how these concepts are applied in software design.

---

3. The Grid Layout as the Premier Structuring Mechanism for Visual Organization

Grid Layout Overview

• Definition: A grid layout is a two-dimensional structuring mechanism that organizes content into rows and columns, providing a consistent and harmonious arrangement of elements.
• Importance: It serves as the foundational framework for visual organization, ensuring alignment, balance, and scalability across different devices and screen sizes.

Why Grid Layout Is Premier

• Consistency: Grids ensure uniform spacing and alignment, creating a cohesive and professional appearance.
• Flexibility: They allow for easy adjustments and scalability, accommodating various content types and screen sizes.
• Efficiency: Grids streamline the design process by providing a clear structure, reducing the need for arbitrary placement of elements.
• User Experience: A well-structured grid enhances readability and navigability, improving overall user satisfaction.

Key Points from Lecture Notes

• The lecture emphasizes the grid layout as the primary mechanism for visual organization, highlighting its role in creating harmony and stability in UI design.
• Techniques like using a 12-column grid are recommended for flexibility and alignment.

---

4. The Five Visual Design Principles (from Nielsen Norman Group)

The Nielsen Norman Group (NN/g) identifies five core visual design principles that are crucial for creating effective and aesthetically pleasing user interfaces. These principles guide designers in structuring and presenting information in a way that enhances usability and user satisfaction.

1. Scale

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

2. Visual Hierarchy

• Definition: Guiding the user’s eye through the page in order of importance.
• Methods:
  • Varying size, color, contrast, area, and depth to differentiate elements.
• Examples:
  • Slack Interface: Poor hierarchy leads to confusion with similar-looking elements.
  • Spotify Interface: Larger playlist areas and bold colors highlight key elements.

3. Balance

• Definition: Arrangement of elements to create harmony and stability.
• Types:
  • Symmetrical Balance: Even distribution around a central axis, creating calmness.
  • Asymmetrical Balance: Uneven distribution for a dynamic look.
  • Radial Balance: Elements radiate from a central point, focusing attention.
• Examples:
  • Symmetrical Balance in Spotify: Equal visual weight on both sides.
  • Asymmetrical Balance in Apple Notes: Content offset to draw attention.
  • Radial Balance in Game Menus: Central focus with surrounding options.

4. Contrast

• Definition: Juxtaposing different elements to highlight differences.
• Applications:
  • Varying color, size, and shape to create distinction.
• Examples:
  • Zoom’s Share Screen Button: Green color stands out among other controls.
  • Slack’s Delete Message Option: Red color signals caution.
  • Spotify’s Play Button: Highlighted in green to attract attention.

5. Gestalt Principles

• Definition: Psychological principles explaining how humans perceive visual elements as unified wholes.
• Key Principles:
  • Proximity: Grouping based on closeness.
    • Graphic Design: On a website navigation bar, menu items grouped closely together are perceived as belonging to the same category.
    • Real World: In a parking lot, cars parked close to each other are often assumed to belong to the same group or event.
  • Similarity: Grouping based on shared attributes.
    • Graphic Design: A grid of circles and squares where all circles are blue and all squares are red. Despite being mixed in the grid, the viewer perceives two distinct groups based on color (similarity).
    • Real World: In sports, team uniforms make it easy to identify players on the same team.
  • Enclosure: Grouping within boundaries.
    • Graphic Design: A dashboard with charts surrounded by separate colored boxes; each box visually groups the chart and its legend together.
    • Real World: A fenced playground is perceived as a distinct space for children compared to the open area around it.
  • Closure: Filling in missing parts to perceive a whole.
    • Graphic Design: A logo made of broken lines that suggest the shape of a circle or a triangle. The viewer perceives the complete shape despite the gaps.
    • Real World: A panda drawing (like in the WWF logo) with incomplete lines is still recognized as a panda.
  • Continuity: Preferring continuous figures.
    • Graphic Design: A timeline where arrows guide the viewer’s eye smoothly through events in chronological order.
    • Real World: Roads with lane markings guide drivers smoothly through curves.
  • Connection: Linked elements are perceived as related.
    • Graphic Design: Dots connected by lines in a network diagram are seen as part of the same system.
    • Real World: A subway map where station names are connected by colored lines indicating routes.
• Examples:
  • Grouped Buttons: Buttons within a box are seen as related functions.
  • Spotify Layout: Visually grouped sections enhance navigation.

---

5. Familiarity with the Tips and Rules for Visual Design Presented at the Lecture

The lecture provided several practical tips and rules to enhance visual design in graphical user interfaces. These guidelines help create interfaces that are not only aesthetically pleasing but also functional and user-friendly.

1. Deliberate Design

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

2. Alignment

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

3. Mathematical Relationships

• Concept: Use mathematical ratios for measurements to ensure consistency.
• Application:
  • Systematically relate text sizes and spacing.
  • Utilize grid layouts, such as a 12-column grid for flexibility and alignment.

4. 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 and more unified look.

5. Avoid Gray Text on Colored Backgrounds

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

6. Minimize Borders

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

7. 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.

8. Color Integration

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

9. 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.

10. 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.

Additional Tips from Visual Design Techniques Resources

• Brightness Change Menu Highlight: Highlight current menu items with lighter or darker backgrounds to emphasize selection.
• Card Containers: Enclose content in card-shaped backgrounds to group related content and enhance scannability.
• Grey Background for Secondary Areas: Differentiate secondary content without adding borders to maintain a clean design.
• Aligning Icons with Background Shapes: Place icons on uniform background shapes (e.g., circles) for consistent alignment and appearance.

Encouragement to Explore

• Recommendation: Experiment with various techniques, adapt methods to specific design challenges, and utilize resources to enhance creativity and problem-solving.

TRACK - B

---

1. Challenges in Adapting UIs to Diverse Devices

a. Varied Display Sizes and Resolutions

• Issue: Devices range from small smartphones to large desktop monitors, each with different screen sizes and resolutions.
• Impact: A UI that looks good on one device might be cluttered or sparse on another.

b. Different Input Modalities

• Issue: Interaction methods vary (touch, mouse, keyboard, voice).
• Impact: UI elements must be accessible and usable across these different input types.

c. Performance Constraints

• Issue: Mobile devices may have less processing power and slower network connections.
• Impact: Heavy or unoptimized UIs can lead to slow load times and poor user experiences.

d. Content Adaptation

• Issue: Not all content is equally relevant or formatted for every device.
• Impact: Deciding which content to display or hide based on the device can be challenging.

e. Consistency Across Platforms

• Issue: Maintaining a consistent look and feel across devices while accommodating their unique characteristics.
• Impact: Balancing consistency with adaptability requires careful design planning.

---

2. Responsive Web Design (RWD)

What is Responsive Web Design?

Responsive Web Design is an approach to designing web pages that automatically adjust and provide an optimal viewing experience across a wide range of devices. It ensures that the layout, images, and functionalities adapt seamlessly to different screen sizes and orientations.

Core Techniques of Responsive Web Design

1. Fluid Grids
   • Utilize relative units like percentages instead of fixed units like pixels to define widths.
2. Flexible Images and Media
   • Ensure images and media scale appropriately within their containing elements.
3. CSS Media Queries
   • Apply different CSS rules based on device characteristics such as screen width, height, resolution, etc.
4. Responsive Typography
   • Adjust font sizes and line heights to enhance readability on various devices.
5. Viewport Meta Tag
   • Control the viewport’s size and scale on mobile devices to ensure proper rendering.

---

3. Media Queries

What are Media Queries?

Media queries are a CSS technique that allows content to adapt to different conditions, such as screen size, resolution, orientation, and more. They enable developers to apply specific styles based on the device’s characteristics.

How to Use Media Queries

Basic Syntax:

@media (media-type) and (condition) {
  /* CSS rules */
}

Common Use Cases:

1. Responsive Layouts Based on Screen Width:

   /* For devices with a maximum width of 768px */
   @media (max-width: 768px) {
     .container {
       flex-direction: column;
     }
   }
   

2. Handling Different Screen Resolutions:

   @media 
     (-webkit-min-device-pixel-ratio: 2), 
     (min-resolution: 192dpi) { 
       /* High-resolution styles */
   }
   

3. Orientation-Based Styling:

   /* For landscape orientation */
   @media (orientation: landscape) {
     /* Landscape-specific styles */
   }
   

Best Practices:

• Mobile-First Approach: Start designing for smaller screens and progressively enhance for larger screens.
• Use Relative Units: Combine media queries with relative units for better scalability.
• Limit the Number of Breakpoints: Focus on content-driven breakpoints rather than device-specific ones to enhance flexibility.

---

4. Fluid Grids in CSS

What are Fluid Grids?

Fluid grids are layouts that use relative units (like percentages) instead of fixed units (like pixels) to define the dimensions of elements. This allows the layout to adapt dynamically to the screen size.

Techniques for Creating Fluid Grids

1. Percentage-Based Widths:

   .column {
     width: 50%; /* Two columns side by side */
     float: left;
   }
   

2. Using CSS Flexbox: Flexbox simplifies creating fluid layouts by distributing space dynamically.

   .container {
     display: flex;
     flex-wrap: wrap;
   }
   .item {
     flex: 1 1 30%; /* Grow, shrink, basis */
     margin: 10px;
   }
   

3. CSS Grid Layout: CSS Grid offers a two-dimensional layout system, allowing for complex, responsive grid structures.

   .grid-container {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 20px;
   }
   

4. Viewport Units: Use vw and vh units to size elements relative to the viewport.

   .header {
     height: 10vh; /* 10% of viewport height */
   }
   

Best Practices:

• Flexible Container Elements: Ensure parent containers can expand or contract based on the viewport.
• Consistent Margins and Paddings: Use relative units to maintain proportional spacing.
• Avoid Fixed Widths: Except for specific use-cases, favor fluid dimensions to enhance adaptability.

---

5. Flexbox and CSS Grid

CSS Flexbox

What is Flexbox? Flexbox (Flexible Box Layout) is a CSS module designed for arranging elements in a one-dimensional layout, either as a row or a column. It excels at distributing space and aligning items within a container.

Use Cases:

• Navigation Bars: Easily align items horizontally or vertically.
• Centering Elements: Vertically and horizontally center content within a container.
• Responsive Menus: Adjust the layout of menu items based on available space.

Simple Example:

.container {
  display: flex;
  justify-content: space-between; /* Distribute space evenly */
  align-items: center; /* Align items vertically */
}
.item {
  flex: 1; /* Each item takes equal space */
}

CSS Grid

What is CSS Grid? CSS Grid Layout is a two-dimensional layout system that allows for the creation of complex grid-based designs. It handles both rows and columns, providing greater control over layout structures.

Use Cases:

• Complex Page Layouts: Design intricate layouts with rows and columns.
• Image Galleries: Create responsive grid-based image displays.
• Dashboard Interfaces: Organize various widgets and components efficiently.

Simple Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  gap: 20px; /* Space between grid items */
}
.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

When to Use Flexbox vs. CSS Grid

• Flexbox: Best for linear layouts (either row or column). Ideal for components like nav bars, footers, or aligning items within a container.
• CSS Grid: Suited for more complex, two-dimensional layouts where both rows and columns are involved, such as overall page structures.

---

6. Fluid Images

What are Fluid Images?

Fluid images are images that scale proportionally with their containing elements, ensuring they look good on all devices without distortion or overflow.

Techniques to Implement Fluid Images

1. Using Percentage Widths:

   img {
     max-width: 100%;
     height: auto;
     display: block;
   }
   

   • Explanation: Setting max-width: 100% ensures the image doesn’t exceed the width of its container. height: auto maintains the aspect ratio.

2. Responsive Image Attributes (HTML5):

   <img src="image.jpg" 
        srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
        sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
        alt="Description">
   

   • Explanation: The srcset and sizes attributes allow the browser to select the most appropriate image based on the device’s screen size and resolution.

3. CSS Object-Fit Property:

   .image-container {
     width: 100%;
     height: 300px;
     overflow: hidden;
   }
   .image-container img {
     width: 100%;
     height: 100%;
     object-fit: cover; /* or contain */
   }
   

   • Explanation: object-fit: cover ensures the image covers the container while maintaining aspect ratio, potentially cropping excess parts.

4. Using Picture Element for Art Direction:

   <picture>
     <source media="(max-width: 600px)" srcset="image-small.jpg">
     <source media="(max-width: 1200px)" srcset="image-medium.jpg">
     <img src="image-large.jpg" alt="Description">
   </picture>
   

   • Explanation: The <picture> element allows serving different images based on media queries, enabling tailored visuals for various devices.

Best Practices:

• Optimize Images: Use compressed formats (like WebP) to reduce load times.
• Maintain Aspect Ratios: Ensure images scale without distortion by setting appropriate CSS properties.
• Lazy Loading: Implement lazy loading to defer off-screen images, enhancing performance.
• Use Vector Images When Possible: SVGs scale infinitely without loss of quality, ideal for icons and simple graphics.