Usability & Prototyping

CSCI 344. Spring, 2026

1

Announcements: Upcoming Deadlines

2

Outline

1. Principles of Usability
2. Prototyping
3. Begin the Tutorial 4a: Low-Fidelity Prototyping with Figma

3

Norman’s Design Principles

• Very famous book – came out in the 1980s
• Shaped the field of product / interaction design
• Basic idea: designs should be so intuitive that you don’t have to think about them!

Door Quiz

Say out loud what action you use to open the door

“Push” or “Pull”

Door Quiz

Door Quiz

Door Quiz

Door Quiz

Door Quiz

Door Quiz

Door Quiz

Door Quiz

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.
• Norman’s principles apply to all interfaces and interactions

Norman’s Design Principles

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

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.
• Norman’s principles apply to all interfaces and interactions

Norman’s Design Principles

• Affordances: What can the app do?
• Feedback: System response to user actions
• Constraints: Limits that prevent incorrect actions
• Consistency: Uniform design across similar elements
• System visibility: Showing system status clearly
• Conceptual models: User’s mental understanding of operation (e.g., “folders”)
• Natural mappings: Intuitive relationship between controls and results (steering wheel)

The Three Principles That Matter Most for UI

​

• Affordances - “What can I do?”
1. visually communicate what actions are possible
2. They are learned
3. Good affordances will allow new users to learn your interface and interactions easily
• Feedback - "What just happened?"
• System responds to every action
• Example: Button states (default, hover, pressed, disabled)
• Constraints - "What can't I do?"
• Prevent errors by making wrong actions impossible
• Example: Grayed-out submit button until form is valid

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

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

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

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

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

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

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

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

Takeaways: Your Job as a Developer

As I build my interface…

• Is it obvious what users can interact with?
• Does every action give immediate feedback?
• Are users prevented from making errors?

Other Usability Guidelines and Design Patterns

• Nielsen - Norman Group:
• UX Design Patterns
• Usability Heuristics
• Deceptive Designs & Dark Patterns:
• https://www.deceptive.design/types

Outline

1. Principles of Usability
2. Prototyping
3. Begin the Tutorial 4a: Low-Fidelity Prototyping with Figma

​

29

Why Prototype?

• Prototypes help you think and communicate before you build
• Low‑fidelity (wireframes) helps teams answer:
• What goes where?
• What’s the hierarchy?
• What’s the flow?
• High‑fidelity (polished mockups) helps teams answer:
• How should it look/feel?
• Is it readable?
• Does it meet contrast/accessibility expectations?
• Use low‑fi to iterate fast
• Use high‑fi to lock decisions and create reusable Styles

30

Why Wireframes?

• Wireframes are blueprints: structure before style
• Focus on layout + hierarchy + user flow
• Faster to change → better early feedback
• Question: What happens if you add color, images, etc. too early in the design process?

31

Guidelines for Today (Lo-Fi)

• Grayscale only (no brand colors)
• No images (use placeholders)
• Use rectangles/circles/text labels to represent UI
• Match spacing + alignment more than “perfect details”

32

You will create both mobile + desktop prototypes

33

Why High-Fidelity?

1. Communicates exact visual decisions (to devs + stakeholders)
2. Lets you test readability, contrast, and visual hierarchy
3. Makes design consistent through reusable styles
4. On Wednesday, you will polish one layout (mobile or desktop), extract the styles, and create a simple style guide.

34

Styles + Style Guide = Consistency

• Create Color Styles (e.g., Background, Text Primary, Accent)
• Create Text Styles (e.g., Body, Caption, Heading)
• Apply Styles (so changes ripple through the design)
• Use Automatic Style Guide plugin to generate a shareable reference
• You can also generate a design token file to standardize your styling across multiple platforms.

35

Example: Childcare Network of Evanston

Increasingly, design is becoming separated from implementation in larger tech shops:

1. Design team works with a baseline “Design System” in Figma (a prototyping tool). This is customized to fit the website’s look-and-feel / brand. Example of Figma → Childcare Network of Evanston
2. Components and CSS are exported from Figma and “synced” with front-end stylesheet.
3. So long as the front-end developer is using the correct class names, the design team can work in parallel, with periodic syncing.

36

Outline

• Principles of Usability
• Prototyping
• Begin the Tutorial 4a: Low-Fidelity Prototyping with Figma

37

Introduction to the Set-Up

1. Go to figma.com and sign in (or create a free account)
2. Open the Tutorial 4 starter file: Instagram Wireframes Starter
3. Click the down arrow next to the name of the file on the top left and Duplicate.
4. Select “Duplicate” to create your own copy
5. Rename your file: Instagram Wireframes - [Your Name]
6. The starter file already has:
• A mobile page (375px width) set up for you
• A desktop page (1200px width) set up for you
• Both pages are ready for you to add your wireframe elements

38