chapter 3: getting around

Tidwell Course NotesCS 275

Chapter 3: Getting AroundIn complex software applications, it is critical to reveal where the user currently is, as well as how to get where the user wants to go.

The effort expended by the interface developer in helping the user to maintain his or her bearings and to easily navigate the software application will often determine the success of failure of the software product.


SignpostsProvide users with features that clearly indicate what they’re currently looking at and what they need to do to find what they’re looking for.

SIUE’s Student Information

System: Good signposts or bad?


Navigation HazardsDeveloping an interface that facilitates navigation might seem insurmountable in some cases.

Microsoft Word’s Options: Endless search through a

tabbed form.


Context SwitchingAs much as possible, avoid forcing the user to page to different forms, deal with pop-up dialogs, or cycle through various controls when performing a task.

Microsoft Visio: Does it

satisfy the 80/20 Rule?


Long, High, and Broad JumpsWeb applications are

particularly prone to forcing users to jump from context to context.

How many jumps from SIUE’s

home page to this CS 275

course’s syllabus?


Pattern #21: Clear Entry PointsProvide users (particularly first-time users) with

obvious controls leading to the most common tasks.

Example: A modified version

of the Meeting Scheduler

application clearly indicates how to

schedule and cancel meetings.


Pattern #22: Global NavigationProvide a common section of each page of an

application, combining controls to facilitate its navigation.Example:

HP’s Business

Inkjet Properties

form maintains

pretty much the same

format for the top,

bottom, and right sides of the different

tabbed pages.

These areas are where much of the navigation and bearings information reside..


Pattern #23: Hub and SpokeProvide a primary “hub” page as the only means for

accessing several secondary “spoke” pages.

Example: Microsoft’s Window

Picture and Fax Viewer displays the

user-selected window and

responds to certain commands by

generating secondary forms

that, when exited, return the user to the original form.


Pattern #24: PyramidProvide a main page that is connected to each of the secondary pages in a previous/next sequence of pages.

Example: In this modification of the

Periodic Table application, when

displaying an element’s secondary

form, the user can return to the periodic

table or to an adjacent element (i.e., one with an adjacent atomic

number).


Pattern #25: Modal PanelWhen proceeding with an application requires user input, prevent the user from leaving the current page until that input is provided. Example: When setting the player

controls for Microsoft’s 3D Pinball, the options must be specified (or

the default values selected) before the player may return to the game.

Example: When a Microsoft PowerPoint user issues an Insert

Chart command, this modal dialog box must be completed before the

user is allowed to return to other PowerPoint activities.


Pattern #26: Sequence MapWhen the path that users follow through an application is linear, provide them visual indicators of the current and remaining pages.

Example: Adobe Acrobat allows users

to see thumbnails marking their

progress as they traverse a document,

with the current page’s thumbnail

highlighted.


Pattern #27: BreadcrumbsWhen users tend to follow a tree-like path through an application, provide them simple mechanisms for jumping back up the hierarchy.

Example: Instructors can use the Moodle tree hierarchy to access

information about all of their current classes,

employing the links at the top of the page to jump back up the hierarchy.


Pattern #28: Annotated ScrollbarProvide annotation in a scrollbar so it provides specific

textual information in addition to its normal data about relative position.

Example: Holding down the mouse button and

hovering while scrolling in Microsoft PowerPoint

reveals the page number and title of the

slide at which the scrollbar would be

released.


Pattern #29: Color-Coded SectionsDistinguish between various sections of an interface via

color coding.

Example: HBO’s Web site color-codes the framing of its programs’ pages to reflect the relative “darkness”

of shows in question.


Pattern #30: Animated TransitionRather than jolting users with sudden changes on an

application’s display, ease them into the changes via animation.

Example: In this State Quarters

application, the “flipping” of the

coins via animation

enhanced the overall look and

feel of the interface.


Pattern #31: Escape HatchWhenever a page has limited navigation options, provide the user with a mechanism for returning to a page that is less of a “dead end”.

Example: In the nVidia desktop color

calibration screen shown here, the

user is afforded the choice of two

keyboard keys to escape back to the

Desktop Manager form.

chapter 3: getting around

Documents