UX Design: diese Grundlagen sollten Sie kennen

Was ist UX-Design?

Die DIN ISO 9241-210 beschreibt die User-Experience (UX) wie folgt:

„Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder der erwarteten Benutzung eines Produkts, eines Systems oder einer Dienstleistung resultieren.“

DIN ISO 9241-210

Design umfasst nicht nur die Optik eines Produkts, sondern auch dessen funktionaler Kern. Der ehemalige Apple-Chef Steve Jobs war geradezu ein Radikaler in Designfragen. Als er Ende der Neunziger zu Apple zurückkehrte, strich er das Produktportfolio von 350 Produkten auf rund zehn zusammen. Auf die verbleibenden Produkte wurde der volle Entwicklungsfokus gelegt. Man kann also sagen „UX-Design ist Fokus”, bezogen auf eine Marke in ihrer Gesamtheit.

„User Experience ist eine Folge des Markenbilds, der Darstellung, Funktionalität, Systemleistung, des interaktiven Verhaltens und der Unterstützungsmöglichkeiten des interaktiven Systems, des psychischen und physischen Zustands des Benutzers aufgrund seiner Erfahrungen, Einstellungen, Fähigkeiten und seiner Persönlichkeit sowie des Nutzungskontextes.“

DIN ISO 9241-210

„UX-Design ist die Marke”. Denn worüber differenzieren sich Marken heutzutage in erster Linie? Genau, über das Design. Das wird besonders deutlich auf dem Markt der Kraftfahrzeuge. Technisch bestehen kaum relevante Unterschiede, aber das Design unterscheidet sich teils radikal. Optik und Nutzererfahrung spielen beim Fahrzeugkauf eine gravierende, wenn nicht für viele sogar die einzige Rolle. Je stärker das Design ist, desto stärker wird die Marke wahrgenommen. Das führt zu einem Wettbewerbsvorteil.

„UX-Design ist Führung” ergibt sich aus dieser Erkenntnis. Wenn wir nun wissen, dass Design auf Fokus ausgerichtet ist und die Marke repräsentiert, dann müssen wir mit dem Design auch Führungsaufgaben übernehmen.

Führung betrifft zum einen den Aspekt der Benutzbarkeit. Produkte müssen so gestaltet sein, dass man sie verwenden kann. Dabei muss aus vielen verschiedenen denkbaren Varianten diejenige gewählt werden, die dem Nutzer am ehesten entspricht. Wir können es also nicht frei dem Verwender überlassen, wie er mit dem Produkt interagiert, sondern müssen ihm klare Vorgaben machen, damit er sich sicher im Umgang mit dem Design fühlen kann.

„User Experience umfasst sämtliche Emotionen, Vorstellungen, Vorlieben, Wahrnehmungen, physiologischen und psychologischen Reaktionen, Verhaltensweisen und Leistungen, die sich vor, während und nach der Nutzung ergeben.“

DIN ISO 9241-210

Der Aspekt der Führung betrifft die Frage nach der Diversifizierung der Produktpalette. Wir müssen davon ausgehen, dass die allermeisten potenziellen Verwender unserer Designs keine Experten im Umgang mit dem entsprechenden Produkt sind. Es ergibt also keinen Sinn, viele Produkte der gleichen Art mit leicht unterschiedlichen Features anzubieten. Es wäre übrigens schön, wenn das endlich mal von großen Hardware-Herstellern Asus, Acer oder DELL erkannt werden würde.

Oder schauen wir auf die Smartphone-Landschaft, in der ein großer Anbieter wie Samsung ein gutes Dutzend verschiedener ähnlicher Angebote macht, Apple hingegen im Wesentlichen drei. Der potenzielle Käufer hat es so weitaus leichter, sich zu entscheiden. Der Designer muss darauf achten, dass sein Design eine gute Kombination aller Möglichkeiten repräsentiert, so dass der Käufer nicht hinterher durch fehlende Features zu der Einsicht gelangt, einen Fehlkauf getätigt zu haben. Der Ansatz „Design ist Führung” bedeutet also eine große Verantwortung, die man nicht auf die leichte Schulter nehmen darf.

Wenn wir nicht so branchenfremd suchen wollen, brauchen wir nur das App-Design heutiger Tage anzusehen. Worin unterscheiden sich Oberflächen heutzutage noch? Vielfach erfolgt Differenzierung nur noch über Mikrointeraktionen.

„Die Gebrauchstauglichkeit kann, sofern sie unter dem Blickwinkel der persönlichen Ziele des Benutzers interpretiert wird, die Art der typischerweise mit der User Experience verbundenen Wahrnehmungen und emotionalen Aspekte umfassen. Kriterien der Gebrauchstauglichkeit können angewendet werden, um Aspekte der User Experience zu beurteilen.“

DIN ISO 9241-210

Denn sonst können wir den wichtigen Aspekt „UX-Design löst ein Problem” nicht zufriedenstellend umsetzen. Als Designer gehen wir stets von einem zu lösenden Problem aus, niemals von der Lösung als Fokus der Betrachtung. Mit anderen Worten: „Die Menschen wollen keine Bohrmaschinen kaufen, sie wollen schlicht Löcher in der Wand.”

Im Kern des Designprozesses müssen wir dann zusätzlich den Grundsatz „UX-Design ist einfach” beherzigen. Wenn wir die bisher genannten Grundsätze zusammenkippen und destillieren, dann kann dabei schon nichts anderes herauskommen. Gleichzeitig ist es aber durchaus schwer, diesem Grundsatz zu entsprechen. Warum das so ist, dafür gibt es eine ganze Reihe von Gründen.

Haben wir es geschafft, den eben genannten Grundsatz umzusetzen, dann gilt „UX-Design ist zeitlos”. Das mag klingen, als müsste man ein Produkt nur ein einziges Mal auf die richtige Weise gestalten und würde dann arbeitslos. Und auf der höchsten Ebene stimmt das sogar.

Glücklicherweise ist es so, dass uns technische Fortschritte zuverlässig in die Situation versetzen, neue Innovationen zu erschaffen, die bis zu diesem Zeitpunkt schlichtweg nicht möglich gewesen sind. So wären sieben Millimeter dicke Smartphones sicherlich auch in den Neunzigern ein besseres Designkonzept für das mobile Telefonieren gewesen, wir hatten aber nicht die technischen Möglichkeiten, das umzusetzen. Insofern, da darf man ganz zuversichtlich sein, werden UX-Designer noch lange ihre Jobs behalten.

Was ist „gutes“ UX-Design?

Der eigene Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein UX-Design nun gut oder schlecht ist. Lassen Sie uns da mal objektiver ran gehen.

UX-Design ist nicht Kunst

Der Köder muss dem Fisch schmecken und nicht dem Angler. Damit gelangt man schon mal in die richtige Richtung, wenn es um die Bewertung eines Köders, in unserem Falle eines Designs geht. Wobei man in diesem Falle gemeinsam mit dem Kunden der Angler ist. Die Zielgruppe des Designs, das sind die Fische.

Auch unter den Fischen wird man indes auf keine einhellige Meinung treffen. Wir können uns also auf die subjektive Einschätzung der Zielgruppe genauso wenig verlassen, wie auf die des Kunden. Überhaupt ist die Frage des Geschmacks, die Frage, ob etwas gefällt oder nicht, eher untauglich, um etwas als gutes oder schlechtes UX-Design einzuordnen.

UX-Design ist keine Kunst, sondern eine Kommunikationsmethode. Das mag dem einen oder anderen Designer, der sich als Künstler definiert, nicht gefallen, was allerdings der Wahrheit der Aussage keinen Abbruch tut. Und da es sich bei unseren Erzeugnissen nicht um Kunst handelt, unterliegen sie nicht den gleichen Bedingungen.

UX-Design dient einem Zweck, zumeist dem Zweck des Verkaufens. Das ist bei Kunst niemals der Fall. Kunst ist der Zweck an sich. Kunst soll verkaufen, aber nur sich selbst. Design ist da weitaus ambitionierter angelegt.

Genau an dieser Stelle, nämlich der Beurteilung des Zwecks, starten wir mit den objektiven Kriterien, die zeigen, ob ein UX-Design gut oder schlecht ist.

Erfüllt das UX-Design seinen Zweck?

Nicht immer ist der zu erfüllende Zweck leicht zu erkennen. Umso wichtiger ist es, intensiv mit dem Kunden darüber zu reden, was das Design leisten soll. Handelt es sich um eine Website, die ein Produkt verkaufen soll? Soll die Website lediglich unterhalten? Will der Kunde ein Logo, das sympathisch auf seine Zielgruppe wirkt? Wer ist das?

Je intensiver man die Wünsche des Kunden kennenlernt, desto effektiver kann ihr Design werden.

Passt das UX-Design zur Marke?

Wenn man ein ganz tolles Auswärts-Trikot für den BVB 09 entwirft, das sich trägt wie ein warmer Sonnenstrahl, robust ist wie Titan und auch optisch eine wahre Augenweide ist, es aber in Blau-Weiß daher kommt, dann ist es kein gutes Design. Denn es würde ganz ganz schlecht zur Marke passen.

Die Marke hat im Idealfall bereits ein loyales Publikum, Kundschaft – eine Zielgruppe. Diese Zielgruppe wird vom Design für die Marke einige Kernvorstellungen haben. Im Beispiel wird Blau-Weiß ganz klar nicht dazu gehören.

Red Bull hat anfangs Nischensportarten stark unterstützt. Entsprechend war das damalige Design extremer, näher an Sportarten, wie Surfen, Motocross, Parcouring dran.

Je breiter eine Zielgruppe wird, desto „zahmer“ muss das Design werden. Bei einer eng eingegrenzten Zielgruppe kann man sich auf die Eigenheiten dieses Publikums fokussieren, um mehr Nähe und Credibility zu schaffen. Bei breiter agierenden Marken empfiehlt sich der eher konventionelle Ansatz.

Das Design muss also zur Markenidentität passen und eben diese Marke an die Zielgruppe transportieren. Kann man an diesen Satz für ihr Design einen Haken machen, dann handelt es sich um ein gutes Design.

Ist UX-Design als solches wahrnehmbar?

Schlechtes UX-Design macht auf sich aufmerksam, allerdings auf negative Weise. Schlechtes Design nimmt man wahr, etwa weil die eingesetzte Schriftart viel zu klein ist oder sich das Layout der Website nicht ordentlich auf ihrem Smartphone-Display anpasst.

Schlechtes Design erzeugt einen Lernaufwand an sich. Wenn sich das Design allerdings nahtlos anfühlt und keinen eigenen Aufwand beim Verwender erzeugt, dann ist es gut.

Warum gibt es so viel schlechtes UX-Design?

Schlechtes UX-Design ist überall, gutes Design immer noch Mangelware. Woran liegt das? Gibt es nicht genügend Experten? Wird von irgendwoher fehlgesteuert? Liegt es in der Natur des Menschen? Schauen wir doch mal gemeinsam genauer hin.

Gestern wollte ich eine ganz simple Aufgabe erledigen. Ich wollte an meiner Mikrowelle die Uhrzeit korrigieren. Die Uhr ging nämlich ein paar Minuten vor, warum auch immer. Raten Sie mal, ob ich es geschafft habe. Richtig, ich habe es nicht geschafft. Und ich werde es ohne die Bedienungsanleitung, die ich vor lauter Ärger nicht mehr suchen wollte, auch nicht schaffen. Ist das mein Fehler? Nein. Das Design des Geräts ist schlichtweg schlecht.

Wir alle kennen weit mehr schlechtes als gutes Design. Um das eine vom anderen zu unterscheiden, muss man kein ausgewiesener Experte sein. Das kann jeder. Um gutes Design zu erschaffen, ist jedoch Expertenwissen gefragt. Denn der Weg zu gutem Design ist mit vielen Entscheidungen gepflastert, bei denen man jeweils leicht die falsche treffen kann.

Eine gute Maxime ist sicherlich das Einstein-Zitat „Mach die Dinge so einfach wie möglich, aber nicht einfacher”. Jedoch besteht heutzutage selten das Problem darin, dass ein Design etwa zu einfach wäre. Viel häufiger sehen wir Überdesign. Aber fangen wir mit ein paar Grundlagen an.

Was UX-Design nicht sein sollte, aber leider zu oft ist

Kommen wir nun zu den Fehlentwicklungen, die man an allen Ecken der Welt leicht sehen kann, wenn man es will.

Selbstverliebtheit: UX-Design als Lösung in sich

Natürlich soll Design eine Lösung anbieten. Allerdings muss es das zugrundeliegende Problem auch wirklich geben. Was wir heutzutage vielfach sehen, ist, dass Firmen Produkte und Dienstleistungen entwickeln, die möglicherweise grandiose Lösungen bieten. Durchsetzen tun sie sich jedoch dann nicht, wenn es keinen Bedarf beim Verwender gibt.

Design muss also ein tatsächliches Problem lösen, das den Menschen quasi unter den Nägeln brennt. Ein Design um seiner selbst willen ist selbst dann nicht gut, wenn es schön ist.

In die gleiche Richtung gehen Designs, die sich von gleichartigen Designs nur dadurch abheben, dass sie von jemand anderem gestaltet wurden. Wenn ich mir die Myriaden an Me-Too-Apps in den App Stores der Welt ansehe, wird mir dieses Problem immer wieder deutlich. Es ergibt keinen Sinn, eine Lösung für ein bereits vielfach gelöstes Problem anzubieten, wenn sich der Lösungsansatz nicht fundamental von anderen unterscheidet und dabei zudem noch besser ist.

Generell darf man wohl ungestraft behaupten, dass Kreativschaffende immer ein Stück weit egozentrisch sind. Das darf aber nicht zu einer Selbstverliebtheit dergestalt führen, dass man sich selbst zum Maß aller Dinge erhebt. Design muss immer bescheiden bleiben. Die effektivsten Lösungen sind oft die einfachsten. Da ist kein Raum für Narzissmus.

Angst: UX-Design als Everybody’s Darling

Man kann es ein Stück weit verstehen. Firmen wollen Produkte an den Mann und an die Frau bringen. Das ist hart genug. Bekanntlich ist nichts schwerer, als an das Geld anderer Leute zu gelangen. Es schwingt also bei jedem Produkt immer auch Angst mit. Wird es gefallen? Wird es sich verkaufen? Sollen wir nicht vielleicht noch diese oder jene Variante bauen, falls jemand die Variante A nicht mag?

So war Apple vor 1997. Haufenweise Produkte, teils nur mit Doktortitel zu konfigurieren, verklebten den klaren Blick auf das Alleinstellungsmerkmal. Everybody’s Darling wird indes schnell zu Everybody’s Depp. Und so stand Apple kurz vor dem Aus. Davon kann heute, mit einem radikal reduzierten, klar fokussierten Portfolio, keine Rede mehr sein.

Vor gut drei Jahren traf man in Kalifornien wieder eine radikale Designentscheidung, nämlich den Verzicht auf die Kopfhörerbuchse beim iPhone. Das macht man nicht, wenn man Angst hat. Und so verkaufte es Phil Schiller auf dem entsprechenden Apple-Kongress in San Francisco denn auch. Die Entscheidung habe Mut gefordert, sagte er, und Apple habe Mut. Natürlich ist nicht jedermann damit einverstanden, aber das war vor zehn Jahren, als Apple das iPhone, ein Mobiltelefon ohne Tastatur (!), vorstellte, schon ganz genauso.

Drei Jahre später sehen wir bei immer mehr Smartphones den Verzicht auf die Kopfhörerbuchse.

UX-Design muss dennoch klare Entscheidungen treffen und diese auch aushalten. Angst ist ein schlechter Berater, dabei aber gleichzeitig eine der Begründungen für viele schlechte Alltagsdesigns.

UX-Design für den schnellen Umsatz

Kurze Zeit nach Einführung des ersten iPhones kam es zu Nachahmern im Billigstsegment. Die Geräte sahen recht ähnlich aus, man könnte also sagen, sie waren gut designt. Sie machten aber aus preislichen Gründen viel zu viele untragbare Kompromisse, so dass sie schlussendlich nur ein Schatten des ursprünglichen Entwurfs waren. Warum wurden sie trotzdem gebaut? Aus Gier, dem Wunsch nach schnellem Umsatz, nach der Ausnutzung von Mitnahmeeffekten.

Eine Variante von Gier, wenn das auch etwas stark klingen mag, ist das Ziel, einen bestimmten Marktpreis zu erreichen oder zu unterbieten. In diesem Fall werden immer Kompromisse gemacht, die zulasten des Designs gehen. Bis zu einem gewissen Grad ist das in Ordnung, weil es eben auch unausweichlich ist. Wir leben schließlich nicht in Utopia. Die Einhaltung vernünftiger Grenzen ist eine bewusst zu treffende Designentscheidung.

Produkte nur aus Gier zu entwickeln, ist eine nur kurzfristig erfolgreiche Strategie, wenn überhaupt. Dennoch wird es unablässig versucht, was wiederum nicht unbemerkt bleibt und ebenfalls eine der Begründungen für schlechte Alltagsdesigns ist.

UX-Design, um zu designen

Wenn sich Designer erst einmal in ihr Design verliebt haben, dann kann alles passieren. Dann fügt man hier noch eine Funktion hinzu und dort. Und alles nur aus dem Grund, dass man es kann. Der UX-Designer hat etwas erschaffen, von dem er sich jetzt nicht lösen will.

UX-Design an sich ist eine weitgehend objektivierbare Angelegenheit. Wenn man den Prozess sauber anlegt und durchführt, ergeben sich die besten Ansätze quasi von selbst.

---

Die Grundlagen guter Informationsarchitektur

Der Zugang zu Informationen will gut organisiert und strukturiert sein, damit der Informationssuchende schnell und umfassend fündig werden kann. Dazu bedarf es umfassender Überlegungen im Vorfeld der Design-Ausführung. Heraus kommt die Informationsarchitektur.

Der Begriff der Informationsarchitektur ist mit einem Alter von einigen Dekaden nicht mehr ganz neu und wurde im Laufe der Zeit schon für verschiedenste Zwecke benutzt. Sogar im Chipdesign oder bei der Netzwerkplanung fand er Verwendung. In den letzten zehn Jahren kommt er indes vorwiegend im Kontext mit Softwareprojekten zum Einsatz.

Informationsarchitektur im Webdesign

Im Zusammenhang mit Webdesign meint „Informationsarchitektur” die sinnvolle Organisation und Strukturierung von Inhalten mit dem Ziel, dass eben diese Inhalte von Nutzern schnell gefunden und erschlossen werden können. Webdesigner sind demnach notwendigerweise stets auch Informationsarchitekten. Jedenfalls sollten sie es sein. Vielfach entsteht dieser Eindruck jedoch nicht.

Informationsarchitektur ist nicht gleichbedeutend mit visueller Gestaltung

Kunden und Dienstleister verwenden erfahrungsgemäß sehr viel Zeit auf visuelle Aspekte, so dass strukturelle Überlegungen nicht selten zu kurz kommen. Dabei ist eine gelungene Informationsarchitektur die beste Grundlage für eine ebenso gelungene Website. Informationsarchitektur lässt sich allerdings nicht als Photoshop-Mockup bauen und mag von daher als verzichtbarer Aufwand betrachtet werden. Das Gegenteil ist der Fall.

Vielfach wird Informationsarchitektur (IA) mit UX-Design gleichgesetzt, was ebenfalls viel zu kurz gesprungen erscheint. Auch hier gilt, dass IA lediglich die Grundlage für das UX-Design bildet. UX-Design ist indes weit weniger strukturell in den Überlegungen, sondern befasst sich deutlich konkreter mit den großen und kleinen Fragen der Benutzererfahrung, etwa welche Interaktion welches Ergebnis zeitigen soll.

Informationsarchitektur ist das Fundament jeder Website

Wenn wir also über IA sprechen, dann befinden wir uns am Ursprung, an der Baugrube eines digitalen Projekts. Hier gibt es noch nichts zu sehen und die künftige Benutzererfahrung ist in weiter Ferne. In der Informationsarchitektur geht es um rein strukturelle Fragen.

Das mag auf den ersten Blick reichlich langweilig vorkommen. Betrachtet man aber mal das Beispiel einer großen Bibliothek, wird schnell klar, dass Informationsbereitstellung ohne durchdachte Architektur keine gute Idee ist.

Eine Kombination aus einem digitalen Katalog und einem physikalischen Wegweisersystem führt dazu, dass jeder Besucher das von ihm gesuchte Buch auch findet. Gäbe es das nicht, bestünde nur eine zufällige Chance, die gesuchten Informationen zu erhalten. Die meisten Besucher dürften wohl ob des erheblichen Frustpotenzials rasch kapitulieren.

Ähnlich ergeht es den Besuchern einer Internetseite, wobei das Problem mit steigender Informationsdichte größer wird. Je mehr Informationen eine Website bietet, desto durchdachter muss ihre Informationsarchitektur sein. Generell bedarf jedoch auch die kleinste Website einer sinnvollen IA. Lediglich der Komplexitätsgrad dieser Architekturen unterscheidet sich in Abhängigkeit von der Größe des Gesamtprojekts.

Verbreiteter Irrtum: Informationsarchitektur ist ein anderes Wort für Navigation

Typische Fragen, die eine gute Informationsarchitektur dem Besucher beantworten können muss, lauten etwa:

• Wo bin ich?
• Worum geht es hier?
• Wohin gelange ich von hier?
• An welcher Stelle im Angebot befinde ich mich?
• Wozu dient diese Website?
• Was habe ich von diesem Angebot?
• Wer steckt dahinter und wie kann ich denjenigen erreichen?

In Anbetracht dieser Fragen könntet man auf die Idee kommen, dass Informationsarchitektur nur ein anderes Wort für Navigation ist. Auch das würde jedoch zu kurz greifen. Richtig ist, dass die Navigation ein Bestandteil der IA ist. Sie lässt sich allerdings erst ableiten, wenn ein paar vorbereitende Arbeiten erledigt sind.

Klassifizierung und Kategorisierung aller Inhalte

Es ist eines der verbreitetsten Probleme in der Kunde-Designer-Beziehung.

„Fangen Sie schon mal an, die Inhalte liefern wir Ihnen nach und nach.”

Ein Lieblingskunde.

Wer kennt das nicht?

Und wer hat sich nicht schon oft, wenn auch intuitiv gefragt, wie das denn funktionieren soll? Die Antwort auf die Frage ist recht einfach: Gar nicht.

Bevor man sinnvoll eine Website erstellen kann, muss man alle Inhalte kennen, sortieren und strukturieren. Schon die Festlegung, welche Inhalte überhaupt in die Website integriert werden sollen, ist ein wichtiger Aspekt der Informationsarchitektur. Wer hat sich nicht bei verschiedenen Websites schon über seltsam „angeflanscht” wirkende Menüpunkte gewundert? Da kam der Kunde kurz vor Projektende noch mit einer neuen Ladung Informationen, die wir dann kurzerhand außerhalb der geplanten Struktur rein nehmen müssen. „Ist ja kein Problem, oder?“

Liegen alle Inhalte vor und sind die zu verwendenden definiert, gilt es, die Inhalte zu klassifizieren und zu benennen. Dabei werden die Inhalte Kategorien zugeordnet, aus denen sich später unsere Navigation entwickeln wird.

Es empfiehlt sich, dabei ganz klassisch mit Taxonomien zu arbeiten. Jede Kategorie erhält stets nur eine Oberkategorie, was zu einem Abhängigkeitsbaum führt, wie er für Organigramme üblich ist. Innerhalb des Baumes bewegt man sich von ganz grob nach ganz fein. Je weiter unten in den Verästelungen man sich befindet, desto spezifischer werden die Informationen.

Flache Informationshierarchien bevorzugt

Dabei sollte man zudem darauf achten, dass eine Informationshierarchie nicht zu tief wird. Zum einen schätzt es kein Besucher, wenn er wahre Klickorgien bewältigen muss, um letztlich zur gewünschten Information zu gelangen. Zum anderen bevorzugt der Google-Bot ebenfalls eindeutig flache Hierarchien.

Die einzelnen Kategorien sollten sich dabei ganz klar thematisch unterscheiden, so dass Besucher und Crawler gleichermaßen in die Lage versetzt werden, Zusammenhänge erkennen und verstehen zu können. Denkbar sind, je nach Sinn und Zweck der Website, natürlich auch andere Unterscheidungen, etwa chronologischer Art oder nach dem Typ des Besuchers (zum Beispiel Kunde, Lieferant, Investor).

Wichtig ist nur, dass man einen einmal eingeschlagenen Weg nicht verlässt, weil es sonst zu einer Vermischung unterschiedlicher Hierarchien kommen kann

Quellen zum Weiterlesen:

• Information Architecture. Basics for Designers. | Alina Arhipova
• The Difference Between Information Architecture and UX Design | Darren Northcott
• Informationsarchitektur | Netzstrategen
• Informationsarchitektur | InfoWissWiki

---

Beachten Sie diese Best Practices der Seitennavigation im Webdesign

Mit dem Design der Seitennavigation wurde schon viel experimentiert. Inzwischen können wir klare Empfehlungen dazu ableiten, wie wir vorgehen sollten. Dennoch kommt es auch hier auf den konkreten Einzelfall an.

Das sogenannte Menü, das wir zur Seitennavigation verwenden, ist an unterschiedlichsten Positionen denkbar und kann die unterschiedlichste Optik annehmen. Es kann viele oder nur ganz wenige Einträge haben. Und je nach Zweck, Größe und Zielsetzung der individuellen Website wird auch das Menü unterschiedlich sein. Das eine, immer richtige Standardmenü gibt es definitiv nicht.

Zudem gehört zur Seitennavigation nicht nur dieses Menü. Auch andere Maßnahmen zur Inhaltsfindung subsumieren wir unter diesem Begriff. Die wichtigste Ergänzung in diesem Zusammenhang ist die Seiten-Suchfunktion. Wenn eure Besucher irgendwo angekommen sind, müssen sie auch strukturiert zurück finden können. Diesen Zweck erfüllt etwa die sogenannte Brotkrumen-Navigation. Und dann gibt es noch die Linksetzungen, die keiner hierarchischen Grundordnung folgen und entweder themenbezogen im Text stattfinden oder ansatzweise strukturiert im Rahmen von Tag-Links, also Stichworten mit Lenkungsfunktion, angelegt sind.

Damit haben wir den Bogen schon mal recht weit gespannt. Lasst uns vom Grundsätzlichen zum Spezielleren gehen und mit den immer gültigen Grundsätzen für jede Form der Navigation beginnen.

Grundsatz #1: Navigation ist konsistent

Ganz unabhängig davon, wie Sie ihre Seitennavigation konzipieren. Eines muss stets gewährleistet sein, nämlich Konsistenz. Das bedeutet, dass einmal gewählten Positionen über die gesamte Website beibehalten werden müssen. Auch wenn vielleicht ein konkreter Inhalt auf einer konkreten Unterseite eventuell mal optisch ansprechender zu vermitteln wäre, wenn wir die Navigation von oben an die Seite nähmen. Tun Sie es nicht.

Wenn Sie eine Software benutzen, wechseln die Navigationselemente auch nicht ständig. Lediglich der Inhalt ändert sich. Der Rahmen, die Grundstruktur ist starr. So entsteht Sicherheit. Sicherheit für die Nutzenden, zu wissen, was sie wie erreichen können. Orientierung und Sicherheit sind grundlegende Bedürfnisse, die nicht aufs Spiel gesetzt werden dürfen. Sonst sucht sich der Benutzer eine Alternative, die ihm eben diese Sicherheit zurück gibt.

Konsistenz bezieht sich nicht nur auf die Position der Elemente. Auch die Inhalte dürfen nicht wechseln und die Gestaltung bleibt ebenfalls gleich.

Grundsatz #2: Navigation ist sichtbar

Versuchen Sie nicht, die Navigation quasi zu verstecken, um den Fokus auf andere Seitenelemente zu lenken. Die Navigation ist von so essenzieller Bedeutung, dass sie keinesfalls in den Hintergrund treten darf. Vielmehr sollte sie zweifelsfrei als solche zu erkennen sein, was Sie am einfachsten über eine entsprechend prominente Platzierung nebst kontrastreicher Gestaltung erreichen.

Als Best Practice hat sich erwiesen, den jeweils gewählten Menüpunkt beim Hovern hervorzuheben und die Hervorhebung beim Klicken beizubehalten, so dass der optische Eindruck einer getätigten Schaltung entsteht. So ganz ohne Skeuomorphismen geht es halt doch nicht. Achten Sie dabei darauf, den Kontrast zwischen „gewählt” und „nicht gewählt” deutlich zu gestalten. Ein Wechsel von Hellgrau auf Dunkelgrau on hover wird dem nicht gerecht.

In den letzten Jahren, vor allem begünstigt durch den Trend zum Long Scrolling, setzen sich sogenannte „Fixed Navigationbars” durch. Dabei handelt es sich um Navigationsleisten, die sich beim Scrollen von ihrer Position lösen und am oberen Rand des Browserfensters stets sichtbar bleiben. So geht die Orientierung selbst dann nicht verloren, wenn sich eure Besucher engagiert durch die Inhalte bewegen.

Das Erfordernis der Sichtbarkeit bedeutet zudem, dass ihr eine Navigation, die allein aus Icons besteht, unbedingt vermeiden sollte. Aus gestalterischen Gründen kann es eine nette Idee sein, Piktogramme zusätzlich zum Texteintrag zu verwenden. Als alleinige Klickhilfe taugen Icons nicht, da sie zu klein und nicht eindeutig genug interpretierbar sind. Haltet es mit Steve Krug.

Wo wir gerade beim Thema Texteintrag sind. Verwendet Texte, die wirklich genaue Rückschlüsse darauf zulassen, was den Nutzer beim Klick darauf erwartet. Anders als früher gerne gepredigt, ist es unter diesem Aspekt durchaus in Ordnung, Menüeinträge zu wählen, die aus mehreren Wörtern bestehen, etwa „Lade dein Bild hoch” statt „Upload”.

Grundsatz #3: Navigation ist flexibel

Jeder Jeck ist anders, sagt der Kölner. Deshalb gilt die Empfehlung, niemals nur eine Menünavigation anzubieten. Mindestens die Suchfunktion muss zusätzlich vorhanden sein. Das ist eine Auswirkung der Generation Google.

Gesucht wird stets per Suchfeld, sobald in einem Navigationsmenü nicht auf den allerersten Blick klar wird, wo die gewünschte Information sich verbirgt. Inzwischen hat sich durchgesetzt, das Menü mit der Suchfunktion gestalterisch zu verbinden, also wie eine Einheit, meist als Navigationsleiste, anzubieten. Wenn diese dann am oberen Seitenrand fixiert wird, habt ihr gleich zwei Findungsmethoden an einem Ort vereint.

Flexibilität bedingt auch, dass eure Besucher von der Stelle, an der sie sich jetzt befinden, wieder zurück können müssen, an jene Stelle, von der sie zur jetzigen Position gelangt sind. Das mag nicht immer wirklich sinnvoll sein, gibt aber das gute Gefühl, Herr der Lage zu sein, jederzeit genau zu wissen, wo und wie tief ich im Seitengefüge stehe. Diese Art der Orientierung lässt sich am besten und sehr simpel über die sogenannte Brotkrumen-Navigation gewährleisten.

Wenn ihr euch an diese drei einfachen Grundsätze haltet, ist grober Unfug im Navigationsdesign kaum noch denkbar. Nun können wir uns mit ein paar Feinheiten befassen, die eure Navigation ganz konkret verbessern werden.

Das Navigationsmenü ist nur so ausführlich wie nötig

Welcher Webdesigner kennt es nicht? Der Kunde will am liebsten seine komplette Website über das Menü zugänglich machen. Ist ja schließlich alles ganz wichtig. Er verwechselt das Navigationsmenü mit einer Sitemap. Unterstützt ihn auf diesem Holzweg nicht auch noch.

Alle, also ausnahmslos alle Inhalte finden zu können, sollte über die Suchfunktion möglich sein. Das Menü ist dazu da, die wichtigsten Bereiche zu benennen und zugänglich zu machen. Deshalb ist das Menü auch eines der ersten Elemente, die ihr entwickeln sollte, wenn es an ein neues Web-Projekt geht. Aus dem Menü entwickelt ihr dann die Sitemap, die letztendlich alle Verästelungen der Seite abbilden soll. Das ist nicht die Aufgabe des Navigations-Menüs.

Je mehr Auswahl ihr dem Besucher über das Menü bietet, desto weniger zielgenau könnt ihr steuern, wohin er sich bewegt. Da jedoch die klassische Website irgendein Konversionsziel haben wird, kann das nicht in eurem Interesse liegen. Je weniger Auswahl besteht, desto sicherer fühlt sich zudem der Besucher. Denn die Inhaltsfülle, die es tatsächlich dennoch geben wird, erschlägt ihn nicht schon bei den ersten Entscheidungen, die zu treffen sind.

Holzweg Mega-Menüs

Vor nicht allzu langer Zeit versuchten wir, einen Kompromiss zu finden. Sogenannte Mega-Menüs fanden ihren Weg auf viel zu viele Websites. Manches Mega-Menüs war schon fast eine eigene kleine Site, die sich über die eigentlichen Inhalte geblendet hat und in der man dann quasi eigenständig surfen konnte. Das mag beeindruckend aussehen, Sinn ergibt es nur für ganz wenige Websites. Solange man aber nicht für Amazon, Otto-Versand oder ein sonstiges großes Handelshaus arbeitet, kann man diese Menü-Form vergessen.

Es wäre übrigens durchaus zu diskutieren, ob nicht auch die großen Handelshäuser besser auf gigantische Menüs verzichten sollten. Zumeist dienen diese ohnehin nur der Demonstration schierer Größe und nicht der Usability der Seite. Produkte werden dann doch über die Suchfunktion oder andere Navigations-Features, etwa Bestseller-Listen gefunden.

Die Reihenfolge der Menüeinträge ist wichtig

Habt ihr schon einmal von dem psychologischen Gedächtnisphänomen namens serieller Positionseffekt gehört? Dieses Phänomen beschreibt den Effekt, dass sich Personen tendenziell die ersten und letzten Punkte einer Liste besonders nachhaltig verinnerlichen.

Daraus leiten wir ab, dass die wichtigsten Menüeinträge stets die ersten und die letzten sind. Diese Einträge werden am meisten gesehen und entsprechend am meisten geklickt. Versteckt also nicht eure konversionsträchtigsten Einträge irgendwo mittig im Menü.

So schlecht funktionieren Hamburger-Menüs und versteckte Navigation

Kleine Displays, wenig Platz – auf Smartphones ist es immer wieder eine Herausforderung, Inhalt und Navigation einer Website unterzubringen. Daher hat es sich mittlerweile etabliert, die Navigation auszublenden und nur ein Hamburger-Icon zu platzieren, welches per Tap die Navigation einblendet.

Schon lange wird darüber diskutiert, ob es sinnvoll ist, etwas derart wichtiges wie die Navigation zu verstecken. Die Nielsen Norman Group, die unter anderem Benutzerverhalten erforscht, hat in einer Studie nun herausgefunden, wie sich das Nutzerverhalten bei sichtbaren und per Hamburger-Menüs erreichbaren Navigationsansätzen unterscheidet.

179 Teilnehmer, sechs Websites

Ziel der Studie war es herauszufinden, wie häufig auf einer Website die Navigation gefunden, beziehungsweise verwendet wurde. Dazu müssen 179 Teilnehmer sechs verschiedene Websites auf unterschiedlichen Geräten aufrufen und nutzen. Dabei hat etwa die Hälfte der Teilnehmer die sechs Websites nur auf einem Desktopgerät aufgerufen, während die andere Hälfte nur auf Smartphones unterwegs war.

Bei den Websites handelt es sich um die von 7digital, BBC, Bloomberg Business, Business Insider UK, Supermarkt HQ und Slate. Jede Website hat eine anders gestaltete Navigation. Unterschieden wurde zwischen sichtbarer Navigation, bei der alle Menüpunkte stets erkennbar im Kopf oder Seitenbereich aufgelistet waren, und versteckter Navigation, bei der die Menüpunkte erst über ein Hamburger-Menü oder einen per „Menu“ beschrifteten Button erreicht werden konnten. Außerdem gab es noch eine Kombination beider Varianten, bei der einige Menüpunkte sichtbar waren, während andere über einen „More“-Button als Dropdown-Menü dargestellt wurden.

So ist die Navigation von 7digital auf Desktopgeräten immer sichtbar, während sie auf Smartphones über ein „Menu“-Icon eingeblendet wird. Die BBC-Website verwendet auf dem Desktop eine kombinierte Navigation. Während dort die wichtigsten Menüpunkte sichtbar sind, werden weitere Auswahlmöglichkeiten über ein Dropdown-Menü dargestellt.

Die Website von Business Insider hingegen setzt sowohl in der Desktop- als auch in der Mobilansicht auf ein Hamburger-Menü, über welches die Navigation erreichbar ist. Im Übrigen gab es keine Website, bei der sowohl in der Desktop- als auch in der Mobilansicht die Navigation immer sichtbar war. Das dürfte vor allem daran liegen, dass es sehr unüblich ist, auf Mobilgeräten die Navigation immer sichtbar darzustellen.

Sichtbare oder teils sichtbare Navigation öfter genutzt

Bei den Teilnehmern, die per Desktopgerät unterwegs waren, wurde die versteckte Navigation nur von 27 Prozent genutzt, während die sichtbare oder kombinierte Navigation von 48 beziehungsweise 50 Prozent genutzt wurde. Auf Mobilgeräten haben nur 57 Prozent die versteckte und 86 Prozent die kombinierte Navigation verwendet.

Auch bezüglich der Zeit, die zum Navigieren gebraucht wurde, liegt die versteckte Navigation hinten. Während die Teilnehmer auf Desktopgeräten mit versteckter Navigation 31 Sekunden mit der Navigation beschäftigt waren, waren es bei Websites mit sichtbarer Navigation nur 26 Sekunden. Interessanterweise hat die kombinierte Navigation mit 23 Sekunden am besten abgeschnitten.

Auf Mobilgeräten ist der Unterschied zwischen versteckter (26 Sekunden) und kombinierter Navigation (24 Sekunden) geringer. Das dürfte daran liegen, dass es Nutzer auf Mobilgeräten eher gewohnt sind, die Navigation über ein Hamburger-Menü zu erreichen, während auf Desktopgeräten die Hamburger-Menüs nicht so verbreitet sind.

Das Ergebnis

Im Ergebnis lässt sich feststellen, dass die versteckte Navigation weniger genutzt wurde, mehr Zeit in Anspruch nahm und auch deutlich weniger Inhalt gefunden wurde. So wurden auf Desktopgeräten nur 54 Prozent und auf Mobilgeräten nur 64 Prozent des Inhalts, der von den Teilnehmern aufgerufen werden sollte, auch tatsächlich gefunden.

Am besten schnitt die kombinierte Navigation ab, die auf 80 Prozent bei Desktop- und 85 Prozent bei Mobilgeräten kommt. Selbst die komplett sichtbare Navigation liegt auf Desktopgeräten mit 77 Prozent noch drei Prozentpunkte hinter der Kombi-Navigation.

Wenn immer möglich, sollte man also auf eine versteckte Navigation verzichten. Idealerweise zeigt man einige wenige wichtige Menüpunkte immer an und versteckst weniger wichtige Punkte über ein „Mehr“-Icon, welches alle weiteren Punkte zum Beispiel als Dropdown-Liste darstellt.

Die kompletten Ergebnisse der Studie mit zahlreichen Diagrammen und tiefer gehenden Erklärungen findet man auf der Website der Nielsen Norman Group.

Fazit: Navigation ist eine Grundfunktion

Wenn ihr bis hierhin gelesen habt, seid ihr über eine ganze Menge unterschiedlicher Tipps gestolpert, denen aber allen eines gemeinsam ist. Sie limitieren eure gestalterischen Möglichkeiten nicht. Und das ist auch wichtig. Denn gleichförmige Designs sehen wir doch jeden Tag.

---

Infinite Scrolling: So geht Seiten-Design heute

Der Vorspann eines jeder Star-Wars-Movies macht vor, wie es geht. Die Geschichte scrollt in die Unendlichkeit. Die Timelines sozialer Medien funktionieren ähnlich. Wieso sollte es eine Website nicht ebenso tun? Was es beim Einsatz von Long Scrolling zu beachten gibt, erfahren Sie im folgenden Beitrag.

Scrolling früher und heute

Früher war alles einfacher. Scrolling gab es da auch schon, wir bewegten uns mit der Maus eine Seite hinunter und meistens auch wieder hinauf, klickten im Menü oder über einen Contentlink die nächste Seite an und wiederholten das Spiel. Wobei im damaligen Webdesign noch versucht wurde, das Scrolling insgesamt zu vermeiden.

Heutzutage ist alles komplizierter. Speziell die sozialen Netzwerke haben dazu beigetragen, dass mehr Content auf weniger Seiten untergebracht und dadurch naturgemäß mehr Inhalt pro Seite angezeigt wird.

Das Konzept des „Above the Fold”, für das ich Ende der Neunziger teils tagelang an einzelnen Seiten geschliffen habe, damit auf jeden Fall alle wichtigen Informationen beim initialen Aufruf einer Seite vollständig und ohne Scrollbars rechts und unten sichtbar waren, hat an Bedeutung verloren. Heute ist der Fold, also die untere sichtbare Kante einer Seite nach deren erstem Aufruf, hauptsächlich der Indikator dafür, dass danach noch etwas kommt.

Neben den sozialen Medien begünstigen mobile Endgeräte den Trend hin zum Long Scrolling, denn es ist nahezu unmöglich, das frühere Konzept des „Above the Fold” für mobile Geräte zu realisieren. Viel zu klein sind die Screens. Die erforderlichen Kompromisse wären schlicht nicht zu machen.

Smartphones haben Scrolling sozusagen wieder salonfähig gemacht. Auf kleinen Screens ist es weitaus angenehmer, mit dem Finger eine lange Seite zu durchscrollen, als mit spitzen Fingern die Navigation zu bemühen, um von Seite zu Seite zu springen. Die Natürlichkeit der Scroll-Geste erlaubt zudem unterschiedliche Scroll-Geschwindigkeiten. So kennt man es vom gezielten Durchblättern eines Buches. Vorausgesetzt, der Autor hat optische Anker zur Orientierung gesetzt, lässt sich ein Buch sehr schnell nach relevanten Informationen durchscannen.

Der Trend hin zum Scrolling hat in den vergangenen Jahren die so genannten OnePager hervorgebracht. Dabei handelt es sich um Websites, die nur aus einer einzelnen Seite bestehen und alle relevanten Informationen strukturiert über diese Seite verteilen. Dabei können OnePager optisch durchaus den Eindruck erwecken, sie würden aus mehreren Seiten bestehen.

Die verschiedenen Arten des Scrolling

Scrolling ist mittlerweile keine triviale, aus der normativen Kraft des Faktischen entstehende Tätigkeit mehr. Vielmehr können wir uns als Designer bewusst entscheiden, welche Art von Scrolling wir zum Einsatz bringen.

Long Scrolling wird unterschiedlich interpretiert. Deshalb will ich erstmal den Begriff in Abgrenzung zu anderen Termini definieren.

Long Scrolling in seiner Urform bezeichnet schlicht eine lange Seite mit Content, die homogen aufgebaut ist und von oben nach unten durchscrollt wird. So betrachtet können wir Long Scrolling durchaus als Oberbegriff verstehen.

Das Fixed Long Scrolling ist eine Variante des Long Scrolling, bei der einzelne statische Elemente nicht mitscrollen. Es verbindet den Vorteil der früheren seitenorientierten Gestaltung mit dem des seitenlosen Scrolling.

Infinite Scrolling wiederum bezeichnet eine Form des Long Scrolling, bei der am Ende des Viewport, also des sichtbaren Browserfensters, immer wieder neuer Content nachgeladen wird, so dass die Seite quasi unendlich, infinit erscheint. So funktionieren alle sozialen Netzwerke. Inwieweit das die richtige Wahl für normale Websites ist, bedarf gründlicher Abwägung.

Zu guter Letzt will ich noch das Parallax Scrolling erwähnen, das allerdings keine Unterform des Long Scrolling darstellt. Beim Parallax Scrolling geht es vielmehr um den Aspekt des Storytelling durch natürlich wirkende Animation. Durch unterschiedlich schnell scrollende Teilbereiche der gleichen Seite wird die Illusion von Bewegung erzeugt. Hierdurch werden sehr lebendige Gestaltungen möglich. Das Scrolling muss hier auch nicht vertikal sein, sondern funktioniert meist sogar besser als horizontale Variante. Um das Parallax Scrolling wird es in diesem Beitrag nicht im Einzelnen gehen.

Vorteile des Long Scrolling

Einen der wesentlichen Vorteile des Long Scrolling habe ich weiter oben schon beschrieben. Long Scrolling ist die natürliche Form des Scrollens auf mobilen Geräten. Die etablierten Gesten, die keiner speziellen Schulung bedürfen, erlauben eine intuitive und selbstverständliche Nutzung dieser Funktion. Zudem besteht quasi ein Automatismus im responsiven Webdesign, der sich mit „je kleiner der Bildschirm, desto länger muss gescrollt werden” zusammenfassen lässt.

Ein weiterer Vorteil ergibt sich direkt aus der Tatsache, dass soziale Netzwerke ebenfalls mit Long Scrolling arbeiten. Wir alle sind es inzwischen einfach gewohnt und erwarten im Grunde nichts anderes mehr. Das war vor zehn bis fünfzehn Jahren noch völlig anders. Aus dieser Zeit stammen die alten Erkenntnisse zum „Above the Fold”.

Der aus Designersicht größte Vorteil des Long Scrolling besteht indes darin, dass sich dadurch das Potenzial für Visual Storytelling deutlich erhöht. Es ist ja klar, dass ein längerer Erzählstrang, der noch dazu homogen durchlaufen werden kann, auch längere Geschichten erlaubt.

Nachteile des Long Scrolling

Wo es Vorteile gibt, gibt es auch Nachteile. Viele lassen sich beseitigen.

Die Suchmaschinenoptimierung wird schwieriger

Wenn man schon länger als Kreativschaffende(r) in den Weiten des Netzes unterwegs ist, wird man womöglich direkt an das Thema SEO denken. Und in der Tat gibt es typische Probleme, die ein OnePager mit seinem Long Scrolling und seinem Ansatz, alles auf einer Seite zu zeigen, unweigerlich mit sich bringt.

OnePager erschweren klar die Onpage-SEO. Wir haben ja nun alle inzwischen gelernt, dass wir unsere Seiten für ein optimales Ranking gut auf vorher zu definierende Keywords optimieren müssen. Und nun hat man auf einem OnePager plötzlich nur eines, wo man auf einer Seitenstruktur mit mehreren Unterseiten noch mehrere gehabt hätte. Sie haben nur noch einen Title, eine Description und eigentlich auch nur eine Überschrift erster Ordnung. Da man aber typischerweise auch auf einem OnePager mehrere Themen behandelt, wird die Optimierung schwer.

Relevanz soll eigentlich der Schwerpunkt sein, nach dem Google eine Seite bewertet und rankt. Wie relevant kann eine Seite für ein bestimmtes Thema sein, wenn sie viele unterschiedliche Themen innerhalb der gleichen Seite abdeckt?

Eine komplexere interne Linkstruktur, ebenfalls gern gesehen von Google und Co., kann man mit einem OnePager typischerweise nicht bieten. Das macht es zusätzlich schwer, kontinuierlich externe Links zu akquirieren, also das klassische Linkbuilding zu betreiben.

Eingesetztes JavaScript kann den Crawler blockieren, sodass er ihren OnePager gar nicht vollständig indexiert. Ohne Indexierung indes kann ihr Inhalt auch nicht gefunden werden.

Ein weiterer SEO-Nachteil kann dadurch entstehen, dass eine Seite tendenziell länger benötigt, um zu laden. Performance ist immerhin seit geraumer Zeit ein Rankingfaktor.

Die Benutzerführung wird schwieriger
Typischerweise finden wir heutzutage Navigationselemente entweder im Header oder im Footer oder auch in beiden Elementen. Ein Design, das sich am Konzept des „Above the Fold” orientiert, belässt sowohl den Header als auch den Footer stets sichtbar oder beeinträchtigt deren Visibilität jedenfalls nur marginal.

Wenn wir auf Long Scrolling setzen, verschwindet der Header zwangsläufig sehr schnell aus dem Blickfeld, während der Footer erst ganz am Ende der Seite erscheint. Zwischendrin ist der Leser in Gottes Hand – er hat keine Möglichkeit der Navigation, abgesehen von der Option, nach unten oder oben zu scrollen. Beim Infinite Scrolling sehen wir den Footer sogar nie.

Wenn tatsächlich mehrere Themen innerhalb einer einzelnen Seite abgearbeitet werden und nur durch Scrolling erfahrbar sind, wird es ihren Lesern schnell schwer fallen, zu erkennen, wo sie sich gerade befinden und wo ein Thema endet und ein neues beginnt. Das Problem verschärft sich noch, wenn wir bedenken, dass der heutige Leser eher absatzweise scannt als wortweise liest.

Nicht zu unterschätzen ist auch die Langeweile, die durch langes Scrollen entsteht. Weite Wege mag halt tendenziell keiner zurücklegen. Ich wette, auch ihr habt früher eure Eltern auf der Fahrt in den Urlaub nach den ersten fünf Kilometern gefragt „Mama, sind wir bald da?”.

So setzt man Long Scrolling richtig ein

Nachdem die Nachteile klar auf der Hand liegen, schauen wir genauer hin und entwickeln Strategien, damit umzugehen. Denn die gute Nachricht ist, dass man nahezu jeden Nachteil mit etwas zusätzlicher Arbeit beseitigen kann.

SEO im Long Scrolling

Hinsichtlich des SEO-Themas gilt es, noch weiter zu differenzieren. Nicht immer wird Long Scrolling auch mit einem OnePager zu übersetzen sein. Verwendet man Long Scrolling hauptsächlich für Visual Storytelling, dann entstehen die weiter oben genannten Nachteile mit großer Wahrscheinlichkeit gar nicht erst. Immerhin erzählt man hier eine homogene Geschichte auf einem Canvas, der genauso lang ist, wie er zu diesem Zweck sein muss. Das ist eigentlich ideal unter SEO-Gesichtspunkten.

Finden sich auf ihrer Long-Scrolling-Strecke hingegen tatsächlich verschiedene Themen oder handelt es sich doch um einen OnePager, wird es interessant. Das Stichwort heißt Segmentierung.

Wir unterteilen unseren Inhalt in Segmente. Das kann über DIV-IDs geschehen, deren Bezeichnung man am besten deckungsgleich zum Ankerlink wählt. Jedes Segment kann vom Seitenanfang aus angesprungen werden. Dafür verwendet man Ankerlinks, denn Ankerlinks sind SEO-Signale und werden von den Suchmaschinen ausgewertet. Ein weiterer Vorteil der Anker-Links besteht darin, dass sie auch von extern direkt erreichbar sind, was das Linkbuilding unterstützt.

Jedes Segment statten wir mit einer Überschrift erster Ordnung, also einem H1 aus – das widerstrebt ihnen möglicherweise, weil eigentlich die Regel gilt, so wenige H1 wie möglich, am besten nur eine pro Seite, zu setzen. Lass sich vom ehemaligen Google-Verantwortlichen für dieses Thema, Matt Cutts, beruhigen:

Was nun die Relevanz betrifft, ist es tatsächlich schwer, ein vernünftiges Ranking zu erreichen, wenn man zu viele unterschiedliche Themen auf einer Seite unterbringt.

Handelt es sich aber um eine Seite mit einem Oberbegriff, der im weiteren Seitenverlauf dann in kleinere, verdaulichere Häppchen unterteilt wird, um ihn erschöpfend zu behandeln, ist ein gutes Ranking wenigstens möglich.

In diesem Falle kommt es darauf an, den Inhalt so lesefreundlich wie möglich aufzubereiten und zu versuchen, sich bestmöglich in die Zielgruppe hineinzuversetzen. Wie wird der durchschnittliche Leser voraussichtlich an das Thema herangehen? Wenn es gelingt, ein Thema bestmöglich zu bearbeiten, ist die Wahrscheinlichkeit groß, dass dies seitens der Suchmaschinen honoriert wird.

Benutzerführung im Long Scrolling

In der Benutzerführung entstehen etliche Nachteile, die weiter oben bereits identifiziert wurden.

Das Verschwinden von Header und Footer ist kein unvermeidbarer Fakt. Es ist relativ unkompliziert technisch möglich, den Header sticky, also beim Scrollen mitwandernd, zu gestalten. So bliebe der Header ständig sichtbar, eure Nutzer müssten nicht erst ganz nach oben scrollen, um wieder Navigationsmöglichkeiten zu erhalten.

In jüngerer Zeit setzt sich der Sticky-Header eher in einer Mischform durch. Der Header bleibt zunächst sichtbar sticky, verschwindet dann aber beim weiteren Scrollen vollständig, so dass besonders auf mobilen Geräten mehr Platz für den Konsum des eigentlichen Inhalts bleibt. Versucht der Nutzer dann, wieder nach oben zu scrollen, erscheint der Header sofort am oberen Screen-Rand, als wäre er nie weg gewesen.

Das CSS für solch einen Effekt sieht dann bspw. so aus:

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

Auch der Footer lässt sich sticky anlegen. In den meisten Fällen dürfte das aber eher unerwünscht sein. In gleicher Weise wie beim Header lässt sich natürlich auch der Footer zum Verschwinden und automatischen Auftauchen bringen. Die Frage ist, ob das erforderlich ist. Bei entsprechender Konzeption der Informationsarchitektur dürfte es relativ unproblematisch sein, auf einen Footer, der sich vor dem Seitenende zeigt, komplett zu verzichten.

Generell ist auch die Visualisierung der Möglichkeit, nach oben zu scrollen, eine gute Idee. Ein unmissverständliches Piktogramm für ein „Back to Top”, also zurück zum Seitenbeginn, sollte auf jeder Long-Scrolling-Seite vorhanden sein. WordPress-Seitenbetreiber sollten sich diesbezüglich einmal das beliebte Plugin WPFront Scroll Top ansehen, das hier bei Dr. Web ebenfalls im Einsatz ist.

Ich möchte an dieser Stelle das Thema Segmentierung nochmal aufgreifen. Diese Segmentierung können wir nämlich im Design entsprechend reflektieren. Es wäre möglich, neben der Hauptnavigation etwa eine seitlich angebrachte Nebennavigation anzubinden, die direkt zu den einzelnen Segmenten verlinkt und dabei sticky bleibt, ohne den knappen Screen-Platz nennenswert zu beeinträchtigen. Apple hat das vor Jahren mal vorgeführt.

Dabei ist es günstig, wenn die Zahl der Navigationspunkte zum einen die Zahl der Segmente widerspiegelt und zum anderen nicht zu viele Segmente auf diese Weise visualisiert werden müssen. Das Ziel ist schließlich Übersichtlichkeit. So kommen wir zu einer geradezu natürlichen Begrenzung unserer Seitenlänge.

Ebenfalls empfehlenswert ist es, wenn die Piktogramme dem Leser anzeigen, in welchem Segment er/sie sich gerade befindet. Das sorgt für die Möglichkeit der Standortbestimmung und vermittelt eine Ahnung vom Gesamtumfang der besuchten Seite.

Noch einfacher wird es für Leser, wenn man die einzelnen Segmente grafisch voneinander abgrenzt. Schön ist es, wenn ein Segment stets so lang wie der sichtbare Bereich des Browsers ist. So entsteht der Eindruck einer seitenorientierten Darstellung, was wiederum der Übersicht dient.

Gleichzeitig sorgt gestalterische Variation für das Vermeiden von Langeweile. Neben der variantenreichen Gestaltung lässt sich Langeweile durch parallaxe Elemente oder funktionale Animationen vermeiden. Funktionale Animationen unterstützen die UX einer Seite, typische funktionale Animationen geben Feedback. So könnte Content sich beim Scrollen etwa sichtbar entfalten oder auf sonstige Weise in den Viewport bewegen, Bilder sich zu einer Galerie arrangieren und vieles mehr.

Setzen wir Lazy Loading ein, ist es wichtig, den Ladevorgang zu visualisieren, denn nicht immer wird die Netzverbindung schnell genug sein, um eine spürbare Verzögerung zu vermeiden. Meine ganz persönliche Empfehlung allerdings lautet, auf Lazy Load ganz zu verzichten. Selbst bei medienintensiven Seiten, bei denen das Nachladen noch am ehesten Sinn ergeben könnte, erfolgt meiner Erfahrung nach das Nachladen immer einen Ticken zu spät. So entsteht das Gefühl einer langsam ladenden Seite, was zum Eindruck einer nicht professionellen Gestaltung beiträgt.

Fazit: Long Scrolling ist praxistauglich, aber verursacht Mehrarbeit

Eines ist im Verlauf dieses Beitrags sicherlich deutlich geworden: Seiten mit einem Long-Scrolling-Ansatz bedeuten tendenziell mehr Arbeit als klassische Designkonzepte. Das gilt zumindest dann, wenn mit dem Long Scrolling auch der Verzicht auf mehrseitige Designs einhergeht.

Falls aber der Long Scroller bloß eine Seite unter mehreren ist, überwiegen die Vorteile, vor allem mit Blick auf Visual Storytelling. Lange Geschichten lassen sich nun mal besser auf langen Seiten und nicht gestückelt erzählen. Hier können dann parallaxe Effekte und andere Animationen das Storytelling weiter perfektionieren.

Weitere Quellen zum Thema

• Demo: Animated Map Path for Interactive Storytelling
• The Pros and Cons of Long-Scrolling in Web Design | Speckyboy Design Magazine
• Everything you need to know about the long-scrolling trend | Webdesigner Depot
• Infinite Scrolling Best Practices | UX Planet
• 10 Great Single Long-Page Website Designs | Aptdesign
• Scrolling in Web Design: How Much Is Too Much? | Speckyboy Design Magazine
• Best Practices for Long Scrolling | UX Planet
• Functional Animation In UX Design: What Makes a Good Transition? | Babich.biz
• SEO Tricks for One Page Websites | Awwwards
• Single Page Websites & SEO | Search Engine Land

---

Mikrointeraktionen machen den Unterschied

Sie glauben, es kommt auf das große Ganze an? Ja, aber nur solange es sich insgesamt ausreichend differenziert. Heutzutage sind die kleinen UI-Elemente und Features weitaus wichtiger. Deshalb sollte man beim Design ihrer Projekte besonders auf die Mikrointeraktionen achten.

Was sind Mikrointeraktionen?

Mikrointeraktionen definieren die eigentliche Mensch-Maschine-Schnittstelle. Wenn man ihren Wecker ausschaltest oder ihr Auto per Funkfernbedienung auf- oder abschließt, die Klospülung drückst oder das Licht ein- oder ausschaltest – all das sind Mikrointeraktionen.

Anhand der Beispiele kann man schon erkennen, dass es sich um zwar nur kurze Aktionen, die schnell erledigt sind, handelt, diese aber ganz wesentlich für die jeweilige Nutzererfahrung sind (in einem Falle sogar für die Nutzererfahrung nachkommender Nutzer). Es ist also nicht übertrieben, Mikrointeraktionen als wichtigste Elemente im Design von Produkten zu bezeichnen.

Dabei liegen die wesentlichen Vorteile gelungener Mikrointeraktionen geradezu auf der Hand. Denn Mikrointeraktionen, speziell wenn sie mit kleinen Animationen kombiniert werden, können dem Benutzer den Eindruck vermitteln, dass sich sein digitales ganz ähnlich wie ein analoges Produkt verhält. Das erzielt man durch unmittelbares Feedback, wie etwa den Eindruck eines gedrückten Buttons, eines gezogenen Sliders oder indem man unmittelbares Feedback gibst, wie etwa einen sich drehenden Spinner bei einem Download oder einen sich beim Klick auf Kaufen füllenden Einkaufswagen in einem Online-Shop.

Durch den gezielten Einsatz unmittelbaren Feedbacks kann man Benutzerfehler vermeiden, weil man eine deutlich bessere Steuerung der Klickpfade durch visuelle Unterstützung ermöglicht. Psychologisch wirkt sich positiv aus, dass das Produkt auf den Nutzer gleichsam reagiert. Wer möchte nicht gern Beachtung finden, bei dem was er/sie tut?

Skeuomorphismus als Designprinzip

In der Vergangenheit verließen sich Designer gerne auf Skeuomorphismen, also möglichst detailgetreue Nachbildungen aus dem realen Leben, wenn sie Interaktionen gestalteten. Mancher Designer ging so weit, das gesamte Produkt einem realen Beispiel nachzuempfinden, um sicherzustellen, dass der Nutzer in der Bedienung desselben keine Schwierigkeiten haben würde.

Das Problem mit den Skeuomorphismen ist ihre hohe Geschmacks-, aber auch Kulturabhängigkeit. Zudem werden zu detailgetreue Darstellungen schnell langweilig.

Seit einigen Jahren setzen sich daher Oberflächenelemente durch, die durch minimalistische Gestaltung und integrierte Interaktion überzeugen. Logischerweise sind Skeuomorphismen durch die Limitierungen ihrer realen Vorbilder beschränkt, wenn man nicht aus dem Bild fallen will.

Modernere Ansätze unterliegen nicht solchen Konventionen. Besonders Googles Material Design weist hier den Weg. Gern wird dann auch von Microexperiences, also Mikroerfahrungen, als Synonym für Mikrointeraktionen gesprochen.

Nutzen Sie die modernen Möglichkeiten

Heutzutage, nach zehn+ Smartphone-Jahren, ist es weniger wichtig, Elemente so zu gestalten, dass der Nutzer einen Bezug zur analogen Welt herstellen kann. Das Digitale an sich hat sich im Alltag weitgehend durchgesetzt und benötigt keine Erklärung per Holzhammer-Methode mehr. Dennoch steigt die Bedeutung von Mikrointeraktionen stetig. Die Begründung ist einfach.

Durch eine einheitliche Designsprache werden sich digitale Produkte immer ähnlicher. Manches Produkt lässt sich vom anderen nur noch dadurch unterscheiden, dass man gezielt nach dem Namen schaut. Hier sieht man einen Auszug aus dem Suchergebnis, wenn man im Google-Play-Store nach Apps der Kategorie “Todo” suchst:

Innovation geht sicherlich anders. Oberflächlich betrachtet wird man natürlich jetzt versucht sein, zu fragen, wie denn die diversen Anbieter ihre Todo-App sonst als solche hätten kenntlich machen sollen. Klar, die Antwort ist nicht einfach. Aber, das ist keine Begründung, sie sich einfach zu machen.

Differenzierung kann offenbar nicht mehr auf der Ebene des grundlegenden Designs erfolgen. Es sind die Mikrointeraktionen, mit denen man als Designer ihr Produkt von anderen absetzen muss. Denn im Grunde interagiert der Nutzer mit ihrem Produkt immer nur über Mikrointeraktionen.

Je überzeugender man diese also gestaltet, desto flüssiger fühlt sich die Nutzung an und desto lieber wird der Nutzer ihr Produkt verwenden. Eine einzige gut gemachte Interaktion kann schon den Kampf um die Nutzer zwischen Produkt A und Produkt B entscheiden, was bei Millionen konkurrierender Apps und viel mehr Millionen konkurrierender Websites überlebenswichtig ist.

Die Aufgabe alter Designmuster befreit sich und lässt sich die Möglichkeiten moderner Technologien nutzen. Bei Mikrointeraktionen kommt es stets darauf an, dem Nutzer nicht nur einen klaren Trigger, also einen etwa als solchen erkennbaren Button, Schieberegler oder ähnliches, zu bieten.

Vielmehr must man sicherstellen, dass der Nutzer ein klares Feedback erhält. Dieses muss zuverlässig über Erfolg, Misserfolg oder die Dauer der Aktion informieren.

Bewährt hat sich hier die Verwendung von Bewegung im Element, also der Einbau kleiner Animationen. In den Richtlinien zu Material Design findet man detaillierte Tipps zum Thema. Aber gerade beim Einsatz von Animation ist Vorsicht geboten. Denn was bei der ersten Benutzung noch wie eine gern genommene Überraschung wirken kann, wird spätestens bei der zehnten Verwendung langweilig oder gar störend.

Bei der Verwendung von Animationen kommt es darauf an, dass diese so kurz wie möglich sind. Google empfiehlt nichts länger als 400 Millisekunden. Die Animation darf nicht zu einer Verzögerung in der Verwendung ihrer Oberfläche führen. Verzögerungen im Sekundenbereich wären schon zu lang und würden das Produkt behäbig wirken lassen.

Hat man sichergestellt, dass der Nutzer nach der Verwendung ihrer Mikrointeraktion ein klares Feedback bekommen hat, dann ist es Zeit für den nächsten Schritt. Sie müssen sich darüber klar werden, ob es sich bei der Mikrointeraktion um eine handelt, die der Nutzer wiederholt verwenden wird.

Wenn ja, gilt es darüber nachzudenken, inwieweit die erstmalige Benutzung Veränderungen für die wiederholte Nutzung erforderlich machen. So könntet man etwa aus dem Button mit der Aufschrift “Kaufen” bei dem eben gekauften Produkt nach dem Kauf den Button mit der Aufschrift “Nochmal kaufen” machen und hättest ihrem Nutzer damit eine wichtige Information quasi im Vorbeigehen gegeben.

Bei der Entwicklung der Mikrointeraktion kommt es zudem darauf an, ausschließlich das abzubilden, was unbedingt erforderlich ist, um die bevorstehende Aufgabe erfolgreich bearbeiten zu können. Sicherlich kann man Animationen mit einer Prise Humor würzen, wenn man sie ganz dosiert einsetzt. Das rate ich aber nur für diejenigen Animationen, die der Nutzer nicht ständig zu sehen bekommt.

Denn jeder Witz ist, selbst wenn er gut ist, nur einmal lustig. Bei Mikrointeraktionen setzt man seine Nutzer jedoch hundert- oder gar tausendfach demselben Element aus. Es ist besser, die Nutzer nicht zu nerven. Die beste Mikorinteraktion ist sogar jene, die so subtil ist, dass sie gar nicht als solche auffällt, sondern einfach wie selbstverständlich da ist.

Natürlich darft man auch bei der Gestaltung von Mikrointeraktionen allgemeingültige Prinzipien nicht vergessen. Welcher Designer hätte noch nie von Don’t Make Me Think gehört? Alle UI-Elemente müssen natürlich im Kontext zueinander existieren und zumindest in diesem Kontext selbsterklärend sein.

Die Farbsprache muss homogen sein, ebenso die Typografie. Texte müssen in verständlicher, einfacher Sprache formuliert sein. Aber das weißt man ja alles.

---

Verzeih mir! So geht ihr UX-Design richtig mit Fehlern um…

Menschen machen Fehler, sogar viele. UX-Designer jeder Couleur muss daher mit Fehlern rechnen. Ziel ist es, diese soweit möglich zu vermeiden oder, mindestens, hilfreich darauf zu reagieren.

Man kann sich noch so sehr bemühen. Es wird ihnen nicht immer gelingen, Fehler bei der Benutzung ihrer Designs zu vermeiden.

Gegen Dummheit ist kein Kraut gewachsen?

Hier im Örtchen schmiss vor einiger Zeit eine ältere Dame einen, nach ihren Angaben, fünfstelligen Geldbetrag in einen Altkleidercontainer. Der Betrag stammte angeblich aus einer Erbschaft und war in einem Stiefel versteckt. Um dem Vorgang noch die Krone aufzusetzen, fiel ihr der Fehler erst eine gute Woche, nachdem sie den Stiefel in den Container geschmissen hatte, auf.

Ist das ist ein Beispiel für einen Fehler, der nur durch die Betroffene selbst zu vermeiden gewesen wäre? Klar ist, mit dem üblichen Designansatz kann man Dummheiten nicht beikommen. Hätte am Container ein Warnschild geholfen? „Bitte achten Sie darauf, kein Geld in den Kleidercontainer zu werfen?“

Oder sollten derartige Container quasi per Double-Opt-In funktionieren? „Sie wollen etwas in den Container schmeißen? Sind Sie sicher?“ Beim ersten Versuch kommen die Brocken dann wieder raus aus dem Behälter. Erst beim zweiten Mal werden sie einbehalten. Schlecht machbar und sicherlich auch unter Akzeptanz-Aspekten schwierig.

Verzeihendes UX-Design geht sogar bei absurden Fehlern

Dennoch kann auch hier Vorsorge vor menschlichen Fehlern getroffen werden. Ein verzeihendes Design, um das es in diesem Beitrag gehen soll, hätte mit dem folgenden Hinweisschild erreicht werden können: „Haben Sie etwas versehentlich in den Container geworfen, so melden Sie sich bitte innerhalb von zwei Werktagen unter der Telefonnummer 123456.“

Der Dame aus unserem Beispiel hätte das womöglich auch nicht geholfen. Immerhin hat sie den Fehler erst viele Tage später bemerkt, aber generell kann ein solcher Hinweis durchaus erfolgreich sein.

Es ist selbstverständlich, dass die Prozesse hinter dem Hinweis dann tatsächlich installiert sein müssen. Wenig hilfreich wäre es, wenn unsere vom Pech verfolgte Dame dort anriefe, um dann von einer verblüfften Telefonstimme lediglich gesagt zu bekommen, dass man da aber nun rein gar nichts für sie tun könne. Und, wo habe sie überhaupt diese Telefonnummer her?

Verzeihendes Design ist eine Mischung aus Führung und Sicherheitsnetz

Man sieht also: Verzeihendes Design ist eine Mischung aus guter Führung im Vorfeld und sinnvollen Sicherheitsnetzen im Bedarfsfall.

Stellen Sie sich vor, man fährt mit dem Auto auf eine scharfe Kurve zu. Wie könnten wir sie da vor Fehlern schützen? Hier wäre es designtechnisch (und auch unter allen anderen denkbaren Aspekten) sinnvoll, im Vorfeld der Kurve die erlaubte Geschwindigkeit zu senken und früh genug und gegebenenfalls mehrfach auf die bevorstehende Kurve hinzuweisen. In der Kurve sollte es dann stabile Leitplanken als Sicherheitsnetz geben, falls die vorher versuchte Steuerung fehl geschlagen ist.

Manche Fehler sind so schwer und folgenschwer, dass danach gar von „menschlichem Versagen“ die Rede ist. Erinnern wir uns an den Zusammenstoß zweier Züge vor zwei Jahren im bayrischen Bad Aibling.

Der zugrundeliegende Prozess litt ganz offensichtlich unter schweren Designfehlern. Weder gab es eine hinreichende inhärente Steuerungsfunktion zur Vermeidung von Fehlern, noch gab es sinnvolle Sicherheitsnetze für den Fehlerfall.

Dieses Beispiel soll lediglich verdeutlichen, welche enorme Bedeutung sorgfältiges Design hat und wieso es zwingend verzeihend angelegt sein sollte. Für das verzeihende Design gibt es einige Tipps, die bisweilen etwas retro anmuten, dabei aber konsequent den Menschen im Auge behalten.

Affordance: Gestalte mit Aufforderungscharakter

Als Best Practice für das verzeihende Design gilt es, mit deutlichem Aufforderungscharakter (sog. Affordance) zu gestalten. Das meist verwendete Beispiel ist dabei das einer Tür, die auf der Seite einen Griff und auf der anderen Seite lediglich eine Metallplatte hat. Die Tür fordert so auf der einen Seite zum Ziehen und auf der anderen Seite zum Drücken auf.

Das Design selbst besitzt Aufforderungscharakter. Zusätzliche Interpretationen oder Instruktionen sind in diesem Falle, der sich jedoch nicht immer so eindeutig herstellen lässt, entbehrlich.

Die Zeiten, in denen Design mit Affordance im Digitalen verhältnismäßig leicht war, sind indes vorbei. Es waren die Zeiten des Skeuomorphismus, in denen es App-Designern daran gelegen war, digitale Produkte möglichst wie ihre Pendants aus der realen Welt aussehen zu lassen. So hatten wir Terminkalender-Apps mit Lederoptik und Ringbindung oder Schalter, die tatsächlich wie Schalter aussahen und natürlich auch funktionierten. Unter dem Gesichtspunkt der Affordance waren das goldene Zeiten.

Um die Dinge nicht unnötig zu erschweren, sollte man als Designer auf etablierte UI-Pattern setzen. Das könnten etwa die Material-Design-Guidelines aus dem Hause Google sein, oder etwa Patterns der üblichen Verdächtigen wie Zurb oder Bootstrap. Es gilt weiterhin, dass auch moderne UI-Elemente umso eher erkannt werden, je mehr sie Alltagsobjekten mit der gleichen Funktion ähneln. Hier helfen Schattenwürfe, Farbverläufe, Texturen – eben alles, was einen Bezug herstellen kann.

Um den Aufforderungscharakter zu verstärken, sollte man Aktionen klar benennen und nicht dem Erraten durch den User überlassen. Dabei ist es überdies wichtig, darauf zu achten, dass seine Aktionen nicht mit dem Standardverhalten des Betriebssystems kollidieren. Besonders die Swipe-Gesten des iPhones bieten sich da als Fettnäpfchen an.

Erlaube das Rückgängigmachen versehentlicher Aktionen

Man kennt es aus den Office-Anwendungen, aber insbesondere auch aus Photoshop. Wie oft hat man schon versehentliche Photoshop-Bedienschritte rückgängig gemacht? Diese besondere Form des verzeihenden Designs ist das beste Sicherheitsnetz, das man bauen kann. Wenn nichts endgültig ist, fällt es dem User leicht, schnell in ihr Bedienkonzept zu finden.

Natürlich kann man nicht absolut jede Aktion reversibel gestalten. Da, wo das nicht möglich ist, sollte verzeihendes Design unter Steuerungsgesichtspunkten betrachtet werden. Muss der Nutzer eine irreversible Entscheidung treffen, verlangsame die Interaktion, etwa indem man sie zweistufig ausführst und mit einem „Wollen Sie wirklich? Diese Aktion kann nicht rückgängig gemacht werden.“ bestätigen lässt.

Wichtig dabei ist, dass die Aktion ganz klar und eindeutig beschriftet ist, so dass es keinen Zweifel am Effekt der zu treffenden Entscheidung geben kann.

Setze allgemein auf Hilfen, Warnungen und Eingabeaufforderungen

Man kennt es etwa aus Formularen. Ein Pflichtfeld wurde vergessen. Das Javascript meldet zurück, dass das Feld X noch mit Inhalt befüllt werden muss, bevor das Formular abgesendet werden kann. Diese Warnung hilft dem Nutzer, schlussendlich zum Erfolg zu gelangen. Der Fehler ist gemacht. Das Design verzeiht und lenkt in die richtige Richtung.

Hilfen sollte man überall dort anbieten, wo es auch nur ansatzweise kompliziert oder irreversibel enden könnte. Hilfen sollten dann erklären, was jetzt wie zu erreichen ist. Sie sollten allerdings nicht erforderlich sein, bloß um zu erklären, was die Beschriftungen auf den Buttons zu bedeuten haben, von denen der Nutzer jetzt einen betätigen soll.

Eingabeaufforderungen eignen sich bestens für den Einsatz als Entschleuniger. Wie weiter oben bereits erwähnt, ist es sinnvoll, den Prozess der Interaktion zu verlangsamen, wenn es an irreversible Entscheidungen geht. So erhöht man die Aufmerksamkeitslevel beim Nutzer. Die Wahrscheinlichkeit des schnellen Gewohnheits-Okay reduziert sich.

Fazit

Dass die Benutzer eines Designs keine Fehler im Umgang damit machen, ist eine Utopie. Selbst, wenn man der Auffassung ist, man hättest einen total simplen Prozess gestaltet, bei dem gar nichts schief gehen kann, werden Sie ihre Nutzer schnell eines besseren belehren.

Deshalb ist es wichtig, von Beginn an mit diesen Fehlern zu rechnen und sie, soweit sie vorhersehbar sind, designtechnisch zu berücksichtigen. Die wichtigsten Tipps hat man heute erfahren. Achten Sie darauf, dass Sie im Designprozess direkt mögliche Fehler identifizierst und abfängt. Da sind Softwareentwickler Experten.

Vielleicht setzt man sich mal mit einem Vertreter dieser Branche zusammen und sprichst über Fehler und deren Vermeidung. Das hilft ihnen auch als Web- oder Produktdesigner.

Quellen zum Weiterlesen

• Der Begriff der Affordance im UI-Design | Philipp Holzer
• Designing for Forgiveness | Jules Cheung
• Design principle: Error & Forgiveness | Anton Nikolov
• Principles of Design: Forgiveness | Adam McGee

---

Die 5 Prinzipien der Designpsychologie

Egal, was man tut. An Psychologie sollte man sich nicht vorbei mogeln. Denn damit erklärt sich so ziemlich jede unserer Handlungen. Für das Webdesign kann man einige Funktionsweisen der menschlichen Psyche sogar nutzbar machen.

Einer der bekanntesten Evangelisten der „Psychologie für Designer” dürfte wohl Joe Leech, besser bekannt als Mr. Joe, sein. Leech zählt Disney, eBay, das Museum of Modern Arts und die Marriott-Gruppe zu seinen Kunden. Vor einigen Jahren schrieb er das in der Branche vielbeachtete Buch „Psychology for Designers”, das er seither regelmäßig überarbeitet. Zudem bereist er die Welt und hält Workshops zum Thema. Leech hat eine klare Meinung.

Für Leech ist ein Designer, der keine Ahnung von der menschlichen Psyche hat, vergleichbar mit einem Architekten, der keine Ahnung von Bauphysik und Statik hat. Die Gebäude des letzteren sind stark einsturzgefährdet, die Websites des ersteren stark misserfolgsgefährdet. Dabei ist Psychologie laut Leech nicht etwa von Design getrennt zu sehen, sondern gehört untrennbar dazu. Ohne Grundkenntnisse in Psychologie wären keine großen Erfolge im Design zu erzielen.

Leech ist allerdings reichlich bodenständig und macht keine Wissenschaft aus dem Thema. Vielmehr versucht er, die erforderlichen Kenntnisse unkompliziert und geradlinig zu ermitteln. Im Grunde müsse man als Designer nur wissen, dass das menschliche Gehirn tendenziell faul ist und am liebsten innerhalb etablierter Abläufe arbeitet. Wenn es darum geht, Informationen zu verarbeiten, versucht es zunächst, diese Informationen auf bekannte Weise aufzunehmen. Das spart Energie und hilft, das Gefühl von Kontrolle zu behalten.

Auf seiner Website „Psychology for Designers”, die Leech ergänzend zu seinem Buch betreibt, sammelt er Details und Informationsstücke zum Thema, mit denen Designer sich beliebig tief in die Materie einarbeiten können. Dabei behandelt er dann auch Themen, wie die Psychologie des Preises oder die Auswirkungen bestimmter Bildmotive.

In den Quellen zum Weiterlesen am Ende dieses Beitrags findet man genügend Material, um sich etliche Stunden in das Thema „Designpsychologie” zu vertiefen. Da diese Zeit nicht jedem zur Verfügung steht, stelle ich folgend einige etablierte Prinzipien der Designpsychologie als Handlungsrichtlinien bereit. Nimm es als essenzielles Basiswissen für einen guten Start ins psychologisch fundierte Webdesign.

Erfinden Sie keine neuen Herangehensweisen an etablierte Abläufe

Das menschliche Gehirn wandelt am liebsten auf bekannten Pfaden. Wenn es auf eine Website losgelassen wird, sucht es nach bekannten Mustern, um sich zu orientieren. Wenn man als Designer jetzt ganz innovativ ist und völlig neue Nutzungsmuster für die Website erschaffen hast, wird ihnen das Gehirn des Seitenbesuchers das nicht danken.

Erstellen Sie keine drastischen Redesigns etablierter Seiten

Schauen Sie sich Google an: Man kann immer noch Reminiszenzen an das erste Design des Dienstes Ende der Neunziger erkennen. Jedes zwischenzeitlich erfolgte Redesign war stets subtil und maßvoll. Gerade bei derart vielbesuchten Seiten ist es wichtig, Psychologie strategisch zu betrachten.

Generell hasst der Mensch jede Veränderung, die keine deutliche Verbesserung mit sich bringt. Dabei wird eine Verbesserung nur dann als solche akzeptiert, wenn zuvor ein Mangel empfunden wurde. Die Definition des Begriffs „Verbesserung” liegt also im Auge des Besuchers, nicht im Auge des Designers.

Designer hingegen betrachten ihre Redesigns gerne pauschal als Verbesserungen und vergessen dabei den alten Spruch: „If it ain’t broken, don’t fix it”. Wenn es nicht kaputt ist, reparier es nicht. Und nein, bloß, weil eine Website einem brandheißen, aktuellen Trend nicht folgt, ist sie nicht broken.

Nutzen Sie den positiven Effekt hochwertiger Typografie

Eine Studie des Microsoftlers Kevin Larson und der MIT-Mitarbeiterin Rosalind Picard konnte nachweisen, dass es einen deutlichen Zusammenhang zwischen der Typografie einer Seite und dem Stimmungsbild ihres Lesers gibt. Die Erkenntnis war für die Forscher durchaus überraschend, hatte man ähnliche Effekte doch bislang nur bei spaßigen Videos oder kleinen Belohnungen erlebt. (Studie zum Download als PDF)

Zusätzlich zum verbesserten Stimmungsbild zeigte sich, dass Leser auf Seiten mit hochwertiger Typografie länger lesen und die Informationen besser verarbeiten können. Wenn man also Typografie psychologisch nutzen will, dann verwende eine qualitativ hochwertige Schrift ohne allzu große Besonderheiten und setze die Schriftgröße ruhig etwas nach oben.

Nutzen Sie Belohnungen strategisch, also im Zweifel gar nicht

Bislang galt als unstrittig, dass kleine Belohnungen das Engagement der potenziellen Nutzer steigern würden. So gehört etwa der kostenlose Probemonat bei diversen Angeboten schon fast zum guten Ton. Es gibt jedoch Fälle, in denen diese Vorgehensweise nach hinten losgehen kann.

Bevor man mit Belohnungen arbeitet, sollte man also identifizieren, worin die primäre Motivation ihrer Nutzer besteht. Warum werden ihre Nutzer eine Website oder App nutzen wollen?

Kommt die Motivation ihrer Besucher primär aus dem Inneren? Nutzen sie ihr Produkt zum Spaß, um damit abzunehmen oder um sich damit zu unterhalten, können Belohnungen entweder gar keinen oder sogar einen negativen Effekt auf das Engagement haben.

Zu diesem Ergebnis kommt diese Studie, die noch nicht einmal brandneu ist, aber einige Misserfolge der letzten Jahre erklären könnte. Grunderkenntnis ist, dass Belohnungen das intrinsische Motivationssystem quasi untergraben und so aushebeln.

Arbeiten Sie proaktiv mit menschlichen Schwächen

Menschen machen Fehler und das menschliche Gedächtnis ist nicht sonderlich verlässlich. Diese beiden Probleme must man in ihren Designs aktiv angehen. Es ist wichtig, alle möglichen Fehler zu erkennen, die ein potenzieller Benutzer machen könnte, um sie dann jeweils funktional abzufangen. Denn die Forschung zeigt zweierlei.

Fehler frustrieren an sich schon und sorgen für ein schnelles Ende der Nutzung. Beschleunigend wirkt sich aber noch der Effekt aus, dass Menschen dazu tendieren, sich selbst die Schuld am Versagen zu geben. An diesem Punkt setzt eine Fluchtreaktion ein, die sich in dem Falle auf ihre Website bezieht.

Ein weiterer Faktor, den sicherlich jeder schon mal gehört hat, ergibt sich aus der Aussage: “Von Computern habe ich keine Ahnung”. Vielfach wird der Satz sogar mit einem gewissen Stolz vorgetragen, als könne man sich durch das dokumentierte Unvermögen positiv von anderen abgrenzen. Diese Form erlernter Hilflosigkeit ist schwer zu bekämpfen, aber wichtig zu kennen. Immerhin ist der Designer selbst auch nur ein Mensch.

Begleitende Unterstützungssysteme, die sich allerdings auch nicht aufdrängen dürfen, können nützlich sein. Moderne Apps setzen diesen Aspekt häufig sehr gut um, indem sie Support anbieten, der vielfach als „Tour” durch die App bezeichnet ist. Tatsächlich handelt es sich um Bedienungsanleitungen, die sich allerdings nicht wie solche anfühlen. Schließlich gilt psychologisch betrachtet immer noch der Spruch „Wer das Handbuch liest, ist feige.”

Fazit: Mach es den Nutzern so einfach wie möglich, aber nicht einfacher

Jetzt kommt er auch noch mit dem alten Einstein, denkt man jetzt vielleicht. Tatsächlich handelt es sich um den besten Rat, der Designern gegeben werden kann. Alle genannten Prinzipien kann man unter dem Oberbegriff „Bedienkomfort” zusammenfassen. Mach ihren Besuchern die Verwendung ihrer Website oder die ihrer Kunden so einfach wie möglich. Bei der Umsetzung spickt man immer mal wieder in die oben ausgeführten fünf Prinzipien.

Quellen zum Weiterlesen:

• 14 Design Psychology Articles for UX Practitioners | UX Pin
• Combining UX Design And Psychology To Change User Behavior | Smashing Magazine
• Discipline or Tool? The Study of Design Psychology in UX | Adobe
• Reading minds: the psychology behind UX design | Webdesigner Depot
• The Psychologist’s View of UX Design | UX Magazine
• 4 Clever Psychology Rules for Making Better UX Decisions | Sitepoint
• Psychology for Designers | Joe Leech
• 10 psychology techniques to drive behaviour | Keep It Usable

---

Empty States: So gestaltet man Seiten, auf denen es nichts zu sehen gibt

Gutes Design ist schon schwierig genug, wenn es auf einer Seite stattfinden muss, auf der es was darzustellen gibt. Noch anspruchsvoller ist es hingegen, wenn man Seiten gestalten muss, auf denen es nichts zu sehen gibt. Etwa eine leere Inbox oder ein Downloadfenster ohne Downloads. Empty States sammelt genau solche Seiten, um ihnen auf die designerischen Sprünge zu helfen.

Empty Stat.es sammelt Leerseiten als Best Practices

Empty Stat.es ist eine ganz unaufdringliche Sammlung von Leerseiten verschiedenster Art. Fehlermeldungen, eine besondere Form der Leerseite, wird eine eigene Kategorie gewidmet. Das ist auch gut so, denn das Fehlerseiten ein spezielles, zielgerichtetes Design benötigen, weißt man als Leserin oder Leser von Dr. Web natürlich längst. Und wenn nicht, dann lies doch einfach diesen Beitrag mit vielen Beispielen.

Natürlich gibt es auf Webseiten, die der Präsentation einer Marke oder eines Freelancer-Portfolios dienen, maximal eine Fehlerseite, aber keine sonstigen Leerseiten. Sobald man aber hergehst und eine native oder Web-App herstellt, die auch nur im Ansatz Daten zu verarbeiten hat, begegnet ihnen das Problem. Auf Empty Stat.es kann man sehen, wie ihre Kolleginnen und Kollegen das jeweilige Problem gelöst haben.

Edel sei die Leerseite, hilfreich und gut (Goethe)

Neben naheliegenden, recht profanen Lösungen findet man hier aber durchaus einige hilfreiche und witzige Ansätze. Wie man so durch die Beispiele scrollt, fällt ihnen auf, dass sich ein Muster abzeichnet. Natürlich ist das Design stets anders, aber eines ist immer gleich.

Stets wird der Benutzer an die Hand genommen, um dafür zu sorgen, dass die Seite beim nächsten Besuch nicht mehr leer sein muss. Sei es, dass ihnen die Tourenplanungs-App anbietet, doch direkt die erste Tour zu planen oder der Schlaftracker sich auffordert, doch direkt den ersten Datensatz zu tracken. Von der Leerseite wird der Nutzer stets im Sinne eines Call-to-Action zum Kern der App geführt.

Empty Stat.es unterteilt die Galerie in Kategorien, die den jeweiligen Zielauflösungen entsprechen. So kann man leicht selektieren, nach Beispielen für Smartphones, Tablets oder Desktops. Zwar gibt es zusätzlich die Kategorie „Games Console”. Darin findet sich allerdings nur ein einziger Screenshot. Vielleicht magt man ja beim Befüllen helfen.

Beteiligen kann sich jeder am weiteren Ausbau der Leerseiten-Galerie, denn solche kann man unproblematisch per Kontaktformular mit Screenshot-Upload einreichen. Nennt man ihren Twitter-Handle wird dieser als Link mitveröffentlicht.

Nutzer können sich die Galerie zum einen über die genannten Kategorien erschließen oder die Freitextsuchfunktion verwenden. „Random” präsentiert eine Leerseite nach dem Zufallsprinzip im Vordergrund. Die Technik der Plattform stellt Tumblr.

---

Mit diesen Prototyping-Tipps gewinnt man Kunden

Ob man es nun Prototyping, Designentwurf, Mockup oder Vorschlag nennst ist egal. Es geht ums gleiche Thema. Der Kunde will so früh wie möglich sehen, wie sein digitales Endprodukt aussehen und funktionieren wird.

Design-Prototypen sind immer ein Kompromiss. Das weiß ihr Kunde aber nicht…

Wir Designer betrachten uns gerne als Experten – besonders, wenn wir schon auf eine Vielzahl erfolgreicher Projekte zurückblicken können. Im Verhältnis zu unseren typischen Kunden sind wir das ja meistens auch. Unter dieser Grundannahme erscheint es uns bei überschaubaren Projekten bisweilen überflüssig, überhaupt einen Prototypen zu bauen.

Der Kunde sieht das gänzlich anders. Er will so schnell wie möglich was sehen, am besten ein Ergebnis. Dabei können wir zu so einem frühen Zeitpunkt maximal ein Mockup liefern, einen Prototypen, eigentlich eher ein Drahtmodell.

Natürlich ist uns klar, dass ein Mockup im Grunde nicht geeignet sein wird, den Wunsch des Kunden zu befriedigen. Der möchte nämlich eigentlich gar keinen Prototypen sehen, so wie wir ihn verstehen – nein, er will eine vollständige und fertige Website oder App, die er in vollem Umfang bedienen kann. Gleichzeitig erwartet er, dass auch die fundamentalste Änderung jederzeit und verzögerungsfrei umgesetzt wird.

Das ist Konfliktstoff. Selbst, wenn wir es nicht auf einen Streit anlegen, so ist uns doch bewust, dass ein Prototyp unter dieser Grundforderung immer nur ein Kompromiss sein kann. Das verstärkt möglicherweise den Drang, auf die Erstellung gleich ganz zu verzichten oder zumindest so wenig Arbeitszeit wie möglich dafür zu opfern.

Schon am letzten Punkt lässt sich professionell ansetzen. Mit den heute verfügbaren Prototyping-Tools und UI-Kits muss ein Entwurf nicht mehr lange dauern. Mit etwas Erfahrung und den genannten Hilfsmitteln dürftet man eine App in etwa zwei Stunden grob entworfen und mit Interaktion versehen haben.

Wenn man es ganz ruhig und professionell angeht, kann man es schaffen, ihren Kunden und gleichzeitig ihren Verstand zu behalten. Das ist eine Win-Win-Situation in mehrfacher Hinsicht. Schauen Sie sich also die folgenden Tipps ganz emotionslos an und entscheiden Sie, was wichtiger ist: Recht oder den Kunden zu behalten.

Verliere nicht das Verständnis für den Kunden

Ich habe es schon öfter erlebt, als mir lieb gewesen wäre: Der Designer baut sich vor dem Kunden auf, will ihn bekehren und ist vielleicht sogar erzürnt darüber, dass der Kunde trotz mehrfacher Überzeugungsversuche immer noch auf seinen eigenen, natürlich abweichenden Vorstellungen beharrt. Schließlich sieht der Designer das Fachwissen und damit das Recht auf seiner Seite – vielleicht hat er sogar Design studiert und ist damit ein staatlich geprüfter Experte. Was ist denn dieser Kunde bloß für ein Vollidiot?

Wer allerdings gegen seine vorhandenen oder potenziellen Kunden in den Ring steigt, beginnt einen aussichtslosen Kampf. Denn selbt, wenn der Kunde letztlich einlenken sollte, wird er doch nicht zufrieden sein. Er wird sich überfahren fühlen und mit ziemlicher Sicherheit keine dauerhafte Kundenbeziehung aufbauen.

Merke: Gegen seine Kunden gewinnt man nie.

Gehe also an den Designprozess offen und mit großem Verständnis für ihren Kunden heran. Er ist derjenige, der die Musik bezahlt – also darf er auch bestimmen, was gespielt wird. Wenn er natürlich eine kleine Nachtmusik erwartet, man aber nur E-Gitarre beherrscht, könnte es sein, dass ihr nicht zusammenpasst. Aber auch das lässt sich verständnisvoll klären.

Betrachten Sie Prototyping nicht als überflüssigen Aufwand

Die Erstellung eines Prototypen bedeutet zunächst einmal einen Arbeitsaufwand. Allerdings geht es dabei auch darum, die Richtung eines Projekts schnell festzulegen und sich mit dem Kunden auf grundlegende Komponenten des Auftrags zu verständigen.

Deshalb ist ein Prototyp nie überflüssiger Aufwand. Es spricht allerdings auch nichts dagegen, den Erstellungsprozess so kurz wie möglich zu halten. Standardisiere ihren Prototyping-Workflow. Legen Sie sich ein Baustein-System zurecht, auf dessen Basis man die Standardelemente eines jeden Projekts schnell zusammenschieben kann.

Auch, wenn man es ihnen vielleicht nicht eingestehen will. Die Basisbestandteile sind fast immer gleich – wir sind schließlich keine Künstler, sondern eher Handwerker, die mit verfügbaren Materialien mehr oder weniger standardisierte Lösungen erschaffen.

Früher erstellte ich Mockups in meinem Moleskine-Notizbuch – total hipster. Irgendwann ließ ich es bleiben, weil ich die Entwürfe nicht mehr auseinanderhalten konnte. Seitdem verwende ich Sketch auf der Basis von drei Templates, die ich mir zum Zwecke des Prototypings in den von mir vornehmlich bedienten Branchen erstellt habe.

Das Sketch landet dann in InVision, wo die einzelnen Screens automatisch extrahiert werden, so dass ich auch damit keinen zusätzlichen Aufwand habe. Nun baue ich noch schnell über Hotspots die Interaktionen ein – fertig.

So minimiere ich auf der einen Seite den Aufwand für die Mockup-Erstellung und leiste auf der anderen Seite einen wichtigen Beitrag für die Kommunikation und Planung mit dem Kunden.

Baue den Prototypen interaktiv

Früher war es üblich, einen reinen Designentwurf anzufertigen und auszudrucken. Der Ausdruck wurde vielfach noch auf eine große farbige Pappe geklebt, um Eindruck zu schinden. Mindestens fünf Entwürfe bekam der Kunde zu sehen – dabei war einer mit voller Absicht grottenschlecht, um den Kunden von vornherein in eine bestimmte Richtung zu lenken und seine Entscheidungsfreude zu stimulieren.

Natürlich ist es auch heute immer noch der simpelste Weg, einen Prototypen interaktionslos zu gestalten, doch bei den heute verfügbaren Prototyping-Tools wäre das nahezu fahrlässig. In den Nuller Jahren verwendete ich Powerpoint zu diesem Zweck. Heutzutage gibt es eine ganze Reihe besserer Tools und auch mit Standard-Webtechnologien sind Prototypen schnell erstellt.

Wenn man also zeitgemäß arbeiten und einen interaktiven Prototypen anbieten möchtet, dann sollte es nicht einfach nur eine Slideshow sein. Bau den Prototypen mit Hotspots an den richtigen Stellen, die dann bei Klick zu den richtigen Folgescreens führen. Wenn man das nicht tust, spannt man schon den nächsten Fallstrick.

Achten Sie darauf, dass der Kunde ihren Prototypen versteht

Wie bereits erwähnt, haben Designer und Kunden oft eine fundamental unterschiedliche Vorstellung von einem Prototypen. Der Kunde erwartet eigentlich das fertig polierte Endprodukt, das man natürlich zu diesem Zeitpunkt nicht liefern kann.

Stellen Sie also schon im Vorfeld der Präsentation klar, was von dem Prototypen zu erwarten sein wird – und was eben nicht. Ihr Kunde wird es ihnen danken.

Fordern Sie Feedback immer so konkret wie möglich an

Wenn es darum geht, Feedback zu ihrem Prototypen einzusammeln, sollte man pauschale und allzu offene Fragestellungen vermeiden. Wenn man etwa allgemein eine Bitte um Feedback formuliert, wird man mit großer Wahrscheinlichkeit zwar Feedback bekommen, aber keines, das man gebrauchen kann.

Fordern Sie Feedback daher immer ganz konkret für bestimmte Aspekte an, etwa, um zu erfahren, wie sich die Seitennavigation anfühlt oder ob das Formular X an der Position Y gewünscht ist.

Sorgen Sie für eine bequeme und verbindliche Kollaborationsbasis

Lass mich ehrlich sein: Hier habe ich selbst noch keine perfekte Lösung gefunden. Was ich aber aus Erfahrung sicher sagen kann, ist, dass die Kollaboration an einem Prototypen mit mehr als zwei Personen garantiert zur Katastrophe gerät, wenn sie via E-Mail geführt wird. Es dauert nur wenige Tage, bis wirklich niemand mehr weiß, was wie wann besprochen und vereinbart wurde.

Baue nicht mehr Prototypen als unbedingt nötig

Ich versuche, es stets bei einem einzigen Entwurf zu belassen und diesen schrittweise zu verändern. Von der unsäglichen Praxis, immer neue Entwürfe zu generieren, habe ich mich bereits vor fünfzehn Jahren verabschiedet: Damals habe ich mich von einem Kunden getrennt, der nach dem zehnten (!) funktionsfähigen und völlig umgekrempelten Designentwurf immer noch nicht zufrieden zu stellen war.

Heutzutage erstelle ich genau einen gut durchdachten Entwurf. Diesen erkläre ich ausführlich. Dabei bin ich beim ersten Entwurf stets bedacht, keine handfesten Design-Festlegungen zu treffen. Wie das Projekt später mal aussieht, ist zu diesem Zeitpunkt noch so offen wie eben möglich.

Nun arbeite ich mit dem Kunden an diesem Entwurf, um einen Konsens zu finden, der unser beider Gesicht wahrt und vor allem die bestehende Problemstellung sicher löst. Wer anders vorgeht und stets einen Haufen Entwürfe anbietet, suggeriert dem Kunden nicht nur deren individuelle Wertlosigkeit, sondern auch eine gewisse Beliebigkeit, eine Richtungslosigkeit in der Lösungsfindung.

Im Zusammenspiel mit der sowieso schon schwierigen Kollaboration kann an dieser Stelle in kürzester Zeit ein komplettes Chaos entstehen.

Lenken Sie die Aufmerksamkeit des Kunden stets auf die Kernpunkte

Wer kennt es nicht? Der Kunde sitzt im Meeting und moniert, dass das Datum im Mockup nicht dem heutigen entspricht. Es ist offenbar doch ziemlich schwer, einen statischen Entwurf vom Endprodukt zu unterscheiden.

Auch dieser Aspekt bedarf also einer Erklärung. Der Kunde muss verstehen, dass der Prototyp trotz begrenzter Interaktion immer noch in erster Linie eine Attrappe ist, die lediglich Richtungen vorgeben soll.

Insofern ist es auch wenig hilfreich, wenn der Kunde die Schriftart moniert oder die Stärke einzelner Orientierungslinien kritisiert. Es bedarf eines gewissen Maßes an Körperbeherrschung, in solchen Fällen ruhig zu bleiben.

---

Designkritik: So umgeht man die Fettnäpfchen und nutzt das Instrument richtig

Wenn der Begriff bloß nicht so negativ klingen würde. Designkritik hat ja schon phonetisch was vernichtendes. Im folgenden Beitrag setzen wir uns über derlei Details unerschrocken hinweg und finden die Perlen in der Auster.

Was ist Designkritik?

Schon bei der Erwähnung des Wörtchens „Kritik” wird es so manchem ganz schwummerig vor Augen. Dabei ist Designkritik, richtig durchgeführt, ein absoluter Gewinn für alle Beteiligten. Deshalb wollen wir uns heute durchaus in einiger Ausführlichkeit damit beschäftigen.

Bevor wir aber einen der Fehler machen, die auch im Rahmen einer Designkritik sehr häufig vorkommen, klären wir vorab, was es mit dem Begriff auf sich hat, respektive, wie wir den Begriff in diesem Beitrag definieren werden:

Unter Designkritik verstehen wir einen strukturierten Feedback-Prozess, der dazu dienen soll, ein Design unter verschiedenen Gesichtspunkten zu evaluieren und nötigenfalls zu verbessern.

Designkritik ist also nicht das, was der Chef oder Kunde mal eben so per Mail um die Ohren haut. Das ist zwar ebenfalls Kritik, aber häufig genug keine hilfreiche.

Die vier Zutaten einer nutzbringenden Designkritik

Stellen wir nochmal klar, dass Designkritik einen strukturierten Feedback-Prozess darstellt. Wir brauchen also zunächst eine Struktur, damit nützliches Feedback kommen kann.

Die Vorbereitung

Eins vorab und ganz deutlich: Designkritik ist keine Stammtischrunde, bei der es darum geht, wer am intelligentesten und durchsetzungsstärksten ein Design argumentativ vernichtet. Designkritik muss stets vom Designer ausgehen. Es handelt sich nicht um eine verkappte Disziplinierungsmaßnahme des Agenturchefs und auch nicht um einen Intelligenzwettbewerb unter Kollegen.

Insofern ist stets der verantwortliche Designer auch der führende Kopf bei der Designkritik. Stellen wir uns mit unserem Design also einer solchen Maßnahme, was wir auf jeden Fall tun sollten, dann sind wir diejenigen, die das Heft des Handelns in der Hand behalten. Das geht natürlich nicht ohne Vorbereitung.

Erwarten wir von einer Designkritik nützliche Unterstützung, so dürfen wir sie nicht offen gestalten. Machen wir diesen verbreiteten Fehler, müssen wir uns nicht wundern, wenn aus einem allgemeinen Palaver keine greifbaren Handlungsvorgaben entstehen. Das ist nicht einmal erstaunlich, denn wenn es keine Vorgaben gibt, wird jeder mit seinen eigenen inneren Vorgaben und Annahmen ans Werk gehen, was selten zu konsensfähigen Ergebnissen führen wird.

Wir gehen also stets mit konkreten Fragen in eine Designkritik. Wir stellen unser Design ausführlich vor und erklären die einzelnen Designentscheidungen fachlich fundiert. Während wir das vorbereiten, finden wir mit Sicherheit Punkte, an denen wir nicht sicher sind, ob unsere zuvor getroffene Designentscheidung immer so die richtige war.

Die Zusammensetzung der Gesprächsrunde

Im Idealfall definieren wir eine kleine Gruppe von drei bis maximal sieben Personen, die wir an der Designkritik beteiligen wollen. Generell können diese Personen diverse Hintergründe haben, also etwa den Kunden, das Marketing oder andere Bereiche umfassen. Die genaue Zusammensetzung des Teams machen wir am Besten davon abhängig, in welchem Stadium des Designs wir uns befinden und welche Art von Feedback wir erwarten.

Geht es um die Details der Benutzerführung in einigen Bereichen des Designs, so empfiehlt sich eher eine kleine Gruppe von Experten, die den gleichen oder einen ähnlichen Hintergrund wie wir selber haben. Denn hier geht es nicht um Geschmacksfragen oder die Markenwahrnehmung, sondern um technische Detailfragen, an die man nur Experten ranlassen sollte.

Geht es um das große Ganze, kann es durchaus sinnvoll sein, den Kunden oder das Marketing zu beteiligen. Immerhin müssen die das Design am Ende unterstützen, eventuell benutzen, sich aber jedenfalls damit identifizieren.

Generell lässt sich festhalten, dass Designkritik nie spontan aus zufällig zusammentreffenden Personengruppen heraus erfolgen sollte. Sieht man Designkritik als dauernde Aufgabe mit mehreren Sitzungen bis zur Fertigstellung, dann empfiehlt es sich, immer das gleiche Team zu wählen, um konsistente Ergebnisse zu erhalten.

Das Gespräch

Auf die im Rahmen unserer Vorbereitung entstandene Fragen fokussieren wir das Gespräch und bitten um Feedback. Es wird allerdings unweigerlich so sein, dass sich aus der Erläuterung der getroffenen Designentscheidungen bei den anderen Teilnehmer Fragen ergeben. Diese Fragen werden erst abgearbeitet, wenn das primär wichtige Feedback, das wir selber angefordert haben, erfolgt ist.

Das Gespräch selber sollte möglichst moderiert sein, wobei wir als verantwortlicher Designer stets ein Redevorrecht haben sollten. Viel zu oft heißt es bekanntlich, dass „zwar schon alles gesagt ist, aber noch nicht von jedem.” Da wir uns als Designer stark in den Prozess einbringen müssen, ist es nützlich, wenn es eine Art Protokollführer gibt, der im Nachgang ein Ergebnisprotokoll vorlegen kann. So haben wir direkt eine Todo-Liste an der Hand, die noch dazu mit den anderen Teilnehmer quasi abgestimmt ist.

Der Gesprächsverlauf sollte möglichst demokratisch gestaltet werden. Jeder Teilnehmer der Gruppe, nach dem Designer, hat das gleiche Rederecht. Bewertende Aussagen sollten unterlassen werden, um das Risiko, die sachliche Ebene zu verlassen und auf die emotionale, geschmackliche oder ideologische Ebene zu wechseln, zu minimieren.

Dieses Risiko lässt sich schon bei der Zusammensetzung der Gruppe im Auge behalten. Personen, die aus ihrer Persönlichkeitsstruktur heraus nicht in der Lage zu rein sachlichen Diskussionen sind, sollten wir gleich außen vor lassen. Das funktioniert natürlich leider nicht, wenn der Quertreiber der Chef ist.

Standardisierte Fragen

David de Léon, Designchef bei Inuse, nutzt für die in seiner Agentur durchgeführten Designkritiken einen sehr ausgefeilten Fragenkatalog. Damit will er sicherstellen, dass einerseits der Prozess standardisiert abläuft und andererseits keine wichtigen Aspekte vergessen werden.

Diesen Fragenkatalog publizierte er auf Medium.

Auch wenn ich den Katalog in dieser Ausprägung für übertrieben detailliert halte, immerhin beinhaltet er 52 Fragen, so kann er doch als Ideenpool für unsere eigene Designkritik herhalten. Wir könnten uns zehn bis zwanzig seiner Fragen ausleihen und auf diese Weise einen guten Gesprächsleitfaden bekommen, der jedenfalls strukturiertes Feedback ermöglicht.

Die interessantesten Fragen sind meiner Meinung nach:

• Was will ich am Ende der Designkritik mitnehmen?
• Was würden andere Designer ändern, wenn sie mein Design übernehmen müssten?
• Hält sich das Design an etablierte Muster? Wenn nein, warum nicht?
• Inwiefern spricht das Design den potenziellen Nutzer an? Was will das Design erreichen?
• Was ist das wichtigste Designelement?
• Ist die Nutzung gleichbleibend attraktiv für den Verwender, auch nach Wochen noch?
• Wird der Nutzer auf Schwierigkeiten bei der Bedienung stoßen und, wenn ja, wie wird ihm dann geholfen?
• Ist der Vorschlag der beste, den ich mir vorstellen kann oder bloß ein Kompromiss? Worin besteht der?
• Welche Alternativen habe ich bedacht und verworfen, und warum?

Im genannten Medium-Beitrag finden sich weitere Fragen, die wir je nach Bedarf, Gruppenzusammensetzung und Zielsetzung anders zusammenstellen können.

Richard Rio Omolo von Booking.com skizziert auf Medium den Designkritik-Prozess beim Reiseportal. Er bringt noch den Aspekt des sokratischen Dialogs ins Spiel und weist darauf hin, dass Wortäußerungen möglichst nicht meinungsgetrieben erfolgen sollten, um die sensible Grenze zwischen sachlicher und emotionaler Kritik nicht anzukratzen.

Designkritik im Alltag

Wenn wir nicht die Möglichkeit haben, eine Expertengruppe für die Designkritik zu akquirieren, sondern versuchen müssen, aus dem Freelancer-Büro heraus unsere Designs zu validieren, so gelten die grundlegenden Regeln dennoch. Hier empfiehlt sich dann allerdings besonders die Erstellung eines dezidierten Fragebogens mit sehr genauen Fragestellungen.

Diesen Fragebogen können wir dann etwa per E-Mail an Experten aus unserem beruflichen Netzwerk versenden und sie so zu einem virtuellen Designkritik-Team zusammenschließen. Wenn wir selber auch bereit sind, Feedback zu geben, kann sich da schnell eine brauchbare Lösung etablieren.

Fazit

Designkritik ist ein wichtiges Element der Verbesserung unserer Arbeitsergebnisse. Wir können die Produktqualität schon vor den eigentlichen Tests in freier Wildbahn so maximieren, dass viele Fehler im fertigen Produkt strukturell ausgemerzt sind, bevor der erste Nutzer sie findet. Es gilt lediglich, das unangenehme Gefühl, kritisiert zu werden, fallen zu lassen und das konstruktive Element des Vorgangs zu erkennen.

Quellen zum Weiterlesen:

• Design Critique Cards | David de Léon
• Design Critique: The Booking way | Richard Rio Omolo
• Design Critique: “How to improve your design?” | Lisha Deng
• How To Run a Design Critique | Scott Berkun
• How to give and receive a good design critique | Kate Lawless and Shannon Crabill
• Design Critique and why is it important for a designer | Jithin George

---

Wie man UX-Design richtig einsetzt

Dass der Kunde immer Recht hat, wissen wir ja schon länger. Nur wird dieser Spruch oftmals als Fabel abgetan und recht selten beherzigt. Doch genau diese Einstellung kostet eine Menge Geld, Geld, welches keine Chance hat, verdient zu werden.

Egal zu welcher Branche dein Unternehmen zählt, an der Spitze einer jeden Marketing-Strategie steht stets der Kunde. Erst dann, wenn der Kunde zufrieden ist, kann es auch das Unternehmen sein. Nur dann optimiert ein Geschäft seine Umsätze. Gerade in der digitalen Welt ist die Zufriedenheit des Kunden sehr fragil; der Wettbewerb ist nur einen Klick entfernt.

Und so muss der Fokus nicht nur, aber besonders hier auf Kunden-Zufriedenheit und Service gelegt werden. Das betrifft ebenfalls nicht nur Online-Shops, sondern jedwede Art von Internet-Präsenz. Neben Produkten und Prozessen muss auch das User Experience Design optimal sein.

So entwickeln Sie ihre UX-Design-Strategie

Der Ausgangspunkt: die Farbe

Wenn Sie eine UX-Design-Strategie entwickeln, starten Sie vielleicht als erstes mit der Farbauswahl. Ein minimalistisches Theme wirkt zum Beispiel sehr gut mit einem monochromatischen Layout, ohne erschlagende Kontraste.

Die zurzeit beliebteste Kombination ist trichromatisch. Es wird ein neutraler Hintergrund in Weiß oder sehr hellem Grau gewählt, dazu eine Highlight-Farbe für Registerkarten, Buttons und Elemente, die hervorstechen sollen. So könnte eine moderne Website in einer Schwarzweiß-Kombination gestaltet werden, mit einem farbigen Kopfbereich oder einem nicht ablenkenden Hero-Images Header.

Die Blicke der User sollten sich direkt auf die wichtigen Bereiche der Website lenken lassen. Um dies zu erreichen, könnte man ausgiebige Tests mit Usern oder sogenannten Heatmaps durchführen. Für ein optimales UX-Design ist es wichtig, seine User verstehen zu lernen, um ihnen das bieten zu können, was sie gerne hätten oder erwarten.

Auf einer weißen Hintergrundseite wird bereits ein kleiner Farbklecks die Aufmerksamkeit des Besuchers auf sich ziehen.

Unter diesen Vorgaben lassen sich zum Beispiel optimale Formulare gestalten. Auch Produktbilder funktionieren am Besten auf weißen Hintergründen. In Kombination mit sich farblich deutlich abhebenden Call-to-Action-Buttons wird ein ruhiger und klarer Gesamteindruck geschaffen.

Effekte und Menüs

Wenn die Farbwahl nun getroffen wurde, nimmt man sich als nächstes die Effekte vor, die ihre Website aufweisen soll. Auch hier ist weniger mehr. Sehr gut lassen sich Effekte für die Validation von Formulardaten einsetzen, weil sich so ein wirkliches Plus an Benutzerfreundlichkeit umsetzen lässt. Richtig angewendet können auch Icons die Benutzerfreundlichkeit um einiges erhöhen.

Ein Menü sollte sich stets ausreichend vom Inhalt abheben und sofort wahrgenommen werden können. Lassen Sie sich mit der Beschriftung der einzelnen Menüpunkte ruhig Zeit und testen Sie verschiedene Varianten. Auch hier können Heatmaps und Test-User helfen. Wirklich wichtige Punkte des Menüs dürfen ruhig deutlich farblich abgesetzt als Call-to-Action-Button gestaltet sein. So erkennt ein Besucher sofort, was von ihm erwartet wird.

Minimalistische Designs liegen immer mehr im Trend. Sie funktionieren auf einem Desktop-Rechner ebenso gut wie mobil auf einem Smartphone oder Tablet. Einige der größten Marken überhaupt sind zu einem minimalistischen Flat-Design gewechselt. Was für diese großen Marken funktioniert, kann auch für dein Unternehmen funktionieren.

Stets im Hinterkopf behalten:

Bedenken Sie stets, dass der Computer-Monitor nur einen Teil der Gesamterfahrung abbilden kann. So wollen Sie dem Besucher einer Website den besten Service innerhalb der kürzesten Zeit zur Verfügung stellen. Service fängt aber mit einer optimierten Website nur an. Sobald der Besucher schnell und intuitiv von der Startseite zum ausgefüllten und abgeschickten Kassenformular findet, ist die Website optimal aufgebaut.

Nach dem Verkauf geht die User-Experience noch weiter, Service und Support bieten ein bisher kaum ausgelotetes Potenzial zur Kundenbindung. In diesem Bereich können wir mit Sicherheit noch sehr viel von den Japanern lernen, die als Meister der Freundlichkeit und des Services gelten.

Fazit

Ein wirklich gutes UX-Design ist nicht mal eben umzusetzen. Eingehende Tests, Forschungen und ständiges Verbessern des Status quo sind erforderlich, um optimale Ergebnisse zu erreichen. Die harte Arbeit wird dann hoffentlich mit mehr Verkäufen belohnt werden. Denn: Je besser sich ein Kunde zu recht findet, desto eher wird er auch kaufen wollen.

Dieser Beitrag wurde im Januar 2018 veröffentlicht und zuletzt im Februar 2020 von Grund auf überarbeitet.