SER594 Lecture 05

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

Transcript

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

   View 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 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 Slide

4. Presentation | GUI
   1
   4
   

   View Slide

5. Your Projects
   

   View Slide

6. Your Projects
   

   View Slide

7. Your Projects
   

   View Slide

8. Your Projects
   

   View Slide

9. Presentation | Colors
   2
   9
   

   View Slide

10. Case 1
    

    View Slide

11. Case 2
    

    View Slide

12. Case 3
    

    View Slide

13. Color Wheel
    

    View Slide

14. 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 Slide

15. 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 Slide

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

    View Slide

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

    View Slide

18. 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 Slide

19. Colors to Use
    

    View Slide

20. Colors to Use
    

    View Slide

21. Interactive Behavior
    3
    2
    1
    

    View Slide

22. 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 Slide

23. 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 Slide

24. Interactive Behavior
    

    View Slide

25. 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 Slide

26. 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 Slide

27. SER594 – Human Computer Interaction
    Javier Gonzalez-Sanchez
    javiergs@asu.edu
    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 Slide