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

More Decks by Alexey Zagalsky

Other Decks in Education


  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.
  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
  3. Computer interfaces

  4. What is an interface?

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

    things meet
  6. Could there be a “bad” interface?

  7. Could there be a “bad” interface?

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

  9. Could there be a “bad” interface? Which one feels more

    natural or more intuitive? Why?
  10. What is an interface? User interfaces are echoes of real

    life login form -> door, browser tabs, breadcrumbs
  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.”
  12. Kayak.com

  13. Book a flight (mobile)

  14. Apple TV - initial setup, input email address

  15. Car Touch UI What do you think? Better or worse?

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

    Conceptual model
  17. Developing products with humans in mind

  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
  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
  20. “Develop a precise description of our user and what he

    wishes to accomplish” - Alan Cooper
  21. Know Your Users Needs Goals Use cases Priorities Skills Cognition

    Time Behaviour patterns Concerns Context of use Errors Experience
  22. What kind of questions should you ask?

  23. What kind of questions should you ask? - Would you

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

    use this app/feature? - Do you have challenges with <activity>? - Would you prefer to <activity> on your mobile phone? - How would you design <feature>? - What feature would you like to have? - Is there a reason for not doing an <activity>?
  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)
  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
  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)
  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
  29. Balsamiq -- low-fidelity, conceptual design prototypes Tutorials https://support.balsamiq.com/tutorials/ Alternatively, you

    can use pen and paper http://sketchsheets.com/
  30. Sketch 3 -- Medium & High Fidelity application Tutorials https://www.youtube.com/channel/UCSdp5logiFTM3SyLJrHabOQ

    Buy: https://backend.bohemiancoding.com/store/edu/
  31. InVision -- Interactive prototypes Tutorials & Training http://ow.ly/XH6EH Blog http://blog.invisionapp.com/

  32. Evaluate your product An important part of HCI is to

    be able to critically evaluate product designs and user interfaces
  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
  34. Ethical aspects http://www.forbes.com/sites/kashmirhill/2014/06/28/facebook-manipulated-689003-users-emotions-for-science/#3778b1a5704d

  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
  36. Ethics http://www.theverge.com/2016/1/4/10708590/facebook-google-android-app-crash-tests

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

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