You Don’t Know C.R.A.P. about UX & UI<br />
Who am I?<br />Philadelphia (‘burbs) born and raised.<br />B.S. in Systems & Information Engineering from UVA – 2005<br />...
Who are you?<br />
Lets Play a Game!<br />
What is User Experience?<br />All aspect’s of user’s interaction with the company, its services and its products.  Not onl...
Gulf of Evaluation<br />We want a small gulf!<br />The common goal of all products<br />The user:<br />Starts with a goal<...
Small Gulf of Evaluation<br />
I am not the user<br />…your teammates are not the users.  And, the customer is not always the user.<br />
User Centered Design<br />Needs Assessment<br />Personas<br />Goals<br />Task Analysis<br />User Scenarios<br />Comparativ...
The user is always right	<br />…but they never know what they need.<br />
Personas<br />When to use: The end-users’ goals are unclear, the team isn’t sure how to prioritize features<br />Why: <br ...
Personas:<br />Who are the students?<br />What matters from students’ point of view?<br />What are their goals?<br />What ...
Task Analysis<br />When to use:  At the beginning of every design cycle.<br />How to use:<br />Break a goal into specific ...
Task Analysis<br />Lets Try an Example<br />
Are we ready to sketch?<br />
Prototype & Test<br />Repeat, repeat, repeat<br />
Lo-Fidelity Prototyping a.k.a wireframes<br />When to use:  To signal the flow of interaction, To separate the content fro...
Visual Design in UI Design<br />Contrast:  If they’re not the same, make them different<br />Repetition:  Repeat colors, s...
User Scenarios & Interaction Diagrams<br />
Design Exercise<br />Re-organize a flier<br />
Point out C.R.A.P. in Google Search<br />
Metaphors and UI Patterns<br />Map to some facet of the real world task<br />Direct engagement & manipulation<br />Lots of...
Example Metaphor<br />
Why we test:<br />VCR Buttons to Control a Printer<br />Tabs of Arbitrary Groups<br />Samples from Interface Hall of Shame...
Usability Testing<br />Test if a page becomes more usable because of the layout.<br />What does the layout communicate?<br...
Discount Usability Testing<br />Usability Heuristics<br />Visibility of system status<br />Match between system and the re...
What’s wrong with this website?<br />
Is this familiar?<br />
Training is Not an Excuse for Poor Design<br />
Resources<br />Books<br />The Design of Everyday Things by Donald Norman<br />Usability Engineering by Jakob Nielsen<br />...
Upcoming SlideShare
Loading in...5
×

You Don't Know C.R.A.P. about UX/UI

2,763

Published on

I taught a class titled "You Don't Know C.R.A.P. about UX/UI" for SkillShare Philadelphia on 8/23/11. For more information on the class visit: http://www.skillshare.com/You-Dont-Know-CRAP-about-UX-UI/1632896614/

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,763
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • This is how we figure out what the user wants
  • Baby steps. The first way to get your eyes thinking in the right direction. People like symmetry, and interfaces should be even, aligned.
  • Class Participation
  • What would you put the emphasis on? What are the most important things people should know?
  • This is where consistency and standards go a long way.
  • You Don't Know C.R.A.P. about UX/UI

    1. 1. You Don’t Know C.R.A.P. about UX & UI<br />
    2. 2. Who am I?<br />Philadelphia (‘burbs) born and raised.<br />B.S. in Systems & Information Engineering from UVA – 2005<br />Masters of Information from UC-Berkeley – 2007<br />First UI Design Project: Touch Screen Treadmill Interface<br />Current Position: Lead Interaction Designer at The Cadient Group<br />
    3. 3. Who are you?<br />
    4. 4. Lets Play a Game!<br />
    5. 5. What is User Experience?<br />All aspect’s of user’s interaction with the company, its services and its products. Not only in relationship to software.<br />Meet the needs of the customer.<br />Make the products enjoyable.<br />Go beyond what the customer says they want.<br />*Nielsen-Norman Group<br />
    6. 6. Gulf of Evaluation<br />We want a small gulf!<br />The common goal of all products<br />The user:<br />Starts with a goal<br />Translates to an intention<br />Translates to a sequence of actions<br />The amount of effort a person must exert to interpret a display:<br />Perceive<br />Interpret<br />Evaluate<br />*Norman, D. The Gulf of Evaluation<br />
    7. 7. Small Gulf of Evaluation<br />
    8. 8. I am not the user<br />…your teammates are not the users. And, the customer is not always the user.<br />
    9. 9. User Centered Design<br />Needs Assessment<br />Personas<br />Goals<br />Task Analysis<br />User Scenarios<br />Comparative Analysis<br />Design<br />Initial Sketches, Interaction Diagrams<br />Low-Fidelity Prototyping<br />High-Fidelity Prototyping<br />Build<br />Evaluate<br />Low-Fidelity Usability Testing<br />Heuristic Evaluation<br />Formal Usability Tests<br />Repeat, Repeat, Repeat<br />
    10. 10. The user is always right <br />…but they never know what they need.<br />
    11. 11. Personas<br />When to use: The end-users’ goals are unclear, the team isn’t sure how to prioritize features<br />Why: <br />Identify your most important customers<br />Identify user goals and objectives.<br />Capture use cases for the product<br />Develop an idea for the market<br />Have a common “person” to point to<br />Tool to Try:Usersbox.com<br />
    12. 12. Personas:<br />Who are the students?<br />What matters from students’ point of view?<br />What are their goals?<br />What about the teacher?<br />What matters for the business?<br />
    13. 13. Task Analysis<br />When to use: At the beginning of every design cycle.<br />How to use:<br />Break a goal into specific tasks.<br />These tasks may be referred to as requirements<br />Assign a priority to these requirements based on user research and business needs.<br />Low, Medium, High or N/A<br />
    14. 14. Task Analysis<br />Lets Try an Example<br />
    15. 15. Are we ready to sketch?<br />
    16. 16. Prototype & Test<br />Repeat, repeat, repeat<br />
    17. 17. Lo-Fidelity Prototyping a.k.a wireframes<br />When to use: To signal the flow of interaction, To separate the content from layout & display, When the designer is not the developer<br />Value: Save on development time, realize design problems early before making big investments.<br />Heavyweight Tools: Visio, Fireworks, OmniGraffle<br />Mediumweight Tools:Balsamiq(Cross Platform)SimpleDiagrams (Mac), Mockingbird (Web)<br />Lightweight Tools: Marker & Paper or Whiteboard, <br />
    18. 18. Visual Design in UI Design<br />Contrast: If they’re not the same, make them different<br />Repetition: Repeat colors, shapes, fonts & sizes. Reuse patterns.<br />Alignment: Line things up. Make it clean.<br />Proximity: Group LIKE things. Put similar information close together. Organize & De-Clutter<br />
    19. 19. User Scenarios & Interaction Diagrams<br />
    20. 20. Design Exercise<br />Re-organize a flier<br />
    21. 21. Point out C.R.A.P. in Google Search<br />
    22. 22.
    23. 23. Metaphors and UI Patterns<br />Map to some facet of the real world task<br />Direct engagement & manipulation<br />Lots of resources out there:<br />UI-Patterns.com<br />Yahoo! Design Pattern Library<br />Book: Designing Interfaces by Jenifer Tidwell<br />Site: http://designinginterfaces.com/firstedition/<br />
    24. 24. Example Metaphor<br />
    25. 25. Why we test:<br />VCR Buttons to Control a Printer<br />Tabs of Arbitrary Groups<br />Samples from Interface Hall of Shame<br />
    26. 26. Usability Testing<br />Test if a page becomes more usable because of the layout.<br />What does the layout communicate?<br />Guidelines:<br />Test the interface, not the user<br />Give clear scenarios and tasks to accomplish <br />Quick & Dirty: Not much time, Grab a co-worker<br />Formal: Determine time requirements for task completion, compare two designs on measurable aspects<br />Requires Experiment Design<br />
    27. 27. Discount Usability Testing<br />Usability Heuristics<br />Visibility of system status<br />Match between system and the real world<br />User control and freedom<br />Consistency and standards<br />Error prevention<br />Recognition rather than recall<br />Flexibility and efficiency of use<br />Aesthetic and minimalist design<br />Help users recognize, diagnose, and recover from errors<br />Help and documentation<br />How<br />Use on Lo or Hi-Fidelity Prototypes, or built products<br />Use a small set of 3-5 evaluators<br />Check for compliance with usability principles<br />*Jakob Nielsen<br />
    28. 28. What’s wrong with this website?<br />
    29. 29. Is this familiar?<br />
    30. 30. Training is Not an Excuse for Poor Design<br />
    31. 31. Resources<br />Books<br />The Design of Everyday Things by Donald Norman<br />Usability Engineering by Jakob Nielsen<br />The Inmates are Running the Asylum by Alan Cooper<br />GUI Bloopers by Jeff Johnson<br />PhillyCHI<br />Websites<br />DesigningInterfaces.com<br />Use-it.com<br />UI-Patterns.com<br />UXMag.com<br />AListApart.com<br />Local Groups<br />
    1. A particular slide catching your eye?

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

    ×