HCI Track-A User-Interfaces:GUI Week37

HCI Lecture Notes: Graphical User Interfaces

Introduction

In last week’s lecture, Nicholas discussed the hardware of user interfaces, focusing on input devices and output devices. Today, we delve further into the computer to explore graphical user interfaces (GUIs).

On the first slide, the professor displayed two interfaces:

• Right: The Apple Vision Pro interface, which we discussed on the first day.
• Left: An interface from the Xerox Star computer, one of the first GUIs developed at Xerox PARC before Windows and macOS. This interface was the inspiration for many of today’s GUIs.

Key Point: Despite the decades between them, both interfaces prominently feature windows and icons, demonstrating that these ideas have enduring relevance in GUI design.

Overview

1. Different Types of Graphical User Interfaces
2. Components of Typical GUIs
3. Command-Line Interfaces
4. Direct Manipulation
5. Interaction Techniques
6. Interaction Tasks
7. Modes in User Interfaces

Learning Goals

By the end of this lecture, you should be able to:

• Understand various types of GUIs.
• Identify the components that make up typical GUIs.
• Discuss the role and design considerations of command-line interfaces.
• Explain the concept and characteristics of direct manipulation.
• Describe different interaction techniques and tasks.
• Understand the concept of modes and their impact on user interfaces.

Command-Line Interfaces (CLIs)

Personal Experience with CLIs

The professor shared his first experience with computer interfaces:

• Atari PC3 in the mid-80s.
• Featured a 16-color EGA screen.
• Ran an early variant of MS-DOS.
• Used QDOS, a simple GUI for navigating the file system.
• For running and installing games, he used the command-line interface at the top of the screen.

Modern Use of CLIs

Even today, CLIs are widely used, especially among power users and developers:

• Terminal on macOS.
• Command Prompt or PowerShell on Windows.
• JavaScript Console in web browsers.
• CLIs in games, such as King’s Quest, where commands are typed to interact with the game world.

Exercise: The professor asked how many students had used a terminal in the last day or week. Most had, indicating the continued relevance of CLIs.

Strengths of CLIs

• Simplicity: Easier and cheaper to create than complex GUIs.
• Power and Flexibility: Capable of handling complex tasks with numerous parameters.
• Scripting and Automation: Users can create scripts to automate repetitive tasks.
• Efficiency for Experienced Users: Command history and shortcuts speed up workflows.

Weaknesses of CLIs

• Lack of Intuitiveness: Not user-friendly for beginners.
• Memorization Required: Users must remember commands and their parameters.
• Limited Feedback: Difficult to know if the system is processing commands as intended.
• Error-Prone: Small mistakes can lead to significant errors.

Design Considerations for CLIs

• Availability: How does the user know which commands are available?
• Naming: How does the user know the names of the commands the system understands?
• Learning: How does the user learn the semantics of commands and their parameters
• Recall: Recall: How does the system support the user in recalling commands?
• Syntax: How does the user know what parameters to expect and their form?
• Transparency: How does the system provide feedback to the user about correct and erroneous commands?

Direct Manipulation

Definition and Characteristics

Shneiderman 1983

Direct Manipulation involves interacting with digital objects as if they were physical objects, allowing users to manipulate them directly.

Key characteristics:

1. Continuous Representation: Objects of interest are continuously visible on the screen.
2. Physical Actions: Users perform actions directly on objects rather than using complex syntax.
3. Incremental and Reversible Actions: Users perform small actions that can be easily undone.
4. Immediate Feedback: Users see the effects of their actions immediately.
5. Progressive Learning: Users can learn by exploring and experimenting without reading manuals.

Examples of Direct Manipulation

1. Blender 3D Modeling Software:
   • Users can manipulate objects like cubes directly by moving, scaling, or rotating them.
   • Immediate visual feedback and reversible actions enhance user experience.
2. File Management:
   • Dragging a file to the trash bin to delete it.
   • Provides visual feedback during the action (e.g., the file icon moves with the cursor).

Degrees of Directness

• Weak Direct Manipulation: Requires intermediary steps, such as using menus or dialog boxes.
• Strong Direct Manipulation: Users interact with objects directly using handles or gestures.
• Immersive Manipulation: Involves virtual or augmented reality, where physical actions correspond closely to digital effects.

Example: A video demonstrated increasing levels of direct manipulation, from using menus to manipulating objects directly with handles, and finally combining both for optimal efficiency.

Interaction Techniques

Definition

“An interaction technique is a computation that couples input and output, to support elementary interactive tasks.“

Or say an interaction technique is a method that translates user input into system responses, coupling input and output to support basic interactive tasks.

Types of Interaction Techniques

• Pointing Techniques: Moving a cursor or pointer to interact with objects.
• Selection Techniques: Selecting objects or options from a set.
• Text Number and Text: Inputting text using keyboards, touchscreens, or voice input.
• Camera Control Techniques: Navigating through 3D environments.

Objectives in Designing Interaction Techniques

Examples of Interaction Techniques

1. OctoPocus:
   • A gestural guidance system that helps users learn and execute gestures.
   • Provides dynamic visual feedback, showing possible gestures and their effects.
2. Imaginary Keyboard for AR Headsets:
   • Enables hands-free text entry using an “imaginary” keyboard overlaid in augmented reality.
   • Evaluated different selection mechanisms to address challenges like arm fatigue and visual occlusion.

Evaluation of interaction techniques

• Interaction techniques are evaluated empirically
• Typically through controlled experiments for equivalent tasks
  • E.g., iText vs. Heads-up keyboard or OctoPocus vs. Marking Menu
• Three main considerations
  • Isolating the effect of the technique from other factors
  • Estimating real-world user performance
  • Demonstrating progress over previous solutions

Interaction Tasks

Definition

An interaction task is an action performed by the user to achieve a goal within the system.

Types of Interaction Tasks (pdf 31)

1. Input Tasks:
   • Text Input: Using text fields, keyboards, or voice input.
   • Value Input: Using sliders or number fields.
   • Position Input: Selecting positions on a screen or canvas.
   • Path Input: Drawing paths or gestures.
2. Selection Tasks:
   • Single Selection: Choosing one item from a selection set(radio set).
   • Multiple Selection: Choosing multiple items, often using modifiers like Ctrl or Shift keys.
   • Menu Selection: Navigating hierarchical menus.
3. Trigger Tasks:
   • Buttons and Controls: Clicking buttons to initiate actions.
   • Gestures: Using gestures to execute commands.
   • Drag-and-Drop: Moving objects to trigger operations.
4. Navigation Tasks:
   • Scrolling: Moving through content vertically or horizontally.
   • Panning and Zooming: Navigating within larger content areas or maps.
5. Property Specification Tasks:
   • Dialog Boxes: Setting properties through input fields.
   • Inspectors: Adjusting properties of selected objects.
6. Transformation Tasks:
   • Resizing: Changing the size of objects using handles.
   • Rotating: Adjusting the orientation of objects.
   • Moving: Changing the position of objects on the screen.

Menus in Interaction Tasks

• Linear Menus: Traditional drop-down menus.
• Pie Menus: Radial menus that can be faster due to equal distance to options.
• Marking Menus:
  • Combine gestures with menu selection.
  • Enable rapid command execution after learning the gesture paths.

Example: A demonstration showed that marking menus could be up to ten times faster than linear menus but may have limitations in scalability and learnability.

Modes in User Interfaces

Definition

A mode is a state of the interface in which the same user actions produce different results.

Types of Modes

1. Temporal Modes: Modes that change over time or based on system state (e.g., video playback controls).
   1. The same user action performed at different times has different effects
   2. Problem: Initiative of the mode change
2. Spatial Modes: Modes that change based on the location of interaction (e.g., dropping a file onto different areas resulting in different actions).
   1. The same user action performed at different locations has different effects
3. Quasimodes: Modes that are active only while a physical control is engaged (e.g., holding down a key).
   1. Temporal modes activated as long as a physical action is sustained

Examples and Issues

• Caps Lock: Changes typing from lowercase to uppercase.
• Tool Palettes in Graphic Editors: Switching between drawing, selecting, or erasing tools.
• Mode Errors: Occur when users are unaware of the current mode and perform unintended actions.

Design Challenge: Modes can increase cognitive load and lead to errors, so designers must carefully consider their implementation.

Case Study: VI vs. Emacs Editors

VI Editor:

• Modes: Has distinct modes (command mode and insert mode).
• Usage: Users switch between modes to edit text or execute commands.

Emacs Editor:

• Modality: Less reliant on modes, using key combinations instead.
• Usage: Commands are executed using modifier keys (e.g., Ctrl, Alt).

Activity: The professor encouraged students to try writing a file in both editors to experience the different approaches to modes.

Conclusion

Understanding the design and implementation of graphical user interfaces is crucial for creating effective and user-friendly systems. By exploring command-line interfaces, direct manipulation, interaction techniques and tasks, and the role of modes, we gain insights into how users interact with technology and how we can enhance those interactions.