UX Design Workshop – Presentation Transcript

1. User Experience Design Workshop
2. What is UX?
   Workshop
   Techniques
   Fun
   Dialog
   UI Design
   Discussions
   UI Process
3. Do you really believe
   what your eyes see?
4. Do you really believe
   what your eyes see?
5. Charlie Chaplin – Illusion
6. Now that we know,
   what next?
7. Some Background
8. Usability Definition
   [Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use." – ISO 9241-11
9. Who would be using this application?
   Where this user would be achieving this goal?
   What this user would like to achieve?
10. Persona
    UserWho would be using this application?
    Tasks profiling
    Can’t be “ALL USERS”
    Create Scenarios
11. More features less usability
    Understand primary tasks
    Focus on important things
    Goal What this user would like to achieve?
12. Personal Interview
    Email
    Surveys
    Context Where this user would be achieving this goal?
    Contextual Inquiry
    Focus Group
    Support Line
13. Enough theories, How
    do I design a web app?
14. This is where it all begins.
    What user want?
    Application Feature?
    BRS
15. This step transforms strategy into requirements.
    SRS
    Functional & UI requirement
16. This gives shape to the scope.
    Navigation
    Sitemap
17. It makes the site concrete.
    Wireframes
    Storyboards
    Prototype
    IA
18. Surface brings everything together visually.
    Graphics
    Icons
    Colors
19. Go low level and talk
    about design elements
20. Create accessible links
    Web users scan text
    User short & simple words
    Inverted pyramid writing
    Online vs. print content
21. Font
    Times New Roman is a common serif font
    Font
    Verdana is a common sans serif font
    Font
    Times New Roman is a proportional spaced font
    Font
    Courier is a monospace font
    Some gyan about fonts
22. Aoccdrnig to rseerach at Cmabrigde
    Uinervtisy, it deosn'tmttaer in waht
    oredr the ltteers in a wrod are, the
    olnyiprmoatnttihng is taht the frist
    and lsatltteer be at the rghitpclae.
    The rset can be a total mses and you
    can sitllraedit wouthitporbelm.
    Tihs is bcuseae the huamnmnid
    deos not raederveylteter by istlef,
    but the wrod as a wlohe.
    Amzanig huh?
    Avoid italics
    Capital = 14-20% less readable
    Sans serif are build for web
    10 points or larger is safe
    font gyan continues
23. C a yureat is?
    You a e not radigths.
    W at arourea in ?
24. Get user attention
25. Do not use pure red or blue
    Do not use more than 6 colors
    7% of population is color blind
    Blue is a safe color
    Use of colors
26. Try this color illusion
27. Familiarity reduces learning
    Meaning less icons
    Inconsistent icons
    Unlabeled icons
    Avoid Popular metaphors
    Use of icons
28. Button = Action
    Link = Navigation
    Consistency
    Affordance
    Usage of buttons
29. Number of items
    Usage pattern
    Space constrain
    Searching capability
    Auto complete
    Radio button, dropdown, or shuttle
30. Suggest solution
    Prevent error
    Keep it together
    Think about the message
    Never show system errors
    Error handling
31. User Experience Design
    User Experience Design
    User Interface Design
    Human Factors Engineering
    Information Architecture
    Usability
    Human Computer Interaction