Die Bedeutung von UI-Dichte und wie man sie gestaltet
(matthewstrom.com)Die Dichte von Interfaces nimmt ab
- Vergleicht man heutige Websites und Anwendungen mit denen der 2000er Jahre, lässt sich die Tendenz kaum übersehen, dass sich Software stärker ausbreitet.
- Was ist UI-Dichte?
- UI-Dichte ist nicht das Aussehen eines Interfaces in einem bestimmten Moment.
- Sie hängt mit der Menge an Informationen zusammen, die ein Interface über mehrere Momente hinweg bereitstellt.
- Es geht darum, wie Designentscheidungen diese Momente miteinander verbinden und wie sie mit dem Wert zusammenhängen, den die Software liefert.
Visuelle Dichte (Visual density)
- Bei Dichte denkt man zuerst an das, was man sieht.
- Visuelle Dichte bedeutet, wie viel man in einem gegebenen Raum sehen kann.
- Ein visuell dichtes Software-Interface zeigt viele Elemente auf dem Bildschirm an.
- Ein visuell wenig dichtes Interface zeigt wenige Elemente auf dem Bildschirm an.
- Beispiel: Bloomberg Terminal
- Das Bloomberg Terminal ist ein typisches Beispiel für visuelle Dichte.
- Auf einem einzelnen Bildschirm werden Sparklines wichtiger Marktindizes, detaillierte Handelsvolumen-Verteilungen, Tabellen mit Dutzenden von Zeilen und Spalten, aktuelle News-Headlines, Tastenkürzel und Wegweiser für schnelle Aktionen angezeigt.
- Beispiel: Craigslist und McMaster-Carr
- Craigslist ist visuell dicht, mit Hunderten einfacher Links sowie Such- und Filteroberflächen.
- Die Website von McMaster-Carr teilt ähnliche Designelemente und listet auf kleinem Raum viele Details zu Produktvarianten auf.
- Intuitive Einschätzung von Dichte
- Eine Meinung über die Dichte solcher Websites bildet sich schon in wenigen Sekunden.
- Diese Einschätzung entsteht schnell und intuitiv im Unterbewusstsein.
- Solche schnellen Urteile können jedoch verzerrt und unzuverlässig sein.
- Beispielbilder für visuelle Dichte
- Zwei Rechteck-Beispiele:
- links: viele zufällig angeordnete Punkte
- rechts: dieselbe Anzahl von Punkten, sauber in Zeilen und Spalten angeordnet
- Die meisten Menschen empfinden das rechte Bild als dichter.
- Ein weiteres Beispielbild:
- links: viele Punkte, sauber in Zeilen und Spalten angeordnet
- rechts: dieselbe Anzahl von Punkten, sauber in zwei Gruppen angeordnet
- Selbst bei gleicher Punktzahl verändert die Gruppierung unsere Wahrnehmung von Dichte.
- Zwei Rechteck-Beispiele:
- Die Unschärfe visueller Dichte
- Im Design kann man nicht vollständig objektiv sein.
- Um jedoch sinnvoll über Dichte zu sprechen, sollten wir eine konsistente, bedeutungsvolle und nützliche Definition anstreben.
Informationsdichte (Information density)
- Edward Tufte behandelt in The Visual Display of Quantitative Information das Design von Diagrammen und Grafiken.
Jede Tinte in einer Grafik sollte einen Grund haben, und dieser Grund sollte darin bestehen, neue Informationen zu vermitteln.
- Data-ink
- Data-ink bezeichnet den nützlichen Teil einer gegebenen Visualisierung.
- Visuelle Elemente ohne Datenbezug sollten entfernt werden.
- Data-ink ist nicht dasselbe wie der Platz, den ein Diagramm einnimmt. Es geht um Informationsdichte.
- Berechnung der Informationsdichte
- Informationsdichte lässt sich berechnen, indem man die Menge an Data-ink in einem Diagramm durch die gesamte Tintenmenge teilt, die zum Drucken des Diagramms erforderlich ist.
- Die Definition von Data-ink kann subjektiv sein, aber entscheidend ist, das Verhältnis möglichst nahe an 1 zu bringen.
- Möglichkeiten, das Verhältnis zu erhöhen:
- mehr Data-ink hinzufügen: zusätzliche nützliche Daten bereitstellen
- Nicht-Daten-Tinte entfernen: grafische Teile löschen, die keine Daten vermitteln
- Beispiele
- Ein Beispiel für eine Grafik mit viel überflüssiger Tinte und ein verbessertes Beispiel, das mit weniger Tinte viele Informationen vermittelt.
- Informationsdichte hat eine Obergrenze; man kann zu viel Tinte entfernen oder zu viele Informationen hinzufügen.
- Auch das Publikum ist wichtig: Fortgeschrittene Nutzer bevorzugen möglicherweise hohe Dichte, Grundschüler eher niedrige Dichte.
- Beziehung zwischen Informationsdichte und visueller Dichte
- Je höher die Informationsdichte, desto eher wirkt etwas auch visuell dicht.
- Beispiel: E.J. Mareys Visualisierung eines Zugfahrplans von 1885. Ankunfts- und Abfahrtszeiten werden in einem kleinen, dichten Raum dargestellt.
- Tufte plädiert für Datendichte und dafür, Daten in vernünftigem Maß zu maximieren.
- Shrink Principle
- Grafiken lassen sich stark verkleinern.
- Informationsdichte ist für Charts und Grafiken nützlich.
- Lässt sie sich auch auf Interfaces anwenden?
- Anwendung von Informationsdichte auf Interfaces
- Information lässt sich auf den Bildschirm übertragen.
- Jeder Teil eines Interfaces sollte möglichst viele Informationen zeigen.
- Es ist verlockend, Tinte als Pixel zu verstehen, aber Interfaces brauchen Trennlinien, strukturelle Elemente und Wegweiser, die helfen, Beziehungen zwischen Elementen zu verstehen.
- Es besteht die Versuchung, nach dem Shrink Principle jeden Leerraum zu entfernen.
- Doch manche Leerräume tragen genauso viel Bedeutung wie visuelle Elemente. Auch die Rolle von Schatten, Verläufen und farblichen Hervorhebungen muss berücksichtigt werden.
- Informationsdichte ist ein nützliches Konzept, aber nur ein Teil des Gesamtbilds.
- Wir müssen Wege suchen, alle Designentscheidungen eines Interfaces objektiver und quantitativer zu verstehen.
Design-Dichte (Design Density)
- Die erste Herausforderung bei der Definition von Dichte aus Sicht von Designentscheidungen besteht darin, überhaupt zu bestimmen, was eine Entscheidung ist.
- Designentscheidungen verstehen
- In UI, UX und Produktdesign treffen wir bewusst oder unbewusst viele Entscheidungen, um Informationen zu vermitteln.
- Wir müssen fragen, warum bestimmte Entscheidungen Bedeutung vermitteln, welche nur ästhetisch sind und welche tatsächlich wichtig sind.
- Gestaltprinzipien
- Sie beschreiben, wie Menschen Formen und Muster verstehen, und wurden von deutschen Psychologen des 20. Jahrhunderts untersucht.
- Der Begriff Gestalt bedeutet „Form“.
- In dieser Forschung wurden einige grundlegende Designgesetze entdeckt:
- Nähe (Proximity): Dinge, die nah beieinander liegen, werden als Gruppe wahrgenommen.
- Ähnlichkeit (Similarity): Objekte mit ähnlicher Form, Größe, Farbe usw. wirken miteinander verbunden.
- Geschlossenheit (Closure): Wir ergänzen Lücken in einem Design, um eine vollständige Form zu erkennen.
- Symmetrie (Symmetry): Symmetrische Formen werden um einen Mittelpunkt herum gruppiert.
- Gemeinsames Schicksal (Common Fate): Objekte, die sich auf dieselbe Weise bewegen, werden zusammen gruppiert.
- Kontinuität (Continuity): Sich überlappende Objekte werden als getrennt wahrgenommen.
- Frühere Erfahrung (Past Experience): Vertraute Formen und Muster werden auch in ungewohnten Situationen erkannt.
- Figur-Grund-Beziehung (Figure-Ground Relationship): In 2D-Bildern unterscheiden wir Vordergrund- und Hintergrundelemente.
- Einfluss der Gestaltprinzipien auf UI-Design
- Dank des Prinzips der Ähnlichkeit steht Text in derselben Größe, Schrift und Farbe für denselben Zweck.
- Das Prinzip der Nähe zeigt, dass eine Headline ein Diagramm erklärt, wenn sie nahe daran steht.
- Dank früherer Erfahrung und der Figur-Grund-Beziehung kann ein Nutzer sofort verstehen, wie ein Toggle-Switch funktioniert.
- Das Konzept der Design-Dichte
- Statt sich auf Pixel zu konzentrieren, kann man mit Gestaltprinzipien über Designentscheidungen nachdenken, die absichtlich Bedeutung vermitteln.
- So wie Tuftes Data-ink-Verhältnis bei Diagrammen notwendige Tinte mit der gesamten Tinte vergleicht, vergleicht Design-Dichte notwendige Designentscheidungen mit allen Entscheidungen.
- Das ist subjektiv, aber in Benutzeroberflächen ist es nützlicher, Designentscheidungen zu zählen als Daten oder Tinte.
- Grenzen der Design-Dichte
- Benutzeroberflächen existieren, um Aufgaben zu erledigen, Freude zu bereiten, Zeit zu vertreiben, Verständnis zu schaffen oder persönliche Verbindungen zu fördern.
- Man muss alle Handlungen einbeziehen, die Nutzer auf ihrer Reise ausführen.
- Dichte muss über Komponenten, Layouts und Screens hinaus alle Handlungen berücksichtigen, die Nutzer in Raum und Zeit ausführen.
Zeitliche Dichte
- Die Menge an Aufgaben, die ein Nutzer in einer bestimmten Zeit erledigen kann, bestimmt die zeitliche Dichte.
- Ladezeit ist der größte Faktor der zeitlichen Dichte. Je schneller ein Interface reagiert und neue Seiten oder Screens lädt, desto dichter ist die UI.
- Das Bloomberg Terminal lädt Daten nahezu sofort und hat daher eine sehr hohe zeitliche Dichte.
- Wie man zeitliche Dichte erhöht
- Zeitliche Dichte lässt sich erhöhen, indem Ladezeiten so weit wie möglich reduziert werden.
- Allerdings lassen sich nicht alle Ladezeiten verringern. Zum Beispiel kann man die Internetverbindung oder CPU-Geschwindigkeit eines Nutzers nicht ändern.
- Manche Aufgaben wie Datei-Uploads, das Warten auf Antworten des Kundensupports oder Zahlungsabwicklung hängen von komplexen Systemen und unvorhersehbaren Variablen ab.
- Wie man die Zeitwahrnehmung verändert
- Unter 100 Millisekunden: Liegt die Zeit zwischen zwei Aktionen unter 100 Millisekunden, wirken sie so, als fänden sie gleichzeitig statt. In diesem Fall kann Animation die App sogar langsamer erscheinen lassen.
- Zwischen 100 Millisekunden und 1 Sekunde: Die Verbindung zwischen zwei Aktionen beginnt abzureißen. Animationen und Übergänge können diese Wahrnehmungslücke überbrücken.
- Zwischen 1 Sekunde und 10 Sekunden: Animationen allein reichen nicht aus. Innerhalb von 10 Sekunden steigt die Wahrscheinlichkeit, dass Nutzer die Seite verlassen. In diesem Fall sollte ein unbestimmter Ladeindikator zeigen, dass das System normal arbeitet.
- Zwischen 10 Sekunden und 1 Minute: Ein unbestimmter Ladeindikator wirkt nach mehr als 10 Sekunden zunehmend statisch. In diesem Fall sollte ein eindeutiger Ladeindikator, etwa ein Fortschrittsbalken, die verbleibende Zeit klar anzeigen.
- Mehr als 1 Minute: Nutzer sollten die Seite verlassen oder andere Aufgaben erledigen können. Mehr als 1 Minute Untätigkeit kann frustrierend sein. Bei langen Prozessen steigt zudem die Wahrscheinlichkeit von Fehlern.
- Dichte in Zeit und Raum
- Die Dichte einer UI ist nur ein Mittel zum Zweck. Der Wert einer UI liegt nicht in ihrem Erscheinungsbild, sondern in den Ergebnissen, die sich mit ihr erzielen lassen.
- Dichte bedeutet, mit minimaler Zeit, minimalem Raum, minimalen Pixeln und minimaler Tinte maximalen Wert zu liefern.
Wertdichte (Density in Value)
- Wertdichte hängt mit dem Wert der Ergebnisse zusammen, die Nutzer erhalten.
- Beispiel: Es ist sinnvoll, ein langes Formular in kleine Abschnitte aufzuteilen und als Wizard-Interface zu gestalten. Ein teilweise ausgefülltes Formular hat keinen Wert.
- Alle Fragen auf eine Seite zu setzen mag visuell dicht wirken, aber wenn das Ausfüllen lange dauert, senden viele Nutzer es nicht ab.
- Formularbeispiel
- Ein Formular, das in mehrere Teile aufgeteilt ist und Fehler sowie Lösungsmöglichkeiten klar anzeigt.
- Weniger Fehler und ein vollständiges Ausfüllen können im Design mehr Platz und mehr Zeit erfordern.
- Wenn das Opfer an visueller und zeitlicher Dichte die Ergebnisse wertvoller macht, steigt jedoch die gesamte Wertdichte.
- Erhöhung der Wertdichte
- Visuelle und zeitliche Dichte lassen sich erhöhen, indem man Formulare kleiner macht, schneller lädt und Fehler reduziert.
- Solange dadurch weder der Wert für Nutzer noch der geschäftliche Wert sinkt, steigt die Gesamtdichte.
- Im Sinne von Tufte sollten wir versuchen, die Wertdichte so weit wie möglich zu maximieren.
- Optimierungsproblem
- Das Lösen eines Optimierungsproblems kann paradoxe Ergebnisse hervorbringen.
- Im frühen Internet erhöhten Unternehmen wie Craigslist die Wertdichte, indem sie Informationen bündelten und als Seitenlinks darstellten.
- Yahoo und Altavista machten Informationen durchsuchbar, legten aber weiterhin großen Wert auf Aggregation.
- Google wählte einen anderen Ansatz und nutzte die Informationen aus den Linkketten des Internets über ein Suchfeld.
- Die Informationen hatten sich selbst aggregiert, und Nutzer brauchten nur einen einzigen Texteingabebereich, um auf das gesamte Web zuzugreifen.
- Die Ansätze von Google und Yahoo
- Vergleicht man Googles frühe Startseite von 2001 mit der von 2024, ist die visuelle Dichte gering, die Wertdichte aber sehr hoch.
- Ergebnis: Googles Wert stieg von 23 Mrd. US-Dollar im Jahr 2004 auf heute mehr als 2 Bio. US-Dollar. Yahoo fiel von 125 Mrd. US-Dollar im Jahr 2000 auf heute 4,8 Mrd. US-Dollar.
- Oft ist Wertdichte wichtiger als visuelle Dichte.
- Wichtig ist, Design und Funktion so zu optimieren, dass der Wert für Nutzer maximiert wird.
Fazit
- Design unter Berücksichtigung von UI-Dichte muss über die visuellen Aspekte eines Interfaces hinausgehen.
- Es umfasst alle expliziten und impliziten Designentscheidungen, die wir treffen, und alle Informationen, die wir auf dem Bildschirm zeigen.
- Es muss alle Handlungen und die gesamte Zeit einbeziehen, die Nutzer aufwenden, um aus der Software Wert zu ziehen.
- Konkrete Definition von UI-Dichte
- UI-Dichte = der Wert, den Nutzer aus dem Interface erhalten / die Zeit und der Raum, die das Interface beansprucht
- Wichtige Elemente
- Geschwindigkeit
- Usability
- Konsistenz
- Vorhersagbarkeit
- Informationsreichtum
- Funktionalität
- Warum manche Interfaces erfolgreich sind: Berücksichtigt man all diese Faktoren, lässt sich verstehen, warum manche Interfaces erfolgreich sind und andere scheitern.
- Designziel
- Durch dichtebewusstes Design sollten wir dafür sorgen, dass Menschen mehr Wert aus der Software ziehen, die wir bauen.
1 Kommentare
Hacker-News-Kommentare
Zusammenfassung ausgewählter Hacker-News-Kommentare
Warum die physische Form einer Restaurantkarte besser ist als das Menü einer mobilen Website
Die Bedeutung von Daten, bei denen Funktion wichtiger ist als Form
Das Konzept der zeitlichen Dichte
Warum mobile Interfaces so sparsam gestaltet sind
Kritik an der zunehmenden Leere in UIs
Probleme komplexer UIs und von Trends
Vorteile traditioneller UIs
Unausgewogene Informationsdichte
Probleme mobiler UIs
Ein Beispiel für eine UI mit zu geringer Dichte