m8: interactions and micro

Interaction Design in User Experience (UX)

  • Definition and Importance
    • Interaction design is a crucial phase where the practical application of UX design begins.
    • It involves activities such as sketching, wireframing, designing screen layouts, and defining transitions.
    • Before these activities commence, it's important to grasp the fundamental definition of an interaction.

Components of Interaction

  • Structure of Interactions

    • Similar to sentence structure (subject, verb, object), interactions are composed of three key components:
    • Intent: The purpose or goal of the interaction.
    • Action: The steps taken to achieve the intent.
    • Result: The outcome of the action, which can be either successful or unsuccessful.

  • Variety in Interaction Size

    • Interactions can vary in complexity and size:

    • Large Interactions

      • Example: Creating an account with a food delivery service.
      • Intent: To create a new account to order food (e.g., a burrito).
      • Action: Complete the required form.
      • Result: If filled out correctly, the user receives their burrito; if not, error messages may occur explaining the issues.

    • Micro Interactions

      • These represent the smallest unit of interaction design.
      • Example: Indicating gender on a form.
      • Intent: To inform Google about gender.
      • Action: Click on the drop-down menu and select an option: male, female, custom, or rather not say.
      • Result: The input field updates with the chosen option.

The Role of Micro Interactions

  • Composition of Larger Interactions

    • Many common interactions consist of several smaller micro interactions.
    • Example from Gmail
    • Intent: To send an email with the subject "Hello".
    • Actions Involved:
      • Tap the compose button.
      • Begin typing the email address, and select it from the auto-complete drop-down.
      • Enter the subject line.
      • Tap send.
    • Micro Interactions Summary:
      • Tap Compose button.
      • Enter Email Address.
      • Enter Subject.
      • Hit Send.
    • Result: Email is successfully sent.

  • Single Micro Interaction Example

    • Example: Pausing a song in Spotify.
    • Intent: To pause the playing song.
    • Action: Tap the pause button.
    • Result: The song stops playing.

Recap of Interaction Components

  • An interaction consists of three main components that are critical for its structure:
    • Intent: The goal or desired outcome of the interaction.
    • Action: The steps taken to achieve the goal.
    • Result: The outcome of the action which can be successful or not.