CS 147 Lecture Notes PDF

Preview

Summary

Notes I took as a student in James Landay's class at Stanford University, CS147: Introduction to Human-Computer Interaction Design....

Description

9/25/17 Lecture 1: - OH: Gates 390 Mon 4-5, Thur 10-11 (or anytime door is open!) - Studios: - Emily thurs 5-6:50 Mixed reality (AR/VR) (by necessity only) - Sage fri 10:30-12:20, 1:30-3:20 equalizing unbalanced society - Dylan fri 9:30-11:20, 1:30-3:20 improving health w/tech - Yanyan fri 10:30-12:20, 1:30-3:20 design for local community - Kerry fri 9:30-11:20, 12:30-2:20 using AI - Andrew fri 12:30-2:20, 2:30-4:20 Putting the ed in edtech - Human: end-user of program, others they work/communicate with - Computer: machine program runs on, split bt clients/servers - Interaction: user tells computer what they want, computer communicates results - Important to understand: - Humans- what age they are, what understanding of tech do they have? - Tasks + Activities- what do they want to accomplish? - Technology- what tech do these users have/how can we utilize that? - How does this all fit into organizational/social/ethical issues? - Designing and building good UIs: - Iterative development - Usability goals - User-centered-design - Design discovery/need-finding - Rapid prototyping - Evaluation - Programming - UI Design Process: - Design discovery/needfinding- find a problem/gap to fill - Design Definition - Design exploration- found problem, explore potential solutions - Evaluation- how well do solutions solve problem - Production- Build it - Planning: Make prototypes/wireframes/storyboards - Usability: effectiveness/efficiency/satisfaction with which user achieves specified goals - Set goals, prioritize them, use them to track progress - Learnable, memorable, flexible, efficient, robust, discoverable, pleasing, fun - User-centered design: know thy user (cognitive abilities, wants/needs, etc) - Design discovery: observing current use cases

9/27/17 Lecture 2: - Design discovery process - Understanding the characteristics of users and what they need to be able to do - Understand client’s expectations if someone is having you design it - Understand scope of project - Research existing practices and projects - Easy to fall into thinking as yourself as the typical consumer - Acknowledge differences and see things from consumer’s POV - Figure out how customers work by interviewing/observing/self-reports/analytics - Figure out how customers think by asking them as they do it/observe+infer - Good to do all these things in natural setting not lab - Empathize with how they feel/think by immersing/observing/engaging - Bronislaw Malinowski learned extreme empathy from Trobriand Islanders in WWI through participatory observation - Active observation moves from facts to inferences to assumptions - Goal: find needs- gaps within system, find opportunities to fill those gaps - Pay attention to everything and look for shortcuts/workarounds/hacks/errors - Needfinding starts with basic questions to get them comfortable, then move to deeper why questions - 90% should be interviewee speaking, be ready to be changed by what you hear - Good to have a bunch of questions that could be relevant, but also be prepared to leave those questions and follow other interesting threads - Ask succinct, open-ended questions that avoid hypotheticals - Gems are when you uncover something that was missing or something unusual or something that you want to tell others about - Organize data- affinity diagramming - Post-its are great because you can color code and move stuff around as it relates to one another

10/2/17 Lecture 3: - testing/fieldwork can be coercive/unethical if there’s a power imbalance between interviewer/interviewee - We’ve been doing the empathy/needfinding phase - Now let’s talk about the define/design phase - Focus in on one major challenge - Write a POV: we met . We were amazed to realize . It would be game-changing to . - How to create POVs - Unpack empathy work - ID what’s important - Affinity diagram (post-its, etc) - Yes and - Empathy map: 2x2 grid say, think (top), do, feel (bottom) - Observations on left, inferences on right - Keep lists of tensions, contradictions, surprises - Use to find needs/insights - Go from observations to IDing user, needs, insights - Go from map and tensions/contradictions/surprises there to trying to identify users, needs, and insights - Combine as: from surprised to discover ; would be game-changing to - Reframe problem as a new POV on the issue - A good point of view: - Provides focus/frames problem - Inspires team - Provides reference for evaluating competing ideas - Empowers team to make decisions independently/in parallel - Fuels brainstorming “how might we…” statements - Helps influence people later/develop mission statement - Saves you from trying to solve everyone’s problems (that’s not possible) - Notes on interview with Maria: - Big truck (2nd tundra, all she’s driven) - Loves helping to an extent - Convenience of being able to haul - Conscious of emasculating guys - Makes her feel empowered - Reliable, but was a time with her old truck that she needed new tires - Sounded valid, didn’t want to look dumb - “I want the best for my truck” - Has to trust repair shop on what they tell her about what she needs

-

Doesn’t want to be stranded (has before) Mech. eng. Feels like she should be able to know/understand what’s wrong Doesn’t want to question what they say for fear of looking dumb Wanted feeling of independence (dealing, paying) Not fun to get it fixed - Interested, wish she could learn more - Feels like she has to act like she knows what they’re talking about

10/9/17 Lecture 5: - On to the Ideate stage - Innovation potential/separate generation and evaluation - Turn off critical part and just generate a bunch of ideas - Start by asking How might we…? - Might lets you defer judgment and create options freely with more possibilities - Strategies for writing: - amp up the good - remove the bad - explore the opposite - question an assumption - go after adjectives - ID unexpected resources - create an analogy from need or context - play POV against the challenge - change a status quo - break POV into pieces - Brainstorm rules - One conversation at a time - Go for quantity - Headline- write down short phrase about it - Build on ideas of others - Encourage wild ideas - Be visual - Stay on topic - Defer judgment - Can provide fun constraints- what if only had tech from 100 years ago? Have to spend $1M? Ideas that’d get you fired? Must use magic? - Different strategies for voting to decide ideas, can rate feasibility, interest, etc. - Work on problem with frequency (occurs often), density (affects lots of people), pain (more than just a small annoyance) - Dark horse idea- keep one in the back of your mind, explores a space that’s risky/radical, brainstormed after more traditional ideas, possible to prototype (not totally infeasible) - Prototyping! Helps us to think and to learn - Test assumptions early on, don’t wait until the end to realize that you need to change your ideas - There are look-like prototypes (models of how it looks), works-like prototypes (see sample functionality rather than full appearance/experience) - Experience prototypes- shows users how they would interact with product - Bring them into the experience, observe how they act, then ask them about experience after the fact - Set up pieces of experience- scene, props, roles

-

Test to gain info about user’s need and possible solutions

10/11/17 Lecture 6: - Say what customer wants to do, not how - Allows comparing design alternatives - Be specific with stories based on facts - Describe complete goal - Video prototypes are UI specific and show how users will interact - Shows the how of using the system - Quick, inexpensive, show context of use - Can be using paper prototypes - Concept videos focus more on story and concept and less on UI - Details important - People (roles) - Context (scene) - Solution (props) - Use what you know and what you have - Should be able to understand product by watching film - Define message of film (value proposition you offer) - Make a basic plot - Storyboard with sticky notes for scenes

10/16/17 Lecture 7: - Try to have tasks based on facts from needfinding - Make personas for users - Some tasks should describe a complete goal - Design process: design exploration - We’ve done experience prototypes, doing concept videos; next: further prototyping/brainstorming/sketching/storyboarding - Iterative cycle at each stage: design, prototype, evaluate, repeat - Prototypes can be sketches, paper, video, code, etc - Evaluations can be gut feelings, formal peer criticism, expert evaluations, lo-fi tests, user studies - Sketching: quick/timely, inexpensive/disposable, plentiful, clear vocab (clear that it is a sketch), no higher resolution than you need to convey point

10/17/17 Web Dev Session: - /afs/ir/class/cs147/WWW/projects/localcommunity/rekindl - http://web.stanford.edu/class/cs147/projects/localcommunity/rekindl - Google free html templates - Find something nice (paid ones may be better…) - Check to make sure you can understand framework of site - Not weebly or wordpress!! - Download html/css files for the one you like - Modify some stuff to personalize it for your site

10/18/17 Lecture 8: - Prototype = early sample/model built to test concept/process - Working representation of a final artifact - Easy to create to then test - Prototypes can have different levels of precision/detail - Different representations (paper/tech) - Different interactivity (watch it happen or interactive) - Different evolutions (throw-away or iterative - Fidelity refers to the level of detail - Hi-fi is very functional, close to real thing - Representation communicates that of a finished/near-finished product - Comments focus on color/fonts/alignment - Precise, so more time-consuming - Lose track of creativity and big picture - Lo-fi prototypes are informal, rough - Paper sketches help people explore broader range of ideas - Traditional methods take too long, this goes faster - Simulate prototype using simple sketch - One person can “play the computer” and change “screens” as user interacts - When paper prototyping, note good and bad- where people get excited about what happens, and where people hesitate or get confused - Concept video feedback: [email protected]

Lecture 13 11/6/17: - Color can help communicate key information - But inappropriate use of color can hurt - Blue tends to be better color for larger objects or backgrounds - As we get older the lens yellows and absorbs shorter wavelengths (blues) - Avoid highly saturated colors from opposite extremes of the spectrum - Start designing with grayscale so get differences in brightness right first then add some color - Model Human Processor: - Perceptual Processor- takes input from eyes/ears and send to visual/auditory image store in working memory - Motor processor- input from working memory, output to fingers/etc - Cognitive processor- input from working and output to working/long term - Different processors typically take about 100 ms per cycle - Can happen serially (reactions) or in parallel (seeing/hearing simultaneously) - MHP doesn’t really account for touch/haptic inputs, or for how we get stuff from working memory into long term memory, or from image stores to working memory - Working memory has rapid access (70 ms) and decay (200 ms), smaller capacity - Long-term memory is huge, with slower access (100 ms) and little decay - In each cycle, contents in WM grabbed and associatively linked to LTM - Fitts’ Law: moving hand is a series of micro-corrections to hit target correctly - Correction takes Tpos + Tc + ™ = 240 ms - Time to move hand to target size S distance D away: Tpos  = a + b log2 (D/S + 1) - Note Distance/Size: both affect time equally, greater distance = more time, greater size = less time

Lecture 15 11/13/17: - Do usability tests because we can’t tell how good a UI is until people use it - Process data = qualitative, bottom-line/summative data = quantitative Lecture 17 11/27/17: - Logo in top left - Maybe another logo or info in top right - Tabs give clues as to what you can do there - May be able to explicitly show your value proposition - Make it clear what you can do on the site - Have obvious links - Keep important info visible without scrolling (“above the fold”) - Keep same format/layout/color scheme/font throughout - Location Bread Crumbs are the trail of where you are in the site (“Home > Books”) - Make important buttons stand out - People have formalized common patterns-not too general or too specific...