CS160 Final Review

1
CS160 Final Review

• May 2, 2006

2
Advertisement

• Looking for someone who will be around this
  summer and would like some occasional (contract)
  work.
• Sign up with me if youre interested.

3
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 dont
  understand.

4
Mobile Evaluation
5
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 possibilities
• Experience Sampling (ESM)
• Diary Studies (Feedback and Elicitation)

6
Design
7
Design is

• About function
• Good designs support user tasks
• About form
• Good designs should be a pleasure to use

8
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

9
UI Implementation
10
Stroke Model

• 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.

11
Problems with Stroke Model?

• How would you represent with strokes?
• Solution?

12
Pixel Model

• Break-up complex images into discrete pixels
  store color for each
• Resolution
• Spatial number of rows by columns
• e.g., 1280 x 1024 is a good monitor display
• Quality laser printer 10200 x 13200 (1200 dpi)
• Image depth (i.e., number of bits per pixel)
• Several styles... 8-bit, 24-bit, 32-bit

13
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 for
• Windows
• Image in memory
• Printed output
• Called Graphical Device Interface (GDI) by MS

14
Graphics Context

• Could specify with
• void CanvasRectangle (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.

15
Color Models

• 256 levels for each primary color
• -gt 24 bits / pixel
• RGB model
• Specify color by red, green, blue components
• HSV model - hue, saturation, value
• Hue is primary wavelength (i.e., basic color)
• Saturation is a measure of how pure color is
• Value is intensity (dark vs. light)

16
Interactor Tree
93.54

ENT
17
Main Event Loop

• while (app is running)
• get next event
• send event to right widget

Display Screen
Outer Win black
Mouse Software
Inner Win green
Events
Source Code
Result Win tan
Result String
Keyboard Software
Keypad Teal
button
- button
button
0 button
18
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)

19
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

20
The Cell Phone Industry

• 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
• Thats 4x PC or TV unit sales
• Fraction of smartphones should reach 40 by
  2009 - most common computer

21
Interactive Programming
22
Callbacks
23
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

24
Whats 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
  dont share memory)

25
Ways for threads to communicate and synchronize

• Thread communication
• Message Queues (e.g. event queues)
• Shared memory
• Synchronization
• Often through Monitors (e.g. in C)

26
Model View Controller (MVC)
27
Sensori-Motor Models
28
Color Retina

• Retina covered with light-sensitive receptors
• Rods
• Primarily for night vision perceiving movement
• Sensitive to broad spectrum of light
• Cant discriminate between colors
• Sense intensity or shades of gray
• Cones
• Used to sense color

29
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.
• Whats the best way to perceive something in near
  darkness?
• Look slightly away from it.

30
Color Blindness

• Check out other color use hints in the lecture
  notes.

31
Model Human Processor
32
The Model Human Processor
33
Memory

• Working memory (short term)
• Small capacity (7 2 chunks)
• 6174591765 vs. [phone]
• DECIBMGMC vs. DEC IBM GMC
• Rapid access ( 70ms) decay (200 ms)
• pass to LTM after a few seconds
• Long-term memory
• Huge (if not unlimited)
• Slower access time (100 ms) w/ little decay

34
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

35
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)
• Summary
• Time to move the hand depends only on the
  relative precision required

36
Fitts Law Example
Pop-up Linear Menu

• Which will be faster on average?

37
Stage Theory
38
Design Patterns
39
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

40
Home page design

• Pattern Title Home page
• Context
• Pages that are the entry point for a web site.
• Forces
• People are attracted by novelty and good design,
  attention span is very short on the web, home
  pages are regularly updated.
• Problem Statement
• What to capture and hold visitors attention,
  encourage return visits, and be easy to maintain

41
Solution sketch
42
Quantitative Evaluation Methods
43
Quantitative Studies

• Quantitative
• Use to reliably measure something
• Can 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.

44
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
• PrX1 PrX2 ¼, PrX3
  ½
• On each trial or experiment, we should see one of
  these three values with the given probability.

45
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.

46
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

47
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.

48
T-test

• The T-test asks for the probability that EX gt
  EY is false.
• i.e. the null hypothesis for the T-test is
  whether EX EY.
• What is the probability of that given the
  observations?

49
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 p0.01
• Need at least 22 subjects for significance
  p0.001
• (assumes subjects use both designs)

50
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

51
Using Subjects

• 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

52
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).

53
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).

54
Social Psychology and CSCW
55
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.

56
Mere presence Design Implications

• Increasing the level of group awareness should
  increase mere presence effects
• Heightened arousal
• Faster performance
• Increased learning
• More errors
• Examples
• High awareness video conferencing, phone
• Medium Instant messaging
• Low awareness Email

57
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, Im 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 ?

58
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

59
Non-verbal communication

• Q 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

60
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

61
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
62
Human Learning and Help
63
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

64
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).

65
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 dontunderstand and
  startagain.

Have I learnedthis yet?
Have I learnedthis yet?
66
Piaget Stages of learning

• Jean Piaget observed very systematic progression
  of knowledge in children through stages
• Sensori-motor (acting, observing, remembering) lt
  2 years
• Semiotic or symbolic (naming things) gt 1.5
  years
• Concrete operations (relationships,
  transformations) 2-7, 7-11 years
• Propositional or formal thought gt 7 years

67
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.

68
Types of Help

• Task-specific help
• User needs help on howto apply a command, orto
  complete a task.
• Can be part of a how-tosystem 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.

69
Types of Help

• Full explanation
• User wants complete understanding, to get
  bestvalue out of the application.
• This part explains the whymore 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.

70
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 companys other effort
• E.g. most software houses conduct regular
  training sessions for customers these are ideal
  tutorial content.

71
Speech Interfaces
72
Speech the Ultimate Interface?

• Why speech hasnt 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

73
But Computing is Moving

• Where are computers these days?
• Intels 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.

74
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.

75
Ten Guidelines for Speech Interfaces

• You cant design what you cant define
• Use user-centered design techniques
• Use the right technology, and use technology
  right
• Leverage the language instinct
• Establish success criteria and test against them
• Branding in VUI is more than just a pretty voice
• How you say it is as important as what you say
• Dont block the exit
• Take care with error handling
• Establish a change process

76
Localization
77
International Issues

• Geographic, political, linguistic
• Example ISO CRT-color, icon, and UI standards
• Example Canadian bilingual requirements
• Example Currency, time, physical measurements

78
Intercultural Issues

• Religious, historical, aesthetic
• Example Calendars, the weekend Thu/Fri in some
  Moslem states
• Example Color/type/signs/terms

79
Hofstedes 5 Dimensions of Culture

• Power-distance
• Collectivism vs. individualism
• Femininity vs. masculinity
• Uncertainty avoidance
• Long- vs. short-term orientation

80
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?

81
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?

82
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

83
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?

84
Information Visualization
85
augmented cognition

• Using external artifacts to amplify human mental
  abilities.
• Classic examples pen and paper, slide rules
• A primary goal of Information visualization
• In the case of InfoVis, how?
• Increased resources
• Reduced search
• Enhanced pattern recognition
• Perceptual inference
• Perceptual monitoring
• Manipulable medium

86
basic types of data elements

• Nominal
• (no inherent order)
• city names, categories, ...
• Ordinal
• (ordered, but not at measurable intervals)
• first, second, third,
• cold, warm, hot
• Mon, Tue, Wed, Thu
• Quantitative
• (ordered, with measurable distances)
• real numbers
• Relations
• (relations between elements)
• Networks
• Hierarchical relationships (parent/child)

87
basic types of visual encodings

• Retinal properties
• spatial position (e.g., x-y axes)
• size
• shape
• color
• orientation
• texture
• Gestalt properties
• connectivity
• grouping (e.g., enclosure)
• Animation
• view transitions
• animated elements

88
sensemaking tasks Card et al

• Information foraging
• Collect information of interest
• Search for schema
• Identify relevant dimensions of data
• Instantiate schema (with data!)
• Schema knowledge representation
• Organize / codify information
• Analysis (problem solving)
• Analyze and filter data, answer questions
• Refine schema as needed
• Record / communicate
• Make a decision, take action, or communicate
  results

89
interactive tasks Shneiderman

• Overview
• Get an overview of the collection
• Zoom
• Zoom in on items of interest
• Filter
• Remove uninteresting items
• Details on demand
• Select items and get details
• Relate
• View relationships between items
• History
• Keep a history of actions for undo, replay,
  refinement
• Extract
• Make subcollections

90
characterizing the visualization

• x-axis year (quantitative)
• y-axis currency (quantitative)
• color imports/exports (nominal)
• color positive/negative (nominal/ordinal)

91
infovis reference model

• Data Transformations
• Mapping raw data into an organization fit for
  visualization
• Visual Mappings
• Encoding abstract data into a visual
  representation
• View Transformations
• Changing the view or perspective onto the visual
  representation
• User interaction can feed back into any level

92
Good Luck!