Podcast
Questions and Answers
What is an example of a bounded entry control?
What is an example of a bounded entry control?
Which setting describes active validation?
Which setting describes active validation?
What is the primary distinction between bounded and unbounded entry controls?
What is the primary distinction between bounded and unbounded entry controls?
Which of the following is a characteristic of display controls?
Which of the following is a characteristic of display controls?
Signup and view all the answers
Why are scrollbars considered essential in modern GUIs?
Why are scrollbars considered essential in modern GUIs?
Signup and view all the answers
What is the primary purpose of imperative controls in interaction design?
What is the primary purpose of imperative controls in interaction design?
Signup and view all the answers
Which type of control would you use to enter user data into an application?
Which type of control would you use to enter user data into an application?
Signup and view all the answers
What feature is described as potentially threatening the learnability of buttons in modern applications?
What feature is described as potentially threatening the learnability of buttons in modern applications?
Signup and view all the answers
Which control is identified as a familiar element that combines text and icons for clarity?
Which control is identified as a familiar element that combines text and icons for clarity?
Signup and view all the answers
What defines a hyperlink in the context of interaction design?
What defines a hyperlink in the context of interaction design?
Signup and view all the answers
What does 'visual pliancy' suggest about a button design in user interfaces?
What does 'visual pliancy' suggest about a button design in user interfaces?
Signup and view all the answers
Which of the following is NOT a type of control mentioned in interaction design?
Which of the following is NOT a type of control mentioned in interaction design?
Signup and view all the answers
What is a key characteristic of icon buttons compared to traditional buttons?
What is a key characteristic of icon buttons compared to traditional buttons?
Signup and view all the answers
What is a primary drawback of state-switching buttons?
What is a primary drawback of state-switching buttons?
Signup and view all the answers
What is the main advantage of toggle buttons over check boxes?
What is the main advantage of toggle buttons over check boxes?
Signup and view all the answers
In which situation would radio buttons be most appropriate?
In which situation would radio buttons be most appropriate?
Signup and view all the answers
How do combo icon buttons enhance user interface usability?
How do combo icon buttons enhance user interface usability?
Signup and view all the answers
What term is used for components that allow users to select from a limited set of text strings?
What term is used for components that allow users to select from a limited set of text strings?
Signup and view all the answers
What characteristic differentiates toggle buttons from traditional check boxes?
What characteristic differentiates toggle buttons from traditional check boxes?
Signup and view all the answers
Why are check boxes considered an early form of selection control?
Why are check boxes considered an early form of selection control?
Signup and view all the answers
What is one limitation of using buttons instead of hyperlinks?
What is one limitation of using buttons instead of hyperlinks?
Signup and view all the answers
What function does the earmarking feature in list controls provide?
What function does the earmarking feature in list controls provide?
Signup and view all the answers
Which of the following methods is NOT suggested to avoid horizontal scrolling in lists?
Which of the following methods is NOT suggested to avoid horizontal scrolling in lists?
Signup and view all the answers
What is a drop-down list primarily designed to replace?
What is a drop-down list primarily designed to replace?
Signup and view all the answers
In tree controls, what feature allows entries to be organized hierarchically?
In tree controls, what feature allows entries to be organized hierarchically?
Signup and view all the answers
What defines a combo box in list controls?
What defines a combo box in list controls?
Signup and view all the answers
What challenge does edit-in-place functionality present in modern list controls?
What challenge does edit-in-place functionality present in modern list controls?
Signup and view all the answers
Which statement is true regarding horizontal scrolling in lists?
Which statement is true regarding horizontal scrolling in lists?
Signup and view all the answers
What describes 'entry controls'?
What describes 'entry controls'?
Signup and view all the answers
Study Notes
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.
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
Description
This quiz focuses on the principles of interaction design, particularly the use of GUI controls and their appropriate contexts. You'll explore various types of controls, including imperative controls and buttons, to understand their roles in user interaction. Test your knowledge on design best practices and common pitfalls in GUI development.
