Gutes UX-Design umfasst nicht „nur“ das grafische User Interface und bestimmt Bildsprache, Farben und Typografie, sondern setzt viel früher bereits bei Recherche und Konzeption an. Gute Anwendungen und Services müssen leicht zugänglich strukturiert, Inhalte für den jeweiligen Zweck im passenden Format (Texte, Bilder, Animationen, Videos etc.) bereitgestellt und Funktionen zur schnellen und einfachen Erstellung und Bearbeitung von Daten und Informationen durch die Nutzer*innen bereitgestellt werden. Versäumnisse im Entwicklungsprozess können die Qualität digitaler Produkte z.T. empfindlich beeinträchtigen. Auch wenn Zeit und Budget knapp sind, sollte man daher jeweils genau prüfen, welche Aktivitäten im Projekt für ein gutes Ergebnis unerlässlich sind. Grundlegende Probleme kann man durch das Vermeiden der folgenden Versäumnisse erfolgreich umgehen.

1. Direkt mit dem Design starten

Die Fülle an verfügbaren Designprogrammen für das UX- und UI-Design ist mittlerweile fast unüberschaubar. Aktuelle Vertreter der Branche sind u.a. Mockflow, Balsamiq, Axure, Sketch, Adobe Xd, Figma und viele andere. Die Tools werben mit einer einfachen Erlernbarkeit und einem sehr schnell zu produzierenden klickbaren High-Fidelity-Prototypen. Doch vor diesem Schritt gibt es erst noch einiges zu klären:

  • Welche Ziele soll das angestrebte digitale System aus Sicht des Anbieterunternehmens aber auch der Nutzenden erfüllen?
  • Welche Informationen müssen für Nutzende erreichbar sein?
  • Welche Funktionen müssen Nutzenden zur Verfügung stehen?

Oft kommen diese Informationen von den Auftraggebenden der Anwendung. Gerade in neuen Themenfeldern können diese Anforderungen an das System jedoch noch unklar sein. Hier gilt es potenzielle Nutzer*innen einzubeziehen und UX-Research zu betreiben. Sind die Anforderungen an das System klar, dann lohnt es sich zunächst auf Papier oder am Whiteboard mit einfachen Skizzen zu starten und diese immer weiter zu verfeinern und nach und nach zu digitalisieren. Folgende Zwischenprodukte lassen sich bei der Konzeption eines Systems erstellen:

  1. Scribbles: auch Low-Fidelity-Prototypen genannt, sind einfache Skizzen z.B. auf Papier.
  2. Wireframes: erste Strukturen der späteren Oberfläche, die ohne detailliertes grafisches Design (Farben, Bilder, finale Schriften etc.) oft digital visualisiert werden
  3. Wireflows: In der Regel klickbare, grafisch einfach aufbereitete Prototypen (ähnlich wie Wireframes), die Klickstrecken, Verlinkungen und grundlegende Funktionen erfahrbar machen.
    Wireframes und Wireflows sind sog. Low-Fidelity-Prototypen.
  4. High-Fidelity-Prototypen: funktional wie grafisch ausgearbeitete digitale Prototypen, die eine spätere Anwendung fast komplett simulieren können.

Bei Produkten mit niedriger Komplexität müssen diese Zwischenschritte meist nicht alle ausgeführt werden. Sie zu kennen und angemessen anwenden zu können ist jedoch gerade bei größeren Projekten unerlässlich.

Ansicht eines Low-(“Wireframe”) und eines High-Fidelity-Prototypen im Vergleich

2. Kein UX-Research durchführen

Produkte, Dienstleistungen und natürlich auch digitale Anwendungen sind immer für eine oder mehrere bestimmte Zielgruppen gedacht. Oft glauben wir, die Zielgruppe zu kennen und ihre Bedürfnisse zu verstehen – wir sind ja schließlich „Digital Professionals“ und wissen, wie interaktive Systeme für die Nutzerinnen und Nutzer auszusehen haben. Teilweise steht in Projekten auch nicht das Budget zur Verfügung, um umfangreiche Nutzerforschung zu betreiben. Trotzdem sollte dieser Punkt nie ganz außer Acht gelassen werden. Denn welche Probleme Anwender*innen mit einem System haben, welche Prozesse sie in der Ausführung behindern welche Lösungsansätze helfen, können wir nur von Benutzerinnen und Benutzern selbst lernen. Nicht ohne Grund stehen Aktivitäten wie kontextuelle Interviews, Beobachtungen oder Fokusgruppen ganz am Anfang des Human Centered Design, also der menschzentrierten Gestaltung. Die Betrachtung des Nutzungskontextes und die aus den Erkenntnissen zu formulierenden Nutzungsanforderungen an das zukünftige System bilden die Basis für die effektive und effiziente Aufgabenerledigung mit einem interaktiven System. Je komplexer die Prozesse und Aufgaben, desto wichtiger ist UX-Research am Anfang eines Projekts.

3. Relevante Stakeholder nicht im Projekt integrieren

Stakeholder in einem Digitalisierungs-Projekt sind Interessensvertreter*innen aus unterschiedlichen Fachbereichen. Sie haben in der Regel ein aktives Interesse, das zukünftige interaktive System mitzugestalten und ihre Anforderungen einzubringen. Beispielsweise kann die Rechtsabteilung des Unternehmens berechtigte Anforderungen an das System stellen, welche gesetzlich zu beachten sind. Diese Anforderungen sollten dringend im Projekt bedacht und umgesetzt werden. Alle Stakeholder-Anforderungen sollten zumindest im Projekt diskutiert werden. Die wichtigste Gruppe von Stakeholdern sind jedoch die zu Anfang genannten späteren Benutzerinnen und Benutzer. Denn ein aus rechtlicher und marketingtechnischer Sicht perfektes System ist trotzdem nutzlos, wenn die späteren Benutzer*innen ihre Aufgaben nicht damit erfüllen können. Sie wechseln im schlimmsten Fall dann zu aus ihrer Sicht besseren Angeboten des Wettbewerbs.

4. Unrealistischen Content verwenden

Lorem Ipsum dolor sit amet… Dieser Platzhaltertext findet sich wohl in fast jedem Designentwurf wieder. Schnell lassen sich damit ganze Seiten mit Text füllen. Problematisch hierbei ist, dass „Lorem Ipsum“ aufgrund seiner fehlenden Sinnhaftigkeit beliebig gekürzt oder verlängert werden kann. Textboxen mit begrenztem Platz werden aber vielleicht im Betrieb der Anwendung andere Textlängen erfordern als es durch den Platzhaltertext vorgesehen war. Oft lohnt es sich auch eine minimale und maximale Ausprägung zu erstellen, um zu sehen, wie der Inhalt sich später verhalten wird. Gleiches gilt auch für Bilder. Zum einen ermöglichen echte Bilder in einem fortgeschrittenen Design einen sehr guten Eindruck vom Look & Feel der späteren Anwendung, zum anderen fällt spätestens dann auf, dass eventuell noch alternative Bildformate beschafft werden müssen.

5. Unterschiedliche Zustände vergessen

Bei der Gestaltung von Benutzerschnittstellen wird wahrscheinlich immer an Elemente wie Buttons, Buttons mit Hover-Zustand, leere Formulare und befüllte Formulare gedacht. Doch auch andere Zustände sollten nicht vergessen werden. Fällt erst im Entwicklungsstadium auf, dass zum Beispiel deaktivierte Buttons, Fehlermeldungen von Formularen oder auch angedachte Microinteractions nicht bedacht wurden, muss das Entwicklungsteam sich entweder eine eigene Lösung ausdenken – welche vielleicht nie vom UX/UI-Team gesichtet oder mit Nutzerinnen und Nutzern getestet wurde – oder diese Themen im Projekt zurückstellen. Beide Vorgehensweisen führen zu Nachteilen im Projektablauf.

6, Designprinzipien missachten

Die grafische Oberfläche einer Anwendung wird meist durch einen User-Interface Designer oder anderweitig grafisch versierte Mitarbeiter*innen erfolgen. Ist das grundlegende Corporate Design eines Unternehmens bekannt und soll eine Anwendung ggf. nur um einen kleinen Teilbereich erweitert werden, wird die Aufgabe der Gestaltung des User-Interfaces eventuell auch auf das Konzept- oder die Entwicklungsteam übertragen. Natürlich sind auch bereits erfahrene Designer*innen nicht vor falschen Entscheidungen gefeit. Grundregeln wie visuelle Hierarchie, Gruppierung von Informationen oder genug Weißraum sind wichtige Punkte in jedem Design und sollten den jeweiligen Expert*innen überlassen werden. Wichtig zu bedenken ist auch, dass für die unterschiedlichen Anwendungszwecke und Umgebungen einer Anwendung jeweils unterschiedliche Regeln gelten. Nicht nur die Farbgestaltung und die richtigen Schriftarten machen die Benutzeroberfläche für die Benutzerin und den Benutzer brauchbar.

Der Usability-Experte Jakob Nielsen entwickelte eine allgemein gültige Liste von 10 Usability-Heuristiken für das Design von Benutzeroberflächen. Jede digitale Anwendung lässt sich anhand dieser Punkte zumindest grundlegend überprüfen, ob sie Qualitätskriterien des digitalen Designs entspricht. Die Liste enthält beispielsweise Aspekte wie „Sichtbarkeit des Systemstatus“ oder „Erkennen ist besser als Erinnern“.

Wenig hilfreiches, aber leider nicht ungewöhnliches Anwendungs-Feedback.

7. Mobile- oder Desktop-Ansichten unangemessen berücksichtigen

Nicht erst seit gestern wissen wir, dass ein immer größerer Teil der Nutzerinnen und Nutzer digitaler Anwendungen mit mobilen Endgeräten arbeitet. Zwar gibt es leider auch heute immer noch genügend Unternehmen, die keine mobil optimierte Webseite besitzen, diese Zahl wird jedoch immer kleiner. Unbedingt bedacht werden muss, dass unterschiedliche Devices eine unterschiedliche Bedienung per Maus oder per Finger erfordern. Wenn für die Desktopansicht über einen Hover-Effekt (erfolgt beim Fahren über Inhalte mit der Maus) die Anzeige ergänzender Informationen geplant ist, muss die Information auf einem Mobilgerät anders aufrufbar sein und dargestellt werden. Ein Hover ist mit dem Finger nicht möglich. Ein Tippen (in der Regel analog zum Klicken am Desktop) würde wiederum eine andere Funktion darstellen. Um eine gute Usability  für Mobil und Desktop zu sicher zu stellen, sollte schon in der Konzeptphase mit Scribbles und Wireframes erarbeitet werden, wo und wie z.B. Informationen aufrufbar sein müssen.

8. Konzeption ohne Nutzerfeedback

In einem UX Projekt mit menschzentriertem Ansatz steht, wie bereits erwähnt, die Erhebung des Nutzungskontext ganz am Anfang. Dies stellt sicher, dass die Anforderungen der Nutzerinnen und Nutzer im Projekt aufgenommen und schriftlich fixiert werden. Die Nutzungsanforderungen sollten jedoch nicht nur in Textform vorliegen, sondern auch deren Umsetzung im User-Interface sollte so früh wie möglich evaluiert werden. Ein frühes und kontinuierliches Testen mit den zukünftigen Nutzerinnen und Nutzern kann Probleme der Nutzungsschnittstelle noch im Prozess der Konzeption oder des frühen Designs aufdecken und so Entwicklungskosten sparen. Ein Papierprototyp oder ein digitales Design sind schnell verworfen und neu angelegt. Sobald jedoch Entwicklungszeit in eine Anwendung geflossen ist, lassen sich grundlegende Fehlentscheidungen im Konzept der Anwendung nicht mehr ohne Mehrkosten beheben.

9. Fazit & Empfehlung

User-Interfaces zu konzipieren und zu gestalten, wird durch die vielfältige Unterstützung durch intelligente Software immer einfacher. Umso wichtiger ist deshalb die Arbeit mit den Nutzern und Nutzerinnen selbst. Immer nahe an den Grundsätzen des Human-Centered Design gilt es die Anforderungen an interaktive Systeme zu erheben und ihre Umsetzung zu begleiten und nach Möglichkeit in einem frühen Stadium mit echten Nutzerinnen und Nutzern zu testen. Fehlende Funktionen, Elemente und Ansichten werden so sichtbar, bevor Geld in die eigentliche technische Entwicklung fließt. Mit einem menschzentrierten Ansatz kann so viel weniger schief gehen.

Über den Autor:
Markus Bürkel ist Mediengestalter für Digital & Print, Cross-Media affin und „Certified Professional Usability and User Experience“ nach UXQB in den Themen „Designing Solutions“ und „User Requirements Engineering“. Markus ist darüber hinaus anerkannter Trainer des UXQB und bei rocket-media neben Seminarleitungen vor allem für den Entwurf und die Gestaltung von gebrauchstauglichen User-Interfaces zuständig.

Bildquellen: rocket-media,
Titelbild: Photo by Karl Solano on Unsplash