Die 3 Cs der Benutzeroberflächen Farbe, Kontrast und Inhalt

Es gibt ein altes Geschäftsmodell, in dem viele Geschäftsstrategen von den 3 Cs leben. Es ist eine Erinnerung an das Unternehmen, Kunden und Wettbewerber. Viele kleine Unternehmen und Websites verwenden dieses Modell ebenfalls. Für Designer sind die drei Cs jedoch etwas anders.

Beim Erstellen von Benutzeroberflächen sollten Sie sich auf Farbe, Kontrast und Inhalt konzentrieren. Diese drei Elemente bilden die Grundlage für gutes Design. Aber jedes ist etwas komplexer, als es von der Oberfläche her erscheint. So denken Sie über die drei Cs der Benutzeroberflächen nach und integrieren sie in Ihre Konstruktionsprojekte.

Farbe

Farbe ist eines der offensichtlichsten visuellen Elemente für die meisten Benutzer. Designer und Nicht-Designer können gleichermaßen über Farbe sprechen und darüber, ob eine bestimmte Farbe oder Farbpalette sie anspricht.

Farbe kann verschiedene emotionale Verbindungen ganz ohne sich selbst erzeugen. Sie können fast jedem ein Farbfeld oder einen Chip geben und eine Reaktion auf die sichtbare Farbe erhalten. Es ist auch ein lustiges Designelement, da persönliche Vorlieben und Designvorlieben sich im Laufe der Zeit nahezu universell verschieben.

Farbe kann ein Design aus vielen Gründen herstellen oder zerstören, aber in erster Linie macht es so viele Dinge und bietet dem Benutzer gleichzeitig so viele visuelle Hinweise, dass Sie es nicht ignorieren können.

Farbauswirkungen:

  • Benutzerfreundlichkeit und Lesbarkeit
  • Markenerkennung und -bewusstsein
  • Wo Benutzer suchen und interagieren
  • Organisations- und Benutzerfluss
  • Gesamterfolg des Designs

Verwenden Sie Farbe zum Erstellen:

  • Navigation ist klar und verständlich
  • Intuitive Interaktionen
  • Eine Stimmung für das Projekt
  • Erstellen Sie starke Handlungsaufforderungen oder verwendbare Elemente
  • Stellen Sie ein Gefühl dafür auf, worum es beim Design geht, wie z. B. Realität vs. Fantasie

Dies mag alles nach einer hohen Ordnung für etwas so Einfaches wie eine Mischung aus Rot, Grün und Blau aussehen.

Also, wo fängst du an? Die wichtigste Variable in Bezug auf Farbe ist wohl die Erstellung einer Palette, die die Benutzer anspricht und sich mit dem Inhalt des Designs befasst (wie Branding und Stimmung). Beispielsweise würde eine Website für Coca-Cola, bei der Blau als dominierende Farbe anstelle von Rot verwendet wird, den Nutzern einen Schrei versetzen.

Eine durchgehende Farbpalette wurzelt in den Prinzipien der Farbtheorie.

Eine durchgehende Farbpalette wurzelt in den Prinzipien der Farbtheorie. Sie brauchen nicht mehr als ein paar Farben, damit es funktioniert. Zwei bis drei Farben und eine gute Bibliothek mit helleren und dunkleren Variationen sind ausreichend. Mockplus empfiehlt die 6: 3: 1-Regel: Wählen Sie drei Farben für eine Palette aus, darunter eine dominierende Farbe, die zu 60 Prozent verwendet wird, eine Sekundärfarbe, die zu 30 Prozent verwendet wird, und eine Akzentfarbe, die in den verbleibenden Farben verwendet werden kann 10 Prozent des Designs. Die Regel wurzelt im Goldenen Schnitt, einer tragenden Säule der Designtheorie und kann ein guter Ausgangspunkt sein.

Hier eine weitere Regel zum Erstellen von Farbpaletten in Benutzeroberflächen: Beginnen Sie mit Schwarzweiß. Wenn das Design ohne Farbe verwendet werden kann, funktioniert es wahrscheinlich, sobald die Farbe hinzugefügt wurde. Die schwarz-weiße Kontur gibt Ihnen auch eine gute Vorstellung davon, wie Sie Farben mit ausreichendem Kontrast auswählen (das zweite C), um die Benutzerfreundlichkeit zu verbessern.

Kontrast

Kontrast schafft eine Unterscheidung zwischen Elementen. Es hilft visuelle Hierarchie und Scanbarkeit zu schaffen und trägt dazu bei, wie leicht etwas schnell verstanden werden kann. Elemente mit starkem Kontrast ermöglichen es dem Benutzer, von einer Sache zur nächsten zu blicken, wodurch ein natürliches visuelles Muster und ein Benutzerfluss erzeugt werden.

Der Grund dafür ist für das Design der Benutzeroberfläche so wichtig, dass er zu allem gehört, was Sie tun. Wie Sie Kontrast erzeugen, hängt von der Art des betreffenden visuellen Effekts ab.

Sie können einen Kontrast herstellen mit:

  • Farbe
  • Größe
  • Richtung
  • Platz
  • Gestalten

Ein zentrales Element der Richtlinien für die Barrierefreiheit ist dagegen der Kontrast, da Benutzer sicherstellen können, dass ein Element im Design voneinander unterschieden wird. Das A11Y-Projekt mit dem Ziel, die Barrierefreiheit im Web zu vereinfachen, hat folgende Empfehlung: Beginnen Sie mit dem Farbkontrast, indem Sie Farben aus verschiedenen Segmenten des Farbkreises verwenden oder kontrastierende Farben verwenden. Denken Sie daran, dass Komplementärfarben - Gegensätze auf dem Farbkreis - maximalen Kontrast bieten.

Dasselbe Konzept gilt auch für die Schaffung von Kontrast zwischen anderen Elementen. Wählen Sie Schriftarten aus verschiedenen Familien oder verwenden Sie drastisch unterschiedliche Größen, damit Benutzer die Wörter schnell lesen können.

Kurz gesagt, die Idee hinter Kontrast ist, dass Gegensätze anziehen.

Verwenden Sie Richtungszeichen, Pfeile oder Bilder mit Bewegung, um den Benutzer zu zwingen, in eine bestimmte Richtung zu blicken, und drehen Sie dann den Richtungshinweis für noch mehr Kontrast.

Der Unterschied zwischen engen und offenen Räumen schafft viel Kontrast. Wenn Sie sicherstellen möchten, dass Ihr Text leicht zu sehen und zu lesen ist, geben Sie ihm etwas mehr Platz, um auf ihn aufmerksam zu machen.

Kurz gesagt, die Idee hinter Kontrast ist, dass Gegensätze anziehen. Scheinbar unterschiedliche Elemente können tatsächlich zusammenarbeiten, sodass beide auf einen Blick gut zu sehen sind.

Wenn Sie wissen möchten, ob der Kontrast in der von Ihnen beabsichtigten Weise funktioniert, sollten Sie beim Betrachten der Elemente auf dem Bildschirm einige Faktoren berücksichtigen:

  • Lesbarkeit: Sind alle Wörter und Bilder leicht zu sehen und zu lesen?
  • Klarheit: Ist es leicht, ein Element von einem anderen zu unterscheiden?
  • Barrierefreiheit: Funktioniert es für so viele Menschen wie möglich?
  • Umgebung: Können Benutzer das Design an den Orten sehen und verstehen, an denen es verwendet wird?

Inhalt

Das letzte der drei Cs ist zufrieden. Das Design der Benutzeroberfläche kann nur so gut sein wie die darin enthaltenen Informationen. Der Inhalt umfasst alles von Bildern über Text zu Illustrationen und Symbolen bis hin zu Logos und Marken. Der Inhalt umfasst auch Video und jedes Stückchen von der vollständigen Nachrichtenübertragung oder Erzählung über Blogbeiträge bis hin zu kleinen Mikrokopien.

Nur Inhalte zu haben reicht nicht aus. Sie müssen hervorragende Inhalte haben.

Alle diese Elemente vereinen die Geschichte, was Ihr Design und Ihre Benutzeroberfläche besonders macht. Warum sollten Benutzer Ihnen Zeit geben, anstatt etwas anderes zu tun?

Und nur Inhalte zu haben reicht nicht aus. Sie müssen hervorragende Inhalte haben. Hochauflösender Inhalt Hochwertiger Inhalt Ihre Inhalte müssen besser / größer / spezieller sein als vergleichbare Inhalte, die um die Aufmerksamkeit der Nutzer konkurrieren.

Das kann eine große Herausforderung sein, aber die meisten Designer können diesen Inhalt erstellen, indem sie sich selbst und ihrer Marke und ihrem Messaging treu bleiben. Bleib bei dem, was du bist und was du weißt. Benutzer werden diese Authentizität sehen und hoffentlich wertschätzen, indem sie Zeit mit Ihrem Design verbringen.

Fazit

Jetzt, da Sie mit den alten drei Cs des Unternehmens - Unternehmen, Kunden und Konkurrenten - und drei Cs des Benutzeroberflächendesigns - Farbe, Kontrast und Inhalt - ausgestattet sind, haben Sie die Werkzeuge und das Wissen, um ein Designprojekt zu erstellen, das nicht in dieser Welt ist gut. (Oder zumindest sehr gut verwendbar.)

Wenn Sie beide Strategien in Design-Projekte einbinden, müssen Sie sich überlegen, wie Sie etwas erstellen können, von dem der Websitebesitzer und der Benutzer profitieren. Sie gestalten nicht nur das Design, sondern auch die Funktionalität.

Hinweis: Alle Beispiele in diesem Artikel stammen aus der Design Shack Gallery. Achten Sie darauf, sich umzusehen; Es ist voll von großartiger Arbeit und Inspiration.