today’s topics

Copyright 1999 all rights reserved

Today’s TopicsToday’s Topics

PrototypingPrototyping

Screen-Based Controls (cont.)Screen-Based Controls (cont.)

Choosing Appropriate ControlsChoosing Appropriate Controls



What is prototyping?What is prototyping?

Why do we prototype interface Why do we prototype interface designs?designs?

What are some problems in What are some problems in prototyping?prototyping?

?


Prototyping in GeneralPrototyping in General

A modeling techniqueA modeling technique– Used in developing many productsUsed in developing many products– An accurate presentation of all or An accurate presentation of all or

selected selected aspects of the item being developedaspects of the item being developed

BenefitsBenefits– Testing the designTesting the design– Time and cost savingsTime and cost savings


Prototyping for HCIPrototyping for HCI

HCI exists because of prototypingHCI exists because of prototyping Making the system visibleMaking the system visible

– Users get a more accurate picture of the Users get a more accurate picture of the interfaceinterface

– Designers resolve many specific design Designers resolve many specific design issuesissues

Making user thoughts and actions Making user thoughts and actions visiblevisible– Users can actually interact with the systemUsers can actually interact with the system– Designers can observeDesigners can observe


Possible Prototyping PitfallsPossible Prototyping Pitfalls Not detecting key problemsNot detecting key problems

– Model is incompleteModel is incomplete– Testing is limited or not realisticTesting is limited or not realistic

Adverse impact on usersAdverse impact on users– Users don’t understand the interfaceUsers don’t understand the interface– Prototype promises more than Prototype promises more than

the system deliversthe system delivers– Users expect rapid delivery after Users expect rapid delivery after

seeing the prototypeseeing the prototype


Tools for DesignTools for Design Representation Tools Representation Tools - Methods and - Methods and

software tools which allow user to software tools which allow user to represent the designrepresent the design

– passive techniquespassive techniques

Prototyping Tools Prototyping Tools - Software tools - Software tools which allow user to build a working which allow user to build a working version of the interface designversion of the interface design

– active techniquesactive techniques


Passive Design ToolsPassive Design Tools

Written descriptionsWritten descriptions TablesTables StoryboardingStoryboarding Video envisionmentVideo envisionment Demo programs Demo programs Wizard of OZ techniquesWizard of OZ techniques


Written DescriptionsWritten Descriptions

Natural language descriptions of Natural language descriptions of the designthe design– Need for detail and structureNeed for detail and structure– Great bedtime readingGreat bedtime reading

“The first screen will have a five menu options which The first screen will have a five menu options which will allow the user to select five different categories will allow the user to select five different categories of restaurants. The categories will be: French, Italian, of restaurants. The categories will be: French, Italian, Indian, Chinese and Ethiopian.”Indian, Chinese and Ethiopian.”


Written DescriptionsWritten Descriptions Descriptions can be interspersed Descriptions can be interspersed

with pictures showing the interfacewith pictures showing the interface

““The application will have one menu, called FILE. The application will have one menu, called FILE. The FILE menu will have three menu items called The FILE menu will have three menu items called OPEN, CLOSE and QUIT, as indicated in the OPEN, CLOSE and QUIT, as indicated in the following diagram.”following diagram.”


TablesTables

Represent design alternatives for Represent design alternatives for particular aspects of a designparticular aspects of a design

Provides an organizing tool when Provides an organizing tool when trying to represent all possible trying to represent all possible cases for a particular interactioncases for a particular interaction


Table ExampleTable Example

Table used to design mouse Table used to design mouse selectionsselections– Taken from early Xerox Star design workTaken from early Xerox Star design work

Some variables in mouse designSome variables in mouse design– A mouse can point to somethingA mouse can point to something– A mouse can have one or more buttonA mouse can have one or more button– A mouse can have one or more clickA mouse can have one or more click


Table Example - Notation Table Example - Notation

Point - Point - selects a point, i.e., a selects a point, i.e., a position between adjacent position between adjacent characters. Used for type in and characters. Used for type in and as a destination for Move and Copyas a destination for Move and Copy

Draw through -Draw through - mouse button held mouse button held down and selection drawn over, down and selection drawn over, mouse button released.mouse button released.


Table Example - NotationTable Example - Notation

C -C - selects a character selects a character

W -W - selects a word selects a word

S -S - selects a sentence selects a sentence

¶ -¶ - selects a whole paragraph selects a whole paragraph

D -D - selects a whole document selects a whole document


Table ExampleTable ExampleDesign 1 Design 2 Design 3 Design 4

Button 1 Point Point PointC

Draw through

PointC W S ¶ D

Draw throughButton 2 C

Draw throughC W S ¶ D

Draw through W S ¶ D

Draw throughAdjust

Button 3 W S ¶ DDraw through


Storyboarding Storyboarding

Sequence of screen displays Sequence of screen displays – Represent results of a sequence of Represent results of a sequence of

user actionsuser actions–

Can be videotaped or animated Can be videotaped or animated – Represent a running user interface.Represent a running user interface.


Example Storyboard Scenario for Example Storyboard Scenario for a Homebanking Systema Homebanking System



Possible User Actions:Possible User Actions:– User selects telephone with double User selects telephone with double

click on mouseclick on mouse– User selects checkbook with double User selects checkbook with double

click on mouse..click on mouse..


Storyboard Layout for Storyboard Layout for Checkbook SelectionCheckbook Selection

Initial Display User Action Next Display

SelectCheckbook


Video EnvisionmentsVideo Envisionments Static representations Static representations

of user interaction of user interaction created created – on computer screenon computer screen– on paperon paper

Sequence of these Sequence of these representations representations videotaped to videotaped to simulate a working simulate a working systemsystem


Video EnvisionmentsVideo Envisionments

technique shown to elicit more technique shown to elicit more accurate user attitudes toward accurate user attitudes toward completely new designscompletely new designs

hard parts of prototyping task can hard parts of prototyping task can be simulatedbe simulated


Wizard of OZ techniquesWizard of OZ techniques

Very rudimentary mockup Very rudimentary mockup of design createdof design created

Very fast human sits in Very fast human sits in next room observing user next room observing user actions actions – brings up screen display that brings up screen display that

represents user’s requestrepresents user’s request– or types envisioned computer or types envisioned computer

response to requestresponse to request


Wizard of OZ techniquesWizard of OZ techniques

Example: the automatic secretaryExample: the automatic secretary

– fast typist generates words, corrections, etc., fast typist generates words, corrections, etc., as user dictates memorandumas user dictates memorandum

Example: paper mockup done in HCI classExample: paper mockup done in HCI class– Student built display of CD covers for user to Student built display of CD covers for user to

select on cardboard stand surrounding select on cardboard stand surrounding computer screen. computer screen. As user selected CD cover, As user selected CD cover, name of selection was typed on screen!!!name of selection was typed on screen!!!


Demo ProgramsDemo Programs

Programs which allow Programs which allow the designer to create the designer to create screen mockupsscreen mockups– users are not allowed to users are not allowed to

type real input into the type real input into the program program

– any key they type will any key they type will typically bring on the typically bring on the next screen displaynext screen display


Advantages:Advantages:Passive Design ToolsPassive Design Tools

Bring to light Bring to light inconsistencies in the inconsistencies in the design of the interfacedesign of the interface

Bring to light large Bring to light large areas of the design areas of the design that were under-that were under-specifiedspecified

Quick inexpensive way Quick inexpensive way to test out design earlyto test out design early


Advantages:Advantages:Passive Design ToolsPassive Design Tools

Illustrate complexity of Illustrate complexity of an interface - if it is hard an interface - if it is hard to represent, it will be to represent, it will be hard for the userhard for the user

Many designs can be Many designs can be quickly tested with the quickly tested with the useruser


Disadvantages:Disadvantages:Passive Design ToolsPassive Design Tools

Limit creativity - limits of Limit creativity - limits of the tools limit how the the tools limit how the designer conceives the designer conceives the interfaceinterface

May give us erroneous May give us erroneous user information - user information - interface presentation too interface presentation too limitedlimited


Disadvantages: Passive Design Disadvantages: Passive Design ToolsTools

Can be as difficult to Can be as difficult to use as programming use as programming

None of the tools help None of the tools help us recognize user us recognize user problems - e.g., record problems - e.g., record user errorsuser errors


Active Design ToolsActive Design Tools

ToolkitsToolkits - tools for painting the - tools for painting the screen and laying out sets of screen screen and laying out sets of screen displaysdisplays

User Interface Management Systems User Interface Management Systems ((UIMSUIMS))– Manages the complete design of the Manages the complete design of the

interfaceinterface• Specifying user input and actions takenSpecifying user input and actions taken• Tying interface to applicationTying interface to application


ToolkitsToolkits

Toolkits are collections of Toolkits are collections of computer routines that helpcomputer routines that help the programmer quickly the programmer quickly define the user interfacedefine the user interface– windows with scroll barswindows with scroll bars– pull down menuspull down menus– dialogue boxesdialogue boxes– radio buttonsradio buttons


ToolkitsToolkits

Visual Basic contains toolkitsVisual Basic contains toolkits– The The “Tools“Tools” menu contains the set of ” menu contains the set of

Visual Basic tool that can be used to Visual Basic tool that can be used to quickly build a user interfacequickly build a user interface

– For example, the programmer can For example, the programmer can bring up the bring up the “Menu Editor”“Menu Editor” to design to design pull down and cascading menus for pull down and cascading menus for the user interfacethe user interface


Menu Editor in Menu Editor in Visual BasicVisual Basic


Powerpoint is a ToolkitPowerpoint is a Toolkit

Calling up the Calling up the Visual BasicVisual Basic

Editor Editor


User Interface Management User Interface Management SystemsSystems

User Interface Management Systems User Interface Management Systems are complete software applications that are complete software applications that allow a person to build a user interfaceallow a person to build a user interface– used for very complex interfaces, e.g., used for very complex interfaces, e.g.,

computer aided designcomputer aided design– interface often designed simply by pasting interface often designed simply by pasting

objects on the screen and defining the objects on the screen and defining the relationships between the objectsrelationships between the objects

– prototype turned into final productprototype turned into final product


Advantages: Active Design ToolsAdvantages: Active Design Tools

Real prototypes make it Real prototypes make it easier to study the easier to study the user’s reactions to the user’s reactions to the design design

Data collected from user Data collected from user studies is likely to be studies is likely to be much more trustworthymuch more trustworthy– real details of user real details of user

problems uncoverdproblems uncoverd


Advantages: Active Design ToolsAdvantages: Active Design Tools

Some of the tools have Some of the tools have intelligence that guides intelligence that guides the interface design, the interface design, e.g., points out a e.g., points out a screen that is too screen that is too complexcomplex

Tools often support the Tools often support the design of user help design of user help systems and tutorialssystems and tutorials


Disadvantages:Disadvantages:Active Design ToolsActive Design Tools

Take a large amount of Take a large amount of startup time - more startup time - more difficult to learn than a difficult to learn than a programming languageprogramming language

Can be expensive to Can be expensive to purchasepurchase

Limit interface design to Limit interface design to known conventionsknown conventions


Disadvantages:Disadvantages:Active Design ToolsActive Design Tools

Design compiles into Design compiles into very slow codevery slow code

Give the designer Give the designer featuritisfeaturitis - the - the disease of adding disease of adding useless features to useless features to the interfacethe interface


Use of Prototyping Systems in Use of Prototyping Systems in Human-Computer InteractionHuman-Computer Interaction

Prototypes used to Prototypes used to test the design on test the design on usersusers

Prototypes are quick Prototypes are quick ways to test out ways to test out different design ideasdifferent design ideas

Prototypes serve as a Prototypes serve as a precise interface precise interface design specificationdesign specification


Screen-Based ControlsScreen-Based Controls(continued)(continued)


PredefinedPredefinedScreen-Based ControlsScreen-Based Controls

Command buttonsCommand buttons Text entry/read onlyText entry/read only Selection controlsSelection controls

We saw these last weekWe saw these last week


Text EntryText Entry

Simple boxSimple box

List boxList box

Drop down list boxDrop down list box


Advanced Screen-Based ControlsAdvanced Screen-Based Controls

Combination entry/selectionCombination entry/selection

PresentationPresentation

Other ControlsOther Controls


Combination Entry/Selection Combination Entry/Selection ControlsControls

Spin boxSpin box Combination text Combination text

boxesboxes SliderSlider


Spin BoxSpin Box

One-line fieldOne-line field Up/down buttonsUp/down buttons User can:User can:

– scroll through listscroll through list– type into fieldtype into field

0.5”Left Margin:


Spin BoxSpin Box

Uses little room on screenUses little room on screen– about the same as a regular text about the same as a regular text

boxbox Good for single choices when:Good for single choices when:

– infrequently selected or changedinfrequently selected or changed– only a few choices availableonly a few choices available– order of choices is predictableorder of choices is predictable


Combination Text BoxesCombination Text Boxes

One-line text entry fieldOne-line text entry field Scrolling list box shows optionsScrolling list box shows options

– Attached immediately below entry Attached immediately below entry fieldfield

– User may select from list boxUser may select from list box– Choices are mutually exclusiveChoices are mutually exclusive– MayMay permit new values to be typed permit new values to be typed

in to entry fieldin to entry field List box List box maymay drop down or pop drop down or pop

upup


Combination Text BoxesCombination Text Boxes

Takes some screen spaceTakes some screen space– Always visibleAlways visible

Selection or typed entrySelection or typed entry Unlimited number of choicesUnlimited number of choices

– User may have to scroll to see User may have to scroll to see them allthem all

– May allow choices not on the listMay allow choices not on the list Good when frequent changes Good when frequent changes

or large number of choicesor large number of choices


SliderSlider

Values show on a scaleValues show on a scale User drags slider arm to selectUser drags slider arm to select

May have:May have:– Increment/decrement buttonsIncrement/decrement buttons– Text box for input and/or display of Text box for input and/or display of

valuevalue


SliderSlider

Good visual representation for Good visual representation for values in a limited range on a values in a limited range on a continuumcontinuum

Not as precise as textual inputNot as precise as textual input– Best for discrete valuesBest for discrete values– OK if high precision not neededOK if high precision not needed

Usually more complex than other Usually more complex than other controlscontrols


TabsTabs

Select sections of related informationSelect sections of related information Fixed-width areas, text or graphic Fixed-width areas, text or graphic

labellabel Should have only one rowShould have only one row Should appear to go deeper from L to Should appear to go deeper from L to

RR


Workbook/NotebookWorkbook/Notebook

A series of windows resembling a bound bookA series of windows resembling a bound book Contains tabbed divider pages Contains tabbed divider pages


Scroll BarScroll Bar Long rectangular areaLong rectangular area

– Scroll area with slider box (elevator)Scroll area with slider box (elevator)– Arrows (anchors) at endsArrows (anchors) at ends

User can more view information User can more view information than fits in display areathan fits in display area

Can be hard to useCan be hard to use


Presentation ControlsPresentation Controls Provide additional informationProvide additional information

– output onlyoutput only Tool tips Tool tips Static text fields--labelsStatic text fields--labels Group boxesGroup boxes

– Combined controls in one boxCombined controls in one box Progress indicatorsProgress indicators


Custom ControlsCustom Controls Toolkits permit building other controlsToolkits permit building other controls Can be confusing to usersCan be confusing to users

– More stuff to learnMore stuff to learn– May assume it’s a standard controlMay assume it’s a standard control

General rules:General rules:– Avoid whenever possible!Avoid whenever possible!– If you must use, test extensively first!If you must use, test extensively first!– Make them look distinctiveMake them look distinctive


Other Interaction StylesOther Interaction Styles

Three-dimensional spaceThree-dimensional space– Navigate with visualization aidsNavigate with visualization aids


Natural LanguageNatural Language Promising for:Promising for:

– Voice input/outputVoice input/output

– Users with moderate computer skillsUsers with moderate computer skills• Users do not need to learn command syntaxUsers do not need to learn command syntax

– Systems in special environmentsSystems in special environments

ProblemsProblems– Natural language understanding (by Natural language understanding (by

computers)computers)

– AmbiguityAmbiguity• may require clarification dialog frequentlymay require clarification dialog frequently


Choosing the Appropriate Choosing the Appropriate Screen-Based ControlsScreen-Based Controls


Interaction StylesInteraction Styles

General way a user General way a user communicates with a systemcommunicates with a system

Style affects usability of the Style affects usability of the interfaceinterface


Tullis & Kodimer Control StylesTullis & Kodimer Control Styles

Direct ManipulationDirect Manipulation– movementmovement

SelectionSelection– pickingpicking

EntryEntry– typingtyping


Picking a ControlPicking a Control

Decide which style is appropriateDecide which style is appropriate Several controls exist for each Several controls exist for each

stylestyle Usually one is the “best” choiceUsually one is the “best” choice

– Fastest to useFastest to use

– Most accurate resultsMost accurate results

– Preferred by usersPreferred by users


Choice ControlsChoice Controls

Radio buttons are fastest, most Radio buttons are fastest, most accurate, and most preferred for accurate, and most preferred for mutually exclusive choices (any mutually exclusive choices (any size set)size set)

Check boxes are fastest and most Check boxes are fastest and most preferred for nonexclusive choicespreferred for nonexclusive choices(any size set)(any size set)


Combination Selection/EntryCombination Selection/Entry

Radio buttons are generally faster Radio buttons are generally faster & more accurate than drop-down & more accurate than drop-down combo boxescombo boxes

Consider “other” choice with text Consider “other” choice with text entry fieldentry field


Selecting a Value in a RangeSelecting a Value in a Range

Best when all options always visibleBest when all options always visible Revealing a whole list a once is Revealing a whole list a once is

better than scrollingbetter than scrolling Of the controls tested:Of the controls tested:

– Spin button is most accurateSpin button is most accurate– Text entry field is fastest & most Text entry field is fastest & most

preferredpreferred– Slider is worst optionSlider is worst option


When to Permit Text EntryWhen to Permit Text Entry

If the data is of unlimited sizeIf the data is of unlimited size If the data is familiarIf the data is familiar If the data is easy to type correctlyIf the data is easy to type correctly If typing is faster than choice If typing is faster than choice

selectionselection If the user is an experienced typistIf the user is an experienced typist


Data FormData Form Resembles familiar paper formsResembles familiar paper forms Structure simplifies data entryStructure simplifies data entry ProblemsProblems

– Visual layout and organizationVisual layout and organization– Screen spaceScreen space

Last Name: __________ First Name: __________SSN: ___-__-____

Declaration of Academic Major


Data Form DesignData Form Design

Meaningful and consistent title and labelsMeaningful and consistent title and labels

Logical grouping and sequencing of fieldsLogical grouping and sequencing of fields

Visually appealing layout of formVisually appealing layout of form

Error correction and preventionError correction and prevention

Marking of optional and unavailable fieldsMarking of optional and unavailable fields

Means for user to signal completionMeans for user to signal completion


Dialogs as an AlternativeDialogs as an Alternative

Question-answer dialogQuestion-answer dialog– System poses a series of questionsSystem poses a series of questions– User responds with yes/no or User responds with yes/no or

multiple choicemultiple choice Query-based dialogQuery-based dialog

– Controlled syntax and terminologyControlled syntax and terminology– Frequently used in database systemsFrequently used in database systems


Summary of Control ChoicesSummary of Control ChoicesEntry task Best Control Space Constraints

Mutually exclusive Radio buttons Drop-down list box

Non-exclusive Check boxes Multiple-selectionlist box

Select or type avalue

Radio buttons with“other” text entry field

Drop-downcombination box

Setting valuewithin a range

Spin button Text entry field


Buttons vs. MenusButtons vs. MenusCommand Use

Standard, provided by tool set Commands provided by tool set

7+, can be grouped inhierarchy

Menu bar & pull-downs

<7, used frequently, affectentire window

Buttons in window

7+, used frequently, affectentire window

Buttons in button bar

Complex or used with othercontrols

Buttons in dialog box

Sometimes used frequently;sometimes used infrequently

Buttons in dialog box

Used frequently; have only twoconditions

Toggled menu item

today’s topics

Documents