Академический Документы
Профессиональный Документы
Культура Документы
construction
Overview
Prototyping and construction
Conceptual design
Physical design
Tool support
User's model
User
Designer
System
System
image
Prototyping and
construction
What is a prototype?
Why prototype?
Different kinds of prototyping
low fidelity
high fidelity
Compromises in prototyping
vertical
horizontal
Construction
What is a prototype?
In other design fields a prototype is a
small-scale model:
a miniature car
a miniature building or town
What is a prototype?
In interaction design it can be (among other things):
a series of screen sketches
a storyboard, i.e. a cartoon-like series of scenes
a Powerpoint slide show
a video simulating the use of a system
a lump of wood (e.g. iphone)
a cardboard mock-up
a piece of software with limited functionality
written in the target language or in another
language
Why prototype?
Evaluation and feedback are central to interaction
design
Stakeholders can see, hold, interact with a
prototype more easily than a document or a drawing
Team members can communicate effectively
You can test out ideas for yourself
It encourages reflection: very important aspect of
design
Prototypes answer questions, and support
designers in choosing between alternatives
What to prototype?
Technical issues
Work flow, task design
Screen layouts and information
display
Difficult, controversial, critical areas
Low-fidelity Prototyping
Uses a medium which is unlike the final
medium, e.g. paper, cardboard
Is quick, cheap and easily changed
Examples:
sketches of screens, task sequences,
etc
Post-it notes
storyboards
Wizard-of-Oz
Storyboards
Often used with scenarios, bringing more
detail, and a chance to role play
It is a series of sketches showing how a
user might progress through a task using
the device
Used early in design
Sketching
Sketching is important to low-fidelity
prototyping
Dont be inhibited about drawing ability.
Practice simple symbols
Using index
cards
Index cards (3 X 5 inches)
Each card represents one screen
Often used in website development
Wizard-of-Oz prototyping
The user thinks they are interacting with a
computer, but a developer is responding to
output rather than the system.
Usually done early in design to understand
users expectations
What is wrong with this approach?
User
>Blurb blurb
>Do this
>Why?
High-fidelity prototyping
Uses materials that you would expect to be in
the final product.
Prototype looks more like the final system than a
low-fidelity version.
For a high-fidelity software prototype common
environments include Macromedia Director, Visual
Basic, and Smalltalk.
Danger that users think they have a full
system.see compromises
Compromises in prototyping
All prototypes involve compromises
For software-based prototyping maybe there is a
slow response? sketchy icons? limited
functionality?
Two common types of compromise
horizontal: provide a wide range of
functions, but with little detail
vertical: provide a lot of detail for only a
few functions
Compromises in prototypes mustnt be ignored.
Product needs engineering
Construction
Taking the prototypes (or learning from
them) and creating a whole
Quality must be attended to: usability
(of course), reliability, robustness,
maintainability, integrity, portability,
efficiency, etc
Product must be engineered
Evolutionary prototyping
Throw-away prototyping
Interface metaphors
Interface designed to be similar to a physical
entity but also has own properties
e.g. desktop metaphor, web portals
Can be based on activity, object or a combination
of both
Exploit users familiar knowledge, helping them to
understand the unfamiliar
Conjures up the essence of the unfamiliar activity,
enabling users to leverage of this to understand
more aspects of the unfamiliar functionality
Direct manipulation
Direct manipulation captures the
idea of direct manipulation of
the object of interest
(Shneiderman 1983: p. 57),
which means that objects of
interest are represented as
distinguishable objects in the
UI and are manipulated in a
direct fashion.
Characteristics:
Visibility of the object of
interest.
Rapid, reversible, incremental
actions.
Replacement of complex
command language syntax by
direct manipulation of the
object of interest.
Direct Manipulation
Advantages
Visually presents task concepts.
Easy to learn.
Errors can be avoided more easily.
Encourages exploration.
High subjective satisfaction.
Recognition memory (as opposed to cued or free recall memory)
Disadvantages
May be more difficult to program.
Not suitable for small graphic displays.
Spatial and visual representation is not always preferable.
Metaphors can be misleading since the the essence of metaphor is
understanding and experiencing one kind of thing in terms of
another (Lakoff and Johnson 1983: p. 5), which, by definition,
makes a metaphor different from what it represents or points to.
Compact notations may better suit expert users.
Dont Mode me in
UNIX vi is an example of evil modes
same actions have different meanings
depending on context
edit replaces your file with t
Icon design
Good icon design is difficult
Meaning of icons is cultural and context
sensitive
Some tips:
always draw on existing traditions or
standards
concrete objects or things are easier to
represent than actions
From clip art, what do these mean
to you?
Screen design
Two aspects:
How to split across screens
moving around within and between
screens
how much interaction per screen?
Individual screen design
white space: balance between enough
information/interaction and clarity
grouping items together: separation with
boxes? lines? colors?
Alan Cooper, Robert M. Reimann. About Face 2.0: The Essentials of Interaction Design.
Page 227
Balance
Equal weight of screen elements
Left to right, top to bottom
Balance
Unstable
Balance
Left column processed
- Right column noted
as same
Both columns need to
be understood by
visual processing
system
Symmetry
Replicate elements
left and right of the
center line
Symmetric
Asymmetric
Regularity
Create standard and consistent spacing on
horizontal and vertical alignment points
Regularity
Left column processed
- 2 right columns
noted as same
Location & size of
each object processed
Predictability
Put things in predictable locations on the
screen
Icon
File
View
Insert
Enter Keywords:
Kung Foo
Window
Grasshopper
OK
Help
Cancel
Predictable
OK
Icon
Kung Foo
File
Edit
Enter Keywords:
Grasshopper
View
Insert
Spontaneous
Predictability
User expects title &
menu bar on top of
screen
Visual scene needs to
be completely
processed - objects
not in expected places
Icon
Grasshopper
OK
Help
Cancel
OK
Icon
Kung Foo
File
Enter Keywords
Grasshopper
Edit View
Insert
Search for Movies
:
Old blind guy
Window
Help
Cancel
Sequentiality
Guide the eye through the task in an
obvious way
The Eye is attracted to:
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK
Cancel
Sequential
Membership Form Cancel Name:
Address:
Dues:
Zip:
OK
Pubs:
State:
City:
Total:
Random
Economy
Use as few styles, fonts, colors, display
techniques, dialog styles, etc., as possible
Name:
Address:
City:
State:
Zip:
Membership Form
Dues:
Pubs:
Total:
OK Cancel
Economical
Membership Form
Name:
Dues:
Pubs:
Total:
Address:
City:
State:
Zip:
OK
Busy
Cancel
Unity
Make items appear as a unified whole (for
visual coherence)
Use similar shapes, sizes, or colors
Leave less space between screen elements than
at the margin of the screen
Unity
Fragmentation
Proportion
Create groupings of data or text by using
aesthetically pleasing proportions
Pleasing Proportions
Square - 1:1
Simplicity
Minimize the number of aligned points
Use only a few columns to display screen
elements
Simplicity
Only four alignments
need to be processed
Membership Form
A total of nine
alignments need to be
processed
Name:
Address:
City:
State:
Zip:
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK
Cancel
Membership Form
Pubs:
Total:
OK
Cancel
Size::
Preserve Proportions
% of original height
% of original width
Simple
Size:
Uniformity:
Height:
Width:
Preserve Proportions
% of original
% of original
Complex
Groupings
Use visual arrangements to provide
functional groupings of screen elements
Align elements in a group
Evenly space elements in a group
Provide separation between groups
Simple Grouping
Similar elements aligned vertically
Vertical distance between similar objects
small
Boxed Grouping
Boxes add additional complexity to form
Spatial arrangement adequate
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK
Cancel
Background Grouping
Color adds additional visual complexity
Spatial arrangement adequate
Membership Form
Name:
Address:
City:
State:
Zip:
Dues:
Pubs:
Total:
OK
Cancel
Alan Cooper, Robert M. Reimann. About Face 2.0: The Essentials of Interaction Design. (Wiley, 2003). Page 230.
Screen-based Controls
Widgets
Functions of Widgets
Selecting options and commands
Entering and editing data values
Displaying data
Kinds of Widgets
Buttons
Text entry/read-only
Selection
Combination entry/selection
Specialized or custom
Presentation
Design issues
Labels and graphics
Layout and organization
Activation
OK
This :
Not this:
Activation
Provide keyboard equivalents
Control activation
Movement among controls within a screen
Buttons
Initiates an action
to activate a command (an alternate to menu
choice or command line entry).
to display another window or menu selection
Always visible
provides convenient access to frequently-used
commands
standard shapes and screen location for similar
commands.
Logical organization
Buttons
Types
Command buttons -- text as labels
Bar buttons (menu buttons)
-- graphics and/or text as labels
Radio buttons
Next
Next
Limited
Basic
Superior
Premium
Plan Choice
Plan Choice:
Limited
Limited
Basic
Basic
Superior
Superior
Premium
Premium
Labels
Shapes and Graphics
Location and layout
Organization
Activation
Buttons -- labels
Use standard button labels when
available
Provide meaningful action description
Use regular system font
unless for some special purposes
Buttons -- Organization
Maintain consistency in button locations
across screens and windows
provide adequate spacing between
buttons and other screen controls
Restrict the number of buttons on one
screen
Follow standards
Keep related buttons together
Buttons -- Activation
Consider different actions for
mouse enter/exit .. mouse down/up/
Properties
background/foreground colors
sizes/fonts/styles of text
alignments
Selection Controls
Present all options or choices on the
screen
Radio Buttons
Check Boxes
Palettes
List Boxes
Combo Boxes
Drop-Down/Pop-Up
Selection Design
Choice Description
Meaningful and clear description for the
value or effects of the choice
Use single line of text whenever possible
Organization
Meaningful order of choices
Consider adding a enclosure box
Activation
Provide visual feedback
Provide default values
Combo box
unlimited number
of choices
highlight the
selection
conserves screen
space
Extra step to
display all the
choices
Left Margin:
Attached Combo
Boxes
0.5
Font Style:
Regular
Regular
Italic
Bold
Bold Italic
Other Controls
Scroll Bars
Sliders
Toggle Switches
Tab pages
Contain tabbed divider pages
Presentation Controls
Provide additional information to screen
elements
Tooltips
a small popup window attached to an object
shows only when the mouse moves over the object
Progress Indicators
Message Design