Category: Usability, Performance

UX improvements: `enterkeyhint` to define action label for the keyboard of mobile devices

Usability

The enterkeyhint is a html attribute described in the HTML standard, which can be used to improve the context of action buttons of keyboards on mobile device.

The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.

It allows the following fixed values: enter, done, go, next, previous, search and send. Let’s have a look at those values and the resulting keyboard style on iOS:

<input>

The default behavior without any value.

<input enterkeyhint=”enter”>

The user agent should present a cue for the operation ‘enter’, typically inserting a new line.

<input enterkeyhint=”done”>

The user agent should present a cue for the operation ‘done’, typically meaning there is nothing more to input and the input method editor (IME) will be closed.

<input enterkeyhint=”go”>

The user agent should present a cue for the operation ‘go’, typically meaning to take the user to the target of the text they typed.

<input enterkeyhint=”next”>

The user agent should present a cue for the operation ‘next’, typically taking the user to the next field that will accept text.

<input enterkeyhint=”previous”>

The user agent should present a cue for the operation ‘previous’, typically taking the user to the previous field that will accept text.

<input enterkeyhint=”search”>

The user agent should present a cue for the operation ‘search’, typically taking the user to the results of searching for the text they have typed.

<input enterkeyhint=”send”>

The user agent should present a cue for the operation ‘send’, typically delivering the text to its target.

Photo by Melisa Hildt on Unsplash

Unarten im Netz – oder: wie werde ich meine Besucher los

Wer kennt sie noch, die guten alten Popups: kleine Browserfenster, die sich über den Browser gelegt haben. Und das meist, um Werbung anzuzeigen. Diese Zeiten sind zum Glück vorbei, da aktuelle Browser diese von Haus aus unterdrücken.

Doch es gibt eine neue Methode, um Benutzer auf einer Webseite abzuschrecken und zu verjagen: Inline-Overlays (also kleine “Popups” innerhalb der Webseite oder auch Modals genannt). Mit diesen wird der Nutzer meist nach der Emailadresse gefragt, um einen Newsletter zu abonnieren. Ok, ist nicht ganz so nervig wie ein blinkendes Werbe-Popup, aber dennoch unterbricht es den Lesefluss. Und dies meist dann, wenn man sich gerade am Anfang eines Artikels befindet, aus versehen den Mauszeiger aus dem Browserfenster bewegt oder etwas zurück scrollt, um Inhalte erneut zu lesen. Also bei Aktivitäten, die vermuten lassen, dass man das Fenster schließen möchte.

Aber warum? Eine Einschätzung zur Nutzerfreundlichkeit: 0 von 10. Der Nutzer bekommt teilweise nicht einmal die Möglichkeit, den Inhalt zu lesen und soll sich davor schon entscheiden einen Newsletter zu abonnieren. Meines Erachtens mehr abschreckend als nützlich. Denn in den heutigen Zeiten, in denen man immer noch sehr viel Spam im Postfach findet, wird es immer schwerer an Email-Adressen zu kommen.

Aber auch hier hilft Qualität statt Quantität: es wäre sinnvoller sich auf guten Inhalt zu konzentrieren, als zwanghaft zu versuchen, die Leute zu einem Newsletter zu überreden. Also liebe Webmaster: bitte lasst es!

Buttons in Dialogen: Ok und Abbrechen – rechts oder links?

Die Anordnung von Buttons ist meist abhängig vom Betriebssystem, diese Information sollte daher aus den entsprechenden User Interface Guidelines entnommen werden. Hier eine kurze Zusammenfassung:

Windows

Buttons sollten nach ihrer Aktion in folgender Reihenfolge (von links nach rechts) platziert werden:

OK/[Do it]/Ja
[Don’t do it]/Nein
Abbrechen
Annehmen (wenn vorhanden)
Hilfe (wenn vorhanden)

Abbrechen ist immer rechts vom Ok-Button.

MacOS

Ein Button der eine Aktion ausführt sollte am weitesten rechts platziert werden. Der Abbrechen-Button wird links daneben angeordnet. Bei MacOS ist Abbrechen also links von Ok.

Android

Die ablehnendste Aktion eines Dialogs ist immer auf der linken Seite. Ablehnende Aktionen bringen den Nutzer zurück zur letzten Ansicht.

Bestätigende Aktionen sind rechts. Diese Aktionen The affirmative actions are on the right. Bestätigende Aktionen führen den Prozess fort, welcher den Dialog aufgerufen hat. Bei Android ist Abbrechen also links von Ok.

Designrules im Webdesign, die häufig unterschätzt werden

Es gibt viele Dinge, welche zur Verbesserung der Benutzerfreundlichkeit einer Webseite beitragen. Doch auch wenn einige Designelemente gut aussehen, sie könnten einen Einfluss auf die Benutzerfreundlichkeit haben.

Zentrierte Logos schaden der Navigation auf Webseiten

Getting back to the homepage is about 6 times harder when the logo is placed in the center of a page compared to when it’s in the top left corners. (Quelle: nngroup.com)

Buttons sollten keinen Hand-Cursor haben

There is this belief that the hand cursor means “clickable”, but this is incorrect and potentially problematic. My hope is that by the end of the article, you’ll never want to use the hand cursor for buttons ever again. (Quelle: medium.com)

Ist das “mein” oder “dein” Interface?

Wann sollte man “mein” oder “dein” in Benutzeroberflächen nutzen? Kurz zusammengefasst:

  • mein (o.ä.) nutzen, wenn der Nutzer mit dem Produkt interagiert, beispielsweise klicken von Buttons oder auswählen von Checkboxen. Solche Wörter sollten aber nur verwendet werden, um etwas besonders hervor zu heben.
  • dein (o.ä.) verwenden, wenn das Produkt Fragen stellt, Anweisungen gibt oder dem Nutzer Dinge beschreibt. Eben so, wie es ein persönlicher Assistent tun würde.

(Quelle: medium.com)

Design Rules für Eingabefelder

Eingabefelder sind allgegenwertig. Jede Interaktion mit Benutzeroberflächen, egal ob über Desktops oder mobile Endgeräte, erfordert Eingabefelder. Kurz zusammengefasst, welche Punkte hier wichtig sind:

  • Position von Labels: die beste Position für Labels ist links oberhalb vom Eingabefeld. Damit wurden Formulare am schnellsten ausgefüllt. Labels links neben dem Input fuhrten hingegen zu einer Verlangsamung beim Ausfüllen, da hier die Augenbewegung deutlich zunimmt.
  • Platzhalter: Platzhalter sind hilfreich, jedoch nicht wenn diese beim Fokus auf das Eingabefeld verschwinden. Also lieber ein aussagekräftiges Label verwenden. Eine neue Methode, bei dem der Platzhalter beim Fokus auf das Eingabefeld zum Label wird, könnte diesen Nachteil ausmerzen.
  • Keyboard: einige Eingabefelder erfordern nur Zahlen als Eingabe. Auf mobilen Endgeräten kann die Nummerblock-Tastatur sehr hilfreich sein. Aktivieren lässt sich diese durch “tel” als type oder das Attribut “pattern=”[0-9]*”.

(Quelle: uxbooth.com – The New Rules of Form Design)

Cards

Cards sind eine beliebte Möglichkeit, mehrere Elemente auf einer Seite darzustellen. Eigentlich sehr einfach umzusetzen, doch es gibt einige Dinge, die man beachten sollte. Auf zurb.com sind 5 Fehler aufgelistet, die häufig beim Erstellen von Cards gemacht werden. dazu gehören:

  • Große Freiräume durch unterschiedliche Höhen der Cards
  • Zu viele Cards auf einmal
  • Zu viele Aktionen innerhalb einer Card
  • Zu viele Inhalte in einer Card
  • Graphiken in Cards, wenn diese nicht zwingend benötigt werden.

(Quelle: zurb.com – 5 Common Mistakes Designers Make When Using Cards In Design)