Chapter 2: Organizing The Content

Tidwell Course NotesCS 275 Page 1

Chapter 2: Organizing The Content

There are two primary ways to organize the planned content of your software application’s design:(1) Organize in the abstract by

considering how the content of the actual application should be arranged.(2) Organize according to how the

application’s information might be effectively presented to the user. These approaches

are not mutually exclusive!


IdiomsScott McCloud’s 1993 book “Understanding Comics” explores the concept of idioms, interface components with meanings that have become familiar enough to users to no longer need elaborate explanations.


GUI IdiomsIn recent years, numerous idioms have developed in the field of computer application interfaces.

Idiomatic Phrasing

“Back” means “Return to the

directory address that the

user was viewing prior to the current one”

Idiomatic Action

Drag-And-Drop means “Move the

selected file or folder and

its contents to the

designated folder in which it is dropped”

Idiomatic ObjectSlider means “Vertically adjust the text in the associated list so more rows can be seen, either above or below what is currently displayed”


Nouns & VerbsSoftware applications use a mixture of objects that the user can examine and actions that the user can take.

What are the objects

and actions for this Mouse Properties application

?


Organizing ObjectsWhen presenting objects to a user in an application, they are frequently organized into lists or tables that facilitate finding particular items wanted by the user.


Organizing ActionsWhether presenting the user with action alternatives in a list, a grid, or a menu, it’s important not to overwhelm the user with too many options or too much wording.


Organizing CategoriesWhen presenting an extensive amount of material to users, an application might categorize the data into some kind of order or hierarchy that facilitates finding what one wants.


Organizing ToolsAn application that provides the user with access to various tools or utilities should avoid confusing the user regarding what the tool is or what it does.


Paging, Tiling, & TabbingWhen there’s too much information in an application to fit inside a single window, several options exist...Using multiple windows can be very

confusing to the user; having multiple windows visible simultaneously should be particularly avoided.

Tiled panes consume screen real estate and can overwhelm beginners.

Tabbed forms inhibit openness in the interface, forcing the user to search

for desired information.


Pattern #13: Two-Panel SelectorSimultaneously displaying a list of items and details

about the user’s selection reduces strain to both the eyes and the memoryExample: In this

“Course Offerings”

application, selections from

the list of courses on the

left result in the display of

information about the

selected course on the right.

Example: In Windows Explorer, selections from the list of folders on the left result in the display of the files contained in the selected folder on the right.

Execute


Pattern #14: Canvas Plus PaletteApplications involving design or creation can be made

easier to learn by using a “palette” of icons to modify a “canvas”

Example: Microsoft Visio affords users

the ability to design structures in the primary canvas

pane, using standard

components from the icon palette on

the left.


Pattern #15: One-Window DrilldownWhen space is limited, the same interface region

might be used for consecutive displays.

Example: TiVo uses a simple menu-

oriented interface driven by a remote

control to allow users to proceed to

the desired information or

functionality.


Pattern #16: Alternative ViewsAllow users to modify the actual contents of the

application display, according to their personal tastes

Example: Windows

Explorer allows users to display

folder contents in a variety of

ways: thumbnails,

filmstrip, icons, details.


Pattern #17: WizardWalking the user through the application one step at a time can facilitate providing the proper responses for the application

Example: To ensure that a compressed folder is correctly decompressed, named, and stored, an extraction wizard leads the user through a step-by-step process.


Pattern #18: Extras on DemandHide unimportant, less frequently needed information,

but make it easily accessible

Example: In the “Course Offerings”

application, the textbook

information is accessible via a checked menu item, but could

easily be hidden.

Example: Windows Media Player has both a skin mode and a full mode,

with additional text and controls.

Execute


Pattern #19: Intriguing BranchesProviding mechanisms for users to access additional

information, but without forcing them to do so, can make an interface more enjoyable

Example: Adobe Acrobat provides ToolTips to clarify

the meaning of the command icons, as

well as a “How To...?” menu

through which the user can obtain

additional information.


Pattern #20: Multi-Level HelpProviding multiple ways of accessing help information

facilitates the use of an application

Example: Microsoft Visual Studio provides VB2008 developers with numerous prompts and help screens for getting clarification on available methods, events, properties, and fields.

Documents

Chapter 2: Organizing The Content