Schlechtes Design vs. gutes Design: 5 Beispiele, von denen wir lernen können

Es macht nicht nur Spaß, Beispiele für schlechtes Design neben Gegenbeispielen für gutes Design zu betrachten, sondern auch wichtige Lehren für Designer zu ziehen. Sie zeigen Fallstricke auf, die Designer vermeiden sollten, und lassen uns verstehen, wie man Designtheorien in Lösungen umsetzt, die in der realen Welt funktionieren. Jared Spool, der amerikanische Schriftsteller, Forscher und Experte für Benutzerfreundlichkeit, sagte einmal: „Gutes Design, wenn es gut gemacht ist, wird unsichtbar. Nur wenn es schlecht gemacht ist, fällt es uns auf.“ Sehen wir uns also fünf Beispiele für offensichtlich schlechtes Design an, beleuchten wir, wie gutes Design funktioniert, und destillieren wir einige Lektionen, damit wir alle großartige und unsichtbare Erlebnisse für unsere Nutzer schaffen können.

Informationsflut

Das Schlechte: Parkschilder in Los Angeles

Parkschilder in Los Angeles (LA) sind seit Jahrzehnten der Inbegriff der Informationsflut. Sie waren schon immer schwer zu verstehen, denn die Verkehrsregeln sind komplex, so dass viele Informationen auf kleinem Raum vermittelt werden müssen.

Wie verwirrend sind diese Schilder? Traditionell sehr – sehen Sie sich dieses Beispiel aus den 2010er Jahren an:

Autor/Copyright-Inhaber: Jorge Gonzalez. Copyright-Bedingungen und Lizenz: CC BY-SA 2.0

Für LA-Parkplatzschilder ist dieses Beispiel schon ziemlich einfach.

Stellen Sie sich vor, Sie sind ein Autofahrer auf dieser Straße an einem Dienstagmorgen um 9 Uhr. Können Sie an dieser Stelle parken? Was sich wie eine einfache Frage anhört, erfordert eine Menge Denkarbeit, um sie zu beantworten.

Als Designer sind wir oft mit Situationen konfrontiert, in denen wir viele Informationen auf kleinem Raum darstellen müssen. Die Parkschilder in L.A. mögen ein Extremfall sein, aber bei der Gestaltung von mobilen Anwendungen stehen wir oft vor denselben Problemen. Gibt es einen Ausweg – sowohl für die Parkschilder als auch für Designer im Allgemeinen?

Das Gute: Das Parkplatzschild von Nikki Sylianteng

Ein Schild zu entwerfen, das alle Informationen anzeigt und gleichzeitig leicht verständlich ist, klingt nach einer unmöglichen Aufgabe. Aber genau das hat die Designerin Nikki Sylianteng aus Brooklyn geschafft.

Autor/Copyright-Inhaber: Nikki Sylianteng. Copyright-Bedingungen und Lizenz: CC BY-NC-SA 4.0

Nikkis vorgeschlagenes Parkschild wurde schließlich in LA als Teil eines Testlaufs eingesetzt.

Nikkis Design1 funktioniert auch deshalb so gut, weil es nutzerzentriert ist: Nikki hat erkannt, dass Autofahrer einfach nur wissen wollen, ob sie an einem bestimmten Ort parken dürfen. Ja oder nein – das ist alles, was die Autofahrer brauchen, und das ist alles, was das Parkschild anzeigt.

Ihr Design verwendet außerdem visuelle Elemente statt Text, um Informationen zu vermitteln. Das Ergebnis ist unglaublich intuitiv: grün für OK, rot für Parkverbot. Es ist sogar für Farbenblinde gedacht, mit Streifen für Parkverbot.

Wenn Sie nun auf das Schild schauen, wissen Sie, dass am Dienstag um 9 Uhr das Parken verboten ist. Die Balken zeigen auf einen Blick, was was ist – ganz einfach.

Lessons Learnt: Best Practice

• Verstehen Sie, was Ihre Nutzer brauchen, und gestalten Sie dann auf dieser Grundlage. Dies hilft, die Informationsflut zu verringern.
• Sie müssen Ihren Benutzern viele Informationen vermitteln? Versuchen Sie es mit visuellen Darstellungen anstelle von Text. Erfahren Sie hier mehr über Datenvisualisierung.

Mystery Meat Navigation

Das Schlechte: LazorOffice.com

Die Mystery Meat Navigation (MMN) wurde 1998 von Vincent Flanders von Web Pages That Suck2 geprägt und bezieht sich auf Fälle, in denen das Ziel eines Links nicht sichtbar ist, bis der Benutzer darauf klickt oder den Cursor darauf richtet. Der Begriff „Mystery Meat“ ist eine Anspielung auf das in amerikanischen Schulkantinen servierte Fleisch, das so verarbeitet ist, dass seine genaue Art nicht mehr erkennbar ist.

MMN ist schlecht, weil es die Auffindbarkeit von Navigationselementen verringert. Dies führt zu einer zusätzlichen kognitiven Belastung der Benutzer, da sie nun raten müssen, wie sie navigieren können oder was ein Klick auf etwas bewirkt.

Während die meisten MMN in älteren Websites zu finden sind, sind sie in modernen Websites überraschend häufig anzutreffen. Nehmen Sie zum Beispiel Lazor Office, eine Designfirma, die Fertighäuser entwirft.

Autor/Copyright-Inhaber: Lazor Office, LLC. Copyright-Bedingungen und Lizenz: Fair Use

LazorOffice.com hat ein Raster von MMN-Bildern auf seiner Homepage. Wie Sie sehen können, gibt dieses Tableau kaum einen Hinweis darauf, wohin man gehen soll. Stattdessen sitzen neun Bilder einfach da und lassen einige von uns eher über ein Rätsel grübeln als mit einer Seite zu interagieren.

Unter dem Falz der Homepage wartet ein Raster von Miniaturbildern. Sind sie anklickbar? Nun, ja – wenn Sie den Mauszeiger über ein Bild bewegen, verwandelt er sich in einen Zeiger. Aber was passiert, wenn Sie auf ein Bild klicken?

„Klicken Sie, um es herauszufinden!“ ist nie eine gute Lösung für die Benutzerfreundlichkeit (UX). Die Chancen stehen gut, dass Ihre Benutzer die Navigation abbrechen und eine alternative Lösung auf der Website eines Konkurrenten finden.

Das Gute: Kurskarten auf der Website der Interaction Design Foundation

Glücklicherweise sind MMN-Probleme leicht zu lösen. Der Schlüssel ist, sich bewusst zu sein, dass man Links deutlich kennzeichnen muss. Ein einfaches Hinzufügen von „Projekt anzeigen“, das beim Überfahren mit der Maus erscheint, wird die Benutzerfreundlichkeit der obigen Seite von Lazor Office verbessern.

Autor/Copyright-Inhaber: Interaction Design Foundation ApS. Copyright Bedingungen und Lizenz: Fair Use

Unsere Kurskarten sind so wenig mysteriös wie Links.

Für die Kurskarten der Interaction Design Foundation haben wir nicht nur „View Course“ am unteren Rand jeder Karte, um die Aktion anzuzeigen, die passieren wird, sondern wir haben auch einen Hover-Status mit dem Text „Go to course“. Viele Websites folgen einer ähnlichen Konvention, und das sollten Sie auch tun, um die Benutzerfreundlichkeit Ihrer Website zu maximieren.

Lesson Learnt: Best Practice

Beschriften Sie immer Ihre Links! Sie würden ungern geheimnisvolles Fleisch essen – und ebenso wenig möchten Ihre Benutzer auf geheimnisvolle Links klicken.

Benutzeraktionen mit Reibungen versehen

Das Schlechte: iFly50.com

Als Designer sollten wir Benutzeraktionen nur mit äußerster Vorsicht mit Reibungen versehen, es sei denn, es geht darum, die Benutzer von der Ausführung dieser Aktion abzuhalten. Manchmal können wir jedoch auch unbeabsichtigt Reibung zu Benutzeraktionen hinzufügen (meist aus ästhetischen oder neuartigen Gründen), die zu einer nachteiligen UX führen.

Ein Beispiel ist iFly50.com, das zum Jahrestag des iFly-Magazins von KLM erstellt wurde. Bei iFly 50 handelt es sich um eine vertikal scrollende Website, auf der 50 Reiseziele vorgestellt werden. Bei einigen Reisezielen (z. B. dem unten abgebildeten) fordert eine Schaltfläche am unteren Rand die Benutzer auf, einige Sekunden lang zu klicken, um weitere Fotos zu betrachten.

Autor/Copyright-Inhaber: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Copyright-Bedingungen und Lizenz: Fair Use

iFly 50 erwartet von seinen Nutzern, dass sie jedes Mal, wenn sie mehr Fotos sehen wollen, ein paar Sekunden lang klicken und halten müssen.

Das Hinzufügen von ein paar Sekunden Reibung zu jeder Aktion kann zu einer enorm schlechteren UX führen. Stellen Sie sich vor, Sie müssen für jeden Link, den Sie in Ihrem Browser anklicken, zwei Sekunden lang klicken und halten, anstatt eine Seite sofort zu laden. Nach ein paar Klicks werden Sie die Erkundung des Internets ganz aufgeben.

Wir Designer neigen oft dazu, uns von den neuesten Interaktionsstilen oder -aktionen mitreißen zu lassen, aber es ist wichtig, dass Sie immer dann Vorsicht walten lassen, wenn Ihr Design die Aktionen der Benutzer beeinträchtigen könnte. Meistens funktionieren bewährte Konventionen (z. B. einfaches Klicken oder Streichen) perfekt.

Das Gute: Elastisches Scrollen auf iOS

Interessanterweise kann das bewusste Hinzufügen von Reibung zu Benutzeraktionen zu einem großartigen Design führen. Eine der beliebtesten Erfindungen von Apple in seinem mobilen Betriebssystem iOS ist das elastische Scrollen, bei dem in bestimmten Situationen (z. B. am Ende einer Webseite) das Scrollen zunehmend schwieriger wird.

Autor/Copyright-Inhaber: Interaction Design Foundation ApS. Copyright Bedingungen und Lizenz: Fair Use

Beim elastischen Scrollen von iOS wird die Reibung in einigen Situationen absichtlich hinzugefügt.

Sie können dies oben in Aktion sehen, wo eine erhöhte Reibung auftritt, wenn der Benutzer zum Ende der Webseite scrollt. Die Reibung wurde hinzugefügt, um auf Situationen hinzuweisen, in denen das Scrollen nicht mehr erlaubt ist: und der Effekt ist eine intuitive Erfahrung.

Lesson learned: Best Practice

Vermeiden Sie so weit wie möglich jede Art von Reibung bei Benutzeraktionen – und setzen Sie sie vorsichtig ein, wenn Sie keine Alternative haben.

„Cleveres“ Design, das die Benutzerfreundlichkeit ignoriert

Das Schlechte: Bolden.nl

Gelegentlich können clevere Designs der UX abträglich sein. Was diesen Fehler noch gefährlicher macht, ist, dass wir Designer clevere Designs lieben. Sie sind kleine grafische Wunder, die uns ein Lächeln ins Gesicht zaubern. Leider ist die Mehrheit der Menschen keine Designer. Noch trauriger ist, dass nicht alle cleveren Designs gute Designs sind, vor allem, wenn sie Probleme mit der Zugänglichkeit, Auffindbarkeit oder Benutzerfreundlichkeit verursachen.

Nehmen wir zum Beispiel die Website des niederländischen Studios für strategisches Design und Entwicklung Bolden:

Autor/Copyright-Inhaber: Bolden. Copyright-Bedingungen und Lizenz: Fair Use

Können Sie erkennen, was die Homepage aussagen will? Nein? Nun, das liegt daran, dass Sie Ihre Maus in die Ecke der Seite bewegen müssen, um die Nachrichten richtig zu sehen.

Autor/Urheber: Bolden. Copyright Bedingungen und Lizenz: Fair Use

Ist das ein cleveres Design? Ja, definitiv. Aber ist es auch schlechtes Design? Auf jeden Fall!

Dies ist ein großartiges Beispiel für ein Design, das eher auf den Designer als auf den Benutzer ausgerichtet ist: Die Website hat die Lesbarkeit der Überschriften stark eingeschränkt, weil ihre Schöpfer entschlossen waren, ein neues Design zu liefern. Wer auch immer dies entworfen hat, hat auch den Text weggelassen, der den Nutzern sagt, dass sie ihre Maus zu den Ecken bewegen sollen, was bedeutet, dass die Entdeckung der Überschriften vom Zufall abhängt. Selbst wenn die Überschrift sichtbar ist, ist der Kontrast zwischen dem Text und dem Hintergrund so gering, dass man immer noch überlappenden Text sehen kann. All dies führt zu einer benutzerunfreundlichen Website.

Das Gute: CultivatedWit.com

Die Website von Cultivated Wit ist ein großartiges Gegenbeispiel dafür, dass cleveres Design nicht zu Lasten der Benutzerfreundlichkeit gehen muss.

Autor/Copyright-Inhaber: Cultivated Wit. Copyright-Bedingungen und Lizenz: Fair Use

Die Homepage von Cultivated Wit zeigt eine illustrierte Eule.

Auf der Homepage von Cultivated Wit zwinkert die Illustration der Eule, wenn man mit der Maus darüber fährt:

Autor/Urheberrechtsinhaber: Cultivated Wit. Copyright-Bedingungen und Lizenz: Fair Use

Überraschung! Die Eule zwinkert dir zu, wenn du den Cursor auf sie richtest. Beachten Sie auch die kluge Aufteilung des Leerraums.

Der entscheidende Unterschied ist, dass dies kein wesentlicher Bestandteil der Website ist, so dass die Benutzerfreundlichkeit nicht beeinträchtigt wird, selbst wenn der Benutzer dieses clevere Designelement nicht entdeckt.

Darüber hinaus gibt es einen klaren Pfeil, der nach unten zeigt, um anzudeuten, dass etwas unterhalb des Falzes liegt. Und wenn Sie nach unten scrollen, sehen Sie dies:

Autor/Copyright-Inhaber: Cultivated Wit. Copyright-Bedingungen und Lizenz: Fair Use

Und Websites können clever sein, ohne die Benutzerfreundlichkeit zu beeinträchtigen.

Der Text (der gut lesbar ist und einen guten Kontrast aufweist) vermittelt ein Gefühl von Witz – nicht unähnlich dem, was Bolden zu erreichen versuchte – ohne die Benutzerfreundlichkeit der Website zu beeinträchtigen. Das einzige kleine Problem ist, dass der Text „Join our email club“ besser sichtbar sein sollte, aber als Ganzes betrachtet ist die Website von Cultivated Wit ein großartiges Beispiel für ein cleveres Design ohne schlechte UX.

Lesson Learnt: Best Practice

Kluge Entwürfe sollten immer so narrensicher wie möglich gemacht und/oder an tatsächlichen Nutzern getestet werden. Manchmal können clevere Designs nach hinten losgehen und der Benutzerfreundlichkeit schaden.

Überflüssige Animationen

Das Schlechte: PayPal Receipt Concept auf Dribbble

Animationen sind ein wichtiges Element des Interaktionsdesigns, aber sie sollten immer einem Zweck dienen. Sie sollten nie um der Animation willen gemacht werden. Leider neigen Designer dazu, eine Liebesaffäre mit Animationen zu haben, zum Teil, weil Animationen so viel Spaß machen, dass wir nicht wissen, wann wir aufhören sollten.

Vladyslav Tyzuns Animationskonzept für eine PayPal-E-Mail-Quittung, das auf Dribbble veröffentlicht wurde, ist ein Beispiel für falsch gemachte Animationen:

Autor/Copyright-Inhaber: Vladyslav Tyzun. Copyright-Bedingungen und Lizenz: Fair Use.

Die Animation ist hübsch, aber überflüssig. Insgesamt dauert es satte 3,5 Sekunden, bis die Transaktionsdetails zu sehen sind. Eine einfache Einblendung des Kassenbons wäre eleganter und, da sie weniger Zeit in Anspruch nimmt, auch für den Nutzer besser.

Gefährlich wird dieses Problem, wenn Designer scheinbar nicht genug von Animationen bekommen können. Im Jahr 2016 erhielt Vladyslavs Animation mehr als 500 Likes und 8.000 Aufrufe. Dies zeigt die fehlgeleitete Wertschätzung, die Designer der Animation um der Animation willen entgegenbringen. Wenn Sie wissen, dass Designer dazu neigen, schwungvolle Epen gegenüber direkteren Darstellungen zu bevorzugen, und sich selbst ertappen, bevor Sie Animationen nachgeben, können Sie viel Zeit sparen und viele Kopfschmerzen vermeiden. Denken Sie daran, dass die Benutzer eine Website aus einem bestimmten Grund besuchen – wir wollen ihnen in kurzer Zeit zeigen, was sie suchen, und sie nicht mit einer großen Tour durch die Galerie aufhalten.

Das Gute: Die Animation von Stripe Checkout

Wenn wir die Animation jedoch gezielt einsetzen, können die Ergebnisse großartig sein. Sehen Sie sich die Animation von Stripe Checkout an, wenn der Benutzer einen Verifizierungscode erhält:

Autor/Copyright-Inhaber: Stripe, Inc. Copyright-Bedingungen und Lizenz: Fair Use.

Stripe verwendet Animationen, um die Dinge schneller erscheinen zu lassen, als sie sind: Es zeigt den Benutzern Aktualisierungen (wie „Gesendet“) an, obwohl sie die SMS noch nicht erhalten haben könnten. Dadurch wird verhindert, dass die Benutzer frustriert sind, weil sie warten müssen, und es wird ihnen versichert, dass die SMS gerade unterwegs ist.

Rachel Nabors, eine eingeladene Expertin für Web-Animationen beim W3C, schlägt fünf Grundsätze vor, die bei der Gestaltung von Animationen beachtet werden sollten3:

1. Animieren Sie bewusst: Denken Sie über jede Animation nach, bevor Sie sie erstellen.
2. Es braucht mehr als 12 Prinzipien: Disneys 12 Prinzipien der Animation funktionieren für Filme, aber nicht unbedingt für Websites und Apps.
3. Nützlich und notwendig, dann schön: Die Ästhetik sollte hinter der UX zurückstehen.
4. Viermal schneller: Gute Animationen sind unaufdringlich, was bedeutet, dass sie schnell laufen.
5. Installieren Sie einen Kill Switch: Für große Animationen wie Parallex-Effekte sollten Sie einen Opt-out-Button einrichten.

Lesson Learnt: Best Practice

Machen Sie Ihre Animationen immer zielgerichtet: zu viel kann die UX eines Produkts zerstören. Schönheit muss ihr Gewicht haben und funktional sein.

The Take Away

Ist es nicht lustig, sich Beispiele für schlechtes Design anzusehen? Zum Glück ist es auch lehrreich. Hier sind die wichtigsten Lehren und bewährten Verfahren aus den fünf Beispielen für gutes und schlechtes Design:

1. Verstehen Sie, was Ihre Benutzer brauchen, und liefern Sie dann diese Informationen.
2. Wenn Sie viele Informationen zu vermitteln haben, versuchen Sie es mit Bildern anstelle von Text.
3. Beschriften Sie immer Ihre Links! Benutzer mögen keine geheimnisvollen Links.
4. Vermeiden Sie jede Art von Reibung bei Benutzeraktionen, es sei denn, sie sollen von der Aktion abhalten.
5. Testen Sie Ihre cleveren Designs und setzen Sie sie vorsichtig ein.
6. Animation ist wie Fluchen. Wenn man sie zu oft einsetzt, verliert sie ihre Wirkung.4

Wenn Sie das nächste Mal über ein schlechtes Design stirnrunzeln, halten Sie inne und denken Sie nach: Verstehen Sie, warum das Design gescheitert ist, finden Sie Beispiele für Designs, die es richtig gemacht haben, und notieren Sie sich die Lektion, die Sie daraus gelernt haben. Und dann teilen Sie die Liebe: Teilen Sie Ihre Lektion mit anderen Designern in unserem Diskussionsforum!