Grafik

Datengesteuertes Design Eine einfache Grundierung

Web-Apps werden im Internet immer häufiger. Einige mögen argumentieren, dass es sich nur um kompliziertere Websites handelt. Unabhängig von ihrer Definition; Was passiert, wenn Sie für große Mengen ständig schwankender Daten entwerfen?

Es gibt einige Beispiele für datengetriebene Schnittstellen, und alle müssen mit einer Vielzahl unterschiedlicher Daten umgehen, die sich ständig ändern. Am häufigsten sind Administrationsbereiche und Analyse-Dashboards. Die Daten können viele Formen annehmen. Grafiken, Diagramme, Tabellen oder Text. Jeder kann auf verschiedene Arten angezeigt werden, je nach Kontext und Bedeutung, die Sie mit den Daten vermitteln möchten. Eine Sache zu beachten ist, dass Sie sich der Länge oder Länge selten sicher sein können Menge der Daten, für die Sie sorgen müssen; so einfach zu beginnen?

Konsistenz und Vorhersagbarkeit

Einer der wichtigsten Aspekte beim Entwurf stark datengetriebener Schnittstellen besteht darin, diese konsistent zu gestalten. Konsistenz ermöglicht es Benutzern, sich mit einem Bereich einer Schnittstelle vertraut zu machen und jeden anderen Bereich einfach durch die mit dem vorherigen Bereich erstellten Schemas verwenden zu können. So machen Sie eine Schnittstelle vorhersehbar; spielen Sie mit bestehenden mentalen Modellen und erlerntem Verhalten.

Um Bereiche konsistent zu machen, müssen Sie den umfassenderen Kontext der Schnittstelle verstehen und sehen, wie gut Ihre anfänglichen Schnittstellenideen der Prüfung verschiedener Daten standhalten können.

Beispiel: Eine Tabelle muss möglicherweise nicht in einer Ansicht gefiltert oder sortiert werden. Was passiert jedoch, wenn eine andere Tabelle in einem anderen Bereich angezeigt wird? Können Sie dieselbe Schnittstelle verwenden, die Sie gerade erstellt haben, wenn die zweite Tabelle gefiltert werden muss und Highlights enthalten, für die ein Schlüssel oder eine Legende erforderlich ist?

Bei der Konsistenz geht es darum, das Design nachträglich anpassen zu können, basierend auf Ihrem zunehmenden Wissen über die Komplexität. Aus diesem Grund ist es am besten, mit Lo-Fi-Prototypen zu beginnen und Ihre Ideen mit Randfällen zu testen (Dinge, die nicht sehr häufig vorkommen, aber das Design möglicherweise brechen).

Wird das Tabellenmuster in anderen Bereichen verwendet, in denen zusätzliche Funktionen möglich sind? Wenn die meisten Tabellen sortiert werden müssen, ist das Design entsprechend zu gestalten. Das Ziel ist es, nichts an eine vorhandene Komponente "anzuschrauben", damit sie sich fehl am Platz fühlt. Es ist einfacher, eine Schaltfläche aus einer Symbolleiste zu entfernen, als herauszufinden, wie sie ohne Symbolleiste integriert werden kann.

Wiederholbare Muster, Zustände und Komponenten

Um Konsistenz zu verwirklichen, müssen Sie intelligent bauen. Wenn Sie nicht für jede einzelne Ansicht entwerfen, können Sie stattdessen einen Satz von Regeln erstellen, auf die angewendet werden kann irgendein Aussicht. Eine Farbe nach Zahlen, wenn Sie so wollen. Dies ermöglicht Ihrem Kunden oder anderen Designern das schnelle Zusammenstellen von neuen Seiten oder Layouts mit minimalem Aufwand.

Muster

Ein Muster ist eine kleine Menge von Elementen, die zusammengehören. Dies kann ein Abschnitt einer Symbolleiste oder ein Satz von Bewertungsschaltflächen sein, die normalerweise dazu dienen, verbundene Informationen zu organisieren. Eine Beschriftung und eine Eingabe wäre auch ein Muster innerhalb eines Formulars.

Nachfolgend einige Mustergruppen von Google-Produkten:

  • Dropdown sortieren
  • Linke und rechte Navigation
  • Datumsbereich-Wahlschalter
  • Kontrollkästchen Dropdown

Die Muster stammen von verschiedenen Produkten, sind jedoch konsistent und somit für den Benutzer vorhersehbar. Zusammen bilden sie die Symbolleistenkomponente.

Zustände

Muster können je nach bestimmten Umständen verschiedene visuelle Erscheinungsbilder haben. Möglicherweise liegt ein Fehler vor, eine Schaltfläche ist deaktiviert oder ein Diagramm enthält keine Daten. Jeder muss berücksichtigt werden. Im Allgemeinen fallen sie in die folgenden Kategorien (einige, die Sie von verschiedenen CSS-Pseudoselektoren kennen):

  • Standard
  • Schweben
  • Aktiv
  • Fokus
  • Error
  • Deaktiviert
  • Leeren

Komponenten

Eine Komponente ist größer und kann mehrere Muster oder sogar mehrere Komponenten enthalten. Beim Entwurf für stark datengetriebene Standorte besteht das Ziel darin, einen Satz flexibler Komponenten bereitzustellen, die aus wiederverwendbaren Mustern bestehen. Unten ist eine für http://phosho.co auf kleinen Bildschirmen:

Arbeiten mit einem vorhandenen Produkt

Wenn Sie mit einem vorhandenen Produkt arbeiten und durch die vorhandenen Benutzerabläufe (und in manchen Fällen das Layout) eingeschränkt sind, müssen Sie eine "Vorlagenprüfung" durchführen. Listen Sie einige wichtige Benutzerflüsse auf und machen Sie für jeden Schritt einen Screenshot.

  • Auf einem Mac drücken Sie einfach Befehl-Umschalt-3 um den aktuellen Bildschirm auf dem Desktop zu speichern.
  • Auf dem PC können Sie den so genannten Problem Steps Recorder verwenden, um Ihre Schritte in einer MHT-Datei aufzuzeichnen. Sie können die Bilder dann aus dieser Datei heraus speichern. Es gibt hier ein hervorragendes Tutorial.

Sobald Sie einen Benutzerfluss abgeschlossen haben; Fügen Sie die Screenshots zu einem Ordner hinzu, der den Benutzerfluss beschreibt, z. B. 'Neuen Datensatz hinzufügen'. Dann drucken Sie sie aus. Alles. Es ist etwas zu sagen, wenn jeder Bildschirm in einen Benutzerfluss vor Ihnen eingebunden ist. Sie können leicht Ähnlichkeiten und Unterschiede erkennen.

Die Idee einer Vorlagenprüfung besteht darin, zu verstehen, wie viele Vorlagen es gibt, wie viele Muster sich in jeder Vorlage befinden (und in welchem ​​Zustand sich diese befinden). Dies erreichen Sie am besten, wenn Sie sie in einem Raster an der Wand anbringen und den Spalten einen Buchstaben und den Zeilen eine Nummer zuweisen (oder was auch immer Sie möchten). Dies dient als Referenz, wenn Sie jede Komponente aufschreiben.

Zum Beispiel haben Sie vielleicht:

  • Tabellenkopfzeile (A2)
  • Tischkörper (A2)
  • Tabellenfußzeile (A2)
  • Seitenmenü - geschlossen (A1)
  • Seitenmenü - Öffnen (B1)
  • Kalender (C3)
  • Kalender - deaktiviert (C4)

Auf diese Weise können Sie alle vorhandenen Muster auflisten, sie aber auch referenzieren, um schnell zu sehen, wie sie aussehen. Um zu testen, ob Sie alle Muster und Komponenten aufgelistet haben, können Sie eine Vorlage auswählen und prüfen, ob Sie sie anhand der gerade erstellten Liste der Muster und Komponenten neu erstellen können. Wenn Sie auf etwas stoßen, das nicht auf der Liste steht; füge es hinzu.

Von Grund auf arbeiten

Wenn Sie von Grund auf von Grund auf arbeiten, haben Sie die Freiheit, beliebige Muster zu erstellen, aber es kann auch viel schwieriger sein, da Sie am Anfang nichts zu tun haben. Wie kürzlich bekannt gegeben; Wenn Sie wiederverwendbare Komponenten entwerfen, sollten Sie Lo-Fi mit Skizzen starten. Sie müssen nicht verblüffend sein, aber sie sind schnell und ermöglichen es Ihnen, leicht verschiedene Optionen zu erkunden, ohne sich im Detail aufzuhalten, was in Illustrator oder Photoshop häufig vorkommt.

  1. Erstellen Sie einen Fluss für eine Aufgabe das muss vervollständigt werden und der Inhalt, der auf der Seite enthalten sein kann, auflisten.
  2. Skizzieren Sie verschiedene Richtungen und Ideen. Je mehr desto besser. Dann können Sie anfangen zu sehen, ob es Überschneidungen mit dem Inhalt gibt und wie dies möglich ist.
  3. Verfeinern sie in Wireframes und prüfen, ob es Bereiche gibt, die ähnliche Funktionen haben, jedoch unterschiedliche Lösungen aufweisen. Überlegen Sie, wie sie kombiniert werden können, um eine konsistentere Schnittstelle zu erhalten. Welche Muster verwenden Sie?
  4. Zerbreche es.瘩 瘩 嚙 瘩 緘 緘 緘 緘 緘 緘 緘 緘 緘 緘 adv adv adv adv adv 緘Entscheiden Sie, ob die Aktion zum Brechen wahrscheinlich ist und ob es sich lohnt, angesprochen zu werden.

Ikonographie

Ikonographie ist ein Weg, um die Bedeutung von Inhalten durch die Verwendung eines Bildes zu verstehen. Es gibt Fälle, in denen Text besser ist als ein Symbol. in der Regel, wenn das Konzept abstrakt ist und wenig Geld verdient. Nicht jede Aktion benötigt ein Symbol.

Wenn Sie befürchten, dass Benutzer ein Symbol nicht verstehen können. Sie sind wahrscheinlich Recht. Um dies schnell zu testen, können Sie das Symbol isolieren und die Benutzer fragen, was sie ihrer Meinung nach tun. Wenn sie mehrere Vermutungen haben und keine davon aus der Ferne geschlossen ist, liegt möglicherweise ein Problem vor. Setzen Sie das Symbol in einen Kontext und wiederholen Sie den Vorgang. Wenn durch die Berücksichtigung des Kontexts die korrekte Verwendung des Symbols verstärkt wird (d. H. Die Leute können anhand ihrer Position auf der Benutzeroberfläche erraten, was sie tut), ist dies wahrscheinlich in Ordnung. Wenn Sie immer noch nicht raten können, sollten Sie das Symbol ändern oder Begleittext oder Mikrokopie hinzufügen.

Progressive Reduktion

Es gibt ein interessantes Konzept namens progressive reduktion, das in Situationen angewendet werden kann, in denen Benutzer geschult werden sollen, dass ein ungewöhnliches Symbol eine bestimmte Aktion betrifft. Wenn Sie mit einem Symbol beginnen, das von Text begleitet wird (um es bei der ersten Verwendung offensichtlich zu machen) und die Benutzeroberfläche mit der zunehmenden Nutzung der Oberfläche allmählich vereinfacht, beginnt der Benutzer, das Symbol mit einer Aktion zu verknüpfen, die mit dem Symbol allein nicht erraten werden kann.

Leistungen

Nachdem Sie nun einige verfeinerte Wireframes erstellt haben, die die wichtigsten Benutzerabläufe ausdrücken und eine Vielzahl wiederverwendbarer Muster und Komponenten enthalten. Was zeigen Sie dem Kunden?

Es gibt eine Reihe von Vorbehalten, die sich auf das, was Sie liefern, auswirken können, z. B. wenn Sie HTML / CSS / JS selbst erstellen oder ob dies von einem Dritten ausgeführt wird. Um die Langlebigkeit des Designs und, was noch wichtiger ist, die Konsistenz bei der Einführung weiterer Funktionen, zu gewährleisten, benötigen Sie eine Art Referenz oder Leitfaden, auf die jeder schauen kann (und sogar aktualisieren kann) die Schnittstelle.

Die Küchenspüle

The Kitchen Sink besteht aus HTML / CSS und manchmal JS, die alle verschiedenen Komponenten und Muster auf einer einzigen Seite anzeigen, um sicherzustellen, dass nichts bricht (in Bezug auf Design oder Code), wenn sie in unterschiedliche Reihenfolge gebracht werden. In seiner einfachsten Form sind es nur native HTML-Elemente, die sicherstellen, dass die Grundlagen abgedeckt werden.

  • HTML Kitchen Sink 嚙 箭 y 嚙 瞑 aul Randell
  • Pattern Primer und Jeremy Keith

UI-Kits

User Interface Kits sind in der Regel statische PSDs und enthalten stilisierte Versionen grundlegender HTML-Elemente. Sie enthalten normalerweise Schaltflächen, Eingaben, Auswahlfelder sowie Schieberegler und Datumsauswahl. Einige können sehr umfangreich sein und werden normalerweise ausgeliefert, wenn der Build-Prozess von einem Dritten durchgeführt wird. Sie verhindern, dass Sie in jedem Status ein Modell jedes Bildschirms erstellen müssen.

  • Dribbble-UI-Kits
  • Transparentes UI-Kit für Victor Erixon
  • Bereinigen Sie das User Interface Kit Matt Matt y Matt Gentile
  • Silky Light UI und Okidoci

Visual Style Guide

Visuelle Style-Guides gehen viel weiter als nur visuelle Verweise auf ein Design. Sie sind lehrreich und enthalten häufig Richtlinien, wann und wo Muster und Komponenten in welchem ​​Zustand angezeigt werden sollen. Sie werden am besten im Code erzeugt und können mit der Zeit aktualisiert werden.

Der Schlüssel zur Konsistenz und zur Beibehaltung dieser Konsistenz in einem expandierenden, stark datengesteuerten Produkt ist eine Grundlage, auf der alle Designentscheidungen basieren. Durch die Verwendung einer 'Master-Kopie' und einer Reihe einfach zu befolgender Regeln kann jeder (fast) alles bauen und in das vorhandene Design einfügen.

Wenn Sie auf etwas stoßen, das in der Style-Anleitung nicht enthalten ist, können Sie eine Lösung für Ihr Problem erstellen und zusätzliche Elemente, Muster oder ganze Komponenten hinzufügen, indem Sie es mit Anweisungen für jeden verfügbar machen.

Style-Guides sind evolutionär und sind niemals fertig. Dann müssen Sie allerdings gepflegt werden. Wenn nicht, dann werden die Menschen nach und nach aufhören, da sie nicht mehr aktuell sind, und dann beginnen die Produkte zu divergieren.

  • Twitter Bootstrap
  • Google Styleguide
  • Paul Robert Lloyd Styleguide
  • BBC Global Experience Language
  • Apple Human Interface-Richtlinien

Erinnere dich daran Sie setzen die Erwartungen Ihrer Kunden. Wenn Sie sagen, Sie würden pixelgenaue Mockups liefern, dann erwarten sie das auch.

Fazit

Benutzer sind auf die Aufgaben konzentriert und befinden sich häufig auf dem „kürzesten Weg zur Fertigstellung“, was bedeutet, dass sie so gestaltet werden müssen, dass sie ihre Aufgabe mit minimalem Aufwand bestmöglich erledigen können.Resuable Patterns beschleunigen diesen Prozess, indem Benutzer das Erlernte aus einem Aspekt Ihrer Benutzeroberfläche verwenden und auf einen anderen anwenden können. Sie erledigen neue Aufgaben schnell, weil sie sich ihrer Handlungen sicherer fühlen.

Ein Wort der Vorsicht, damit Sie nicht von der Funktion, sondern vom Aussehen der Benutzeroberfläche mitgerissen werden. Die Art und Weise, wie etwas aussieht, ist das Letzte, woran sich die Nutzer kümmern. Bevor Sie sich also in Photoshop beeilen, denken Sie zuerst daran. Benutzer kümmern sich darum, ob etwas funktioniert. Konsistenz und Vorhersagbarkeit haben dabei eine große Rolle zu spielen.

Zusätzliche Lesung

Artikel

  • Frontend Styleguides von Anna Debenham
  • CSS-Systeme von Natalie Downe
  • Entwerfen für eine Hierarchie der Bedürfnisse von Steven Bradley

Ressourcen

  • Muster Tippen Sie auf
  • Leere Staaten
  • Patternry
  • UI-Muster
  • PTTRNS
  • Elemente der Design Gallery