uxzentrisch erörtert:
UX-Tipp: Setzt den Fokus des Cursors beim Seitenaufruf ins Eingabefeld

Mit JavaScript (oder HTML5) kann man den Cursor beim Laden der Seite automatisch in ein Formularelement setzen. Das spart in vielen Fällen Zeit und führt gerade bei Vielnutzern zu einem guten Nutzungserlebnis.

Ein Beispiel aus dem Alltag: Wenn ich google.de aufrufe, kann ich direkt mein Suchworte eintippen und Enter drücken und schon bin ich auf der Suchergebnisseite. Dafür muss ich nicht ein Mal meine Hand von der Tastatur zur Maus bewegen. Dieses ideale Nutzungsverhalten, das mir bei jeder Suche laut KLM allein 1.9 Sekunden reine Bewegungszeit spart, ermöglicht uns Google, in dem sie beim Seitenaufruf den Fokus auf das Sucheingabefeld setzen.

Beispiel StayScout: Dank unseres OpenInnovation-Forums setzen wir in StayScout seit einigen Wochen ebenfalls bewusst den Fokus in Eingabefelder: Auf der Startseite können Nutzer direkt mit dem Tippen ihrer Anmeldedaten beginnen. Auf dem Dashboard und den Gruppen-Übersichtsseiten sitzt der Fokus im Suchformular (dem wichtigsten Formular der Seite).

Negativ-Beispiel Bit.ly: Wie schon Björn in Tamims uxzentrisch-Artikel zu Bit.ly richtig kritisiert hat: Warum eine Seite wie Bitly den Fokus nicht direkt auf das Eingabefeld legt, ist mir ein Rätsel!

Technik: Für StayScout verwende ich ein einfaches Inline-JavaScript, das ich in den Formularen einfüge, um den Fokus zu setzen. Aber wer schon stärker auf HTML5 setzen möchte, sollte sich diesen tollen Artikel »A Form of Madness« anschauen, in dem das neue HTML5-Attribut »autofocus« verwendet wird – inklusive einem JavaScript-Fallback, der sehr ähnlich aussieht wie mein Einzeiler hier.

<script type="text/javascript">$(function() { $("input#email").focus(); } );</script>

Nachteil: Es gibt einen Nachteil bei dieser Technik: Setzt man den Fokus in ein Eingabefeld, ändert sich damit auch automatisch der Modus für Tastenkürzel im Browser.  Nutzer (wie ich), die gerne per Tastenkürzel den Back-Button nutzen (Alt + Pfeil nach Links), müssen jetzt erst aus dem Eingabefeld heraus klicken, damit der gewünschte Shortcut funktioniert.

Fazit: Gerade in Such- und Login-Szenarien und gerade bei Funktionen mit Applikationscharakter, werde ich zukünftig in meinen Konzepten gezielt den Fokus setzen (lassen). Diese Hilfe ist fast immer sinnvoll und wird noch viel zu selten genutzt – man darf es nur nicht übertreiben.

3 Kommentare

Maikel vor 5 Jahren

Den genannten Nachteil erlebe ich noch wesentlich häufiger:
Ich scrolle gerne mit Hilfe der Leertaste durch eine Seite. Am Ende einer Seite angekommen gelangt man mit der Leertaste auch oft zur folgenden Seite (z.B. ebay).

Wenn ich also, was oft geschieht, eine Reihe von Seiten besuche, um einen Überblick zu bekommen was es dort Neues gibt, dann ist es extrem lästig, wenn auf einer dieser Seiten das Scrollen mit der Leertaste »plötzlich« nicht funktioniert.

Ich sehe allerdings ein, daß der gesetzte Focus nützlich sein kann, wenn man eine Seite aufruft mit dem Ziel, dort etwas in das Suchfeld einzugeben. Zumindest bei mir, abgesehen von Google&Co., wohl eher die Ausnahme.

Tobias Jordans Autor vor 4 Jahren

Update: Gregor @gr2m hat ein kleines jQuery-Plugin geschrieben, dass auch den Fokus auf Dropdowns ermöglicht: https://gist.github.com/950125

Sven Wehmeier vor 3 Jahren

Jetzt 2 Jahre später gibt es noch weitere Probleme und zwar immer genau dann, wenn eine virtuelle Tastatur benötigt wird.

Wird die StayScout-Webseite mit einem iPhone aufgerufen, dann wird der Focus NICHT gesetzt. Ich selber habe ein JavaScript geschrieben, wo der Focus gesetzt wird, aber dann erscheint nicht die benötigte Tastatur.

Je nach Gerät, Browser und Betriebssystem habe ich folgende Szenarien festgestellt.
1. Fokus ist aktiv, Tastatur erscheint nur bei weiterem Druck auf das Eingabefeld
2. Fokus ist aktiv, Tastatur erscheint nicht wie in 1 beschrieben, Fokus auf »etwas« anderes setzen, dann wieder auf das Eingabefeld. Erst jetzt erscheint die Tastatur.

Daher setze ich den Fokus nur bei Desktop-Browser und genau wegen solchen Kleinigkeiten wird die Browserweiche wohl nie sterben.