Usability-Grundlagen

Benutzerschnittstellen und wie man sie benutzbar macht

Thomas Braun

Im Alltag begegnen dem Konsumenten an allen Ecken und Enden Benutzerschnittstellen, z. B. im Auto oder am Fahrkartenautomaten, die er als selbstverständlich hinnimmt. Doch wie entstehen diese Schnittstellen, wer hat sie definiert und nach welchen Regeln wurden sie geschaffen? Wer als Interface- oder Interaktionsdesigner erfolgreich sein möchte, sollte sich bestimmte Vorgehensweisen und Muster einprägen, die in der Softwareentwicklung eher ein Schattendasein führen.

Die Geschichte der grafischen Benutzeroberflächen geht auf die 1970er Jahre zurück, wobei der erste kommerzielle Einsatz 1981 mit dem Xerox-Star seine Wurzeln findet. Wie man es aus heutiger Sicht auch erahnen könnte, wurde die erste für Endanwender interessante Benutzeroberfläche von Apple unter Leitung von Steve Jobs entwickelt und ab 1984 auf dem Apple Macintosh vertrieben. Mit großzüger Verspätung von zwei Jahren erschien im Jahr darauf die erste Version des Konkurrenzprodukts von Microsoft, die ihre Erwartungen bei Weitem nicht erfüllen konnte. Bis heute kämpfen nicht nur die großen Konkurrenten mit den Problemen sinnvoller Anwendungsgestaltung, grundsätzlich ist jeder Softwareentwickler damit konfrontiert. Wagt der zeitgemäße Entwickler bzw. Designer auch mal einen Blick über den Tellerrand und befasst sich ein wenig mit dem Thema, wird schnell klar, dass User-Interface-Design kein Hexenwerk ist. Neben den Grundsätzen der Dialoggestaltung, die sogar genormt ist (Kasten: „Grundsätze der Dialoggestaltung“), gibt es eine Reihe sinnvoller Techniken, die Ihnen das Leben erleichtern werden.

Grundsätze der Dialoggestaltung

Heutzutage kennt man bereits diverse Anforderungen an grafische Benutzerschnittstellen. Die wichtigsten sind in der europäischen Norm EN ISO 9241-10 ff. beschrieben. Ein besonders interessanter Teil dieser Normreihe ist die EN ISO 9241-110, die die im Folgenden frei übersetzten Grundsätze der Dialoggestaltung beinhaltet:

  • Aufgabenangemessenheit: Eine Funktionalität ist dann aufgabenangemessen, wenn sie den Benutzer bei der Ausführung bestmöglich unterstützt, z. B. ein SPEICHERN-Button, der leicht auffindbar ist und erwartungsgemäß funktioniert.
  • Selbstbeschreibungsfähigkeit: Anwendungen müssen selbsterklärend gestaltet sein und in komplizierten Situationen kontextabhängige Hilfe anbieten, damit sich neue Benutzer schnell einarbeiten und routinierte Benutzer nicht behindert werden.
  • Erwartungskonformität: Im Wesentlichen ist damit gemeint, dass sich Teile der Benutzeroberflächen verschiedener Anwendungen ähnlich verhalten sollten, um Benutzern durch Erlerntes das Zurechtfinden zu erleichtern, z. B. sollten sich Checkboxen nicht wie RADIO-Buttons verhalten.
  • Lernförderlichkeit: Eine Anwendung ist dann lernförderlich, wenn sie dem Benutzer dabei hilft, die Anwendung zu verstehen und ihre Bedienung zu erlernen. Webseiten müssen daher größeren Wert auf Lernförderlichkeit legen als z. B. Intranetanwendungen.
  • Steuerbarkeit: Die Kontrolle über den Arbeitsablauf innerhalb einer Anwendung sollte so weit wie möglich dem Benutzer überlassen werden. Das bringt Abwechslung ins Spiel und kann Frustration vorbeugen.
  • Fehlertoleranz: Dialoge sollten so gestaltet werden, dass Fehleingaben vermieden werden. Mit Fehlern des Benutzers muss angemessen umgegangen werden, die Fehlerbehebung darf nicht zu viel Zeit beanspruchen.
  • Individualisierbarkeit: Oberflächen, die sich an die Bedürfnisse der Benutzer anpassen lassen, haben eine deutlich höhere Akzeptanz und bieten viel Abwechslung.
Modernes UI-Design

Seit den 1970er Jahren entwickelte sich das Internet hauptsächlich als Kommunikationsmedium, um neben dem Briefverkehr einen Transportweg für Informationen zu etablieren, der den Anwendern Kosten und Zeit sparen konnte. Allerdings war dieses Medium lange Zeit nur den technisch versierteren Zeitgenossen vorbehalten. Erst Ende der 80er Jahre wurde mit Mosaic der erste grafische Webbrowser veröffentlicht, der nun endgültig den Startschuss gab. Ab diesem Zeitpunkt nutzten immer mehr Menschen das Internet und so konnten sich auch kommerzielle Angebote entwickeln. Durch die wachsende Akzeptanz entstanden bis heute mehrere Millionen Webseiten, von denen momentan etwa 80 Millionen aktiv sind. Wie viele davon Wert auf Usability legen, sollte man besser nicht hinterfragen. Heutzutage liegt der Fokus des Internets zum einen nach wie vor auf dem Informationsaustausch und zum anderen – wer hätte es gedacht – auf dem Verkauf. Doch wer etwas verkaufen will, muss sich präsentieren können. Der Kunde soll schließlich nicht nur die Ladentür finden, sondern es gilt auch Kaufreize zu wecken und auf Kundenbedürfnisse einzugehen. Der Einzelhandel hat es längst kapiert (Süßigkeiten unten, Wein oben, Kippen an der Kasse) und im Internet rückt man auf.

Gutes Design macht glaubwürdig

Genau wie im Kaufhaus muss man Kunden anlocken, ihnen zeigen, was sie brauchen und ihnen helfen, möglichst einfach zuzuschlagen. Das geht am besten, wenn man das Vertrauen seiner Kunden gewinnen kann, und das schafft man, indem man glaubwürdig wirkt. Laut einer Studie der Stanford-Universität lassen sich mit hochwertigem Design und guter Benutzerführung am schnellsten die Glaubwürdigkeit und somit auch das Vertrauen der User steigern. Der durchschnittliche Internetkonsument ist oberflächlich, also visuell ansprechbar und lässt sich durch optische Reize leiten. Doch was genau ist „gutes“ Design? Eine gelungene Webpräsenz muss nicht unbedingt aufwändige Flash-Animationen oder superschicke Grafikelemente beinhalten (auch wenn das manchmal sinnvoll ist), es geht vielmehr darum, dass sich User schnell zurechtfinden und schnell zum eigentlichen Ziel gelangen. Dabei kann es sehr hilfreich sein, sich etwas auszudenken, was die Konkurrenz nicht bietet.

Seien Sie etwas Besonderes

Eignen Sie sich einen Stil an und bleiben Sie dabei. Überlegen Sie sich irgendeine ausgefallene Navigationsart oder ein bestimmtes Gestaltungselement oder eine Hilfefunktion oder etwas Ähnliches und bieten Sie das an passenden Stellen immer wieder an. Benutzer gewöhnen sich schnell an solche Features und finden sich dann umso besser zurecht, wenn sie dieses Element in einer anderen Situation wiederentdecken. Ein gutes Beispiel für ein solches Feature ist die Bearbeitungsfunktion für Bildtitel von Flickr (Abb. 1). Hier wird der Benutzer auf sehr intuitive Art und Weise darauf aufmerksam gemacht, dass er den Titel eines Bildes durch Klicken bearbeiten kann. Klickt der Benutzer darauf, wird das Feld beschreibbar und durch Klick auf SAVE wird der Titel gespeichert, ohne die gesamte Seite neu zu laden. Das ist etwas Besonderes und gleichzeitig technisch sehr einfach umzusetzen.

Abb. 1: Bildtitel bearbeiten in Flickr
Mut zur Lücke

Geizen Sie beim Layouten nicht mit Whitespaces, denn diese gestalterischen Freiräume schaffen auch Freiräume für den Benutzer. Kleben Informationen zu nah aneinander, kann man sie optisch nicht gut trennen, wodurch ein überfrachteter Eindruck entstehen kann. Grundsätzlich stehen zwei Arten von Whitespaces zur Verfügung: die Macro-Whitespaces und die Micro-Whitespaces. Macro-Whitespaces sind z. B. Abstände zwischen Navigation und Inhalt oder zwischen Frames. Micro-Whitespaces sind Zeilen- und Absatzabstände oder Abstände zwischen zwei Bildern. Anfangs ist es sinnvoll, mit Blindtexten zu arbeiten, denn dadurch lernen Sie schnell einzuschätzen, ob ein Layout informativ wirkt oder nicht. Ein Großteil der Aussagekraft einer Webseite wird nämlich intuitiv beurteilt und nicht über den Inhalt.

Werbung ist unsichtbar

Im Internet haben sich mittlerweile einige Muster etabliert, um Werbung darzustellen. Das sind z. B. Werbebanner an den Seitenrändern oder Google-Werbung, die in Fließtext eingebaut wird. Ganz hartnäckige Kandidaten öffnen sich sogar in Pop-ups oder überlagern den eigentlichen Inhalt. Die meisten User haben jedoch entweder Ad-Blocker installiert oder übersehen diese Art von Werbung. Verzichten Sie also soweit möglich auf allzu aufdringliche Einblendungen. Bis zu einem gewissen Grad werden Anzeigen durchaus toleriert, aber wie weit Sie dabei gehen können, hängt stark vom Kontext ab. Designen Sie auf keinen Fall wichtige Elemente so, dass sie wie Werbung wirken, denn sonst werden Sie sicher häufig übersehen.

Benutzer brauchen Feedback

Einer der am häufigsten vernachlässigten Grundsätze ist, dem User mitzuteilen, dass etwas passiert, dass er etwas richtig oder falsch gemacht hat und wie er es anders machen soll. Teilen Sie dem Benutzer jederzeit mit, ob etwas passiert oder ob Sie etwas von ihm erwarten. Nutzen Sie hier die Möglichkeiten, die Ihnen moderne JavaScript-Frameworks wie Prototype bieten, und sehen Sie sich für Inspiration im Web um. Eine sehr hilfreiche Quelle hierzu ist http://ui-patterns.com. Hier finden Sie Beispiele und Erklärungen zu vielen gängigen Designmustern, z. B. Formularfeedback, Wizards, Progressbars, Tag Clouds, Pager und vieles mehr.

Individuell? Aber schnell!

Wenn Sie möchten, dass Benutzer wieder kommen, kann es sehr hilfreich sein, einige Individualisierungsmöglichkeiten anzubieten. Wenn der User sich z. B. seine Startseite selbst zusammenstellen kann oder häufig genutzte Funktionen vor weniger häufig genutzte Funktionen stellen kann, kommt er mit einer Anwendung auf Dauer besser zurecht, als wenn sämtliche Funktionen vorgegeben sind. Trotzdem sind sinnvolle Standardvorgaben natürlich auch sehr wichtig, um eine schnelle Einarbeitung zu gewährleisten. Natürlich muss nicht jede Webseite vom Benutzer individualisierbar sein, aber zumindest sollte gewährleistet sein, dass die Individualisierungsmöglichkeiten der gängigen Browser unterstützt werden.

Reden ist Silber, Schweigen ist Gold

Was der User schon weiß, muss man ihm nicht sagen und was er nicht hören will, kann man ihm ersparen. Verschonen Sie die Welt mit sinnlosen Hinweismeldungen wie „Das Programm wurde gestartet“ oder „Die XY-Datenbank in Cluster ABC kann nicht erreicht werden“. Stecken Sie Ihre Energie lieber in die Inhalte von wirklich wichtigen Fehlermeldungen, erklären Sie, was falsch eingegeben wurde und warum und wie man den Fehler behebt. Machen Sie sinnvolle Vorschläge und unterstützen Sie, anstatt zu stören.

Testen macht schlau

Versuchen Sie nicht, sich in Ihre User hinein zu versetzen und ihre Probleme und Wünsche zu erraten, sondern fragen Sie sie einfach. Usability-Tests müssen nicht aufwändig sein. Laut einer Studie von Jakob Nielsen lassen sich mit nur fünf Testbenutzern etwa 85 % aller Usability-Fehler finden, mit 15 Benutzern nahezu alle (Abb. 2). Auch hier gilt wieder: Egal wie viel Sie testen, alles ist besser als nichts.

Testen Sie, bevor Sie mit der Entwicklung beginnen, indem Sie Mockups auf Papier malen oder mit Screenshots hantieren, während der Entwicklung mit klickbaren Flash- oder HTML-Prototypen und nach der Entwicklung mit der fertigen Anwendung. Eventuell ist die Erstellung eines Usability-Fragebogens für Ihre Tests sinnvoll, aber achten Sie darauf, dass die Tester wechseln, damit keine Routine entsteht.

Priorisieren

Da die wenigsten User ihre Scrollrädchen benutzen (genauer gesagt tut das nicht mal ein Viertel der Webanwender), sollten Sie unbedingt darauf achten, wichtige Informationen von weniger wichtigen zu trennen und diese auch entsprechend darzustellen. Erstellen Sie eine Sitemap und priorisieren Sie diese, bevor Sie ein Layout erstellen. Ein probates Mittel, um Ihnen bei der richtigen Priorisierung zu helfen, ist Card-Sorting. Schreiben Sie dazu einfach jeden Begriff aus Ihrer Sitemap auf ein Kärtchen, mischen alles gut durch und bitten einige Testpersonen, die Kärtchen nach Wichtigkeit zu sortieren. Gibt es Diskussionsbedarf, wird er hierbei sicher aufgedeckt.

Auch User sind Menschen

Wenn Sie Anwendungen planen, designen und umsetzen, dann haben Sie vermutlich in Ihrem Unternehmen eine Art eigene Sprache entwickelt, die viele Vokabeln enthält, die außer Ihnen und Ihren Kollegen niemand versteht. Machen sie nicht den Fehler, diese Sprache nach außen zu transportieren. Kein Mensch wird gerne „User“ genannt und kein normaler Mensch weiß, was eine Exception ist. Besinnen Sie sich hin und wieder darauf, wer Ihre Zielgruppe ist und passen Sie Ihr Wording entsprechend darauf an. Nennen Sie die Dinge einfach beim Namen und jeder wird verstehen, was gemeint ist.

Geschrieben von
Thomas Braun
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.