Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advance technique for designing web application

alvinwoon
January 12, 2009

Advance technique for designing web application

alvinwoon

January 12, 2009
Tweet

More Decks by alvinwoon

Other Decks in Technology

Transcript

  1. Advanced techniques for
    designing web app interfaces
    Alvin Woon
    Design Lead, Plurk
    Saturday, 12 January, 13

    View full-size slide

  2. We are designing a web
    application, not a promotion/
    marketing website.
    Goal is to help user gets thing done
    Saturday, 12 January, 13

    View full-size slide

  3. Steps before actual design
    Saturday, 12 January, 13

    View full-size slide

  4. Personas
    a summary representation of the UI's intended users,
    often described as real people.
    - To understand personas and its importance, we have
    to understand the meaning of end goals.
    - End goal is the most significant factors in determining
    the overall product experience.
    Saturday, 12 January, 13

    View full-size slide

  5. what are end goals?
    • Clear my desk before I leave for home.
    • Make good business decisions based on my data.
    • Find problems proactively before they become crit
    ical.
    UX practitioners must translate end goals into a
    product’s behaviors, tasks, look, and feel. Persona
    helps humanize the process in doing so. http://
    www.uxmatters.com
    3 most important thing in personas
    creation: profile, scenario and avatar
    Saturday, 12 January, 13

    View full-size slide

  6. Saturday, 12 January, 13

    View full-size slide

  7. Saturday, 12 January, 13

    View full-size slide

  8. Saturday, 12 January, 13

    View full-size slide

  9. but...
    - inaccurate/biased pesonas lead to fictional UI
    trying to help fictional users reach their fictional
    end goals
    - interview real people, don't assume you know
    what a teenage girl/60 grandpa wants.
    - using personas when designing for 'everyone'
    risk alienating certain type of users (think social
    site)
    Saturday, 12 January, 13

    View full-size slide

  10. Card sorting
    Saturday, 12 January, 13

    View full-size slide

  11. in other words... card sorting is useful in
    grouping different, scattered content into
    Saturday, 12 January, 13

    View full-size slide

  12. Saturday, 12 January, 13

    View full-size slide

  13. Saturday, 12 January, 13

    View full-size slide

  14. Wireframing
    • establish consensus of ideas between
    various stakeholders
    • designer and developer know where
    'things at'
    • easier to change wireframe on the fly
    then actual pixel-perfect mockup
    • more important in this ajax era - more
    quick screens to show the state of
    things.
    Saturday, 12 January, 13

    View full-size slide

  15. seth - subimage llc
    Saturday, 12 January, 13

    View full-size slide

  16. Saturday, 12 January, 13

    View full-size slide

  17. Wireframe software
    • axure, gliffy (professional, expensive,
    popular among UX in big corporations.
    • DENIM (by University of Washington,
    open source, free)
    • Alvin's favorite - pencil and paper :-)
    Saturday, 12 January, 13

    View full-size slide

  18. Task modeling and user flows
    - if you design ten states/pages
    for a UI component, how does an engineer know the c
    onditions under which each of the ten states appears?
    - task flows = diagram (flowcharts or inter-linked
    components) that shows the relationship between
    components of various user interactions for an
    application.
    Saturday, 12 January, 13

    View full-size slide

  19. Saturday, 12 January, 13

    View full-size slide

  20. Saturday, 12 January, 13

    View full-size slide

  21. Saturday, 12 January, 13

    View full-size slide

  22. Saturday, 12 January, 13

    View full-size slide

  23. Saturday, 12 January, 13

    View full-size slide

  24. Paper prototyping
    - prototyping interface using paper-based
    product (DUH!)
    - encourage fast iterations: you can switch and
    sketch and erase with apparent ease
    - photoshop has layers. In PP, you can have
    many papers/cards illustrating different
    interaction process.
    - allow users participation by drawing on
    mocks.
    Saturday, 12 January, 13

    View full-size slide

  25. Saturday, 12 January, 13

    View full-size slide

  26. if you are bad at drawing...
    there are some ready-to-print
    design stencils available for you to
    mix and match.
    - Yahoo! Design Stencil
    - http://www.infodesign.com.au/
    usabilityresources/design/
    paperprototypinggraphics.asp
    Saturday, 12 January, 13

    View full-size slide

  27. Saturday, 12 January, 13

    View full-size slide

  28. Saturday, 12 January, 13

    View full-size slide

  29. Saturday, 12 January, 13

    View full-size slide

  30. but...
    - be careful when prototyping AJAXy interface
    with paper. Hard to communicate the concept of
    'loading time' in paper.
    - experimental navigation structure such as
    timeline, complex dropdown and etc are hard to
    illustrate via drawing.
    - localization, RTL interface
    Saturday, 12 January, 13

    View full-size slide

  31. Responsive UI
    • speed is the biggest user
    experience improvement we can
    provide to users
    • all of the things I'm going to
    present today will be useless if
    your web application is slow
    Saturday, 12 January, 13

    View full-size slide

  32. Clear navigation
    • use existing design pattern
    • avoid dropdown whenever
    possible
    • breadcrumb is overrated (undo, proper
    support of back button is more important)
    • use card sorting to organize your
    Saturday, 12 January, 13

    View full-size slide

  33. Make it easy for users to
    recover from mistakes
    • autosave
    • undo
    • informative error messages
    • unobstrusive reminder/warning
    Saturday, 12 January, 13

    View full-size slide

  34. Choose a good default for
    user
    • many choices = more time to make
    decisions. Clutter, too many options.
    Hick's Law.
    • your app might fail because of lack of
    features, but never because of lack of UI
    and execution choices.
    Saturday, 12 January, 13

    View full-size slide

  35. Saturday, 12 January, 13

    View full-size slide

  36. Adaptive UI
    • providing different UI to different
    type of users.
    • help user advances from novice,
    intermediate to advance level.
    Saturday, 12 January, 13

    View full-size slide

  37. Saturday, 12 January, 13

    View full-size slide

  38. Saturday, 12 January, 13

    View full-size slide

  39. Reuse existing design
    elements
    • review current design components.
    reuse when possible
    • try to stick with existing color scheme,
    typography, spacing
    • consistency in design = design elements
    Saturday, 12 January, 13

    View full-size slide

  40. Effective color combination
    • emphasize on contrast, whitespace, good
    typography and consistent alignment
    • learn about the fundamentals of color theory.
    • if you don't know what color to use - use light blue/
    grey. Color blind-friendly, universal and culturally
    peaceful.
    Saturday, 12 January, 13

    View full-size slide

  41. Color Theory
    Saturday, 12 January, 13

    View full-size slide

  42. analogous colors scheme
    Saturday, 12 January, 13

    View full-size slide

  43. complementary colors scheme
    Saturday, 12 January, 13

    View full-size slide

  44. conservative color scheme
    Saturday, 12 January, 13

    View full-size slide

  45. explosive color scheme
    Saturday, 12 January, 13

    View full-size slide

  46. color blindness
    Saturday, 12 January, 13

    View full-size slide

  47. Post launch: Study your users
    • biggest social sites dedicate hundreds
    of servers for analytic purposes to study
    users cognitive style when using their
    site.
    • forget pageviews, visits. learn to dig
    deep: entrance page, time on page,
    Saturday, 12 January, 13

    View full-size slide

  48. Saturday, 12 January, 13

    View full-size slide

  49. Keep iterating...
    • AB testing
    • Use your analytic data and set a
    goal
    • everything can be improved, let
    Saturday, 12 January, 13

    View full-size slide

  50. Saturday, 12 January, 13

    View full-size slide

  51. Saturday, 12 January, 13

    View full-size slide

  52. Saturday, 12 January, 13

    View full-size slide

  53. the end =)
    questions?
    Saturday, 12 January, 13

    View full-size slide