1 / 17

ORGANIZING THE CONTENT Physical Structure

ORGANIZING THE CONTENT Physical Structure. September 14 th , 2009. 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

whitby
Download Presentation

ORGANIZING THE CONTENT Physical Structure

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related