/
CS 275 Tidwell Course Notes CS 275 Tidwell Course Notes

CS 275 Tidwell Course Notes - PowerPoint Presentation

trish-goza
trish-goza . @trish-goza
Follow
376 views
Uploaded On 2018-03-12

CS 275 Tidwell Course Notes - PPT Presentation

Page 33 Chapter 3 Getting Around In 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 ID: 648299

275 page notes tidwell page 275 tidwell notes user pattern provide users application pages navigation form controls secondary return

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "CS 275 Tidwell Course Notes" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

CS 275

Tidwell Course Notes

Page 33

Chapter 3: Getting Around

In 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.Slide2

CS 275

Tidwell Course Notes

Page 34

Signposts

Provide 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?Slide3

CS 275

Tidwell Course Notes

Page 35

Navigation Hazards

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

Microsoft Word’s Options: Endless search through a tabbed form.Slide4

CS 275

Tidwell Course Notes

Page 36

Context Switching

As 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?Slide5

CS 275

Tidwell Course Notes

Page 37

Long, High, and Broad Jumps

Web applications are particularly prone to forcing users to jump from context to context.

How many jumps from SIUE’s home page to

a former CS

275

course’s syllabus?Slide6

CS 275

Tidwell Course Notes

Page 38

Pattern #21: Clear Entry Points

Provide users (particularly first-time users) with obvious controls leading to the most common tasks.

Example:

This

Meeting

Scheduler application clearly indicates how to schedule and cancel meetings.Slide7

CS 275

Tidwell Course Notes

Page 39

Pattern #22: Global Navigation

Provide 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..Slide8

CS 275

Tidwell Course Notes

Page 40

Pattern #23: Hub and Spoke

Provide 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.Slide9

CS 275

Tidwell Course Notes

Page 41

Pattern #24: Pyramid

Provide 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).Slide10

CS 275

Tidwell Course Notes

Page 42

Pattern #25: Modal Panel

When 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.Slide11

CS 275

Tidwell Course Notes

Page 43

Pattern #26: Sequence Map

When 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. Slide12

Pattern #27: Breadcrumbs

CS 275

Tidwell Course Notes

Page 44

Pattern #27: Breadcrumbs

When 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. Slide13

CS 275

Tidwell Course Notes

Page 45

Pattern #28: Annotated Scrollbar

Provide 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.Slide14

CS 275

Tidwell Course Notes

Page 46

Pattern #29: Color-Coded Sections

Distinguish 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.Slide15

CS 275

Tidwell Course Notes

Page 47

Pattern #30: Animated Transition

Rather 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.Slide16

CS 275

Tidwell Course Notes

Page 48

Pattern #31: Escape Hatch

Whenever 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.