Denk weniger. Besser gestalten.

Verbesserte Arbeitsabläufe im UI-Design durch kontrollierbaren Entscheidungs- und Denkprozess.

Eine gut gestaltete Benutzeroberfläche ist das Ergebnis einer Reihe von Schlüsselentscheidungen, die eine Benutzererfahrung nicht nur intuitiv, sondern auch ästhetisch ansprechend machen. Indem Sie den Entscheidungsprozess rationalisieren, können Sie den Workflow vereinfachen und die Chance erhöhen, das optimale Ergebnis zu erzielen.

Je mehr Möglichkeiten im Entwurfsprozess zur Verfügung stehen, desto mehr Denkvermögen und Finesse sind für die Ausführung erforderlich.

Der amerikanische Psychologe Barry Schwartz schrieb in The Paradox Of Choice, dass das Eliminieren von Entscheidungen die Angst erheblich verringern kann. Er argumentierte, dass wir Standards und Kriterien haben sollten, sich aber keine Sorgen darüber machen sollten, ob es etwas Besseres geben könnte. Es war im Kontext der Verbraucher, aber ich glaube, es gilt auch für Designentscheidungen.

Die Strategie zur Maximierung besteht eigentlich darin, kein Perfektionist zu sein, sondern die günstigsten Entscheidungen zu treffen, die gemeinsam das optimale Erlebnis schaffen.

1. Variablen begrenzen

Wenn wir alle möglichen Variablen berücksichtigen, um ein High-Fidelity-Konzept zu erstellen, und es kann viele geben, wird klar, dass wir sie frühzeitig begrenzen und definieren müssen. Eine Reduzierung der verfügbaren Auswahlmöglichkeiten erleichtert die Entscheidungsfindung.

Mit der Erfahrung wird es einfacher, vorherzusagen, wie sich die Einschränkung bestimmter Gruppen von Variablen auf die gesamte Komposition auswirkt.

Das Reduzieren der Auswahlmöglichkeiten entspricht nicht dem Reduzieren der Originalität. Wir gehen davon aus, dass das Erstellen von Konzepten anhand vordefinierter Regeln eine Einschränkung darstellt. Als Designer können wir jedoch unsere eigenen Regeln festlegen und die vollständige Kontrolle über deren Formulierung haben.

Maßstab & Abstand

Jede Facette des UI-Designs sollte sich auf ein System konzentrieren, das den Rhythmus fördert und dazu beiträgt, die Konsistenz in Größe und Raum aufrechtzuerhalten, wenn ein Projekt wächst. Ein solches System, das ich gerne verwende, ist die modulare Skalierung, die es ermöglicht, die Größe eines Elements oder eines negativen Raums in einer Komposition anhand eines bestimmten Verhältnisses zu messen oder festzulegen.

Sobald wir ein Verhältnis ausgewählt haben, können Skalierung und Abstand mithilfe der modularen Skalierung leichter definiert werden

Es kann zwar die Variablen für Raster, Typografie, vertikalen Abstand und die Gesamtabmessungen eines Layouts auf ein überschaubares Maß reduzieren, bietet jedoch auch eine ansprechende Ästhetik und einen ansprechenden Rhythmus. Das Entwerfen der Benutzeroberfläche ist viel einfacher.

Gitter

Rastersysteme eignen sich hervorragend, um die Organisation von Inhalten in der horizontalen Ebene einzuschränken, und sind in Bezug auf die Benutzeroberfläche ein Kinderspiel. Ein Raster wird jedoch oft ohne allzu große Überlegungen ausgewählt, um eine Einheitsgröße zu erhalten. Was die meisten Designer nicht erkennen, ist, dass es besser ist, ein Rastersystem zu erstellen, das auf dem Inhalt aufbaut.

Ein Rastersystem reduziert Variablen im Layout

Dies bedeutet, im Voraus ein klares Verständnis der Inhaltsszenarien zu haben, um ein Bild davon zu erhalten, wie der Inhalt aus einem bestimmten Raster besser bereitgestellt werden kann. Denken Sie an die geschäftlichen Einschränkungen bei bereits vorhandenen Assets und Markenleitfäden, z. B. bei einem Logo mit bestimmten Abstandsregeln und -anforderungen, oder bei Anzeigen mit bestimmten festen Einheiten.

Die Art des Inhalts ist ebenfalls ein Faktor. Es gibt einen großen Unterschied zwischen der Gestaltung eines Layouts für einen Shop, eine Nachrichtenpublikation oder ein Blog oder eine einfache Begrüßungsseite. Ein Layout, das bildlastig gegenüber wortlastig ist. Es könnte hilfreich sein zu verstehen, wie sich Augenmuster auf die visuelle Hierarchie auswirken.

Je besser Sie die geschäftlichen und inhaltlichen Einschränkungen im Voraus verstehen, desto einfacher ist es, ein Rastersystem auszuwählen und Layoutentscheidungen zu treffen.

Typografie

Ich würde argumentieren, dass Typografie der wichtigste Aspekt des UI-Designs ist, da sie bis zu 95% des Webs ausmachen und die treibende Kraft der Kommunikation sein kann.

Während Systeme wie die modulare Skalierung auf Größe und Zeilenabstand angewendet werden können, können auch Schriftfamilien und Schriftstile eingeschränkt werden. Eine Benutzeroberfläche sollte niemals mehr als zwei Familien und ein paar Gewichte benötigen. Die Regeln können auch dahingehend erweitert werden, wie mit Rechtfertigung und Groß- und Kleinschreibung umgegangen wird.

Farbe

Es ist leicht, mit Paletten übereifrig zu werden. Eine kleine Auswahl an Tönen kann dazu beitragen, eine ausreichende und konsistente Bildwiedergabe zu erzielen. Normalerweise brauchen wir für einen Startpunkt nur fünf Farbfelder.

Mit Tools wie Adobe Color CC können Sie ganz einfach eine Palette vordefinieren

Die meisten Marken sollten eine Primär- oder Akzentfarbe und ein paar neutrale oder kontrastreiche Töne enthalten, um dies zu ergänzen. Vor allem zu Beginn brauchen wir keine 15 Schattierungen eines Tons. Es ist besser, klein anzufangen und ein oder zwei Schattierungen später zu erhöhen.

Bilder

Wie wir Bilder in die Benutzeroberfläche integrieren, hängt weitgehend vom Kontext des Inhalts ab. Wenn wir eine ungefähre Vorstellung davon haben, können wir einen Ausgangspunkt für unsere Bilder mit Variablen für Verhältnis, Größe, Form und Behandlung erstellen. Wir werden vielleicht feststellen, dass wir nicht so viele brauchen.

Durch die Einschränkung unserer Bildvariablen wird eine bessere Konsistenz erzwungen und die langfristige Verwaltung von Bildressourcen vereinfacht. Gleiches gilt für die Ikonographie.

Wie viele Variationen in Verhältnis und Größe für Bilder benötigen wir tatsächlich?

2. Styleguide früher erstellen

Während ein UI-Projekt konzeptionell wächst, wird es immer wichtiger, einen Style Guide oder eine Musterbibliothek zu erstellen und zu verwalten. Auf diese Weise werden Gestaltungsprinzipien festgelegt, die der Projektskalierung helfen und Rhythmus und Konsistenz beibehalten. Wenn wir Variablen im Voraus definieren, ist dies eine gute Möglichkeit, sie zu dokumentieren. Zukünftige Entscheidungen werden mit einem Styleguide einfacher als ohne einen.

Je nach Projekt ist das Erstellen eines Styleguides ein Luxus und wird häufig als Referenz für die Zukunft verwendet. Aus diesem Grund werden die meisten Styleguides in letzter Minute oder nach Abschluss des Projekts zusammengestellt. Dies ist immer noch eine gute Praxis. Nachträgliche Rationalisierungen und Überlegungen für einen Styleguide zur Unterstützung des künftigen Designs und der künftigen Entwicklung sind zwar ausreichend, sie können jedoch dazu beitragen, die Wiedergabetreue in den frühen Phasen der Konzeptualisierung zu verbessern.

Wenn Sie gleich zu Beginn einen grundlegenden Styleguide erstellen, werden nicht nur Grundsätze frühzeitig festgelegt, um Entwurfsentscheidungen zu reduzieren, sondern auch als Infrastruktur zur Weiterentwicklung und Erweiterung von Grundsätzen für die Zukunft beitragen.

Eine zu erstellen, bedeutet nicht, dass sie vollständig sein muss - bei weitem nicht. Stile entwickeln sich ohnehin eher im Anfangsstadium, und je größer ein Projekt ist, desto klarer und enger werden die Grenzen.

3. Modulbasierte Priorität und Anpassung

In modularen Entwurfssystemen wie Brad Frosts Atomic Design kann ein Layout aus bestimmten Schlüsselbereichen formuliert werden. Module können in verschiedenen Layouts wiederverwendet werden. Schnittstellen werden als Systeme und nicht als Seiten behandelt, wobei musterbasiertes Design und Entwicklung einen großen Teil des Prozesses ausmachen.

Dies ist eine großartige Methode, die das UI-Design viel einfacher zu handhaben macht. Um es jedoch effektiver zu machen, müssen wir die Schlüsselbereiche priorisieren und alles andere um sie herum anpassen. Dies stellt wiederum eine visuelle Kohärenz sicher.

Schlüsselbereiche identifizieren

Unser Design sollte sich um die wichtigen Teile drehen. Die Priorität jedes Bereichs wird durch den Inhalt oder die Funktionalität innerhalb der Benutzeroberfläche bestimmt und ist im Wesentlichen der Schlüssel zum Rätsel.

Indem wir uns zuerst auf die wichtigen Bereiche konzentrieren, reduzieren wir die Entwurfsentscheidungen danach, da nachfolgende Bereiche gebogen werden und sich an die etablierte Umgebung anpassen müssen.

Schwerpunkt auf Schlüsselbereichen

Sobald Bereiche mit hoher Priorität identifiziert wurden, geht es darum, sich auf die kritischen Teile zu konzentrieren und sie bis zur Fertigstellung zu verfeinern. Die Idee ist, sicherzustellen, dass sie intuitiv sind und alle Anforderungen erfüllen, bevor die weniger wichtigen Bereiche angepasst werden.

4. Damit es für alle funktioniert

Seit Tausenden von Jahren bemühen sich Designer, eines zu tun - effektiv zu kommunizieren. Wir erfinden ständig neue Wege und optimieren diese, um die visuelle und akustische Kommunikation mit dem Publikum zu verbessern.

Mit dem stetig wachsenden Zugang zu Informationen für ein möglichst breites Publikum ist es unerlässlich, die Zugänglichkeit für möglichst viele Arten von Personen zu maximieren.

Zugänglichkeit ist ein Segen in der Verkleidung

Ein breiteres Publikum anzusprechen, klingt nach mehr Arbeit, und es ist verlockend, Barrierefreiheit als Hindernis für Innovation zu sehen. Die Einhaltung der neuesten Standards kann jedoch ein Glücksfall sein, insbesondere wenn sie zur zweiten Natur werden.

In Bezug auf das Design könnte dies beispielsweise bedeuten, dass eine Mindestschriftgröße für die Arbeitskopie oder ein erheblicher Kontrast zwischen Kopie und Hintergrund oder größere, verlinkbare Bereiche auf Touch-Geräten erforderlich sind.

Es geht nicht nur um Behinderungen

Barrierefreiheit richtet sich nicht nur an Benutzer mit Behinderungen, sondern auch an Benutzer mit älteren Geräten und Browsern, die nicht alle aktuellen Funktionen und Verbesserungen unterstützen. Wenn Sie sich dieser Standards bewusst sind und sie einhalten, werden Sie auf natürliche Weise weniger Entscheidungen zum Design treffen.

5. Verwenden von bewährten Mustern

Tatsache ist, dass Benutzer Benutzeroberflächen intuitiv finden, wenn sie sich an die Hunderte von gängigen Designmustern halten, die sie aus jahrelanger Praxis und Exposition kennen. Sobald wir anfangen, uns von typischen Formen zu lösen und neue Wege zu beschreiten, kann es einige Zeit dauern, bis ein neues Muster für die Masse völlig intuitiv wird.

Es gibt eine Zeit und einen Ort für die Erstellung von Original-UI-Mustern, aber wir sollten uns nicht vor gängigen Techniken scheuen - sie sind aus einem bestimmten Grund erfolgreich.

Mit dem Silberstreifen können wir uns weniger um Neuerfindungen kümmern und uns auf die Ästhetik konzentrieren. Es ist weiterhin möglich, Originalarbeiten auf der Grundlage von festgelegten Mustern zu erstellen.

Je mehr wir erfolgreiche Designmuster kennenlernen und integrieren, desto weniger Entscheidungen müssen wir als Designer treffen. Wir überlegen nicht unbedingt, was funktionieren könnte, sondern was funktionieren wird.

Schlussbemerkung

Einige dieser Ansätze beeinträchtigen unser Denken und unsere Entscheidungsfindung möglicherweise nicht wesentlich oder verbessern unsere Entwürfe um ein Vielfaches. Wenn Sie sie jedoch zusammen verwenden und dabei auch ein gutes Feedback erhalten, kann das Entwerfen einer besseren Benutzeroberfläche erheblich vereinfacht werden.

Folge mir auf Twitter