# Improve clarity of the text-to-speech icon

| | |
|--|--|
| **ID** | `bug_011` |
| **Priority rank** | 6 |
| **Severity** | medium |
| **Category** | ui_polish |
| **Time range** | 236.0s – 245.0s |
| **Key moment** | 237.5s |
| **Affected element** | Text-to-speech icon |

> ⚠️ **About the red box in `screenshot.png`:** It is an AI-generated guess at the affected
> UI element. **It is correct most of the time but not always** — sometimes the actual
> element is near the box rather than exactly inside it, and occasionally the box lands
> on an unrelated element.
>
> When acting on this bug:
> 1. Read the **narration quote** and **detailed visual walkthrough** below first — they
>    describe what is actually wrong.
> 2. Look at the **full screenshot**, not just inside the red box.
> 3. If you need precise pixel coordinates, consult `omniparser_elements.json` in this
>    folder — it lists every UI element the detector found on this screen, with bounding
>    boxes and confidence. You can search by label or look at elements adjacent to the
>    red box.

## Description

In a chat thread, there is a small green icon that represents a voice or audio feature. The user did not understand its purpose from the icon alone, indicating that it is not sufficiently intuitive.

## What the narrator said

> "What's this thing right here? ... Oh. Okay, that icon needs to be better... I didn't know what this did."

## Detailed visual walkthrough

The video opens on a chat interface for an application named "Athena v3". The layout consists of a left sidebar listing various chats and a main content area displaying the currently selected chat, titled "John's Athena". In the main chat view, below a large instructional banner, there is a single message in the thread. This message is a small, green, rectangular element containing a simple white waveform-like icon next to the text "via iPhone".

The user moves their cursor over this green element and asks, "What's this thing right here?" They then click on it.

Immediately upon being clicked, the green element expands into a small audio player, revealing a play/pause button, a progress bar, and a duration timer. The audio begins to play. The user has a moment of realization and says, "Oh. Okay, that icon needs to be better." As they continue speaking, the text in the large banner at the top of the chat coincidentally updates. The user clarifies their feedback about the icon, stating, "I didn't know what this did."

The clip ends with the audio player still visible in the chat thread. The user's confusion demonstrates that the initial waveform icon was not sufficiently clear or intuitive to indicate that the element was a playable audio message.

## Suggested fix

Replace the current abstract icon with a more universally recognized symbol for audio playback, such as a speaker icon (e.g., Font Awesome's `fa-volume-up`) or a play button inside a circle.

## Bounding boxes drawn on `screenshot.png`

- **Text-to-speech icon** at `[ymin=560, xmin=395, ymax=581, xmax=563]` (normalized 0-1000)

## Files in this folder

- `clip.mp4` — Video clip (236.0s – 245.0s, plus 2s padding on each side)
- `screenshot.png` — Key frame at 237.5s with red bounding box (see note above on accuracy)
- `screenshot_raw.png` — Same frame, no annotations
- `clip_description.md` — The detailed walkthrough above as a standalone file
- `bug.json` — Structured data
- `omniparser_elements.json` — every UI element detected on this screen by the OmniParser YOLOv8 model, with pixel-space bounding boxes and confidence scores. Useful if the red box in `screenshot.png` is on the wrong element — you can pick a different one from this list.
- `motion/` — Additional keyframes showing motion/state-change (if any):
  _(none — this is a static issue)_
