web-dev-qa-db-de.com

Umgang mit Benutzern, die ohne Eingabefokus tippen

Ein Problem, das ich bei unerfahrenen Webbenutzern wiederholt beobachte, ist, dass sie gelegentlich mit dem Tippen beginnen, ohne zuerst ein Eingabefeld richtig auszuwählen (zu fokussieren). Ein typisches Muster, das ich sehe, ist das Folgende: Der Benutzer klickt direkt außerhalb des Eingabefelds und beginnt mit der Eingabe und Suche - er erfährt erst, dass sein Text nicht eingegeben wurde, wenn er zum Betrachten zurückkehrt der Bildschirm. Ich denke, es gibt verschiedene Gründe, warum dieses Problem auftritt: Eine schlechte Maussteuerung oder eine schlechte Motorsteuerung scheinen am bedeutendsten zu sein.

Ich wollte eine Meinung dazu, was Ihrer Meinung nach die beste Strategie für den Umgang mit diesem Problem ist. Sollte es einfach ignoriert werden oder sollte die Anwendung einen proaktiven Schritt unternehmen, um damit umzugehen?

15
Brendon

Der Autofokus ist nicht ideal. Dies kann auf einigen sehr einfachen Einzelaufgaben-Seiten sinnvoll sein, z. B. auf einem Anmeldebildschirm, auf dem die NUR zwei Felder Benutzername und Kennwort sind.

Auf einer komplexeren Seite kann dies jedoch eine enorme Barriere für die Barrierefreiheit darstellen. Wenn Sie beispielsweise ein großes komplexes Formular auf einer Seite haben, dessen erstes Feld beispielsweise "ID" lautet, lädt eine Person, die einen Bildschirmleser verwendet, die Seite und hört "Formular. Feld: ID". Was absolut keinen Kontext darüber gibt, worum es auf dieser Seite geht. Im Idealfall können sie zuerst Dinge wie den Titel der Seite, einführende Inhalte usw. lesen.

Lesen Sie dazu weiter: http://www.brucelawson.co.uk/2009/the-accessibility-of-html-5-autofocus/

In Bezug auf die Benutzerfreundlichkeit ziehen es viele Menschen vor, die Kontrolle über ihren eigenen Cursor zu behalten. Während Autofokus für einige eine Verbesserung der Benutzerfreundlichkeit darstellt, kann er für andere ein Problem für die Benutzerfreundlichkeit sein. Ein weiterer Grund, die Autofokus-Route zu vermeiden.

Um zu Ihrer Frage zurückzukehren, beachten Sie, dass Sie es mit Benutzern von Hunt-and-Peck-Computern zu tun haben. Sie existieren sicherlich. Und wir müssen sie aufnehmen. Aber nicht zum Nachteil anderer Benutzer. ;)

Ich würde vorschlagen, einfach einen größeren Zielbereich zu erstellen, auf den sie sich konzentrieren können. Machen Sie die Felder größer.

Anstelle des oberen "Standards" stylen Sie ihn wie den unteren.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ein zusätzlicher Bonus ist, dass dies die Verwendung für Touch-Geräte erheblich vereinfacht.

4
DA01

Die beste Strategie ist platzieren Sie den Cursor in das erste erwartete Eingabefeld, sobald die Seite geladen wird. Entfernen Sie die Notwendigkeit, das Feld vollständig auszuwählen. Wenn der Benutzer jedoch mehr als eine Alternative haben kann, sollten Sie die automatische Auswahl vermeiden, da dies zu Verwirrung führen kann.

Verwenden Sie für die nächsten Felder eine geeignete Tab-Navigation, um ein mausfreies Tippen zu ermöglichen.

beispiel: Schauen Sie sich die Anmeldeseiten von Facebook und Google Mail an. Sobald die Seite geladen ist, befindet sich der Cursor bereits im Feld Benutzername.


Wenn Sie die Benutzer ärgern die ihre Lautsprecher eingeschaltet gelassen haben möchten, können Sie Fehlertöne machen, wenn der Benutzer beginnt, Schlüssel außerhalb der Eingabefelder zu mischen. (Das Problem ist, dass es die Tastaturnavigationsverknüpfungen des Browsers durcheinander bringt.)

10
rk.

Ich würde einen proaktiven Ansatz wählen, der den Benutzer nicht durch Piepen oder Autofokussieren stört.

Wenn Benutzer direkt außerhalb des Felds klicken, können die Eingabefelder über JavaScript schrittweise erweitert werden, um dieses Problem zu beheben. Das Eingabefeld kann von einem <div> oder einem anderen Element umgeben sein, das einen anklickbaren Leerraum bietet. Wenn auf das übergeordnete Element des Eingabefelds geklickt wird, auf das JavaScript warten kann, wird das Eingabefeld des Elements angezeigt Kind würde Fokus gewinnen.

Statistisch gesehen liefert dies möglicherweise keine lohnenden Ergebnisse, aber wenn Sie das gleiche Problem häufig sehen, kann es sich lohnen, da die Entwicklung nicht zu lange dauern sollte. Ich habe von ähnlichen Implementierungen auf Schaltflächen gehört, bei denen der Klickbereich etwas größer ist als die visuelle Schaltfläche selbst.

7
Michael

Abhängig von Ihrem Seitenlayout und seinem Zweck kann die automatische Fokussierung eines Feldes hilfreich sein.

Beachten Sie, dass es möglicherweise keine gute Idee ist, wenn der Hauptpunkt der Seite nicht ist, eine Eingabe auszufüllen.

Wenn sich das betreffende Feld nicht oben auf der Seite befindet, tun Sie dies nicht. Ich habe festgestellt, dass beim automatischen Fokussieren eines Felds, das sich nicht oben befindet, die Seite teilweise nach unten (zur Eingabe) gescrollt wird. Dies ist ein merkwürdiges Verhalten, wenn Sie nicht verstehen, warum.

Eine andere Lösung (vorausgesetzt, Sie arbeiten mit HTML) könnte darin bestehen, die Eingabe in ein entsprechendes Label-Tag zu verpacken. Dann können Sie mit CSS das Etikett etwas auffüllen. Auf diese Weise wird das Feld durch Klicken in oder in der Nähe der Eingabe fokussiert. Ich habe diese Methode noch nie ausprobiert, aber es ist gültiges HTML gemäß W3.

3
Liam Johnston

Ich würde rk zustimmen. Ein proaktiver Ansatz scheint übertrieben zu sein wie z. B. ein Piepen beim Tippen außerhalb des Textfeldfokus.

Um zu verstehen, wo die Benutzer am wahrscheinlichsten mit dem Tippen beginnen, wenn sie Ihre Website starten, ist es jedoch entscheidend für die Strategie des automatischen Fokus auf das Laden von Seiten. Wenn die Leute daran gewöhnt sind und das falsche Feld im Fokus steht, wäre dies nur ein Ärger und kein großes Problem. Wenn Sie jedoch die Analyse verkabelt haben, können Sie sehen, wie viele Personen sich außerhalb Ihres automatisch fokussierten Felds konzentrieren, bevor Sie andere Aktionen auf der Seite ausführen, um sicherzugehen, was die Benutzer tun.

2
Jeff O