Services

Interaction and UI Design

Interaction and UI design translates the product model into moment-to-moment decisions by making state, consequence, feedback and recovery visible across realistic roles and data.

  • Product design
  • Interaction design
  • UI systems
Email Tcules (opens in a new tab)

Four questions for every consequential interaction

A dependable interface is shaped around what a person can understand, decide and recover from in the moment of action.

  1. What does the person know before acting?
  2. What authority do they have?
  3. How does the product confirm what happened?
  4. How can they recover if the result is wrong or incomplete?

These questions shape forms, tables, builders, visualisations, navigation and AI-assisted interactions differently.

State-first interaction record

  1. Entities

    Interaction state model

    The record identifies the task, current state, available action, consequence, pending state, success, partial success, failure and recovery.

  2. Example

    Bulk update confirmation

    A bulk update identifies selected records, excluded records, validation issues, expected change and the recovery window before confirmation.

  3. Annotations

    Role and action context

    The interaction records role, permission, data freshness and whether an action is reversible.

  4. Responsive behaviour

    State remains available across devices

    Dense desktop tables keep the selected record and action context together. On mobile, each record becomes a labelled block; selection summary remains sticky without covering content. Focus returns to the changed record after an action. Screen readers receive the updated state through an appropriate status message.

Visual language follows product hierarchy

Tcules defines type, colour, spacing, density, iconography and motion around information and consequence. Expressive craft remains important, but it must help a person recognise the product's objects and states.

A design system can carry those decisions across product areas; Design Engineering helps them survive implementation.

Density, control and recovery are interaction decisions

Dealpath retained information-rich listings and created a clearer reading order instead of removing the data acquisitions teams needed. BuildTwin moved from compact accordions to a continuous evidence feed because accountable review required source, observation and conclusion in the reading path.

The two cases show why "simpler" cannot mean fewer visible elements by default. The right density depends on what the person must compare, verify and act on.

The work includes the states around the approved screen

Interaction and UI design includes the surrounding states that determine whether an approved screen can work in practice.

  • Realistic content and data variation
  • Loading, empty, partial, success and failure
  • Permissions and role-specific actions
  • Confirmation, progress and interruption
  • Correction, undo and escalation
  • Keyboard, focus and status behaviour
  • Mobile reading order and touch targets
  • Reduced motion and non-colour status cues
  • Design-system and implementation acceptance

AI-generated or adaptive interfaces add variability, but they do not remove the need for a legible product state. Tcules defines the model's role, output, evidence and control before treating the interaction as complete.

Make product state visible enough to act

Discuss how interaction and UI design can clarify state, feedback, control and recovery in your product.

Email Tcules