Tech Shorty

TechShorty: Quick Design Refresh – oder: UX Design als DIY

: Julia Reuter, Expertin für UX Design, erklärt uns, wie auch Nicht-Designer schnell die Nutzeroberfläche ihrer Webseite verbessern können

Das Thema UX Design in der Industrie 4.0 gewinnt immer mehr an Bedeutung. Designer rücken an den Anfang eines Prozess, erkennen Probleme, definieren Prozesse, schreiben Projektbriefings und entwickeln letztendlich die Produkte. 

Eine schöner Trend, welcher jedoch leider noch nicht überall als fester Bestandteil der Produktentwicklung verstanden wird. Es sind noch unzählig nutzerunfreundliche, im Design veraltete Webseiten und Software im Umlauf. Dabei kann ein gutes Design so viel Mehrwert bieten!

Tipps für Nicht-Designer, schnell das UI zu verbessern

Die Vorteile einer durchdachten und ansprechenden Nutzeroberfläche liegen auf der Hand:

  • Nutzer kommen schneller an ihr Ziel (Zeitersparnis)
  • Nutzer/Besucher sind zufriedener durch mehr Nutzerfreundlichkeit
  • Die Motivation, die Webseite zu besuchen oder die Software zu benutzen, steigt
  • Die Qualität und Markenwahrnehmung (Branding) werden positiv beeinflusst

Start now! Besser klein anfangen, anstatt alles beim Alten zu belassen!

Beispiel zur Veranschaulichung

Anhand der Beispielseite GWiki zeige ich euch, wie man mit einfachen Design-Tricks die Usability verbessert und das Interface (UI) modernisiert. Ich nehme in diesem Beispiel keine Veränderung am Aufbau oder an der Struktur der Seite vor, auch wenn konzeptionelle Veränderungen direkt mit einfließen dürften.

 

So sieht GWiki aktuell aus. Ein veraltetes und sehr einfaches Interface.

Schritt 1: Schrift & Gewicht

Hierarchien entstehen durch Veränderungen an Schrift und Gewicht. Häufig werden zu viele verschiedene Schriftgrößen verwendet. Hier sollte man lieber mit dem Font-Weight und der Farbe arbeiten, um Dinge hervorzuheben. Für den Primary Content wähle ich hier eine dunkle Farbe, für Secondary Content eine hellere Farbe und so weiter.

2-3 Farben und 2-3 Font-Weights verwenden

Es sollten keine zu dünne oder leichte Schriften verwendet werden, da die Lesbarkeit darunter leiden kann. Hierfür gibt es Tools, die harmonische oder auch konträre Farbpaletten generieren. Zusätzlich können überflüssige Elemente einfach gelöscht werden um etwas mehr Whitespace zu generieren.

 

An erster Stelle: Schrift, Gewicht und Farben. Die Schrift im Mittelteil rüttelt sich übrigens im Laufe der Sache noch zurecht.

Schritt 2: Rahmen und Linien reduzieren

Unterscheidungen zwischen verschiedenen Bereichen kann man auch ohne Linien erzielen. Man sollte lieber versuchen, so weit es geht ohne oder nur mit sehr wenigen Linien zu arbeiten, denn zu viele Linien können das Design überladen. Folgende Optionen sind eine sinnvolle Alternative zu Linien:

  • Schatten: können Flächen sehr schön umrahmen ohne eine Linie zu verwenden
  • Leicht voneinander abgrenzbare Flächenfarben: Elemente werden dadurch voneinander getrennt
  • Abstände zwischen Elemente erhöhen und/oder Spacing hinzufügen: funktioniert gut bei gruppierten Elementen wie z. B. Menüs

Schritt 3: Anpassung von Farbe, Logos, Icons

In diesem Schritt habe ich die Farben leicht angepasst und insbesondere den Blauton erhellt. Bei Farbanpassungen sollte insbesondere auf den Kontrast zwischen Hintergrundfarben und  Schriftfarbe sowie auf die Gewichtung geachtet werden. Eine gute Lesbarkeit steht hier im Vordergrund. In diesem Beispiel war zum Beispiel der Kontrast zwischen dem Hintergrund und dem Link zu gering.

Aber nicht nur die Farbe und die Linien haben sich verändert, sondern zusätzlich noch diese Elemente:

  • Logo: da das Logo veraltet war, wurde es durch einen klaren Schriftzug ersetzt
  • Icons: die Icon-Optik war veraltet, insbesondere die Rahmen durch die Verlinkung war in der vorhandenen Form nicht mehr notwendig. Deswegen habe ich sie durch kostenlos verfügbare Icons aus Icon Set Libraries ersetzt. An dieser Stelle ist es wichtig, auf eine einheitliche Optik zu achten und am Besten zusammengehörige Sets zu verwenden.

 


Hier ist das Ergebnis der Schritte 2 und 3. Linien, Farben, Icons und das Logo wurden verändert.

Schritt 4: Einteilung und Anordnung der Elemente

In diesem Schritt liegt das Hauptaugenmerk auf der Einteilung und Anordnung der einzelnen Elemente. Ich habe viel Spacing hinzugefügt um die Gruppen optisch voneinander zu trennen. Zusätzlich sind farbige Linien beim Link sowie bei den Flächen dazu gekommen, um diese besonders hervorzuheben und das Design aufzuwerten.

 

Schritt 4: Spacing und die richtige Anordnung der Elemente schaffen Ordnung und Übersichtlichkeit.

Step 5: Feinschliff & Calls to Action (CTA)

Es folgt der Feinschliff. Da der Benutzer den Inhalt einer Webseite zu 70 % nur über Bilder und Grafiken aufnimmt, sind im Rahmen dieses Schrittes weitere Icons hinzugekommen. Schatten trennen die Bereiche jetzt noch klarer voneinander. Ein wichtiger und elementarer Bestandteil jeder Webseite sind außerdem die Calls to Action (Buttons). Bei der Farbwahl dieser Buttons gibt es einige Punkte, auf beachtet werden sollten:

  • WICHTIG: Farben passend zur Funktionalität des Buttons einsetzen: Grün = positiv (z. B. für die Funktion „Speichern“); Rot = alarmierend (z. B. für die Funktion „Löschen“)
  • Mit Hilfe von Farbe und Kontrast kann eine Hierarchie erzeugt werden:
    • 1. Ebene: wichtige, prominente Buttons mit hohem Kontrast
    • 2. Ebene: Linien anstelle von Farbflächen oder weniger Kontrast
    • 3. Ebene: Text mit Linkfarbe oder unterstrichener Text

Zusammenfassung

Und hier findet ihr den Vorher-Nachher-Vergleich. Ihr seht: Mit Hilfe von mehreren kleinen Eingriffen wie zum Beispiel an Farbe, Spacing oder Grafiken lässt sich eine insgesamt große Veränderung erzeugen, welche dem Nutzer/Besucher ein schöneres Erlebnis verschafft.

 

Finales Ergebnis. Viel besser, oder?

 

Julia Reuter