Kategorien
HTML UX

Simpler UX-Tipp für Input-Felder

In diesem Blogbeitrag möchten wir einen ganz einfachen Tipp geben, wie Eingabemöglichkeiten auf einer Webseite benutzerfreundlicher gestaltet werden können. Für die Umsetzung dieses Tipps muss HTML-Code bearbeitet werden können, aber keine Sorge, wir versuchen ganz klar zu beschreiben, was genau anzupassen ist.

Formulare ermöglichen Ihren Webseitenbesuchern mit Ihrer Webseite zu interagieren. Ein Formular kann entweder ein Kontaktformular oder auch eine einfache Suchfunktion sein. Durch Formulare werden meist Inhalte an einen Server im Hintergrund weitergeleitet, oder die eingegebenen Informationen werden im Browser bearbeitet. Was genau mit den eingegebenen Inhalten gemacht wird ist nicht wirklich wichtig. Wichtig ist aber, dass der Benutzer selbst Text eingeben kann.

Im HTML-Code sind Formulare meist in sogenannte <form>-Tags gebunden. Eingabemöglichkeiten zeichnen sich durch <input>- oder <textarea>-Tags aus.

Mit einem ganz einfachen Trick kann das Verhalten der Smartphone-Tastatur beeinflusst werden, also was dem Besucher angezeigt wird, wenn er die Eingabe von Text beenden möchte. Entweder steht „Fertig“ oder beispielsweise „Absenden“. Diese Funktion ist sowohl auf den meisten Android-Browsern und neu auch auf iOS-Browsern verfügbar.

Das rot markierte „Suchen“-Symbol wird durch das enterkeyhint-Attribut bestimmt. (Android Tastatur).

Wir verwenden dafür den folgenden Attribut in den Input-Feldern:

enterkeyhint="..." //siehe unten für die möglichen Optionen

Und nun ein paar Beispiele ?

Suche

Ein Suchfeld könnte demnach folgendermassen aussehen:

<form action="...">
  <label for="search">Suchen:</label>
  <input type="text" id="search" name="search" enterkeyhint="search">
</form>

Auf einem Smartphone unterwegs? Testen Sie die Funktion gleich hier:

Formulare mit mehreren Schritten – „weiter“

Für Formulare mit mehreren Eingabefeldern eignet sich der „next“-Button.

<form action="...">
<label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname" enterkeyhint="next">
  <label for="nachname">Nachname:</label>
  <input type="text" id="nachname" name="nachname" enterkeyhint="next">
</form>

Auf einem Smartphone unterwegs? Testen Sie die Funktion gleich hier:

Nur ein Feld oder das letzte Feld: Fertig.

Beim Abschluss der Eingabe oder wenn es nur ein Eingabefeld gibt eignet sich der „Fertig“-Button mit dem Attribut „done“.

<form action="...">
  <label for="anmerkung">Anmerkung:</label>
  <input type="text" id="anmerkung" name="anmerkung" enterkeyhint="next">
</form>

Auf einem Smartphone unterwegs? Testen Sie die Funktion gleich hier:

Für Nachrichten

Mit dem nächsten Attribut können Sie den Bestätigungs-Button in „Absenden“ oder eben „send“ umwandeln.

<form action="...">
  <label for="nachricht">Nachricht:</label>
  <textarea type="text" id="nachricht" name="nachricht" enterkeyhint="send"></textarea>
</form>

Auf einem Smartphone unterwegs? Testen Sie die Funktion gleich hier:

Weitere Attribute

Mit diesen weiteren Attributen können die folgenden weiteren Verhaltensweisen des Buttons beeinflusst werden:

„enter“Eingabe
„go“Los
„done“Fertig
„next“Weiter
„previous“Zurück
„search“Suchen
„send“Senden

Pro Tipp: Diese Attribute können auch bearbeitbaren Inhalten („content editable“) hinzugefügt werden:

<div contenteditable="..." enterkeyhint="done"></div>