Zunächst eimal muss ich zugeben, dass zu Beginn von Stackfield keiner aus unserem Team wirklich Erfahrung von der Gestaltung bzw. dem Usability Design eines SaaS-Tools hatte. Für uns alle war dies komplettes Neuland, allerdings haben wir uns hiervon nicht abhalten lassen und in den nunmehr 3,5 Jahren eine Menge dazugelernt. Damit Du nicht die gleichen Fehler wie wir machst, findest Du nachfolgend eine Liste mit Punkten, die wir falsch gemacht haben:
1. Fehler: Zu kurze bzw. zu lange Registrierung auf der Startseite
Der Registrierungsvorgang für eine SaaS-Plattform ist eine der schwierigsten Gestaltungsaufgaben - mit dem Formular auf der Startseite steht und fällt das User-Wachstum. Allgemein hält sich die Meinung, dass möglichst wenige Informationen abgefragt werden sollten. Genau an diesen Ratschlag haben wir uns direkt zu Beginn gehalten, jedoch waren die Conversion Rates nicht wie erhofft. Die Befragung einiger Testnutzer führte zu einem eindeutigen Ergebnis: Die bloße Abfrage der E-Mail-Adresse erweckt wenig Vertrauen in die Plattform, da nicht vermittelt wird, dass direkt ein Account erstellt wird. Auch die Sicherheit der Verschlüsselung wurde hierbei in Frage gestellt.
Die Abfrage zu weniger Informationen lässt also eher die Anmeldung zu einem Newsletter oder die Falle, dass man fortan Spam erhält, vermuten. Im Gegenzug haben wir ebenso getestet, welches Ergebnis die Abfrage zusätzlicher Informationen mit sich führt. Hieraus ergab sich, dass beispielsweise die Abfrage einer Telefonnummer, die Conversion Rate dramatisch verschlechtert.
Teste daher gewisse Optionen, aber sei Dir bewusst, dass die Abfrage von Informationen immer in Relation zu Deiner Plattform stehen muss. Gleichzeitig hat der Registrierungsvorgang Auswirkungen auf den nachfolgenden Onboarding-Prozess, welcher womöglich verlängert wird, wenn Du zu Beginn auf Informationen verzichtest. Auch die Ansprache in Follow-Up E-Mails wird erschwert, wenn nicht direkt ein Name abgefragt wird. Behalte solche Punkte immer im Hinterkopf! Unsere verschiedenen Tests haben zu Abweichungen der Conversion Rate von bis zu 52% geführt, wobei in unserem Fall die Abfrage des Namens, der E-Mail-Adresse und eines Passwortes die besten Ergebnisse erzielt. Teste daher zumindest zu wesentlichen Optionen, um zu sehen was bei Deinem Tool / Seite funktioniert! Ebenso sollte das Formular auf der Startseite direkt zu Beginn sichtbar sein, und nicht erst nach einem Klick auf eine Schaltfläche erscheinen. Das direkte Anzeigen des Formulars zur Registrierung verbesserte die Anmelderate um 34%.
2. Fehler: Den Nutzer zum Lernen zwingen
Eine neue Plattform benötigt immer eine gewisse Eingewöhnungszeit. Dies war uns direkt zu Beginn bewusst, weshalb wir Milestones ermittelt hatten, nach welchen die Wahrscheinlichkeit steigt, dass ein Nutzer tatsächlich langfristig unsere Plattform nutzt. Um die Nutzer schneller bzw. überhaupt zu diesen Milestones zu bewegen, haben wir einen Wizard genutzt, der gewisse Ziele dauerhaft eingeblendet hat. Zu den Zielen zählten unter anderem das Einladen einer Person, das Anlegen eines neuen Raumes, etc.
Nach kurzer Zeit häuften sich jedoch die Beschwerden, dass dieser Wizard nicht zu entfernen sei, wobei wir diese Funktion bewusst entfernt hatten. Jeder Nutzer sollte diese Schritte durchlaufen. Schnell mussten wir allerdings feststellen, dass dies eher zu Frustration und Abneigung führte, da einem ständig Punkte aufgelistet wurden, die nicht erreicht wurden.
Ebenso mussten wir feststellen, dass jegliches Tutorial, das als aufdringlich wahrgenommen werden könnte, ignoriert wird. Selbst pulsierende Kreise, die einen Tool-Tip beinhalteten, wurden einfach weggeklickt und im Durchschnitt nur 1,3 Sekunden angezeigt. Daher ist es nahezu das Wichtigste die Einführung der Plattform intuitiv zu gestalten. Jeder Nutzer muss sofort wissen, wie er agieren muss um die Plattform nutzen zu können - ohne dabei aufdringliche Tipps zu erhalten.
3. Fehler: Zu viel Flexibilität
Dieser Punkt lässt vermuten, dass es sich hierbei nicht um einen UX-Design-Fehler handelt. Aber genau dies ist der Fall. Als wir mit Stackfield die Beta-Phase starteten, hofften wir, dass eine Vielzahl an Funktionen einen Vorteil gegenüber unserer großen Konkurrenz bringen würde. Alles sollte möglich und völlig flexibel sein, wodurch jeder Nutzer Stackfield zu seinem eigenen Projektmanagement-Tool machen konnte. Nach einiger Zeit mussten wir jedoch feststellen, dass dies zwar gut klingt, jedoch ein großer Teil der Nutzer schlichtweg den richtigen Weg zur Nutzung von Stackfield nicht finden konnte.
Die Lösung hierfür ist wirklich einfach, im wahrsten Sinne des Wortes. Egal worum es sich handelt: Sämtliche Funktionen machen keinen Sinn, wenn der Nutzer mit der Fülle an Funktionen überfordert ist und dabei keine Ahnung hat, wofür er sich entscheiden soll. Beschränke Dich daher beim Design in erster Linie auf die wirklich relevanten Funkionen und zeige dem Nutzer tatsächlich einen klaren Weg auf. Alle weiteren Funktionen, die nicht wirklich nötig sind, kannst Du zwar auch integrieren, aber lieber einen Klick entfernt. Der Nutzer muss direkt zu Beginn ein klares Verständnis von allen Funktionen haben, und das erreichst Du nur, wenn alle unnötigen Elemente verschwinden.
Wir erhalten darüber hinaus unglaublich viele Anfragen für gewisse Funktionen, wobei wir viele bereits einmal integriert, aber dennoch verworfen wieder haben. Warum? Weil diese Funktionen zwar erfragt wurden und in vielen Anforderungslisten enthalten sind, aber letztendlich doch nicht genutzt wurden. Beispielsweise das Sortieren der Raum-Liste nach Datum oder Name, das Verbergen von Inhalten, persönliche Räume u.v.m. - es klingt zwar paradox, dennoch ist es den meisten Nutzern nicht bewusst, dass diese Funktionen nicht benötigt werden, obwohl diese davon ausgehen.
4. Fehler: Unterschiedliche PNGs für jede Displayauflösung
Mit der Entwicklung von Stackfield kam auch der Trend zu hochauflösenden Displays auf. Da die erste Version von Stackfield lediglich auf die normale Auflösung ausgelegt war, sah die Plattform dementsprechend auf Geräten mit Retina Display o.ä. qualitativ minderwertig aus. Wir haben zunächst versucht dieses Problem durch die Nutzung von PNGs in unterschiedlichen Größen in den Griff zu bekommen. Diese Lösung erwies sich als sehr aufwendig und auf Dauer nicht praktizierter, da sämtliche Grafiken in drei verschiedenen Größen hinterlegt werden müssen, damit diese scharf sind und die Ladezeiten bei Geräten mit geringer Auflösung schnell bleiben.
Schlussendlich empfiehlt es sich mit SVGs anstatt PNGs zu arbeiten. Diese vektorbasierten Grafiken werden auf jedem Endgerät scharf dargestellt (sofern diese für die kleinste Auflösung optimiert wurden), und zudem erspart diese Lösung die unzähligen Dateien der PNG-Lösung. Zwar sind SVGs nicht mit jedem alten Browser kompatibel (wer jetzt an den IE8 denkt hat recht), allerdings wird unsere Verschlüsselung lediglich von modernen Browsern unterstützt. Daher war das Problem in unserem Fall unbedeutend.
5. Fehler: Zu viele Informationen
Parallel zu dem Fehler, dass wir zu viele Funktionen integriert haben, kam für lange Zeit das Problem, dass wir sämtliche Informationen auf einmal darstellen wollten. Wie zuvor hat es natürlich Vorteile, wenn der Text in Schriftgröße 12 dargestellt wird und alle möglichen Informationen auf einen Blick zu sehen. Allerdings bringt dies deutlich mehr Nachteile mit sich: Zu viel Text erschwert die Fokussierung auf relevante Inhalte; die Darstellung aller verfügbaren Filter auf einmal beinhaltet mehr Informationen, als der Filter tatsächlich filtert; nicht überall müssen die Profilbilder aller Nutzer dargestellt werden - irgendwann nervt es; überall auftauchende Benachrichtigungen helfen keinen weiter.
Auch hier gilt: Weniger ist mehr. Nutze den gesamten Bildschirm, aber stelle nur die wichtigsten Informationen dar. Du überlegst auch Schriftgröße 12 für ein Projekt zu nutzen? Alles unter Schriftgröße 14 ist nicht mehr zeitgemäß! (Hört sich trivial an, ist aber dennoch häufig anzutreffen … ) Verzichte darauf alle Informationen eingeengt darzustellen, so wie wir es getan haben. Vier verschiedene Spalten mit Inhalten, die man bearbeiten konnte, habe einfach nur zu Verwirrung geführt - inzwischen sind wir bei 2 Spalten angekommen! Versuche ein Gleichgewicht zwischen Funktion und Design zu finden - wenn nur eines im Vordergrund steht, wird kein Nutzer überzeugt!
Wir haben in den letzten Jahren mit Sicherheit noch viele weitere Fehler gemacht und machen bestimmt immer noch einige, allerdings waren es genau diese 5 Fehler, die uns im Bezug auf das Design in Erinnerung geblieben sind. Welche Fehler hast Du mit Deinem Team bisher gemacht? Wir freuen uns über Eure Beiträge im Kommentarbereich!