Introduction to HCI for beginners

Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Computer interfaces

Slide 4

Slide 4 text

What is an interface?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Could there be a “bad” interface?

Slide 7

Slide 7 text

Could there be a “bad” interface?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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.”

Slide 12

Slide 12 text

Kayak.com

Slide 13

Slide 13 text

Book a flight (mobile)

Slide 14

Slide 14 text

Apple TV - initial setup, input email address

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Developing products with humans in mind

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

What kind of questions should you ask?

Slide 23

Slide 23 text

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 ?

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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)

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Questions? speakerdeck.com/alexeyza/introduction-to-hci-for-beginners Alexey Zagalsky (alexeyza@uvic.ca) @alexeyzagalsky