Interaction Design ISB36403 PDF

Interaction Design ISB36403 Design for Desktop, Mobile and Web PART #1: Design for Desktop  Outline Part 1: Designing for the Desktop  Anatomy of a Desktop App  Windows on the Desktop  Menus  Toolbars, Palettes, and Side...

Interaction Design ISB36403 Design for Desktop, Mobile and Web PART #1: Design for Desktop  Outline Part 1: Designing for the Desktop  Anatomy of a Desktop App  Windows on the Desktop  Menus  Toolbars, Palettes, and Sidebars  Pointing, Selection, and Direct Manipulation Part 2: Designing for the Web  Page-Based Interactions  The Mobile Web  The Future Part 3: Designing for Mobile and Other Devices  Anatomy of a Mobile App  Mobile Navigation, Content, and Control Idioms  Multi-Touch Gestures  Inter-App Integration  Other Devices  Introduction Most modern desktop interfaces derive their appearance from the Xerox Alto (Documents could be composed, edited, and viewed in WYSIWYG form). Macintosh has had enormous influence on our technology, design, and culture. This lecture focuses on design considerations for modern desktop GUIs of all flavors. It focuses on the behaviors of windows and their structural and navigational components, as well as pointer-driven selection and manipulation of onscreen  Anatomy of a Desktop App Primary and secondary windows  Primarywindow  Secondary windows Primary window structure  Menus and toolbars  Index panes  Tool palettes  Sidebars  Primary and Secondary Window: the Windows movable, resizable container within which both content and functional controls for the app primarily reside. When structuring an application, think of it as having one primary window and one or more secondary  Primary and Secondary Windows Primary window: contains the application’s content, typically expressed in the form of documents that can be created, edited, and shared.  Contains other sorts of objects with properties that can be manipulated and configured  Often divided into panes that contain content  Designed to assume sovereign posture, filling most of the screen and supporting full-screen modes.  Primary and Secondary Windows Secondary windows support the primary window  Provide access to less frequently used properties and functions, typically in the form of dialogs.  If the application allows panes located in the primary window to be detached and manipulated separately, these floating panels or palettes also take on a role as secondary windows.  Primary window structure Subdivided into multiple functional areas: A content or work area  A menu bar  Multiple toolbars, panels, or palettes  Menus and toolbars Menus and toolbars are collections of related actions the user can instruct the application to perform. Menus are accessed by clicking on words arranged near the top of the screen, and are often subject to standardization rules from the operating system. Toolbars are more specific to the application, often summoned or dismissed through menus, and present their functions as a collection of visual icons. Traditional toolbars appear directly below the Menus and toolbars  Content panes Form the primary work area within most desktop applications. E.g.:  An editable view of a form or document  A complex control panel An application typically has one primary content area. Some applications may have multiple content panes. (e.g. CAD).  Index panes Provide navigation and access to documents or objects that ultimately appear in the content view(s) for editing or configuration. Selecting an object may display it in the content area (such as in email software) Objects might be dragged and added to a content pane, leaving the existing contents intact (e.g. authoring tools)  Tool palettes Allow the user to rapidly switch between the application’s modes of operation by selecting one tool from a set of tools. Each tool assigns a different set of operations to actions, such as clicking or dragging. Hinted at by a change in the cursor’s visual design to match the semantics of the selected mode or tool. Typically are vertically oriented and are positioned on the left edge of the primary window.  Sidebars Allow object or document properties to be manipulated without the need to resort to modal or modeless dialogs. This streamlines the workflow in complex authoring applications. Typically positioned on either the right or left side of the primary window. They can be in both places, bottom of the window, or in place of  Windows on the Desktop Overlapping windows Tiled windows Virtual desktop spaces Full-screen applications Multi-paned applications Window states Windows and documents: mDI vs sDI Making use of windows  Unnecessary rooms  Necessary rooms  Windows on the Desktop The rectangular theme of modern GUIs is so dominating and universal that it is often seen as vital to the success of visual interaction. Reasons:  Rectangular panes are a good match for display technology  Most data output used by humans is in a rectangular format  Rectangular graphs and diagrams are the easiest for us to make sense of.  Rectangles are also quite space-efficient.  Overlapping windows Windows could be dragged over one another (obscuring windows underneath), stacked, and independently resized. Transfer control between concurrently running applications better than typing commands.  Good concept, but its execution is somewhat impractical without assisting navigation between multiple applications.  A user who mis-clicks a few pixels in the wrong direction can find that his application has apparently disappeared.  The large number of overlapping layers can lead  Tiled windows Allow users to have more than one application onscreen at a time where applications divide the screen into uniform rectangular tiles.  Navigation between tiled windows is much easier  Cost in pixel real estate than between overlapped windows for each tiled app is horrendous.  The large number of overlapping layers can lead to visual noise and clutter, as well as obscuring which layers belong to which  Virtual desktop spaces Virtual desktop or session managers extend the desktop to many times the size of the physical display by adding a set of virtual screens. You switch between these virtual desktops by clicking the one you want to make active  Full-screen applications Application occupies the entire screen when active.  much more pixel-friendly  Less confusing to users  Excellent when an application is used for a long time.  Multipaned applications Tiled windows within a full-screen application. Independent views or panes that share a single window.  Adjacent panes Independent butare separated by fixed or movable dividers or splitters. related information can be easily displayed in a single, sovereign posture screen  reduces both navigation and window management  Window states Minimized windows get collapsed into the taskbar (Windows) or the dock (OS X). Maximized windows fill the entire screen, covering whatever is beneath them. Pluralized state is that in-between condition where the window is neither an icon nor maximized to cover the entire screen.  Windows and documents: MDI Interface Multiple Document vs SDI(MDI): One application with multiple sheets Single Document Interface (SDI): multiple instances of the entire application, each one contains a single sheet.  MDI conserved more bytes and CPU cycles than SDI.  Navigation becomes oppressive if document views require full window management within the MDI container  Making use of windows Desktop applications are constructed of two kinds of windows: primary and secondary (dialog boxes). Determining how to use windows in an application is an important aspect of defining the application’s Design Framework. Imagine the application as a house, each application window is a separate room. A room has a purpose implies that using it is associated with a goal.  Unnecessary rooms Unnecessary rooms: secondary windows containing functions that should really be integrated into panes or other surfaces within the primary window. Provide functions in the window where they are used. A dialog box is another room; have a good reason to go there. Try to avoid this kind of window pollution in your apps. Unnecessary rooms Unnecessary rooms  Necessary rooms When users perform a function outside their normal sequence of events, it’s usually desirable to provide a special place in which to perform it. Separate rooms for certain functions are appropriate or even necessary. Using goal-directed thinking, we can examine each function to good effect.  Menus Menus as a pedagogic vector A menu item reading “Format Gallery” is likely to be more enlightening to new users than an icon button like this one. But after new users become intermediates, it’s a different story.  Menus Disabled menu items  Disable menu items when they are not applicable.  Menus Check mark menu items A check mark menu item is vastly preferable to a flip-flop menu item that alternates between two states, always showing the one currently not chosen.  Menus Icons on menus Use consistent visual symbols on related commands.  Menus Accelerators  Follow standards.  Provide for the daily use of accelerators.  Show how to access accelerators.  Menus Access Keys Cascading Menus vs. Monocline Groupings Cascading menus make it difficult for users to find and browse the command set, but they do allow menus to usefully contain much larger command sets. Modern Menus are only one level deep (monocline grouping) or flat hierarchy. Dialog boxes are used.  Toolbars, Palettes, and Toolbars Sidebars  The typical toolbar is a collection of icon buttons in a slab attached to the top (when horizontal) or side (when vertical) of the main window.  Toolbars and menus Menus are complete toolsets with the main purpose of teaching inexperienced users and organizing seldom-used advanced functions Toolbars are for frequently used commands and cater to perpetual intermediates.  Menus and Toolbars complement each other perfectly, addressing different user needs at different times.  Toolbars give experienced users fast access to frequently used functions.  Toolbars as simply a speedy version of menus.  Toolbars versus modeless Toolbars aredialogs modeless, but:  They are visually different from modal dialog boxes  There is no need to worry about dismissing them, because they are always available. Docking toolbars  Toolbars Toolbar buttons:  The image on the icon button doesn’t need to teach users its purpose; it merely needs to be easy to distinguish from the other icons in the set. ToolTips:  Use ToolTips with all toolbar and iconic controls.  Toolbars Disabling toolbar controls:  Toolbarcontrols should become disabled if they are not applicable to the current selection. Toolbar control proliferation:  Toolbars now contain more than icons and buttons.  Toolbars Movable toolbars:  Toolbars can be docked horizontally (top), vertically (left), and dragged off the toolbar to form free-floating palettes.  Toolbars Movable toolbars:  Microsoft’s clever way of allowing users to overlap toolbars (or fit them in smaller sizes) but still get at all their functions.  Toolbars Customizable toolbars:  Allowing advanced users to customize and configure its ribbon control to their hearts’ content. Contextual (pop-up) toolbars The ribbon control  Tool palettes Tool Palettes:  Tool palettes contain a set of mutually exclusive controls, each of which represents an operating mode of the application, including: Object creation modes Object selection modes Object manipulation modes  Palettes typically dock and float, mimicking the functionality from the toolbar.  Palettes are popular in graphics applications, where modeless access to tools is useful—or even critical— for users to maintain a productive flow. Tool palettes  Sidebars, task panes, and drawers Sidebar or task pane: A pane in the application window dedicated to providing the kind of functions that were formerly delivered through dialog boxes.  Sidebars need not be limited to the sides of the screen.  A commonly employed pattern is the dedicated properties area or work space. Drawers:  Represent a final variant of task panes.  Conserving screen real estate for the primary content area  Be stowed mostly or completely offscreen in a Sidebars, task panes, and drawers Sidebars, task panes, and drawers  Pointing, Selection, and Direct Manipulation Mouse ergonomics Mouse buttons and controls  Left mouse button  Right mouse button  Scroll wheels and scroll balls  Modifier keys  Pointing  Chord-clicking  Clicking  Double-clicking and  Point-and-Click Combination dragging  Clicking and dragging  mouse-up and  Double-clicking mouse-down events  Pointing, Selection, and Direct Manipulation Support both mouse and keyboard use for navigation and selection tasks. Use cursor hinting to show the meanings of modifier keys. Single-clicking selects data or an object or changes the control state. Double-clicking means single-clicking plus action. Mouse-down over an object or data should select the object or data. Mouse-down over controls means proposing an action; mouse-up means committing to an action.  Pointing, Selection, and Direct Manipulation Trackpads, trackballs, and gesture sensors Cursors  The key to successful direct manipulation is rich visual feedback. Selection  Command ordering and selection (verb-object vs. object- verb)  Discrete and contiguous selection  Mutual exclusion  Additive selection  Group selection  Visual indication of selection  Pointing, Selection, and Direct Drag and Manipulation drop  Visual feedback for drag and drop  Indicating drag pliancy  Indicating drop candidacy  Insertion targets  Visual feedback at completion  Auto-scrolling  Avoiding drag-and-drop twitchiness  Fine scrolling  Pointing, Selection, and Direct Manipulation Drop candidates must visually indicate their receptivity. The drag cursor must visually identify the source object. Any scrollable drag-and-drop target must auto-scroll. Debounce all drags. Any program application that demands precise alignment must offer a vernier.  Pointing, Selection, and Direct Manipulation Control manipulation  Modal tools and palettes  Charged cursor tools 2D object manipulation  repositioning  resizing and reshaping  Connecting 3D object manipulation  Display issues and idioms  Input issues and idioms Pointing, Selection, and Direct Manipulation Q&A  Next Session Designing for Web