Learning is easy, UI/UX

Alex Jimenez, Linn Melberg, & Brett Stevenson

What is UI & UX?

● UI & UX are not interchangeable

● User Interface - the components that allow users
to interact with the product

● User Experience - the overall experience of the

user while interacting with the product
Why UX & UI matters

● People do judge a book by the cover

● Users want information intuitively and efficiency
● Companies that focus on UX perform better
financially
● Increased user acquisition and retention
We Perceive What We Expect

● Based on
○ Past experience
○ Current context
○ Future goals

● Creativity vs Convention
● Design Implications
○ Avoid ambiguity
○ Be consistent
○ Understand users goals
Our Vision is Optimized to See Structure

Proximity

The relative distance between

objects affects our perception of
whether & how the objects are
organized into subgroups.

Common Fate

Objects that move together are

perceived as grouped or related
Our Vision is Optimized to See Structure

Continuity

Our visual system’s tendency to

resolve or fill missing data in a way
to perceive whole objects
Our Vision is Optimized to See Structure

Closure

Our visual system’s tendency to

close open figures to perceive as
whole objects than as seperate
pieces
Our Vision is Optimized to See Structure

Figure/Foreground

Our visual system’s tendency when

objects overlap is to see smaller
objects as the figure on a
background
We Seek and Use Visual Structure

The more structure, the more quickly

and easily people will be able to read
and comprehend text

1. More structure
2. Have less needless repetition
3. Organize in groups

Will make everything easier to read

We Seek and Use Visual Structure

Using proximity to perceive groups to Structure enhances people’s ability to

their values scan long numbers
We Seek and Use Visual Structure

Visual Hierarchy lets people focus on

the relevant information

1. Break into sections & subsections

2. Present sections using hierarchy
3. Separate information to find
relevant information
Our Color Vision is Limited

● Our vision is optimized to detect contrasts (edges), not absolute brightness.

● Our ability to distinguish colors depends on how colors are presented

● Some people have color-blindness

● The user’s display and the viewing conditions affect color perception

● GUIDELINES FOR USING COLOR

Our Color Vision is Limited

● Our vision is optimized to detect contrasts (edges), not absolute brightness.

○ Which green is darker?

Our Color Vision is Limited

● Our vision is optimized to detect contrasts (edges), not absolute brightness.

○ Which square has the darkest Gray?

Our Color Vision is Limited

● Our ability to distinguish colors depends on how colors are presented:

Paleness Color Patch Size Separation

Our Color Vision is Limited

● Some people have color-blindness.

● Red/green color-blind people can’t

distinguish between:

○ (A) dark red from black,

○ (B) blue from purple,

○ (C) light green from white.

Our Color Vision is Limited

● The user’s display and the viewing conditions affect color perception:

○ Variation among color displays

○ Grayscale displays

○ Display angle

○ Ambient illumination
Our Color Vision is Limited
● GUIDELINES FOR USING COLOR:

○ Distinguish colors by saturation and brightness as well as hue

○ Use distinctive colors

○ Avoid color pairs that color-blind people cannot distinguish

○ Use color redundantly with other cues

○ Separate strong opponent colors

Sources
● Johnson, J. (2010). Designing with the mind in mind : a simple guide to understanding user interface design rules. Retrieved
from https://ebookcentral.proquest.com
Thank you for your time!
Alex Jimenez, Linn Melberg, & Brett Stevenson