"Enter": Navigation überspringen
  • Tab oder Shift + Tab - zum nächsten oder voherigen interaktiven Element springen
  • - innerhalb eines Elements navigieren
  • w a s d - innerhalb eines Elements navigieren
  • Enter - Element aktivieren
  • i - Tastaturbefehle anzeigen
  • CTRL / CMD + + oder - - Ansicht vergrößern oder verkleinern
  • Escape - Popup schließen
  • t - Tooltip anzeigen
  • m - zum Menü

Interactive-Studio

Animierte Eingabefelder

Animierte Eingabefelder (auf Engl.: Animated Form Fields) sind smarte Formularfelder, die mit Animationen lebendig werden und so die Nutzerführung verbessern. Statt starr zu sein, reagieren sie mit Bewegungen, Farbwechseln und vor allem mit kleinen Effekten, sobald Besucher sie klicken, antippen oder das Feld verlassen. Das macht Formulare moderner und gibt der Website ein direktes Feedback.

Wie sehen die Effekte aus?

Cinematic Webdesign lebt von animierten Eingabefeldern. Ein Klassiker im professionellen Webdesign sind Floating Labels: Das Label steht zunächst im Feld und „schwebt“ nach oben, sobald der Besucher anfängt zu tippen. Dazu kommen sanfte Übergänge in Form von Micro-Animationen, etwa wenn sich die Rahmenfarbe ändert oder ein Unterstrich animiert eingeblendet wird. Auch Feedback-Animationen sind beliebt: Bei einem Fehler vibriert das Feld ganz leicht oder leuchtet rot auf, damit sofort klar ist, was zu tun ist.

Warum sind animierte Formularelemente so beliebt?

Animierte Eingabefelder spielen eine große Rolle im modernen UX-Design und UI-Design, weil sie die Nutzererfahrung verbessern und Interaktionen intuitiver machen. Sie wirken professionell und steigern die Conversion Rate. Gerade bei Landingpages oder einem Website-Relaunch setzen viele Unternehmen auf solche subtilen, aber wirkungsvollen Details, um ihre neue Website frischer wirken zu lassen.

Animierte Eingabefelder und Accessibility

Mit dem richtigen Set-up lassen sich animierte Eingabefelder auch barrierefrei gestalten. Dafür nutzt unsere Digitalagentur echte Label-Elemente statt reiner Platzhaltertexte, ergänzt wichtige ARIA-Attribute für Screenreader wie TalkBack von Android und berücksichtigt so ganz nebenbei auch die Nutzer, die in ihren Systemeinstellungen Animationen reduziert haben.

So bleibt die Website auch mit modernen Effekten für alle zugänglich. Nice, oder?

Begierde Wissen