Worum geht es beim so genannten User Interface Design, sprich: der Gestaltung von Benutzerschnittstellen, eigentlich? Was macht eine Benutzerschnittstelle effektiv und leicht verständlich. Vor allem aber: Wie setzen Sie das als Webdesigner oder Web-Entwickler technisch um? Dieser Beitrag beleuchtet in einem theoretischen und einem praktischen Teil die verschiedenen Aspekte visuellen Interface Designs für moderne Web-Anwendungen.
Beim User Interface Design geht es um mehr als Schaltflächen und Menüs. Es geht um die Interaktion zwischen Anwender und Gerät – häufig handelt es sich dabei um die Interaktion vieler Anwender mit diesem Gerät. Anders ausgedrückt: Beim Design von Anwenderschnittstellen geht es nicht so sehr darum, wie ein Produkt aussieht, sondern eher darum, wie es funktioniert. Wenn es gut funktionieren und die Anwendung Spaß machen soll, sind acht verschiedene Kriterien zu beachten, die sich jeweils gegenseitig beinflussen. Alle Aspekte unter einen Hut zu bringen, gleicht gewissermaßen der Quadratur des Kreises – sollte aber der Anspruch eines jeden User Interface Designers sein.
Weitere Artikel zum Thema Usability
Usability für Websites – Definition
Der Kompromiss zwischen Usability und Design
Was ist ein User Interface?
„Die Art, wie Sie eine Aufgabe mit einem bestimmten Produkt erledigen – das, was Sie tun, und das, wie die Software reagiert – das ist das Interface.“
Jef Raskin – Professor für Informatik, Computer-Interface-Designer
Beim User Interface Design geht es um mehr als Schaltflächen und Menüs. Es geht um die Interaktion zwischen Anwender und Programm beziehungsweise dem Gerät – häufig handelt es sich dabei um die Interaktion vieler Anwender mit diesem Gerät. Mit anderen Worten ausgedrückt: Beim Design von Anwenderschnittstellen geht es nicht so sehr darum, wie ein Produkt aussieht, sondern eher darum, wie es funktioniert. Neben der Anordnung von Buttons und der Auswahl von Farben geht es vor allem darum, die richtigen Werkzeuge für den jeweiligen Zweck auszuwählen.
Benötigt ein bestimmtes User Interface überhaupt Schaltflächen? Falls ja, welche Aufgabe haben diese Schaltflächen? Welche Informationen müssen Sie den Anwendern geben, damit sie verstehen, wie Ihre Anwendung arbeitet und wie sie damit auf einfache Weise ihre Aufgabe erledigen können.
Tipps vom Drag-&-Drop-Erfinder Jef Raskin
Es ist wichtig, in der Produktentwicklung so früh wie möglich mit der Arbeit an der Benutzerschnittstelle zu beginnen. So handhabte es zumindest der 2005 gestorbene Jef Raskin, der als User Interface Designer bei Apple unter anderem die Drag-and-Drop-Funktion erfand.
Nach den Erfahrungen von Raskin sei für den Kunden die Benutzerschnittstelle das eigentliche Produkt. Kunden sehen die Benutzeroberfläche und interagieren damit. Was sich in der Backend-Architektur von Web-Anwendungen abspielt, wird von den Anwendern gar nicht wahrgenommen. Ein gut gemachtes User Interface hat also entscheidenden Einfluss darauf, wie angenehm Kunden den Umgang mit einem Produkt empfinden und wie einfach Ihr Produkt zu bedienen ist.
Gestalten Sie daher lieber zuerst die Benutzerschnittstelle und codieren Sie dann die Backend-Anwendung, die das User Interface zum Laufen bringt. Das ist besser als der umgekehrte Ansatz – erst das Backend zu programmieren und im zweiten Schritt ein Interface darüber zu stülpen.
Was zeichnet eine gute Benutzerschnittstelle aus?
Bevor wir uns daran machen, eine Benutzerschnittstelle für unser Produkt zu entwerfen, kann ein wenig Therorie und das Verständnis dafür, welche Eigenschaften eine gute Benutzerschnittstelle auszeichnen, nicht schaden.
Worum sollten Sie sich bei Ihren eigenen User Interfaces stets bemühen? Hervorragende Anwenderschnittstellen zeichnen sich generell durch diese acht Merkmale aus:
1. Klarheit
Die Schnittstelle vermeidet Unklarheiten, indem sie alle Aspekte durch Sprache, hierarchische Gliederung und Sinnbilder für visuelle Elemente deutlich macht. Verständliche Interfaces erübrigen Handbücher. Sie garantieren außerdem, dass Benutzer weniger Fehler bei ihrer Anwendung machen.
2. Präzision
Es ist einfach, Punkt 1 durch jede Menge Erklärungen und alle möglichen Beschriftungen zu erreichen. Das führt jedoch zu einer aufgeblasenen Schnittstelle, bei der zu viel auf einmal auf dem Display angezeigt wird. Zu viele Informationen erschweren die Suche nach dem Gewünschten, was die Benutzung der Schnittstelle nervig macht. Die wahre Herausforderung besteht somit darin, das Interface klar und präzise zu gestalten.
3. Vertrautheit
Etwas erscheint vertraut, wenn Sie sich an eine vorhergehende Erfahrung, die Sie mit einem Gegenstand gemacht haben, erinnern. Selbst wenn ein Anwender, eine Schnittstelle zum ersten Mal benutzt, können bestimmte Elemente vertraut sein. Verwenden Sie Sinnbilder aus dem täglichen Leben, um die Bedeutung von Elemente zu erklären. Beispiele: Symbole mit Ordnern oder Registerkarten werden häufig als Navigationselemente für Internetseiten und Computeranwendungen eingesetzt. Menschen erkennen die Symbole als Navigationselement, weil sie mit dem Sinnbild des Ordners vertraut sind.
4. Reaktionsvermögen
Zu diesem Schlagwort gehören verschiedene Aspekte. Zunächst einmal bedeuted Reaktionsvermögen Schnelligkeit, eine Schnittstelle darf sich nicht lahm anfühlen. Zweitens sollte das Interface dem Anwender mitteilen, ob seine Eingabe erfolgreich bearbeitet werden kann und wieviel der Aufgabe bereits erledigt ist.
5. Einheitliches Erscheinungsbild
Sorgen Sie für ein einheitliches Aussehen Ihrer Anwenderschnittflächen innerhalb der gesamten Anwendung. Das steigert den Wiedererkennungswert und damit den Bedienungkomfort – Benutzer finden sich besser in einem Programm zurecht. Sobald Anwender gelernt haben, ein bestimmtes Element zu bedienen, können sie dieses Wissen auf die Handhabung weiterer Elemente und Funktionen übertragen – vorausgesetzt, das User Interface Design ist einheitlich.
6. Ästhetik
Die Schnittstelle muss nicht schön sein, um gut zu funktionieren. Die Benutzer Ihrer Anwendung können Sie mit einem ansprechend gestalteten Interface allerdings begeistern, so dass sie Ihr Interface oder Produkt gerne nutzen. Und was ist besser als zufriedene Kunden?
7. Effizienz
Zeit ist Geld – ein gutes Interface sollte die Produktivität Ihrer Kunden steigern, indem Sie Shortcuts verfügbar machen und die Schnittstelle schlüssig gestalten. Schließlich gehört das zu den Schlüsseleigenschaften der Technik. Sie erlaubt uns, Aufgaben in kürzerer Zeit und mit weniger Mühe zu erledigen, indem sie den Großteil der Arbeit für uns erledigt.
8. Versöhnlichkeit
Jeder macht Fehler. Die Art und Weise, wie Ihre Anwendung auf Fehler reagiert, ist ein Indikator für deren Qualität. Ist es einfach, Aktionen rückgängig zu machen? Können gelöschte Dokumente einfach wiederhergestellt werden? Ein gutes Interface sollte Anwender nicht für deren Fehler bestrafen, sondern dabei behilflich sein, die Fehler wieder auszubügeln.
Eine Benutzerschnittstelle zu gestalten, die alle acht Kriterien erfüllt, ist äußerst vertrackt. Wenn Sie an den Eigenschaften eines bestimmten Kriteriums arbeiten, wirkt sich das auf die meisten der anderen Kriterien aus. Je mehr Schnittstellenelemente Sie hinzufügen, desto mehr müssen die Benutzer Ihrer Anwendung beachten und möglicherweise eingeben. Der umgekehrte Fall ist natürlich auch nicht gut. Wenn Sie nicht genug Hilfe und Unterstützung anbieten, könnten manche Bedienungselemente missverständlich sein. Etwas zu kreiern, dass einfach und elegant, gleichzeitig gut verständlich und einheitlich ist, sollte trotz der großen Herausforderung stets das Ziel eines User Interface Designers sein.
Toolbox für visuelles Interface Design
Visuelles Interface Design bezeichnet den Prozess der Gestaltung des physischen Ergscheinungsbildes Ihrer Schnittstelle, so wie sie die Anwender auf ihrem elektronischen Gerät sehen. Das Ziel dieser Arbeit ist es, die Bedeutung einzelner Komponenten und Vorgänge zu kommunizieren. Erstellen Sie dazu geeignete Grafiken, die die einzelnen Elemente bestmöglich erklären.
Die Gestaltung des so genannten Look and Feel, sprich des Erscheinungsbildes und der vermittelten Erlebniswelt Ihrer Anwendung, ist nicht das vorrangige Ziel des visuellen Interface Designs. Das Hauptziel ist Kommunikation. Teilen Sie den Benutzern auf möglichst verständliche und einfache Weise mit, wie Ihre Anwendung funktioniert und wie sie am besten zu bedienen ist.
Layout und Positionierung
Layout sorgt für eine Struktur der grafischen Elemente Ihres User Interface. Mittels Abständen der einzelnen Elemente legen Sie auch die Hierarchie und den Bezug einzelner Elemente untereinander fest. Wenn Sie bestimmte Elemente näher zusammenrücken, verdeutlicht das einen Zusammenhang – etwa bei Beschriftungen unterhalb einer Schaltfläche. Die Positionierung kann auch den Lesefluss optimieren – zum Beispiel bei Formularen. Wenn die Beschriftungen unmittelbar über einem Eingabefeld anstatt links davon stehen, können wir die verschiedenen Elemente des Formulars mit den Augen besser erfassen, als wenn wir immer wieder nach links schauen müssen, um zu prüfen, welches Feld zu welcher Beschriftung gehört.
Form und Größe
Formen können Sie dazu einsetzen, um verschiedene Elemente voneinander zu unterscheiden. Variieren Sie beispielsweise die Form und Größe von Icons, um deren Funktion besser erkennbar zu machen.
Größe bestimmt nicht nur die Bedeutung – je größer, desto wichtiger. Klickbare Elemente sind mit zunehmender Größe auch einfacher zu bedienen. Bessere Bedienbarkeit steigert wiederum die Effizienz Ihrer Benutzerschnittstelle.
Farbe
Farbe ist gleich in mehrfacher Hinsicht nützlich. Bei geeignetem Kontrast zum Hintergrund kann Farbe die Aufmerksamkeit der Benutzer auf sich ziehen – zum Beispiel ein Hinweiskasten in kräftigem Gelb auf weißem Hintergrund. Farben werden bestimmte Bedeutungen zugeschrieben.
- Rot steht fast immer für Gefahr als Stoppzeichen – etwa im Straßenverkehr. Reservieren Sie Rot am besten für Warnmeldungen.
- Grün dagegen symbolisiert häufig Erfolg oder die Aufforderung, „Aktion fortsetzen“ und sollte daher für Inhalte dieser Art eingesetzt werden.
Darüber hinaus kann Farbe auch Zusammenhänge veranschaulichen und dem Anwender die Orientierung erleichtern – etwa durch verschiedenfarbige Schaltflächen, Menü- oder Werkzeugleisten.
Hinweis: Denken Sie daran, dass die Bedeutung von Farbe in verschiedenen Kulturen stark variieren kann. Achten Sie darauf, die passenden Farben für den jeweiligen Zielmarkt auszusuchen. Denken Sie auch an Farbblindheit. Meistens betrifft das die Komplementärfarben Rot und Grün. Nutzen Sie zusätzliche Charakteristika zur Unterscheidung bestimmter Elemente und Meldungsfenster – etwa Form und Größe.
Kontraste
Ob ein Element in Bezug zu den umgebenden Elementen hell oder dunkel wirkt, hat entscheidenden Einfluss auf den Bedienkomfort der Schnittstelle. Zudem können Sie die Bedeutung einzelner Elemente oder Befehle damit gewichten.
Entscheidend ist der Kontrast. Schwarzer Text auf weißem Hintergrund bildet einen höheren Kontrast; das ist einfacher zu erkennen und zu lesen als grauer Text auf weißem Hintergrund. Indem Sie den Kontrast abschwächen und eine Schaltfläche oder einen Befehl mit dem Hintergrund verschmelzen lassen, können Sie die Bedeutung des jeweiligen Elements abschwächen oder als inaktiv darstellen.
Texturen
Im interaktiven Design gibt es das Konzept der Affordance – was im Deutschen in etwa Aufforderungscharakter oder Angebotscharakter bedeutet. Mit Affordance sind die Eigenschaften eines Gegenstands gemeint, die dem Benutzer den Zweck, den Gebrauchszweck und im Idealfall auch die Art der Bedienung vermitteln. Denken Sie etwa an Türgriffe. Die beste Methode, eine Tür zu gestalten, die nur zu einer Seite öffnet (im Gegensatz zu einer Pendeltür) ist die folgende. Eine Ziehen-Seite erhält eine Klinke, auf der Schieben-Seite wird lediglich eine ebene Griff-Fläche angebracht. Die Benutzer werden automatisch wissen, auf welcher Seite sie ziehen oder schieben sollen, weil der Aufforderungscharakter von Türgriff und Platte diese ohne ergänzende Hinweisschilder unmittelbar selbst kommuniziert. Es ist somit weniger Interaktion erforderlich, um den Benutzern die Anwendung zu vermitteln.
Dieses Konzept lässt sich auf Benutzerschnittstellen für den Bildschirm übertragen. Beispiel: Manche Elemente einer grafischen Benutzeroberfläche könnten ziehbar sein – etwa die Ecken eines Dialogfensters, dessen Größe Sie auf diese Weise verändern können. Um zu veranschaulichen, dass das Fenster angeklickt und verschoben werden kann, erscheint üblicherweise ein Rahmen mit einer etwas gröberen Textur. Außerhalb der virtuellen Welt – im wirklichen Leben sozusagen – werden rauhe Texturen häufig verwendet, um Griffen eine bessere Haftung zu verleihen, so dass wir sie besser fassen können. Diese Idee wird auf den Monitor übertragen, an dem Sie statt Ihrer Finger den Mauszeiger einsetzen oder – mit dem vermehrten Aufkommen von Touch Screens – doch die Finger.
(tm)
