chapter 6: showing complex data

Tidwell Course NotesCS 275

Chapter 6: Showing Complex DataWith limited real estate available on a

display screen, as well as the limited attention span of most users, an over-reliance on text can be fatal to a software interface.

One alternative is to present complicated data in a graphical manner.


Preattentive VariablesSome visual features stand out so much that the user notices them before actually being aware of them.

Which feature makes one button stand out more than the rest?


Data ExplorationWhen the displayed data is complex, the user needs the means by which details can be examined more closely.

Scrolling

Zooming

Opening & Closing Windows


Sorting The DataIn some cases, there might be a “natural” way to sort displayed data, but, in general, the display should be flexible enough to accommodate the user’s sorting preferences. Windows Explorer allows

the user to sort the contents of a directory by a variety of fields.


Searching The DataWhen the user is seeking particular data, the interface should facilitate the search, possibly even filtering the data to accommodate the user’s needs.

POPFile filters incoming e-mail and classifies it by a variety of user-specified

criteria.


Pattern #54: Overview Plus DetailDisplay a small view of the entire set of graphical data

along with a large view of specific zoomed details.

Example: Adobe Acrobat displays a miniature version of an entire document in a panel on the left side of its display, and the user may use the mouse to select the portion of the document to be shown in the main display pane.


Pattern #55: DatatipsUse large tooltip-like rollover windows to display data that might be useful to specific users, but not to users in general.

Example: When debugging a program in

Microsoft Developer Studio, the programmer

may use mouse operations to display the

current value of any active variable, including

structured variables containing several levels

of values.


Pattern #56: Dynamic QueriesWhen the overall data set is huge, provide the user with

means to quickly filter out unwanted data and focus on desired information.

Example: Dynamic HomeFinder provides

users with the ability to dynamically refine a

search for a new home based upon several

criteria (distance from office or school,

number of bedrooms, cost).


Pattern #57: Data BrushingIf multiple sets of related data (or multiple views of the same data) are provided, have selections from one set (or view) result in corresponding selections from the others.Example: In

this Excel-based

application, the polygonal

rotation may be produced by typing in a new

value or by dragging the

bar graph component.


Pattern #58: Local ZoomingWhen displaying a large amount of densely packed data, provide mouse operations that display an enlarged section of the data wherever the mouse is.

Example: yEd, a Java-based graph editor

provides a magnifying glass capability that allows users to see

extensive details about very localized areas

within the graph.


Pattern #59: Row StripingColoring alternate rows of a table with two distinct but similar shades can assist users in distinguishing long, multi-column rows.

Example: In this Student Grades example, row striping was used to facilitate reading the instructor’s and administrator’s data tables.


Pattern #60: Sortable TableWhen presenting the user with information in a table, provide mechanisms for sorting the rows by the table’s various columns.

Example: Microsoft Excel provides users

with the ability to sort spreadsheet data by means of

the different columns.


Pattern #61: Jump To ItemWhen the user wants to use the keyboard to select an item from a lengthy ordered list, jump right to the desired item as it’s typed in.

Example: Microsoft Visual

Studio’s help search screen

allows the user to type text and scroll to the first

indexed item with the desired

text.


Pattern #62: New-Item RowWhen the user is creating a table of information, insert a new row at the bottom of the table as a placeholder for the next item to be added.

Example: In Microsoft Visual Studio, when

creating a menu with the Designer, a placeholder for

a new menu item is automatically generated

at the bottom of the menu being created.


Pattern #63: Cascading ListsWhen displaying a hierarchy of items, display each level

of the hierarchy in a list next to the list of the parent node in the previous hierarchical level.

Example: Vendio’s on-line auction

listing application uses eBay’s

merchandise categorization

hierarchy to allow users to provide

specifications about what they’re

selling.


Pattern #64: Tree TableWhen displaying a multi-column table in which one column’s data is hierarchical in nature, use an indented outline format.

Example: The iTunes radio display lists a set of music genres and allows the user to see details about

individual radio streams in each

genre.


Pattern #65: Multi-Y GraphWhen multiple graphs share the same x-axis, place them atop each other rather than superimposing them.

Example: This Microsoft Visio chart contrasts

CS 275 program grades and exam

grades over the same time

interval.

84.6 81.1 80.2 79.0 76.5

100

76.7 81.9

VBPA1

VBPA2

VBPA3

IDPA1

IDPA2

IDPA3

Exam1

Exam2


Pattern #66: Small MultiplesBy simultaneously displaying a large number of small

images that are related to each other, their differences and similarities may be accentuated.

Example: Media Lab Europe developed the Last Clock,

which uses concentric rings to show snapshots of its

surroundings from the past few seconds, the past few minutes, and the past few

hours.


Pattern #67: TreemapWhen displaying hierarchical information on a large page, an overview of the hierarchy can be provided via spatial subdivisions proportional to the significance of its various branches.

Example: While most treemaps

are rectangular, Kai Wetzel has

developed a circular treemap

system for displaying disk

usage, color-coded to indicate

the age of the files.

chapter 6: showing complex data

Documents

tidwell course notespage

displayed data

data explorationwhen

particular data

packed data

unwanted data

complicated data

overall data set