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)