Gute Usability ist Detailarbeit: UI Design am Beispiel einer kleinen Funktion

von Axel von Leitner am 2.11.2011

Wir haben vor kurzem eine kleine Funktion in unserer CRM Lösung CentralStationCRM umgebaut. Es sollte möglich werden einem Angebot mehrere Ansprechpartner zuzuordnen, bis dahin konnte pro Angebot nur ein Ansprechpartner angelegt werden. Die Funktion selbst ist keine große Herausforderung, das Ergebnis möglichst intuitiv und mit einer überragenden Usability zu gestalten jedoch schon. Heute möchte ich am Beispiel dieser einen Funktion aufzeigen, durch welchen Denkprozess wir während dem Design der Funktion gegangen sind und warum wir uns wie entschieden haben.

Gutes Design entsteht, wenn man sich die Zeit nimmt das Problem genau zu verstehen und es aus verschiedenen Blickwinkeln und vor allem in seinen Extremen zu betrachten. Indem wir nicht nur den Standardfall, sondern sowohl den Fall des “kein Ansprechpartner” als auch den Fall des “mehrere Ansprechpartner aus verschiedenen Unternehmen” betrachten, hinterfragen (neudeutsch: challengen) wir das Design und die verschiedenen Optionen. Im ersten Schritt haben wir das Problem also schon einmal auseinander genommen und verstanden, wie die Funktion genutzt werden könnte.

Im nächsten Schritt haben wir uns überlegt, welche Alternativen zur Umsetzung uns grundsätzlich in den Sinn kommen. In Klammern habe ich dahinter geschrieben, was wir in etwa dabei gedacht haben.

  • jeden Ansprechpartner einzeln in ein Textfeld schreiben (kann man sicherlich machen, nur wird es dann bei mehreren Leuten schnell nervig. Insbesondere wenn man die Namen der Personen nicht vollständig im Kopf hat - wie heißt nochmal der verantwortliche im Einkauf?)
  • auch könnte man die Personen aus einer Liste auswählen (je nachdem, ob man die Leute in der Liste einschränkt oder nicht wird diese schnell ziemlich lang. Ein Dropdown mit 1000 Namen macht sicherlich keinen Spaß. Außerdem sind relativ viele Klicks nötig, um eine Person auszuwählen)
  • ein ganz anderer Weg wäre die Ansprechpartner erst hinzuzufügen, nachdem das Angebot angelegt wurde (zwar wäre die Maske zum Erstellen eines neuen Angebotes damit schlanker, allerdings hätten wir einen unnötigen zwei Schritt-Prozess, da Ansprechpartner bei der Vielzahl aller Angebote eingetragen werden. Im zwei Schritt Prozess wäre die Wahrscheinlichkeit der vergessenen Eintragung sicherlich größer, was zu einer schlechteren Datenqualität führen würde)

Wir wollten den Prozess in einem Schritt abwickeln - daher haben wir die dritte Option ziemlich schnell verworfen. Außerdem haben wir uns überlegt auf welche Weise die Seite zum Erstellen eines neuen Angebots aufgerufen werden kann - im Fall von CentralStationCRM ist das ganz normal aus der Übersicht aller Angebote, von der Seite einer Person im CRM (neues Angebot für Herrn Müller) oder von der Seite einer Firma (neues Angebot für Schmidt KG). Je nachdem von wo der Nutzer kommt, haben wir unterschiedliche Informationen die wir nutzen können, um die Usability zu verbessern. Von einer Firma kommend haben wir die Firma (und ggf. die Mitarbeiter der Firma als mögliche Ansprechpartner). Wenn ein Angebot zu einer Person angelegt wird, ist es so gut wie sicher, dass diese Person ein Ansprechpartner in dem Angebot ist. Außerdem können wir die Firma der Person direkt vorausfüllen. Sie sehen - je nach Fall kann sich die Seite anders verhalten und in jedem muss sie intuitiv bedienbar sein und wegen der Erlernbarkeit einem festen Muster folgen.

Erste Versuche zur Umsetzung

Wir haben jetzt zunächst Textfelder gebaut, in denen man tippt und via Autovervollständigung aus seinen Kontakten wählen kann. Einen ausgewählten Kontakt haben wir dann unterhalb das Textfeld gesetzt. Im Textfeld konnte dann ein weiterer Ansprechpartner hinzugefügt werden.

Das war gut für die Seite ohne anfängliche Informationen zur Person oder Firma, allerdings nicht so gut, wenn man von der Seite einer Firma kommt und diese mehrere Mitarbeiter hat, die als Ansprechpartner in Frage kommen. So kamen wir auf die Idee die Ansprechpartner mit Checkboxen aufzuführen - so kann der Nutzer die gewünschten Personen schnell auswählen und wir können mit der Information der Firma alle Mitarbeiter platzieren, aber eben ohne gesetzten Haken.

Wenn man von der Seite einer Person kommt, können wir die Informationen so ebenfalls optimal verarbeiten. Sowohl die Firma als auch der Ansprechpartner selber sind bereits vorausgefüllt.

Zusätzliche Ansprechpartner können über das Textfeld hinzugefügt werden, sie werden dann direkt mit gesetztem Haken aufgeführt.

Vorteile dieser Lösung

Sie ist flexibel, leicht verständlich und sie denkt mit. Gerade bei häufiger Nutzung einer Funktion ist die Erleichterung einzelner Schritte Gold wert und erhöht den Spaß bei der Arbeit im System.

Ich denke in dem Denkprozess und der Betrachtung aus unterschiedlichen Richtungen wird klar, dass wirklich gute Usability im Detail liegt. Bei allem 80/20 Denken - richtig Spaß macht die Nutzung eines Produktes erst, wenn man sich immer wieder freut, dass Programmierer und Designer mitgedacht haben. Richtig gute Usability ist und bleibt Detailarbeit.

LinkedInFacebook

Axel von Leitner

Mitbegründer von 42he. Beschäftigt sich mit den betriebswirtschaftlichen Dingen und steckt viel Herzblut in Design & Usability. Axel schreibt insbesondere über Produktivität, Design und Startup-Themen.