Upload
mary-lan
View
120
Download
3
Tags:
Embed Size (px)
DESCRIPTION
User experience design is about more than just being pretty. In this presentation, I talk about form and function and provide quick tips for evaluating your own designs and products.
Citation preview
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