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

An introduction to User Experience Design

An introduction to User Experience Design

In this talk I give an overview of the elements of User Experience Design, and more importantly, why you should care about it. The goal is to provide some baseline knowledge of the user-centered design process to equip anyone to take those skills back to their daily work and start applying it immediately. I discuss user experience research, content strategy, interaction design, and visual design, and how those elements work together to build great experiences.

Rian van der Merwe

October 19, 2011
Tweet

More Decks by Rian van der Merwe

Other Decks in Design

Transcript

  1. An introduction to
    user experience design
    @RianVDM

    View full-size slide

  2. User experience encompasses all
    aspects of the end-user's interaction
    with the company, its services, and its
    products. The first requirement for an
    exemplary user experience is to meet
    the exact needs of the customer,
    without fuss or bother. 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. 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.

    View full-size slide

  3. Design
    is the process of finding
    the most elegant answer
    to the question of
    ‘how do I…?’
    @drawar

    View full-size slide

  4. is a set of decisions about a
    product. It's not an interface
    or an aesthetic, it's not a
    brand or a color. Design is
    the actual decisions.
    Design
    @artypapers

    View full-size slide

  5. Good design improves company performance

    View full-size slide

  6. Iteration Variation
    vs.

    View full-size slide

  7. Minimum Desirable Product is the
    simplest experience necessary
    to prove out a high-value,
    satisfying product experience
    for users

    View full-size slide

  8. The elements of user experience design
    User Research
    Product Discovery
    Strategic
    foundation
    Information
    Architecture
    Content
    Strategy
    Interaction
    Design
    Structural
    interior
    Visual Design
    Sensory
    exterior
    www.elezea.com

    View full-size slide

  9. The elements of user experience design
    User Research
    Product Discovery
    Information
    Architecture
    Content
    Strategy
    Interaction
    Design
    Visual Design
    Strategic
    foundation
    Structural
    interior
    Sensory
    exterior
    www.elezea.com

    View full-size slide

  10. User experience research

    View full-size slide

  11. Market
    Research
    seeks to understand the needs
    of the market in general
    User
    experience
    research
    focuses on users’ interaction
    with the product

    View full-size slide

  12. Concept testing

    View full-size slide

  13. Usability testing

    View full-size slide

  14. The elements of user experience design
    User Research
    Product Discovery
    Information
    Architecture
    Content
    Strategy
    Interaction
    Design
    Visual Design
    Strategic
    foundation
    Structural
    interior
    Sensory
    exterior
    www.elezea.com

    View full-size slide

  15. Information architecture

    View full-size slide

  16. I'm an information architect.
    I map paths and places across
    physical, digital, and cognitive
    spaces.
    - Peter Morville

    View full-size slide

  17. Navigation
    Information
    organization
    Information
    relationship
    IA
    strategy
    IA
    research
    IA
    management

    View full-size slide

  18. Text
    http://abbytheia.wordpress.com/2012/04/12/ia-heuristics-journey/

    View full-size slide

  19. Findable
    Able to be located

    View full-size slide

  20. The elements of user experience design
    User Research
    Product Discovery
    Information
    Architecture
    Content
    Strategy
    Interaction
    Design
    Visual Design
    Strategic
    foundation
    Structural
    interior
    Sensory
    exterior
    www.elezea.com

    View full-size slide

  21. Content strategy

    View full-size slide

  22. What happens when
    words
    images
    are separated?
    &

    View full-size slide

  23. You cannot
    design without
    content

    View full-size slide

  24. Structure first.
    Content always.

    View full-size slide

  25. Content strategy plans for the creation,
    delivery, and governance of content.
    Better content.
    Content people care about.
    Content that supports your business objectives
    and meets your users' goals.
    It's a long-term fix for content problems of all
    sizes.
    @halvorson

    View full-size slide

  26. Good content

    View full-size slide

  27. The elements of user experience design
    User Research
    Product Discovery
    Information
    Architecture
    Content
    Strategy
    Interaction
    Design
    Visual Design
    Strategic
    foundation
    Structural
    interior
    Sensory
    exterior
    www.elezea.com

    View full-size slide

  28. Interaction design

    View full-size slide

  29. Interaction design defines the structure and
    behaviors of interactive products and services,
    and user interactions with those products and
    services.
    Interaction design is grounded in an
    understanding of real users (goals, tasks,
    experiences, needs, and wants) and balances
    these needs with business goals and
    technological capabilities.
    - IxDA

    View full-size slide

  30. 10 heuristics for user interface design
    1. Visibility of system status

    View full-size slide

  31. Default Hover Click Wait Success

    View full-size slide

  32. 10 heuristics for user interface design
    1. Visibility of system status
    2. Match between system and the real world

    View full-size slide

  33. 10 heuristics for user interface design
    1. Visibility of system status
    2. Match between system and the real world
    3. User control and freedom
    4. Consistency and standards

    View full-size slide

  34. 10 heuristics for user interface design
    1. Visibility of system status
    2. Match between system and the real world
    3. User control and freedom
    4. Consistency and standards
    5. Error prevention

    View full-size slide

  35. 10 heuristics for user interface design
    1. Visibility of system status
    2. Match between system and the real world
    3. User control and freedom
    4. Consistency and standards
    5. Error prevention
    6. Recognition rather than recall
    7. Flexibility and efficiency of use
    8. Aesthetic and minimalist design

    View full-size slide

  36. 10 heuristics for user interface design
    1. Visibility of system status
    2. Match between system and the real world
    3. User control and freedom
    4. Consistency and standards
    5. Error prevention
    6. Recognition rather than recall
    7. Flexibility and efficiency of use
    8. Aesthetic and minimalist design
    9. Help users recognize and recover from errors

    View full-size slide

  37. 10 heuristics for user interface design
    1. Visibility of system status
    2. Match between system and the real world
    3. User control and freedom
    4. Consistency and standards
    5. Error prevention
    6. Recognition rather than recall
    7. Flexibility and efficiency of use
    8. Aesthetic and minimalist design
    9. Help users recognize and recover from errors
    10. Help and documentation

    View full-size slide

  38. Flow diagrams
    Wireframes
    Prototypes
    Layout, structure, and flow
    not
    typography, colors, & aesthetics

    View full-size slide

  39. The elements of user experience design
    User Research
    Product Discovery
    Information
    Architecture
    Content
    Strategy
    Interaction
    Design
    Visual Design
    Strategic
    foundation
    Structural
    interior
    Sensory
    exterior
    www.elezea.com

    View full-size slide

  40. Visual design

    View full-size slide

  41. The art and profession of selecting
    and arranging visual elements —
    such as typography, images,
    symbols, and colours — to convey a
    message to an audience.
    - Encyclopedia Britannica

    View full-size slide

  42. The principles of
    visual design
    Balance. Proximity.
    Alignment.Consistency.
    Contrast. White space.

    View full-size slide

  43. The role of visual design

    View full-size slide

  44. So, what now?

    View full-size slide

  45. People
    The web is a technology, but more importantly, it is
    People constitute and maintain the network.
    Frank Chimero
    all the way down
    It is widespread and distributed, but it is very delicate.
    Like a real web, it needs constant maintenance to keep from tearing.

    View full-size slide

  46. We should care more about our craft
    because we’re granted an opportunity to
    contribute to the world. We should care
    more about our audiences because they
    are the ones who give our work value. The
    things we make are all just excuses to
    speak with one another and to help one
    another. We are all linked, and the things
    that we make for each other strengthen
    the invisible threads that tie us all
    together. - Frank Chimero

    View full-size slide

  47. An introduction to
    user experience design
    @RianVDM

    View full-size slide

  48. Sources
    http://xkcd.com/773
    http://www.nngroup.com/about/userexperience.html
    http://drawar.com/d/what-is-design/
    http://www.quora.com/Rebekah-Cox/Design-Quora-Web2-0-Expo-Presentation
    http://www.readwriteweb.com/archives/facebook_wants_to_be_your_one_true_login.php
    http://www.alistapart.com/articles/thedisciplineofcontentstrategy/
    http://www.lukew.com/ff/entry.asp?327
    http://www.useit.com/papers/heuristic/heuristic_list.html
    http://www.userfocus.co.uk/articles/A_CRAP_way_to_improve_usability.html
    http://blog.frankchimero.com/post/11620616234

    View full-size slide