Konsistenz in Ihrem UI-Design beibehalten (Grafik)

Konsistenz im UI-Design ist ein altes Schulprinzip und wird in einigen der heutigen Web- und Anwendungsdesigns etwas vergessen. Es scheint, als würden Designer die Konsistenz in ihren Schnittstellen auslassen.

Bei der Entwicklung mobiler Anwendungen entscheiden sich einige Entwickler dafür, die Interaktionen des Hardwarestandards mit ihren eigenen einzigartigen Schnittstellenmustern neu zu erfinden, neu zu erstellen oder sogar vollständig zu brechen. Es ist zwar keine schlechte Idee, die Konsistenz zwischen den Hardware-UI-Regeln und den Erfahrungen mit Ihren Apps zu brechen, aber die Konsistenz Ihrer eigenen Apps kann brechen.

Drei Schritte zum konsistenten UI-Design

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

1. Halten Sie sich an die Richtlinien und Verhaltensweisen der Benutzeroberfläche der Geräte
2. Bleiben Sie im Einklang mit anderen ähnlichen Websites oder Anwendungen
3. Bleiben Sie konsequent 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 vor allem deshalb eine große Sache, weil Sie Ihre Benutzer nicht mit Ihrer eigenen App verwirren oder überraschen möchten.

Sie möchten nicht, dass ein Benutzer von Ihrer Homepage zu einer Unterseite wechselt und ein anderes Styling oder sogar ganz andere Benutzerinteraktionen sieht. Diese Art von Dingen kann die Benutzer überraschen oder in manchen Fällen sogar abschrecken. Die Konsistenz ist nicht nur für die Benutzerfreundlichkeit der Website von großer Bedeutung, sie kann auch die Conversion erheblich steigern.

Konsistente Struktur und Interaktionen

Dies ist der Schlüssel zum Erstellen einer konsistenten Benutzeroberfläche. Bei der Entwicklung vergessen wir manchmal, wie sich Struktur und Interaktion auf die Benutzererfahrung insgesamt auswirken werden. Ebenso wie das Planen von Blaupausen und das Erstellen von Plänen beim Erstellen eines Hauses oder Gebäudes wichtig ist, ist es auch für die Erstellung einer konsistenten, nutzbaren Benutzeroberfläche wichtig. Bevor Sie mit dem Schreiben von Code beginnen, sollten Sie ein paar Dinge beachten und planen.

1. Überlegen Sie, wie Sie Elemente auf Ihrer gesamten Site oder App konsistent platzieren können.
2. Überlegen Sie, welche UI-Muster Sie verwenden.
3. Planen Sie, welche Eingabeelemente Sie benötigen.
4. Finden Sie heraus, welche Icons Sie benötigen, und wählen Sie ein gutes Icon-Set aus, das alle umfasst.

Die Platzierung von Elementen ist ein großer Weg, um die Überraschung des Benutzers zu reduzieren und konsistente, verlässliche Erwartungen zu schaffen. Behalten Sie Ihre Navigationen an derselben Stelle, nichts reizt den Benutzer schneller als das Verschieben oder Verschwinden von Navigationselementen. Bewahren Sie Logos und andere Branding-Elemente an allen Standorten auf der Website 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 sehr, indem Sie den Inhalt der Seitenleiste von Seite zu Seite ändern. Einige davon können für den Inhalt der Seite relevant sein. Vermeiden Sie jedoch das Entfernen oder gar Verschieben von importierten Gesamtelementen wie Suchformularen. Eine große Sache, die Sie konsequent beibehalten können, ist die Verknüpfung mit dem Login und den Benutzereinstellungen.

Beachten Sie UI-Muster

Planen Sie im Voraus und überlegen Sie, welche UI-Muster Sie benötigen. Benötigen Sie eine Galerie? Modals? Akkordeons? Seitenleisten Wenn Sie frühzeitig Entwurfsmuster planen, können Sie Ihre App nicht nur schneller entwickeln und entwerfen, sondern auch darüber nachdenken, welche Entwurfsmuster Sie benötigen. Außerdem können Sie Ihre Inhalte rechtzeitig ausrechnen. Dadurch sparen Sie viel Zeit.

Auf diese Weise werden auch Probleme gelöst und Fragen vorab beantwortet. Wenn Sie zu einem Abschnitt oder einer Seite auf Ihrer Website gelangen, für den eine Entscheidung der Benutzeroberfläche erforderlich ist, haben Sie dies bereits getan und werden nicht dabei erwischt, wie Sie einen Mischmasch aus Designmustern erzeugen auf Ihrer Website.

Denken Sie auch vorher über Ihre Formulare nach. Überlegen Sie sich, welche Formularelemente Sie benötigen, und ermitteln Sie die Elemente, die Sie nicht benötigen oder ersetzen können. Formularelemente können für Benutzer ängstlich oder sogar knifflig sein, wenn Sie trotzdem navigieren möchten. Wenn Sie also Eingaben, die möglicherweise Stolpersteine sind, eliminieren oder austauschen können, tun Sie dies.

Wenn Sie einige Eingänge, die möglicherweise Stolpersteine sind, beseitigen oder austauschen können, tun Sie dies.

Dies ist auch eine hervorragende Möglichkeit, die Entscheidungsfindung aus dem Entwicklungsprozess zu entfernen. Wenn Form, Struktur und Interaktion der Formulare konsistent bleiben, kann dies manchmal zu einer Conversion-Rate führen oder diese brechen.

Wieder planen Sie den Kopf. Planen Sie die Symbole, die Sie vorab benötigen. Eine sehr schnelle Möglichkeit, Ihre Konsistenz zu vermasseln, ist die Hälfte der Entwicklung Ihrer App, wenn Sie feststellen, dass Sie Drucksymbole benötigen, und dann feststellen, dass Sie sich nicht mehr daran erinnern können, wo Sie Ihre Icons haben oder sogar, wenn Sie können Finden Sie ein Drucksymbol, das dem Rest Ihrer Symbole entspricht.

Dies ist nicht einmal ein Stilproblem, sondern ein interaktives. Die Benutzer werden sich an das Aussehen bestimmter Symbole gewöhnen und sie schnell erkennen können. Wenn Sie jedoch ein Patchwork-Icon-Set verwenden, verwirren Sie Ihren Benutzer oder machen es ihnen schwer, zu erkennen, was bestimmte Icons darstellen.

Konsistenter Stil

Der Stil und das Design jedes Oberflächenelements ist wichtig, und die Beibehaltung der Konsistenz zwischen den Elementen ist auch für den Benutzer wichtig. So wie es wichtig ist, ein einheitliches Symbol festzulegen, ist es wichtig, dass Ihre App eine einheitliche Design-Konsistenz aufweist. Sie können denken, dass bestimmte Schaltflächen cool sind, auch wenn sie nicht annähernd dem gesamten Design oder Farbschema der Website entsprechen, aber dies wird Ihren Benutzer nur verwirren und sieht hässlich aus.

Beim Entwerfen eines UI-Kits müssen einige Punkte beachtet werden, um Konsistenz zu schaffen:

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

Farben

Wie bereits gesagt, halten Sie Ihre UI-Farbe im Einklang mit dem Farbschema Ihrer Website. Achten Sie auch bei der Gestaltung von Handlungsaufrufen, bei denen Sie möchten, dass Tasten hervorstechen und auffallen, auf keinen Fall, dass Ihr Handlungsaufruf ein hässliches Kompliment für Ihr gesamtes Farbschema ist.Verwenden Sie Tools wie Kuler oder ColorSchemer, um bei der Auswahl der Farben zu helfen, die gut zusammenpassen.

Wenn ich darüber spreche, dass Ihr Stil konsistent bleibt, spreche ich davon, dass Sie keine verrückten Farbverläufe verwenden, wenn der Rest des Website-Designs flach ist und keinen Schatten oder Farbverlauf aufweist. Bleiben Sie nicht nur konsistent mit dem gesamten Website-Design, sondern auch mit dem Stil Ihrer Benutzeroberflächenelemente. Wenn Sie eine bestimmte Farbe oder einen bestimmten Schriftstil für Ihre Eingabeetiketten verwenden, bleiben Sie dabei und verwenden Sie sie für alle Etiketten.

Grenzen

Ahh, Grenzen. Zu oft sehe ich Websites, die drei oder vier verschiedene Randstärken oder -radien für Knöpfe verwenden, und dies kann wirklich verwirrend sein. Behalten Sie alle Rahmen für Schaltflächen, Eingaben, Auswahlmöglichkeiten, Galerien, Bilder und alle anderen Elemente der Benutzeroberfläche im Einklang. Das bedeutet nicht, dass Sie den Randradius verwenden müssen. Sie können den Wert mit einigen Werten mischen oder sogar einen Stil für jedes Element verwenden.

Schrift und Schriftarten

Die Verwendung des gleichen Typs und der gleichen Schriftarten in Ihren Elementen ist sehr wichtig, insbesondere wenn Sie mit Formularelementen arbeiten. Halten Sie die Kopfzeilen konsistent und verwenden Sie nicht viele Schriftarten, auch wenn Sie alle mögen - Sie können sie für andere Projekte speichern. Eingaben und Schaltflächen sollten zueinander passende oder passende Schriftstile haben, damit Formulare leicht lesbar und vorhersehbar sind.

Größe

Die Größe von Schriftarten und anderen Elementen sollte konsistent oder komplementär sein. Die Kopfzeilen und der Seitentitel sollten konsistent bleiben, damit Ihr Benutzer weiß, dass diese Textzeilen tatsächlich mit Kopfzeilen und Titeln übereinstimmen. Die konsistente Größe gilt auch für jedes Oberflächenelement aus Inhaltsbereichen, Links, Navigationselementen oder Seitenleisten. Vermeiden Sie es, die Größe dieser Elemente so zu ändern, dass sie zwischen den Seitenansichten drastisch geändert werden, damit der Benutzer sie beim Laden der Seite sofort erkennen kann.

Hintergrundbilder

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

Auswirkungen

Effekte, vor allem Beleuchtungseffekte, können dazu führen, dass das, was ein tolles Site-Design zu sein scheint, für den Benutzer überhaupt nicht sinnvoll ist. Wenn Sie beispielsweise auf der Schaltfläche eine Hervorhebung verwenden, die aussieht, als ob ein Licht darauf scheint, verwenden Sie den gleichen Beleuchtungseffekt für abgeschrägten Text in Schaltflächen oder abgeschrägte Texteingaben.

Um ehrlich zu sein, ist dies nicht wirklich eine große Sache oder brechen den Umgang mit dem Nutzer, aber für den wählerischen Betrachter können sie die Inkonsistenz Ihrer Effekte bemerken und davon ablenken, was sie mit Ihrer App oder Website tun sollen.

Sei nicht langweilig

Design für Konsistenz kann sich manchmal banal oder sogar langweilig anfühlen und Sie möchten vielleicht einfach etwas in Ihr Design werfen, 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, dass sie so entmutigt oder verwirrt werden, dass sie gehen und woanders hingehen. Ein wenig Konsistenz kann einen langen Weg gehen.