1. ORGANIZING THE CONTENT Physical Structure
September 14th, 2009

2. General Models Multiple Windows One-Window Paging Tiled Panes
Good for complex data or parallel viewing
Can be confusing or annoying
One-Window Paging
Very Common Model (e.g. Web pages), conserves space, straight forward design
May not be suitable for complex applications
Tiled Panes
Good method to show a lot of data at once. Becoming more and more popular.
Required user to understand where their focus of attention should be

3. Patterns Two-Panel Selector Canvas Plus Palette One-Window Drilldown
Alternative Views
Wizard
Extras on Demand
Intriguing Branches
Multi-Level Help

4. Two-Panel Selector
Side by side panels. One displays list of objects. The second displays the content of the selected item in the first.
Typically used when presenting a list of objects (Mailbox, Music Library, Image Library, Database records)
Typically some type of detail in the list pane, full detail exists in the display pane.
The display needs to be large enough to accommodate two panels at once

5. Two-Panel Selector – Why
It is a learned paradigm, but it is very common and powerful
With two panels visible the user can shift focus back and forth efficiently
Advantages over other models:
Reduces physical effort – less eye movement and mouse clicks
Reduces visual cognitive load
Reduces the users memory burden

6. Two-Panel Selector Presentation
The selectable list panel should be on the top or left (Reverse for right to left languages)
The second panel should display content immediately on item selection – via mouse click or keyboard
The selected item should be visually obvious
List Organization
Linear, Tables
Hierarchies (by Category or Parent/Child)
Spatial Organizations

7. Canvas plus Palette
Iconic palette next to a blank canvas. The user uses the palette buttons to create items on the canvas
Used for graphical editors. Allows objects to create items and arrange them visually on the canvas (virtual space).
Why?
One of the most common UIs. Consider Paint.
Common set of graphics, metaphors and gestures, even across similar applications

8. Canvas plus Palette Presentation
Large Blank area as the canvas
Overall UI can still make use of title panels, etc.
Palette should always be side by side with the canvas
The Palette is typically a grid of iconic buttons
If the icons are complex or cryptic, short labels may be valuable by the icons
The Palette should be the top or left of the canvas.
The Palette can be divided into groups (Card Stack) with tabs or expander panels
Most Palette buttons should create and object

9. One Window Drilldown
Each screen in the application is shown in a single window. When the user selects and action or object, the entire window contents are replaced with a new page
Typically used when:
Space constraints exist
The application complexity surpasses the skill set of the target user

10. One Window Drilldown Presentation
Organize each screen to fit into logical panels or lists
Design obvious and consistent paths for the user to navigate through the windows
Consider how the user will go back up the chain
Forward/Back Buttons
Breadcrumbs
Sequence Maps

11. Alternative Views
All the user to choose from structurally different views of the user interface
Typically used when due to the nature of the application or data content, a single presentation model will not handle all usage scenarios
You may also use this when different target users will use different technologies

12. Alternative Views Presentation
Information may be added or taken away, but the primary content should remain largely unchanged
The switch for the view should be accessible from the main screen but doesn’t always need to prominent
Applications often remember the last used view, so it is the default when using it in the future

13. Wizard
Leads the user through a step by step view of the interface that requires a specific order of operations
Typically used when:
Designing UI for a task that is long or complicated. This may include branching.
Designing UI for an infrequent but meaningful operation
You are certain the UI Designer will know more than the user about how to get this task done
Don’t use when expert users will find annoying or rigid, especially if the content supports a creative process

14. Wizard Presentation
Break up the task into logical chunks or groups of operations.
The UI may be dynamic based on options and decisions the user has available (e.g. it may skip steps or take a different branch)
Steps in a single window with Back/Next buttons are the most common implementation
A two-Panel Selector may be more suitable to provide context
Single Window Patterns
Title Sections
Responsive Enabling
Responsive Disclosure

15. Extras on Demand
Show the most important content initially, let user access more detail on demand
Typically used when there is too much to show on one page and some of it is too detailed, advanced or unimportant
Often very good for usability and to reduce initial cognitive load. Users will find the interface more “friendly”.

16. Extras on Demand Presentation
Prune down the UI to it’s most commonly used and/or important items
Allow the users to access the remaining information through a button or link
More Options
Advanced Options
>> …
Allow the user to re-hide this information

17. Intriguing Branches
Place links to interesting content in unexpected places and label such that a curious user would be attracted
Commonly used in as inline links in webpages or application text
When used in applications consider using more descriptive language in these links. For example, a user may be drawn to “Learn more…” more often than a generic “help” label.