Visual Design Principles in HCI

Visual Design in HCI Interfaces

Visual Hierarchy

• Organizing elements to direct user attention and create a clear flow of information
• Principles:
  • Size: larger elements draw attention
  • Color: high-contrast colors stand out
  • Position: top-left elements are most noticeable
  • Alignment: aligned elements create a sense of order
• Techniques:
  • Grouping: related elements are grouped together
  • Proximity: related elements are placed close together
  • Emphasis: important elements are highlighted
  • Repetition: consistent design elements create a sense of unity

Color Theory

• Color wheel:
  • Primary colors: red, blue, yellow
  • Secondary colors: green, orange, purple
  • Tertiary colors: yellow-green, blue-green, etc.
• Color harmony:
  • Monochromatic: different shades of the same color
  • Complementary: colors opposite each other on the color wheel
  • Analogous: colors next to each other on the color wheel
• Color psychology:
  • Red: attention, energy
  • Blue: trust, calmness
  • Green: nature, growth

Icon Design

• Principles:
  • Simple and consistent design
  • Scalability: icons should be legible at different sizes
  • Color: icons should be distinguishable in different color schemes
• Types of icons:
  • Literal: represent a real object
  • Metaphorical: represent an abstract concept
  • Arbitrary: no obvious connection to the concept
• Icon design process:
  1. Research and concept development
  2. Sketching and prototyping
  3. Testing and refinement

Typography

• Font characteristics:
  • Serif: fonts with serifs (e.g. Times New Roman)
  • Sans-serif: fonts without serifs (e.g. Arial)
  • Script: fonts that mimic handwriting
  • Display: fonts designed for headings
• Typography principles:
  • Readability: clear and legible text
  • Hierarchy: headings and subheadings create a clear structure
  • Consistency: consistent font usage throughout the design
• Typography in HCI:
  • Font size and style should be consistent throughout the interface
  • Headings and subheadings should be clear and distinguishable
  • Body text should be readable and clear