CS160 Final Review - PowerPoint PPT Presentation

1 / 92
About This Presentation

CS160 Final Review


Circle (( 19, 13), radius 3, thick 3, white) Maps to early vector displays & plotters ... E.g. most software houses conduct regular training sessions for customers ... – PowerPoint PPT presentation

Number of Views:62
Avg rating:3.0/5.0
Slides: 93
Provided by: RyanAipp5
Tags: blog | cs160 | final | house | review | white


Transcript and Presenter's Notes

Title: CS160 Final Review

CS160 Final Review
  • May 2, 2006

  • Looking for someone who will be around this
    summer and would like some occasional (contract)
  • Sign up with me if youre 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 dont

Mobile Evaluation
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)

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

UI Implementation
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.

Problems with Stroke Model?
  • How would you represent with strokes?
  • Solution?

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

  • 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

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,
  • 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
  • -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)

Interactor Tree

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
Source Code
Result Win tan
Result String
Keyboard Software
Keypad Teal
- button
0 button
Platforms - PC
  • For regular PC development, the options are
  • C/Visual Basic/C (Visual Studio)
  • Java
  • Flash
  • Rapid prototyping Suede, Silk, Satin(see

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
  • Old versions of IE and Netscape

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

Interactive Programming
  • 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
  • Timers if you schedule events to happen later,
    you need a thread to trigger that action

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)

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)

Model View Controller (MVC)
Sensori-Motor Models
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

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
  • Look slightly away from it.

Color Blindness
  • Check out other color use hints in the lecture

Model Human Processor
The Model Human Processor
  • Working memory (short term)
  • Small capacity (7 2 chunks)
  • 6174591765 vs. (617) 459-1765
  • 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

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

Fitts Law Example
Pop-up Linear Menu
  • Which will be faster on average?

Stage Theory
Design Patterns
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
  • 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 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

Solution sketch
Quantitative Evaluation Methods
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,
  • - 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
  • PrX1 PrX2 ¼, PrX3
  • 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

  • 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
  • So the smaller the p-value, the greater the

  • 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

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

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

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
  • Disadvantages
  • Users have to use both systems (two sessions).
  • Order and learning effects (can be minimized by
    experiment design).

Social Psychology and CSCW
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 arousal
  • Faster performance
  • Increased learning
  • More errors
  • Examples
  • High awareness video conferencing, phone
  • Medium Instant messaging
  • Low 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, 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 ?

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

Non-verbal communication
  • Q What is the role of these cues in normal
  • 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
  • Most of the tools support remote work
  • video, email, IM, Workflow
  • Some tools, e.g. Livenotes, augment local
  • 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

Human Learning and Help
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
  • Learning is layered on old knowledge in a roughly
    novice ? expert trajectory
  • Learning involves a concrete ? abstract
  • 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).

  • 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

Have I learnedthis yet?
Have I learnedthis yet?
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
  • Concrete operations (relationships,
    transformations) 2-7, 7-11 years
  • Propositional or formal thought gt 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-tosystem for common
  • 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 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.

Types of Help
  • Tutorial
  • The tutorial leads the user through a task,
    scaffolding their actions.
  • Should allow users to act as well as watch
  • 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.

Speech Interfaces
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

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

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
  • 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
  • You cant design what you cant define
  • Use user-centered design techniques
  • Use the right technology, and use technology
  • 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

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

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

UX Issues Related to Culture, 4/4
  • Work sites Task vs. personal relation?
  • Different men, women sites/apps? Service
  • 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?

Information Visualization
augmented cognition
  • Using external artifacts to amplify human mental
  • 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

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)

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

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

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,
  • Extract
  • Make 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 Transformations
  • Mapping raw data into an organization fit for
  • Visual Mappings
  • Encoding abstract data into a visual
  • View Transformations
  • Changing the view or perspective onto the visual
  • User interaction can feed back into any level

Good Luck!
Write a Comment
User Comments (0)
About PowerShow.com