Transcript Rapid Prototyping - Georgia Institute of Technology

Rapid Prototyping
CS 160, Spring 2002
Professor James Landay
March 11, 2002
3/11/2002
1
Hall of Fame or Shame?
Page setup for
printing in IE5
3/11/2002
2
Hall of Shame
Page setup for printing
in IE5
Problems
codes for header &
footer information
recognition over recall!
no equivalent GUI
help is the way to find
out, but not obvious how
3/11/2002
3
Hall of Fame or Shame?
Password dialog in
Eudora Pro for Mac
3/11/2002
4
Hall of Fame!
 Password dialog in
Eudora Pro for Mac
 Most passwords are
mixed case
caps lock often leads to
failure to authenticate
 Good idea to inform user
that Caps Lock is on
 Flashing and “!”
unnecessary
3/11/2002
5
Interesting Survey Results...
In 1997, Harris Research found that employees who use PCs can lose up to 3
weeks/year tackling technology problems. Why?
Learning/installing new systems
each employee lost 100 minutes a week in the
1st month a new system was introduced
Dealing with PC/software malfunction or
misuse
http://guir.berkeley.edu/courses/cs160/spring2002/readings_files/harris-research-survey.htm
3/11/2002
6
Who Adapts to Who?
“It is a far better to adapt the technology to the user than to
force the user to adapt to the technology.”
Larry Marine, Intuitive Design
3/11/2002
7
Rapid Prototyping
CS 160, Spring 2002
Professor James Landay
March 11, 2002
3/11/2002
8
Outline
Review Web vs. GUI design
Why build prototypes?
Tools for prototyping
Widgets
What prototyping tools lack
Administrivia
Videos of research systems
3/11/2002
9
Review Web vs. GUI Design
 Web page represents
1)
2)
3)
4)
Customer’s view of information on screen
Unit of navigation
Address to get info. over net (URL)
Storage of the information
 Differences between Web & desktop apps
 when does the application state get modified? (“back”)
 dialog boxes on the Web often lack context
 don’t know what type of client customer will have
 customer controls navigation on Web (don’t know where they come from)
 Top 10 Mistakes in Web Design
 overly long download times
 out of date information
 non-standard link colors
 lack of navigation support
 long scrolling pages
3/11/2002
 orphan pages
 complex URLs
 constantly running animations
 gratuitous use of technology
 misuse of frames
10
Problems with Low-fi
Prototypes?
Slow compared to real computer
End-users can’t do it themselves
Computer inherently buggy
Sometimes hard for participants to
recognize widgets
 Hard to implement interactive
functionality, like pulldowns
 Won’t look like the final product
 Not in context of user’s work
environment




3/11/2002
11
Problems with Low-fi
Prototypes?
 Doesn’t map well to what will actual fit on the screen
 Couldn’t hold in your hand -- different ergonomics from
target device
 Timing in real-time hard to do (slooooow computer)
 Some things could not be simulated (highlighting)
 Writing on paper not the same as writing on target device
 Appearance unrealistic
 Dynamic widgets hard to simulate (pop-ups)
 Some items had to be static!
 Dragging hard to simulate
3/11/2002
12
Problems with Low-fi
Prototypes?
 Couldn’t measure realistic I/O
mouse (can’t sketch the same way)
slow response
 Lack of interactive feedback
button highlights
 “Computer” has to keep track of a lot of paper
 Hard to draw well (recognition of elmts)
 Users wouldn’t criticize UI
 Can’t get accurate time measurement
 Couldn’t give proper affordance that something wasn’t
selectable
3/11/2002
13
Why Build Prototypes?
 Must test & observe ideas with customers
 Paper mock-ups don’t go far enough
how would you show a drag operation?
not realistic of how interface will be used
 Building final app. now is a mistake (?)
changes in the UI can cause huge code changes
need to convince programmer & hope they get it right
takes too much time
what did Cooper say it is harder than????
 Drag & drop prototyping tool appropriate
but only after we have iterated on design
why is Cooper against prototyping?
3/11/2002
14
Why Use Tools
(rather than code)?
Faster
Easier to incorporate testing changes
Multiple UIs for same application
Consistent user interfaces
Easier to involve variety of specialists
Separation of UI code from app. code
easier to change and maintain
More reliable
bugs found in the tool are fixed for all applications
3/11/2002
15
Prototyping Tools (historical)
HyperCard
for Macintosh – built by Bill Atkinson
metaphor: card transitions on button clicks
comes with widget set
drawing & animation limited
Director
still commonly used by designers
intended for multimedia -> until recently lacked
interface widgets or controls
good for non-widget UIs or the “insides” of app
Both have “scripting” languages
3/11/2002
16
HyperCard
 Tool palettes
3/11/2002
17
Director Cast
 Basic objects used in interface
 Mainly multimedia in nature
images, audio, video, etc.
synchronize with cue points
3/11/2002
18
Director Score
Overview of events in time
3/11/2002
19
Director Behavior Inspector
Connect events to
actions
Drag & drop
3/11/2002
20
UI Builders
Visual Basic
lots of widgets (AKA controls)
simple language
slower than other UI builders
NeXT UIB, SpecTCL, PowerBuilder...
widgets sets
easily connect to code via “callbacks”
“commercial” strength languages
3/11/2002
21
What’s the Difference?
Performance
prototyping tools produce slow programs
UI builders depend on underlying language
Widgets
prototyping tools may not have complete set
UI builders have widget set common to platform
Insides of application
UIBs do little, prototypers offer some support
Final product
generally use UI builders, though occasionally see
things created in a prototyping tool (multimedia)
3/11/2002
22
Widgets
Buttons (several types)
Scroll bars and sliders
Pulldown menus
3/11/2002
23
Widgets (cont.)
Palettes
Dialog boxes
Windows and many more...
3/11/2002
24
What is Missing?
Support for the “insides” of applications
3/11/2002
25
Administrivia
Team meetings with me today & tomorrow
break now to agree on time
30 minute slots
Monday, starting from 1-3 PM & 4-4:30 PM
Tuesday, starting from 12-12:30 PM & 3:30-4:30 PM
Wednesday, starting from 3:00-4:30 PM
Web sites must be up by next Friday with all of
your previous assignments
look at good examples from Fall 2000
E-finder, Red Ink, Mobile interior Designer
3/11/2002
26
Videos of Research Systems
Forms VBT
two-view approach
Lapidary
precursor to many of today’s UI builders
Visual Obliq
for building distributed applications
Morphic
directness & liveness
3/11/2002
27
Summary
UI tools good for testing more developed
UI ideas
Two styles of tools
“Prototyping” vs. UI builders
what is the difference?
Both types generally ignore the “insides”
of application -> this is research
3/11/2002
28
Next Time
Information Design
Schneiderman paper online
3/11/2002
29