Input (Modality)

Input Button — Interaction Specification

Purpose

The Input Button is the central entry point for two primary actions:

• Text Input — search for and add users.

• QR Scanner — scan QR codes.

The button always stays in the same place in the interface, but it has two possible default states.

1. Onboarding

On the first app launch, show a tooltip next to the Input Button as part of onboarding.

Suggested copy:

Input
Search for users or scan QR codes from here.
Long press to switch the default input mode.

The tooltip should be shown once and should not appear automatically again after dismissal.

2. Default Modes

The Input Button has two states:

Text Input Mode

• Primary action: search for or add a user.

• The “+” inside the icon is visually highlighted.

• A regular tap immediately opens Text Input.

QR Scan Mode

• Primary action: scan a QR code.

• The outer scanner frame inside the icon is visually highlighted.

• A regular tap immediately opens the camera.

The selected mode should remain the default until the user switches it again.

3. Switching Modes

A long press on the Input Button switches the default mode:

Text Input ↔ QR Scanner

After a long press:

• the visual state of the icon changes;

• the newly selected mode becomes the default;

• a short haptic feedback can be used to confirm the switch.

The corresponding screen should not open after a long press. Long press only changes the default action.

4. Tap Behaviour

If Text Input Mode is selected:

Tap → Text Input

The screen should open immediately with:

• the input field already focused;

• the keyboard already open;

• the user able to start typing a name, username, or address immediately.

If QR Scan Mode is selected:

Tap → QR Scanner

The scanner should open immediately with:

• the camera active;

• the scanning UI ready to detect a QR code.

5. Manual Mode Override

The default mode should never prevent the user from accessing the alternative input method.

Inside Text Input, provide a separate action:

Open QR Scanner

This opens the camera without changing the default mode.

Inside QR Scanner, provide a separate action:

Open Text Input

This opens the text input without changing the default mode.

In other words:

Long press = change the persistent default mode.
Manual switch inside the screen = temporarily use the alternative input method.

6. Interaction Summary

Action | Result -- | -- Tap in Text mode | Open focused Text Input with keyboard Tap in Scan mode | Open camera / QR Scanner Long press | Switch the default mode Text Input → Scanner | Open scanner, keep default unchanged Scanner → Text Input | Open text input, keep default unchanged

7. Visual State

The icon should communicate the current default mode without completely changing its shape:

• Text mode: highlight the central +.

• Scan mode: highlight the outer scanner frame.

• The inactive part of the icon remains visually secondary.

The transition between states can use a short morph or highlight animation so that the mode change is noticeable without being distracting.