ORGANIZING THE CONTENT Physical Structure

1. ORGANIZING THE CONTENTPhysical Structure September 14th, 2009

2. General Models • Multiple Windows • 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.