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!
CS 275
Tidwell Course Notes
Page 16
Idioms
Scott 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.
CS 275
Tidwell Course Notes
Page 17
GUI Idioms
In recent years, numerous idioms have developed in
the field of computer application interfaces.
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 Phrasing
“Back” means
“Return to the
directory address
that the user was
viewing prior to the
current one”
Idiomatic Object
Slider means “Vertically adjust the text in the
associated list so more rows can be seen, either
above or below what is currently displayed”
CS 275
Tidwell Course Notes
Page 18
Nouns & Verbs
Software
applications
use a mixture
of objects that
the user can
examine and
actions that
the user can
take.
CS 275
What are the
objects and
actions for
this Mouse
Properties
application?
Tidwell Course Notes
Page 19
Organizing Objects
When 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.
CS 275
Tidwell Course Notes
Page 20
Organizing Actions
Whether 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.
CS 275
Tidwell Course Notes
Page 21
Organizing Categories
When 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.
CS 275
Tidwell Course Notes
Page 22
Organizing Tools
An 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.
CS 275
Tidwell Course Notes
Page 23
Paging, Tiling, & Tabbing
When 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.
CS 275
Tidwell Course Notes
Page 24
Pattern #13: Two-Panel Selector
Simultaneously displaying a list of items and details about the user’s
selection reduces strain to both the eyes and the memory
Example: 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.
CS 275
Tidwell Course Notes
Page 25
Pattern #14: Canvas Plus Palette
Applications 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.
CS 275
Tidwell Course Notes
Page 26
Pattern #15: One-Window Drilldown
When 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.
CS 275
Tidwell Course Notes
Page 27
Pattern #16: Alternative Views
Allow 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.
CS 275
Tidwell Course Notes
Page 28
Pattern #17: Wizard
Walking 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.
CS 275
Tidwell Course Notes
Page 29
Pattern #18: Extras on Demand
Hide unimportant, less frequently needed information, but make it
easily accessible
Example: Windows
Media Player has both a
skin mode and a full
mode, with additional
text and controls.
Example: In this “Course
Offerings” application, the
textbook information is
accessible via a checked
menu item, but could
easily be hidden.
CS 275
Tidwell Course Notes
Page 30
Pattern #19: Intriguing Branches
Providing 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.
CS 275
Tidwell Course Notes
Page 31
Pattern #20: Multi-Level Help
Providing 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.
CS 275
Tidwell Course Notes
Page 32