11

Week 8Week 8

Steps 13 and 14 Steps 13 and 14

The End of the 14 step programThe End of the 14 step program

22

Step 13Step 13

ORGANIZE AND LAYOUT ORGANIZE AND LAYOUT WINDOWS AND PAGESWINDOWS AND PAGES

Step 13 OverviewStep 13 Overview Organizing for meaningfulness and Organizing for meaningfulness and

efficiencyefficiency General GuidelinesGeneral Guidelines Organization GuidelinesOrganization Guidelines Control NavigationControl Navigation Window GuidelinesWindow Guidelines Web Page GuidelinesWeb Page Guidelines

33

Step 13Step 13

ORGANIZATION AND LAYOUTORGANIZATION AND LAYOUTGeneral GuidelinesGeneral Guidelines Amount of information:Amount of information:

Present the proper amount of information on each screenPresent the proper amount of information on each screen Too little is inefficientToo little is inefficient Too much is confusingToo much is confusing

Present all information necessary for performing an action or Present all information necessary for performing an action or making a decision on one screen, whenever possiblemaking a decision on one screen, whenever possible

Organization:Organization: Provide an ordering that:Provide an ordering that:

Is logical and sequentialIs logical and sequential Is rhythmic, guiding a person’s eye Is rhythmic, guiding a person’s eye

Encourages natural movement sequencesEncourages natural movement sequences Minimizes pointer and eye movement distancesMinimizes pointer and eye movement distances

44

Step 13Step 13

ORGANIZATION AND LAYOUTORGANIZATION AND LAYOUTGeneral Guidelines (Continued)General Guidelines (Continued) Control placement:Control placement:

Position the most important and frequently used controls at the top leftPosition the most important and frequently used controls at the top left Maintain a top-to-bottom, left-to-right flowMaintain a top-to-bottom, left-to-right flow If one control enables or affects another, the enabling control should If one control enables or affects another, the enabling control should

be above or to the left be above or to the left Place the command buttons that affect the entire window horizontally, Place the command buttons that affect the entire window horizontally,

and centered, at bottomand centered, at bottom Navigation:Navigation:

The flow of interaction should:The flow of interaction should: Require minimal cursor and pointer travel Require minimal cursor and pointer travel Minimize the number of times a person’s hand has to travel between KB Minimize the number of times a person’s hand has to travel between KB

and mouseand mouse Assist users in navigating through a screen by:Assist users in navigating through a screen by:

Aligning elementsAligning elements Grouping elementsGrouping elements Including line borders Including line borders

55

Step 13Step 13

ORGANIZATION AND LAYOUTORGANIZATION AND LAYOUTGeneral Guidelines (Continued)General Guidelines (Continued) Aesthetics:Aesthetics:

Provide a visually pleasing composition through:Provide a visually pleasing composition through: Adequate use of white spaceAdequate use of white space BalanceBalance GroupingsGroupings Alignment of elementsAlignment of elements

Visual clutter:Visual clutter: Avoid visual clutter by maintaining:Avoid visual clutter by maintaining:

Low screen density levelsLow screen density levels Distinctiveness of elementsDistinctiveness of elements

66

Step 13Step 13

ORGANIZATION AND LAYOUTORGANIZATION AND LAYOUTGeneral Guidelines (Continued)General Guidelines (Continued) Focus and emphasis:Focus and emphasis:

Provide visual emphasis to the most important Provide visual emphasis to the most important screen elements, its data or informationscreen elements, its data or information

Sequentially, direct attention to items that are:Sequentially, direct attention to items that are:1.1. CriticalCritical2.2. ImportantImportant3.3. SecondarySecondary4.4. Peripheral Peripheral

Consistency:Consistency: Provide consistencyProvide consistency

With a person’s experiences and cultural conventionsWith a person’s experiences and cultural conventions Internally within a systemInternally within a system Externally across systemsExternally across systems

77

Step 13Step 13

ORGANIZATION AND LAYOUTORGANIZATION AND LAYOUTCreating GroupingsCreating Groupings General:General:

Provide groupings of associated elementsProvide groupings of associated elements Elements of a radio button or check box Elements of a radio button or check box Two or more related fields or controlsTwo or more related fields or controls

Create groupings of 5 degrees of visual angleCreate groupings of 5 degrees of visual angle White space:White space:

Provide adequate separation of groupings through the liberal use of Provide adequate separation of groupings through the liberal use of white spacewhite space

Leave adequate space:Leave adequate space: Around groups of related controlsAround groups of related controls Between groupings and window bordersBetween groupings and window borders

The space between groupings should be greater than the space The space between groupings should be greater than the space between fields within a groupingbetween fields within a grouping

Headings:Headings: Provide grouping headings that meaningfully and concisely describe Provide grouping headings that meaningfully and concisely describe

the nature of the group the nature of the group

88

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESCreating Groupings (Continued)Creating Groupings (Continued) Borders:Borders:

Enhance groupings through incorporation of borders around:Enhance groupings through incorporation of borders around: Elements of a single controlElements of a single control Groups of related controls or fieldsGroups of related controls or fields

Individual control borders should be visually differentiable from Individual control borders should be visually differentiable from borders delineating groupingsborders delineating groupings Provide border consisting of a thin line around single controlsProvide border consisting of a thin line around single controls Provide border consisting of slightly thicker line around groups of Provide border consisting of slightly thicker line around groups of

fields or controlsfields or controls Do not place individual borders around Do not place individual borders around singlesingle::

Entry fieldsEntry fields List boxesList boxes Combination boxesCombination boxes Spin boxesSpin boxes SlidersSliders

Do not place borders around command buttonsDo not place borders around command buttons

99

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESControl BordersControl Borders Incorporate a thin single-line border Incorporate a thin single-line border

around the elements of a selection around the elements of a selection controlcontrol

Section BordersSection Borders Incorporate a thicker single-line border Incorporate a thicker single-line border

around groups of related entry or around groups of related entry or selection controlsselection controls

1010

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESDependent ControlsDependent Controls Position a conditional control, or controls:Position a conditional control, or controls:

To the right of the control to which it relatesTo the right of the control to which it relates Alternately, position it below the control to which it relatesAlternately, position it below the control to which it relates

Either:Either: Display these conditional controls in a subdued or grayed out Display these conditional controls in a subdued or grayed out

mannermanner When a control is relevant, return it to normal intensityWhen a control is relevant, return it to normal intensity

Do not display a conditional control until the information to Do not display a conditional control until the information to which it relates is setwhich it relates is set

Inscribe a filled-in arrow between the selected control Inscribe a filled-in arrow between the selected control and its dependent controls to visually relate them to and its dependent controls to visually relate them to each othereach other

1111

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESAligning Screen ElementsAligning Screen Elements Minimize alignment points on a windowMinimize alignment points on a window VerticallyVertically

ControlsControls Groupings and sectionsGroupings and sections

HorizontallyHorizontally ControlsControls Groupings and sectionsGroupings and sections

Balancing ElementsBalancing Elements General:General:

Create balance by:Create balance by: Equally distributing controls, spatially, within a windowEqually distributing controls, spatially, within a window Aligning borders whenever possibleAligning borders whenever possible

1212

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESControl NavigationControl Navigation Tab/arrow keys:Tab/arrow keys:

Use the tab key to move between operable window controls, in the Use the tab key to move between operable window controls, in the logical order of the controlslogical order of the controls Do not tab to field captions/labelsDo not tab to field captions/labels

Radio buttons:Radio buttons: Use arrow keys to move through radio buttons within a single controlUse arrow keys to move through radio buttons within a single control

Check boxes:Check boxes: Use the Tab key to move between, when they are independent Use the Tab key to move between, when they are independent

controlscontrols Within a border or group box, use arrow keys to move between the Within a border or group box, use arrow keys to move between the

check boxes since they appear as a logical groupcheck boxes since they appear as a logical group List boxes:List boxes:

Use arrow keys to navigate within list box choicesUse arrow keys to navigate within list box choices

1313

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESControl Navigation (Continued)Control Navigation (Continued) Command buttonsCommand buttons

For exiting or expanding/feature dialog command For exiting or expanding/feature dialog command buttons:buttons:

Tab to at the end of the screen control tabbing sequenceTab to at the end of the screen control tabbing sequence

For a command button with a contingent relationship to a For a command button with a contingent relationship to a control in the window body:control in the window body: Tab to it at the logical point in the tabbing sequence within the Tab to it at the logical point in the tabbing sequence within the

windowwindow

Keyboard equivalents:Keyboard equivalents: Use keyboard equivalents (mnemonics) for direct access to Use keyboard equivalents (mnemonics) for direct access to

each control, whenever possibleeach control, whenever possible Mnemonic designations must be unique within a windowMnemonic designations must be unique within a window

1414

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESWindow GuidelinesWindow Guidelines Organization:Organization:

Organize windows to support user tasksOrganize windows to support user tasks Present related information in a single window Present related information in a single window Support the most common tasks in the most efficient Support the most common tasks in the most efficient

sequence of stepssequence of steps Use:Use:

Primary windows to:Primary windows to: Begin an interaction and provide top- level context for dependent Begin an interaction and provide top- level context for dependent

windowswindows Perform a major interactionPerform a major interaction

Secondary windows to:Secondary windows to: Extend the interactionExtend the interaction Obtain or display supplemental information for primary windowObtain or display supplemental information for primary window

Dialog boxes for:Dialog boxes for: Infrequently needed informationInfrequently needed information ““Nice-to-know” informationNice-to-know” information

1515

Step 13Step 13

ORGANIZATION GUIDELINESORGANIZATION GUIDELINESWindow Guidelines (Continued)Window Guidelines (Continued) Number:Number:

Minimize the number of windows needed to Minimize the number of windows needed to accomplish an objectiveaccomplish an objective

Size:Size: Provide large enough windows to:Provide large enough windows to:

Present all relevant and expected information for the taskPresent all relevant and expected information for the task Not hide important informationNot hide important information Not cause crowding or visual confusionNot cause crowding or visual confusion Minimize the need for scrollingMinimize the need for scrolling Less than the full size of the entire screenLess than the full size of the entire screen

If a window is too large, determine:If a window is too large, determine: Is all the information needed?Is all the information needed? Is all the information related?Is all the information related?

1616

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESPage LayoutPage Layout General:General:

Provide a layout that is:Provide a layout that is: EfficientEfficient LogicalLogical ConsistentConsistent Self-explanatorySelf-explanatory ScannableScannable

Strike a proper balance between:Strike a proper balance between: Textual informationTextual information GraphicsGraphics LinksLinks

Layout Grid:Layout Grid: Create and use a layout gridCreate and use a layout grid

1717

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESLayout Grid:Layout Grid: Gather representative samples of the contents of site pagesGather representative samples of the contents of site pages

Navigation pages, content pages, simple pages, and complex pagesNavigation pages, content pages, simple pages, and complex pages

Experiment with various arrangements for all kinds of pagesExperiment with various arrangements for all kinds of pages Paint or sketch patterns of organization on sample pagesPaint or sketch patterns of organization on sample pages

Follow all layout guidelines and evolving page organizational Follow all layout guidelines and evolving page organizational standards in the sketching processstandards in the sketching process

Maintain as much consistency between pages types as possibleMaintain as much consistency between pages types as possible Establish a design grid (or grids) for the identified page typesEstablish a design grid (or grids) for the identified page types Plug in content (navigational components, text, and graphics) for Plug in content (navigational components, text, and graphics) for

each pageeach page

1818

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESPage Layout (Continued)Page Layout (Continued) Elements:Elements:

Include no more than seven distinct elements per pageInclude no more than seven distinct elements per page

Size:Size: Minimize page lengthMinimize page length

Restrict to 2 or 3 screens of informationRestrict to 2 or 3 screens of information Anticipate page breaksAnticipate page breaks Avoid horizontal scrollingAvoid horizontal scrolling

Organization:Organization: Place critical or important information at the very top so always Place critical or important information at the very top so always

viewable when page is openedviewable when page is opened Locate it within the top 4 inches of pageLocate it within the top 4 inches of page

Position remaining elements according to importancePosition remaining elements according to importance Reduce graphic complexity and textual density toward page bottom Reduce graphic complexity and textual density toward page bottom

1919

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESPage Layout (Continued)Page Layout (Continued) Formatting:Formatting:

Provide sufficient white spaceProvide sufficient white space A minimum of 30 percentA minimum of 30 percent

Keep the length of textual lines shortKeep the length of textual lines short A maximum of two alphabetsA maximum of two alphabets

Keep text and related graphics close to each otherKeep text and related graphics close to each other Provide adequate horizontal spacingProvide adequate horizontal spacing Use horizontal rules sparinglyUse horizontal rules sparingly

Other:Other: Use frames with cautionUse frames with caution

Consider for global elementsConsider for global elements

Change the organization and structure only when significant benefits Change the organization and structure only when significant benefits existexist

2020

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESHome PageHome Page Limit to one screenLimit to one screen Clearly identify the Web site’s content Clearly identify the Web site’s content

and purposeand purpose Elements to include:Elements to include:

Site overview or mapSite overview or map Navigation links to most (if not all) of the site Navigation links to most (if not all) of the site

or major sectionsor major sections Some useful contentSome useful content

2121

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESPossible Page Components (Table 13.1)Possible Page Components (Table 13.1)

Page TitlePage Title Clearly identify and describeClearly identify and describe Navigation BarNavigation Bar Allow global site navigationAllow global site navigation Table of ContentsTable of Contents List page contentsList page contents Site Identifier Site Identifier Identify page’s ownerIdentify page’s owner Search FacilitySearch Facility Provide a means for searchingProvide a means for searching Page’s Author or Page’s Author or Identify page’s author, or toIdentify page’s author, or to

Contact PersonContact Person indicate page’s contact personindicate page’s contact person Contact e-mailContact e-mail Solicit queries or commentsSolicit queries or comments Address Address Comment FacilityComment Facility Solicit queries or commentsSolicit queries or comments Other Contact Other Contact Identify other methods forIdentify other methods for DetailsDetails soliciting queries or commentssoliciting queries or comments Copyright InformationCopyright Information Identify page’s legal ownershipIdentify page’s legal ownership Date of Creation Date of Creation Indicate currency of informationIndicate currency of information

2222

Step 13Step 13

WEB PAGE GUIDELINESWEB PAGE GUIDELINESPossible Page Components (Table 13.1)Possible Page Components (Table 13.1)

Links to:Links to: Skip to Main Content Skip to Main Content Accessibility considerationAccessibility consideration Other major sections Other major sections Provide easy access to allProvide easy access to all

of siteof site major site contentmajor site content Home Page Home Page Return to home pageReturn to home page Index PageIndex Page Return to index Return to index Site Map or DirectorySite Map or Directory Return to site map or Return to site map or

directorydirectory Next PageNext Page Go to next page in a sequence Go to next page in a sequence

Previous PagePrevious Page Return to previousReturn to previous page page

2323

Step 14Step 14

TEST, TEST, AND RETESTTEST, TEST, AND RETESTStep 14 OverviewStep 14 Overview Identifying the purpose and scope of testingIdentifying the purpose and scope of testing Understanding the importance of testingUnderstanding the importance of testing Developing a prototypeDeveloping a prototype Developing the right kind of test planDeveloping the right kind of test plan Designing a test to yield relevant dataDesigning a test to yield relevant data Soliciting, selecting, and scheduling participantsSoliciting, selecting, and scheduling participants Providing the proper test facilityProviding the proper test facility Conducting tests and collecting dataConducting tests and collecting data Analyzing the data and generating recommendationsAnalyzing the data and generating recommendations Modifying the prototype as necessaryModifying the prototype as necessary Testing the system againTesting the system again Evaluating the working systemEvaluating the working system

2424

Step 14Step 14

PURPOSE OF USABILITY TESTINGPURPOSE OF USABILITY TESTING1) Establish communication bridge between developers and users1) Establish communication bridge between developers and users Developer learns about: Developer learns about:

User’s goals, perceptions, questions, and problems User’s goals, perceptions, questions, and problems

User exposed to:User exposed to: Capabilities of system early on, before design is solidifiedCapabilities of system early on, before design is solidified

2) Evaluate a product2) Evaluate a product Validate design decisionsValidate design decisions Identify potential problems early in design Identify potential problems early in design Enable comparison of alternate versions of a design element Enable comparison of alternate versions of a design element Assess how well user needs and expectations are metAssess how well user needs and expectations are met Prevent embarrassment resulting from things “slipping through Prevent embarrassment resulting from things “slipping through

the cracks”the cracks”

2525

Step 14Step 14

IMPORTANCE OF USABILITY IMPORTANCE OF USABILITY TESTINGTESTING

Developers and users possess different modelsDevelopers and users possess different models Developer’s intuitions are not always correctDeveloper’s intuitions are not always correct There is no average userThere is no average user It’s impossible to predict usability from appearanceIt’s impossible to predict usability from appearance Design standards and guidelines are not sufficientDesign standards and guidelines are not sufficient Informal feedback is inadequateInformal feedback is inadequate Products’ built-in pieces almost always have system-level Products’ built-in pieces almost always have system-level

inconsistenciesinconsistencies Problems found late more difficult and expensive to fixProblems found late more difficult and expensive to fix Problems fixed during development mean reduced support costs Problems fixed during development mean reduced support costs

laterlater Advantages over a competitive product can be achievedAdvantages over a competitive product can be achieved

2626

Step 14Step 14

PROTOTYPESPROTOTYPES Vehicles for:Vehicles for:

ExplorationExploration CommunicationCommunication EvaluationEvaluation

Purpose:Purpose: Obtain user input in designObtain user input in design Provide feedback to designersProvide feedback to designers

Roles:Roles: Communication not accuracy or thoroughnessCommunication not accuracy or thoroughness Enables design to be better visualizedEnables design to be better visualized Provides insights into how the software will look and work Provides insights into how the software will look and work Aids in defining tasks, their flow, the interface itself, and its Aids in defining tasks, their flow, the interface itself, and its

screensscreens

2727

Step 14Step 14

PROTOTYPESPROTOTYPESKinds:Kinds: Hand Sketches and ScenariosHand Sketches and Scenarios

Screen sketches created by handScreen sketches created by hand Interactive Paper PrototypesInteractive Paper Prototypes

Interface components constructed of common paper Interface components constructed of common paper technologies technologies

Programmed FacadesProgrammed Facades Examples of finished dialogs and screens for some Examples of finished dialogs and screens for some

important aspects of the systemimportant aspects of the system Prototype-Oriented LanguagesPrototype-Oriented Languages

An example of finished dialogs and screens for An example of finished dialogs and screens for some important aspects of the systemsome important aspects of the system

2828

Step 14Step 14

PROTOTYPESPROTOTYPESHand Sketches and ScenariosHand Sketches and Scenarios Description:Description:

Screen sketches created by handScreen sketches created by hand Focus is on design, not interface mechanicsFocus is on design, not interface mechanics A low-fidelity prototypeA low-fidelity prototype

Advantages:Advantages: Can be used very early in the development processCan be used very early in the development process Suited for use by entire design teamSuited for use by entire design team No large investment of time and costNo large investment of time and cost No programming skill neededNo programming skill needed Easily portableEasily portable Fast to modify and iterateFast to modify and iterate A rough approximation often yields more substantive critical commentsA rough approximation often yields more substantive critical comments Easier to comprehend than functional specificationsEasier to comprehend than functional specifications Can be used to define requirements Can be used to define requirements

2929

Step 14Step 14

PROTOTYPESPROTOTYPESHand Sketches and Scenarios (Continued)Hand Sketches and Scenarios (Continued) Disadvantages:Disadvantages:

Only a rough approximationOnly a rough approximation Limited in providing an understanding of navigation Limited in providing an understanding of navigation

and flowand flow A demonstration, not an exerciseA demonstration, not an exercise Driven by a facilitator, not the userDriven by a facilitator, not the user Limited usefulness for a usability testLimited usefulness for a usability test A poor detailed specification for writing the codeA poor detailed specification for writing the code Usually restricted to most common tasksUsually restricted to most common tasks

3030

Step 14Step 14

PROTOTYPESPROTOTYPESHAND SKETCH CREATION PROCESSHAND SKETCH CREATION PROCESS Sketch (storyboard) the screens while determining:Sketch (storyboard) the screens while determining:

The source of the screen’s informationThe source of the screen’s information The content and structure of individual screensThe content and structure of individual screens The overall order of screens and windowsThe overall order of screens and windows

Use an erasable mediumUse an erasable medium Sketch the screens needed to complete each taskSketch the screens needed to complete each task Try selected metaphors and change as necessaryTry selected metaphors and change as necessary First, storyboard common/critical/frequent scenariosFirst, storyboard common/critical/frequent scenarios

Follow from beginning to endFollow from beginning to end Then, go back and build in exceptionsThen, go back and build in exceptions

Don’t get too detailed; exact control positioning is not important, just Don’t get too detailed; exact control positioning is not important, just overall order and flowoverall order and flow

Storyboard as a team, including at least one userStoryboard as a team, including at least one user Only develop online prototypes when everyone agrees that a complete Only develop online prototypes when everyone agrees that a complete

set has been satisfactorily sketchedset has been satisfactorily sketched

3131

Step 14Step 14

PROTOTYPESPROTOTYPESInteractive Paper PrototypesInteractive Paper Prototypes Description:Description:

Interface components (menus, windows, and screens) constructed of common Interface components (menus, windows, and screens) constructed of common paper technologies (Post-It notes, transparencies)paper technologies (Post-It notes, transparencies)

Components are manually manipulated to reflect the dynamics of the softwareComponents are manually manipulated to reflect the dynamics of the software A low-fidelity prototypeA low-fidelity prototype

Advantages:Advantages: More illustrative of program dynamics than sketchesMore illustrative of program dynamics than sketches Can be used to demonstrate the interactionCan be used to demonstrate the interaction Otherwise, generally the same as for hand-drawn sketches and scenariosOtherwise, generally the same as for hand-drawn sketches and scenarios

Disadvantages:Disadvantages: Only a rough approximationOnly a rough approximation A demonstration, not an exerciseA demonstration, not an exercise Driven by a facilitator, not the userDriven by a facilitator, not the user Limited usefulness for usability testing Limited usefulness for usability testing

3232

Step 14Step 14

PROTOTYPESPROTOTYPESProgrammed FacadesProgrammed Facades Description:Description:

Examples of finished dialogs and screens for some important aspects of the Examples of finished dialogs and screens for some important aspects of the systemsystem

Created by prototyping toolsCreated by prototyping tools Medium-fidelity to high-fidelity prototypesMedium-fidelity to high-fidelity prototypes

Advantages:Advantages: Provide detailed specification for writing codeProvide detailed specification for writing code A vehicle for data collectionA vehicle for data collection

Disadvantages:Disadvantages: May solidify the design too soonMay solidify the design too soon May create the false expectation that the “real thing” is only a short time awayMay create the false expectation that the “real thing” is only a short time away More expensive to developMore expensive to develop More time-consuming to createMore time-consuming to create Not effective for requirements gatheringNot effective for requirements gathering Not all of the functions demonstrated may be usedNot all of the functions demonstrated may be used Not practical for investigating more than two or three approachesNot practical for investigating more than two or three approaches

3333

Step 14Step 14

PROTOTYPESPROTOTYPESPrototype-Oriented LanguagesPrototype-Oriented Languages Description:Description:

An example of finished dialogs and screens for some An example of finished dialogs and screens for some important aspects of the systemimportant aspects of the system

Created through programming languages that support the Created through programming languages that support the actual programming processactual programming process

A high-fidelity prototypeA high-fidelity prototype

Advantages:Advantages: May include the final codeMay include the final code Otherwise, generally the same as those of Otherwise, generally the same as those of programmed facadesprogrammed facades

Disadvantages:Disadvantages: Generally the same as for programmed facadesGenerally the same as for programmed facades

3434

Step 14Step 14

TESTSTESTS A tool to measure something, including:A tool to measure something, including:

Conformance with a requirementConformance with a requirement Conformance with guidelines for good Conformance with guidelines for good

designdesign Identification of design problemsIdentification of design problems Ease of system learningEase of system learning Retention of learning over timeRetention of learning over time Speed of task completionSpeed of task completion Speed of need fulfillmentSpeed of need fulfillment Error ratesError rates Subjective user satisfactionSubjective user satisfaction

3535

Step 14Step 14

KINDS OF TESTSKINDS OF TESTS Guidelines ReviewGuidelines Review

A review of the interface in terms of an organization’s standards and design A review of the interface in terms of an organization’s standards and design guidelinesguidelines

Heuristic EvaluationHeuristic Evaluation A detailed evaluation of a system by interface design specialists to identify A detailed evaluation of a system by interface design specialists to identify

problemsproblems

Cognitive WalkthroughsCognitive Walkthroughs Reviews of the interface in the context of tasks users performReviews of the interface in the context of tasks users perform

Think-Aloud EvaluationsThink-Aloud Evaluations Users perform specific tasks while thinking aloudUsers perform specific tasks while thinking aloud

Usability TestUsability Test An interface evaluation under real-world conditionsAn interface evaluation under real-world conditions

Classic ExperimentsClassic Experiments An objective comparison of two or more prototypes identical in all aspects An objective comparison of two or more prototypes identical in all aspects

except for one design issueexcept for one design issue

Focus GroupsFocus Groups A discussion with users about interface design prototypes or tasksA discussion with users about interface design prototypes or tasks

3636

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSGuidelines ReviewGuidelines Review Description:Description:

A review of the interface in terms of an organization’s A review of the interface in terms of an organization’s standards and design guidelinesstandards and design guidelines

Advantages:Advantages: Can be performed by developersCan be performed by developers Low costLow cost Can identify general and recurring problems Can identify general and recurring problems Particularly useful for identifying screen design and layout Particularly useful for identifying screen design and layout

problemsproblems

Disadvantages:Disadvantages: May miss severe conceptual, navigation, and operational May miss severe conceptual, navigation, and operational

problemsproblems

3737

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSHeuristic EvaluationHeuristic Evaluation Description:Description:

A detailed evaluation of a system by interface design specialists to A detailed evaluation of a system by interface design specialists to identify problemsidentify problems

Advantages:Advantages: Easy to doEasy to do Relatively low costRelatively low cost Does not waste user’s timeDoes not waste user’s time Can identify many problemsCan identify many problems

Disadvantages:Disadvantages: Evaluators must possess interface design expertiseEvaluators must possess interface design expertise Evaluators may not possess an adequate understanding of the tasks Evaluators may not possess an adequate understanding of the tasks

and user communitiesand user communities Difficult to identify system wide structural problemsDifficult to identify system wide structural problems

3838

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSHeuristic Evaluation (Continued)Heuristic Evaluation (Continued) Disadvantages (Continued):Disadvantages (Continued):

Difficult to uncover missing exits and interface elementsDifficult to uncover missing exits and interface elements Difficult to identify the most important problems among all Difficult to identify the most important problems among all

problems uncoveredproblems uncovered Does not provide any systematic way to generate solutions to Does not provide any systematic way to generate solutions to

the problems uncoveredthe problems uncovered

Guidelines:Guidelines: Use 3 to 5 expert evaluatorsUse 3 to 5 expert evaluators Choose knowledgeable people:Choose knowledgeable people:

Familiar with the project situationFamiliar with the project situation Possessing a long-term relationship with the organizationPossessing a long-term relationship with the organization

3939

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSHeuristic Evaluation ProcessHeuristic Evaluation Process Preparing the session:Preparing the session:

Select evaluatorsSelect evaluators Prepare or assemble:Prepare or assemble:

Project overviewProject overview Checklist of heuristicsChecklist of heuristics

Provide briefing to evaluators to:Provide briefing to evaluators to: Review the purpose of the evaluation sessionReview the purpose of the evaluation session Preview the evaluation processPreview the evaluation process Present the project overview and heuristicsPresent the project overview and heuristics Answer any evaluator questionsAnswer any evaluator questions Provide any special evaluator training that may be Provide any special evaluator training that may be

necessarynecessary

4040

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSHeuristic Evaluation Process (Continued)Heuristic Evaluation Process (Continued) Conducting the session:Conducting the session:

Have each evaluator review the system aloneHave each evaluator review the system alone The evaluator should:The evaluator should:

Establish own process or method of reviewEstablish own process or method of review Provide usage scenarios, if necessaryProvide usage scenarios, if necessary

Compare findings with usability principles listCompare findings with usability principles list Identify any other relevant problems / issuesIdentify any other relevant problems / issues Make at least two passes through the systemMake at least two passes through the system

Detected problems should be related to the specific heuristics they Detected problems should be related to the specific heuristics they violateviolate

Comments are recorded either:Comments are recorded either: By evaluatorBy evaluator By observerBy observer

The observer may answer questions and provide hintsThe observer may answer questions and provide hints

Restrict the length of the session to 2 hoursRestrict the length of the session to 2 hours

4141

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSHeuristic Evaluation Process (Continued)Heuristic Evaluation Process (Continued) After the session:After the session:

Hold a debriefing session including observers and design Hold a debriefing session including observers and design team members where:team members where: Each evaluator presents problems detected and the heuristic it Each evaluator presents problems detected and the heuristic it

violatedviolated A composite problem listing is assembledA composite problem listing is assembled Design suggestions for improving the problematic aspects of Design suggestions for improving the problematic aspects of

system are discussedsystem are discussed

After the debriefing session:After the debriefing session: Generate a composite list of violations as a ratings formGenerate a composite list of violations as a ratings form Request evaluators to assign severity ratings to each violationRequest evaluators to assign severity ratings to each violation Analyze results and establish a program to correct violations and Analyze results and establish a program to correct violations and

deficienciesdeficiencies

4242

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSResearch-Based Set of Heuristics (Table 14.2)Research-Based Set of Heuristics (Table 14.2)

1.  Automate unwanted workload1.  Automate unwanted workload Free cognitive resources for high-level tasksFree cognitive resources for high-level tasks Eliminate mental calculations, estimations, comparisons, and unnecessary Eliminate mental calculations, estimations, comparisons, and unnecessary

thinkingthinking

2.  Reduce uncertainty2.  Reduce uncertainty Display data in a manner that is clear and obviousDisplay data in a manner that is clear and obvious

3.  Fuse data3.  Fuse data Reduce cognitive load by bringing together lower-level data into a higher-level Reduce cognitive load by bringing together lower-level data into a higher-level

summationsummation

4.  Present new information with meaningful aids to interpretation4.  Present new information with meaningful aids to interpretation Use a familiar framework, making easier to absorbUse a familiar framework, making easier to absorb Use everyday terms, metaphors, and so onUse everyday terms, metaphors, and so on

5.  Use names that are conceptually related to functions5.  Use names that are conceptually related to functions Context-dependentContext-dependent Attempt to improve recall and recognitionAttempt to improve recall and recognition

4343

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSResearch-Based Set of Heuristics (Table 14.2)Research-Based Set of Heuristics (Table 14.2)

6. Group data in consistently meaningful ways to decrease search 6. Group data in consistently meaningful ways to decrease search timetime

7.  Limit data-driven tasks7.  Limit data-driven tasks Reduce the time needed to assimilate raw dataReduce the time needed to assimilate raw data Make appropriate use of color and graphicsMake appropriate use of color and graphics

8.  Include in the displays only that information needed by a user at a 8.  Include in the displays only that information needed by a user at a given timegiven time Allow users to remain focused on critical dataAllow users to remain focused on critical data Exclude extraneous information that is not relevant to current tasksExclude extraneous information that is not relevant to current tasks

9.  Provide multiple coding of data where appropriate9.  Provide multiple coding of data where appropriate

10. Practice judicious redundancy10. Practice judicious redundancy To resolve the conflict between heuristics 6 and 8To resolve the conflict between heuristics 6 and 8

From Gerhardt-Powals (1996)From Gerhardt-Powals (1996)

4444

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSPossible Web Page Heuristics (Table 14.3)Possible Web Page Heuristics (Table 14.3)

1.  Speak the user’s language1.  Speak the user’s language Use familiar words, phrases, and conceptsUse familiar words, phrases, and concepts Present information in a logical and natural orderPresent information in a logical and natural order

2.  Be consistent2.  Be consistent Indicate similar concepts through identical terminology and Indicate similar concepts through identical terminology and

graphicsgraphics Adhere to uniform conventions for layout, formatting, Adhere to uniform conventions for layout, formatting,

typefaces, labeling, and so ontypefaces, labeling, and so on

3.  Minimize the user’s memory load3.  Minimize the user’s memory load Take advantage of recognition rather than recallTake advantage of recognition rather than recall Do not force users to remember key information across Do not force users to remember key information across

documentsdocuments

4545

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSPossible Web Page Heuristics (Table 14.3)Possible Web Page Heuristics (Table 14.3)

4.  Build flexible and efficient systems4.  Build flexible and efficient systems Accommodate a range of user sophistication and diverse user goalsAccommodate a range of user sophistication and diverse user goals Provide instructions where usefulProvide instructions where useful Lay out screens so that frequently accessed information is easily Lay out screens so that frequently accessed information is easily

foundfound

5. 5.  Design aesthetic and minimalist systemsDesign aesthetic and minimalist systems Create visually pleasing displaysCreate visually pleasing displays Eliminate irrelevant or distracting informationEliminate irrelevant or distracting information

6.  Use chunking6.  Use chunking Write materials so that documents are short and contain only one Write materials so that documents are short and contain only one

topictopic Do not force the user to access multiple documents to complete a Do not force the user to access multiple documents to complete a

single thoughtsingle thought

4646

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSPossible Web Page Heuristics (Table 14.3)Possible Web Page Heuristics (Table 14.3)

7.  Provide progressive levels of detail7.  Provide progressive levels of detail Organize information hierarchically, with more general information Organize information hierarchically, with more general information

appearing before more specific appearing before more specific Encourage the user to delve as deeply as needed, but to stop Encourage the user to delve as deeply as needed, but to stop

whenever sufficient information has been obtainedwhenever sufficient information has been obtained

8.  Give navigational feedback8.  Give navigational feedback Facilitate jumping between related topicsFacilitate jumping between related topics Allow the user to determine current position in document structureAllow the user to determine current position in document structure Make it easy to return to an initial stateMake it easy to return to an initial state

9.  Don’t lie to the user9.  Don’t lie to the user Eliminate erroneous or misleading linksEliminate erroneous or misleading links Do not refer to missing informationDo not refer to missing information

From Levi and Conrad (1996)From Levi and Conrad (1996)

4747

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSCognitive WalkthroughsCognitive Walkthroughs Description:Description:

Reviews of the interface in the context of tasks users performReviews of the interface in the context of tasks users perform Advantages:Advantages:

Allow a clear evaluation of the task flow early in the design Allow a clear evaluation of the task flow early in the design processprocess

Do not require a functioning prototypeDo not require a functioning prototype Low costLow cost Can be used to evaluate alternate solutionsCan be used to evaluate alternate solutions Can be performed by developersCan be performed by developers More structured than a heuristic evaluationMore structured than a heuristic evaluation Useful for assessing “exploratory learning”Useful for assessing “exploratory learning”

Disadvantages:Disadvantages: Tedious to performTedious to perform May miss inconsistencies and general and recurring problemsMay miss inconsistencies and general and recurring problems

4848

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSCognitive Walkthroughs (Continued)Cognitive Walkthroughs (Continued) Guidelines:Guidelines:

Needed to conduct the walkthrough are:Needed to conduct the walkthrough are: General description of proposed system users and their relevant General description of proposed system users and their relevant

knowledge knowledge Specific description of one or more core or representative tasks to be Specific description of one or more core or representative tasks to be

performedperformed List of correct actions to complete each taskList of correct actions to complete each task

Review:Review: Several core or representative tasks across a range of functionsSeveral core or representative tasks across a range of functions Proposed tasks of particular concernProposed tasks of particular concern

Developers must be assigned roles of:Developers must be assigned roles of: Scribe to record results of the actionScribe to record results of the action Facilitator to keep the evaluation movingFacilitator to keep the evaluation moving

Start with simple tasksStart with simple tasks Don’t get bogged down demanding solutionsDon’t get bogged down demanding solutions Limit session to 60 to 90 minutesLimit session to 60 to 90 minutes

4949

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSThink-Aloud EvaluationsThink-Aloud Evaluations Description:Description:

Users perform specific tasks while thinking aloudUsers perform specific tasks while thinking aloud Comments are recorded and analyzedComments are recorded and analyzed

Advantages:Advantages: Utilizes actual representative tasksUtilizes actual representative tasks Provides insights into the user’s reasoningProvides insights into the user’s reasoning Disadvantages:Disadvantages: May be difficult to get users to think out loudMay be difficult to get users to think out loud

Guidelines:Guidelines: Develop:Develop:

- Several core or representative tasks- Several core or representative tasks - Tasks of particular concern- Tasks of particular concern

Limit session to 60 to 90 minutesLimit session to 60 to 90 minutes

5050

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSUsability TestUsability Test Description:Description:

An interface evaluation under real-world or controlled An interface evaluation under real-world or controlled conditionsconditions

Measures of performance are derived for specific tasksMeasures of performance are derived for specific tasks Problems are identifiedProblems are identified

Advantages:Advantages: Utilizes an actual work environmentUtilizes an actual work environment Identifies serious or recurring problemsIdentifies serious or recurring problems

Disadvantages:Disadvantages: High cost for establishing facilityHigh cost for establishing facility Requires test conductor with interface expertiseRequires test conductor with interface expertise Emphasizes first-time system usageEmphasizes first-time system usage Poorly suited for detecting inconsistency problemsPoorly suited for detecting inconsistency problems

5151

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSClassic ExperimentsClassic Experiments Description:Description:

An objective comparison of two or more prototypes identical in An objective comparison of two or more prototypes identical in all aspects except for one design issueall aspects except for one design issue

Advantages:Advantages: Objective measures of performance are obtainedObjective measures of performance are obtained Subjective measures of user satisfaction may be obtainedSubjective measures of user satisfaction may be obtained

Disadvantages:Disadvantages: Requires a rigorously controlled experiment to conduct the Requires a rigorously controlled experiment to conduct the

evaluationevaluation The experiment conductor must have expertise in setting up, The experiment conductor must have expertise in setting up,

running, and analyzing data collectedrunning, and analyzing data collected Requires creation of multiple prototypesRequires creation of multiple prototypes

5252

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSClassic Experiments (Continued)Classic Experiments (Continued) Guidelines:Guidelines:

State a clear and testable hypothesisState a clear and testable hypothesis Specify a small number of independent variables to be Specify a small number of independent variables to be

manipulatedmanipulated Carefully choose the measurementsCarefully choose the measurements Judiciously select study participants and carefully or randomly Judiciously select study participants and carefully or randomly

assign them to groupsassign them to groups Control for biasing factorsControl for biasing factors Collect the data in a controlled environmentCollect the data in a controlled environment Apply statistical methods to data analysisApply statistical methods to data analysis Resolve the problem that led to conducting the experimentResolve the problem that led to conducting the experiment

5353

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSFocus GroupsFocus Groups Description:Description:

A discussion with users about interface design prototypes or tasksA discussion with users about interface design prototypes or tasks

Advantages:Advantages: Useful for:Useful for:

Obtaining initial user thoughtsObtaining initial user thoughts Trying out ideasTrying out ideas

Easy to set up and runEasy to set up and run Low costLow cost

Disadvantages:Disadvantages: Requires experienced moderatorRequires experienced moderator Not useful for establishing:Not useful for establishing:

How people really workHow people really work What kinds of usability problems people haveWhat kinds of usability problems people have

5454

Step 14Step 14

KINDS OF TESTSKINDS OF TESTSFocus Groups (Continued)Focus Groups (Continued) Guidelines:Guidelines:

Restrict group size to 8 to 12Restrict group size to 8 to 12 Limit to 90 to 120 minutes in lengthLimit to 90 to 120 minutes in length Record session for later detailed analysisRecord session for later detailed analysis

5555

Step 14Step 14

DEVELOPING & CONDUCTING DEVELOPING & CONDUCTING THE TESTTHE TEST

The Test PlanThe Test Plan Define the scope of the testDefine the scope of the test Define the purpose of the testDefine the purpose of the test

Performance goalsPerformance goals What the test is intended to accomplishWhat the test is intended to accomplish

Define the test methodologyDefine the test methodology Type of test to be performedType of test to be performed Test limitationsTest limitations Developer participantsDeveloper participants

Identify and schedule the test facility or locationIdentify and schedule the test facility or location Develop scenarios to satisfy the test’s purposeDevelop scenarios to satisfy the test’s purpose Test ParticipantsTest Participants Assemble the proper people to participate Assemble the proper people to participate

5656

Step 14Step 14

DEVELOPING & CONDUCTING DEVELOPING & CONDUCTING THE TESTTHE TEST

Things to Test in Web Site Design (Table 14.4)Things to Test in Web Site Design (Table 14.4) All the browsers, servers, and monitors usedAll the browsers, servers, and monitors used Different dial-up speedsDifferent dial-up speeds Navigation designNavigation design Visual design styleVisual design style Content legibility and readabilityContent legibility and readability Backgrounds and colorBackgrounds and color Graphics and iconsGraphics and icons Page breaksPage breaks Page printingPage printing AccessibilityAccessibility

5757

Step 14Step 14

TEST CONDUCT & TEST CONDUCT & DATA COLLECTIONDATA COLLECTION

Usability Test GuidelinesUsability Test Guidelines Before starting the test:Before starting the test:

Explain that the objective is to test the software, not Explain that the objective is to test the software, not the participantsthe participants

Explain how test materials and records will be usedExplain how test materials and records will be used If a consent agreement is to be signed, explain all If a consent agreement is to be signed, explain all

information on itinformation on it If verbal protocols will be collected, let participants If verbal protocols will be collected, let participants

practice thinking aloudpractice thinking aloud Ensure that:Ensure that:

All participants’ questions are answered All participants’ questions are answered All participants are comfortable with all proceduresAll participants are comfortable with all procedures

5858

Step 14Step 14

CONDUCT / DATA COLLECTIONCONDUCT / DATA COLLECTIONUsability Test Guidelines (Continued)Usability Test Guidelines (Continued) During the test:During the test:

Minimize the number of people who will interact with the participantsMinimize the number of people who will interact with the participants If observers will be in the room, limit them to two or threeIf observers will be in the room, limit them to two or three Provide a checklist for recording:Provide a checklist for recording:

Times to perform tasksTimes to perform tasks Errors made in performing tasksErrors made in performing tasks Unexpected user actionsUnexpected user actions System features used/not usedSystem features used/not used Difficult/easy-to-use featuresDifficult/easy-to-use features System bugs or failuresSystem bugs or failures

Record techniques and search patterns that participants employ Record techniques and search patterns that participants employ when attempting to work through a difficultywhen attempting to work through a difficulty

If participants are thinking aloud, record assumptions and inferences If participants are thinking aloud, record assumptions and inferences being madebeing made

5959

Step 14Step 14

CONDUCT / DATA COLLECTIONCONDUCT / DATA COLLECTIONUsability Test Guidelines (Continued)Usability Test Guidelines (Continued) During the test (Continued):During the test (Continued):

Record the session with a tape recorder or video cameraRecord the session with a tape recorder or video camera Do not interrupt participants unless absolutely necessaryDo not interrupt participants unless absolutely necessary If participants need help, provide some responseIf participants need help, provide some response

Provide encouragement or hintsProvide encouragement or hints Give general hints before specific hintsGive general hints before specific hints Record the number of hints givenRecord the number of hints given

Watch carefully for signs of stress in participants:Watch carefully for signs of stress in participants: Sitting for long times doing nothingSitting for long times doing nothing Blaming themselves for problemsBlaming themselves for problems Flipping through documentation without really reading itFlipping through documentation without really reading it

Provide short breaks when neededProvide short breaks when needed Maintain a positive attitude, no matter what Maintain a positive attitude, no matter what

6060

Step 14Step 14

CONDUCT / DATA COLLECTIONCONDUCT / DATA COLLECTIONUsability Test Guidelines (Continued)Usability Test Guidelines (Continued) After the test:After the test:

Hold a final interview with participantsHold a final interview with participants Inform what has been learned in the testInform what has been learned in the test

Provide a follow-up questionnaire that asks Provide a follow-up questionnaire that asks participants to evaluate the product or tasks participants to evaluate the product or tasks performedperformed

If videotaping, use tapes only in proper waysIf videotaping, use tapes only in proper ways Respect participants’ privacyRespect participants’ privacy Get written permission to use tapesGet written permission to use tapes

6161

Step 14Step 14

ANALYZE, MODIFY, AND RETESTANALYZE, MODIFY, AND RETEST Compile the data from all test Compile the data from all test

participantsparticipants List the problems the participants hadList the problems the participants had Sort the problems by priority and Sort the problems by priority and

frequencyfrequency Develop solutions for the problemsDevelop solutions for the problems Modify the prototype as necessaryModify the prototype as necessary Test the system again, and againTest the system again, and again

6262

Step 14Step 14

EVALUATE THE WORKING SYSTEMEVALUATE THE WORKING SYSTEM Collect information on actual system Collect information on actual system

usage through:usage through: Interviews and focus group discussionsInterviews and focus group discussions SurveysSurveys Support lineSupport line Online suggestion box or trouble reportingOnline suggestion box or trouble reporting Online bulletin boardOnline bulletin board User newsletters and conferencesUser newsletters and conferences User performance data loggingUser performance data logging

Respond to users who provide feedbackRespond to users who provide feedback