Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
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.
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.
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.
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 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.
