Interaction Design ISB36403 Design Controls and Dialog PDF

Interaction Design ISB36403 Design Controls and Dialog  Outline Controls Dialogs Eliminating Errors, Alerts, and Confirmations Devil is in the Details  Introduction Controls and dialogs still constitute a common language for users inte...

Interaction Design ISB36403 Design Controls and Dialog  Outline Controls Dialogs Eliminating Errors, Alerts, and Confirmations Devil is in the Details  Introduction Controls and dialogs still constitute a common language for users interacting with most of the digital products available today.  These standard objects are available as part of most GUI development libraries  This doesn’t prevent their misuse in many software applications. This lecture outlines the majority of common interactive GUI controls and also discusses their appropriate (and inappropriate) contexts of use.  Controls Controls are self-contained screen objects through which people interact with digital products.  Also known as widgets, gadgets, and gizmos  They are the primary building blocks for creating a typical graphical user interface. Depending on users’ goals, controls come in four types:  Imperative controls, used to initiate a function  Selection controls, used to select options or data  Entry controls, used to enter data  Display controls, used to manipulate the how and where the application displays itself and its data  1. Imperative controls A control that corresponds to a verb is called an imperative control because it commands action, most often immediately. When we issue a command, we are specifying the verb—the statement’s action.  Buttons  Menu bar items.  What else?  Buttons The most easily discoverable control. Known for their simulated-3D raised aspect. Now they are flattened (esp. mobile)  threatens learnability. Visual pliancy indicates pressability.  Poorly designed applications contain buttons that don’t animate when clicked or tapped. Did that actually do something?  Icon Buttons Toolbar has become as familiar as the menu bar Icon button: half button, half icon  Easy to use  Always visible  Don’t demand as much time as a drop-down menu. Downsides:  Icon is not clear for a first-time user Need text label/explanation (ToolTip  wait for it to appear) Microsoft’s ribbon control combines text and icons  Hyperlinks Hyperlinks, or links, is an imperative control used for navigation.  Typically taking the form of blue underlined text  Images can also be used as links. Replacing buttons or icon buttons with hyperlinks will result in a more usable user interface? (Wrong Idea).  2. Selection controls A selection control allows the user to choose from a group of valid choices and also used to configure actions.  Traditionally, required an imperative control to activate.  This is no longer always the case. Examples? Some cases require multiple selections then make action. Some other cases require immediate actions on selection.  Check boxes Was one of the earliest visual control controls.  Presents a single, binary choice or for selecting from among several choices in a short list.  Has a strong visual affordance for clicking.  Simple, visual, test-based and elegant.  Toggle buttons Check boxes isn’t well-suited for toolbars. A toggle button: click  pushed-In click  non-depressed  superseding the check box as a single-selection idiom.  especially appropriate in modeless interactions that do not require interrupting the user’s flow to make a decision.  more space-efficient than check boxes.  Same problem as icon button: icon’s inscrutability  State-switching buttons: an idiom to avoid Switching states on click.  used to save interface real estate.  savings comes at the cost of considerable user confusion.  The control could be interpreted as indicating the current state. Solutions?  Radio buttons Why are they called Radio buttons? Always come in groups of two or more same amount of space on-screen as check boxes.  Icon buttons have reimagined the radio button.  Switches A more compact version of two radio buttons used together.  more understandable version of a single check box  handy in Settings screens on mobile apps  Click or, on mobile, swiping  Combo icon buttons A variant of the radio icon button replaces the bank of icon buttons with a drop-down list of icons. Clicking the icon button itself actuates the imperative indicated by the selected state. Variations on combo icon buttons  Combo icon buttons Variations on combo icon buttons  List controls Allow users to select from a finite set of text strings, each representing a command, object, or attribute.  also known as list boxes or listviews  small text areas with a vertical scrollbar  drop-down menu can also be considered a variant of the list control.  List controls Apple’s iOS has introduced a gestured-based variant of the list control (barrel control).  List controls Microsoft has allowed each line of text in a listview control to be preceded with an icon.  Earmarking disable the mutual-exclusion behavior of a standard list control  Allows users to select more than one item and each one stays selected.  can scroll off the screen  Ordering lists Sometimes the need arises to drag an item from a list control to another position in the same list control. let users move what’s important to them to a region at the top, and sort those things separately Ordering lists Ordering lists  Horizontal scrolling in lists Avoid scrolling text horizontally. If you find a situation that seems to call for horizontal scrolling of text, search for alternative solutions:  Shorten the entries  wrap the text to the next  allow the user to enter aliases for the longer entries  use graphical entries instead  use ToolTips  rearrange things on the window or dialog to expand horizontally  Entering data into a list Modern list and tree controls offer an edit-in-place facility. Windows Explorer uses both of these controls. The edge case that makes edit-in-place a real problem is adding a new entry to the list.  Different ways to do that  Drop-down and pop-up lists Drop-down lists (pop-up lists) take the place of a stack of radio buttons.  Provides a compact way to make a single selection from a list.  focus on selecting objects rather than executing actions.  can sometimes immediately affect the display of information.  Combo boxes A combination of a list box and an edit field  reduced impact on screen real estate.  single-selection control.  No multiple-selection combo box.  Clearly differentiate between the text-entry part and the list- selection part, minimizing user confusion  Tree controls Tree controls (treeviews) are listviews that can present hierarchical data.  entries can be expanded or collapsed  often used as a file system navigator  3. Entry controls Entry controls enable users to supply information to or set a value in an application. Examples? Entry controls could be Bounded or Unbounded entry controls. Bounded and unbounded entry controls Bounded entry control: control that restricts the available set of values that the user can enter. Examples? Unbounded entry control: open-ended entry controls. Examples? Quality of the entry control, not the quality of the data.  Spinners Spinner controls are a common form of numeric entry control that permit data entry using the mouse, keyboard, or finger.  Dials and sliders Improperly implemented, dials can be extremely difficult to manipulate.  Thumbwheels A variant of the dial, but it is much easier to use.  Other bounded entry controls A variant of the dial, but it is much easier to use.  Unbounded entry: text edit controls The primary unbounded entry control is the text edit control. Active validation: when a control actively rejects keystrokes during the entry process. Passive validation: If the control waits until the user finishes entering data before it edits the value. Another good solution to the validation control problem is the hint.  Handling out-of-bounds data Units and measurements Avoid text edit controls for output  4. Display controls Display controls are used to display and manage the visual presentation of information onscreen. Controls that manage how objects are displayed visually onscreen fall into this category, as do those that display static, read-only information. Examples?  Text controls simplest display control is the text control, which displays a written message at some location onscreen.  Scrollbars Scrollbars serve a critical need in the modern GUI: They enable smallish rectangles (windows or panes) to meaningfully contain large amounts of information. scrollbars for pages of text should also show the following:  The total pages  The page number (record number, graphic) as we scroll  A thumbnail of the page as we scroll Hiding vs un-hiding scroll bars  Scrollbars To better help us manage navigation, provide:  Buttons for skipping ahead by pages /chapters /sections /keywords  Buttons for jumping to the beginning and end of the document  Tools for setting bookmarks that we can quickly return to  Annotated scrollbars that visually show the position of searched-for items on the background of the toolbar itself Scrollbars  Splitters Splitters are useful tools for dividing a sovereign application into multiple related panes in which information can be viewed, manipulated, or transferred.  Drawers and levers Drawers are panes in a sovereign application that can be opened and closed with a single action.  A great place to put controls and functions that are less frequently used Drawers and levers Q&A  Next Session Evaluating Framework in Interaction Design