Marcelo Paiva

Concepts

Dot matrix button

An AI button whose icon is a grid of dots, seven by seven, that pictures what the button will do. It reads its own label, so Summarize deal shows lines getting shorter and Suggest next steps shows a staircase.

Why

I designed it for the boilerplate my team builds products on, where AI actions sit beside ordinary ones. The usual sparkle on every AI button says only that a model is involved. These pictures also say what it is about to do, and the button acts that out while it works.

Try it

Light theme

Primary

Secondary

Dark theme

Primary

Secondary

Point at a button, or tab to it, and its picture moves. Press one, and its label says what it is doing while the picture keeps moving, for about three seconds.

A long wait

When the work takes a while, the loader plays other shapes between repeats of the action’s picture: a beating heart, a winking face, a space invader, a snake. They mean nothing, so the action’s picture comes back after each one, and the meaning is never gone for long.

Here each shape is in its own color: a red heart, a yellow smiley, blue rain. The action’s picture keeps the page’s ink, as on the buttons. The colors are new here; in the boilerplate every dot takes the label’s color.

Light theme

  • 72px
  • 32px
  • Button, 20px

Dark theme

  • 72px
  • 32px
  • Button, 20px

Summarize: a paragraph’s lines shrinkThe action being waited for. It comes back after every shape.

Nothing plays until you press Play the wait. Each shape then plays for five seconds before the next.

Seven pictures

Each picture at rest is the finished state of its own animation, so the still icon and the moving one are the same drawing.

  • Lines of falling length

    Moving
    A paragraph’s lines shrink
    Labels
    Summarize, Condense, Shorten, Generate summary

  • A staircase

    Moving
    Built step by step, then a dot climbs it
    Labels
    Suggest, Recommend, Plan, Get next steps

  • Two lines, and a cursor in the middle of a third

    Moving
    The cursor erases the line and types it again
    Labels
    Rewrite, Rephrase, Improve, Translate

  • Four lines, the last one short

    Moving
    The lines type out
    Labels
    Draft, Write, Compose, Generate email

  • A speech bubble with three typing dots

    Moving
    Its typing dots appear one by one
    Labels
    Ask, Explain, Get answer

  • Four bars

    Moving
    The bars grow to their values
    Labels
    Analyze, Forecast, Compare, Generate insights

  • A four-point sparkle

    Moving
    It flares into a star and settles
    Labels
    Generate, Brainstorm, anything else

How it reads the label

It takes the first word. Summarize, Condense and Shorten mean a summary. Suggest, Recommend and Plan mean next steps. A general verb such as Generate or Get hands the choice to the word after it, so Generate summary is a summary and Get next steps is a staircase.

A label it does not know gets the sparkle. So does one that names an ordinary action, such as Save as template: an AI button never pictures a save or a delete.

What I decided

  • Still until asked. A screen of AI buttons that all move is noise, and the movement would stop meaning anything. A picture moves when someone points at it, focuses it or presses it.
  • Working is the same picture. A pressed button keeps acting out its action, and its label turns into what is happening: Draft follow-up email becomes Drafting follow-up email. A spinner would only say busy.
  • The dots are the label’s color. The first version drew them in a fixed light blue for AI, which measured about 2:1 on the filled button, and the dots all but disappeared. In the label’s color they pass wherever the label does.
  • The words carry the meaning. The icon is hidden from screen readers. The label says what the button does, and on this page a status line says when it is working and when it is done.

What is still open

  • Reduced motion. Here, a reader who asked for less motion sees the pictures hold still, and the label alone says the button is working. The boilerplate plays them at half speed instead, because a loader that stops looks like work that has stopped. I have not settled which is right.
  • English only. The label reading knows English verbs. A translated label gets the sparkle, which is safe but says less.
  • Seven dots at button size. The icon is 20px, so each dot is 2px. Seven by seven has room for a heart or a staircase, and an odd grid gives every shape a center; whether the icon still reads at a glance, or needs the boilerplate’s five by five, is not settled.

The grid started from the DotLoader in PaceUI. The pictures, the label reading and the working state are new. The boilerplate draws every picture five dots by five; this page redraws each one seven by seven.

Dot matrix button

This is a page from a design notebook: an idea, a working copy of it to try, and notes on what was decided.

From top to bottom

  1. At the top, the site header: my name, which goes home, then links to Writing, Work, Signal, Tools and Resume, then Settings, where you choose the drawings, light or dark, and movement.
  2. A link back to Concepts, the Dot matrix button heading, and a sentence on what the button is.
  3. Why: a short paragraph on what the idea is for.
  4. Try it: two panels, Light theme and Dark theme, side by side on a wide screen. Each holds the same seven buttons in two rows, Primary and Secondary. Under them, a sentence on how to try them, and a status line that says what a pressed button is doing.
  5. A long wait: two short paragraphs, then the same two theme panels, each showing the grid of dots at three sizes, from 72 pixels down to its size on a button. Right under them, the name of what is showing and a line on what it means, then Play the wait and Show the next shape buttons. Nothing moves until you press Play.
  6. Seven pictures: one box for each icon, with its picture, what it shows moving, and some labels that choose it.
  7. Then three sections of text: how it reads the label, what I decided, and what is still open.
  8. At the bottom, the footer: a note on how this site is built, links to Illustrations, Pens, Concepts and Accessibility, this Describe this page button, then GitHub, LinkedIn and email.

What you can do here

Point at, tab to or press the buttons to see the icons move, and read why they work the way they do.

Also here

The icons are hidden from screen readers. Each button’s label says what it does, and the status line says when it is working and done.