Aufrechterhaltung der Konsistenz in Ihrem UI-Design

/2016-03-05 00:35:41/
Camella
/Grafiken/

Konsistenz im UI-Design ist ein Prinzip der alten Schule und wird in einigen der heutigen Web- und Anwendungsdesigns etwas vergessen. Es scheint, als würden Designer die Konsistenz ihrer Schnittstellen weglassen.

Beim Design mobiler Anwendungen entscheiden sich einige Designer dafür, die Hardwarestandard-Interaktionen mit ihren eigenen einzigartigen Schnittstellenmustern neu zu erfinden, neu zu erstellen oder sogar vollständig zu brechen. Während es möglicherweise keine schlechte Idee ist, die Konsistenz zwischen den Regeln der Hardware-Benutzeroberfläche und der Erfahrung Ihrer Apps zu brechen, kann es sein, dass die Konsistenz Ihrer eigenen Apps gebrochen wird.

Drei Schritte zum konsistenten UI-Design

Grundsätzlich gibt es drei Arten von Konsistenz, die Sie beim Entwerfen Ihrer Web- und mobilen App-Designs berücksichtigen sollten:

1. Halten Sie sich an die Richtlinien und Verhaltensweisen der Geräte-Benutzeroberfläche
2. Bleiben Sie mit anderen ähnlichen Websites oder Anwendungen konsistent
3. Bleiben Sie im Einklang mit Ihrem eigenen Design

Für den Zweck dieses Artikels möchte ich mich mehr auf das Dritte konzentrieren - die Konsistenz in Ihrer eigenen Benutzeroberfläche beibehalten. Dies ist eine große Sache, vor allem, weil Sie Ihre Benutzer in Ihrer eigenen App nicht verwirren oder überraschen möchten.

Sie möchten nicht, dass ein Benutzer von Ihrer Homepage zu einer Unterseite wechselt und unterschiedliche Stile oder sogar sehr unterschiedliche Benutzerinteraktionen sieht. Diese Art von Dingen kann Benutzer überraschen oder in einigen Fällen sogar abschrecken. Konsistenz ist nicht nur eine große Sache für die allgemeine Benutzerfreundlichkeit der Website, sondern kann auch die Conversion erheblich steigern.

Konsistente Struktur und Interaktionen

Dies ist der Schlüssel zum Erstellen einer konsistenten Benutzeroberfläche. Wenn wir uns entwickeln, vergessen wir manchmal, wie sich die Struktur und Interaktion auf die allgemeine Benutzererfahrung auswirken wird. Genauso wichtig wie das Entwerfen und Erstellen von Plänen beim Erstellen eines Hauses oder Gebäudes ist es auch wichtig, eine konsistente, benutzerfreundliche Benutzeroberfläche zu erstellen. Es gibt einige Dinge, über die Sie nachdenken und die Sie im Voraus planen sollten, bevor Sie mit dem Schreiben von Code beginnen.

1. Überlegen Sie, wie Sie Elemente auf Ihrer Website oder App konsistent platzieren können.
2. Überlegen Sie, welche UI-Muster Sie verwenden werden.
3. Planen Sie, welche Eingabeelemente Sie benötigen.
4. Finden Sie heraus, welche Symbole Sie benötigen, und wählen oder entwerfen Sie ein gutes Symbolset, das alle abdeckt.

Die Elementplatzierung ist eine große Möglichkeit, Überraschungen beim Benutzer zu reduzieren und konsistente, zuverlässige Erwartungen zu schaffen. Halten Sie Ihre Navigation am selben Ort, nichts irritiert einen Benutzer schneller als das Verschieben oder Verschwinden von Navigationselementen. Bewahren Sie außerdem Logos und andere Markenartikel auf der gesamten Website an denselben Orten auf.

„Nichts irritiert einen Benutzer schneller als das Verschieben oder Verschwinden von Navigationselementen.“

Wenn Sie eine Seitenleiste verwenden, schütteln Sie die Seitenleiste nicht zu stark, indem Sie die darin enthaltenen Seitenleisten von Seite zu Seite ändern. Einige davon sind möglicherweise für den Inhalt der Seite relevant, vermeiden Sie jedoch das Entfernen oder sogar Verschieben von Importelementen wie Suchformularen. Eine wichtige Sache, die konsistent platziert werden muss, sind die Links oder Schaltflächen für die Anmeldung und Benutzereinstellung.

Betrachten Sie UI-Muster

Planen Sie voraus und überlegen Sie, welche UI-Muster Sie benötigen. Benötigen Sie eine Galerie? Modale? Akkordeons? Seitenleisten? Wenn Sie Entwurfsmuster im Voraus planen, können Sie Ihre App nicht nur schneller entwickeln und entwerfen, sondern auch überlegen, welche Entwurfsmuster Sie benötigen, um Ihre Inhalte im Voraus zu ermitteln. Dies kann Ihnen auch viel Zeit sparen.

Auf diese Weise können Sie auch Probleme lösen und Fragen im Voraus beantworten. Wenn Sie zu einem Abschnitt oder einer Seite Ihrer Website gelangen, für die eine Entscheidung über die Benutzeroberfläche erforderlich ist, haben Sie diese bereits getroffen, und Sie werden nicht dabei erwischt, eine Mischung aus Entwurfsmustern zu erstellen auf Ihrer Website.

Denken Sie auch vorher an Ihre Formulare. Planen Sie, welche Formularelemente Sie benötigen, und finden Sie heraus, welche Elemente Sie nicht benötigen oder ersetzen können. Formularelemente können für Benutzer ohnehin beängstigend oder sogar schwierig zu navigieren sein. Wenn Sie also einige Eingaben entfernen oder austauschen können, die möglicherweise Stolpersteine sind, tun Sie dies.

"Wenn Sie einige Eingaben eliminieren oder austauschen können, die möglicherweise Stolpersteine sind, tun Sie es."

Dies ist auch eine großartige Möglichkeit, die Entscheidungsfindung aus dem Entwicklungsprozess zu entfernen. Wenn Formulare sowohl in Stil als auch in Struktur und Interaktion konsistent bleiben, kann dies manchmal zu einer Conversion-Rate führen.

Planen Sie wieder den Kopf. Planen Sie im Voraus, welche Symbole Sie benötigen. Eine superschnelle Möglichkeit, Ihre Konsistenz zu verbessern, besteht darin, die Hälfte der Entwicklung Ihrer App zu durchlaufen, wenn Sie feststellen, dass Sie Drucksymbole benötigen, und dann zu erkennen, dass Sie sich nicht erinnern können, woher Sie Ihre Symbole haben oder ob Sie dies können Suchen Sie ein Drucksymbol, das mit den übrigen Symbolen übereinstimmt.

Dies ist nicht einmal wirklich ein Stilproblem, sondern ein interaktives. Benutzer gewöhnen sich an das Aussehen bestimmter Symbole und können diese schnell erkennen. Wenn Sie jedoch ein Patchwork-Symbolset verwenden, werden Sie Ihren Benutzer verwirren oder es ihm sogar schwer machen, zu erkennen, was bestimmte Symbole darstellen.

Konsistenter Stil

Der Stil und das Design jedes UI-Elements sind wichtig, und die Wahrung der Konsistenz zwischen ihnen ist auch für den Benutzer wichtig. Ebenso wie es wichtig ist, konsistente Symbole festzulegen, ist es wichtig, dass Ihre App eine umfassende Designkonsistenz aufweist. Sie mögen denken, dass bestimmte Schaltflächen cool sind, obwohl sie nicht annähernd dem allgemeinen Design oder Farbschema der Website entsprechen, aber dies wird Ihren Benutzer nur verwirren und hässlich aussehen.

Beim Entwerfen eines UI-Kits sind einige Dinge zu beachten, um Konsistenz zu schaffen:

1. Farbschema
2. Stil
3. Grenzen
4. Typ und Schriftarten
5. Größe
6. Hintergrundbilder
7. Effekte

Farben

Wie ich bereits sagte, halten Sie Ihre UI-Farbe mit dem Gesamtfarbschema Ihrer Site in Einklang. Achten Sie auch beim Entwerfen von Handlungsaufrufen, bei denen Schaltflächen hervorstechen und bemerkt werden sollen, darauf, dass Ihr Handlungsaufruf nicht zu einem hässlichen Kompliment für Ihr Gesamtfarbschema wird. Verwenden Sie Tools wie Kuler oder ColorSchemer, um Farben auszuwählen, die gut zusammenpassen.

Wenn ich davon spreche, Ihren Stil konsistent zu halten, spreche ich davon, keine verrückte Verlaufsschaltfläche mit Schlagschatten und Abschrägung zu verwenden, wenn der Rest des Site-Designs flach ist und keinen Schatten oder Verlauf aufweist. Bleiben Sie nicht nur im Einklang mit dem gesamten Site-Design, sondern auch im Stil Ihrer UI-Elemente. Wenn Sie eine bestimmte Farbe oder einen bestimmten Schriftstil für Ihre Eingabeetiketten verwenden, bleiben Sie dabei und verwenden Sie ihn für alle Etiketten.

Grenzen

Ahh, Grenzen. Zu oft sehe ich Websites, die drei oder vier verschiedene Schaltflächenranddicken oder -radien verwenden, und dies kann wirklich verwirrend sein. Halten Sie alle Ihre Grenzen für Schaltflächen, Eingaben, Auswahlen, Galerien, Bilder und alle anderen Elemente der Benutzeroberfläche konsistent. Dies bedeutet nicht, dass Sie den Rahmenradius verwenden müssen. Sie können ihn mit einigen Werten verwechseln oder sogar einen Stil für jedes Element konsistent verwenden.

Typ und Schriftarten

Die Verwendung des gleichen Typs und der gleichen Schriftarten in Ihren Elementen ist sehr wichtig, insbesondere beim Umgang mit Formularelementen. Halten Sie die Überschriften konsistent und verwenden Sie nicht viele Schriftarten, auch wenn Sie vielleicht alle mögen. Sie können sie für andere Projekte speichern. Eingaben und Schaltflächen sollten Schriftstile haben, die übereinstimmen oder sich ergänzen, damit Formulare leicht lesbar und vorhersehbar sind.

Größe

Die Größe von Schriftarten und anderen Elementen sollte konsistent oder komplementär zueinander sein. Die Überschriften und Titel der Seiten sollten alle konsistent bleiben, damit Ihr Benutzer weiß, dass diese Textzeilen tatsächlich mit Überschriften und Titeln übereinstimmen. Die konsistente Größe gilt auch für alle Benutzeroberflächenelemente aus Inhaltsbereichen, Links, Navigationselementen oder Seitenleisten. Vermeiden Sie es, die Größe dieser Elemente drastisch zwischen den Seitenaufrufen zu ändern, damit der Benutzer sie beim Laden der Seite sofort erkennen kann.

Hintergrundbilder

Versuchen Sie, Ihre Hintergrundbilder nicht zu stark zu verändern. Dies passiert heutzutage nicht mehr so oft wie früher, aber es ist immer noch eine gute Idee, zu vermeiden, dass Sie Ihre Hintergrundbilder von Seitenansicht zu Seitenansicht ändern. Wenn Sie dies tun, versuchen Sie, das Bild irgendwie miteinander in Beziehung zu setzen, damit die Seiten nicht an Konsistenz verlieren. Das Ändern von Hintergrundbildern, insbesondere von großen, kann dazu führen, dass sich die Site unzusammenhängend anfühlt und der Benutzer das Gefühl hat, die Site sogar vollständig verlassen zu haben. Versuchen Sie also wirklich, diese Versuchung zu vermeiden.

Auswirkungen

Effekte, vor allem Lichteffekte, können dazu führen, dass ein scheinbar großartiges Site-Design für den Benutzer überhaupt keinen Sinn ergibt. Wenn Sie beispielsweise eine Hervorhebung auf der Schaltfläche verwenden, die so aussieht, als ob ein Licht darüber scheint, verwenden Sie denselben Lichteffekt für abgeschrägten Text in Schaltflächen oder abgeschrägten Texteingaben.

Ehrlich gesagt ist dies wirklich kein großes Problem mit dem Benutzer, aber für den wählerischen Betrachter kann es sein, dass er die Inkonsistenz Ihrer Effekte bemerkt und davon abgelenkt wird, das zu tun, was er mit Ihrer App oder Website tun soll.

Sei nicht langweilig

Das Entwerfen auf Konsistenz kann sich manchmal banal oder sogar langweilig anfühlen, und Sie möchten möglicherweise nur etwas in Ihr Design einfügen, um den Benutzer zu überraschen, und das ist wirklich großartig.

Es ist gut, die Benutzer auf Trab zu halten, aber schütteln Sie die Dinge nicht so sehr auf, dass sie so entmutigt oder verwirrt werden, dass sie gehen und woanders hingehen. Ein wenig Konsistenz kann viel bewirken.