You click the icon to save an invoice. The invoice disappears.

Somewhere, a test is green. The Archive button did exactly what its developer intended.

Here’s a question worth asking in your next pull request: before the click, what told the user where that file would end up?

Give someone a task before you give them a hint

Put two actions next to an invoice: a box with a lid for Archive, and a downward arrow landing in a tray for Download. Start with just the icons.

It’s tempting to ask, “Which one is the Download button?” But that gives away the name of the control. Try this instead:

You need a copy of this invoice on your laptop so you can open it on the train. What would you click?

Watch the first click. Then ask: “What did you expect to happen to the invoice in the inbox?”

That second question matters. Someone can pick the intended button and still expect the file to move to their laptop. Your implementation makes a copy. A first-click score alone misses that difference.

Try it with one HTML file

Save this as toolbar.html and open it in your browser. Archive moves a mock invoice out of the inbox. Download saves a small text file and leaves the original in place. Tick Show labels to reveal the words beside the same two SVGs. Reload to reset.

<!doctype html> <html lang="en"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Invoice toolbar experiment</title> <style> body { margin: 2rem; font: 1rem/1.5 system-ui, sans-serif; color: #202124; } .action { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem; border: 1px solid #767676; border-radius: .4rem; background: white; color: inherit; font: inherit; text-decoration: none; cursor: pointer; } .action:focus-visible { outline: 3px solid #145dcc; outline-offset: 2px; } svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .caption { display: none; } #labels:checked ~ #invoice .caption { display: inline; } </style> <h1>Inbox</h1> <input id="labels" type="checkbox"> <label for="labels">Show labels</label> <div id="invoice"> <p>Invoice-1042.txt</p> <button class="action" id="archive" type="button" aria-label="Archive"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M3 4h18v4H3z M5 8v12h14V8 M10 12h4"/> </svg> <span class="caption">Archive</span> </button> <a class="action" aria-label="Download" download="Invoice-1042.txt" href="data:text/plain;charset=utf-8,Invoice%201042%0ATotal%3A%20EUR%2042"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M12 3v12m-5-5 5 5 5-5 M4 16v5h16v-5"/> </svg> <span class="caption">Download</span> </a> </div> <h2>Archive</h2> <p id="archived" role="status">Empty</p> <script> document.querySelector('#archive').addEventListener('click', () => { document.querySelector('#invoice').hidden = true; document.querySelector('#archived').textContent = 'Invoice-1042.txt'; document.querySelector('#labels').focus(); }); </script> </html>

Listen for the clue they actually used

“I followed the arrow” and “I usually find Download on the right” could produce the same click. Only the first answer tells you the drawing helped. The second gives you a reason to check what happens when the toolbar wraps or the actions move into a menu.

Those are examples of what to listen for. When you run the exercise, write down the person’s own words.

Now turn on Show labels. If you’re reviewing the design together, ask what became clearer. If you want to compare first clicks, show the labeled version to a fresh reader. The first person has already learned what the box does.

What I’d change in the pull request

Both icons use the same size, stroke weight and color. The controls also have accessible names. That makes it possible to write a test such as getByRole('link', { name: 'Download' }). It tells you the link can be found by that name. A sighted reader looking at the unlabeled toolbar still has to get there from the drawing.

If people recognize the download arrow but hesitate over the archive box, I’d start with a one-word change: put Archive beside the box. Then repeat the task at the width where the toolbar actually ships.

The question I’d leave on the pull request is simple: “Can someone tell which click keeps the invoice in their inbox?”