Lecture 5: Interaction Design Process

Lecture 5: Alternatives Design

• The lecture discusses the process of interaction design, which includes establishing requirements, designing alternatives, prototyping, and evaluating.
• This iterative process delivers a product.

The Process of Interaction Design

• The process includes cyclical steps to ensure quality:
  • Establishing requirements
  • Designing alternatives
  • Prototyping
  • Evaluating

Designing Alternatives

• This process can be seen as two sub-activities:
  • Conceptual design: This outlines what people can do with a product and the concepts necessary for user interaction. The goal is to establish a high-level structure and functionality, based on user needs and goals.
  • Concrete design: This focuses on product detail including colors, sounds, images, menu design, and icon design. It translates conceptual ideas into tangible details. It determines how users will interact with the system.

Conceptual Design

• Example: Smart Window - Using AR technology, information like weather can be provided on the window itself.

Prototyping

• Prototyping is a crucial step in human-computer interaction (HCI) design.
• Mock-ups or simulations of the interface are created to test and evaluate with users.
• Prototypes help identify problems early, saving time and money.
• Prototypes are instrumental for design exploration, visualization, and testing.
• Prototypes allow users to 'see' and 'feel' the interactivity.

Physical Representation

• Different prototyping methods exist:
  • Series of screen sketches
  • Storyboards
  • Cardboard mock-ups
  • A piece of wood, like a Palm Pilot
  • Software with limited functionality
  • A video simulating the system
  • A PowerPoint slide show

Why Prototype?

• Implementing a design without prototyping is expensive, as errors are often discovered later on.
• This can lead to a final product that is not user-friendly.

Prototyping: PalmPilot

• An example use of a physical prototype is a wood block representing a handheld device. The image of a Palm Pilot device is shown for further visualization.

Example: Paper Prototype

• Detailed image of a paper-based prototype designed to support children with autism.
• The prototype is a handheld device.

Prototyping Variables

• Prototypes are used for filtering particular aspects.
  • Appearance: Size, color, shape, margin, texture, proportion, hardness, transparency, gradation, and others.
  • Data: Data size, type, use, privacy, and organization.
  • Functionality: System function and user functionality, needs
  • Interactivity: Input and output behaviors, feedback, and information.
  • Spatial structure: Interface arrangement and relationship between elements.

Types of Prototyping:

• Low-fidelity: Not visually similar to the final product, using different mediums (paper, cardboard). Often quick, cheap, and easily changeable.
• High-fidelity: Uses materials that would be expected in the final product. These are more complex and expensive, often utilizing existing software or hardware components. Much more time is spent on graphic design.

Prototyping Techniques

• Storyboard: A sequence of cartoon-like images used to model interactions. This models how to fill a gas tank, as an example.

Example: Storyboard for a Quiz

• A storyboard illustrating how an exam quiz is delivered using an adaptive quiz design.

Paper Prototypes

• These are hand-drawn mock-ups of the user interface, usually on multiple sheets of paper

Why Paper Prototyping

• Faster to build and change than software prototypes.
• Easier to change between test sessions or even during testing.
• No code investment; everything can be thrown away (except the design).
• Designer's time focused on the full scope, not the details.
• Users can provide creative suggestions.

Wizard-of-Oz Prototype

• The system responds as if it were computer-based but uses a human operator to respond to user inputs.

High-fidelity prototyping

• Uses materials that expect to be in the final product
• High-fidelity prototypes can be created through integrating existing hardware and software components
• More costly and time consuming than low-fidelity prototypes.
• Includes more detail, leading to superior quality

Types of Evaluation Methods

• Formative evaluation: Conducted early in the design process; identifies initial usability issues and refines the product based on user feedback.
• Summative evaluation: Conducted toward the end of the design process; evaluates overall user experience and determines if the product is ready for release.
• A/B Testing: Used to compare design versions to identify which is better in terms of user engagement and satisfaction.
• Cognitive Walkthrough: Evaluators perform user tasks and observe learnability and usability.
• Heuristic evaluation: Experts evaluate interfaces using usability rules.

8 Golden Rules of Interface Design

• Strive for consistency: Similar actions equate to similar results.
• Enable frequent users to use shortcuts: Keyboard shortcuts, mouse gestures, etc., boost efficiency.
• Offer informative feedback: Provide feedback on all actions & decisions.
• Design dialogs to yield closure: Clearly show the result of an action.
• Prevent errors: Design the interface so that errors are avoided.
• Permit easy reversal of actions: Allow easy correction of errors.
• Keep users in control: Users should be able to easily stop or start a task.
• Reduce short-term memory load: Provide users with an interface with easily retrievable information.

Evaluation

• A crucial process; involved in testing and evaluating how well a design meets users' needs, expectations, and usability standards.
• This stage helps validate ideas, identify issues, and refine products to enhance user experience and satisfaction.

Example: Sequences of Actions

• Actions need clear organization with beginning, middle, and end.

Example: Error Handling

• Avoid serious user errors.
• Offer clear recovery instructions; allow correction if error is made.

Example: Consistency

• Similar cases should use the same terminology/layout/color scheme.

Example: Sequences of Actions - Organized

• User actions are categorized for clarity.