So planen Sie strategisch für datenlastiges UX-Design

Veröffentlicht: 2023-02-12

Big Data boomt. Die Harmonisierung komplexer Datenanforderungen mit einer einfachen, sauberen und nützlichen Benutzeroberfläche ist heute jedoch eine Prüfung für jeden UX-Designer. Oft steht das Design (das Werkzeug zur Übermittlung einer Botschaft) der Kommunikation (der Botschaft oder Bedeutung, die im Hochland der Rohdaten verborgen ist) im Weg.

Das Abziehen von Informationen vereinfacht und bereinigt die Benutzeroberfläche. Aber bei datengesteuerten Anwendungen bedeuten weniger Daten oft ein weniger praktisches und nützliches Dashboard.

Wenn Sie jedoch alle kontextbezogenen Daten behalten, die Sie können, ergibt sich eine nicht funktionsfähige App.

Also, wie trifft man die richtige Balance?

Wie eine Anwendung Daten präsentiert, spielt eine große Rolle, und hier kommen UX-Designer ins Spiel.

In diesem Beitrag werde ich Tipps und Tricks teilen, die UX-Designer verwenden können, um eine einfache und klare Datenvisualisierung zu entwickeln, selbst wenn Big Data (Daten in Gigabytes) für App-Dashboards, Webseiten usw. verwendet werden.

Ich lasse die besten Sprachen für das Entwerfen von Big-Data-Anwendungen jedoch vorerst aus diesem Gespräch heraus.

So entwerfen Sie für datenlastige UX:

Inhaltsverzeichnis
1. Wie man fantastische Big-Data-Anwendungen entwickelt, die Kunden lieben
1.1. 1. Verwenden Sie Benutzerpersönlichkeiten, um nützliche datengesteuerte Dashboards zu entwerfen
1.2. 2. Benutzerfreundlichkeit über Stil: Halten Sie es einfach, klar und freundlich
1.3. 3. Kombinieren Sie Material und flaches Design – Funktion über Form
1.4. 4. Zugänglichkeit über Ästhetik
1.5. 5. Lassen Sie Raum für Verbesserungen
2. Schlüsselmitnahmen

Wie man großartige Big-Data-Anwendungen entwickelt, die Kunden lieben

Vielleicht ist der beste Ausgangspunkt, um zu fragen, wer Ihr Kunde ist.

Mann und Frau am Tisch mit Laptop und Notizen, während sie die Benutzererfahrung auf einer datenintensiven Website planen

Vielleicht haben Sie ein umwerfend schönes Dashboard erstellt und es pünktlich an den Kunden geliefert, nur damit dieser ihn fragt: „Also, wo kann ich X, Y und Z tun?“

Autsch! Das muss wehgetan haben.


1. Verwenden Sie Benutzerpersönlichkeiten, um nützliche datengesteuerte Dashboards zu entwerfen

So sehr sich künstliche Intelligenz und maschinelles Lernen weiter verbessern werden, die meisten Unternehmen werden immer noch menschliche Eingriffe benötigen, um nicht kategorisierte Daten zu verarbeiten.

Und die besten UX-Designer entwickeln Produkte, die helfen, ein Problem für die Menschen zu lösen, die datengesteuerte Anwendungen verwenden werden.

Wie machen Sie das?

Erik Klimcz, Senior Design Leader bei Uber and Advanced Technologies Group, gab einige umsetzbare Tipps zu Medium. Er schlägt vor, dass UX-Designer für jedes Projekt zunächst Benutzer oder Personas identifizieren und dann definieren müssen.

Da datengesteuerte Anwendungen in der Regel von mehreren Personas innerhalb oder außerhalb einer Organisation verwendet werden, müssen Sie diese Personas identifizieren, damit Sie Ihre Informationsarchitektur-Drahtmodelle und Aufgaben so organisieren können, dass sie den Anforderungen aller gerecht werden.

Das würde das Design für den Endnutzer, Ihre Zielgruppe – Ihren Hauptkunden – nützlich machen.

Hier ist eine Illustration:

Beispieldarstellung der Planung verschiedener User Personas
Jede Persona hat unterschiedliche Interessen an den Daten und beachten Sie, wie das Design die Interessen jedes Benutzers berücksichtigt.

Das Verständnis Ihrer Benutzer/Personas kann Ihnen helfen, die Funktionalität der Anwendung an ihre Bedürfnisse anzupassen – was das ultimative Ziel ist.

Außerdem können Sie bestimmen, welche Art von Datenvisualisierungstools für welchen Kunden verwendet werden sollen, indem Sie wichtige Fragen beantworten wie:

  • Wer wird mit den Daten (User Personas) umgehen? Ist es zum Beispiel für Kunden oder interne Datenanalysatoren konzipiert?
  • Wofür benötigen diese Benutzer die Daten, um sie als Nächstes zu tun?

Zum Beispiel:

Sie können eine Art Infografik entwerfen, die Informationen basierend auf den persönlichen Eingaben eines Benutzers enthält.

Diese Art von datengesteuertem App-Design wäre praktisch für Situationen, in denen der Benutzer Informationen hochladen muss oder kann, sobald er sie erhält, oder wenn er sie zurückziehen muss, um weitere Maßnahmen zu ergreifen.

Ein Beispiel ist der Kundendienst, wo ein Kundendienstmitarbeiter den Namen oder die Nummer eines Kunden eingeben kann, um weitere Informationen über ihn zu erhalten.

Sie finden diese Art von interaktivem Datenvisualisierungstool in Aktion bei Mahfix for You vs John Paulson. Sie können eine Zahl eingeben und dann Informationen basierend auf Ihrer Eingabe zurückmelden. Es ist ziemlich glatt!


2. Benutzerfreundlichkeit über Stil: Halten Sie es einfach, klar und freundlich

Mann und Frau planen Benutzerklarheit vor einer Wand voller bunter Haftnotizen

Es ist leicht, sich mit dem Design einer attraktiven UX zu beschäftigen, die Sie fesselt, aber ehrlich gesagt für Ihren Kunden unpraktisch ist.

Um nutzbar zu sein, muss eine Schnittstelle übersichtlich sein. „Klarheit ist Job Nr. 1“, um es mit den Worten des produktiven UX-Designers Joshua Porter zu sagen.

Tatsächlich hat Joshua Porter einen einfallsreichen Beitrag über die Prinzipien des Benutzeroberflächendesigns geschrieben, die immer noch beim Entwerfen von Big-Data-Anwendungen gelten.

Um die Benutzerfreundlichkeit zu verdeutlichen: Sollten Designer benutzerdefiniertes UX-Design verwenden oder nur bewährte Visualisierungstools wie Liniendiagramme verwenden?

Das hängt von Ihren Kunden-/Benutzerfällen ab.

Neuere, benutzerdefinierte Datenvisualisierungstools tauchen immer wieder auf: Infografiken (sowohl statisch als auch interaktiv), farbcodierte Blöcke, Animationen, 3D-Visualisierung und so weiter.

Es gibt jedoch nur vier Datenpräsentationstools, die Sie jemals benötigen sollten:

  • Liniendiagramme zur Veranschaulichung kontinuierlicher Daten, z. B. wie sich etwas im Laufe der Zeit geändert hat
  • Tabellen zum Anzeigen von zusammenfassenden Informationen
  • Histogramme zur Darstellung der Verteilung von Variablen und zur grafischen Darstellung quantitativer Daten in Intervallen
  • Balkendiagramme zum Anzeigen diskreter Daten, zum Vergleichen von Variablen und zum Plotten kategorialer Daten

Sie können jedoch über die reine Benutzerfreundlichkeit hinausgehen, um eine attraktive, Daten verarbeitende Benutzeroberfläche zu erstellen.

Hier ist eine Möglichkeit, dies zu tun:

Beispiel für eine hochwertige Datenvisualisierung mit mehreren Diagrammstilen
Tellius leistet hier hervorragende Arbeit bei der Kombination verschiedener Datenpräsentationstools – und sie lassen es auch gut aussehen

Noch besser, das Design für datenlastige Schnittstellen könnte eine einfachere Wendung nehmen:

Beispiel für eine noch einfachere Möglichkeit, Daten visuell darzustellen
Diese Zielverfolgungs-UI von Stanislav Hristov für DtailStudio ist ein großartiges Beispiel dafür, wie wirkungsvoll einfaches Design sein kann.

Die Kombination von Text und Diagrammen ist eine der besten Möglichkeiten, um die Übersichtlichkeit beim Entwerfen für eine datengesteuerte UX zu verbessern. Benutzer können die visuellen Elemente konsumieren und den Text lesen, um die Klarheit zu verbessern. Dieser Ansatz funktioniert jedoch möglicherweise nicht in allen Situationen – insbesondere bei riesigen Mengen nicht kategorisierter Daten.


3. Kombinieren Sie Material und flaches Design – Funktion über Form

Bei diesem Designkonzept geht es mehr um Usability und Minimalismus als um ein, entgegen der landläufigen Meinung, langweiliges zweidimensionales Design. Aber Flat Design ist weder langweilig noch langweilig. Sie können helle Farben, saubere Kanten und offene Flächen verwenden.

Die Verwendung von Flat- und Materialdesign wird besonders für mobile Anwendungen, Websites und Desktop-Browser empfohlen. Da das Design minimalistisch ist und nicht viele zusätzliche Daten hortet (wie in früheren Designs), lädt es schnell und kann, wenn es darauf ausgelegt ist, das Engagement zu steigern, dazu beitragen, dass Besucher die Seite länger sehen.

Dies ist großartig für datengesteuerte Websites oder mobile Websites, die von den mobilfreundlichen, schnell ladenden und geringeren Absprungraten (SEO- und Ranking-Vorteile) profitieren könnten, die Suchmaschinenalgorithmen ständig im Internet scannen.


4. Zugänglichkeit über Ästhetik

Es geht nicht nur darum, schwere, kontextbezogene Daten flüssig und ansprechend zu gestalten (obwohl das sehr hilfreich ist). Sie möchten auch Datenpräsentationen entwerfen, die es dem Endbenutzer leicht machen:

  • Verschaffen Sie sich ein klares Gefühl dafür, welche Daten am wichtigsten sind
  • Verstehen Sie den logischen Fluss der präsentierten Daten
  • Verstehen Sie, was die Daten bedeuten
  • Verstehe, was der nächste Schritt ist

Wie wäre es, wenn wir jedes dieser Elemente aufschlüsseln?

Benutzer sollten wissen, welche Daten die wichtigsten sind

Ein wichtiges UX-Designprinzip besteht darin, eine Informationshierarchie zu beobachten und umzusetzen – in diesem Fall die visuelle Hierarchie.

Mit anderen Worten, ein Design, das die richtigen Metriken priorisiert.

Sie wollen zunächst die wichtigsten Daten organisieren, ordnen und priorisieren und später um eventuelle Zusatzdaten ergänzen. Natürlich variiert die Prioritätsreihenfolge je nach Benutzer der Anwendung (von den oben definierten Personas).

Dadurch wird nicht nur das Dashboard übersichtlicher, sondern es hilft auch, den Fokus des Benutzers auf eine leicht verständliche, weniger überwältigende Weise auf das zu lenken, was ihm wichtig ist.

Benutzer sollten in der Lage sein, den logischen Datenfluss nachzuvollziehen

Einfachheit spielt eine wichtige Rolle, wenn es darum geht, dem Benutzer zu helfen, die Daten mit einem bestimmten Ergebnis zu verknüpfen.

Ähnlich wie im vorherigen Punkt möchten Sie mit einem Übersichtsraster der Gesamtdaten beginnen.

Sie können ein intuitives Dropdown-Menü hinzufügen, das beim Klicken des Benutzers nach unten gleitet, um zusätzliche Informationen und dann bestimmte Aufgaben oder Aktionselemente anzuzeigen. Die Leute lieben das und es gewinnt bereits an Popularität.

Ansicht von oben von Menschen, die mit Laptop und Notizen am Tisch arbeiten

Hier sind zwei Möglichkeiten, den Fluss zu unterstützen:

Zusätzliche Informationen ausblenden

Sie können anklickbare Links oder Rollover verwenden, um weitere Informationen anzuzeigen. Außerdem sind Funktionen wie Slide-to-Reveal-Daten und Zoom-in-to-Reveal großartige Möglichkeiten, um zusätzliche Informationen einzufügen oder wichtige Datenpunkte hervorzuheben. Alles mit einfachen, natürlichen Gesten.

Auf diese Weise können Benutzer auf die Links oder Rollovers klicken, die sie für ihre Arbeit als wichtig erachten, und diejenigen verlassen, die sie für weniger wichtig halten.

Auch hier werden Sie sehen, wie eine anständige UX-Design-Persona-Recherche Ihnen dabei helfen kann, herauszufinden, was für welchen Benutzer wann am wichtigsten ist.

Verwenden Sie Hover-Animationen

Sie können Hover-Animationseffekte verwenden, um den (scheinbar) langweiligen Daten mehr Schwung, Engagement und Nützlichkeit zu verleihen.

Hover-Animationen sind besonders praktisch, um zusätzliche Informationen zu bestimmten Aufgaben oder Elementen bereitzustellen und gleichzeitig dabei zu helfen, Ihre datengesteuerte Anwendung zu organisieren und zu bereinigen.

Dennoch gibt es noch mehr Möglichkeiten, Animationen zu verwenden, um nützliche und ansprechende datenintensive Anwendungen bereitzustellen.

Die Sache mit dem Verstecken von Informationen hinter anklickbaren Links, Folien oder Rollovern ist, dass Sie die meiste Arbeit auf der Back-End-Seite der Dinge leisten. Denken Sie also daran, dass Sie Ihre Architektur-Drahtmodelle von Anfang an im Hinterkopf behalten müssen.

Benutzer sollten in der Lage sein zu verstehen, was die Daten bedeuten

Nach dem Organisieren und Priorisieren von Daten auf dem Dashboard besteht der nächste Schritt darin, die Daten in separate Seiten aufzuteilen. Wenn es möglich ist, die Informationen zu kategorisieren, ordnen Sie den verschiedenen Datenbündeln unterschiedliche Seiten/Bildschirme zu.

Dies kann sowohl zu kleinen als auch zu komplexen datenintensiven Anwendungsdesignprojekten passen, obwohl es länger dauern und mehr Arbeit am Backend erfordern könnte.

In Übereinstimmung mit dem obigen „überwältigenden“ Thema wird dies nicht nur dazu beitragen, dass sich Ihre Kunden/Benutzer weniger überfordert fühlen, sondern sie werden wahrscheinlich die Zahlen auf einer Seite besser verarbeiten, bevor sie zur nächsten übergehen, und die Daten Schritt für Schritt verstehen Zeit.

Beispielsweise kann eine Mission Control-Benutzeroberfläche Ihrem Kunden helfen, alle Daten auf einer Seite zu bekommen, aber es kann für ihn mit der Zeit überwältigend sein – ganz zu schweigen von gequetscht, insbesondere bei unterschiedlichen Bildschirmgrößen.

Oft wird ein Kunde diese Art von Dashboard anfordern, aber Sie sollten es besser wissen.

gif eines Beispiel-Dashboards für AV-Ereignisse
Eine großartige Lösung für vollgestopfte Dashboards ist die Möglichkeit, sie wie in diesem Beispiel des AV Event Management-Dashboards anzupassen und zu gestalten.

Eine Benutzeroberfläche für die Missionskontrolle sieht vielleicht ausgeklügelt aus, ist aber nicht so reibungslos und einfach zu verwenden wie der zuvor besprochene One-Page-at-a-Time-Ansatz. Ersteres könnte leicht daran hindern, die Bedeutung zu vermitteln, die in dem Berg der angezeigten Daten verborgen ist. Und das ist nicht sinnvoll.

Benutzer sollten in der Lage sein, den nächsten Schritt zu verstehen

Wenn Sie die obigen Schritte direkt befolgen, wird es für Benutzer einfacher, Muster in den Rohdaten zu identifizieren und zuzuordnen – ein weiterer wichtiger Gewinn, den Sie beim Entwerfen für datenintensive Anwendungen anstreben sollten. Wenn die von Ihnen verwendeten Datenvisualisierungstools den Benutzern helfen, Big Data zu verstehen, wissen Sie, dass Sie großartige Arbeit geleistet haben.


5. Lassen Sie Raum für Verbesserungen

Zu guter Letzt möchten Sie Ihr Design agil gestalten.

Wenn die Zeit vergeht und Benutzer mit Ihrem Design interagieren, kann ihr Feedback Sie dazu veranlassen, Maßnahmen zu ergreifen und das Ganze zu reparieren oder neu zu gestalten. Es gibt keinen Weg, ein perfektes Design für die Datenverarbeitung zu erstellen. Wenn Sie Ihr Design also agil halten, können Sie kontinuierliche Verbesserungen oder einen soliden Patch für den Start vornehmen.

Die zentralen Thesen

Der Zweck des UX-Designs besteht darin, eine Botschaft klar und umsetzbar zu vermitteln. Dies ist besonders wichtig für die Entwicklung datenintensiver Anwendungen. In diesem Fall besteht die Aufgabe von gutem Design darin, Analysten oder Managern oder Endbenutzern zu helfen, eine fundierte Entscheidung zu treffen.

Und Benutzer können Rohdaten nicht interpretieren und verwenden, um eine Entscheidung zu treffen, wenn sie keinen guten Sinn daraus machen und wie sie präsentiert werden.

Das Entwerfen für datenlastige UX-Projekte sollte nicht so ärgerlich sein, wie es scheint. Die oben genannten Tipps und Tricks können Ihnen helfen, herauszufinden, wie Sie für datenintensive Schnittstellen entwerfen können.

Haben Sie Tipps, die Sie befolgen, um großartige Benutzeroberflächen für die Datenvisualisierung zu entwerfen, und die Sie gerne teilen würden?

Lassen Sie es uns im Kommentarbereich unten wissen.