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

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.
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? https://www.youtube.com/watch?v=XVbuk3jizGM
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 (alexeyza@uvic.ca) @alexeyzagalsky