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

Introduction to HCI for beginners

Introduction to HCI for beginners

This is a quick introduction to HCI for first year CS students, the talk was given as part of CSC106 course, at University of Victoria, Canada

Alexey Zagalsky

March 16, 2016
Tweet

More Decks by Alexey Zagalsky

Other Decks in Education

Transcript

  1. Introduction to HCI
    Alexey Zagalsky
    CSC 106, University of Victoria, 2016
    Images used in these slides are used for educational purposes only and I claim no credit for any of the images.
    Images are copyright to its respectful owners.

    View Slide

  2. What do we mean when we talk about HCI?
    Human
    the end-user of a program
    the others they work or communicate with
    Computer
    the machine program runs on
    split between clients & servers
    Interaction
    user tells the computer what they want
    computer communicates results

    View Slide

  3. Computer interfaces

    View Slide

  4. What is an interface?

    View Slide

  5. What is an interface?
    Where two systems / subjects / things meet

    View Slide

  6. Could there be a “bad” interface?

    View Slide

  7. Could there be a “bad” interface?

    View Slide

  8. Could there be a “bad” interface?
    https://www.youtube.com/watch?v=yY96hTb8WgI

    View Slide

  9. Could there be a “bad” interface?
    Which one feels more natural or more intuitive? Why?

    View Slide

  10. What is an interface?
    User interfaces are echoes of real life
    login form -> door, browser tabs, breadcrumbs

    View Slide

  11. What makes a good (User Interface) design?
    “Facilitating the user to perform a specific task in a specific
    context in a fast and efficient manner by leveraging the
    power of technology and design.”

    View Slide

  12. Kayak.com

    View Slide

  13. Book a flight (mobile)

    View Slide

  14. Apple TV - initial setup, input email address

    View Slide

  15. Car Touch UI
    What do you think? Better or worse?
    https://www.youtube.com/watch?v=XVbuk3jizGM

    View Slide

  16. Don Norman’s Principles of Interaction
    Affordances
    Signifiers
    Constraints
    Mappings
    Feedback
    Conceptual model

    View Slide

  17. Developing products with humans in mind

    View Slide

  18. What problem or need are you addressing?
    Try to find a real problem and describe it - maybe
    something you always wanted to build
    Example:
    Allow users to find dog walkers in their neighborhood

    View Slide

  19. Who are the users?
    Come up with personas
    Persona
    Jane, 62
    Lives in Victoria, BC
    Has 3 grandkids in Toronto
    Loves to draw pictures with them
    Wishes she could interact more often

    View Slide

  20. “Develop a precise description of our user and what he
    wishes to accomplish”
    - Alan Cooper

    View Slide

  21. Know Your Users
    Needs
    Goals
    Use cases
    Priorities
    Skills
    Cognition
    Time
    Behaviour patterns
    Concerns
    Context of use
    Errors
    Experience

    View Slide

  22. What kind of questions should you ask?

    View Slide

  23. What kind of questions should you ask?
    - Would you use this app/feature?
    - Do you have challenges with ?
    - Would you prefer to on your mobile phone?
    - How would you design ?
    - What feature would you like to have?
    - Is there a reason for not doing an ?

    View Slide

  24. What kind of questions should you ask?
    - Would you use this app/feature?
    - Do you have challenges with ?
    - Would you prefer to on your mobile phone?
    - How would you design ?
    - What feature would you like to have?
    - Is there a reason for not doing an ?

    View Slide

  25. What kind of questions should you ask?
    “The best predictor of future behaviour is current behaviour”
    - Tomer Sharon
    Don’t ask about the future, or the distant past
    Don’t ask for opinions
    Ask about recent behaviour (yesterday, earlier this week)

    View Slide

  26. Explore existing solutions
    How did others solve the same problem?
    Gain insights on user intuitions and expectations
    Users don’t want to invest time to learn the application
    Take advantage of existing usability knowledge

    View Slide

  27. Develop use cases and prototypes
    Personas Scenarios Use Cases Prototype
    Scenarios describe interaction of how the product or
    system would be used by personas in real life
    Uses cases describe a simple template for the one goal the
    user wants to do with your product (e.g., send email)

    View Slide

  28. Prototypes: Low to high fidelity
    Low fidelity prototypes are used
    for conceptual UI design
    High fidelity prototypes
    showcase the graphic design,
    are close to the finished product

    View Slide

  29. Balsamiq -- low-fidelity, conceptual design prototypes
    Tutorials https://support.balsamiq.com/tutorials/
    Alternatively, you can use pen and paper http://sketchsheets.com/

    View Slide

  30. Sketch 3 -- Medium & High Fidelity application
    Tutorials https://www.youtube.com/channel/UCSdp5logiFTM3SyLJrHabOQ
    Buy: https://backend.bohemiancoding.com/store/edu/

    View Slide

  31. InVision -- Interactive prototypes
    Tutorials & Training http://ow.ly/XH6EH
    Blog http://blog.invisionapp.com/

    View Slide

  32. Evaluate your product
    An important part of HCI is to be able to critically evaluate
    product designs and user interfaces

    View Slide

  33. Evaluate your product
    Example methods:
    - Survey
    - Interviews
    - Observations
    - Diary study
    - A/B testing
    Learn how to come up with alternative designs and be able
    to compare them systematically

    View Slide

  34. Ethical aspects
    http://www.forbes.com/sites/kashmirhill/2014/06/28/facebook-manipulated-689003-users-emotions-for-science/#3778b1a5704d

    View Slide

  35. Ethics - Facebook Incident
    “Having written and designed this experiment myself, I can tell
    you that our goal was never to upset anyone. I can understand
    why some people have concerns about it, and my co-authors
    and I are very sorry for the way the paper described the
    research and any anxiety it caused.
    In hindsight, the research benefits of the paper may not have
    justified all of this anxiety.”
    source: https://www.facebook.com/akramer/posts/10152987150867796

    View Slide

  36. Ethics
    http://www.theverge.com/2016/1/4/10708590/facebook-google-android-app-crash-tests

    View Slide

  37. Recommended reading
    The user is drunk (video):
    https://www.youtube.com/watch?v=r2CbbBLVaPk

    View Slide

  38. Questions?
    speakerdeck.com/alexeyza/introduction-to-hci-for-beginners
    Alexey Zagalsky ([email protected])
    @alexeyzagalsky

    View Slide