User Interface Design Principles and Methods

Interface

User-facing layer that allows them to interact with computers

GUI (Graphical User Interface)

Rely on sense of sight, recognition, recall

CLI (Command Line Interface)

Rely on recall

TUI (Tangible User Interface)

Rely on objects, sight, motion

Touch Interfaces

Rely on touch, sight, recognition, recall

Spoken Interface

Relies on speech and sound

Gesture Interface

Rely on body motion, sight

Spacial interface

Rely on body and motion

Design Process

Needfinding, Ideating, Prototyping, Testing

Needfinding

Observe people, Understand the problem, Define the constraints

Ideating

Create lists of solutions

Prototyping

Low-fi (sketching, paper), Digital (figma), App

Testing

User evaluation

8 Golden Rules

Consistency, Seek universal usability, Informative feedback, Closure, Prevent user error, Allow for easy reversal, Minimize short-term memory load, Keep users in control

Consistency

Similar things should look and act similarly

Inconsistency

Important for things that require attention

Usability

Determines how well a user is able to use a system to accomplish their tasks

Non-usability important dimensions

Functionality, Privacy/security, Overall reception - targeted to the right audience, reliability, uptime

10 Usability Heuristics for UI Design

Visibility of system status, Match with real world, User control and freedom, Consistency, Prevent user errors, Recognition over recall, Flexibility and efficiency, Aesthetic and minimalist design, Help users recover from errors, Help and documentation

What is a slip (in context of learned)?

Failure to correctly execute a learned procedure when intending to perform a specific action.

What are the types of slips?

Capture slip, Description slip, Mode error.

Capture slip

When two actions start the same way

Description slip

When two processes are very similar (high similarity)

Mode error

When same action has different meaning depending on mode (typing password with Caps Lock on)

Mistake

Errors made when a person believes they are taking the correct action, but their judgement or understanding is flawed

User-engaged methods

Participant observation, Interviews, Contextual Inquiry

Participant Observation

Empathize with the people and things that are important to them, Fly on a wall

Interviews

Collect first hand accounts of experiences, opinions, attitudes, perceptions. Ask open ended questions

Contextual Inquiry

Combines observations with self reports (from interviews), Study behavior in context and understand how context impacts interactions

User classes

Target audience groups

When to use Survey?

General public's perception

When to use Experience sampling?

The experience of specific moments in a real-world setting

When to use Contextual inquiry/direct observation?

When observing a specific group of people doing something

Ethnography

Deep, nuanced understanding of a specific culture/group of people

Diary

For understanding long-term behaviors: habits, usage scenarios, attitudes and motivations

Graffiti Walls

Open and collaborative responses with spontaneous expression and creativity

Tasks

Refers to any activity that is usually observable and has a start and end point, towards a goal

Goal

Something a person wants to achieve

Task Analysis

Helps identify what your solution needs to support, Find the simplest, most efficient way to accomplish the tasks

Dark Patterns

UI designs that trick users into doing something they did not intend to do such as buying or signing up for something

Types of Dark Patterns

Nagging, Obstruction, Forced action, Sneaking, Trick questions, Sneak into basket, Roach motel, Privacy Zuckering, Price comparison prevention, Misdirection, Hidden costs, Bait and switch, Confirm shaming, Disguised ads, Forced continuity

Nagging

Ex: turn on notifications

Obstruction

Can't cancel or unsubscribe

Forced action

Cannot proceed without accepting certain things

Trick questions

enter info in a form that you did not intend

Sneak into basket

Site adds something to your shopping cart

Roach motel

Easy to get in, hard to get out

Privacy Zuckering

Tricked into publicly sharing more information about yourself than you intended to

Bait and switch

Start doing one thing but something else happens

Confirm shaming

Guilt the user into doing something

Forced Continuity

Free trial ends and charges credit card silently

Sketching

Design iteration that is quick, timely, cheap, disposable, plentiful

Why do we prototype?

Test interactions before building, Makes prototypes interactive without writing code, Easy to make, test, evaluate, and change

Low fidelity prototypes

Designer sketches with many details missing

High fidelity prototypes

Prototypes that look and feel more like the final product

Low fidelity Prototypes

Sketching and storyboarding, Paper prototyping, Wizard of Oz prototyping, Video prototyping

Wizard of Oz prototyping

Where user interacts with a computer system they believe to be autonomous but actually being operated/partially operated by unseen human.

Visual design

Graphic design, including decisions about colors, fonts, and white space.

Mental models

Beliefs people form about how systems work based on past experiences, assumptions, and knowledge.

5 visual design principles in UX

Balance, Golden ratio, Scale, Contrast, Visual hierarchy.

Balance

Equally distributed amount of visual signal on both sides of an imaginary axis.

Golden ratio

a/b = (a+b)/a where a is larger than b.

Scale

Using relative size to signal importance and rank in a composition.

Contrast

Juxtaposition of visually dissimilar elements in order to convey the fact that these elements are different.

Visual hierarchy

Guiding the eye on the page so that it attends to design elements in the order of their importance.

Gestalt principles

Capture our tendency to perceive the whole as opposed to the individual elements.

Proximity

Objects placed together are perceived as a group.

Similarity

When items share superficial characteristics, we perceive them as grouped.

Continuity

Elements present in a line or curve are perceived to be related.

Closure

Even incomplete objects are perceived as whole.

Symmetry

humans tend to see visual elements as grouped when they are arranged symmetrically.

Gulf of execution

The difference between the user's intentions and allowable actions.

Gulf of evaluation

The amount of effort that the person must exert to interpret the state of the system and to determine how well their expectations and intentions have been met.

Miller's Law

The average person can hold 7 ± 2 items in their working memory at a time.

Chunking

Breaking content into smaller units to make it easier to process.

Hick's Law

The time it takes to make a decision increases as the number of options increase.

Fitt's Law

Models time to acquire targets in aimed movement, such as clicking on icons using a mouse.

Scientific method

Form hypothesis, collect data, analyze data, accept or reject hypothesis.

Hypothesis

Precise problem statement that can be tested with an empirical investigation.

Null hypothesis

Typically states that there is no difference between experimental treatments.

Independent variables or factors

The factors you are interested in studying or the possible 'cause' of the change.

Dependent variables

The outcome or effect that you are interested in.

Levels/conditions

Values an independent variable can assume.

Confounding variables

Any unaccounted for factors that could explain your results.