AI Button UX — Where to Put It, How to Label It, What to Show While Waiting

#ai #ux #react #programming

If this is useful, a ❤️ helps others find it.

All tests run on an 8-year-old MacBook Air.

The AI feature is only as good as the UI around it. A powerful diagnosis that's hard to trigger, slow to show, or confusing to read doesn't get used.

Here's what I learned from iterating on HiyokoLogcat's AI button.

Where to put the trigger

Inline with the content, not in a toolbar.

My first version had an "AI Diagnose" button in the top toolbar. Users had to: spot the error, note the line number, click the toolbar button, somehow tell it which line.

The fix: put a small icon directly on each error line. Click the icon → diagnose that line. Zero ambiguity.

{logLines.map((line, idx) => (


    {line.message}
    {line.level === 'E' && (
       handleDiagnose(idx)}
        title="AI診断"
      >
        🐥

    )}


))}

Show the button only on error lines. No button on debug/info lines — that would be noise.

How to label it

Don't say "AI." Users don't care about the implementation.

Bad	Better
"AI Analyze"	"Diagnose"
"GPT Explain"	"What's wrong?"
"Neural diagnosis"	"Fix this"

One word. Action-oriented. No tech jargon.

What to show while waiting

Three states, three UIs:

type DiagnosisState = 'idle' | 'loading' | 'done' | 'error';

function DiagnosisOverlay({ state, result }: Props) {
  if (state === 'idle') return null;

  return (


      {state === 'loading' && (


          🐥
          診断中...


      )}
      {state === 'done' && (

{result}

      )}
      {state === 'error' && (


          もう一度お試しください
          再試行


      )}


  );
}

Loading: Show something immediately. A spinner or pulsing text. 3 seconds of silence feels like a crash.

Done: Show the result. No animation needed — the content itself is the payoff.

Error: Short message + retry button. Never a raw error code.

Dismiss behavior

Three ways to close, all feel natural:

Press ESC
Click outside the overlay
Click the X button

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if (e.key === 'Escape') onClose();
  };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, []);

Don't make users hunt for a close button. ESC is the universal "get out of this."

The one thing that matters most

Speed of feedback. If clicking the button produces no visible response for even half a second, users will click it again, or assume it didn't work.

Show something within 100ms of the click. The AI response can take 3 seconds. The UI response cannot.

const handleDiagnose = async (idx: number) => {
  setDiagnosisState('loading');  // ← immediate, < 1ms
  const result = await invoke('diagnose', { idx });  // ← takes 3s
  setDiagnosisState('done');
  setResult(result);
};