Dashboard-Design – Überlegungen und Best Practices

Hören Sie sich die Audioversion dieses Artikels an

Dashboards sind eine einzigartige und leistungsstarke Möglichkeit, datenbasierte Informationen mithilfe von Datenvisualisierungstechniken zu präsentieren, die relevante, umsetzbare Daten sowie Track-Statistiken und Key Performance Indicators (KPIs) anzeigen. Dashboards sollten diese Daten in einem schnellen, einfach zu scannenden Format darstellen, wobei die relevantesten Informationen auf einen Blick verständlich sind.

Der Begriff wurde aus dem traditionellen Automobil-Armaturenbrett geboren und hat sich weiterentwickelt, um in der digitalen Welt dieselbe Funktion zu erfüllen. Stephen Few hat es in seinem Buch am besten ausgedrückt:

Ein Dashboard ist eine visuelle Darstellung der wichtigsten Informationen, die zum Erreichen eines oder mehrerer Ziele erforderlich sind; konsolidiert und auf einem einzigen Bildschirm angeordnet, sodass die Informationen auf einen Blick überwacht werden können.

In diesem Artikel skizzieren wir strategische, analytische, operative und informative Beispiele sowie die Grundprinzipien, die im Mittelpunkt jedes erfolgreichen Dashboard-Designs stehen, unabhängig von seiner Art.

Der richtige Ansatz zur Datenvisualisierung ist ein Schlüsselmerkmal, um die Grundlage für ein erfolgreiches Dashboard zu legen. Datenvisualisierung ist die Präsentation von Daten über Grafiken und Bilder – ihr Hauptziel besteht darin, Entscheidungsträgern dabei zu helfen, Muster zu erkennen oder schwierige Konzepte zu verstehen, die in textbasierten Anwendungen möglicherweise unentdeckt bleiben.

In ihrem Buch Data Visualization stellen Noah Iliinsky und Julie Steele fest:

Der Zweck des Designers beim Entwerfen einer Datenvisualisierung besteht darin, ein Ergebnis zu erstellen, das vom Leser gut angenommen und leicht verstanden wird. Alle Designentscheidungen und speziellen Implementierungen müssen diesem Zweck dienen.

Hauptmerkmale großartiger Dashboards

Ein effektives Dashboard zeigt umsetzbare und nützliche Informationen auf einen Blick. Es vereinfacht die visuelle Darstellung komplexer Daten und hilft den Beteiligten, wichtige Erkenntnisse zu verstehen, zu analysieren und zu präsentieren.

Großartige Dashboards sind klar, intuitiv und anpassbar.

• Sie übermitteln Informationen schnell.
• Sie stellen Informationen klar und effizient dar.
• Sie zeigen Trends und Änderungen der Daten im Laufe der Zeit.
• Sie sind leicht anpassbar.
• Auf begrenztem Raum werden die wichtigsten Widgets und Datenbausteine ​​wirkungsvoll präsentiert.

Eine anfängliche Anpassung der visuellen Daten und Informationen an die wichtigsten Benutzeranforderungen wird dazu beitragen, die Benutzerfreundlichkeit zu verbessern und die Notwendigkeit unterschiedlicher Benutzerpersönlichkeiten zu beseitigen.

Großartige Dashboards bieten alles nur einen Klick entfernt.

• Alle wesentlichen Informationen sind sofort abrufbar.
• Daten werden priorisiert.
• Informationen werden übersichtlich in einer visuellen Hierarchie auf einem Bildschirm angezeigt.
• Das Design bietet einen kohärenten Überblick, der spärliche, klare Anfangsdaten mit zusätzlichen Möglichkeiten zum Drilldown für mehr enthält.
• Elemente (Diagramm, Tabelle, Formular) werden in einer minimierten Ansicht angezeigt, mit der Möglichkeit, mehr Details in einem modalen Fenster anzuzeigen oder zu einer Seite mit mehr Details zu gehen.
• Das Design verbessert die Benutzerfreundlichkeit mit Filtern, die es Benutzern ermöglichen, die Anzeige von Daten anzupassen, und filtert Inhalte mithilfe von Labels, Kategorien und KPIs.

Reduzierte Komplexität schafft Klarheit

In einer Welt, die mit Daten überflutet ist, ist die Bereitstellung klarer Informationen eine der schwierigsten Aufgaben. Es ist wichtig, nur die relevantesten Daten auf Dashboards zu präsentieren – je mehr Informationen wir anzeigen, desto schwieriger ist es für Benutzer, das zu finden, was sie brauchen.

Wenn zu viele Daten zur Auswahl stehen, sollten Designer nur die relevanteste Teilmenge anzeigen. Wir müssen irreführende und unklare Kennzahlen priorisieren und sorgfältig entfernen.

Effektive Dashboard-Designentscheidungen sollten geleitet werden von:

• die Projektziele
• die Art der Daten
• die Bedürfnisse der Nutzer

Beim Lesen einer Visualisierung (oder jeder anderen Art von Kommunikation) hat Ihr Leser nur eine begrenzte Menge an Intelligenz, um sich dem Problem zu widmen. Ein Teil dieser Intelligenz wird der Dekodierung der Visualisierung gewidmet sein; Die verbleibende Intelligenz kann dann verwendet werden, um die Nachricht zu verstehen (wenn der Leser noch nicht frustriert aufgegeben hat). Noah Iliinsky und Julie Steele (Datenvisualisierung)

Das Hauptziel eines Dashboards besteht darin, komplexe Informationen zugänglich und leicht verdaulich zu machen. Daher sollte die Schnittstelle, die die Daten darstellt, sauber und unkompliziert sein, um die kognitive Belastung und den Zeitaufwand der Benutzer für die Suche zu minimieren.

Die Informationsarchitektur sollte die wesentlichen Daten zuerst darstellen und gleichzeitig den Zugriff auf unterstützende oder sekundäre Metriken ermöglichen. Es sollte ein progressives Drill-Down-System konzipiert werden, das mit einer allgemeinen Übersicht beginnt und dann ins Detail geht – es erleichtert die Datenpriorisierung und schafft Klarheit.

Bestimmung von Dashboard-Zielen und Anzeige geeigneter Daten

Beim Entwerfen von Dashboards beginnen erfolgreiche Dashboard-Designer mit klar definierten Zielen, die sich auf das zu lösende Problem und die wichtigsten, umsetzbaren Erkenntnisse konzentrieren, die die Menschen aus den Daten ziehen müssen.

Gute Designziele fördern eine effiziente und präzise Ausführung. Der Einsatz des SMART-Rahmens für die Zielsetzung legt den Fokus auf spezifische , messbare , umsetzbare , realistische und zeitbasierte Ziele.

Einige wichtige Fragen, die Sie sich stellen sollten, wenn Sie Ziele für das Dashboard-Design festlegen:

• Wie viele Schritte müssen Benutzer gehen, um ein bestimmtes Ziel zu erreichen?
• Ist die Benutzeroberfläche intuitiv genug, damit der Benutzer sein Ziel selbst erreichen kann?
• Welche Informationen benötigt der Nutzer, um sein Ziel erfolgreich zu erreichen?

Um das Ziel eines bestimmten Dashboard-Designs zu bestimmen, definieren Sie es, indem Sie fragen: „Welches spezifische Problem soll dieses Design für den Benutzer lösen?“ Die Antwort gibt Aufschluss darüber, welche Metriken, Eigenschaften, Werte, Visualisierungen und Daten von Bedeutung sind.

Zielorientiertes Design konzentriert sich auf Lösungen für echte Probleme und ist die Grundlage für jedes großartige Dashboard-Design. Beginnen Sie mit einem klaren Verständnis der Geschäftsziele, berücksichtigen Sie die Benutzerziele und übermitteln Sie dann die wichtigsten Informationen, die kommuniziert werden müssen.

Kontext im Dashboard-Design

Eine der größten Herausforderungen beim Dashboard-Design besteht darin, mehrere Personas zu bedienen. Sobald jede Benutzerrolle definiert ist, ist es wichtig zu verstehen, wo sich ihre Anforderungen überschneiden und wo sie auseinandergehen.

Effektive Kommunikation ist das Grundprinzip jedes erfolgreichen Dashboard-Designs. Das Vorhersehen potenzieller Szenarien, in denen sich Benutzer möglicherweise befinden, trägt zu einem besseren Verständnis der Umstände des Benutzers bei.

Berücksichtigen Sie beim Entwerfen immer den Kontext der Benutzer – identifizieren Sie ihr technisches Wissen, ihre Vertrautheit mit dem System insgesamt, ihre Ziele und so weiter.

Stellen Sie unbedingt die folgenden Fragen, wenn Sie versuchen, das Benutzerverhalten und den Kontext zu ermitteln:

• Berücksichtigt das Design die Leserichtung des Besuchers?
• Erfordert die Interaktion mit dem Dashboard technisches Wissen?
• Schaffen es die Benutzer, die meisten Aktionen mit nur wenigen Klicks auszuführen?
• Stimmt das Design mit dem Benutzerkontext überein, indem Drilldown-Menüs erstellt werden; verwendet es suggestive Ikonographie und Farbpaletten?

Die Farbpalette, die beim Design eines Dashboards verwendet wird, sollte auch als Kontext betrachtet werden. Viele Business-to-Business-SaaS-Produkt-Dashboards sind in einer dunklen Benutzeroberfläche gestaltet, da sie mehrere Stunden am Stück verwendet werden.

Benutzeroberflächen mit dunklem Thema können dazu beitragen, die Belastung der Augen zu verringern und die visuelle Klarheit innerhalb der Benutzeroberfläche zu unterstützen. Dieser Ansatz erfordert jedoch eine sorgfältige Bewertung der Designrichtung – der Vorteile, Nachteile und potenziellen Fallstricke, wie in einem früheren Design-Blogartikel beschrieben: Dark UI Dos and Don’ts.

Besseres Dashboard-Design mit User Research

Die Benutzerforschung trägt dazu bei, eine Umgebung zu schaffen, in der den Benutzern relevante, klare und prägnante Daten präsentiert werden. Dies hilft ihnen, über den Inhalt und die Daten nachzudenken, nach denen sie suchen, und nicht, wie sie sie verwenden und darauf zugreifen können.

Einige Dashboards müssen funktionieren – oder mühelos an Benutzer mit unterschiedlichen Rollen angepasst werden können, die dasselbe grundlegende Dashboard betrachten. Benutzerforschung ist wichtig, weil sie dabei hilft, die Ziele, mentalen Modelle, den Umgebungskontext und die Schmerzpunkte des Benutzers zu bestimmen. Dies sind Faktoren, die das endgültige Dashboard-Design stark beeinflussen.

User Experience Designer, Forscher und Autor Mike Kuniavsky merkt an, dass es „der Prozess ist, die Auswirkungen von Design auf ein Publikum zu verstehen“.

Ein Designer muss die verschiedenen Benutzertypen definieren und verstehen, wo ihre Ziele gleich sind und wo sie sich unterscheiden. Welche Informationen sind für einen Benutzertyp im Vergleich zu einem anderen am verwertbarsten? Sie müssen überlegen, ob von einem Benutzertyp zum anderen ein unterschiedliches Layout erforderlich ist oder ob es eine Lösung für einen allgemeineren Anwendungsfall gibt.

Vor diesem Hintergrund ist es eine gute Idee, mit rudimentären Wireframes zu beginnen und zu Prototypen überzugehen, die während einer Benutzerforschungsphase mit tatsächlichen Benutzern getestet werden können. Aus einer kurzen User-Research-Phase mit nur fünf Benutzern können wirklich wertvolle Erkenntnisse gewonnen werden – und es wird später enorm viel Zeit sparen.

Progressive Offenlegung im Dashboard-Design

Progressive Offenlegung ist eine Technik, die verwendet wird, um die Aufmerksamkeit eines Benutzers aufrechtzuerhalten, indem Unordnung reduziert wird. Die Schaffung eines Systems der progressiven Offenlegung hilft bei der Schaffung einer benutzerzentrierten Umgebung, die dazu beiträgt, die Aufmerksamkeit der Benutzer zu priorisieren, Fehler zu vermeiden und Zeit zu sparen. Es ermöglicht Benutzern auch, sich auf die wichtigsten Funktionen zu konzentrieren, die für sie wichtig sind, und müssen nicht alle Funktionen durchgehen – einschließlich derjenigen, die sie nicht benötigen oder an denen sie nicht interessiert sind.

Die progressive Offenlegung ist eine Best Practice für das Dashboard-Design, die auch die Fehlerquoten erheblich reduzieren wird; Es wird die Effizienz verbessern und Benutzern helfen, ihr Verständnis von Dashboards zu verbessern, wenn ein System auf Funktionspriorisierung basiert.

Progressive Offenlegung verschiebt fortgeschrittene oder selten verwendete Funktionen auf einen sekundären Bildschirm, wodurch Anwendungen leichter erlernbar und weniger fehleranfällig werden. – Jakob Nielsen

Animation ist eine großartige Möglichkeit, eine Vielzahl von Benutzeranforderungen zu erfüllen und gleichzeitig mehrere Funktionen zu erfüllen. Es ist eine großartige Option, die verwendet werden kann, während Daten und Bilder geladen werden, und es ist eine fortschrittliche progressive Offenlegungslösung.

Animation ist der Prozess, bei dem die Illusion von Bewegung erzeugt wird; Es ist eine Dynamik, die ein Gefühl des Fortschritts und ständiges Feedback erzeugt, wodurch die Unsicherheit der Benutzer verringert und die wahrgenommene Leistung gesteigert wird.

Vorteile der Verwendung von progressiver Offenlegung in Dashboards:

• Verringerung der Unsicherheit und Angst der Benutzer (durch die Anzeige von Fortschrittszeichen können die Benutzer sicher sein, dass alles wie beabsichtigt funktioniert)
• Benutzern etwas zum Ansehen bieten (Teilanzeige von Daten), anstatt sie warten zu lassen
• Den Benutzern eine klare Erwartung der bevorstehenden Schritte geben und ein Verständnis dafür schaffen, wie Informationen hierarchisch dargestellt werden

Zu den möglichen Problemen bei der fortschreitenden Offenlegung und dem Laden von Daten gehören:

• Verwendung von Indikatoren und Angaben in unangemessener Weise. Kurze Ladezeiten und nutzlose Schritte sorgen für Ablenkung und wirken gegen Usability-Prinzipien.
• Eine Verzögerung beim Abrufen von Daten ohne einen klaren Fortschrittsindikator kann zu Benutzerunsicherheit und höheren Absprungraten führen.
• Die Verwendung statischer Fortschrittsindikatoren ist eine Lösung mit wenig Aussagekraft und bietet nicht genügend Informationen über den Fortschritt, was auch zu Verunsicherung der Benutzer und höheren Absprungraten führen kann.

Zusammenfassung

Dashboards sind eine leistungsstarke Möglichkeit, Daten und andere Informationen zu kommunizieren, insbesondere mit einem benutzerzentrierten, zielorientierten Design, das den Best Practices für das Dashboard-Design und der richtigen Datenvisualisierung folgt. Obwohl jedes Dashboard anders ist und seine eigenen Ziele, Anforderungen und Einschränkungen hat, hilft die Befolgung dieser Grundprinzipien bei der Erstellung herausragender Designs, unabhängig von den Besonderheiten:

• Verstehen Sie sich in erster Linie in Ihre Benutzertypen hinein und verstehen Sie deren Ziele.
• Vermitteln Sie den Benutzern eine klare Geschichte, indem Sie anregende Grafiken, Etiketten, progressive Offenlegungstechniken und Animationen verwenden.
• Machen Sie die komplexen Dinge einfach, indem Sie User-Research-Techniken anwenden.
• Zeigen Sie Daten und Informationen zum richtigen Zeitpunkt in einem Drill-Down-System an.
• Nutzen Sie die Datenvisualisierung, um Informationen sinnvoll auszudrücken.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft