Kategorien
Webdesign

User Interface Design für Web-Anwendungen (2)

Fragen Sie sich manchmal, wie Sie Anwender am besten vermitteln können, wie das von Ihnen entwickelte Tool oder eine App zu bedienen ist? Teil 2 des Beitrags User Interface Design gibt Ihnen sechs praktische Beispiele und Techniken, die Sie in Ihren eigenen Web-Anwendungen und Websites einsetzen können.

Praktische Techniken für effektive Benutzerschnittstellen

Im ersten Teil dieses Beitrags ging es darum, was eine gute Benutzerschnittstelle ausmacht und um die wichtigsten Tools, mit denen Sie das erreichen. In diesem zweiten von insgesamt vier Teilen gehen wir nun an die praktische Umsetzung. Lassen Sie uns einige Techniken anschauen, die Sie in Ihren eigenen Web-Anwendungen und Websites einsetzen können.

Vorgestellte Techniken in diesem Beitrag
Bezüge herstellen durch freie Flächen
Abgerundete Ecken kennzeichnen Grenzen
Farben übermitteln Boschaften
Animationen sorgen für direkte Aufmerksamkeit
Fokus setzen: Schatten und abgedunkelte Hintergrunde
So betonen Sie die Kernhandlung
Beschriften Sie Schaltflächen mit Verben

Klingt paradox, aber es funktioniert – Bezüge herstellen durch freie Flächen

Freie Flächen zwischen den verschiedenen Inhaltselementen wie Überschriften, Text und Buttons sind hervorragend dazu geeignet, Bezüge zwischen den verschiedenen Elementen herzustellen. Durch einen geringeren Abstand können Sie Elemente gruppieren. Durch einen größeren Abstand können Sie die Bedeutung eines Elements oder einer Gruppe unterstreichen und diese von den übrigen Inhalten abheben. Nutzen Sie Freiflächen dazu, um zusammengehörige Kontrollkästchen oder Optionsschaltflächen zu gruppieren und eine Hierarchie der verschiedenen Bedienelemente einer Seite herzustellen.


Die Gmail-Symbolleiste enthält drei Blocks von Schaltflächen, die jeweils durch ein kleinen Freiraum voneinander getrennt sind. Die einzelnen Gruppen fassen Schalftlächen mit verwandten Funktionen zusammen.

Abgerundete Ecken kennzeichnen Grenzen

Um das Erscheinungsbild von Gruppen oder einzelnen Schaltflächen etwas ansprechender zu gestalten, werden häufig bgerundete Ecken eingesetzt. Neben dem hübschen Aussehen lassen sich durch diese Ecken-Effekt auch die Grenzen eines Objekts festlegen.

Die einzelnen Bereiche sind klar voneinander abgesetzt.

Wenn Sie eine abgerundete Ecke sehen, wissen Sie, dass es sich um das Ende des Containers handelt. Herkömmliche Ecken können ohne Lücke aneinander gesetzt werden, so dass die Grenze zwischen beiden nicht so deutlich wird. Gerundete oder nach innen gewölbte Ecken oder sonstige Effekte dieser Art, verstärken jedoch den Eindruck einer äußeren Grenze.

Farben übermitteln Botschaften

Mit Farben lassen sich verschiedene Bedeutungen sehr gut kommunizieren. Ein Beispiel: Mit Farben können Sie verschiedene Elemente voneinander unterscheiden. Nutzen Sie Farbcodes für unterschiedliche Arten von Schaltflächen – Rot für „destruktive“ Aktionen wie Löschen oder Verschieben, Blau kennzeichnet Standard-Schaltflächen und Grün ist den Aktionen Speichern und Aktualisieren vorbehalten.

Farbcodes können auch dazu eingesetzt werden, um zwischen den verschiedenen vom Anwender erzeugten Inhalte zu unterscheiden – etwa in Foren oder Blogs – und so ein schnelles Überfliegen und Priorisieren der vorhandenen Inhalte in einer Übersicht zu ermöglichen.

Animationen sorgen für direkte Aufmerksamkeit

Nutzen Sie Animationen, um Aufmerksamkeit zu wecken. In einigen Fällen reichen Farben und Kontraste nicht aus, um die Aufmerksamkeit der Nutzer zu wecken. Wenn Sie sicher gehen wollen, dass die Benutzer wichtige oder kritische Aktionen tatsächlich wahrnehmen, setzen Sie am besten Animationen ein. Das menschliche Auge ist daran gewöhnt, Bewegungen einzufangen – vor allem vor statischen Hintergründen. Verwenden Sie Animationen, um bestimmte Vorgänge zu visualisieren – etwa dann, wenn Nutzer einer web-basierten To-Do-Liste eine Aufgabe hinzufügen oder wenn Kunden im Online-Shop einen weiteren Artikel in ihrem Einkaufswagen „legen“. Sie könnte einen neu angelegten Artikel beispielsweise mit einer Leuchtfarbe hervorheben oder anderweitig markieren.


Wenn Sie eine neue Nachricht in Yammer anlegen, werden Slide-out und Highlight-Animationen kombiniert.


Goplan nutzt farbige Label links im Dashboard, um den Anwendern einen schnellen Überblick über die verschiedenen Inhalte wie Aufgaben, Noitzen und Blog-Posts zu geben.

Das ist vor allem für Ajax-lastige Anwendungen sehr nützlich, denn in dem Fall würden Seiten nicht jedesmal neugeladen, wenn eine bestimmte Handlung vorgenommen wurde. Daher ist es die Aufgabe der Schnittstelle, dem Anwender zu sagen, dass irgend etwas passiert ist.

Schatten und abgedunkelte Hintergründe setzen den Fokus

Eine andere hervorragende Methode, mit der Sie die Aufmerksamkeit der Anwender lenken können, ist der Einsatz von Schatten und abgedunkelten Hintergründen. Schatten können Sie rund um Pop-Up-Menüs und modale Fenster – sprich Dialogboxen – einsetzen. Sie dienen dazu, „visuellen Lärm“ zu dämpfen und die Aufmerksamkeit auf das betreffende Fenster zu lenken, um das sie gelegt sind. Zudem können Sie so den Kontrast zwischen einem sehr hellen Pop-Up und einem dunklen Hintergrund reduzieren. Bei modalen Fenstern bieten sich zudem semitransparente Ebenen an, die zwischen Hintergrund und Fenster eingeblendet werden, sobald sich das modale Fenster öffnet. Auch das reduziert die Ablenkung durch den Hintergrund und steigert so die Konzentration auf die Meldung im Fenster beziehungsweise die erforderlichen Eingaben ins Formular.

Mobile dunkelt den Hintergrund durch eine halbtransparente Ebene zwischen Dialogfenster und eigentlichem Seiteninhalt ab. Die Aufmerksamkeit der Anwender wird so auf das modlae Fenster gelenkt.

So betonen Sie die Kernhandlung

Viele Anwendungen haben Fenster, die primäre und sekundäre Handlungen darstellen. Beispiel Projekt-Management-Anwendung: Wenn Sie ein Projekt innerhalb einer solchen Anwendung erstellen, wird das zentrale Formular vermutlich Felder für die folgenden Angaben haben:

  • Name des Projekts,
  • Fertigstellungstermin,
  • Namen der Beteiligten,
  • Prioritätsstufe etc.

Im unteren Bereich des Formulars werden Sie vermutlich eine „Erstellen“-Schaltfläche sehen. Häufig wird es direkt daneben einen Button namens „Abbrechen“ oder einen Link geben. Die Schaltfläche zum Abbrechen des Vorgangs ist weniger wichtig, weil die Anwender Sie nicht so häufig benötigen. Wichtiger ist der „Speichern“-Button, deshalb sollten Sie dessen visuelles Gewicht erhöhen.

So könnten Sie „Speichern“ oder „Save“ als Schaltfläche anlegen, „Abbrechen“ jedoch nur als einfachen Hyperlink ohne optische Hervorhebung. Oder Sie gestalten beide Funktionen als Schaltflächen, geben einer aber eine dunklere Farbe wie das Beispiel von Mobilme in der vorherigen Abbildung zeigt.

Beschriften Sie Schaltflächen mit Verben

Wenn Menschen sich mit Ihrer Anwendung beschäftigen, werden Sie immer danach Ausschau halten, was Sie als Nächstes tun sollen. Beschriften Sie Schaltflächen daher nicht mit Substantiven wie „Abbruch“, sondern formulieren Sie es aktiv als Handlungsanleitung: „Abbrechen und zurückgehen“.


Backpack hat die Schaltflächen mit aktiv formulierten Handlungsanweisungen beschriftet. In der englischen Sprache geht das natürlich besser, da der gleiche Inhalt in deutscher Sprache meist mehr Platz einnimmt. Einen Versuch ist es dennoch wert.

Das lesen Sie im nächsten Teil dieser Serie

Mehr Effizienz durch Blocklinks
Auto-Fokus – den Fokus zurücksetzen auf Eingabefelder
Der Einsatz von Hover-Effekten zur Vereinfachung
Formulare erweitern
Beschriftungen in Eingabefeldern
Kontextsensitive Eingabe-Elemente
Icons effizient einsetzen

(mm),

Von Dmitry Fadeyev

Dmitry ist der Gründer der Usability Post, ein englischsprachiges Weblog in dem es um gutes Design und Usability geht. Dmitry steuerte gleich zwei Kapitel zum Smashing Book bei.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.