You Don't Know C.R.A.P. about UX/UI
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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

Uploaded 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: ......

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:

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 91 40 27 9 8 7

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    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.


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