# prototyping

Document Sample

```					         Design
Sketching and Prototyping

1
Sketching and Prototypes

   Sketch – used to decide what to design
   “Prototype” – Simulation of interface
   Buxton differentiates:
   Getting the right design, vs.
Getting the design right

2
Facets of Design

3
Low Level vs. High Level
   Need to design at multiple levels
   High level: Overall metaphors, styles, approaches
   Low level: Detailed interactions and content
   High level:
   Conceptual Models, Mental Models, Mappings
   Designer’s vision of the system
   Overall metaphors and organization
   Often inspired by other designs, e.g.
   “Folders like Outlook” (vs. Gmail’s search, later tags)
   “Scrolling like iPhone”                                   4
5
Low Level Design
   How the specific Interactions work
   Widget Choice
   Pull-down
   Tear off
   Physical buttons

6
Norman’s Refrigerator

7
Hick’s Law (Reaction Time)
   William Edmund Hick
   British Psychologist 1952
   Ability of a human to quickly predict an
outcome based on the number of
simultaneous stimuli
   Software Example
   n options and constant b then time is
How much time to choose

9
How much time

10
11
Fitts’ Law
   Paul Fitts
   Psychologist at Ohio State University 1954
   Mathematical model used to predict how long it
takes a user to move from one point on a screen to
another
   Based on the distance between two points
   b stands for the inherent speed of the device, D is
the distance from the starting point to the center of
the target, W is the width of the target measured
along the axis of motion
Fitts’ Law (cont’d)
   Farther away an object is, the longer it takes to
acquire with a mouse
   In order to keep the average acquisition speed,
object needs to be larger
Sketches & Ideation
   Designers invent while sketching
first and then transfer it to paper
 Aristotle: “The things we have to
learn
before we do them, we learn by
doing them”
   Everyone sketches
 Whiteboards, paper
   Don’t have to be “artistic”
   Be creative!
14
Examples of Sketches

15
“Storyboards”
   Multiple sketches of a behavior = “storyboards”
   Comic strip of what happens
   Example: a photo browser

16
More Examples

17
Movie Ticket,
   3 different example designs

18
Movie Ticket, 2

19
Movie Ticket, 3

20
Sketches vs. Prototypes
   Different purposes:
   Sketch for ideation, refinement
   Prototypes for evaluation, usability
   Prototypes: more investment, more “weight”
   More difficult to change, but still much easier than real
system

21
Sketches vs. Prototypes
   Differences in intent and purpose

Sketch            Prototype
Suggest           Describe
Explore           Refine
Propose           Test
Provoke           Resolve
Tentative         Specific
Noncommittal      Depiction

22
Example of Full Prototype
   Prototype of interface for controlling the paths
of a robot

23
Resulting Prototype and
Final Design

24
Another Example
   washing machine

Do you want to use the default settings?
Water Temperature: Cold 10 ̊C
Water Level:                Low 1/3
Wash Mode:                  Delicate

25
Principles of UI design
   3-Click rule
   Visibility
   Accessibility
   Keyboard equivalents
   Undo action
   Average person can hold a maximum of 7 pieces of
independent information
   Can hold information from 3 to 20 seconds
Principles of UI design
   Focus on the user
   Standards Example – Phone number
   US uses 10 characters
   Europe can be up to 15 characters
   Color
   1 in 12 people are colorblind in some way
   Red / Green is most common
   Occurs mostly in males
   Icons as a means of communication
Push Buttons
   You click it, and something happens
   Choose the title text carefully
   Apple:
   “Button names should be verbs that describe the
action performed”
   Microsoft:
   “Aim for the shortest possible label; one word is
best.”
   “If possible, use label text that makes sense when
read out of context — for example, when a user
reads or hears only the label of the current control.”28
Form Layout and Formatting
   Prototype various alternatives and allow users
to test them to ensure good layout and ease of
use
   Design considerations
   Consistency of all forms in look and feel
   Clear headings, labels, and logos
   Distribution and order of data-entry fields and
   Judicious or careful use of font sizes, highlighting,
and colors
Examples of data-entry controls on an input form
Layout

31
Layout

Apple has a program called Interface Builder which
32
automatically helps you use the correct spacing
Layout

33
entering information
Name:   Alan Dix
   forms, dialogue boxes                                    Address: Lancaster
   presentation + data input


   similar layout issues
Name:    Alan Dix
   alignment - N.B. different label lengths

   logical layout



groupings
natural order for entering information
?
Name: Alan Dix

   top-bottom, left-right (depending on culture)
   set tab order for keyboard entry
The shopping cart page from the Rocky Mountain Outfitter Web site
Icons
   Icons get used for lots of different things
   Representing objects
   Files
   Tools
   Representing commands
   Open
   Undo
   ..often shortcuts to menu commands that have no icon

37
Microsoft Icon Composition

   Exceptions:
   Document icons
   Symbols such as warning
   Single objects
   Objects not recognizable at an angle
38
Apple Icon Composition

   Icon “genres”
   Application: media (paper) and tool (pen)
   Utility: straight perspective, subdued colors
   ..also document, plug-in, toolbar

39
Icons
   There are guidelines for these too
   Apple:
   Design and composition should indicate purpose
   Perspective should agree with real-life interactions
   Differentiate them from other UI elements
   Microsoft:
   Colors that complement the XP design
   Perspective is either at a certain angle, or straight-on
   Everyday objects should look modern

40
Produce Final-Looking Graphics
   Alternatively, could use Photoshop,
Illustrator, etc. and produce final graphics
   Designers want to show what real UI will look like
   Details of the “look”
   Web pages often use final graphics
behaviors
   Usually limited mostly
to screen transitions
Using PowerPoint to Prototype
   Add a shape, with a label   Go back

   Select “Place in this document”
   Create a slide for each mode of the
application
   Limitations: no text
entry, no scripting, no
data validation
Html editing
   Can use web editors to prototype any kind of
interface
   Tricky for detailed layout
   Can edit html using
   Microsoft Word (not recommended)
   Microsoft Expression Web (Blend)
   free for students: www.dreamspark.com
   Dreamweaver CS5 (Adobe) in Clusters
   Many others
modes
   lock to prevent accidental use …
   remove lock - ‘c’ + ‘yes’ to confirm
   frequent practiced action
   if lock forgotten
   in pocket ‘yes’ gets pressed
   goes to phone book
   in phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !
Digital watch – User Instructions
Time display              Stop watch

•   two main modes      SMTWTFS

A
SMTWTFS

STP

•   limited interface
- 3 buttons                              Depress
button A
A        A     for 2 seconds

•   button A            SMTWTFS                   SMTWTFS

SET   A                     ALM

changes mode                                            AM

Time setting             Alarm setting
Controls
   Standard window interface contain controls
   Maximize, Minimize, and Close buttons
   Scroll bars
   Record selection and record navigation arrows
   Designers should add controls to move
screens, close open windows, and to find and
search
   Browser forms also provide navigation and
support controls that applications should
support
a) The Main Menu form                b) The Order Summary form

Prototype forms for an order-centered approach to the dialog
International UIs
   International graphical interfaces
   Resemblance icons
   Reference icons
   Arbitrary icons
   Non-iconic graphics can also be problematic
Font Substitution?
   International usability engineering
   Follow same usability engineering process for each
interface
   Avoid complicated language, idiom, or local culture
references
   Simply change language?
   use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
International UIs
   Guidelines for internationalisation
   Time and measurement vary
   Dates are problematic (e.g., D/M/Y, M/D/Y, Y.M.D, Y-M-D, etc)
 Perhaps force month to be written (e.g., 17-Sep-01)
   Metric or imperial units (e.g., °C or °F)
   Use the appropriate character set
   Difficulties translating between lowercase and uppercase (Ǽ & ǽ)
   Sorting order can be different (e.g., ß)
   Numbers and currency vary
   Separators differ (e.g., \$10,000.00 and 10.000,00 kr)
   Separate interface resources from system’s functionality
   Allow users to specify locale for their interface (e.g., Fiji or
NZ)
Gestural Interfaces
Gesture recognition is a topic in computer
science and language technology with the goal
of interpreting human gestures via
mathematical algorithms.
Gestures can originate from any bodily motion
or state but commonly originate from the face
or hand.
Many approaches have been made using
cameras and computer vision algorithms to
interpret sign language.
Gesture recognition
We are already living the ‘future’ that was ‘fiction’
just a short while back! Here is our chance to live
through what is shaping to be a new era of
interactive computing.

51
SIGN LANGUAGE

52
Gestures
Hitch hiking (thumb up,
hand moving sideways)
Gestures
Pointing to real and abstract
objects and concepts
(index, hand)
Gestures

Finger Counting

Thumb often used for
Gestures-8
I beg of you …
I hope so …
Gestures

Let’s hope its true
Gestures
Gestures
Gestures

Terminate / cut
Gestures

Love (Am Sign Language)
Gestures

Whoa, stop, …
End
Gestures

Hand Signals
1
10   100

Fall 2010
Gestures

call               out
put

Hand Signals

september         june
Gestures
   Conducting an orchestra (variety of both
gestures with arms and body)
   Traffic control of cars and airplanes (hands
flat pointing or moving)
   Shaping of imagined objects (hands tracing
out curves and shapes)
   Martial arts, fighting (variety of movements of
arms and body)
Pictograms
Pictograms
Example
   You are designing instruction system for
patients in pharmacy of Alexandria hospital-
who do not speak Arabic nor English- on how
to take their prescribed medication correctly.
   State also input/output devices

68
quiz
   There are two possible methods by which a
user can start numbering the pages of a
Microsoft Word document from page zero
rather than page one. By insert –page
number and view --- header & footer ---
format page number
   How could Fitts’ law be used to predict the
time users take to carry out these

69
70

```
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
 views: 14 posted: 3/28/2012 language: English pages: 70
Description: human computer interface lecture