Stellen Sie sich vor, Sie entwickeln ein System zur Datenrecherche. Oder eine Energiemanagement-App. Oder ein Armaturenbrett für Maisverkäufer. Vielleicht entwickeln Sie gerade etwas Ähnliches. In allen genannten Fällen wird mit Tischen gerechnet. Nicht die angesagten, inspirierenden Sites, sondern Excel-ähnliche Monster mit Hunderten von Zellen und komplexen Interaktionen.
In diesem Fall ist der Designer mit vielen Problemen konfrontiert. Wenn Sie beispielsweise ein Design mit vorhandenen Front-End-Frameworks abgleichen oder „unpraktische“ Daten bekämpfen, die das Layout zerstören. Wir werden diese Probleme mit den folgenden Schritten überwinden: Bedürfnisse systematisieren, atomar werden und Interaktion definieren.
Dieser Artikel wurde mit Unterstützung von EDISON Software übersetzt, einem Unternehmen, das Anwendungen und Websites entwickelt und sich auch mit Benutzeroberflächen befasst .
1. Systematisierung der Bedürfnisse
Sie haben also die Zielgruppe interviewt. Jetzt ist es Zeit, ihre Bedürfnisse und Wünsche zusammenzustellen und sie in etwas Nützliches für das Design zu verwandeln. Ein Benutzer sagte beispielsweise: "Ich muss sehen, wie sich meine Daten auf andere Teile der Anwendung auswirken." Oder nachdem Sie gesehen haben, wie eine andere Person mit alter Software arbeitet, stellen Sie fest, dass sie Tastenkombinationen verwendet und die Maus überhaupt nicht berührt. Was bedeutet das? Die ersten Benutzeranforderungen beziehen sich auf die Eingabevalidierung und Eingabeaufforderungen. Sie müssen der Tabelle Warnungen und Hintergrundinformationen hinzufügen. Oder entwickeln Sie ein System signifikanter Farben. Es kommt auf das Fachgebiet und das mentale Modell an. Wenn Sie die Arbeit des zweiten Benutzers beobachten, beginnen Sie zu verstehen, dass Sie alle auf der Tastatur verfügbaren Aktionen entwickeln müssen. Und Sie müssen wahrscheinlich an spezialisiertere Hotkeys denken als nur an „Cmd + C“ und „Cmd + V“.
Als Ergebnis erhalten Sie eine Liste der Bedürfnisse und Wünsche der Menschen. Offene Fragen sind hilfreich, um die tatsächlichen Bedürfnisse herauszufinden und Launen herauszufiltern. Zum Beispiel: „Was hilft Ihnen, schneller zu arbeiten? Wie steigert es die Effizienz Ihrer Arbeit? Was wird sich ändern, wenn Sie kein X machen können? "
Jetzt ist es Zeit, ein logisches Framework für Ihre Tabelle zu erstellen. Das Schema dessen, was es enthält und kann. Wenn Sie direkt zum Erstellen eines Drahtmodells oder eines Prototyps übergehen, werden Sie den schwierigen Weg des endlosen Neuzeichnens beschreiten. Nachfolgend finden Sie ein Beispiel dafür, wo Sie beginnen könnten. Dies ist ein Baum von Funktionen.
Der kleinste Baustein einer Tabelle ist eine Zelle. Zellen werden in Zeilen und Spalten zusammengefasst, deren spezifische Merkmale sich von denen anderer Zellen unterscheiden können. Und schließlich gehen wir zu so wichtigen Ergänzungen der Tabelle über, wie dem oberen Bedienfeld, den Tastaturbefehlen, der Fehlerbehandlung usw.
Ein gut organisierter Funktionsbaum ist auch für das Entwicklungsteam nützlich. Sie können Features den Front-End-Funktionen zuordnen und den besten Weg finden, ein Projekt in Code umzuwandeln. In einem meiner Projekte haben wir das Angular Material Framework verwendet. Leider waren Angulars Tische sehr einfach. Wir haben die Ag-Grid-Bibliothek gefunden, die unsere Funktionalität unterstützt, jedoch eine Einschränkung aufweist. Sie hatte nicht die Gelegenheit, die Reihe zu erweitern und etwas hinein zu stecken. Wir haben dieses Problem erkannt und das Design im Voraus angepasst.
Zwischensumme
- Erstellen Sie eine komplexe Tabelle, indem Sie die Benutzeranforderungen erfassen und priorisieren.
- Zeichnen Sie ein Baumdiagramm, das alle erforderlichen Funktionen organisiert. Verwenden Sie dies als Plan zur Erzeugung visueller Effekte.
2. Atomizität einführen
Funktionalität ist also definiert, und Sie kennen die Grenzen der Entwicklung. Es ist Zeit, Ihren Tisch zu verspotten. Im Wesentlichen besteht der atomare Ansatz darin, zuerst kleine Komponenten der Benutzeroberfläche zu entwickeln und dann größere zusammenzusetzen. Wir werden schrittweise von elementaren Teilen wie Schriftarten und Farben zu so großen Modulen wie Überschriften oder Spalten übergehen. Ich habe bewusst einen strengen brutalen Stil für Layouts gewählt, damit wir uns mehr auf Funktionalität als auf Aussehen konzentrieren können.
Schriften, Farben und Symbole
Diese Teile können bereits in Ihrem Konstruktionssystem oder im UI-Framework definiert werden. Wenn Sie eine Tabelle für ein vorhandenes Produkt erstellen, überprüfen Sie, ob die Farbpalette, Schriftarten und Symbole den Anforderungen der Tabelle entsprechen.
Zellen und Zubehör
Wenn die Atome des Tisches fertig sind, können wir zu den Molekülen übergehen - verschiedenen Zelltypen. Zuallererst ist es wichtig, im Voraus über die normalen, induzierten und aktiven Zustände jedes Elements nachzudenken. Später fügt der Designer auch den Status "Gedrückt", "Deaktiviert" und andere hinzu.
In einem meiner Projekte hatten wir acht Zelltypen mit eigener Interaktion. Die einfachsten sind Text- und Zahlenzellen. In unserem Fall war es erlaubt, die numerischen Zellen mit nicht numerischen Inhalten wie „N / A“ (nicht zutreffend) und „N / C“ (ohne Kontrolle) auszufüllen. Dies war ein Merkmal des Tätigkeitsbereichs. Dropdown-Listen und Datumsauswahl sind komplexer und haben untergeordnete Elemente. Schließlich hatten wir die Tabellenzellen, die Schaltflächen sind.
Zellen können Zubehör wie QuickInfos, Eingabehinweise, Fehlermeldungen, Platzhalter usw. enthalten. Zu diesem Zeitpunkt sind sie statisch, aber später muss der Entwickler die Logik für ihre Anzeige festlegen.
Zeilen und Überschriften
Wenn die Zellen entworfen sind, können Sie Linien erstellen und prüfen, ob die verschiedenen Kombinationen gut funktionieren. Unten habe ich eine Mischung aus schreibgeschützten und bearbeitbaren Zellen in einer Zeile gezeigt. Einmal habe ich eine Tabelle mit komplexer Bearbeitungslogik entwickelt. Einige Eigenschaften wurden von Benutzern bereitgestellt, während andere automatisch berechnet oder mit Standardwerten gefüllt wurden.
Beachten Sie, dass sich der Cursor unterscheidet, wenn Sie den Mauszeiger über schreibgeschützte und bearbeitbare Zellen bewegen. Wenn Sie darauf klicken, wird entweder eine Zeile ausgewählt oder in den Zellenbearbeitungsmodus gewechselt. Unten sehen Sie, dass Personen eine oder mehrere Zeilen auswählen können.
Jetzt ist es Zeit, über die Tabellenüberschriften nachzudenken. Nach meiner Erfahrung ist es oft unmöglich, die Länge einer Spaltenüberschrift zu kontrollieren und sich an eine Zeile zu halten. Selbst mit einem guten Autor im Team werden Sie nicht alle Texte schneiden. Einige der Tabellen erfordern lange technische Namen oder eine Lokalisierung. Sätze, die in Englisch einzeilig waren, können in Griechisch, Deutsch oder Ungarisch zwei- oder dreizeilig werden. Daher habe ich unten verschiedene Optionen gezeigt.
Datenbasierte Software-Benutzer müssen häufig sortieren und filtern. Dies hilft ihnen, wertvolle Informationen in großen Datenmengen zu finden. Die Aufgabe des Sortierens und Filterns besteht darin, die Sortiersteuerelemente und Filterfelder mit anderen Kopfelementen - Kopfzeilen, Einheiten usw. - zu kombinieren.
Im Gegensatz zu Tabellenzellen haben Filterfelder in der Regel rechts das Symbol „Zurücksetzen“, damit Benutzer sie explizit deaktivieren und ungefilterten Inhalt anzeigen können.
In meinem Beispiel gibt es drei Arten von Filterblöcken. Ein alphanumerischer Filter ermöglicht die Suche nach Buchstaben und Zahlen. Platzhalter werden unterstützt - eine unbekannte Anzahl unbekannter Zeichen. Wenn ich beispielsweise "45 * A1" eingebe, kann dies zu Zeilen mit Werten wie "45A1", "45982A1B", "45A109B" und "096445-A1" führen.
Platzhalter sind eine komplexe Funktion, da sie von den Gewohnheiten der Menschen abhängen. Als ich die Tabellen für Techniker entwickelte, haben wir einer unbekannten Anzahl unbekannter Zeichen ein Sternchen (*) zugewiesen. Für Versicherungsanalysten habe ich das traditionelle SQL-Symbol gewählt - das Prozentzeichen (%) - weil sie daran gewöhnt sind. Der Dropdown-Filter wechselt zwischen einer bestimmten Anzahl sich gegenseitig ausschließender Textoptionen, Zahlen oder Zahlenbereichen.
Die Datumsauswahl verfügt über einen Kalender und funktioniert wie das Zellenäquivalent. Es ist gut, wenn Benutzer das Datum manuell eingeben und aus dem Kalender auswählen können. Wenn sie wissen, wonach sie suchen, ist die Eingabe eines Datums viel einfacher als das Klicken. Eine andere wichtige Sache ist, jede sinnvolle Eingabe automatisch zu formatieren und die Leute nicht mit "falschen Formatierungsfehlern" zu belästigen. In einem meiner Projekte durften wir Daten wie "25. Januar 2017", "6 12 17" und "4. September 2016" eingeben und nur nach Monaten oder Jahren ohne Tag filtern.
Spalten
Ein gemeinsames Merkmal komplexer Tabellen sind angeheftete Spalten. In der Regel werden Spalten, die wichtige Informationen wie Elementnamen oder -status enthalten, nicht gescrollt.
Obwohl die Spalten der Tabelle korrekt an die Größe des Inhalts angepasst werden sollten, geschieht dies, wenn der Text abgeschnitten wird. In diesem Fall hilft eine anpassbare Spalte. Benutzer können den Rand einer Spalte ziehen und langen Inhalt sehen. Möglicherweise müssen sie auch eine unwichtige Spalte oder eine Spalte mit Kurztext komprimieren.
Eine andere Möglichkeit, mit langen Textzeichenfolgen umzugehen, besteht darin, die Spalte entweder auf den längsten Inhalt zu strecken oder sie in mehrere Zeilen zu setzen. Der erste Ansatz funktioniert besser für ähnliche Textzeichenfolgen. Die zweite Option funktioniert besser, wenn das Anzeigen des gesamten Inhalts für Personen wichtiger ist als das vertikale Komprimieren der Tabelle.
In einem meiner Projekte haben wir die Standardspaltenbreite so festgelegt, dass die Tabellengröße nicht geändert wird. Wir haben die Spaltenkomprimierung bei einer bestimmten Breite in Abhängigkeit von der Art des Inhalts deaktiviert.
Oberes Panel
Was macht den Tisch aus? Zellen, Spalten, Zeilen. Darüber hinaus verfügen komplexe Tabellen häufig über eine obere Leiste. Wie andere Komponenten besteht auch das obere Bedienfeld aus kleineren Elementen - der Titelleiste und den Schaltflächen. Im Folgenden habe ich eine Liste von Schaltflächen mit den verschiedenen Bedingungen zusammengestellt, die wir in einem der Produkte verwendet haben. Wir hatten offensichtliche Symbolschaltflächen wie "Plus = Hinzufügen oder Erstellen", "Papierkorb = Löschen", "Pfeil = Verschieben". Nicht universelle Schaltflächen (z. B. Zuweisen, Archivieren, Ausgleichen) benötigten einen expliziten Textnamen. Darüber hinaus wurden einige Schaltflächen von einem Dropdown-Menü begleitet.
Jetzt können wir versuchen, die verschiedenen Elemente zu kombinieren und zu prüfen, ob dies funktioniert. Hier sind einige Beispiele.
Dies ist natürlich keine vollständige Liste der Funktionen und Elemente. Es unterscheidet sich von einem Projekt zum anderen und kann andere Dinge beinhalten, zum Beispiel:
- nach mehreren Spalten sortieren;
- anpassbare Reihe von Spalten (die Fähigkeit, sie zu wechseln);
- erweiterbare Zeilen (die übergeordnete Zeile kann untergeordnete Zeilen haben);
- logische Operatoren zum Filtern und Suchen ("und", "oder", "mehr" usw.).
Wenn Sie sich nicht sicher sind, welche Funktionen Sie entwickeln sollen und welche nicht, finden Sie hier ein gutes Prinzip. Dies ist Ockhams Rasiermesser oder das Gesetz des Geizes. Der Designer sollte keine neuen Instanzen erstellen, wenn die vorhandenen den Anforderungen entsprechen. Sie sollten die Geek-Funktionen "ausschneiden", die Benutzer theoretisch auf unbestimmte Zeit benötigen könnten. Dieselbe Geschichte mit Funktionen, die für eine von hundert Situationen perfekt sind, in den verbleibenden neunundneunzig Fällen jedoch unbrauchbar sind.
Fertiger Tisch
Wenn alle Bausteine fertig sind, können Sie mehrere Tabellen für verschiedene Zwecke zusammenstellen. Dies ist eine Chance, Inkonsistenzen und unlogische Entscheidungen zu entdecken. Am häufigsten habe ich mich mit den folgenden drei Typen befasst.
Die Tabelle ist schreibgeschützt . Der am einfachsten zu erstellende Tabellentyp, da nur die Daten so angezeigt werden, wie sie sind. Es gibt keine Filter- oder Bearbeitungsoptionen. Sortieren oder Zeilenhierarchien können bei der Analyse großer Datenmengen hilfreich sein. Eine solche Tabelle wird verwendet, um Daten anzuzeigen und Personen über etwas zu informieren.
Tabelle zum Suchen. Die Zellen können nicht bearbeitet werden. Die Kopfzeile enthält Filterfelder und Sortiersteuerelemente. Sie können Zeilen auswählen. In meiner Praxis helfen solche Tabellen, einen Artikel oder mehrere Artikel aus einer Vielzahl von ähnlichen Dingen zu finden, zu vergleichen und auszuwählen. Filtern Sie beispielsweise fünf der sechstausend unerwünschten Werkzeuge aus dem Katalog und wählen Sie dann ein Werkzeug aus, das Sie benötigen.
Editierbare Tabelle . Alle oder einige Zellen können bearbeitet werden. In der Regel erfolgt keine Filterung, da die Reihenfolge der Zeilen geändert werden kann. Solche Tabellen werden normalerweise von einer Symbolleiste begleitet und ermöglichen es Ihnen, Aktionen mit Zeilen auszuführen.
Zwischensumme
- Beginnen Sie mit den kleinsten Komponenten. Dann gehen Sie nach und nach zu den größeren über und machen Sie schließlich ein Modell von allem.
- Denken Sie im Voraus über alle möglichen Bedingungen für jede Komponente nach.
- Verwenden Sie das Rasiermesser-Prinzip von Occam, um die minimale Anzahl von Elementen beizubehalten, aber alle Anwendungsfälle abzudecken.
3. Definieren Sie die Interaktion und Umgebung
Bausteine reichen nicht aus, um ein so komplexes Oberflächenelement wie eine Tabelle zu erstellen. Der Designer sollte über die "Spielregeln" nachdenken und die logischen Prinzipien und Konventionen hinter dem visuellen Teil entwickeln. Ich werde einige typische Dinge beschreiben, die Sie berücksichtigen sollten.
Numerische Daten
Wie viele Nachkommastellen sollte eine Zahl in Ihrer Tabelle haben? Eins, zwei, fünf? Was ist die optimale Genauigkeit? Ich treffe eine Entscheidung basierend auf der Genauigkeit, die Benutzer benötigen, um die richtige Entscheidung zu treffen. In einigen Berufen sind die Schwankungen zwischen 10932.01 und 10932.23 signifikant, während in anderen Bereichen die Zahlen 14 und 15 nicht wirklich wichtig sind. Dies ist ein Beispiel für die numerischen Datenregeln, die mein Team in einem komplexen technischen Produkt verwendet hat.
- Länge : 2 Nachkommastellen (57,53 m, 3,16 km), Leerzeichen werden als Tausendertrennzeichen verwendet (403 456,56 m).
- Gewicht : 2 Nachkommastellen (225,08 kg, 108,75 t), Leerzeichen dienen als Tausendertrennzeichen (12 032,17 kg).
- Geld : 2 Dezimalstellen (9,45 USD), Kommas werden als Tausendertrennzeichen verwendet (16.408.989,00 USD).
- Durchmesser : 3 Dezimalstellen (10,375 cm), keine Trennzeichen erforderlich.
- Breite und Länge : 8 Dezimalstellen (26.4321121), minus wird für die westliche Länge und die südliche Länge (-78.05640132) verwendet.
- Standardmäßig für oben nicht aufgeführte Einheiten: 2 Dezimalstellen (32,05 g / m³, 86,13 ° C).
Eine andere Sache, die wir uns angesehen haben, war der Unterschied zwischen den auf den Servern gespeicherten "echten" Daten und den "groben" Daten in der Schnittstelle. Das System verwendete extrem genaue Zahlen mit Dutzenden von Dezimalstellen in allen Berechnungen, aber die Leute mussten dies nicht die ganze Zeit sehen. Aus diesem Grund haben wir uns entschlossen, die oben beschriebene Anzahl der Nachkommastellen anzuzeigen und die Gesamtzahl nur festzulegen, wenn die Tabellenzelle aktiv ist. Ein Techniker kann beispielsweise "134432.97662301" eingeben, und nach dem Drücken von "Enter" wird "134 432.98" in der Tabelle angezeigt. Wenn Sie erneut klicken, wird dem Bearbeiter erneut "134432.97662301" angezeigt.
Eingabebestätigung
Im Gegensatz zum vorherigen Absatz über Zahlen ist die Überprüfung nur für bearbeitbare Tabellen wichtig. Dies hat zwei Aspekte. Erstens die Regeln, die die eingegebenen Daten als gültig oder ungültig qualifizieren. Zweitens entweder Nachrichten, die zur Korrektur ungültiger Daten beitragen, oder Mechanismen, die diese automatisch beheben. Validierungsregeln sind normalerweise zu komplex, um nachgebildet oder prototypisiert zu werden. So können Designer sie in Textform oder im Blockdiagrammformat dokumentieren.
Dies ist ein Beispiel für die Nachrichtenvorlagen, die ich einmal verwendet habe. Der Text in spitzen Klammern ist dynamisch und stammt aus einer Berechnungsmaschine oder einer Datenbank.
- Es sollte mehr
measurement unit . Optional explanation . - Muss kleiner als die
measurement unit . Optional explanation . - Muss zwischen der
measurement unit von value 1 und value 2 . Optional explanation . - Der Minimalwert muss kleiner als der Maximalwert sein.
- Der Maximalwert muss größer als der Minimalwert sein.
- Der minimale und der maximale Wert sollten nicht gleich sein.
Mannschaften
Bearbeitbare Symbolleistentabellen benötigen in der Regel eine Reihe von Regeln, wenn Symbolleistenschaltflächen aktiviert und deaktiviert sind. Diese Bedingungen können davon abhängen, ob die Zeile ausgewählt ist, wie viele Zeilen ausgewählt sind, an welcher Position oder an welchen Inhalten sich die ausgewählten Zeilen befinden und unter welchen anderen Bedingungen. Das Folgende ist eine von vielen Möglichkeiten, solche logischen Regeln zu dokumentieren.
Wir haben also einen Tisch mit einigen Chemikalien. Es verfügt über Schaltflächen wie "Zeile hinzufügen", "Nach oben", "Nach unten", "Löschen", "Neu berechnen" und "Einstellungen".
Und hier ist eine Beschreibung der Schaltflächenzustände. Es stellt sich heraus, dass ihre Verfügbarkeit von einer oder mehreren Bedingungen abhängt.
Der nächste Schritt ist die Ermittlung des Ergebnisses jedes Teams. Was passiert beispielsweise, wenn ich zwei Zeilen auswähle, die nicht nebeneinander liegen, und auf Nach oben klicke? Oder was ist das Ergebnis des Klickens auf "Neu berechnen"? All diese Fragen müssen beantwortet oder zumindest im Voraus geprüft werden.
Container und Anpassungsfähigkeit
Wie wird die Tabelle in der Oberfläche platziert? Wird es beispielsweise Platz in einem vorhandenen Container einnehmen oder wird es ein separates Modul sein? Die Antworten auf diese Fragen sind vollständig produktabhängig. Am besten antizipieren Sie potenzielle Probleme und definieren die Grundsätze sorgfältig.
Bei der Entwicklung von Webanwendungen fallen mir normalerweise drei Arten von Containern für Tabellen ein. Der typischste Fall ist, wenn sich ein großer Tisch in der Mitte des Bildschirms befindet und fast den gesamten Platz einnimmt. Eine solche Tabelle hat möglicherweise keinen eigenen Titel und möglicherweise einen Seitennamen. Kleine und mittlere Tabellen können zu Modulen der Symbolleiste und zu anderen Inhalten wie Grafiken, Diagrammen und Diagrammen werden. In diesem Fall fungiert der obere Bereich der Tabelle als Modulkopf. In großen Unternehmensanwendungen werden Tabellen häufig in Popup-Dialogfeldern angezeigt. Es sollte kluge Empfehlungen geben, damit die Dialoge nicht durch zu viel Inhalt unterbrochen werden.
Ein weiterer Aspekt beim Platzieren einer Tabelle in einer Benutzeroberflächenumgebung ist der verfügbare Bereich des Bildschirms. Die meisten Unternehmensanwendungen sind hauptsächlich für die Verwendung auf Desktop-Computern konzipiert. Die Anpassungsfähigkeit des Tisches wird durch einfaches Strecken und Zusammendrücken eingeschränkt. In der Regel belegen Tabellen mit einer großen Anzahl von Zeilen und mehreren Spalten 100% der verfügbaren Breite. Infolgedessen werden die Zellen gleichmäßig auf dem Bildschirm verteilt, und die meisten Texte können ohne Zuschneiden oder Umbrechen angezeigt werden. Auf der anderen Seite treten große Lücken zwischen den Säulen auf, was dem Gesetz der Nähe widerspricht. Aus diesem Grund verwenden einige Anwendungen Linien oder weiße und graue Zebras, um die Lesbarkeit der Informationen zu verbessern.
Der beste Weg ist, die standardmäßige rationale Breite zu bestimmen und bei Bedarf die manuelle Größenänderung zuzulassen. Um eine Tabelle zu lesen, ist es besser, freien Speicherplatz rechts als Leerzeichen zwischen den Spalten zu haben. Wenn die Tabelle jedoch viele Zeilen und Spalten enthält, ist ein horizontaler und vertikaler Bildlauf unvermeidlich.
Das Wesentliche an einer komplexen Tabelle ist ihre Größe, die eine Vorstellung von den Daten aus der Vogelperspektive vermittelt. Leider kann ich mich nicht an eine wirklich gute Methode erinnern, große Tabellen auf Smartphonebildschirmen zu verwenden. Excel- und Google-Tabellen verlieren ihre Leistung auf kleinen Bildschirmen, aber es gibt effektive Möglichkeiten, mit kleinen Tabellen umzugehen. Konvertieren Sie sie beispielsweise in eine Kartenliste.
Zugänglichkeit
Sogar ein außergewöhnlich glatter und schöner Tisch kann für den Benutzer ein Albtraum sein. Daher ist es wichtig, die Grundsätze der Barrierefreiheit einzuhalten. Das Handbuch zur
Barrierefreiheit von Webinhalten (
WCAG 2.0 ) enthält ein Kapitel mit Tabellen. Das meiste Material handelt von der richtigen Programmierung. Der Designer hat jedoch auch etwas zu bedenken. Hier sind die grundlegenden Überlegungen zum Design in Bezug auf die Zugänglichkeit.
Geben Sie der Tabelle eine Überschrift und eine kurze Zusammenfassung. Ein Benutzer mit Sehbehinderung sollte in der Lage sein, sich einen Eindruck von der Tabelle zu verschaffen, ohne dass alle Zellen einer Sprachverarbeitung unterzogen werden müssen.
Achte auf die Schriftgröße. Obwohl es keine offizielle Mindestgröße für das Web gibt, werden 16 Pixel (12 pt) als optimal angesehen. Außerdem sollte der Benutzer in der Lage sein, den Wert auf 200% zu erhöhen, ohne das gesamte Layout zu beschädigen.
Überprüfen Sie die Farben für Menschen mit Farbenblindheit. Text und Steuerelemente sollten einen ausreichenden Kontrast zum Hintergrund haben. Ein Farbverhältnis von 3: 1 ist minimal erforderlich (je mehr, desto besser). Und Farbe sollte nicht die einzige Möglichkeit sein, Dinge zu kennzeichnen. Beispielsweise sollten sich Fehlermeldungen nicht nur auf roten Text stützen, sondern das Warnsymbol bietet einen zusätzlichen Hinweis für Farbenblind.
Vermeiden Sie kleine und mehrdeutige Kontrollen. Komponenten, die auf Taps reagieren, gelten als gut, wenn sie eine Größe von mindestens 40 × 40 Pixel haben. Schaltflächen, die durch Symbole dargestellt werden, sollten entweder markiert sein oder Eingabeaufforderungen und alternativen Text enthalten. Designer sollten Symbole nicht missbrauchen, da Benutzer komplexe Metaphern falsch verstehen können.
Sie können Online-Eingabehilfen wie
Wave verwenden . Er findet nicht nur Probleme und Zugänglichkeitsmöglichkeiten, sondern hebt sie auch direkt auf der Seite hervor und erklärt, wie sie behoben werden können.
Zwischensumme
- Die Vereinheitlichung und Formatierung von Inhalten ist ebenfalls eine Aufgabe des Designers.
- Denken Sie nicht nur an "Dinge", Elemente Ihrer Benutzeroberfläche, und berücksichtigen Sie Anwendungsfälle, Regeln und allgemeine Muster.
- Wenn alle Elemente der Tabelle konsistent und kompatibel sind, ist es an der Zeit, darüber nachzudenken, wie die Tabellen dem Rest der Schnittstelle entsprechen.
Fazit und zusätzliches Lesematerial
Wir haben gerade den Prozess der Erstellung einer komplexen Tabelle durchlaufen. Unterschiedliche Projekte erfordern unterschiedliche Ansätze, aber es gibt ein universelles Prinzip. Der Designer muss alle Elemente in einer beliebigen Kombination zusammenarbeiten lassen. Daher ist es gut, zuerst die notwendigen Dinge zu sammeln und kleine Blöcke zu machen. Und natürlich testen Sie mit Benutzern, sobald Sie etwas anklickbares und realistisches erhalten.
Hier erfahren Sie mehr über die Tischgestaltung.
Weitere interessante Veröffentlichungen
Lesen Sie auch den Blog
EDISON Unternehmen:
20 Bibliotheken für
spektakuläre iOS-Anwendung