Die 7 Todsünden des Produktdesigns (und wie man sie vermeidet)
An diesem Punkt unserer Zeit gibt es absolut keine Entschuldigung mehr für schlechtes Produktdesign. In der immer wettbewerbsintensiveren Welt der Softwareprodukte ist gelungene UI- und UX-Gestaltung nicht verhandelbar. Selbst wenn du großartige Technologie hast, die die Probleme deiner Nutzer löst: Schlechte UX wird Nutzer von deinem Produkt vertreiben—entweder, weil sie nicht herausfinden können, wie es funktioniert, oder ehrlich gesagt, weil sie es hassen.
Mach dich bereit: Ich werde jetzt mit etwas „harter Liebe“ aufräumen, indem ich die sieben Todsünden des Produktdesigns vorstelle und einige der schlimmsten Täter entlarve.
Sünde Nr. 1: „Der Weihnachtsbaum“
Einer meiner schönsten Kindheitserinnerungen ist, wie meine Schwester und ich den Weihnachtsbaum geschmückt haben. Sobald wir fertig waren, schauten wir ihn bewundernd an, denn für uns war er absolut wunderschön. Nun ja, zumindest haben wir das so empfunden. Wie sah er in Wirklichkeit aus? Ungefähr so.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Ich nehme an, du weißt, worauf ich hinauswill. Anders als bei dem Weihnachtsbaum, den deine Kinder ruhig nach Herzenslust dekorieren sollen, sollte deine UI und UX nicht wie ein chaotischer Haufen aus Elementen und Farben aussehen, der völlig durcheinandergewürfelt ist.
Schauen wir uns jetzt ein Beispiel aus der realen Welt an, das wie ein „Weihnachtsbaum“ aussieht.
Schau dir das einen Moment an und versuche mir zu erklären, worum es bei diesem Produkt geht. Ich bin mir sicher, du hast dich in der Benutzeroberfläche verirrt und lange nicht herausgefunden, was Sache ist. Es passiert einfach zu viel auf diesem Bildschirm – es ist praktisch unmöglich, zu verstehen, wo man ist und was man machen sollte.
Folgende Probleme fallen mir bei diesem Interface auf:
- Übermäßiger Farbeinsatz: Farbe ist ein mächtiges Werkzeug in den Händen geschickter Produktdesigner, da sie damit Nutzer in die richtige Richtung lenken können. Aber wenn zu viele Farben in der Benutzeroberfläche sind, verliert dieses Werkzeug seine Wirkung – und jedes farbige Element konkurriert um Aufmerksamkeit.
- Zu viele CTAs: Was ist jetzt eigentlich die wichtigste Schaltfläche, die ich anklicken sollte? Ehrlich gesagt: keine Ahnung – überall sind Buttons verteilt.
- Verwirrendes Layout: Der Bildschirm ist im Wesentlichen in drei Spalten aufgeteilt, wobei die mittlere zwei Tabs hat und es außerdem unten einen großen Zeitbereich gibt. Die Designer haben versucht, möglichst viele Inhalte auf einen einzigen Bildschirm zu quetschen.
Mach es so stattdessen
Das ist ein Beispiel, wie man versucht, irgendwie Ordnung in eine Masse von Informationen zu bringen. Denke stattdessen bei deiner UX an eine Landkarte für das gewünschte Nutzerverhalten. Es ist Produktdesign 101, dass Farbe, CTAs und Layout zusammenarbeiten sollten, um den Nutzer gezielt zum nächsten Schritt zu führen.
Sünde Nr. 2: Schlechte visuelle Hierarchie
Visuelle Hierarchie meint die Anordnung von Elementen in deiner UI so, dass die hierarchischen Beziehungen zwischen ihnen klar erkennbar werden.
Der Artikel, den du gerade liest, zum Beispiel, besitzt eine klare visuelle Hierarchie: Die Überschrift steht groß ganz oben, die Zwischenüberschriften sind kleiner als der Titel, aber deutlich kräftiger als der Fließtext, und so weiter.
In beiden Fällen heben wir die Titel hervor, indem wir sie entweder größer oder fetter machen—sodass eindeutig ist, dass die nachfolgenden Absätze sich jeweils auf das im Zwischenüberschriften genannte Thema beziehen.
Visuelle Hierarchie ist ein hervorragendes Mittel, die Benutzeroberfläche zu organisieren und die Navigation zu erleichtern. Fehlt sie jedoch, haben Nutzer große Mühe, sich durch dein Interface zu finden.
Ein auffälliges Versagen der visuellen Hierarchie, das mich täglich nervt, ist der Antwortbereich auf Quora.
Um Nutzer dazu zu animieren, länger auf der Seite zu verweilen und weitere Fragen zu stöbern, blendet Quora zusätzliche Fragen und Antworten ein, die thematisch mit der aktuellen Frage verwandt sind.
Das stört mich nicht. Es entspricht dem Nutzerverhalten und Quora nutzt das auf organische Art für sich.
Was mich hingegen stört, ist, wie diese verwandten Fragen und Antworten gestaltet sind. Sie sehen nahezu identisch aus wie die eigentlichen Antworten auf der Seite und ihnen fehlt eine visuelle Hierarchie. Schau dir den Screenshot oben an und sag mir, was eine Antwort und was eine verwandte Frage ist. Man muss schon langsam lesen, um das herauszufinden.
Machen Sie das stattdessen
Idealerweise wären die verwandten Fragen im UI weniger auffällig und in der visuellen Hierarchie unterhalb der Hauptantworten angesiedelt (z. B. mit einem grauen Hintergrund statt einem weißen).
Vergehen #3: UI direkt aus den 2000ern
Ich weiß, ich weiß, Craigslist hat eine schrecklich veraltete Benutzeroberfläche und funktioniert trotzdem perfekt. Aber das ist eine Ausnahme von der Regel und Sie sollten nicht denken, dass so etwas im Jahr 2023 noch akzeptabel ist.
Das Problem ist, dass Ihr Produkt – anders als Craigslist – nicht super beliebt sein wird und keine allgemein anerkannte Marke darstellt. Deshalb werden Besucher, die auf Ihrer Website oder in Ihrer Anwendung auf veraltetes Design stoßen, Sie einfach nicht ernst nehmen. Sie haben aber immer die Chance, durch ein kreatives Logo-Design und eine klare Markenidentität aufzufallen.
Leider sind es manchmal gerade die „seriösen“ Organisationen, die sich dieses Fehlverhaltens schuldig machen.
Ich hatte vor ein paar Jahren die Gelegenheit, mit der Zentralbank von Armenien zusammenzuarbeiten. Sie verfügen über einige der talentiertesten Finanzanalysten und Geldpolitik-Experten überhaupt. Außerdem war der Präsident dieser Institution (ein Harvard-Absolvent) früher mein Professor, und er ist wohl der klügste Mensch, den ich je getroffen habe.
Die Website der Zentralbank sieht jedoch so schlecht aus, dass Sie kaum glauben würden, dass es sich dabei um eine höchst renommierte Organisation mit äußerst begabtem Personal handelt.
Vergehen #4: Dark Patterns (oder UX gegen die Nutzer einsetzen)
In der UX-Welt sind „Dark Patterns“ Nutzerführungen und UI-Elemente, die den User bewusst in die Irre führen und ihn dazu bringen, eine Handlung auszuführen, derer er sich nicht bewusst ist.
Ein bestimmter E-Commerce-Shop mit einem orangefarbenen, pfeilförmigen Logo ist besonders „berüchtigt“ dafür, Dark Patterns einzusetzen. Sie sind in diesem Punkt so auffällig, dass es laufende Beschwerden und Untersuchungen gegen sie gibt, weil sie sich nicht an FCC-Regeln halten.
Eines der bekanntesten Nutzererlebnisse dieser Kategorie ist der Prozess, eine Prime-Mitgliedschaft zu kündigen.
Um fair zu sein: Es ist aus meiner Sicht durchaus sinnvoll, Ihren Nutzern beim Kündigen eines bezahlten Abos ein kurzes Feedback-Formular anzubieten oder sogar einen „Bitte bleiben Sie“-Rabatt zu gewähren. Doch sollten Sie die Zeit und Geduld der Nutzer respektieren.
Bedenken Sie: Wer Ihr Abo kündigen möchte, ist vermutlich bereits verärgert oder unzufrieden. Wenn Sie es ihm dann auch noch schwer machen, wird er noch wütender (und Sie können die Hoffnung, ihn irgendwann zurückzugewinnen, begraben).
Wenn Sie beispielsweise versuchen, Ihre Prime-Mitgliedschaft zu kündigen, bittet Amazon Sie zunächst, sich das noch einmal zu überlegen.
Mit diesem Bildschirm habe ich kein Problem, das machen viele.
Aber ich finde es nicht in Ordnung, dass Sie Ihre Auswahl (noch zwei!) weitere Male bestätigen müssen, um tatsächlich zu kündigen (das ist doch ein Witz, oder?). Außerdem sind die Formulierungen und Farben der Call-to-Action-Buttons so gewählt, dass es besonders schwer ist, den Button zur Kündigung zu finden.
Machen Sie das stattdessen
Versuchen Sie nicht, Ihre Nutzer zu Handlungen zu drängen, die nicht ihrer Absicht entsprechen, oder sie „mürbe“ zu machen, indem Sie Kündigungen unnötig erschweren. Menschen sind klug genug zu merken, dass Sie das absichtlich tun, und es macht Ihre Mitbewerber nur attraktiver. Nehmen Sie stattdessen eine kurze Umfrage zu den Kündigungsgründen und gestalten Sie den Prozess effizient, während Sie die Tür für eine Rückkehr offenlassen.
Vergehen #5: Best Practices für Formulare werden ignoriert
Formulare sind grundlegende Bausteine jeder Website und meist mit das Erste, was Entwickler bauen und Designer gestalten lernen.
Eine hervorragende User Experience für Formulare zu gestalten, ist wahrscheinlich eines der am häufigsten diskutierten Themen unter Designern, und Sie finden dazu an praktisch jeder Ecke Best Practices, Leitfäden und Tutorials.
Angesichts der Vielzahl an Lernmaterialien über Formulare und der Bedeutung, sie korrekt zu gestalten (sie wirken sich schließlich direkt auf die Nutzergewinnung und andere wichtige Kennzahlen aus), würde ich behaupten, dass es eine Sünde ist, die etablierten UX-Best Practices für Formulare nicht zu befolgen.
Lassen Sie mich Ihnen nun ein Beispiel für schlechtes Produktdesign bei Formularen geben.
Ich kann diese Seite kaum ansehen, ohne dass meine Augen tränen. Hier gibt es so viele Dinge, die nicht stimmen. Um nur einige zu nennen:
Unangemessene Verwendung von Leerraum: Warum müssen die Feldnamen so weit von den eigentlichen Feldern entfernt sein? Warum wird ein ganzer Block verwendet, um zwei winzige Schalter für "Abholung" und "Lieferung" zu platzieren? Man könnte ein Formular mit allen hier enthaltenen Informationen erstellen, das mindestens viermal kleiner und viel übersichtlicher wäre.
Fehlerhafte Formatierung der Felder: Es gibt ein Telefonfeld, in dem die eingegebenen Ziffern nicht im Format einer Telefonnummer (z. B. +49 (555) 123-1234) angezeigt werden, um sie leichter lesbar zu machen. Das ist so üblich, dass die meisten Design-Tools dafür sogar fertige Komponenten bereitstellen.
Fehlender Platzhalter: Im Abschnitt „Zusätzliche Lieferhinweise“ ist das Textfeld kaum zu erkennen. Außerdem ist unklar, was man dort eigentlich schreiben soll. Gutes Formular-UX setzt immer voraus, dass es Platzhalter-Text gibt, der Hinweise gibt, zum Beispiel "Bitte das Paket auf die Veranda legen".
So machen Sie es besser
Die Lösungen für jedes dieser Probleme liegen eigentlich auf der Hand, aber hier scheint es, als ob nur die Entwickler selbst dieses Formular getestet haben. Die Designer hätten gut daran getan, vor der Veröffentlichung echtes Nutzerfeedback zu dieser UX einzuholen.
Sünde Nr. 6: Falsche UI-Elemente verwenden
Die nächste Sünde, über die ich sprechen möchte, ist eine Fortsetzung der vorherigen. Nicht nur Formulare sind UI-Elemente in Ihrem Produkt, bei denen Sie etablierte Standards und Best Practices berücksichtigen sollten. Es gibt auch andere häufige Elemente wie Umschalter (Toggles), Kontrollkästchen und mehr.
Tatsächlich haben Nutzer für all diese Elemente bereits ein festes mentales Modell, wie sie funktionieren – und Sie müssen sicherstellen, dass Sie sie korrekt einsetzen.
Hier sind einige Beispiele, wofür diese Elemente gedacht sind und wie man sie nicht nutzen sollte:
Umschalter (Toggles): Dieses Element zeigt einen „booleschen“ Zustand an (z. B. An/Aus oder Aktiv/Inaktiv). Sie eignen sich hervorragend, um Ihren Nutzern zum Beispiel den Status der Bluetooth-Antenne im Smartphone anzuzeigen und zum Umschalten bereitzustellen.
Im vorherigen Formular gibt es allerdings zwei Umschalter, mit denen man zwischen Abholung und Lieferung wählen kann.
Wenn Sie kurz darüber nachdenken, haben Sie schon länger darüber nachgedacht als der Designer dieses Formulars. Die Umschalter bedeuten, dass man „Abholung“ AUS und „Lieferung“ EIN schalten muss, um die Option „Lieferung“ auszuwählen! Hier hätte man einfach Radiobuttons nehmen können. Ich frage mich ehrlich, was passiert, wenn beide Umschalter gleichzeitig aktiviert werden.
Ausklappmenüs ohne Filterfunktion: Dropdown-Menüs gehören zu den ältesten UI-Elementen auf Websites und sind nach wie vor beliebt und äußerst benutzerfreundlich – vorausgesetzt, sie werden richtig eingesetzt.
So machen Sie es besser
Best Practice verlangt, dass Sie ein Ausklappmenü für die Fälle nutzen, in denen der Benutzer eine Option aus einer Liste mit etwa 5–15 Einträgen wählen muss. Sind es weniger als 5 Optionen, greifen Sie lieber zu Radiobuttons.
Sollte die Auswahlliste sehr umfangreich sein (z. B. 50 US-Bundesstaaten oder etwa 200 Länder), muss das Ausklappmenü eine Filterfunktion besitzen. Andernfalls muss der Nutzer die gesamte Liste durchscrollen, um die gewünschte Option zu finden.
Sünde Nr. 7: Missachtung Ihrer Nutzer und deren Wünsche
Schließlich die vielleicht größte Sünde: Ein neues Produkt zu erstellen, dessen UX-Design weder den Bedürfnissen noch den Interessen Ihrer Nutzer entspricht. Das ist geradezu ein Rezept für das Scheitern.
So machen Sie es besser
Ein guter Produktdesign-Prozess beginnt immer mit Nutzerforschung. Wenn du nicht weißt, wer deine Nutzer sind und was sie brauchen, ist es egal, wie schön die Benutzeroberfläche aussieht – du wirst am Ende mit hoher Wahrscheinlichkeit ein schlecht gestaltetes Produkt erhalten.
Ich weiß, dass Nutzerforschung keine leichte Aufgabe ist. Schließlich hat es Apple Jahre an Nutzertests gekostet, um ein außergewöhnliches Maß an Nutzbarkeit sowohl im Industriedesign als auch beim Nutzererlebnis ihres iPhones zu erreichen. Aber glaube mir: Es ist die mit Abstand wirkungsvollste Maßnahme, die du treffen kannst, um den Erfolg deines Produkts sicherzustellen.
Es ist wirklich einfach, Design-Fehler zu vermeiden
Wenn du an Websites arbeitest, hast du schon einen besseren Startpunkt. Warum? Weil Webdesign-Tools in der Regel Vorlagen bieten, die bereits einige der hier genannten Sünden vermeiden. Doch egal, ob du als Startup digitale Produkte entwickelst oder als Unternehmen physische Produkte (wie Tastaturen oder Bewegungssensoren) baust — es ist eigentlich ganz einfach, schlechte Gestaltung zu vermeiden.
Solange dein Produktentwicklungsprozess sich auf die Bedürfnisse und Schmerzpunkte deiner Nutzer konzentriert und du die richtige Produktdesign-Software verwendest, kannst du gravierende Designfehler und ein schlecht gestaltetes Produkt vermeiden (das ist übrigens auch einer der vielen Vorteile von KI-Design-Software).
Ich hoffe, dass diese Beispiele dir ein besseres Gefühl für deine eigenen Produkte gegeben oder dich zumindest zum Schmunzeln gebracht haben. Für weitere UX-Tipps und Artikel für Produktmenschen abonniere gerne unseren Newsletter!
