Interview mit Denys Mishunov

„Bei schlechter Usability nützt alle Ästhetik nichts mehr.“
Kommentare

Wir haben mit Denys Mishunov über die Wissenschaften im Design gesprochen – und darüber, warum jeder Frontend-Entwickler sie kennen sollte. Was machen die großen Player wie Google oder Amazon offenbar richtig, und welchen Effekt hat das Design eigentlich auf den User?

PHP Magazin: Denys, du sagst, dass Frontend-Entwickler die Grundprinzipien von UI-Design kennen sollten. Woher rührt diese Überzeugung? Und was würde wohl im schlimmsten Fall passieren, wenn diese Designprinzipien nicht bekannt sind?

Denys Mishunov: Ich erzähle euch jetzt vielleicht ein schreckliches Geheimnis, aber es gibt in dem Sinne kein Worst-Case-Szenario, wenn ein Entwickler sich nicht mit Designfragen auseinandergesetzt hat. Es kommt nicht zu einer Katastrophe. Es ist sogar so, dass die meisten Frontend-Experten eine Ahnung davon haben, wie die Dinge aussehen sollten – aber es ist ihnen einfach egal. Aber vergleichen wir das mal mit einem Chirurgen, der eine Operation durchführen muss, um einen Patienten zu heilen – nur weiß er leider überhaupt nicht, wie der Patient anatomisch „funktioniert“ und wie es in ihm drinnen aussieht. Das wäre eine Katastrophe und würde vermutlich zum Tod des Patienten führen. Im Endeffekt sind Frontend-Entwickler, die sich nicht mit Design auskennen, genauso wie dieser Chirurg – nur, dass es in ihrem Fall eben nicht zum Tod führt, wenn sie sich nicht darum kümmern.

PM: Welche sind die wesentlichen Designprinzipien, die ein Entwickler trotzdem kennen sollte?

Mishunov: Design basiert auf einer ganzen Menge an Prinzipien. Wie Paul Rand [1] einmal sagte: „Design kann Kunst sein. Design kann Ästhetik sein. Design ist so einfach, deswegen ist es so kompliziert.“ Aber die meisten Prinzipien basieren auf anerkannten Wissenschaften, wie Geometrie, Psychologie und Neurowissenschaft. Und jede Wissenschaft ist für einen anderen Aspekt von Design verantwortlich: Ästhetik, Usability, User Experience, um nur einige zu nennen. Es ist unmöglich, alle Prinzipien in einer Antwort zusammenzufassen, aber ich würde die meisten auf folgende Kernelemente herunterdampfen: Proportion, Ähnlichkeit/Lage und Kontrast.

PM: Einige Kriterien sind also geometrischer Natur, andere neurologischer und wieder andere psychologischer. Ist es dadurch sogar möglich, das Userverhalten zu steuern oder zu beeinflussen?

Mishunov: Ja und nein. Wenn man verstanden hat, was man wie benutzen sollte, erhöhen sich die Chancen, das gesetzte Ziel zu erreichen, immens. Wenn man zum Beispiel weiß, wie man Farben kombinieren muss, wo man einen Button am sinnvollsten platziert und wovon der Button umgeben sein sollte, damit der User ihn anklickt, dann ist man schon nah am Ziel. Aber nicht jeder User ist gleich. Das menschliche Gehirn besteht aus 86 Milliarden Gehirnzellen, die auf viele verschiedene Arten zusammenarbeiten können. Die Entscheidungen, die ein End-User trifft, basieren zum Teil auf Instinkten, aber auch auf mentalen Einstellungen, die wiederum von kulturellen, religiösen und sozialen Einflüssen geprägt sind. Es gibt also nicht „die eine Lösung“, um jeden anzusprechen – leider! Aber eine solide Kenntnis darüber, wie verschiedene Aspekte von Design Menschen beeinflussen, erlaubt es, eine Basisvoraussage treffen zu können und zu verstehen, wie User eine Seite benutzen werden – wenigstens in den meisten Fällen.

PM: Welche Designstrategien haben auf lange Sicht betrachtet den meisten Einfluss? Es gibt da ja das Beispiel vom roten Button auf blauem Hintergrund, der häufig geklickt wird, weil dieser Farbkontrast im Gehirn eine Art Aversion auslöst – die User klicken also, um den Auslöser zu entfernen. Aber das funktioniert nur so und so oft, bis User es wirklich leid werden. Welche Methoden versprechen einen kontinuierlichen Erfolg?

Mishunov: Ok, das Beispiel mit dem roten Button auf blauem Hintergrund bringe ich auch häufig in meinen Talks und stelle immer wieder fest, dass es die Leute einschüchtert. Manche denken, ein roter Button auf blauem Hintergrund sei das Allheilmittel ihrer Probleme. Sie implementieren es und haben dann Angst, dass die User eigentlich hassen, was sie sehen. Denn anstatt zu klicken, könnten die User die Seite auch einfach verlassen. Das kommt daher, dass es eben nicht nur um Farben und Buttons geht. Es geht darum, zu verstehen, wie das menschliche Gehirn arbeitet: Der gleiche Button auf dem gleichen Hintergrund, aber an einer anderen Stelle platziert, wird ein anderes Ergebnis erzielen. Einen Button mit einem White-Space zu umgeben, wird mit ziemlicher Sicherheit bessere Resultate ergeben, als ein Button im Text. Aber selbst ein weiß umrandeter Button, der für den User einfach nicht auf Anhieb erkennbar ist – zum Beispiel am Ende einer Seite – wird letztlich einfach ignoriert. Meiner Meinung nach hat es höchste Priorität, Psychologie und speziell Gestaltpsychologie zu verstehen, wenn man Design machen oder analysieren will. Tricksereien wie der rote Button auf blauem Hintergrund sind eher Kunstflüge. Um ein paar Beispiele von Dingen zu nennen, die immer wichtig sein werden: Gruppenelemente, die einen Bezug zueinander haben, gehören dazu. Auch wenn es ziemlich offensichtlich klingen mag, manchmal ist das gar nicht so einfach zu bewerkstelligen. Es gibt verschiedene Arten der Gruppierung: von so einfachen Arten wie einer geteilten Hintergrundfarbe bis hin zu fortgeschrittenen und subtilen Arten wie White-Space-Manipulation. Patterns zu benutzen, ist auch so eine Sache. Wenn man zum Beispiel für einen wichtigen Button die Farbe Orange wählt, sollte man tiefer in der Seite nicht auf einmal auf Grün wechseln. Oder wenn es eine andere Aktion gibt, die ebenso wichtig ist, sollte der dazugehörige Button auch orange sein, um das zu unterstreichen. Man sollte Benutzer nicht verwirren. Abschließend: weniger Elemente benutzen. Auch wenn das menschliche Gehirn in seiner Struktur sehr komplex ist, sind die Kapazitäten der Informationsverarbeitung begrenzt. Um es mit den Worten des französischen Schriftstellers und Piloten Antoine de Saint-Exupéry [2] zu sagen: „Perfektion ist nicht dann erreicht, wenn man nichts mehr hinzufügen, sondern wenn man nichts mehr weglassen kann.“

PM: Können sich unterschiedliche Designkriterien gegenseitig ausschließen? Was passiert, wenn ich beispielsweise alle geometrischen Prinzipien beachtet habe, aber gegen alle Regeln der Gestaltpsychologie verstoße?

Mishunov: Gute Frage. Designprinzipien verschiedener Arten, wie im genannten Beispiel, sind schwer zu vergleichen. Hier vergleichen wir jetzt Geometrie, die für die Designästhetik verantwortlich ist, mit Psychologie, die für die Usability einer Seite sorgt. Man kann zwar ein ästhetisch perfektes Bild erzeugen, aber wenn die Usability nicht stimmt, werden die User es für gewöhnlich auch nicht benutzen – oder, wenn sie keine andere Wahl haben, nur unter Fluchen. Ich würde sagen, es gibt eine Hierarchie der Wissenschaften in Design: Geometrie sorgt für die Ästhetik. Sie ist wahrscheinlich die verzeihlichste Wissenschaft, was Design betrifft. Es passiert nichts schlimmes, wenn man sie nicht streng befolgt, außer, dass ein paar Ästhetiknerds vielleicht weinen, wenn sie deine Seite anschauen. Psychologie sorgt für die Usability, und hier sollte man schon mehr Bedacht an den Tag legen: Wenn dein Projekt schwer zu benutzen ist, rettet dich auch keine ausgefeilte Geometrie mehr. Neurowissenschaft ist die komplexeste Wissenschaft, was Design angeht. Hierbei geht es um die Grundlagen menschlicher Natur. Aus diesem Grund ist sie wahrscheinlich die einerseits mächtigste und andererseits unterschätzteste Wissenschaft im Design. Unterschätzt, was ihre Komplexität betrifft und mächtig, weil sie über die menschlichen Instinkte funktioniert, ohne dass der Mensch dies überhaupt richtig versteht.

PM: Lass uns über ein paar konkrete Beispiele sprechen. Google-Services, wie Mail oder Maps, erscheinen sehr einfach und flach – man könnte so weit gehen und sagen, das UI ist langweilig. Trotzdem sind sie sehr erfolgreich, was machen sie also richtig?

Mishunov: Ich denke, es gibt da einen ganz konkreten Schlüssel zum Erfolg: Die Services sind zuallererst einfach zu nutzen. Sie versuchen, nicht alles auf einmal zu leisten und User erwarten von einer Karte oder E-Mails auch keinen künstlerischen Touch. User haben viel mehr bestimmte Erwartungen an solche Applikationen und bekommen auch genau das. Nicht mehr, nicht weniger – genau das, was sie brauchen. Was das Design betrifft, gibt es aus meiner Sicht ein paar wesentliche Punkte: 1. Geschickter Einsatz von White-Space: Das ist aber nicht gleichzusetzen mit der Farbe Weiß; es bedeutet „Luft“ um die Schlüsselelemente, sodass sie hervorstechen. 2. Graduelle Einbeziehung des Users bedeutet etwa, dass man als User keine Aktionen angezeigt bekommt, die aktuell nicht verfügbar sind. Sehen wir uns als Beispiel die Maps-Applikation an: Wenn man nach einem Ort sucht, bekommt man Directions, Fotos und Getting around angezeigt. Klickt man nun irgendwo auf die Karte, verschwinden all diese Informationen in der Annahme, dass man gerade nicht daran interessiert ist. Sie sind aber nicht weg, denn wenn man wieder auf das Suchfeld wechselt, werden sie wieder angezeigt, in der Annahme, dass man sie nun brauchen könnte. Es gibt natürlich noch andere Gründe für den Erfolg dieser Services, aber die Hauptaspekte sind: Sie sind simpel und erfüllen die Erwartungen der User.

PM: Ein anderes Beispiel, für das sich wahrscheinlich jeder Onlineshop dieser Welt interessiert, ist der gelbe Amazon-Kauf-Button, der Berichten zufolge eine irrsinnig hohe Conversion Rate hat.

Mishunov: Ich denke, das bleibt ein Geheimnis von Amazon. Gibt es irgendwelche Zahlen, die diese „irrsinnig hohe Conversion Rate“ glaubhaft belegen? Ich bezweifle, dass irgendjemand außerhalb von Amazon die korrekten Zahlen hat. Wir können natürlich darüber spekulieren, aber das ist nicht sonderlich produktiv. Meiner Meinung nach könnte der vermeintliche Erfolg einerseits am Platz des Buttons liegen, am White-Space und letztlich am Userverhalten. Denn die User haben sich an den Button über Jahre gewöhnt, und das Beste was Amazon macht, ist ihn über Jahre nicht oder nur minimal zu ändern. Die Leute erwarten diesen Button, und sie bekommen ihn. Um es einmal mehr zu sagen: Amazon erfüllt einfach die Usererwartungen.

PM: Kann man den Erfolg eines Designs messen? Gibt es Testing-Methoden, wie User auf ein Design reagieren?

Mishunov: Sicher. Es gibt eine ganze Reihe Methoden, um Design zu testen: von einfachen Heatmaps und Analytics bis hin zu komplexen Live-User-Tests. Es gibt auch viele Quellen, in denen verschiedene Testing-Methoden beschrieben werden. Dabei können spezifische Aspekte einer Website getestet werden oder eine Applikation im Allgemeinen. Designänderungen abzuschätzen ist vor allem beim Redesign einer Website wichtig. Ich persönlich mag Heatmaps als einfache und kostengünstige Lösung. Es gab einen Fall in meinem bisherigen Berufsleben, in dem haben uns Heatmaps ein Problem aufgezeigt, und wir konnten es ziemlich schnell beheben: Auf einer Seite gab es zwei Formulare – eins links, eins rechts. Optisch sahen sie gleich aus: Zwei Felder und ein Button. Aber eins loggte dich in den Customer Service (CS Form) ein, das andere in die Mail Inbox (Mail Form). Als wir also die Heatmaps analysierten, merkten wir, dass nur die Hälfte der User, die das erste Feld im CS Form anklickten, auch weiter zum zweiten Feld wechselten. Im Mail Form klickten sie indes beide Felder relativ gleich häufig an. So kamen wir darauf, dass die Hälfte der Leute, die in das CS-Form-Feld klickten, eigentlich das Mail Form benutzen wollten. Also mussten wir die Unterschiede zwischen den beiden Forms deutlicher machen. Und da das Mail Form viel häufiger benutzt wurde, entschlossen wir uns dann noch, das CS Form in ein Default-Drop-down zu legen, um die User gar nicht erst zu verwirren. Diese Schritte stellten sich als richtig heraus, wie wir später in den Analytics sehen konnten. Dieser Prozess, nötige Veränderungen am Design zu finden und abzuschätzen, endet niemals – man erreicht nie einen Status von Exzellenz, sondern hat immer Raum für weitere Verbesserungen.

PM: Für all jene, die gerne Out-of-the-Box-Lösungen nutzen, gibt es Frameworks wie zum Beispiel Bootstrap. Aber das hat einen Nachteil: Damit sieht meine Website wahrscheinlich aus wie tausend andere auch. Wie viel Aufwand ist es, Out-of-the-Box-Lösungen mit individuellen Designfeatures zu kombinieren bzw. ist es sinnvoll?

Mishunov: In der Tat: Frameworks wie Bootstrap machen vielen Leuten das Leben einfacher. Viele treffen eine Wahl zwischen: a. der Nutzung eines solchen Frameworks verbunden mit der Aufgabe ihrer Identität oder b. einem persönlichen, visuellen Profil, das wiederum mit hohem Zeitaufwand verbunden ist. Zuerst muss ich sagen, dass ein Framework nie eine blinde, unverantwortliche Nutzung bedeuten sollte. Meistens braucht man gar nicht das ganze Tool-Set eines Frameworks, sondern nur das eine oder andere Modul. Ich kenne Leute, die Bootstrap, jQuery und andere Frameworks zu ihrem Projekt hinzufügen, ohne überhaupt zu wissen, ob sie sie brauchen werden. Wenn ich ein Projekt starte, mache ich das mit einer grundlegenden Tree-Struktur – für gewöhnlich eine leichtgewichtige Version von HTML5-Boilerplate, bei der ich alle Dinge, die ich nicht sofort brauche, entferne. Dann analysiere ich das Design und halte Ausschau nach visuellen Patterns, die ich im Styling verwenden kann. Gleichzeitig identifiziere ich mögliche JavaScript-Lösungen, die gebraucht werden (wie Sliders, Drop-down-Menüs und so weiter). Während ich am Design arbeite, frage ich mich, ob ich eigene Styles schreiben sollte und JavaScript für das ein oder andere Modul, oder ob ich besser damit beraten bin, ein Modul aus einem Framework zu nehmen. Ich mag, dass alle Module in Bootstrap in LESS geschrieben sind. Ich kann einzelne Module nehmen, die ich brauche und muss keine Zeit damit verschwenden, sie von Grund auf zu stylen. Ich kann also dieses einzelne Modul nutzen, ohne mit der ganzen Komplexität des Frameworks konfrontiert zu sein. Von daher würde ich sagen, es liegt am Entwickler, wie komplex die Aufgabe wird, und ob er wirklich das komplette Framework in seinem Sourcecode haben will. Aber manchmal ist es natürlich finanziell ratsam, das ein oder andere fertige Modul zu benutzen.

PM: Denys, wir danken dir für das Interview.

International PHP Conference 2014 Spring Edition

Diese Themen – und noch viele mehr – werden auf der International PHP Conference 2014 in Berlin Beachtung finden. Alle weiteren Informationen zum Programm und den Speakern finden Sie unter phpconference.com.

Aufmacherbild: abstract background for design von Shutterstock / Urheberrecht:Yelena Panyukova

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -