CS 147 Midterm
Hue
Gradation of color (ie. name: yellow)
Heuristic Evaluation vs. User-Testing
HE: - Faster (1-2 hrs each evaluator) - Doesn't require interpretation - May miss problems and find "false positives" UT: - Slower (days-weeks) - Requires interpretation - Far more accurate - Takes into account actual users and real tasks ALTERNATE BETWEEN THE TWO :)
Map Interface Controls to Customer's Model
Controls should mirror the real-world ie. Car seat recliner or stove controls
Storyboarding
For concept video - Show angles, scenes, maybe lines to be said as well
Computing in 1965
IBM System/360— had some GUIs Douglas Engelbart era - Sutherland (SketchPad and VR)
Conceptual Model
Mental representation of how an object works & how interface controls affect it - People may have preconceived models that are hard to change - Interface must communicate model
Define
Observation + Inference = Insight Focus in and then realize new - Focus and Flare Write POVs Empathy Map Find tensions, contradictions, suprises --> Needs and insights
Active Observation
Observe and interview without knowing what you are looking at. Key is to discover what is interesting
System Image
the visible part of the device— instruction, etc Gets from design model Gets and gives from Customer model
Design Model
what the designer sees, their conceptual model --> system image
Principle of Feedback
‣ Give users feedback on what they click (if successful, etc)
Saturation
the purity of the hue (vividness)
Princples of Empathy
1. Immerse 2. Observe 3. Engage
Photopigments
- 3 types: blue, green "red" (really yellow) - each sensitive to different band of spectrum - ratio of neural activity of the 3 --> color - Lots of green & yellow (aka red) overlap of wavelength. - Blue is NOT as sensitive Distribution of Photopigments: - Not even - Mainly red (64%) & very few blues (4%) - Few blue cones (high acuity) - leads to disappearance of small blue objects you focus on - As we age, lens yellows & absorbs shorter wavelenghts - sensitivity to blue is even more reduced - IMPLICATION: don't rely on blue for text or small objects
Color Deficiency
- 4.5% of population (8% of men, 0.5% of women) - Two main types: 1) Different photopigment response most common - reduces capability to discern small color differences - red-green deficiency - lack of either green or red photopigment (can't discriminate colors solely dependent on red & green)
Video visuals
- Avoid clutter in background - Focus on good lighting - Minimal UI
Color Guidelines
- Avoid simultaneous high saturated colors - Pick non-adjacent colors - Avoid pure blue text or small blue - Hard to detect changes in reds, purples, greens - Easy to detect changes in yellows & blue-greens - Older users need higher brightness level - Hard to focus on edges only created by color - use both brightness and color differences
Ethical considerations in needfinding
- Can be coercive if there is a power imbalance - "At-risk" label is problematic - When interviewer is foreign requiring translator, bias increases 5x - Can be distressing (left in tears) - Your job to alleviate these issues - Make voluntary with informed consent (form) - avoid pressure to participate - can stop at any time - testing system NOT them - anonymous data collection
White Space
- Can be used to suggest importance / presitge - More white space around group = more valuable - An element in itself
Color Harmonies
- Complimentary (across on the wheel) - can be jarring and bad with text - Analogous (3 next to eachother) - easy on eyes and looks natural - Split Complimentary (two next to eachother, one across) - difficult to mess up Start with grayscale, then accent or enhance with colors Action color and immediate (notification) color really only use 1-2 colors at a time
Consistency
- Consistent is not always better - Should be consistent in meaningful way Types of consistency: - Consistent internally (within same app) - Consistent with other apps (looks like others, design patterns) - Consistent with phsyical world
The Model Human Processor
- Created by Card, Moran, Newell ('83) Processors: 1) Perceptual Processor - eyes go into it - goes to visual image store/auditory image store in working memory 2) Motor Processor - working memory goes to motor processor - goes to fingers, etc. 3) Cognitive Processor - goes to working memory - gets studd from long-term memory and working memory - Sometimes serial (pressing key in response to light) - sometimes parallel (driving, reading signs, hearing at once) - Parameters: - Processors have cycle time (T) ~ 100ms & memory access time - Memories have capacity, decay time & type
How Might We
- Defer judgement, just create options freely - Explore the opposite - Remove the bad / amp up the good - Break POV into pieces - Question an assumption
Heuristic Evaluation
- Developed by Jakob Nielsen - Small set (3-5 evaluators) examine UI - Go through UI twice Severity Ratings 0 - 4 Decreasing returns - More problems found with # of evaluators, but after certain point benefit / cost not worth it
Focus
- Different wavelengths of light focused at different distances behind eye's lens - need for constant refocusing = fatigue - be careful about color combinations - Pure (saturated) colors require MORE focusing than less pure (desaturated) colors - Don't use saturated colors unless really need to stand out
Low-Fi Prototype Benefits
- Easier to do - No warping - Sketches act as a prototype
Fidelity in Prototyping
- Fidelity refers to level of detail
Selecting a Good Problem or Solution Idea
- Frequency - Density - Pain - Interested - Dark Horse Idea 1. Explores a space that is risky, radical, or orthogonal 2. Brainstormed after more traditional HMW/ideas 3. Possible to prototype and test
Customer Model
- Get model from prior experience and usage of new through system iamge - If Design model and customer model don't match = slow performance = errors = frustration
Missing from MHP
- Haptic memory - for touch - Moving from sensory memory to working memory - attention filters stimuli and passes to WM - Moving from working memory to Long term memory
Questions to avoid
- Hypothetical questions - How often questions - Binary questions - "Tell me about yourself" - Don't SUGGEST answers in questions
Make Things Visible
- If object has function, interface should show it - # controls = #functions - Should be labeled and grouped together
Video Prototype
- Illustrate HOW users will interact w/ system - How users will USE a design - Can have paper prototypes, existing software, images projected - Optional narrative, conversation preferred - Usually fixed prototypes
Ideate
- Innovation Potential - Separate geneartion & evaluation - How Might We's - Go for quantity
Vannevar Bush
- MIT Faculty member "As We May Think" - 1945 - Futuristic Inventions: - Wearable camera to record life - Encyclopedia for a nickel - Automatic transcripts of speech - Trails of discovery (breadcrumbing) - Capture of nerve impulses - Memex (was like some desk note taking, library mix thing
Wizard of Oz Techniques
- Man behind the curtain
Fitts' Law
- Moving hadn is a series of microcorrections - 240 ms - Time Tpos move hand to target size S, which is distance D away - Time to move hand depends only on the relative precision required - how far away it is, how big the target is
Distribution of Photopigments
- Not even - Mainly red (64%) & very few blues (4%) - Few blue cones (high acuity) - leads to disappearance of small blue objects you focus on - As we age, lens yellows & absorbs shorter wavelenghts - sensitivity to blue is even more reduced - IMPLICATION: don't rely on blue for text or small objects
Thinking Aloud Method
- Prompt user to do so - Won't always give right answers - Panty Hose example (people will always give an answer)
Usability Test Proposal
- Report contains the test you are going to do - Find problems before its too late
Choosing Particpants
- Representative of target user (job-specific vocabulary / knowledge) - Approximate if needed - Use incentives
Sketching
- Suggestive, question, propose, tentative - Quick, plentiful - leave room for imagination - Allows for exploration - VALUES ARE EMBEDDED in our artifacts
Experience Prototype
- Test an assumption - Be a piece of an idea, rather than a complete solution - Think of it as a needfinding technique
Douglas Engelbart
- Turing Award 1997 - 1960s research - Believed in specialized tools (tricycles vs bicycles, we still have NEED for specialized tools) - Demoed NLS (oNLine system) in 1968 — the demo to end all demos - Mouse and chorded keyboard - NLS Software - First 2D editing & windows - First hypertext - First word processing - First document version control - First groupware (shared screen teleconferencing) - First context-sensitive help - First distrubuted client-server - Many more!
Metaphor
- Use metaphor in UI design to leverage existing conceptual models - Avoid metaphor for metaphor's sake (skeumorphism) Example metaphors: - Global metaphors (personal assistant, wallet) - Data & function (to-do list, calendar) - Collections (files, drawers)
Cones
- Used to sense color - are at the center of the retina - Allows for high acuity of objects focused at center - "Photopigments" used to sense color
Affordances as Perceptual Clues
- Well designed objects have affordances - clues to their operation the perceived and actual properties of the thing ‣ Ie. A chair affords ('is for') support and therefore affords sitting - Poorly design objects have no clues or misleading clues - ie. Norman Doors
Test
- What new information do you have about the user's need? What information do you have about how your solution addresses the need? Are your assumptions correct? Test USING prototypes
Rods
- primarily for night vision & perceiving movement - sensitive to broad spectrum of light - can't discriminate between colors - sense intensity or shades of gray - ARE ON OUTSIDE of retina - allows detecting motion of threats in periphery
Iterative design cycle
-> Design -> Prototype -> Evaluate ->
Types of Group Experiments
1) Between Groups experiments - Two groups of test users, each group uses only 1 of systems - Readings are this one (the explainable AI reading) and - More participants needed 2) Within groups experiments - One group fo test users - each person uses both systems (cheaper) - need to avoid learning
Importance of Color
1) Improve interfaces by communicating key information 2) Bad colors reduce performance of system
Memory
1) Working memory (short term) - Small capacity (7 +- 2 "chunks") - RAPID access (~70ms) and rapid decay (~200ms) 2) Long Term memory - huge (if not unlimited) - slower access time (~100ms) w/ little decay 3) Sensory memory (exists in WM ?)
What PAIR does
1. Conduct and publish HAI research 2. We create and launch open-source tools and platforms to build AI responsibly 3. We widen the circle of who can participate in the development and application of AI Created People + AI Guidebook
Downselecting Ideas
1. Heat Map Voting - Everyone gets unlimited votes. then 3 votes. 2. Category Voting - get # of votes, rank best categories (craziest, most feasible) 3. Everyone picks 3 favs
Types of Data to Collect
1. Process Data - Qualitative - Observations of what users are doing and thinking - Should be first focus (good overview of problems) 2. Bottom-Line Data - Quantitative - Summary of what happened (time, erros, success) - Doesn't tell you where to fix problem Need statistical significance - Need to define (what is error of succcess) - Need to look at certainty and confidence interval - HIGHLY variable - 4x as many tests only narrows range by 2x
Prototype (definition)
A working representation of a final artifact Concrete representations of a design
Typeface vs. Font
Arial vs. Arial Bold
Jan Tschichold's Revolution
Champion of Modernist Typography - Mid 1920's
Retina
Covered with two types of light-sensitive receptors: RODS: - primarily for night vision & perceiving movement - sensitive to broad spectrum of light - can't discriminate between colors - sense intensity or shades of gray - ARE ON OUTSIDE of retina - allows detecting motion of threats in periphery CONES: - Used to sense color - are at the center of the retina - Allows for high acuity of objects focused at center
Needfinding
Discovering opportunities by recognizing gaps. Understanding user needs, observing them in practice, developing points of view. (HMW) Move from closed ended questions to open ended questions - Whats and whys - Actions to feelings
Design Process
Discovery -> Exploration -> Refinement -> Production
Computing in 70's and 80's
Dynabook — Kay (1974) iPad looking thing sketch Xerox Star — 1st commercial GUI (1981)
Computing in 1945
ENIAC - First Electronic General Purpose Computer (Before) Harvard Mark 1 55 feet long, 8 feet high, 5 tons Vannevar Bush era
Design as Choice: Generative & Reductive
Elaboration ("Flare") Reduction ("Focus") Exploration of Alternatives - Design rationale for decisions is key - Diverse teams make this work better
Gestalt Psychology in Information Design
Information blocks should be grouped together if related. PROXIMITY to indicate relationships
Interview Structure
Intro -> background -> build rapport -> evoke stories -> emotions -> reflection -> wrap up - Be the apprentice - Be prepared to veer questions - Look for contradictions! - Many ways to ask "why"— DIG DEEPER
Concept + Vision Videos
Key pieces: 1. People (roles) 2. Context (scene) 3. Solution (props) - Keep it SIMPLE Define (what is the message? What is the value proposition?) Make a basic plot Storyboard
Human Visual System
Light passes through lens and then focused on retina
Recognize-Act Cycle of the CP
MHP Principle of Operation - On each cycle contents in WM initate actions associatively linked to them in LTM - Actions modify the contents of WM - Cues in WM can make it easier to access LTM
Discrimination Principle
MHP Principle of Operation - Retireval is determined by candidates that exist in memory relative to retrieval cues - Interference by strongly activated chunks - Interference can make it hard to access LTM - Reading colors with the wrong name (link to different chunks in long term memory)
Empathy Map
Part of define process Say. Think. Do. Feel. (Feel the STD) Keep list of tensions, contradictions, surprises
Small Multiples
Repeating same thing (consistency but with differences). Economy of line, similarities enable us to notice differences
Prototype Dimensions
Representation: Form of the prototype - Off-line (paper) or on-line (software) Precision: Level of detail - informal or polished Interactivity: Watch-only vs. fully interactive - Fixed prototype (video clips) - Fixed-path prototype (each step triggered by specific actions - Open prototype (real, but limited error handling or performance) Evolution: Expected life cycle of prototype - eg. throw away or iterative (RIPE)
Low-Fi Prototype Testing
Roles: 1. Greeter 2. Facilitator (only one who speaks during) 3. Computer 4. Observers (take notes & recommendations)
Using Context to Determine Layouts
Screen space / Time for tasks / UI Elements (DECREASES) Mobility / Importance of information hierarchy (INCREASES)
Types of tasks
Simple, Moderate, Complex
Serifs
Structural details in letters that (may) help the reader connect them
Prototype
Test your assumptions - Prototypying reduces risk, early failures are chepaer - Prototype to learn Experience Prototypes
Usability
The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments
Task
The structured set of activities or high-level actions required to achieve a high level user goal - What a user WANTS to do - NOT how they do it Allows comparing different design alternatives Should describe a complete goal Discard features that don't support your tasks
Desire line
Traces of use or wear that indicate preferred methods of interaction with an object or environment.
Design Discovery
Understnad users and tasks, needs, expectations. Determine scope and evaluate current products
Hi-Fi Prototype Warp
Warps: - Perceptions of the tester/reviewer - Representation communicates "finished" - comment more on color, fonts, alignment - Time - Encourage precision - Specifying details takes more time - Creativity - Lose track of the big picture
Point of View
We met... We were amazed to realize... It would be game-changing to... (NOT a solution, and NOT just the need) A unique, concise **reframing of the problem** that is grounded in user needs & insights
Task Flows
What costumer has to do & what they would see to accomplish task. HOW they do the task. - Design specific, tasks aren't Illustrate using storyboards (aka wireframes) - Forces you to show various features will work together - Settle design arguments
Design Balance of Techniques
best designs balance the techniques seen AND the less techniques used, easier it is to balance
Luminance
brightness of the image
Design Thinking Process
empathize, define, ideate, prototype, test (EDIPT)