1 of 49

L13: Intro to Design Systems

Building Consistency and Efficiency in Digital Design

CSCI 344: Advanced Web Technologies

Fall 2024

1

2 of 49

Announcements

  • Homework 3 due tonight
  • Tutorial 8 (React) due this Friday
  • Homework 4 due next Friday
  • Wednesday: Transitioning to “Back End” web development.

2

3 of 49

Outline

  1. UX / UI Design Considerations
  2. Design Systems
  3. Activity

3

4 of 49

Outline

  • UX / UI Design Considerations
  • Design Systems
  • Activity

4

5 of 49

Remember our “Door Quiz”?

Source: Nell O’Rourke

6 of 49

Who cares about everyday things?

  • We make “push” and “pull” decisions every time we interact with computers.
  • We come across badly designed “doors”, and signs don’t change what we do.
  • Basic idea: designs should be so intuitive that you don’t have to think about them!

Source: Nell O’Rourke

7 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

8 of 49

Affordances of Computer Interfaces

“perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used”

Affords horizontal scrolling

Affords clicking

Affords closing,

minimizing, maximizing

Affords clicking

Affords dragging to resize window

Affords typing

Source: Nell O’Rourke

9 of 49

Affordances of Computer Interfaces

Affords selecting one or more options

Affords selecting exactly one option

Affords selecting exactly one from a long list of options

Source: Nell O’Rourke

10 of 49

Affordances Summary

  1. Affordances visually communicate what actions are possible
  2. Affordances are learned
    1. Be consistent with existing conventions
  3. Good affordances will allow new users to learn your interface and interactions easily

Source: Nell O’Rourke

11 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

12 of 49

Visibility

  • What features are available?
  • What is the current state of the system?

Source: Nell O’Rourke

13 of 49

Visibility of Computer Interfaces

Available features, functionality, and commands

Menus, headers, and side-bars make available features visible to users.

Source: Nell O’Rourke

14 of 49

Visibility of Computer Interfaces

Current state of the system or current “mode”

Current mode is visible

Tracking your location

Source: Nell O’Rourke

15 of 49

Visibility of Computer Interfaces

Current location during system navigation

Source: Nell O’Rourke

16 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

17 of 49

Feedback in Computer Interfaces

“sending back to the user information about what action has actually been done, what result has been accomplished”

Source: Nell O’Rourke

18 of 49

Feedback in Computer Interfaces

“sending back to the user information about what action has actually been done, what result has been accomplished”

Source: Nell O’Rourke

19 of 49

Feedback in Computer Interfaces

“sending back to the user information about what action has actually been done, what result has been accomplished”

Source: Nell O’Rourke

20 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

21 of 49

Conceptual Models in Everyday Things

Conceptual model tells us it won’t work

Source: Nell O’Rourke

22 of 49

Conceptual Models

  1. A good conceptual model allows us to predict the effects of our actions
  2. Without a good model
    1. Users don’t know what to expect or what to do if something goes wrong
    2. Users will fabricate their own models to fill in the gaps
  3. People are constantly constructing conceptual models to understand the world

Source: Nell O’Rourke

23 of 49

Conceptual Models in Computer Interfaces

This is how Hexadecimal colors (web colors) are represented.

​

  • What’s the conceptual model?
  • How would you make brown?

Source: Nell O’Rourke

24 of 49

Conceptual Models in Computer Interfaces

  • Apple supports several conceptual models; represents colors in different ways
  • Crayons as a metaphor. Leverages conceptual model from the real world

Source: Nell O’Rourke

25 of 49

Conceptual Models in Computer Interfaces

  • Desktop Metaphor: built on people’s understanding of how they organize files and folders on a desk.
  • Useful when personal computers were new. Now?

Source: Nell O’Rourke

26 of 49

Conceptual Models in Computer Interfaces

“I’m going to develop a new web application that allows you to make appointments with clients.”

​

​

What did you picture?

  1. Calendar?
  2. Contact list?
  3. Creating an appointment?
  4. Getting a reminder about an appointment?

Source: Nell O’Rourke

27 of 49

Conceptual Models in Computer Interfaces

Your users will already have something in mind! If you’re going to deviate from expectations, need to make the conceptual model extra clear.

Source: Nell O’Rourke

28 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

29 of 49

Mappings in Everyday Things

“Mapping is a technical term meaning the relationship between two things, in this case between the controls and their movements and the results in the world...“Natural mapping, by which I mean taking advantage of physical analogies and cultural standards, leads to immediate understanding.”

Turn wheel right

Turn wheel left

Up = right

Down = left

Source: Nell O’Rourke

30 of 49

Mappings in Computer Interfaces

Two-finger scroll

Apple changed the mapping in 2011

Swipe left vs. swipe right

Touch screens support natural mappings

Source: Nell O’Rourke

31 of 49

Mappings in Computer Interfaces

Layout matches how we write addresses

Swiss Train Website Redesign

  • Left: No clear mapping to route
  • Right: Route mapping is obvious

Source: Nell O’Rourke

32 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

33 of 49

Constraints in Everyday Things

“The world restricts the allowed behavior. The physical properties of objects constrain possible operations.”

Constraints limit insertion direction

Only the right size

pieces fit together

Holes afford inserting fingers

Size of holes gives constraint on possible fingers

Source: Nell O’Rourke

34 of 49

Constraints in Computer Interfaces

Shape of “blocks” enables users to understand how statements, expressions, and events fit together

“The world restricts the allowed behavior. The physical properties of objects constrain possible operations.”

​

Source: Nell O’Rourke

35 of 49

Constraints in Computer Interfaces

“The world restricts the allowed behavior. The physical properties of objects constrain possible operations.”

Constraint on date format; CVV size

Unavailable options grayed out

Source: Nell O’Rourke

36 of 49

Constraints Summary

  1. Make it clear what you can and cannot do.
  2. If a user shouldn’t do something, don’t let them! Add a constraint to restrict options.

Source: Nell O’Rourke

37 of 49

Norman’s Design Principles

  • Affordances
  • System visibility
  • Feedback
  • Conceptual Models
  • Natural Mappings
  • Constraints
  • Consistency

38 of 49

Consistency

  1. Similar things should look and act similar
  2. Different things should look different
  3. Types of consistency
    1. Internal (within an application)
    2. External (standards)
    3. Metaphorical

Source: Nell O’Rourke

39 of 49

Internal Consistency in Interfaces

Internal consistency helps reduce the learning barrier

No internal consistency!

Source: Nell O’Rourke

40 of 49

External Consistency in Interfaces

Location of logo and search are consistent

External consistency also helps reduce the learning barrier

Source: Nell O’Rourke

41 of 49

Metaphor Consistency in Interfaces

If you use an icon that looks like this, it better be a feature for throwing away files!

Leverage the meaning of existing icon metaphors!

​

Be consistent with user expectations!

Source: Nell O’Rourke

42 of 49

References & Resources

  • Nielsen - Norman Group:
  • Deceptive Designs & Dark Patterns:

43 of 49

Outline

  • UX / UI Design Considerations
  • Design Systems
  • Activity

43

44 of 49

What is a Design System?

  • A design system is a collection of reusable components, guidelines, and principles that ensure consistency across an organization's digital products.
  • Allows teams to create efficient, scalable, and cohesive user experiences across many different platforms (web, Android, iOS, IoT devices, etc.)

​

44

45 of 49

Why use a Design System?

  • Consistency: Maintains a uniform look and feel.
  • Efficiency: Reduces time spent on repetitive design and development tasks.
  • Scalability: Easy to adapt and maintain across products.
  • Collaboration: Aligns designers and developers with shared tools and language.

45

46 of 49

Core Elements of a Design System

  • UI Components: Buttons, forms, cards.
    • Consistency across like buttons, icons, and cards; uses well-established design and interaction patterns that are already familiar to users
  • Design Tokens: Colors, typography, spacing.
    • A specification that can be imported into an existing framework (and updated easily)
  • Guidelines: Usage rules, accessibility standards.
    • Dos and don’ts for using the system. Example.
  • Patterns and Templates: Reusable layouts and interactions.
    • For common screens that are used across systems (e.g., login page, page not found, etc.)

46

47 of 49

Real World Design Systems

Examples of Famous Design Systems:

  1. Ant Design (Alibaba)
  2. Material Design (Google): Focus on usability and simplicity.
  3. Carbon (IBM): Enterprise-focused, data-heavy design.
  4. Lightning Design System (Salesforce): Components for business applications.

47

48 of 49

Outline

  • UX / UI Design Considerations
  • Design Systems
  • Activity

48

49 of 49

Design Systems Activity

​

​

Sarah’s experiments are here: demo & code

49