BarCamp Karlsruhe 2011: Interfacedesign für Entwickler

Sessionmitschrieb vom BarCamp Karlsruhe 2011. Session von Saskia Jancik.

Das was der Benutzer von der Software sieht, ist nur das Interface, vom Interface werden Rückschlüsse auf die Software gezogen, deshalb sollte man viel Liebe und Aufwand in das Benutzerinterface stecken. Ein Interface ohne Funktionalität ist aber natürlich auch nichts. Das Interface muss Professionalität vermitteln, das gibt dem Benutzer Sicherheit, die Software muss das alles selbst vermitteln. Wichtig ist auch der Spaßfaktor, nicht überall Scherze verstecken, sondern die Benutzung sollte Spaß machen.

Die Basis bildet die Funktionalität, z.B. Buttons. Die nächste Stufe des Designs ist, Konsistenz zu geben, klare Strukturen zu definieren. Die nächste Stufe ist die Usability, dem Benutzer Werkzeuge in die Hand geben, um die Software zu benutzen. Die obersten Stufe sind dann Professionalität, quasi als Erweiterung der Usability und Kreativität, aber hier sollte man eher auf gängiges zurückgreifen. Bei der obersten Stufe muss man auch am Ball bleiben und sehen, was gerade der aktuelle Trend ist. Sehgewohnheiten verändern sich auch sehr schnell.

90% des Designs besteht aus rationalen Regeln, bis zur Usability bekommt es jeder hin, für den Rest benötigt man etwas Gespür.

Konsistenz: Gleiches sieht immer gleich aus und steht immer an den selben Stellen, z.B. “Okay” und “Abbrechen” rechts unten. Auch Abstände sollten konsistent sein, da das Auge sich schnell an bestimmte Positionierungen gewöhnt. “Okay” und “Abbrechen” z.B. sollten auch nicht “irgendwo” rechts unten sein. “Don't make me think!” von Steve Krug ist das entsprechende Buch dazu, es geht darum, dass man Leute nicht irritieren soll. Auch wenn man nicht bewusst merkt, dass ein Button woanders ist, führt es doch zu einem kurzen Innehalten/Zögern. Im Web hat es auch oft den Effekt, dass Leute aussteigen.

Beispiel: 4 Punkte als Buttons als Links untereinander. Problem: Benutzer liest immer alles. Besser: Zusätzliche Überschriften einfügen und Abstände einfügen. Abstände sind generell wichtig. Außerdem den wichtigsten Punkt an die erste Stelle stellen und besonders hervorheben.

Blickführung ist ebenfalls wichtig, nicht alles gleich anzeigen, sondern Überschriften hervorheben, unwichtiges kleiner und heller machen, aber natürlich nicht übertreiben, da es gerade auch in Onlineshops Unsicherheiten erzeugen wenn der Text dann schlecht lesbar ist. Farben sollte man bewusst wählen, und von Komplementärfarben die Finger weg lassen. Auch nicht 5 Buttons auf der Seite rot machen. Buttons mit Umrandung erzeugen Unruhe, besser helle Hintergrundfarben verwenden. Linien sind mächtig, aber man muss vorsichtig sein.

“Simplicity” - es gibt auch ein gleichnamiges Buch von John Maeda dazu zum Thema Interfacedesign.

• Reduzieren: Punkte, wenn man sie nicht braucht, wegschmeißen, und die anderen verbinden, verstecken, …
• Organisieren: Gruppen nach Themen bilden, ähnliche Funktionen ineinander integrieren
• Zeit sparen: Zeit des Benutzer einsparen, das, was die meisten Leute benutzen am besten auffindbar machen und die 2%, die Spezialfunktionen nutzen wollen, werden auch die 1 Minute länger suchen
• Beim Lernen Frust vermeiden: Wenn man eine neue Software verwendet, muss man sich erst einmal einarbeiten. Man sollte aber den Benutzer nicht frustrieren, sondern dem Benutzer schnell Erfolgserlebnisse ermöglichen, Tutorials anbieten, die ersten, üblichen Schritte kennzeichnen, außerdem in der Software Erklärungen/Hilfestellungen anbieten. Wenn persönliche Daten abgefragt werden, sollte man erklären, wieso z.B. die Schuhgröße abgefragt wird.

Frage: Wie halte ich Interfacedesign-Entscheidungen fest für ein Team? Dicke Styleguides machen wenig Sinn, aber 1 DIN A4-Seite macht Sinn. Bei sich wiederholenden Mustern kann man auch Musterscreens zur Verfügung stellen. Man muss den Entwicklern erklären, warum Interfacedesign wichtig ist, und es sollte einen Verantwortlichen geben, der bei notwendigen Abweichungen Entscheidungen trifft. Wichtig ist, die Leute zu schulen und das entsprechende Verständnis zu vermitteln.