UX 101: The secrets of good (web & mobile) design

1

Housekeeping

• Please turn off your phones or set them to vibrate.

• You don’t have to take notes. This presentation will be available

for you to download after the class. (Tweeted and posted on the

meet-up discussion board.)

• I will pause for questions after each section.

• We will have quick breaks.

• Jobs/announcements at the end.

• If anyone wants to come teach a class, please find me at the

end of class or send me a message.

• Questions?

2

3

UX 101 The secrets of good (web & mobile)

design

:

Mary Lan (@greybeat)http://www.linkedin.com/in/greybeat

4

Definition

"User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products.~Jakob Nielson and Don Norman (http://www.nngroup.com/articles/definition-user-experience)

Dr. Don Norman, MIT, UPenn

http://www.nngroup.com/articles/definition-user-experience

5

Extending the definition

User experience design is the intentional crafting of a user’s perceptions and interactions with a product or system.

Product design (how it looks

& works)

User experience(what people feel and interact with before, during, and after)

6

The User’s Journey

I want some coffee.

It’s hot in my car. The A/C is

so slow.

Aww, there’s a line. Waiting in line is not awesome.

Yum. My chocolate caramel

cheese drink!

A/C! Mmm… the smell of

coffee!

Inspiration credit: Starbucks journey map

Found a decent

parking spot.

Waiting for my drink. So

thankful for my phone. I love you phone.

Now, where did I park…?

7

The User’s Journey

I want some coffee.

It’s hot in my car. The A/C is

so slow.

Aww, there’s a line. Waiting in line is not awesome.

Yum. My chocolate caramel

cheese drink!

A/C! Mmm… the smell of

coffee!

Found a decent

parking spot.

Waiting for my drink. So

thankful for my phone. I love you phone.

Now, where did I park…?

8

Activity

1. Think of a product that you love (it can be digital or physical)

and why you love it.

2. Write it down on a post-it note.

3. One at a time, put your note up on the and read it off for

everyone to hear.

Discussion (15 minutes)

GoodDesign

9

Form (how it looks)

Function(how it works)

12

How it looks (and feels)

“Visceral design” is about the positive/negative associations with the world that you feel. ~ Don Norman

Form (how it looks)

13

+

Limbic system. Grrr. Cortex. Beep Boop.

14Image source: http://www.wikipaintings.org/en/jean-michel-basquiat/philistines

Principles of visual design

• Colors• Size and weight• Contrast• Balance and unity

• Law of proximity• Law of similarity

15

Borrowing from Gestalt Psychology

Colors

Colors have a visceral effect on us because they remind us of things in the real world.

Be careful to not go overboard with colors. “Designing is like putting on make-up, you have to know when to stop.”~ Source unknown

16

Colors

Colors can call attention to things you want users to notice. Use this power carefully. More color doesn’t mean more attention.

17

Image source: BrandGirlBlog.com

Size and weight

The amount of space that something take up reveals its relative importance. Size and weight give the user clues about visual hierarchy.

18

Image source: http://www.coetail.com/jasonc/files/2013/11/your-eyes-here.png

Contrast

The lower the contrast, the harder it might be for a user to read (it’s also an accessibility issue). But if the contrast is too high, it can be exhausting to look at for long periods of time.

19

Image source: http://www.pamelaplatt.com/class_lessons/graphic_design_principles/introduction_principals_graphic_design.html

Balance and unity

Does your site (or app) feel off kilter? If it was a physical environment, how would that make your users feel?

20

Remember that “white space” has weight too. Use it as a counterbalance.

Image source: http://www.johnlovett.com/test.htm

21

22

Gestalt law of proximity

People perceive objects that are close together in proximity to be related to each other.

23

Image source: http://en.wikipedia.org/wiki/Gestalt_psychology

Gestalt law of similarity

People perceive objects that have some similarity to be related to each other.

24

Image source: http://en.wikipedia.org/wiki/Gestalt_psychology

25

60 Seconds of Love

1. Break up into teams of 4 or 5.

2. For 60 seconds, each of you will just blurt out things you love. It

can be anything! Don’t think too much about it, just try to come

up with any many things as possible.

3. Repeat until everyone has had a chance to go.

Icebreaker (10 minutes)

26

How it works

“Behavioral design” is all about feeling like you’re in control. Includes usability, understanding, and feedback.* ~ Don Norman

Function(how it works)

*Physical and digital items can both offer feedback, e.g. a knife’s handle or the color change on hover of a button. It’s basically anything you can learn about a product by interacting with it. Note that this is different than “affordance”, which is what you can glean about a product and how it works by simply looking at it.

27

User(Who)

Motivations

(Why)

Tasks

(How)

Outcomes

(What)

Time and Context (When)

Principles of interaction design

• Don’t make me think• Understand that I’m distracted• Content does matter

28

29

Don’t make me think

What is the primary goal of the page? Of your product? Make it clear what you (primarily) want the user to do.

Steve Krug’s book: Don’t Make Me Think is a must-read for anyone interested in interaction design.

30

31

32

Understand that I’m distracted

Users are distracted. Make sure you help them focus. Squirrel!

OBSTACLES

35

“Perfection is achieved not when there’s nothing more to add, but when there’s nothing more to take away.”~ Antoine de Saint-Exupery

36

Content matters

Blah blah blah. Just kidding.

Tell a story

The $3.00 trinket that turned into a $193.50 treasure.

37

http://www.youtube.com/watch?v=ewpz2gR_oJQ

This is an icon of the fourteenth-century Saint Vralkomir of Dnobst, the patron saint of extremely fast dancing. Handcrafted in a snowbound convent by the nimble-footed Sisters of the Vralkomirian Order, it was given to my grandmother—then a nine-year-old girl—as she boarded the ship that would take her to America from Dnobst, a narrow pie-wedge of land bounded by the Dnobst River, the Grkgåt Mountains, and the Great Western Fence of Count Pyør the Litigious.

The power of experts

Crutchfield’s custom content makes users want to pay premium for the same product.

38

http://www.youtube.com/watch?v=ewpz2gR_oJQ

89%vs.

237%

Mobile

39

Mobile is a magnifying lens for your problems.

40

Design: It’s not magic,but it can seem like it.

41

Danke.Have a beer.

=)

@greybeat