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

SER594 Lecture 05

SER594 Lecture 05

Human Computer Interaction
User Experience: Color and Messages
(201902)

Javier Gonzalez-Sanchez

April 21, 2019
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

  1. SER594
    Human-Computer Interaction
    Lecture 05
    User Experience
    Javier Gonzalez-Sanchez, PhD
    [email protected]
    javiergs.engineering.asu.edu
    Office Hours: By appointment

    View full-size slide

  2. User Experience
    A user’s perceptions and response
    resulting from the use and/or anticipated use
    of a product, system or service
    experience
    interaction

    View full-size slide

  3. User Experience
    consequence of
    1. brand image,
    2. presentation,
    3. functionality,
    4. system performance,
    5. interactive behavior and
    6. assistive capabilities
    7. user’s prior experiences,
    8. user’s attitudes, skills and personality, and
    9. the context of use.

    View full-size slide

  4. Presentation | GUI
    1
    4

    View full-size slide

  5. Your Projects

    View full-size slide

  6. Your Projects

    View full-size slide

  7. Your Projects

    View full-size slide

  8. Your Projects

    View full-size slide

  9. Presentation | Colors
    2
    9

    View full-size slide

  10. Color Wheel
    • Color Harmony –arrangement of colors in an attractive and
    effective way.
    • Pleased and calm vs chaos and disgust.
    • Users make their impression by the first look, and colors have
    the big influence.
    • 4 approaches: monochromatic, analogous, complementary,
    and triadic.

    View full-size slide

  11. Monochromatic
    One color with various tones and shades of it. a winning choice
    since it’s hard to make a mistake
    https://www.sessions.edu/color-calculator/

    View full-size slide

  12. Analogous
    Colors located right next to each other on the color wheel. When
    no contrast is needed
    https://www.sessions.edu/color-calculator/

    View full-size slide

  13. Complementary
    Mix of colors placed in front of each other on the color wheel.
    Produce high contrast
    https://www.sessions.edu/color-calculator/

    View full-size slide

  14. Triadic
    When the design requires more colors you can try triadic
    scheme –colors are equidistant on the color wheel
    https://www.sessions.edu/color-calculator/

    View full-size slide

  15. Colors to Use

    View full-size slide

  16. Colors to Use

    View full-size slide

  17. Interactive Behavior
    3
    2
    1

    View full-size slide

  18. User Experience
    consequence of
    1. brand image,
    2. presentation,
    3. functionality,
    4. system performance,
    5. interactive behavior and
    6. assistive capabilities
    7. user’s prior experiences,
    8. user’s attitudes, skills and personality, and
    9. the context of use.

    View full-size slide

  19. Interactive Behavior
    • Humanizing a Computerized System, be careful with the micro-
    interactions
    • Add a little personality to the site or app.
    experience
    interaction
    What is
    the Problem?
    What
    I do next?

    View full-size slide

  20. Interactive Behavior

    View full-size slide

  21. Homework
    What about your servers and client User Interfaces?
    1. Simple but complete
    2. Consistent
    3. Use colors strategically
    4. Always Communicate what is happening
    5. Default input make sense

    View full-size slide

  22. Homework
    What about your servers and client Interaction Design?
    1. Easy to Understand What it Do
    2. Easy to Learn How to use
    3. Handling Problems (Errors)
    4. Solving or recovering from problems (Errors)

    View full-size slide

  23. SER594 – Human Computer Interaction
    Javier Gonzalez-Sanchez
    [email protected]
    Spring 2019
    Disclaimer. These slides can only be used as study material for the SER594 course at ASU.
    They cannot be distributed or used for another purpose.

    View full-size slide