In dieser Artikelserie dreht sich alles um die Anwenderfreundlichkeit von Benutzerschnittstellen für Web-Anwendungen. Teil 1 beleuchtet den theoretischen Hintergrund. In Teil 2 ging es um die farbliche Gestaltung, den Einsatz von Layern, zum Abdunkeln des Hintergrunds und Methoden, mit denen Sie die Aufmerksamkeit der Anwender lenken können.
Vorgestellte Techniken in diesem Beitrag:
Mehr Effizienz durch Blocklinks
Den Fokus automatisch in die Wiederholungsschleife setzen
Bedienschaltflächen per Hover-Effekt ein- und ausblenden
Eingabefelder automatisch ergänzen
Beschriftungen in Eingabefeldern
Kontextbezogene Schnittstellen-Elemente
Setzen Sie Symbole sparsam ein
Mehr Effizienz durch Blocklinks
Block-Links mit Padding sind aufgrund der größeren Fläche mit dem Mauszeiger wesentlich einfacher und bequemer zu „treffen“ als reine Textlinks. Web-Anwendungen vertrauen auf HTML-Blockelemente, was einen üppigen Gebrauch des Anker-Elements (besser bekannt als „Link“) bedeutet.
Das Anker-Element wird standardmäßig „inline“ dargestellt, was bedeutet, dass seine Breite und Höhe dem darin befindlichen Text entspricht. Das heißt wiederum, dass der klickbare Bereich des Links lediglich der Texthöhe und -breite entspricht. Indem wir dem Anker-Element „Padding“ zufügen, machen wir es größer.
Wenn Sie Hyperlinks, die in einer Sidebar untereinander aufgelistet sind, in „Block“ umwandeln, ist das noch besser. Sie können den Elementtyp über die CSS-Eigenschaft display bestimmen. Damit definieren Sie den Link als Blockelement, so dass seine Höhe und Breite nicht länger vom Text bestimmt wird, sondern sich über die gesamte Höhe und Breite des Containers erstreckt. Diese Standardeinstellung von Blockelementen ist ideal für vertikale Linklisten in einer Sidebar.
MobileMe nutzt Links mit Padding in der Sidebar-Navigation. Die großen Flächen lassen sich bequem anklicken.
Den Fokus automatisch in die Wiederholungsschleife setzen
Formularlastige Anwendungen können davon profitieren, dass das Haupteingabefeld beim Laden der Web-Seite automatisch aktiviert wird. Die Anwender können dann bereits beim Laden der Seite mit ihrer Eingabe beginnen.
Praxis-Beispiel: Suchmaschinen wie Google setzen den Fokus auf das zentrale Eingabefeld, da anzunehmen ist, dass die ankommenden Web-Wanderer eine Suchanfrage in dieses Feld eingeben möchten. Vorteil: Die Nutzer können beim Laden der Seite sofort mit dem Tippen beginnen.
Dieses Prinzip können Sie auf andere Anwendungen, wie zum Beispiel auf Online-Shops, übertragen. Wenn ein Besucher einen Artikel in seinen Warenkorb befördert hat, möchte er möglicherweise noch einen weiteren dazu legen. Setzen Sie den Fokus daher erneut auf das entsprechendee Eingabefeld, um schnell aufeinanderfolgende Eingaben zu ermöglichen.
Tadalist ermöglicht es, Aufgaben zügig einzugeben. Wenn Sie eine neue Aufgabe anlegen und „Enter“ drücken, wird das Eingabefeld erneut eingeblendet.
Bedienschaltflächen per Hover-Effekt automatisch ein- und ausblenden
Viele Anwendungen haben kontextbezogene Schaltflächen wie „Weiterleiten“, „Antworten“ oder „Löschen“ zum Bearbeiten der vorhandenen Artikel, Dateien, E-Mails, Blogposts oder Twitter-Feets – nennen wir es kurz Inhalte. Damit es einfacher wird, die Funktionen auf die einzelnen Inhaltselemente anzuwenden, stehen die Befehlsschaltflächen meist direkt neben oder unter den Inhaltselementen. Bei umfangreichem Content sorgt das für unzählige „Löschen-„Schaltflächen.
Solche Dubletten vermeiden Sie per Hover. Sie können Ihre Schnittstellen erheblich entrümpeln und schlanker machen, wenn Sie kontextbezogene Funktionen für das jeweils aktive Inhaltselement über die CSS-Eigenschaft Hover ein- und ausblenden.
Beispiel Twitter: Wenn die Anwender mit dem Mauszeiger über ein Tweet fahren, werden die Funktionen „Antworten“ und „Zu Favoriten hinzufügen“ eingeblendet. Bei den nicht-aktiven Tweets sind diese Schaltflächen nicht zu sehen.
Einwurf: Stichwort „Auffindbarkeit“
Bevor Sie solche Hover-Bedienelemente ensetzen, sollten Sie kurz erwägen, ob Ihre Zielgruppe diese Elemente auch entdecken kann. Die Anwender Ihrer Apps können die Elemente schließlich nur dann nutzen, wenn sie sie auch finden. Sind die Elemente also prominent genug, so dass die Anwender unweigerlich darüber stolpern werden? Die meisten Menschen neigen ohnehin dazu, mit dem Mauszeiger suchend über den Bildschirm zu fahren, weil sie erwarten, irgendwelche Links oder Tool-Tipps zu finden. Das ist also kein Problem.
Nutzer mobiler Geräte, wie etwa Telefone, haben möglicherweise keinen Mauszeiger. Damit wären Ihre Hover-Bedienelemente für diese Nutzer-Gruppe unzugänglich.
Twitter zeigt die „Antworten“ – und „Zu Favoriten hinzufügen“-Schaltflächen beim Hovern rechts neben den Tweets.
Eingabefelder automatisch ergänzen
Sollte Ihr Formular oder Ihre Anwendung multiple Eingabefelder erfordern – entweder zum Einfügen mehrerer E-Mail-Anhänge oder zum Hochladen mehrerer Dateien, können Sie erweiterbare Formulare nutzen, um das elegant zu erledigen.
Da Anwender zu einem Zeitpunkt immer nur mit einem Feld arbeiten können, sollten Sie jeweils nur ein Feld sichtbar machen und das nächste erst dann einblenden, wenn die Eingabe ins erste Feld abgeschlossen ist. So halten Sie Ihre Formulare schlank und die Eingabemöglichkeiten dennoch komfortabel.
Die Projektmanagement-App „Basecamp“ erlaubt es, mehrere Dateien an eine Nachricht anzuhängen. Es wird jedoch immer nur ein einzelnes Eingabefeld angezeigt.
Beschriftungen in Eingabefeldern
Schnittstellen zu vereinfachen, ist gleichbedeutend mit der Beschränkung aufs Wesentliche. Dies erfordert sorgfältige Überlegung, was verzichtbar ist, um Platz für die wirklich wichtigen Bedienelemente zu schaffen.
Tipp: Setzen Sie Beschriftungen in die Eingabefelder statt links daneben oder darunter. So sparen Sie nicht nur Platz, sondern auch mehr Klarheit. Selbst der schusseligste Anwender versteht sofort, was wozu gehört.
MobileMe hat den Login-Bildschirm durch Beschriftungen in den Eingabefeldern sehr kompakt gestaltet.
Kontextbezogene Schnittstellen-Elemente
Gelegentlich ist es erforderlich, zusätzliche Optionen für die etwas fortgeschritteneren Benutzer einer Anwendung anzubieten. Dennoch möchten Sie Ihre Schnittstelle nicht überladen. Eine gute Möglichkeit für solche Zwecke sind kontextbezogene Schnittstellen-Elemente, die bei Bedarf aktiv werden.
Beispiel: Wenn Sie irgendwo in Ihrer Anwendung ein Suchfeld mit erweiterten Suchmöglichkeiten anbieten, können Sie standardmäßig nur die Suchleiste einblenden. Wenn der Cursor ins Eingabefeld gesetzt wird, können Sie auch die Schaltflächen für die erweiterten Optionen einblenden. So bleibt Ihre Schnittstelle schlank und übersichtlich – die zusätzlichen Funktionen sind jedoch immer nur einen Klick entfernt.
Vimeo blendet erweiterte Suchfunktionen ein, wenn Sie mit dem Mauszeiger über die Suchleiste fahren. So kommen erfahrene Anwender bei Bedarf an zusätzliche Funktionen.
Setzen Sie Symbole sorgfältig und sparsam ein
So schön Icons auch sind und egal, wie ansprechend Sie eine Schnittstelle damit optisch aufpeppen können, vor dem Einsatz von Icons sollten Sie zwei Punkte bedenken:
- Icons sind fast immer weniger eindeutig als Worte.
- Icons funktionieren dann am besten, wenn sie sparsam eingesetzt werden.
Setzen Sie Icons sparsam ein und achten Sie darauf, dass sich die einzelnen Symbole gut voneinander unterscheiden. Wechselnde Farben und Formen helfen den Anwendern, das gewünschte Symbol schnell zu finden.
Geschickt eingesetzt, vereinfachen Symbole den Umgang mit Benutzerschnittstellen erheblich.
Das lesen Sie im nächsten und letzten Teil dieser Serie:
- Informieren Sie die Anwender über Ladezeiten
- Binden Sie Stati-Meldungen für Schaltflächen ein
- Hilfreiche Meldungen nach der Installation
- Hinweise auf Funktionen und Neuigkeiten
- Die Rückschritt-Funktion sinnig einbinden
- Wiederherstellen darf ebenfalls nicht fehlen
- Effektive Bestätigungsmeldungen
