UX-sicherer Audio-Playback (kein versehentliches Starten) #3

New Issue

tobias · 2026-04-20T02:45:44+02:00

tobias commented

2026-04-20 02:45:44 +02:00

Audio darf nicht durch einen einfachen Klick starten — zu leicht versehentlich ausgelöst, besonders auf Mobile.

Recherche: UX-Patterns

Pattern A: Explicit Play Button

Zitat-Card zeigt Text + Metadaten, aber KEIN Play bei Klick auf die Card
Separater Play-Button (▶) innerhalb der Card, visuell abgesetzt
Card-Klick öffnet Detail-View, Play-Button startet Audio
Pro: Klar, bekannt (Spotify, Apple Podcasts)
Contra: Zusätzlicher Klick

Pattern B: Long Press / Swipe

Kurzer Tap: Detail-View öffnen
Long Press (>500ms): Audio abspielen, haptisches Feedback
Swipe Right: Play
Pro: Kein versehentliches Starten
Contra: Nicht discoverable, Desktop-unfriendly

Pattern C: Preview + Confirm

Klick auf Card zeigt Waveform-Preview mit Play-Button
Erst der Play-Button im Preview startet das Audio
Pro: Visuelles Feedback, bewusste Entscheidung
Contra: Zwei Klicks

Pattern D: Sticky Audio Bar (empfohlen)

Klick auf Card lädt das Zitat in die Audio-Bar am unteren Rand
Audio-Bar zeigt Zitat-Text + Play/Pause + Fortschritt
Audio startet NICHT automatisch — User muss Play in der Bar drücken
Zweiter Klick auf dieselbe Card startet direkt (Toggle-Verhalten)
Pro: Bekannt (Spotify, SoundCloud), kein versehentliches Starten, persistent
Contra: Erster Play braucht zwei Aktionen

Empfehlung

Pattern D (Sticky Audio Bar) — kombiniert mit Pattern A (expliziter Play-Button in der Card als Shortcut). Card-Klick = Detail-View, Play-Button-Klick = direkt abspielen.

Audio darf nicht durch einen einfachen Klick starten — zu leicht versehentlich ausgelöst, besonders auf Mobile. ## Recherche: UX-Patterns ### Pattern A: Explicit Play Button - Zitat-Card zeigt Text + Metadaten, aber KEIN Play bei Klick auf die Card - Separater Play-Button (▶) innerhalb der Card, visuell abgesetzt - Card-Klick öffnet Detail-View, Play-Button startet Audio - **Pro:** Klar, bekannt (Spotify, Apple Podcasts) - **Contra:** Zusätzlicher Klick ### Pattern B: Long Press / Swipe - Kurzer Tap: Detail-View öffnen - Long Press (>500ms): Audio abspielen, haptisches Feedback - Swipe Right: Play - **Pro:** Kein versehentliches Starten - **Contra:** Nicht discoverable, Desktop-unfriendly ### Pattern C: Preview + Confirm - Klick auf Card zeigt Waveform-Preview mit Play-Button - Erst der Play-Button im Preview startet das Audio - **Pro:** Visuelles Feedback, bewusste Entscheidung - **Contra:** Zwei Klicks ### Pattern D: Sticky Audio Bar (empfohlen) - Klick auf Card lädt das Zitat in die Audio-Bar am unteren Rand - Audio-Bar zeigt Zitat-Text + Play/Pause + Fortschritt - Audio startet NICHT automatisch — User muss Play in der Bar drücken - Zweiter Klick auf dieselbe Card startet direkt (Toggle-Verhalten) - **Pro:** Bekannt (Spotify, SoundCloud), kein versehentliches Starten, persistent - **Contra:** Erster Play braucht zwei Aktionen ## Empfehlung Pattern D (Sticky Audio Bar) — kombiniert mit Pattern A (expliziter Play-Button in der Card als Shortcut). Card-Klick = Detail-View, Play-Button-Klick = direkt abspielen.

tobias referenced this issue from a commit

2026-04-20 03:02:00 +02:00

Webapp v2: UX-sicheres Audio, Transkript-Mitlesen, Volltextsuche

tobias closed this issue

2026-04-23 22:27:32 +02:00

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: tobias/podcast-mindmap#3