Zehn Varianten, wie der Freigeben-Button und der Countdown räumlich verschmelzen — oder der Button selbst zum Countdown wird. Stephie's Feedback: „den Button zum Countdown machen, mit einem Ladebalken als Hintergrund."
Die Kernfrage: Wenn Countdown und CTA eins werden, braucht der Nutzer weniger Augenbewegung. Er sieht wie viel Zeit und was er tun kann an derselben Stelle. Alle Studien laufen einmal pro 10 s (Demo-Tempo). Farbwechsel: Grün → Amber ≤ 10 s → Rot ≤ 3 s.
01 / NahBar über Button
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Nah — Balken berührt ButtonTimer-Bar direkt am oberen Rand des Buttons. Räumlich verbunden, visuell getrennt. Sicherste Option.
02 / InnenFüllung drainiert
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Innen — Button-Hintergrund leert sichStephie's Idee. Grüner Hintergrund drainiert von rechts nach links. Button wird zum Timer. Am intuitivsten.
03 / ZahlCountdown im Label
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Zahl — Countdown im Button-Text„Freigeben · 00:47" — die Zahl lebt im Label. Kein visueller Countdown, nur Ziffern. Am trockensten.
04 / RingZirkulärer Button
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Ring — Timer umschließt ButtonSVG-Ring drainiert, runder Button in der Mitte. Prominent, erinnert an Kompass (013). Touch-Target = gesamter Kreis.
05 / RandBorder drainiert
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Rand — Border als TimerConic-gradient Border drainiert im Uhrzeigersinn. Subtiler als Innen — die Füllung bleibt, nur der Rand erzählt die Zeit.
06 / UnterText unter Button
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Unter — Zeittext direkt am ButtonKein Balken, nur Text: „47 Sekunden". Am informellsten. Für 45+ gut lesbar — keine Grafik, nur Sprache.
07 / GlowSchein schwindet
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Glow — Aura schwindetBox-Shadow um den Button schrumpft und wechselt die Farbe. Am subtilsten — der Timer ist ein Gefühl, keine Zahl.
08 / StapelBar am Button-Boden
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Stapel — Haarlinie am BodenHalbtransparente Bar lebt innen am unteren Rand des Buttons. Dezenter als 02, weil nur 4 px. Die Bar „lebt im Button".
09 / SplitAblehnen links, Freigeben rechts
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Split — Ablehnen minimal, Freigeben dominantAblehnen ist nur ein Icon-Button. Freigeben bekommt die volle Breite mit Hintergrund-Drain + integriertem Zähler. Maximum CTA-Hierarchie.
10 / VollButton = Countdown
2verify
Überweisung1.284,07 €
Helene Krüger-Achterberg
DE40 …3456 99
Voll — Button IST der CountdownHöher (64 px), breiter, mit großem Drain + Zähler im Label. Wenn die Füllung weg ist, ist die Zeit um. Der Button „stirbt" visuell. Die radikalste Verschmelzung.
Stephie's Wunsch
„Den Button selbst zum Countdown machen mit einem Ladebalken als Hintergrund." Das ist 02 Innen oder 10 Voll.
Empfehlung: 02 Innen ist die eleganteste Umsetzung der Idee. 10 Voll ist die radikalste.
Für 45+
06 Unter (Text statt Grafik) oder 03 Zahl (Countdown im Label) sind am lesbarsten. Kombinierbar mit subtiler Bar: 01 Nah + 06 Unter.
Sicherste Wahl für alle: 09 Split — maximale CTA-Hierarchie, integrierter Zähler, kein Zweifel was zu tun ist.
Kombinierbar
Studien sind Mix-fähig:
02 Innen (Füllung) + 03 Zahl (Ziffern im Label) = Drain + Zahl. Das Beste aus beiden Welten.
07 Glow auf Wartescreen + 02 Innen auf TX = unterschiedliche Emotion pro State.