Advertisement… Looking for someone who will be around
this summer and would like some occasional (contract) work.
Sign up with me if you’re interested.
Final Exam Review Exam will cover the entire semester (2/3 vs. 1/3
split), this review is over the second half
Selected slides from lecture – but not guaranteed to contain everything you need to know!
Ask questions about the things that you don’t understand.
Mobile Evaluation Kjeldskov and Stage evaluated a mobile
application in the lab, on a treadmill, and walking down the street
Task Load Index (TLX) increased…
Other possibilitiesExperience Sampling (ESM)
Diary Studies (Feedback and Elicitation)
Design is… About function:
Good designs support user tasks
About form:
Good designs should be a pleasure to use
Design Summary One design strategy follows Bauhaus principles
Form Follows Function
Economy of Form
Integrity of Materials
General design principles
Simplicity
Grid-based Design
Inspection and critique of other sites
Describe image as strokes (w/ color/thickness)Line ((10, 4), (17,4), thick 2, red)
Circle (( 19, 13), radius 3, thick 3, white)
Maps to early vector displays & plotters
Most UI toolkits have stroked objects
arcs, ellipses, rounded rectangles, etc.
Stroke Model
Pixel Model Break-up complex images into discrete “pixels” &
store color for each
ResolutionSpatial: number of rows by columnse.g., 1280 x 1024 is a good monitor displayQuality laser printer: 10200 x 13200 (1200 dpi)Image depth (i.e., number of bits per pixel)Several styles... 8-bit, 24-bit, 32-bit
Canvas Abstraction for the drawing surface
Most toolkits support one
Defines methods used for drawing
Each instance has a height, width, & defines its physical units
Use the same method interface forWindowsImage in memoryPrinted output
Called Graphical Device Interface (GDI) by MS
Graphics Context
Could specify with:void Canvas::Rectangle (x1, y1, x2, y2, lineWidth, lineColor, fillColor)
Lots of parameters!shapes have properties in common
geometry, line/border width, line/fill color, pattern Use current settings of canvas
Usually there is a “graphicscontext” or similar abstraction that defines all the parameters needed for drawing.
Color Models 256 levels for each primary color
-> 24 bits / pixel
RGB modelSpecify color by red, green, & blue components
HSV model - hue, saturation, & valueHue is primary wavelength (i.e., basic color)Saturation is a measure of how pure color isValue is intensity (dark vs. light)
Interactor Tree
7 8 9
4 5 6
0 + -
1 2 3
=
93.54
ENT
Display Screen
Outer Win [black]
Result Win [tan]Result String
Inner Win [green]
Keypad [Teal]
- button+ button0 button
= button
//// See bottom of file for software licensepackage edu.berkeley.guir.lib.satin;import java.awt.*;import java.awt.event.*;import edu.berkeley.guir.lib.satin.objects.*;
/*** Satin constants.** <P>* This software is distributed under the * <A HREF="http://guir.cs.berkeley.edu/projects/COPYRIGHT.txt">* </PRE>** @version SATIN-v2.1-1.0.0, Aug 11 2000*/public interface SatinConstants {
//===========================================================================//=== GLOBAL SATIN PROPERTIES ===========================================
/*** The name of Satin's properties file. Assumed to be in the current* directory, from which Satin is started (via the java interpreter).*/public static final String SATIN_PROPERTIES_FILENAME = "satin.properties";
//=== GLOBAL SATIN PROPERTIES ===========================================//===========================================================================
//===========================================================================//=== STYLE PROPERTIES ==================================================
//// If you add any new Style properties, be sure to update the//// Style.java file too.
public static final String KEY_STYLE_FILLCOLOR = "FillColor";public static final String KEY_STYLE_FILLTRANSPARENCY = "FillTransparency";
public static final String KEY_STYLE_MITERLIMIT = "MiterLimit";
public static final String KEY_STYLE_DASHARRAY = "DashArray";public static final String KEY_STYLE_DASHPHASE = "DashPhase";
//=== STYLE PROPERTIES ==================================================//===========================================================================
} // of interface
//==============================================================================
/*Copyright (c) 2000 Regents of the University of California.All rights reserved.
Redistribution and use in source and binary forms, with or withoutmodification, are permitted provided that the following conditionsare met:
1. Redistributions of source code must retain the above copyrightSUCH DAMAGE.*/
Main Event Loopwhile (app is running) {
get next event
send event to right widget}
MouseSoftware Events
Sou
rce
Cod
e
KeyboardSoftware
Display Screen
Outer Win [black]
Result Win [tan]Result String
Inner Win [green]
Keypad [Teal]
- button+button0 button
= button
Platforms - PC
For regular PC development, the options are: C#/Visual Basic/C++ (Visual Studio) Java Flash Rapid prototyping: Suede, Silk, Satin
(see guir.berkeley.edu/projects)
Platforms - Web
For web development one of themain issues is portability. Before designing your app, think about browsers for your user group.
There is a lot more than IE and Netscape: Mozilla/Opera AOL: huge community, many versions with
limited browsers Old versions of IE and Netscape
There are 6.5 billion people on earth - only about 1.2 billion in “developed” countries
They will buy 800 million mobile phones this year - one person in eight on the planet
That’s 4x PC or TV unit sales
Fraction of smartphones should reach 40% by 2009 - most common “computer”
800m
200m
The Cell Phone Industry
Threads Use separate threads for any operations that can
occur asynchronously:Large file operations – use separate threads if you need to be updating and large files.
Network communication (sockets): use one thread for each connection.
Use a thread for each other I/O device, e.g. one each for reading from or writing to the sound card
Timers: if you schedule events to happen later, you need a thread to trigger that action
What’s in a thread A thread is a partial virtual machine (with
its own stack) that runs your program. Threads share heap storage and static variables. (processes don’t share memory)
Ways for threads to communicate and synchronize
Thread communicationMessage Queues (e.g. event queues)
Shared memory
SynchronizationOften through Monitors (e.g. in C#)
Color: Retina Retina covered with light-
sensitive receptorsRods
Primarily for night vision & perceiving movement
Sensitive to broad spectrum of light
Can’t discriminate between colors
Sense intensity or shades of gray
ConesUsed to sense color
Color: Retina Center of retina has most of the cones
Allows for high acuity of objects focused at center, good color perception.
Edge of retina is dominated by rods
Allows detecting motion of threats in periphery, poor color sensitivity there.
What’s the best way to perceive something in near darkness?
Look slightly away from it.
The Model Human Processor
Long-term Memory
Working MemoryVisual Image
StoreAuditory Image
Store
PerceptualProcessor
CognitiveProcessor
MotorProcessor
Eyes
Ears
Fingers, etc.
sensorybuffers
Memory Working memory (short term)
Small capacity (7 ± 2 “chunks”)6174591765 vs. (617) 459-1765DECIBMGMC vs. DEC IBM GMC
Rapid access (~ 70ms) & decay (~200 ms)pass to LTM after a few seconds
Long-term memoryHuge (if not “unlimited”)Slower access time (~100 ms) w/ little decay
MHP Basics Sometimes serial, sometimes parallel
Serial in action & parallel in recognition
Pressing key in response to light
Driving, reading signs, & hearing at once
Parameters
Processors have cycle time (T) ~ 100-200 ms
Memories have capacity, decay time, & type
Fitts’ Law
Moving hand is a series of micro-corrections, each correction takes Tp + Tc + Tm = 240 msec
Time Tpos to move the hand to target size S which is distance D away is given by:
Tpos = a + b log2 (D/S + 1)
SummaryTime to move the hand depends only on the relative precision required
Fitts’ Law Example
Which will be faster on average?
TodaySundayMondayTuesday
WednesdayThursday
FridaySaturday
Pop-up Linear Menu
Pop-up Pie Menu
Working Memory
Sensory Image Store
Long Term Memory
decay decay,displacement
chunking / elaboration
decay?interference?
maintenancerehearsal
Stage Theory
Design Patterns First used in architecture [Alexander]
Communicate design problems & solutions
How big doors should be & where…
How to create a beer garden where people socialize…
How to use handles (remember Norman)…
Not too general & not too specific
Use solution “a million times over, without ever doing it the same way twice”
Home page design1. Pattern Title: Home page
2. Context: Pages that are the entry point for a web site.
3. ForcesPeople are attracted by novelty and good design, attention span is very short on the web, home pages are regularly updated.
4. Problem StatementWhat to capture and hold visitors attention, encourage return visits, and be easy to maintain
Quantitative Studies Quantitative:
Use to reliably measure somethingCan compare different designs, or design changes
Examples:Time to complete a task.Average number of errors on a task.Users’ ratings of an interface *:
Ease of use, elegance, performance, robustness, speed,…
* - You could argue that users’ perception of speed, error rates etc is more important than their actual values.
Random variables Random variables take on different values according to a
probability distribution.
E.g. X {1, 2, 3} is a discrete random variable with three possible values.
To characterize the variable, we need to define the probabilities for each value:
Pr[X=1] = Pr[X=2] = ¼, Pr[X=3] = ½
On each trial or experiment, we should see one of these three values with the given probability.
Detecting differences The more times you repeat an experiment, the narrower
the distributions of measured average values for two conditions.
So the more likely you are to detect a difference in a test variable between two cases.
Variable types Independent Variables: the ones you control
Aspects of the interface design
Characteristics of the testers
Discrete: A, B or C
Continuous: Time between clicks for double-click
Dependent variables: the ones you measure
Time to complete tasks
Number of errors
Significance
The significance or p-value of an outcome is the probability that it happens by chance if the relation does not hold.
E.g. p = 0.05 means that there is a 1/20 chance that the observation happens if the hypothesis is false.
So the smaller the p-value, the greater the significance.
T-test The T-test asks for the probability that E[X] > E[Y] is
false.
i.e. the null hypothesis for the T-test is whether E[X] = E[Y].
What is the probability of that given the observations?
Analyzing the Numbers Example: prove that task 1 is faster on design A
than design B.
Suppose the average time for design B is 20% higher than A.
Suppose subjects’ times in the study have a std. dev. which is 30% of their mean time (typical).
How many subjects are needed? Need at least 13 subjects for significance p=0.01
Need at least 22 subjects for significance p=0.001
(assumes subjects use both designs)
Statistics with care: A common mistake:
An experiment fails to find a significant difference between test and control cases (say at p = 0.05), so you conclude that there is no significant difference.
No!
A difference-of-averages test can only confirm (with high probability) that there is a difference. Failure to prove a significant difference can be because
There is no difference, OR
The number of subjects in the experiment is too small
Between subjects experiment
Two groups of test users
Each group uses only 1 of the systems
Within subjects experiment
One group of test users
Each person uses both systems
BA
Using Subjects
Between subjects Two groups of testers, each use 1 system
Advantages: Users only have to use one system (practical).
No learning effects.
Disadvantages:Per-user performance differences confounded with system differences:
Much harder to get significant results (many more subjects needed).
Harder to even predict how many subjects will be needed (depends on subjects).
Within subjects One group of testers who use both systems
Advantages:
Much more significance for a given number of test subjects.
Disadvantages:
Users have to use both systems (two sessions).
Order and learning effects (can be minimized by experiment design).
Social Psychology Why study it?
It helps us understand human collaboration, which is one of the most difficult areas of HCI, but also the most important.
Most “knowledge work” is collaborative at some level. Organizations can be more or lessthan the sum of their parts.
Mere presence – Design Implications Increasing the level of group “awareness”
should increase mere presence effects:Heightened arousalFaster performanceIncreased learningMore errors
Examples:High awareness – video conferencing, phoneMedium – Instant messagingLow awareness – Email
Attribution theory Attribution theory: was this behavior caused by
personality, or environment?
Fundamental attribution error:
When I explain my own behavior, I rely on external explanations.
When I explain others’ behavior, I’m more likely to attribute it to personality and disposition.
e.g. other drivers are either “lunatics” (faster than me) or “losers” (slower than me). Of course, they have the same model about you …
Attribution theory – design implications To reduce attribution errors, its important to have as much
context as possible.
E.g. room-scale video-conferencing, or ambient displays:
Non-verbal communicationQ: What is the role of these cues in normal communication?
A: It depends totally on the role of the communication, e.g.
Routine (giving information, coordinating)
Persuading and being persuaded
Trust, deception and negotiation
…
CSCW: Computer-Supported Cooperative Work
Its about tools that allow people to work together.
Most of the tools support remote work
video, email, IM, Workflow
Some tools, e.g. Livenotes, augment local communication.
Can be synchronous (live) or asynchronous
Asynchronous Groupware
Email: still a killer app
Newsgroups: topical messaging
Cooperative hypertext/hypermedia authoring: e.g. Wikis, Blogs
Structured messaging: e.g. Workflow – messages route automatically.
Knowledge repositories: Answergarden, MadSciNet, Autonomy…
Automation
Why Study Human Learning?
Ans: People need to *learn* new applications, often using various forms of Help.
Ans: The way people learn should influence the design of help systems, and perhaps the entire system e.g.
Knowledge is “situated” in particular contexts, so help should reflect that (scenarios/common tasks)
Learning is layered on old knowledge in a roughly novice expert trajectory
Learning involves a concrete abstract progression
Fluency with abstraction varies across the population, esp. with degree of schooling
ZPD: Zone of Proximal Development Learning is layered and incremental.
In societies, learners are helped by others.
In fact learners have a “zone” of concepts they can acquire with help.
This is the Zone of Proximal Development (ZPD).
Metacognition Strong learners carefully manage their learning.
For instance, strong learners reading a textbook will pause regularly, check understanding, and go back to difficult passages.
Weak learners tend toplough through theentire text, then realize they don’tunderstand and startagain.
Have I learnedthis yet?Have I learnedthis yet?
Piaget: Stages of learning
Jean Piaget observed very systematic progression of knowledge in children through stages:
1. Sensori-motor (acting, observing, remembering) [< 2 years]
2. Semiotic or symbolic (naming things) [> 1.5 years]
3. “Concrete” operations (relationships, transformations) [2-7, 7-11 years]
4. Propositional or formal thought [> 7 years]
Types of Help Quick Reference:
Reminders of commoncommand names or options.Good to place on a card, or for small devices, on the device itself. Use a few main categoriesto avoid long search..E.g. for an editor, categorieslike “basic”, “search/replace”, “load/save”, etc.
Types of Help Task-specific help
User needs help on howto apply a command, orto complete a task.Can be part of a “how-to”system for common tasks. Should be easily accessiblefrom the command line (if text).Make “options” windows obvious and easy to find!E.g. add “advanced” button in the dialogue to apply any command.
Types of Help Full explanation
User wants complete understanding, to get bestvalue out of the application.This part explains the “why”more than the “how”. E.g. How do compiler options affect performance? What are various installation components used for? What are the uncommon commands? Probably need a chapter in the help system for this. More system-centric than task-centric.
Types of Help Tutorial
The tutorial leads the user through a task, scaffolding their actions. Should allow users to act as well as watch (sandboxing). The “best” way to teach!More work to build into the system, but you should leverage your company’s other effort:
E.g. most software houses conduct regular training sessions for customers – these are ideal tutorial content.
Speech: the Ultimate Interface? Why speech hasn’t succeeded in the office:
Affordances of text:
Visual scanning (for email or docs)
Unambiguity of text
Editing of text
Disadvantages of speech:
Noise – call center ambience
Lack of privacy
But Computing is MovingWhere are computers these days?
Intel’s breakdown (based on PC sales):
Office
Home
Mobile (laptops)
Medical
And as we noted earlier, programmable smartphones will soon outnumber total PCs.
Then there are game boxes, cable boxes, Smart TVs etc.
Speech UIs Most implement a finite-state machine.
At each state, the system can recognize various speech segments to take you to the next state(s).
A segment may be a word, through to a complete utterance.
The system can also make utterances of its own at various states.
You can specify them usingregular expressions, or using VoiceML.
Ten Guidelines for Speech Interfaces
1. You can’t design what you can’t define
2. Use user-centered design techniques
3. Use the right technology, and use technology right
4. Leverage the language instinct
5. Establish success criteria and test against them
6. Branding in VUI is more than just a pretty voice
7. How you say it is as important as what you say
8. Don’t block the exit
9. Take care with error handling
10. Establish a change process
International Issues Geographic, political, linguistic
Example: ISO CRT-color, icon, and UI standards
Example: Canadian bilingual requirements
Example: Currency, time, physical measurements
Intercultural Issues Religious, historical, aesthetic:
Example: Calendars, the weekend = Thu/Fri in some Moslem states
Example: Color/type/signs/terms
Hofstede’s 5 Dimensions of Culture
Power-distance
Collectivism vs. individualism
Femininity vs. masculinity
Uncertainty avoidance
Long- vs. short-term orientation
UX Issues Related to Culture, 1/4 Are basics of usability culture-biased? Efficiency,
productivity, simplicity, usefulness...for what?
How can culture models be added to theories of utility, sociability, community, entertainment computing, design?
How best to map UI components to culture dimensions?
How can corporations and organizations include more cultural theory in development process?
UX Issues Related to Culture, 2/4 Online training: Friend/guru? Tradition/skills?
Interaction styles: informal vs. formal, harmony vs. honesty, sincerity vs. scheming?
Content: challenging vs. feel-good?
Rewards: Money vs. group acclaim?
Conflict: Frequent vs. seldom? Chatroom flaming OK? Clashing opinions OK?
UX Issues Related to Culture, 3/4 Personal vs. group opinions? China:
“Personality”?
Shame vs. guilt: Personal Webcams, SMS OK?
Individual vs. collective cultures: role of community, chatroom behavior, hiring sites, coop work sites?
Management/training? Most for individual, not collective cultures, e.g., honesty and confrontation
UX Issues Related to Culture, 4/4 Work sites: Task vs. personal relation?
Different men, women sites/apps? Service orientation?
Role of advertising, hyperbole? Different in masculine vs. feminine cultures?
Gender differences for job sites: Careers? Interest in subject? Skills vs. contacts?
Culture difference: Activities outside the home?
Western vs. Eastern: Truth vs. virtue/practical?
augmented cognition Using external artifacts to amplify human mental
abilities.Classic examples: pen and paper, slide rulesA primary goal of Information visualization
In the case of InfoVis, how?Increased resourcesReduced searchEnhanced pattern recognitionPerceptual inferencePerceptual monitoringManipulable medium
basic types of data elements Nominal
(no inherent order)city names, categories, ...
Ordinal(ordered, but not at measurable intervals)first, second, third, …cold, warm, hotMon, Tue, Wed, Thu …
Quantitative(ordered, with measurable distances)real numbers
Relations(relations between elements)NetworksHierarchical relationships (parent/child)
basic types of visual encodings “Retinal” properties
spatial position (e.g., x-y axes)sizeshapecolororientationtexture
“Gestalt” propertiesconnectivitygrouping (e.g., enclosure)
Animationview transitionsanimated elements
sensemaking tasks [Card et al] Information foraging
Collect information of interest
Search for schemaIdentify relevant dimensions of data
Instantiate schema (with data!)Schema == knowledge representationOrganize / codify information
Analysis (problem solving)Analyze and filter data, answer questionsRefine schema as needed
Record / communicateMake a decision, take action, or communicate results
interactive tasks [Shneiderman] Overview
Get an overview of the collection
ZoomZoom in on items of interest
FilterRemove uninteresting items
Details on demandSelect items and get details
RelateView relationships between items
HistoryKeep a history of actions for undo, replay, refinement
ExtractMake subcollections
characterizing the visualization x-axis: year
(quantitative)
y-axis: currency (quantitative)
color: imports/exports (nominal)
color: positive/negative (nominal/ordinal)
infovis reference model
Data TransformationsMapping raw data into an organization fit for visualization
Visual MappingsEncoding abstract data into a visual representation
View TransformationsChanging the view or perspective onto the visual representation
User interaction can feed back into any level
Raw Data
Data Tables
Visual Structures
Views
Data Visual Form
Data Transformations
Visual Mappings
View Transformations
Task