Publications: 52 | Followers: 0


Publish on Category: Birds 0

September 14th, 2009
General Models
Multiple WindowsGood for complex data or parallel viewingCan be confusing or annoyingOne-Window PagingVery Common Model (e.g. Web pages), conserves space, straight forward designMaynot 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
Two-Panel SelectorCanvas Plus PaletteOne-Window DrilldownAlternative ViewsWizardExtras on DemandIntriguing BranchesMulti-Level Help
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
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 usersmemoryburden
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
Canvas plus Palette
Iconic 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
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
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 pageTypically used when:Space constraints existThe application complexity surpasses the skill set of the target user
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
Alternative Views
All 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
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
Leads 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
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 implementationA two-Panel Selector may be more suitable to provide contextSingle Window PatternsTitle SectionsResponsive EnablingResponsive Disclosure
Extras on Demand
Show 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”.
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
Intriguing Branches
Place links to interesting content in unexpected places and label such that a curious user would be attractedCommonly used in as inline links inwebpagesor 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.





Make amazing presentation for free