Presentation on theme: "ORGANIZING THE CONTENT Physical Structure"— Presentation transcript:
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 viewingCan be confusing or annoyingOne-Window PagingVery Common Model (e.g. Web pages), conserves space, straight forward designMay not be suitable for complex applicationsTiled PanesGood 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 ViewsWizardExtras on DemandIntriguing BranchesMulti-Level Help
4 Two-Panel SelectorSide 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 powerfulWith two panels visible the user can shift focus back and forth efficientlyAdvantages over other models:Reduces physical effort – less eye movement and mouse clicksReduces visual cognitive loadReduces 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 keyboardThe selected item should be visually obviousList OrganizationLinear, TablesHierarchies (by Category or Parent/Child)Spatial Organizations
7 Canvas plus PaletteIconic palette next to a blank canvas. The user uses the palette buttons to create items on the canvasUsed 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 canvasOverall UI can still make use of title panels, etc.Palette should always be side by side with the canvasThe Palette is typically a grid of iconic buttonsIf the icons are complex or cryptic, short labels may be valuable by the iconsThe Palette should be the top or left of the canvas.The Palette can be divided into groups (Card Stack) with tabs or expander panelsMost Palette buttons should create and object
9 One Window DrilldownEach 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 pageTypically used when:Space constraints existThe application complexity surpasses the skill set of the target user
10 One Window Drilldown Presentation Organize each screen to fit into logical panels or listsDesign obvious and consistent paths for the user to navigate through the windowsConsider how the user will go back up the chainForward/Back ButtonsBreadcrumbsSequence Maps
11 Alternative ViewsAll the user to choose from structurally different views of the user interfaceTypically used when due to the nature of the application or data content, a single presentation model will not handle all usage scenariosYou 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 unchangedThe switch for the view should be accessible from the main screen but doesn’t always need to prominentApplications often remember the last used view, so it is the default when using it in the future
13 WizardLeads the user through a step by step view of the interface that requires a specific order of operationsTypically used when:Designing UI for a task that is long or complicated. This may include branching.Designing UI for an infrequent but meaningful operationYou are certain the UI Designer will know more than the user about how to get this task doneDon’t use when expert users will find annoying or rigid, especially if the content supports a creative process
14 Wizard PresentationBreak 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 implementationA two-Panel Selector may be more suitable to provide contextSingle Window PatternsTitle SectionsResponsive EnablingResponsive Disclosure
15 Extras on DemandShow the most important content initially, let user access more detail on demandTypically used when there is too much to show on one page and some of it is too detailed, advanced or unimportantOften 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 itemsAllow the users to access the remaining information through a button or linkMore OptionsAdvanced Options>>…Allow the user to re-hide this information
17 Intriguing BranchesPlace links to interesting content in unexpected places and label such that a curious user would be attractedCommonly used in as inline links in webpages or application textWhen 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.
Your consent to our cookies if you continue to use this website.