Bus40
UX for Non-
Designers
Christina Wodtke
@cwodtke | linkedin.com/in/christinawodtke |
cwodtke.com
Don Norman
"User experience"
encompasses all
aspects of the end-
user's interaction
with the company,
its services, and it...
I love amazon. It is a clear yet rich shopping experience. It gives me what I need
to make a decision. But it’s more than ...
Amazon understands me. It shows me things I didn’t even realize were available
that I love. Lynda Carter FTW!
Let’s be honest: it’s all about the smiling boxes.And who doesn’t like to come home to smiling boxes?
Are you stuck? A human is waiting to unstick you!
Don Norman
The first requirement
for an exemplary user
experience is to meet
the exact needs of
the customer, without
fuss...
A) Amazon understands I always run out of razors!
B) Amazon understands I have no clue how often to buy them!
Don Norman
Next comes simplicity and
elegance that produce
products that are a joy to
own, a joy to use.
True user experie...
The doodle not only has no utility on google, it breaks the rule of branding: never
touch the mark! Let it warms and makes...
You can argue that Amazon should kill joke reviews, because they mess up the
algorithms. But they also warm up what could ...
Don Norman
In order to achieve high-
quality user experience in a
company's offerings there
must be a seamless
merging of ...
What is user experience?
The mini cooper convertible has my favorite car experience. The way it handles,
accelerates as we...
But the experience doesn’t stop at the car. There are stickers, swag, driving
adventures, dedicated AAA support for the li...
HEADER
WHAT IS
GOOD?
What is it? Why do you love it? What’s your favorite part?
EXERCISE
19
HEADER
WHAT IS
BAD?
What is it? Why do you hate it? What’s the worst part?
EXERCISE
20
HEADER
MAKE IT
BE GOOD.
Teams, 20 minutes, sketch answers
EXERCISE
Universal
PrinciplesAffordances
Feedback
Standards
Poka-yoke
Direct Manipulation
DIRECT
MANIPULATIONIt is easier and more pleasant to have a 1:1 relationship with the thing manipulate
and the manipulator...
Affordance
sThings that look pushable, get pushed. Things that look pullable, get pulled.
Affordance
sThe Ipad keyboard is harder to use than a regular one because there are no
physical affordances and we don’t’ ...
Feedback
On twitter, when you post you get feedback so you know your tweet went out.
FeedbackOn Facebook, they show the
link preview as soon as you
add it, so you know all is
working (and can preview)
FeedbackYour new status is always
posted on top, to let you
know it was successfully
posted (even if a new status
came in ...
Inline feedback vs validation: Luke Wrobowski
http://alistapart.com/article/inline-validation-in-web-
forms
Traditional In...
Feedback Matters
Inline feedback gave:
•a 22% increase in success rates,
•a 22% decrease in errors made,
•a 31% increase i...
The Poka-Yoke
Principle
Poka-Yoke roughly translates in English to mistake proofing:
avoiding (yokeru) inadvertent errors ...
ErrorsPrevent
Allow fixes
COMPASSION
Avoid learned
Dismissal
"Obey standards
unless there is a
truly superior
alternative"
- Alan Cooper
Standards
Law of the
Conservation of
Complexity
states that some complexity is inherent in every process. There is a
point beyond wh...
The Magical
Number
Seven +- 1
Is a myth
Contextual
Principles
What you know about the context/users/activity. E.g.
‣ Recipes must be scannable
‣ User should know ...
Tivo
TennantsIt’s entertainment, stupid.
It’s TV, stupid.
It’s video, dammit.
Everything is smooth and gentle.
No modality...
jesse james
garrett
User Experience Design:
the design of anything
independent of medium
or across [device]
with human exp...
38
jesse
james
garrett
-Jesse James Garrett
USER EXPERIENCE IS BIG
Too big?
40 dan saffer
http://www.eleganthack.com/a-simple-model-for-user-
experience-design/
User Experience Design is big. You
will suck if you try to do it all.
That is AWESOME
Not trying=failing
Find your love. F...
DISCUSSION
LEARN MORE
BUS40 Introduction to User Experience Design
BUS40 Introduction to User Experience Design
BUS40 Introduction to User Experience Design
Upcoming SlideShare
Loading in...5
×

BUS40 Introduction to User Experience Design

7,599

Published on

First class for Stanford Continuing Studies class: UX for Non-Designers.

Lightly annotated.

Recommended follow up reading: http://sse.tongji.edu.cn/liangshuang/hci2013spring/readings/universal-principles-of-design.pdf

Published in: Design, Technology
0 Comments
31 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,599
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
129
Comments
0
Likes
31
Embeds 0
No embeds

No notes for slide
  • Model introductions here
  • Amazon offers a wide variety of products
  • Powerful algorythm
  • Unmatched delivery, smiling boxes
  • Subscriptions solve a real problem
  • Doodles are the fun, surprising, and sometimes spontaneous changes that are made to the Google logo to celebrate holidays, anniversaries, and the lives of famous artists, pioneers, and scientists.
    How did the idea for doodles originate?
     In 1998, before the company was even incorporated, the concept of the doodle was born when Google founders Larry and Sergey played with the corporate logo to indicate their attendance at the Burning Man festival in the Nevada desert. They placed a stick figure drawing behind the 2nd "o" in the word, Google, and the revised logo was intended as a comical message to Google users that the founders were "out of office." While the first doodle was relatively simple, the idea of decorating the company logo to celebrate notable events was born.
    Two years later in 2000, Larry and Sergey asked current webmaster Dennis Hwang, an intern at the time, to produce a doodle for Bastille Day. It was so well received by our users that Dennis was appointed Google's chief doodler and doodles started showing up more and more regularly on the Google homepage. In the beginning, the doodles mostly celebrated familiar holidays; nowadays, they highlight a wide array of events and anniversaries from the Birthday of John James Audubon to the Ice Cream Sundae.
    Over time, the demand for doodles has risen in the U.S. and internationally. Creating doodles is now the responsibility of a team of talented illlustrators (we call them doodlers) and engineers. For them, creating doodles has become a group effort to enliven the Google homepage and bring smiles to the faces of Google users around the world.
    How many doodles has Google done over the years?
     The team has created over 1000 doodles for our homepages around the world.
    Who chooses what doodles will be created and how do you decide which events will receive doodles?
     A group of Googlers get together regularly to brainstorm and decide which events will be celebrated with a doodle. The ideas for the doodles come from numerous sources including Googlers and Google users. The doodle selection process aims to celebrate interesting events and anniversaries that reflect Google's personality and love for innovation.
    Who designs the doodles?
     There is a team of illustrators (we call them doodlers) and engineers that are behind each and every doodle you see.
    How can Google users/the public submit ideas for doodles?
    The doodle team is always excited to hear ideas from users - they can email proposals@google.com with ideas for the next Google doodle. The team receives hundreds of requests every day so we unfortunately can't respond to everyone. But rest assured that we're reading them :)
  • The amazon joke reviews not only stay but are promoted
  • Instructor talks about a product you love (replace mini with one you love). Why do you love it? What makes it great?
  • Now talk about the wider ecosystem, the things that add to the expereince.
  • This is to discuss the ideas they brought in on what is good. Capture heuristics that support their idea fo good stuff
  • Brainstorm annoying things
  • Use heuristics from good to redesign the bad thing. 20 minutes work, 10 min sharing.
  • Exercise
    Have a student write their name on a white board. Now tape the marker to a long stick (like a broom handle) and try again.
  • Compare the keyboard buttons you can feel and push, to the hyper-flat keyboad. What is nicer to use? Is the ipad keyboard enough?
  • Compare the keyboard buttons you can feel and push, to the hyper-flat keyboad. What is nicer to use? Is the ipad keyboard enough?
  • On twitter, when you post you get feedback so you know your tweet went out.
    on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0
    Your new status is always posted on top, to let you know its there.
    Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • On twitter, when you post you get feedback so you know your tweet went out.
    on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0
    Your new status is always posted on top, to let you know its there.
    Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • On twitter, when you post you get feedback so you know your tweet went out.
    on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0
    Your new status is always posted on top, to let you know its there.
    Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • USB can only be put in one place.
  • i.e. I don’t care if it’s stupid, use it.
  • So bloody true.
    And mostly we move the complexity from the user to the designer.
  • Limiting the number of menu tabs or the number of items in a dropdown list to the George Miller’s magic number 7 is a false constraint. Miller’s original theory argues that people can keep no more than 7 (plus or minus 2) items in their short-term memory. On a webpage, however, the information is visually present, people don’t have to memorize anything and therefore can easily manage broader choices.
    For example, research shows that broad and shallow menu structures may even work better than deeper menus. Also, link-rich e-commerce homepages, like that of Amazon with 90+ product category links, are found to be more usable than homepages with only a few links.
    http://uxmyths.com/post/931925744/myth-23-choices-should-always-be-limited-to-seven
  • Talk throughthe model
  • BUS40 Introduction to User Experience Design

    1. 1. Bus40 UX for Non- Designers
    2. 2. Christina Wodtke @cwodtke | linkedin.com/in/christinawodtke | cwodtke.com
    3. 3. Don Norman "User experience" encompasses all aspects of the end- user's interaction with the company, its services, and its products.
    4. 4. I love amazon. It is a clear yet rich shopping experience. It gives me what I need to make a decision. But it’s more than a website…
    5. 5. Amazon understands me. It shows me things I didn’t even realize were available that I love. Lynda Carter FTW!
    6. 6. Let’s be honest: it’s all about the smiling boxes.And who doesn’t like to come home to smiling boxes?
    7. 7. Are you stuck? A human is waiting to unstick you!
    8. 8. Don Norman The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.
    9. 9. A) Amazon understands I always run out of razors! B) Amazon understands I have no clue how often to buy them!
    10. 10. Don Norman Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features.
    11. 11. The doodle not only has no utility on google, it breaks the rule of branding: never touch the mark! Let it warms and makes human the search giant. That matters.
    12. 12. You can argue that Amazon should kill joke reviews, because they mess up the algorithms. But they also warm up what could be a cold space.
    13. 13. Don Norman In order to achieve high- quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.
    14. 14. What is user experience? The mini cooper convertible has my favorite car experience. The way it handles, accelerates as well as the beautiful interior, the innovative half-open position of the roof!.
    15. 15. But the experience doesn’t stop at the car. There are stickers, swag, driving adventures, dedicated AAA support for the life of the car and music services! What does it mean to enjoy driving a car, they asked… then answered.
    16. 16. HEADER WHAT IS GOOD? What is it? Why do you love it? What’s your favorite part? EXERCISE
    17. 17. 19 HEADER WHAT IS BAD? What is it? Why do you hate it? What’s the worst part? EXERCISE
    18. 18. 20 HEADER MAKE IT BE GOOD. Teams, 20 minutes, sketch answers EXERCISE
    19. 19. Universal PrinciplesAffordances Feedback Standards Poka-yoke Direct Manipulation
    20. 20. DIRECT MANIPULATIONIt is easier and more pleasant to have a 1:1 relationship with the thing manipulate and the manipulator – this is why toddlers can use ipads.
    21. 21. Affordance sThings that look pushable, get pushed. Things that look pullable, get pulled.
    22. 22. Affordance sThe Ipad keyboard is harder to use than a regular one because there are no physical affordances and we don’t’ type looking usually. Flat design is often disliked because it’s hard to know what is pushable.
    23. 23. Feedback On twitter, when you post you get feedback so you know your tweet went out.
    24. 24. FeedbackOn Facebook, they show the link preview as soon as you add it, so you know all is working (and can preview)
    25. 25. FeedbackYour new status is always posted on top, to let you know it was successfully posted (even if a new status came in a second after, and is thus newer)
    26. 26. Inline feedback vs validation: Luke Wrobowski http://alistapart.com/article/inline-validation-in-web- forms Traditional Inline
    27. 27. Feedback Matters Inline feedback gave: •a 22% increase in success rates, •a 22% decrease in errors made, •a 31% increase in satisfaction rating, •a 42% decrease in completion times, and •a 47% decrease in the number of eye fixations. “You’d rather know about your mistakes as you go along.” “It’s much better than getting all the way down and hitting ‘submit,’ only to find out that it doesn’t like your username. It’s much better when it tells you as you go along.” Inline Validation in Web Forms by LUKE WROBLEWSKI September 01, 2009
    28. 28. The Poka-Yoke Principle Poka-Yoke roughly translates in English to mistake proofing: avoiding (yokeru) inadvertent errors (poka). Designers use Poka-Yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation.
    29. 29. ErrorsPrevent Allow fixes COMPASSION Avoid learned Dismissal
    30. 30. "Obey standards unless there is a truly superior alternative" - Alan Cooper Standards
    31. 31. Law of the Conservation of Complexity states that some complexity is inherent in every process. There is a point beyond which you can’t simplify the process any further; you can only move the inherent complexity from one place to another. Larry Tessler
    32. 32. The Magical Number Seven +- 1 Is a myth
    33. 33. Contextual Principles What you know about the context/users/activity. E.g. ‣ Recipes must be scannable ‣ User should know where they are in a recipe ‣ Recipes allow users to find ingredients for shopping and mise en place by listing them apart from instructions You make them up
    34. 34. Tivo TennantsIt’s entertainment, stupid. It’s TV, stupid. It’s video, dammit. Everything is smooth and gentle. No modality or deep hierarchy. Respect the viewer’s privacy. It’s a robust appliance, like a TV.
    35. 35. jesse james garrett User Experience Design: the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal -Jsse James Garrett
    36. 36. 38 jesse james garrett -Jesse James Garrett
    37. 37. USER EXPERIENCE IS BIG Too big?
    38. 38. 40 dan saffer
    39. 39. http://www.eleganthack.com/a-simple-model-for-user- experience-design/
    40. 40. User Experience Design is big. You will suck if you try to do it all. That is AWESOME Not trying=failing Find your love. Follow it. 43
    41. 41. DISCUSSION
    42. 42. LEARN MORE
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×