kenics.net

Technical notes on perl, python, php, sql, cgi, c/c++, q/kdb+, unix/shell, revision control tools, data structures & algorithms, and their applications into web services and other various forms of software engineering.

human computer interaction

############################################ 
#####    Human Computer Interaction    #####  CS 6750 notes 
############################################ 
 
(1) intro 
(2) principles 
(3) methods 
(4) applications 
 
 
########################### 
####   (1)  intro      #### 
########################### 
 
- computer has become ubiquitous 
- human uses(interacts) computer to work on tasks 
- so computer is a tool with an interface. this interface should be as invisible and seamless as possible so human can focus on task, rather than dealing with interface. 
-- e.g. a well designed video game controller makes user forget about the controller, focus on the task (playing whatever in the game world) 
-- e.g. locking the car used to be work, you have to know which key to insert, in which angle, but nowadays, the car senses your key remotely as you approach your car, and unlocks. vice versa, it locks your car when you walk away. 
 
## 
##  HCI as academic displine 
## 
- a broad category of Human Factors Engineering (HFE): designing interactions btwn people and products/systems/devices 
- which includes 
-- industrial design 
-- product design 
-- HCI 
--- UI design 
--- UX design 
--- interaction design 
 
- many prominent universities now offer HCI masters degree (not CS degree in specialization in HCI, but a pure masters degree in HCI) 
 

#  HCI vs HFE 

- because computer is becoming ubiquitous, HCI is expanding within HFE. 
 

#  HCI vs User Interface Design 

- HCI used to be largely about UI design. 
- HCI attempts to cover more generally, not just the interface, but the experience, interaction, human factors behind them. 
 

#  HCI vs User Experience Design 

- HCI: understanding user-computer interaction 
- UX design: disctating user-computer interaction 
 

#  HCI vs psychology 

- overlapping elements with psychology, cognitive science 
 

#  HCI: research vs design 

research and design are circular, informing each other. 
 
- research 
-- needfininding 
-- prototyping 
-- evaulation 
 
- design 
-- distributed cognition 
-- mental models 
-- universal design 
 

#  HCI components 

- principles 
- methods (design life cycle. design vs research) 
- applications  (e.g. health care, virtual reality, etc. in fact, MOOC is really an example of HCI) 
 
 

#  HCI goal 

- to design effective interactions between humans and computers. 
- "design" : (1) applying known principles to a new problem 
             (2) an iterative process of needfinding, prototyping, evaluating and revising 
 
- "effective": (1) usability 
               (2) research 
               (3) change  # e.g. reduce usage of certain resource 
 
 

#  exporing HCI 

 
- technologies : new technologies that enable new levels of HCI 
- domains : areas taht got innovated by HCI. e.g. health care, virtual reality 
- ideas : theory, principles that affect both tech and domains 
 
 
technology examples: 
- VR: an immersive computer-simulated reality. e.g. video games, virtual travel 
- AR: real world environment complimented/enhanced by computer-generated multimedia. e.g. google glass 
- ubiquitous computing: computing power anywhere any time. 
- wearable technology: technology embedded in clothes or devices that a person can wear. 
- robotics: how robots and humans conexist in the future  e.g. AI, health care 
- mobile/portable computing devices. e.g. navigation 
 
idea examples: 
- context-sensitive computing: equipping user interfaces with historical, geographical or other forms of contextual knowledge. 
- gesture-based interaction: interacting with interfaces using hand/body gestures. e.g. microsoft kinect, nintendo wii, surgery. 
- pen-touch-based interactino: e.g. art, music, MOOC video lectures 
- data visualization: representing abstract data visually to help humans comprehend it. 
- CSCW:computer supported cooperative work: using computers to support people work together. (overcome time and space constraints) 
- social computing: computing intersects with social lives. SNS, dating apps, online gaming, etc. 
 
domain examples: 
- medical / special needs: how to communicate data to blind people? maybe sound? possibilities are boundless. 
- education: e.g. MOOC 
- health care: VR to provide therapy, or provide more fun exercise, etc 
- security: the deterret/hurdle can be usability, if you force too many security steps, users will be tired. 
- gaming: vide games, etc. a typical HCI domain. 
 
===> think about what area you wanna explore as you digest the rest of the course. 
 
 
############################## 
####  (2) HCI principles  #### 
############################## 
 
 
##################################### 
###  (2.1) HCI principles intro   ### 
##################################### 
 
- users/human uses "interface" to work on tasks. 
- interface is not necessarily technological. 
- interface dictates user experience 
 
e.g. 
interface = some remote controller to control AC 
task/goal = contorl temperature in your apt to your comfort. 
 
==> if we really focus on the task/goal, then instead of improving the existing interface, we may come up with something more revolutionary, like AI that automatically lerans/adjusts the temperature for you. 
 
## 
##  5 tips to indentifying a task 
## 
1. watch real users 
2. talk to users 
3. start small 
4. abstract up 
5. you are not your user 
 
 
## 
##  usefulness and usability 
## 
- useful: whether it enables you to achieve your goal. so it's a mimimun requirement. 
- usable: how easy to easy. 
e.g. 
a traditional phsycal paper based map is useful, but not always very usable. it's heavy and you have to track where you are, etc. 
 
## 
##  views of user 
## 
 
1. processor 
- a sensory processor. 
-- must fit within limit. 
-- evaluated by quantitative studies. 
 
2. predictor 
- map input to output. 
-- must fit within knowledge (thoughts, expectations, etc) 
-- evaluated by qualitative studies, often ex-situ studies (i.e. controlled, lab type setting, inauthentic environment) 
 
--> both of the above focus on single user. what goes on their head. 
 
3. participant 
- broader perspective, focus on user and his/her environemnt. 
-- must fit within context 
-- evaluated by in-situ studies. (i.e. complete real environment) 
 
==> the scope is in individual level, group level, society level 
e.g. 
for younger generations, school reunion is no longer as important, because they are all connected via facebook. 
 
 
## 
##  interface: good design VS bad design 
## 
 
e.g.   GPS navigator 
 
BAD design: 
if you only focus on user as 1. sensor processor, then your GPS may simply alert the driver "turn left" 2 seconds before. 
because that's enough for human brain and body to respond. 
 
GOOD design: 
but if you focus on user as a participant in a broader traffic environment, your GPS should give user more advanced notice, like "in 1000 feet you wil make a left." 
 
 
################################################ 
###  (2.2) HCI principles: feedback cycles   ### 
################################################ 
 
feedback cycle: action, evaluate the output, adjust. 
==> often considered as the basic characterstics of AI 
 
HCI is certainly an example/application of feedback cycle. 
 
### 
###  gulf of execution: 
### 
- how hard it is for users to figure out the actions to take on the interface to achive the goals. 
-- 1. identify intentions (in the context of the system.) 
-- 2. identify actions (which buttons to press in the VCR recorder, etc) 
-- 3. execute in interface 
 
e.g. 
1. want to heat up lunch in microwave 
2. press buttons: time,1,0,0,start   # 1:00 
3. execute 
 
==> any other way?  maybe microwave has a shortcut for comon operations 
==> maybe microwave can be improved to simply let user decide heat, then automatically decides how long it needs to heat up. 
 
## 
##  5 tips to gulf of execution 
## 
1. make functions discoverable   # e.g. make visible 
2. let the user mess around      # don't put irrecovarable functions 
3. be consistent to other tools  # like Ctr-C for copy, close-button on the right/left upper corner. 
4. know your user 
5. feed forward                  # give user choices of what they might wanna do. e.g. refresh button flash when user is idle. 
 
 
### 
###  gulf of evaluation 
### 
1. interface output 
2. interpretion (of the output) 
3. evaluation  (whether the goal was achieved) 
 
 
e.g. you clicked a video play button 
1. it shows some progress bar. 
2. people may interpret it differently. 
3. decide it didn't work so give up, or decide it's working but taking long so need to wait. 
 
e.g. turn up a heater 
1. makes a click sound   # not ideal, people may not hear it if it's quick 
2. not sure 
3. do it again, or do it differently, or goto the vent to feel the heat coming out. # possibly it worked byt it just takes time. 
==> as you can see, it's a good example of gulf of evaluation. 
==> interface should show if it worked or not, explicitly. 
 
## 
##  5 tips to gulf of evaluation 
## 
1. give feedback constantly 
2. give feedback immediately 
3. match feedback to action  # save action -> feedback should be subtle, but delete action, feedback should be big. 
4. vary feedback             # use all of visual, haptic, audio modes of feedback 
5. leverage direct manipulation # interacting directly, like driving cars 
 
e.g.  GOOD feedback 
a smartphone that makes a small click sound, when you type letters on screen keyboard. 
e.g.  BAD feedback 
a smartphone that yells each letter when you type. (well it's appropriate if you are typing to launch nuclear bomn) 
 
## 
##  7 questions on usability   (from a seminal book "Design of Everyday Tings" by Don Norman) 
## 
1. how easily can one determine the function of the device?   # interpret 
2. how easily can one tell what actions are possible?         # discern 
3. how easily can one determine the mapping from intention ot physical movement?  # identify 
4. how easily can one actually perform the physical movement?                     # perform 
5. how easily can one tell what state the system is in?                           # observe 
6. how easily can one tell if the system is in the desired state?                 # compare 
7. how easily can one determine the mapping from system state to interpretation?  # interpret 
 
 
e.g.  credit card swipe 
- not much feedback 
- even if it doesn't work, we don't know if it was too fast or too slow 
- insertion-method is better, because it overcomes too-slow or too-fast issue, also you get physical feedback when the card goes in and stops. 
- any new problem with insertion method ?  YES, possibly people may forget to pull their card. 
-- how to solve it? maybe like ATM, make a beeping noise, OR better, until you pull of the card, the processing doesn't complete. 
NOTE: recall the goal is to pay, so don't lose the sight of the goal. 
 
 
########################################################## 
###  (2.3)  Direct Manipulation & Invisible Interface  ### 
########################################################## 
 
two methods for feedback cycles 
1. direct manipulation 
-- nice to let user directly manipulate. e.g. instead of a Zoom button, maybe user can pinch/squeeze screen. 
2. invisible interface 
-- nice if interface disappears in a way that user can better focus on the task, not the interface. 
 
e.g.  files and folders in computer 
one good approach is to mimic real world. 
- GUI: drag a file into a folder 
- CUI: mv file_name dir_name; ls ; ls dir_name # ls to confirm the move 
 
==> GUI solves the gulf of execution/evaluation 
 
## 
##  direct manipulation concepts 
## 
- a sminal paper on direct manipuation: "direct manipulation interfaces" by Edwin Hutchins, James Hollan, and Donald Norman in 1985, UC San Diego 
 

# 1. distance (btwn user goal and system) 

1.1) semantic distance : btwn user goal and their expression in the system. i.e. how hard it is to know what to do. 
==> covers identifying intention & identifying action parts in gulf of execution 
1.2) articulatory distance : btwn the expression and execution. i.e. how hard it is to do what you know to do. 
==> covers the execute action phase in gulf of execution. 
 
"the feeling of directness is inversely proportional to the amount of cognitive effort it takes to manipulate and evaluate a system." 
 

# 2. engagement 

- "the systems that best exemplify direct manipulation all give the qualitative feeling that one is directly engaged with control of the objects - not with the programs, not with the computer, but with the semantic objects of our goals and intentions." 
 
## 
## direct manipulation examples 
## 
- VR/AR : but not perfect. it has lots of feedback issues, like you don't get the same gravity, haptic physics, etc 
- emoticon: you have to pull up a list of emoticons and select, but that's not what you do when you smile, so maybe a better more direct manipulation will be your smart phone to sense your facial expression and automatically pick the right emoji. 
- touch screen: pinch on screen to zoom in out: good example of direct manipulation 
 
 
### 
###  invisible interface 
### 
- you make interface btwn user and task/goal (metaphorically) disappear 
a good example: 
- a touch panel: seamless, feels like you you are drawing on paper 
a bad example: 
- try to draw something with a mouse 
 
note: invisible interface does NOT always mean good design 
- basically a learning curve, training cost/complexity, should be smooth/quick 
 
## 
##  5 tips to invisible interface design 
## 
- use affordances: match expectation. button for click, switch for flip, etc 
- know your user          # different user expects different things 
- differentiate your user # e.g. novice expects usability, expert expects efficiency, so maybe provide multiple ways to perform the same action 
- let your interface teach (via feedback) # instead of making user read a manual book, or take a tutorial 
- talk to your user   # ask them. do they talk about interface or the task itself? 
 
a good example: 
- video game "Portal 2" : it asks you to look up. 
-- some video games expect you move the control stick up, while others expect you move the stick down(like airplane controller) which user may have to learn or adjust in the config settings. 
-- Portal 2 learns whatever you did with your controller stick to look up, and defines that as your operation for look up. 
-- so without you learning, or configuring manually, the video game learnt and correctly configured the camera preference for you. 
 
a bad example: 
- TV remote. it's terrible, people tape on buttons to make it easy. 
- this is maybe where voice control can help. like "i wanna watch David Letterman" and the remote/TV finds the channel/recording for you. 
 
 
 
#################################################### 
####  (2.4)  Human Abilities  (and perception)  #### 
#################################################### 
 
- human : process input, and returns output, just like computer. 
- we need to consider human abilities (psychology, cognition, etc) to study HCI 
[visual] 
- visual perception is critical. it is directional. it can filter out info, like closing if it't too bright. also capable of peripheral vision, etc. but we gotta be careful. 
- e.g. 1 in 200 women is color blind, 1 in 12 men is color blind. so it's not wise to design some interface that critically depends on coor. 
[auditory] 
- audio perception: not directional, not able to filter out easily. but ear can localize, i.e. ear can distinguish quiet nearby sound from distant loud sound although their pitch & volume are about the same. 
[haptic/touch/tactile] 
- useful. you can touch a person by the shoulder to only notify the person without being noticed by others while it is hard to accomplish the same with auditory communication. haptic is used in keyboard, mouse, etc 
 
===> all of them have unique aspects. e.g. when you design a smartphone, when a new message arrives, how do you notify the user? a sound alert ? vibration? or flash light ? 
 
 
## 
## 5 tips to on-screen UI design 
## 
1. use a grid              # gives a structure 
2. use whitespace          # human can consume bits and pieces at a time 
3. know your Gestalt principles   # how users group objects (proximity, continuation, movement, similarity in shape, etc) 
4. reduce clutter        # related to 1,2,3 
5. design in greyscale   # to accomodate color-blind audience/user 
 
e.g. traffic lights, red = stop, green = go 
but even if you are color blind, the position of the light tells which one is flashing to you. 
 
e.g. 
  red 
yellow 
 green 
 
 
## 
##  memory 
## 
 
(1) perceptual store (aka working memory) 
- lasts less than a second. 
Baddeley's working memory model 
(1.1) visuospatial skethpad (visual mem) 
(1.2) phonological loop (auditory, verbal/speech) 
(1.3) episodic buffer (maintains the chronological order of events, integrates mem with other systems) 
 
==> all 3 of them are coordinated by "central executive" 
 
 
(2) short-term memory 
- easy to load. 
- human can store "four to five" chunks at a time. 
- chunking: grouping pieces of info into a chunk. 
 
good quiz: https://www.youtube.com/watch?v=pkX4T_7kTa4 
==> if you see 5 letters, if they are random, you can barely remember them, but if they conprise a real word, then you can easily remember them. 
==> leverage "recognition" over "recall" 
 
 
(3) long-term memory 
- hard to load. usually you must load info into short term mem several times, before it gets loaded to long term mem. 
 
 
## 
##  Learning 
## 
(1) procedural learning: how to do something         # aka unconscious competence, more pertinent to HCI 
(2) declarative learning: knowledge about something  # generally how people communicate with each other 
 
## 
##  cognitive load/resource 
## 
- analogous to CPU 
- some task takes 70% of your cognitive resource. 
- we want interface to not take much cognitive load so users can focus on the task itself. 
- also it's not sufficient to think only about one interface's cognitive load, because other things taking the cognitive load off of the same user brain may be relevant as you design your interface. 
e.g. 
IDE for programming. user can focus more on implementing what he/she wants, less cognitive load on user part to worry about syntax. 
(called cognitive distribution, we will revisit this topic later) 
 
 
## 
##  5 tips to reducing cognitive load 
## 
1) use multiple modalities : visual, verbal, haptic, etc 
2) let the modalities complement each other.  # but if you do it badly, it competes, increases cognitive load 
3) give the user contorl of the pace 
4) emphasize essential content and minimize clutter 
5) offload tasks  # distrib load. e.g. IDE, or some form where it shows what you entered in prev page. 
 
 
## 
##   Motor System 
## 
- what users can physically do? 
- how precisely/accurately can they do it? 
e.g. 
- font size 
- you don't wanna locate delete button right next to save, because human finger may not be accurate. 
 
 
#################################################### 
####  (2.5)  Design Principles and Heuristics   #### 
####################################################1 
 
there are 4 sets of principles/heuristics established in HCI. (there are more, but we focus on these) 
 
(1) the design of everyday things by  Don Norman  # six design principles 
(2) usability inspection methods by Jakob Nielsen # ten design heuristics 
(3) software for use by Larry Constantine & Lucy Lockwood # six principles 
(4) the center for excellence in universal design by Ronald Mace # seven principles of universal design 
 
==> let's focus on 15 of them. 
 
(1) discoverability 
- how easy for users to figure out what actions are possible, and where and how to perform them. 
- options, actions, objects, functions should all be visible without requiring user of big memory load. 
e.g.  how to take a screenshot in MacBookPro? Cmd+Shift+4  ==> it's totally not discoverable... 
      but making it discoverable/visible may conflict with "simplicity" so think about that. 
e.g. many people don't know there actually exist good shortcuts for certain operation they do, and they do them inefficiently. it's a discoverability issue. 
 
(2) simplicity 
- irrelevant or rarely needed information should not be displayed, otherwise it competes with and diminishes relevant bits of info's visibility. 
- simple = intuitive, easy to use, adapting to user's own language, knowledge level, experience, etc 
e.g. traffic signs can be complex. 
 
(3) affordances 
- one way to achieve simplicity and discoverability is to design in such a way that the object/interface affords users of how to use it. 
e.g. car handle, a button called "next page" or "prev page", a floppy disc icon to indicate "save," function (though floppy disc no longer exists) etc 
- aka familiarity 
 
(4) mapping 
- between two sets of things 
- between interface and the world 
e.g. when you arrange the layout of multiple monitors, the windows nicely visualize the layout you can adjust. a nice mapping of monitor position in the system and in the real world. 
e.g. instagram filter, you can pinch and contorl the bar meter, which visually tells you how that affects the photo. 
 
==> therefore, mapping referes to creating interfaces where the design makes it clear what the effect will be when using them. not just the interface design that tells user what/how to do. 
 
e.g.  suppose three plain light switches on the living room wall, good affordance but bad mapping. because you know what to do and how to do it, but you don't know which switch corresponds to which light bulb.  to facilitate mapping design, you may label them with a small icon/text, and label ON/OFF etc 
 
(5) perceptibility 
- how to keep user informed with appropriate (immediate and constant) feedback, so user can perceive the current state of the world. 
e.g. 
when you click on "next" and on a web site, and if it's slow, you keep clicking, and you end up going to several pages forward. 
 
(6) consistency 
- consistency in design is virtuous. consistency within the system, but across other related systems/interfaces. 
- reuse what is already an established notion of things, actions, behaviors components both internal and external. 
==> relates to affordance 
e.g. 
how do you indicate click-able URL links within a web site? the convention is to use blue color text. 
if you design an app in windows where ctr-c is not copy, but delete, it will be a disaster. 
 
(7) flexibility 
- provide multiple ways to achieve the same action, tailer/cater/accomodate a wide range of individual preferences and abilities. 
e.g. 
ctr-c & ctr-v for copy & paste  but still keep the option of right click and select copy / paste for novice user. 
 
(8) equity 
- avoid segregating or stigmatizing any users. 
- make sure all users have the same experience. 
e.g. 
password setup page. the prompt forces every user to use a combination of upper case, lower case and numeric characters. the expert already does that but novice users will be forced, so all users will have the same level of robust security. you may claim but it violates the flexibility principle but flexibility and equity really compliment each other. 
e.g. 
try not to design something that cannot be used by people with certain disability, obviously. 
 
(9) ease 
(10) comfort 
- an interface is designed in a way user can use efficiently and comfortably without fatigue. 
- appropriate size and space for approach, reach, manipulation, and use regardless of user's body size, posture, or mobility. 
e.g. 
design the size of buttons on smartphone app 
e.g. 
a car seat that automatically adjust for user 
 
(11) structure 
- we should organize user interfaces in ways that help users have mental model that matches the actual content of the task. 
e.g. 
news paper layout. headlines in big bold text, etc, inherited in mobile news site. 
 
 
(12) constraints 
- there is no user error, only the flawed interface design. 
- design constraints so that user won't commit erroneous operations. 
- either prevent user error from occurring in the first place or detect it when it happens. 
e.g. 
can user accidentally close the window when they don't intend so? 
ctr-d is to delete a character on bash cmd line but if you tryp ctr-d when no buffer then it closes the session. 
password -> the system may not allow user to only use lower case alphabet. 
 
- physical constraints : USB stick, cannot insert in a wrong angle 
- cultural constraints : facing fwd on an escalator stairs 
- semantic constraints : a rear view mirror 
- logical constraints : self evident constraint from the situation, like one screw and one hole in furniture, you know the screw goes into that hole. 
 
 
(13) tolerance 
- constraints cannot perfectly prevent errors 
- 2 common approaches: tolerance and feedback 
- e.g. undo/redo buttons 
- aka recoverability, user experimentation 
 
(14) feedback 
- in response to errors 
- user can learn, be informed 
- should be immediate, constatnt, clear, concise, unambiguous 
- but bad feedback is worse than no feedback 
 
(15) documentation 
- ideally not necessary 
- but sometimes it's necessary, and it should be accessible, easy to understand, maybe with concrete step by step instructions, visuals, etc. 
 
 
There are other sets of principles too. Recall these are all guidelines/principles, not unbreakable absolute rules. 
 
 
#################################################### 
####  (2.6) Mental Models and Representations   #### 
#################################################### 
 
create representations that help user develop accurate mental models of the systems. 
 
a mental model is a person's understanding of how an external world works, processes, relationships, connections in real systems. 
from a mental model, human builds expectations, predictions, then may modify the mental model. 
 
- often relevant in the context of education, more than HCI 
- matching interface design with the user's mental model 
 
 
### 
###  5 tips to lernable interface design 
### 
(1) predictability    # like, blue color for clickable link on a web page 
(2) synthesizability  # user can look back and see the sequence of events that took place that led to the current state 
(3) familiarity       # leverage what user is already familiar (aka affordance), like red = bad, green = good 
(4) generalizability  # knowledge of an interface/system should transfer across interfaces/systems 
(5) consistency       # like ctr-c, ctr-v 
 
## 
## representation 
## 
- a good representation of a problem makes the solution self evident. 
-- makes relationships explicit 
-- brings objects and relationships together 
-- excludes extreneous/irrelevant details 
-- expose constraints naturally 
e.g. 
lego instruction book 
google calendar 
 
(quiz) https://www.youtube.com/watch?v=sCiBlsPI7tU 
 
 
## 
##  metaphors and analogies 
## 
- helps user get an initial/intuitive idea, but metaphors/analogies can lead to misconceptions, cognitive disonnance. 
- also, while analogies make the interface more learnable, they may restrict the interface to outdated constraints. 
e.g. 
smartphone has an on-screen keyboard, adapting physical keyboard but maybe that is not the most efficient way to accept input for smartphone. but people are used to keyboard, so they adopted it. 
 
- all of the design principles apply, especially consistency, affordance, mapping. 
 
## 
##  learning curve 
## 
- an interface may have a rapid VS slow learning curve 
- if you can leverage what user already knows, you can technically start at some non-zero expertise from the get-go. 
 
expertise 

|           _/ 
|          / 
|------------------proficiency 
|       _/ 
|     _/ 
|    / 
|  _/ 
| / 
|/ 
----------------------  experience 
 
 
## 
##  slips  &  mistakes 
## 
- slips: the user has the right mental model, but does the wrong thing anyway. 
e.g.  if you always display YES & NO buttons in some order and suddenly swap their positions, you may click YES when intending to click NO 
-- action based slips: like above 
-- memory lapse slips: forgetting to do the right thing (such as saving a file before closing) 
 
- mistakes: the user has the wrong mental model, and does the wrong thing as a result. 
-- rule based mistakes: user correctly assesses the state of the world, but makes a mistake. 
-- knowledge based mistakes: user incorrectly assesses the state of the world, then makes a mistake 
-- memory lapse mistakes: forgetting to fully execute. 
 
quiz: if you text a wrong person, is it a slip or a mistake? probably a slip. you have the right mental model, but the phone tricks you. 
 
 
## 
##  learned helplessness 
## 
- when user tries some action, no useful feedback, then user learns to know he/she is helpless. 
- once you put your user/students/kids in this situation, they show resistence. 
 
## 
##  expert blind spot 
## 
- it's assumed you are an expert when you are designing an interface, or teaching something. 
- but because you are an expert, you forget to emphasize something important, because it's already effortless for you, so you assume user/students know it already. 
e.g. buy a cooking recipe book, it assumes you already have some expertise in cooking. 
- hence an HCI principle: "you are not your user!" 
 
 
 
################################## 
####   (2.7)  Task Analysis   #### 
################################## 
 
the task is at the heart of HCI 
 
recall we talked about 3 user/human models 
1. "processor" 
2. "predictor" 
3. "participant" 
 
for 1, we look at the GOMS model 
for 2 & 3, we look at CTA (cognitive task analysis) 
 
 
## 
## the GOMS model 
## 
1. goals 
2. operators (available within a method) 
3. methods 
4. selection rules (which method user chooses) 
 
==> we go from 4 -> 3 -> 2 -> 1 
 
e.g.  need to communicate something to a co-worker 
4. 3. email or phone or directly talk 
2. open gmail, write email, click send, or pick up a phone, put in the number, or walk over to them, etc etc 
1. done 
 
## 
##  strength and weakness of GOMS 
## 
weakness 
- doesn't address complexity (methods may have sub layers of more sub methods selection etc) 
- assumes user is an expert 
 
strength 
- formalize user interaction (down to the level of step by step operations, so we can analyze overall efficiency, how long it takes, etc) 
 
## 
##  various GOMSs 
## 
- KLM (keystroke level model) GOMS: adding up how long it takes at each step, and define that as the cost 
- CMN GOMS: has a strict goal hierachy model 
- NGOMSL (natural GOMS language): natural language notation for representing GOMS models/procedure for construction them, which might enlighten the designer of the method/operations. e.g. this method looks clean written in a program language, but if you let human do it, it's quite a lot of load, using lots of short term memory, etc. 
 
## 
##  5 tips to developing GOMS models 
## 
1. focus on small goals        # e.g. scroll to the end of the page 
2. nest goals, not operators 
3. defferentiate descriptive and prescriptive  # what people do versus what you want them to do 
4. assign costs to operators 
5. use GOMS to trim waste  # optimize, by analyzing assigned costs 
 
GOMS is a human information processor model (as opposed to human as predictor/participant models) which focuses simply on input/output. 
i.e. GOMS only deals in behaviorism. but cognitive task analysis is important too. 
 
## 
##  behaviorism  VS  cognitivism 
## 
- behaviorism: an approach to psychology that emphasizes behavior as a product of stimuli and the environment 
- cognitivism: an approach to psychology that emphasizes internal thought process 
 
## 
##  cognitive task analysis 
## 
- not a particular method, but a type of method for approaching the evaluation of how people complete tasks. 
- cognitive task analysis is concerned with the underlying thought process associated with performing a task. 
- usually entails the below steps: 
1. collect prelimary knowledge     # observe user performing tasks 
2. identify knowledge representations  # just representation/structure, not the detailed knowledge 
3. apply focused knowledge elicitation methods   # get users to tell you what they think/do 
4. analyze and verify acquired data   # confirm your understanding with the user 
5. format results for intended application  # make it useful for HCI design 
 
strength: 
- emphasizes mental processes 
 
weakness: 
- time-intensive   # have to talk to people, user, expert, also have to systemiacally analyze data 
- may de-emphasize context  # because it focuses on individual thought process 
- ill suited to novice users 
 
 
## 
##  hierarchnical task analysis 
## 
- when you analyze a task, you may identify 9 steps/operations. 
- but maybe step 5,6,7 are really one common step/operation that has 3 sub steps. 
- so it makes sense to abstract to a hierarchical structure. 
 
 
## 
##  task analysis framework 
## 
1. human information processor models 
- GOMS (KLM, CPM GOMS, NGOMSL) 
- touch level model (TLM) 
- model human processor (MHP) 
 
2. cognitive models  # predictor/participant models 
- critical decision model (CDM) 
- task knowledge structures (TKS) 
- cognitive function model (CFM) 
- applied CTA (cognitive task analysis) 
- stkill based CTA 
 
 
######################################### 
####  (2.8)  Distributed Cognition   #### 
######################################### 
 
- cognition is just focused on thought process and experience 
- "distributed" cognition suggests models of cognition should be extended outside the mind. 
e.g. 
if somebody tells you "what is 1534 + 6789 ?" you probably cannot even remember the number. 
but if you have a pen and paper, you can certainly do it, so you distributed cognition equipped with a pend and paper. 
i.e. artifacsts serve as additional cognitive resource. so you offload'ed your cognitive load. 
 
e.g. 
telepromptor to (1) remember what to say, (2) pacing 
 
## 
##  distributed cognition example: how a cockpit remembers its speeds 
## 
- a sminal paper by Edwin Hutchins 
- basically when an airplane is descending for landing, it has to make all sorts of wind configuration changes at different speeds. 
- e.g. at 400 mph, make this change, then at 250mph and at altitude xyz, make this change, etc etc 
- there are so many variables to determine which changes to make at which speed, so the pilot has a booklet of config notes. 
- the pilot picks the relevant page for his situation/airplane/variables/parameters, and pin it to the cockpit panel. 
- then the pilots mark their speed meter so they know at which speeds they need to action config change. 
 
===> now you can interpret this as 
- long term memory : booklet 
- short term memory: the relevant page from the booklet 
- working memory   : speed meter 
- deliberation     : pilots brain 
 
===> as you can see, the whole cockpit as a system can remember the speeds and perform the task of landing a plane. 
===> as you can see, this is a deeper notion than simply saying we use interfaces to help us do a task. these interfaces serve cognitive roles in the system as a whole. 
 
there are easier examples of distributed cognition. e.g. your calendar, your notepad, your clock, task mgmt system like JIRA, or car navigation system, your passenger who may navigate you while you drive, your gmail auto spam filtering, etc 
 
## 
##  social aspects of distributed cognition 
## 
- you work in a team at wortk, and let's say you go home and play online video games with your frinds from office. 
- if you play long hours, then your colleagues may think hey that guy has free time, let's give him more tasks. 
- how do you design the system that prevents this awkward social interaction? 
 
## 
##  Situated Action 
## 
 
- you may design the interface, but it's really important you keep the context in which they will be used. 
e.g. you may have to use an interface in a novel situation that has never been done before, improviation, etc. 
 
1. we must examine the interfaces we design within the context in which they are used. 
2. we must understand the task the user performs grows out of interaction with the interface. 
3. the task doesnt exist until the user gets started, and once they start, they define the task. 
 
 
- recognition is easier than recall. 
e.g. you can remember sentences, but you cannot remember pure random sequence of letters. human memory is context dependent. 
e.g. suppose you get asked to do five things. you may forget a couple of them, but if you are given a big picture, a big background context, then you may well remember all of them. so the task/action when situated in a larger context can have different cognitive impact in you. 
 
- a seminal paper: Plans and Situated Actions by Lucy Suchman 
-- offers two views on human actions 
1. actions are carried out based on predetermined plans 
2. plans are something we derive out of observed actions. not every user to your interface is acting on a predetermined plan. 
 
 
## 
##  Activity Theory 
## 
- it's a massive field that predates HCI, dealing with paradigms/philosophies on activity. one can teach an entire course on Activity Theory. 
- basically, so far, we assumed user wants to perform a task, but never considered "why" 
- tasks generate out of some larger activity user is engaged in. so it may get relevant to consider the activity aspect behind tasks, in terms of designing interface for some user tasks. 
 
- a seminal paper: Activity Theory and HCI by Bonnie Nardi 
- a seminal paper: A Comparison of Activity Theory, Situated Action Models, and Distrubuted Cognition by Bonnie Nardi 
-- talks about how AT & DC are goal oriented while in SAM goals are interpreted retroactively from past (improvised) actions. 
-- the diff btwn AT & CD is CD considers human and artifact essentially the same equivalent cognitive resource while AT distinguish them as human having consciousness and motives. 
 
 
 
########################################## 
####   (2.9) Interface and Politics   #### 
########################################## 
 
think about social media, like Facebook, nobody thought about its implication like fake news flooding to a level where it's considered to have affected the presidential election outcome. 
 
- designing for change 
- anticipating change 
- value sensitive design 
 
- technology changes society, but society changes technology too. 
e.g. in 1930's, when fluorescent light bulb first came out, it was innovative in its low power consumption, but because power company feared losing profits, it lobbied to the gov to ban fluorescent light bulb. so suboptimally efficient light bulbs were sold in the end. (to preserve profits for power companies) 
e.g. we have netflix, hulu, amazon prime, HBO, etc technologically they can be merged, or integrated in a way that user only needs to use one interface, but but due to complicated web of licence, intellectual property, ownership, etc we have to have a few different subscriptions. 
e.g. if you develop a video game, then technologically you can run the game on different platforms/consoles, but maybe you get a business restriction to exclusively run your game in one platform/console for certain margin or free advertizement, etc etc 
 
## 
##  HCI motivations 
## 
- usability 
- research   # just to learn how user thinks, reacts, etc 
- change     # to change the way user perceives things, etc etc. like to discourage unhealthy habit. 
 
e.g. beep sound when the driver doesn't wear a seat belt. 
 
## 
##  interface and politics 
## 
- a seminal paper: Do Artifacts have politics? by Langdon Winner 
 
1. artifacts/interface/technologies inherently politics 
 
e.g. nucliear power, which necessitates certain top down governing structure to maintain it. 
e.g. solar energy, pushes toward distributed egalitarian political system. 
 
2. artifacts themselves have no inherent political nature but used to serve a political purpose. 
 
==> there are both positive and negative examples, either by intentional design or by happenstance. 
 
e.g. you use a robot to do some work so you can claim you didn't make people do that work, even if the robot cannot do the work as good as human can. 
e.g. Robert Moses who designed many parks in long island designed the bridge low so that big public transportation buses cannot pass under the bridge, so that only people who have personal cars can go, i.e. rich people. bridge is not inherently political, but the way they used this was very politically intended. 
his political intention informed the design of infrastructure which in turn had significant social impact. 
 
==> the ability of interfaces to change behavior can be abused. 
 
e.g. society relies more and more on the internet infrastructure, for voting, banking, news, entertainment, etc. and yet some part of the country, world doesn't have reliable access to the internet. the internet itself wasn't meant to be political but this situation can perpetuate negative unequality. 
 
==> interface can be used to influce positive change as well (either by design or by happenstance). 
 
e.g. facebook only has "like" button, no "dislike" button, because FB wants to encourage people to be nice, and discourage potential cyber bullying. 
     similarly, FB allows various relationship status, some of which may not be legally recognized, as FB wants to ackknowledge and embrace diversity. 
 
e.g. desk job, where people sit in front of computer all day, is unhealthy. it is said that people should stand up and walk around for a few min every hour. 
     how do we enforce this naturally? an idea is to have some weather app that asks people to go out and check the weather every hour. participation in this activity forces people to leave the desk every hour. it's an example of influencing behavior for better health. 
 
e.g. the invention of bicycle enabled women to individually travel more, who used to rely on men for transportation. so it had social cultural impact in advancing women's place in society. 
 
 
in recap, 
- interface can have political clout 
- interface can be used to invoke positive social change 
- potential negative ramification, such as preserving certain undesirable stereotypes. 
 
 
### 
###  Value Sensitive Design 
### 
- as interfaces integrate into people's lives, it should be in accordance with the values held by the user. 
- proposed university of washington researcher 
- "VSD seeks to provide theory and method to account for human values in a principled and systematic manner throughout the design process." 
e.g. if you design an app to keep personal medical record accessible to user, it is useful but without proper privacy protection, people may not use the app. 
 
- a seminal paper : Value Sensitive Design and Information Systems by Batya Friedman 
--1. conceptual investigation 
e.g. who are the direct/indirect stakeholders? how are both classes of stakeholders affected? etc 
--2. empirical investigation 
e.g. how do stakeholders apprehend individual values in the interactive context? 
e.g. how do they prioritize competing values in design trade-offs? 
e.g. how do they prioritize individual values and usability considerations? 
--3. technical investigation 
e.g. like empirical investigation but focus is on system, not individual users. how the system is made compatible to user values? 
 
## 
##  VSD across different cultures 
## 
- EU passed a legislation that supports the individual's right to be forgotten. i.e. individuals should be able to control what's available on the internet about them. 
- but the system lilke google was not designed to accomodate this for individual users. some people, from different cultures, may argue it's the cencership. 
- some culture's argument for privacy may run a rye of another culture's value of free speech. 
===> so obviously it is important to consider the values across multiple cultures. 
 
 
### 
###  5 tips to VSD 
### 
1. start early      # right off the get go, identify the values you want your interface/design/system to account for. 
2. know your users 
3. consider both direct and indirect stakeholder   # e.g. when you design a system for bank employees(direct), think about bank customers(indirect) too. 
4. brainstorm the interface's possibilities.  # can it be exploited? or leveraged? in any way? 
5. choose carefully between supporting values and prescribing values. 
 
 
 
############################## 
####   (3) HCI methods    #### 
############################## 
 
#################################### 
####  (3.1) HCI methods intro   #### 
#################################### 
 
 
### 
###  user centered design 
### 
- the design that prioritizes user needs 
- not always done. e.g. sometimes we just have to meet certain functional specifications 
 
good example: stash 
- an app for ordinary folks to invest. 
- stash interface is extremely simple and intuitive (easy to buy, manage, monitor/track), people started using/investing more, althought the opportunity was always there. 
 
### 
###  6 principles of USD   # by ISO (international standard organization) 
### 
1. the design is based on an explicit understanding of users, tasks and environments. 
2. users are involved throughout design and development   # survey, interview, test, etc 
3. the design is driven and refined by user centered evaluation 
4. the process is iterative   # don't stop at the version 1.0, constantly evolve 
5. the design addresses the whle user experience. 
6. the design team includes multidisciplinary skills and perspectives. 
 
### 
###  stakeholders 
### 
- "user" is a loosely defined word. 
- there are "stakeholders" (both direct and indirect) 
- often, primary stakeholders == users    # people who directly use the interface 
- secondary stakeholders : who get affected by the output 
- tertiary stakeholders : who get affected by the existence of the interface/tool/system 
 
e.g. a new system for teachers to send grade reports to parents 
primary  : teachers 
secondary: parents 
tertiary : students 
 
==> obviously it's imperative to consider all of them. 
 
### 
###  life cycle of design 
### 
1. needfinding           # interviews, surveys, naturalistic observation 
2. design alternatives   # brainstorm, personans, storyboards 
3. prototyping           # paper prototypes, wireframing, wizard of oz 
4. evaluation            # get user feedback, (qualitative, empirical, predictive evaluations) 
 
==> it's an iterative cycle, so after evaluation you go back to needfinding to improve. 
 
==> each topic is deep and has its own books/courses. we can only touch on the surface in this course. 
 
### 
### qualitative VS quantitative data 
### 
- quantitative : numeric, easy to apply statistical analysis, objective, can be narrow in scope of what it captures.  # provides "what" 
- qualitative : everything else, description, observation, natural language. flexible and can cover a broader general picture, but can be subjective, prone to bias.  # provides "how" and "why" 
 
==> we use them both as needed. sometimes we convert qualitative to quantitative. 
note: these can be tricky. because, e.g., if you let people rate a movie on a scale of 1 to 10, but everybody's definition of "7" may be different. 
 
(quiz) https://www.youtube.com/watch?v=VVMd6PBBKLc 
 
 
# NOTE:  now begin to think about your HCI project. 
 
 
############################################# 
####  (3.2)  Ethics and Human Research   #### 
############################################# 
 
## 
##  history 
## 
 
history has seen atrocious experiments on human subjects. 
e.g.  stanford prison experiment 
e.g.  milgram obedience experiment by yale university researcher 
e.g.  tuskegee syphilis experiment by US public health service 
==> in response to all this, congress enacted National Research Act 1974, which led to creating Institutional Review Boards to oversee ethics of research in universities. 
==> The Belmont Report further summarizes basic ethical principles. 
e.g. the benefits to the society must outweigh the risks to the subjects in experiments. 
e.g. subjects must be selected fairly. 
e.g. rigorous consent procedure (subjects are informed, and can backout whenever they wish). no coersion of participation, etc 
 
==> not just burecratic process to ensure ethical treatment of subjects, but this really helps ensure we articulate the benefits of experiments, and ensure the integrity of the data we collect. 
e.g. professor asking students volunteer for participation must make sure there is no mental obligation, to avoid the perception of coersion. 
 
 
## 
##  IRB protocols    # just a brief overview 
## 
 
under your univ affiliation, IRB protocols (= projects) that you need to submit and get approved. 
- protocol title 
- research personnel    # who conducts experiments, who is primary investigator(PI), etc 
- protocol description  # research design & methodology, data collection method, potential benefit/risk, plan for analysis, schedule, etc 
- human subject interaction  # how many, gender, children, economically/educationall disadvanted, and you justify your criteria, how to recruit/compensate for subjects participation, etc 
- written consent       # when it can be waived, if you tell up front they can drop out any time, then as long as they continue to participate, consent is implied. if deception/consealment involved (like placebo effect) etc 
- other                 # medical/biological aspect, multi-geo/international-location, how to maintain the collected data, if involving defense/rediation/nuclear/nanotechnology, etc 
NOTE: any change must be re-submitted, re-approved. 
 
 
## 
##  research ethics in industry 
## 
- IRB covers university research ethics (because university receives federal funding) 
- what about industry/companies conducting research on their users? 
- no governing law. 
e.g.  FB testing different news/feed on users to see reaction, how emotion spreads. 
      a paper "experimental evidence of massive-scale emotional contagion through social networks" 
      FB argues they are allowed to do the experiment under user agreement policy but it's controversial. 
      (no explicit consent to that experiment, also if you don't agree to the terms of service you cannot use FB in the first place, so that in a way can be construed as coersion) 
      (FB has its internal IRB, and even contacts external IRB review experts) 
      (users don't read the terms of service they supposedly agree to) 
      (users are not notified when the experiment began/ended, but if they are, then it might bias the result) 
 
a paper by two FB employees "Evolving the IRB: building robust review for industry research" 
      (addresses that industry research ethics guidelines are different than university research ethics gudelines) 
 
 
 
 
################################ 
####   (3.3) needfinding    ####  (aka requirement gathering 
################################ 
 
- know your user, and user needs, before you start desining/making stuff. 
- if you have already chosen approach, then you may get selective hearing, confirmation bias for your pre-conceived notion. 
- there are methods/tools to overcome this. 
 
## 
##  7 basic questions    # by which you gather data about user/task/context 
## 
- who are the users? 
- where are the users?             # what environment 
- what is the context of the task  # anything competing for user attention? 
- what are user goals? 
- what do they need?     # both explicit & implicit.  particular info? tool? resource? 
- what are their tasks? 
- what are their sub-tasks? 
 
note: start from a broader perspective. 
e.g. don't focus on how user uses Kindle interface, but the whole environment/context. where do they usually use it? (commute train/bus, then maybe they cannot afford both hands? or don't want other people to be able to look? or want long battery? must be light-weight? what size will be appropriate? can a device be shared among family members? what is competing for their attention?) 
 

#  user types 

e.g. 
- kids VS adults 
- experts VS novices 
- profesional VS personal 
- elder VS youngster 
 
## 
##  5 biases in needfinding  # and how to avoid them 
## 
1. confirmation bias         # specifically look for signs you are wrong, test your observation periodically, try get others involved to get objective view/analysis 
2. observer bias             # you may write survey questions in a way that elicit certain answers over the others. get objective third party review them. 
3. social desirability bias  # if people know you, they only give you positive feedback. try to avoid this situation. 
4. voluntary response bias   # people with strong/extreme opinion tend to respond louder, like online store reviews. try use multiple methods to avoid this. 
5. recall bias               # memories get distorted, so be careful. e.g. conduct interview during the activity, or immediately afterwards, instead of hours/days later. 
 
 
## 
##  naturalistic observation 
## 
- observe users/people in natural environment as opposed to test environment 
- a good starting point. you get lots of things to follow up on. 
 
### 5 tips 
1. take notes 
2. start specific, then abstract   # write down individual observations, then abstract out generalizable stuff 
3. spread out your sessions  # do it morning, afternoon, evening, or multiple locations, etc 
4. find a partner            # to get other pair of eyes to observe the same thing, to compare notes later 
5. look for questions        # to follow up on, to investigate further on 
 
 
## 
##  participant observation 
## 
- you participate as a user yourself 
 
## 
##  hacks and workarounds 
## 
- users employ "hacks" / "workaround" to overcome errors(either slips/mistakes) - learn them 
 
## 
##  apprenticeship & ethnography 
## 
- to design interface for complex tasks, you need more than just talking to user, but need to become expert yourself. 
e.g. via apprenticeship 
- ethnography is study in human culture/custom 
 
## 
##  interviews / focus groups 
## 
- useful, obviously 
- individual vs group  # people tend to converge and agree, so be careful of the group dynamics 
- "think aloud" "post-event-protocol"  # e.g. let user voice record during/immediately after the activity 
 
### 5 tips to interviews 
1. focus on the six Ws    # what, where, why, who, when, how.  i.e. don't simply ask yes/no questions 
2. beware of bias 
3. listen                 # make sure you gather all the data you want, 
4. organize the interview   # intro phase, light questions to build trust, sumary at the end, make sure user understand the purpose of the interview as needed 
5. practice                 # make sure you don't give out info that pre-dispose them to agree with you, etc 
 
 
## 
##  surveys 
## 
- interview gives you thorough data about the people you meet, but can be time consuming, you have to recruit, schedule a meeting (synchronous), etc 
- survey is better for more broad mass data gathering. can be conducted ashynchronously. 
- writing survey questions is as much of art as it is science. 
 
### 5 tips to surveys 
1. less is more     # refine your questions, and ask only the minimun number of questions you really need. 
2. beware of bias   # again, don't pressure them to answer in any particular way, etc 
3. tie them to the inventory of data you wanna gather  # begin with the goals for the survey, then decide quetions 
4. test it out with co-workers, before sending out to real users 
5. iterate   # see what works/don't work, and improve for next time. get feedback on survey itself from users. 
 
 
## 
##  other data gathering methods 
## 
- existing interface evaluation 
- existing product reviews   # you can read online a lot 
- data logging   # for ML prediction 
 
 
(good summary quiz)  https://www.youtube.com/watch?v=Q_CbxzI_piE 
 
 
## 
##  define the requirements    # after the above needfinding process 
## 
- functionality 
- usability 
- learnability 
- accessibility 
- others          # compliance, cost, compatibility with other systems 
 
 
 
######################################## 
####   (3.4)  Design Alternatives   ####   # how to brainstorm 
######################################## 
 
recall the design cycle 
1. needfinding 
2. design alternatives   # explore many design ideas/alternatives, not just one 
3. prototyping 
4. evaluation 
 
# typical mistakes 
- jumping into 2. withouth 1. 
- focusing on one design idea  # how to make on-screen buttons bigger, etc, but consider voice/gesture control? 
- staying too allegiant to the existing design 
 
==> make sure you explore as many as possible at the early brainstorm phase, then you may combine/abandon them later. 
i.e. don't narrow the design space, expand it, for brainstorming sake. 
 
## 
## "individual" brainstorm 
## 
- do shallow surface level ideas. a few words each, and get as many ideas as possible. 
- don't worry about bad ideas. cover them all. 
- sometimes it helps to stand up and walk around, to get different inspiration. 
- brainstorm "individually" first   # because groups tend to coalesce ideas quickly. 
 
###  5 tips 
1. write down the core problem (which you design to solve)   # so you keep coming back to it, as you brainstorm 
2. contrain yourself    # e.g. think of at least 3 ideas that are currently too expensive, technologically impossible, etc 
3. aim for 20           # get at least 20 ideas 
4. take a break 
5. divide and conquer   # divide problems into smaller bits, and conquer each 
 
 
## 
##  "group" brainstorm 
## 
challenges in group brainstorm 
- social loafing: the tendency to exert less effort working in groups than working alone. # people slack more in groups than working individually. 
- comformity: the tendency to agree with / follow the group's reasoning and ideas. # people tend to agree, and converge 
- production blocking: the tendency of some individuals in discussions to block other individuals' participation. 
- performance matching: the tendency to match one's level of performance to other collaborators'. # also in terms of passion, committment 
- power dynamics: the tendency to defer to more senior individuals, or to overpower less senior individuals. 
 
###  4 rules for "group" brainstorming    by Alex Osborn 
1. expressiveness   # just express any idea 
2. nonevaluation    # no criticizing, no evaluation, no judging yet 
3. quantity         # quantity over quality at the early phase 
4. building         # build on other's ideas 
 
###  4 more rules by  Oxley, Dzindolet, and Paulus 
5. stay focused          # keep the core goal/problem in mind at all times 
6. no explaining ideas   # no need to justify it yet, just say an idea, and move on 
7. revisit the problem often 
8. encourage others 
 
###  5 tips 
1. go thru every individual idea 
2. find the optimal size for the group   # not more than 5 people 
3. set clear rules for communication     # like a person cannot speak more than 5 mins straight 
4. set clear expectations                # like 40 min, or 20 ideas, etc 
5. end with ideas, not decisions 
 
 
==> now we move to a phase of fleshing/filtering out ideas 
 
(quiz) https://www.youtube.com/watch?v=5OyVSBdjax8 
 
 
## 
##  personas 
## 
- a method to flesh out ideas 
- create a few characters (personas) for each stakeholder, to explore design space. 
e.g. 
janet, 37 yrs old, female, exercise daily, 1hr commute, blah blah 
tom, 25 yrs old, exercise seldom, drinks weekly, blah blah, 
 
==> realistically, you can explore only a few peronas. 
 
## 
##  user profiles 
## 
- a way to formulaicly generate a large number of user profiles, to explore the full design space. 
- define a number of variables, so you can apply a mass statistical analysis on many users. 
e.g. 
exercise expertise: novice <-> expert 
reading habit: casual <-> serious 
motivation: low <-> high 
tech literacy: low <-> high 
 
## 
##  timelines 
## 
- analyze the timeline of user using the interface 
- forces you to think about 6 Ws for each step, and how a design alternative affects each step, etc 
e.g. 
at which step novice and expert users have distinctly different experience 
at which step unmotivated users get stuck, etc 
 
## 
##  scenario (aka storyboards) 
## 
- timeline is general 
- schenario is more for analyzing specific cases  (including edge cases, there are many edge cases) 
e.g. 
you may have analyzed the timeline of user using audio book while exercising. 
but now you can analyze specific scenarios like, what happens user gets distracted and needs to rewind 30~60 seconds? 
 
## 
##  user models 
## 
- e.g. GOMS 
- more objective/comparable than peronas method which is meant to be personal/empathetic 
 
 
==> thru the above steps, you can flesh out ideas. (eliminate unrealistic/infeasible ones, due to technology, cost/budget, manpower, social norm, etc) 
 
 
 
################################# 
####   (3.5)  Prototyping    #### 
################################# 
 
timeline: from early to late, here are concepts 
 
             low  <---  fidelity  ---> high 
early ------------------------------------------------ late (after several iterations) 
         horizontal prototype ---> vertical prototype 
   verbal paper wizard-of-oz wireframe physical functional live 
 
 
low fidelty (completeness) : easily changeable, like hand-drawing, addresses the least requirements 
high fiedlty : wireframe/functional, harder to build, talks about finishing touch, like performance, optimization 
 
===> notice the tradeoff nature of the two. it is important at each stage to shift focus appropriately. 
e.g. at early stage, just focus on exploring options, stuff that needs to be decided first, and try get feedback often. 
e.g. at later stage, focus more on the final concrete design. 
 
horizontal prototype: shallow, covers the whole 
vertical protofype: specific, goes deeper 
 
## 
##  5 tips to prototyping 
## 
1. keep prototypes easy to change 
2. make it clear that it's a prototype  # no need to spend energy on insignificant details, like paint nice color, because then user may get distracted by superficial elements 
3. be creative            # design to get lots of feedback rapidly !! 
4. evaluate risks         # get feedback early and often ! 
5. prototype for feedbac  # design to get feedback you wanna get!! 
 
 
## 
##  verbal prototyping 
## 
- describing the prototype verbally to users, get feedback 
- extremely easy 
- not thorough 
- prone to bias, like social desirability (users may not feel comfortable disagreeing with you) 
-- thus ask specific questions for feedback 
- prone to expert blindspot:  analogy may be powerful and helpful. 
 
## 
##  paper prototyping 
## 
- draw on paper/screen, show it to user, get feedback 
- very easy to change, informal 
- "card-based prototyping" where you may get a few pieces of paper, each corresponding to a certain menu screen, to sumulate your app, etc. 
 
## 
##  wizard of oz prototyping 
## 
- paper prototype was suitable for delineating screens/layout, but what if you are designing some voice control app? 
- wizard of oz prototyping is you just play-pretend-act how it works, to experiment. 
e.g. you may hold your smartphone, and tell users they can voice-control their music app. they say "play" "pause" and you control it, as if user controlled it via voice, to simulate an experience for them and so you can get some feedback. 
- it can get complex. 
 
## 
##  wireframing 
## 
- more formal paper prototyping 
- use some graphic tool like powerpoint/visio/photoshop,frame box etc 
- now you touch on font, color, layout more. 
- you can easily distrib to remote users. 
 
 
## 
##  physical prototyping 
## 
- build something physically, to convey look and feel. 
- doesn't have to work yet, at least nice to have something physical. you can pretend how it works (wizard of oz) for simulation. 
 
 
(good quiz) https://www.youtube.com/watch?v=AGdSJKLMiv0 
 
 
NOTE: don't think you can prototype low->high fidelty in one shot. it is an iterative process. so do verbal/paper prototype, then eval/needfinding/design-alternative then come back to prototyping. (can be done in a few min, if it's a simpler revision) 
NOTE: if you are revamping FB interface, no need to prototype each page (timeline, profile, group, etc) all at the same pace. you may do them separately. 
 
 
 
################################## 
####   (3.6)  Evaluation      #### 
################################## 
 
it's a massive topic. you can take an entire course on a certain type of evaluation alone. 
so here we only cover the basics. and you have to design your evaluation plans according to your interface/users. 
e.g. decide how much learning curve is good enough? etc 
 
## 
## three types of evaluation 
## 
1. qualitative evaluation   # get qualitative/interpretive/informal feedback (what they like, what they find hard) can be slow, expensive 
2. empirical evaluation     # quantitatively evaluate results with controlled experiments 
3. predictive evaluation    # eval without users, but rather based on systematic aval using pre-established principles/heuristics 
 
---> generally you go from 1 ---> 2 while 3 can be conducted at any time as needed 
 
i.e. 
formative(developmental) --> summative(conclusive, focusing on the outcome) 
lab testing --> field testing 
 
our goal: to constantly apply multiple evaluation techniques to center our designs on the user. 
 
## 
##  evaluation terminology 
## 
- reliability : consistency/reproducibility across multiple trials 
- validity : accuracy/correctness 
- generalizability : how its application/observation extends to other domains 
- precision: how specific the eval is. (easy example being, milli-second, nano-second, etc) 
 
## 
##  5 things to evaluate 
## 
1. efficiency    # how quickly task is completed? etc 
2. accuracy      # error rate, etc 
3. learnability  # how fast user can learn. tutorial mode? documents/manuals? 
4. memorability  # related to learnability, but also how memorable is the whole thing? hopefully once learned, user remembers forever. 
5. satisfaction  # to avoid social desirability bias, don't simply ask, but maybe find out how many participants actually downloaded the app after they tested it. 
 
## 
##  evaluation steps 
## 
recall the iterative design cycle 
1. needfinding 
2. design alternatives 
3. prototyping 
4. evaluation    # now let's break this into sub-steps 
- define the task 
- define performance measures  # both qualitative and quantitative 
- develop the experiment 
- recruit participants 
- do the experiment 
- analyze the data 
- summarize the data 
 
## 
## qualitative evaluation 
## 
get qualitative feedback from users. what they like,dislike,felt,thought. 
recall the techniques from from needfinding 
- interviews 
- surveys 
- think aloud protocols 
- post event protocols 
- focus groups 
 

#  how to capture qualitative feedback 

- video tape 
pros: automated, comprehensive, passive(i.e. you can focus on the experiment, instead of capturing feedback) 
cons: intrusive(people feel uncomfortable), non-analyzable(extremely time-consuming), screenless(doesn't capture what users did on screen, unless you do extra work, but then it gets even more intrusive and time consuming) 
 
- note taking 
pros: cheap, non-intrusive, analyzable 
cons: slow, manual, limited(you may miss things) 
==> usually a good idea to have two people: one administering the experiment, another taking notes 
 
- software logging 
pros: automated, passive, analyzable 
cons: limited, narrow, tech-sensitive(cannot be done at early stages like paper prototypes) 
 

#  5 tips to qualitative evaluation 

1. run pilot studies   # rehearse with friends/colleagues before conducting a full session with real users 
2. focus on feedback 
3. use questions       # ask questions to users to know their thoughts, feedback 
4. instruct users what to do, not how to do it 
5. capture satisfaction   # see how satisfied users are, as well as whether they could achieve the goal/complete the task 
 
 
## 
##  empirical evaluation 
## 
- often numeric/quantitative (theoretical) to do objective comparison btwn (existing and new) designs 
- the goal is to get formal/conclusive 
 

#  how to empirically eval 

- "between subjects design": comparison btwn two (randomly split) groups of subjects receiving different treatments. 
- "within subjects design": comparison within one group experiencing multiple treatments. (still, which design each subjects experiences first is assigned randomly) 
- "random assignment": using random chance to decide what treatment each participant receives. 
 

#  hypothesis testing 

- we accept the alternative hypothesis if there is less than a five percent chance it could've occurred by chance. 
- testing whether or not the data allows us to conclude a real meaningful difference exists. 
- to prove something, we initially hypothesize that the opposite (called null hypothesis) is true. we accept the null hypothesis if we cannot find sufficient data to support the alternative hypothesis (which you really want to prove)/ 
- we generally accept the alternative hypothesis if there is less than a five percent chance that a diff could've arisen by a random chance. i.e. above 95%. we say the difference is statistically significant. 
- there are a few kinds: 
1. two-sample t-test: compares means of two "unpaired" sets of data. used for between-subjects testing with two sets of continous data. 
2. paired t-test: compares means of two "paired" sets of data. used for within-subjects testing with two sets of continous data. 
3. two-sample binomial test: compares proportions of two sets of data. used for btwn-subjects testing with two sets of nominal data. # binomial/nominal in this case means binary/discrete 
4. one-sample binomial test: compares proportion from one set of data to hypothesized value. used for testing nominal data against a hypothesized value. e.g. if you flip a coin 100 times, you probably won't get precise 50 heads and 50 tails. it may be 54 heads and 46 tails. does that mean head is more likely? no, so you conduct this testing to conclude that. 
5. analysis of variance (ANOVA): compares means from several sets of data. used for btwn-subjects testing with three or more sets of continuous data. 
 

#  5 tips to empirical evaluation 

1. control what you can, document what you can't. (sometimes you cannot perfectly control your environment, then document that.) 
2. limit your variables. 
3. work backforwards.   # decide what questions you want answered, then decide what data to gather, then gather data. 
4. script your analysis in advance.  # "if you torture the data long enough, eventually, it will talk." 
5. pay attention to power.  # to detect a big effect, you need few subjects. but to detect a subtle effect, you need a lot of subjects. 
 
 
## 
##  predictive evaluation 
## 
- eval without users. (not ideal in user-centered design) 
- but can be more accessible and efficient. 
 
- heuristic evaluation: ask experts to analyze (they tell you where it's lacking, in terms of HCI principles) 
- simulation/model based evaluation: building a human-simulating agent can be expensive but worth it if you work on a big long-term project like Facebook or air traffic control. 
 
## 
##  cognitive walkthrough 
## 
- cognitively/mentally simulate users on some particular tasks using prototype. 
- i.e. put yourself in user shoes. 
- you may notice things/questions, and get feedback. e.g. what if user enters a wrong number and wants to cancel? etc 
 
 
(good quiz) https://www.youtube.com/watch?v=XriETnJKhF4 
 
 
 
##################################################### 
####  (3.7)  HCI and Agile Development Methods   #### 
##################################################### 
 
the advent of the internet ushered in new methods for HCI. 
e.g. "agile" workflow in software develeopment, which emphasizes early delivery, continuous improvement and rapid feedback cycles. 
 
obviously it's easier to do for things we can change easily, like software where we can push updates online, as opposed to hardware interface. 
 
## 
##  background to rapid/agile method 
## 
- for some products, e.g. software, 
- think in terms of the cost for (1) development, (2) distribution/update, (3) feeback 
-- traditionally, the cost was high for all 3 
-- nowadays, it's much lower, hence the agile method 
 
===> when this applies, plus it's not high risk (like medical, or critical part of airplane, etc), then agile method works. 
 
(good quiz) https://www.youtube.com/watch?v=PAJD39NzRPo 
 
## 
##  when to go agile (by Boehm and Turner) 
## 
                    | traditional |  agile 
------------------------------------------------- 
  criticality       |    high     |  low         # airplane/medical vs smartphone game 
requirements change |    rarely   |  frequently  # thermostat vs udacity(has to change constantly due to changing student population/needs) 
  team size         |    large    |  small 
  team embraces     |    order    |  change      # status-quo/stability vs change/innovation 
 
 
## 
##  HCI and Agile Framework 
## 
 
a sminal paper: "towards a framework for integrating agile development and User Centered Design" by Stephanie Chamberlain, Helen Sharp, and Neil Maiden 
 
HCI (user centered design) and Agile Framework embrace core overlapping principles. 
- "an iterative process" 
- "user centered" 
- "team coherance" 
 
note: HCI advocates through research on users/tasks and through documentation, while agile dev does not as much. but the goal (of improving design for user) is the shared. 
 
5 principles to integrating UCD and Agile Development 
1. user involvement 
2. collaboration and culture 
3. prototyping 
4. project lifecycle 
5. project management 
 
 
## 
##  Live Prototyping 
## 
e.g. 
- "optimizely": lets you visually/intuitively prototype web pages, and you can click to make it go live for test/all users. 
 
## 
##  A/B Testing 
## 
- a rapid software testing process to compare two alternatives. 
- set up two versions (like A version being the current prod, and B version being the new design), and show randomly either to each user, and see how users use them. 
e.g. does A version produce more users clicking "read more" / "purchase" buttons ? 
 
## 
##  5 tips to mitigating risk in HCI and agile development (not impacting user exerience in negative way) 
## 
1. start more traditional         # the 1st itertion should follow a traditional HCI steps, then you may switch agile, because you already have a foundation of user info/needs/understanding, etc 
2. focus on small changes 
3. adopt a parallel track method  # while deve team does coding, design team can work on the next iteration of needfinding, etc 
4. be careful with consistency    # don't experiment too much/often, because users get exchauseted 
5. nest your design cycles        # each iteration focuses on small changes, but when you zoom out and look at a group of iterations, you should see a broader subtantial improvement/change. 
 
 
 
############################# 
####  (4)  Applications  #### 
############################# 
 
############################## 
####  (4.1)  Technology   #### 
############################## 
 
## 
## VR: virtual reality 
## 
- an immersive computer simulated reality 
- application possibility is unbounded 
e.g. 
video game, education, art, travel/tourism, military training, pshychiatric treatment (univ of michigan developed some system where people can confront their phobias thru VR) 
 
## 
##  AR: augmented reality 
## 
- real world environments that are complemented by computer generated multimedia 
- fascinating possibilities 
e.g. 
google glass, which can overlay direction to your sights as you drive, or as you walk past restaurants it can show how many stars on yelp 
real time translator which lets you speak real time with people from other countries with no common language with you. 
 
## 
##  ubiquitous computing  (i.e. pervasive computing, IoT) 
## 
- computing power anytime, anywhere 
e.g. 
wearable technology: computer embedded in clothing or devides a person can wear. 
e.g. 
it can monitor your health, habit, etc 
 
## 
##  robotics 
## 
- AI 
- hardware 
- robot to robot communication 
- robot to human communication 
- will robots replace human ? in what way? 
- possibilities are boundless 
 
## 
##  mobile 
## 
- deeply related to ubiquitous computing, VR/AR, robotics 
- distracted users, limited screen real estate, imprecise input 
- already replaced desktop computers, for many people, in the context of social networking, personal organization, games 
- but still not in traditional tasks like writing essays, programming, etc. how can this happen? 
 
 
########################## 
####  (4.2)  Ideas    #### 
########################## 
 
## 
##  context sensitive computing 
## 
- context is very important to human communication. 
- as computers prevail and integrate into our lives, context awareness becomes crucial. 
- context sensitive comp:equipping user interfaes with historical, geographical or other forms of contextual knowledge. 
 
## 
##  gesture based interaction 
## 
- interacting with interfaces using hand and/or body gestures. 
e.g. 
nintendo wii, miscrosoft kinnect 
e.g. 
maybe in the future, sensor can detect your hand motion so you can type on an invisible keyboard, then finally you can type on a smartphone 
 
## 
##  pen and touch based interaction 
## 
- direct manipulation is powerful 
- pen eenables precision 
 
## 
##  visualization 
## 
- representing abstract data visually to help humans understand it 
 
## 
##  CSCW: computer supported cooperative work 
## 
- using computers to support people working together 
e.g. 
slack, google doc, emails 
 
## 
##  social computing 
## 
- recreating social norms within computational systems 
e.g. emoji/emoticon 
- social networking systems 
e.g. facebook, gaming, dating, recruiting, etc 
 
 
########################### 
####  (4.3)  Domains   #### 
########################### 
 
## 
##  special needs 
## 
- many possibilities 
e.g. 
VR to overcome phobia 
prosthetic arm/leg with software 
audio software for blind people 
 
## 
##  education 
## 
- omscs: piazza, udacity, etc 
 
## 
##  healthcare 
## 
- visualization 
- data analysis to assist diagnosis 
- health diet tracking 
- VR for therapy 
 
## 
##  security 
## 
- usability and security should coexist: don't force users to have 64 letter password 
- captcha 
 
## 
##  games 
## 
- one of the purest examples of HCI 
 
 
 
################################## 
####  (5.3)  Related Fields   #### 
################################## 
 
recall 
 
- Human Factors Engineering (HFE): combines engineering and psychology 
-- industrial design 
-- product design 
-- HCI 
--- UI design: most often focuses on a screen interface. Gestalt grouping principles (refer to the above notes). typography (like font design) 
--- UX design: prescriptive while HCI is descriptive 
--- interaction design: research/theoretical side VS practical side 
 
- human centered computing: general, societal level analysis of human and computers 
e.g. Arab spring influenced by twitter/facebook 
e.g. computer for early childhood education 
e.g. how visualization helps people watch their diet (like an exercise tracking app) 
 
- cognitive science: general study of human thoughts and mental organization and memory 
- computer supported collaboration: like wiki, piazza (that enables people to work asynchronously, over distance) 
- intelligent user interfaces: intersection of AI, HCI and more. 
e.g. google learns from your gmail that you have a restaurant reservation and lets you know based on where you are and traffic that you need to leave by when. pretty smart. 
 

  1. 2017-05-13 10:10:36 |
  2. Category : gatech
  3. Page View:

Google Ads