Interaction Design ISB36403: Design Controls and Dialog

Interaction Design ISB36403: Design Controls and Dialog

• The course covers common interactive GUI controls and their appropriate (and inappropriate) use contexts.
• Standard controls are available in GUI development libraries but misuse remains common.
• Controls are self-contained screen objects for user interaction.
• Controls are also known as widgets, gadgets and gizmos; they are the primary building blocks of typical graphical user interfaces.
• Based on user needs and tasks, controls are classified into four main types:

Imperative Controls

• These controls initiate a function, corresponding with a verb to command immediate action
  • Examples include buttons and menu bar items.

Buttons

• Considered the easiest control to identify.
• Previously often designed with simulated 3D raised aspects.
• Currently, flattened designs are common, especially on mobile devices, which may reduce learnability.
• Visual feedback (animation) is important to signal pressability.

Icon Buttons

• Common in toolbars, combining button functionality with an icon (half-button, half-icon).
• Advantages: Easy to use, always visible, don't require lengthy dropdown menus.
• Disadvantages: Icons can be unclear to first-time users.

Hyperlinks

• Hyperlinks (or links) are also imperative controls used for navigation.
• Often displayed as blue underlined text or images.

Selection Controls

• Enable users to choose from several valid options, also used to configure actions.
• Traditionally used imperative controls for activation, though some, like check boxes, can now function directly.
  • Selection choices like checkboxes, toggle buttons, radio buttons and spinners often involve multiple selections or immediate actions.

Check Boxes

• Early visual controls; represent binary choices from a small list.
• Strong visual indication for clicking.
• Use is often less fitting for toolbars, due to visual clutter.

Toggle Buttons

• Replace checkboxes as a single-selection idiom.
• Suitable for interactions that don't need explicit decision-making interruptions.
• Often more concise than checkboxes.

Radio Buttons

• Group controls of two or more, taking up screen space comparable to check boxes.
• Allows single selections within a group of options.

Switches

• Compact version of two radio buttons used together.
• More user-friendly and easier to grasp than multiple radio buttons.

Combo Icon Buttons

• Variant replacing multiple icon buttons with a dropdown list of icons.
• Selecting the icon directly activates the corresponding imperative action.
• Can include various forms like horizontal or vertical arrangements.

List Controls

• Enable user selection from a predetermined list of text strings (commands, objects, or attributes)
• Also known as list boxes or listviews.
• Often feature small text areas with vertical scrollbars, also considered drop-down menu variants.

Apple's iOS

• Barrel control; a gestured-based variant for list controls.

Microsoft

• Allows icons to precede each line in listview controls.

Earmarking

• Can uncouple standard lists’ mutual exclusion behavior.
• Allow multiple item selection, with independent selected item permanence.
• Scrolling capabilities.

Ordering Lists

• Function to drag items within a list.
• Allow rearranging order or sorting significant items.

Horizontal Scrolling in Lists

• Avoid horizontal scrolling when possible; this is inefficient when the situation involves large and lengthy text.
• Alternatives involve shortening entries, using aliases, graphical representations, or tools such as ToolTips.

Entering Data into a List

• Modern lists and tree controls enable users to edit entries directly in-place.
• Windows Explorer is one example of using both controls.
• The adding a new item to the controls remains problematic.

Drop-down/Pop-up Lists

• Take the spot of a radio button stack.
• Compact single selection structure; facilitates selection focus on objects over executing actions.
• Can immediately influence display information.

Combo Boxes

• Combines a list box and an input field.
• Reduces screen space; functions as single-selection controls (not multiple selections).
• Clearly delineates the entry and list selection parts, reducing user confusion.

Tree Controls (Treeviews)

• Listviews that demonstrate hierarchical data display.
• User-friendly for expandable/collapsible data display.
• Often serve data hierarchical structuring.

Entry Controls

• Enables users to provide and set data values within an application.
• Controls can be categorized as either bounded or unbounded.

Bounded Entry Controls

• Restrict values; user input must be predefined values/types.
  • Examples include spinners, dials

Unbounded Entry Controls

• Open-ended structures, allowing user input in various formats/sizes.
  • Examples include text entry boxes

Spinners

• Common numerical entry control, allowing mouse, keyboard, and touch input methods.

Dials and Sliders

• Entry controls often implemented poorly and are challenging to manage.
• A variant form (such as thumbwheels), can be quite practical.

Text Edit Controls

• The fundamental unbounded entry control for inputted text.
• Types include active and passive forms, and the latter method waits to validate entry.

Handling Out-of-Bounds Data

• When dealing with measurements, avoid text entry controls due to potential formatting issues.
• Employ controls that manage limits during entry, presenting preformatted choices.

Display Controls

• Manage and display visual on-screen information.
  • Controls handling the display/visualization of onscreen objects and static read-only data.

Text Controls

• The most basic display control, presenting a written message on the screen in a specified location.

Scrollbars

• Essential component in GUI to display extensive on-screen information within a limited window/panel.
• Should indicate page count, graphic representation of page number and thumbnails during scrolling.

Splitters

• Divide sovereign applications into multiple panes for related information visualization/manipulation/transfers.

Drawers and Levers

• Panels within an application that open and close with one input.
• Often used for infrequently accessed control/functions.

Q&A Session

• Dedicated period for questions regarding the previous discussion regarding controls and dialogues.

Next Session

• Focus on evaluation methodologies for interaction design.