Tipps, wie man als Nicht-Designer schnell das Interface verbessern kann

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!

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.

Hier findet ihr die Screens der einzelnen Design-Schritte.

Das Video zu diesem Beitrag könnt ihr euch hier anschauen.

Ihr möchtet es lieber nachlesen? Dann scrollt weiter runter und ich erkläre Step für Step welche Veränderungen ich vorgenommen habe.

Viel Spaß!

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

Step 0

GWiki Micromata UX Design Web

Step 1

Schrift & Gewicht 

Hierarchien entstehen durch Veränderungen an Schrift und Gewicht. Ein Fehler den man häufig macht: Zu viele verschiedene Schriftgrößen verwenden. 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 heller und so weiter.

2-3 Farben sowie 2-3 Font-Weight verwenden

Es sollten keine zu dünne / 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 erhalten.

GWiki Micromata UX Design Web

Hier sieht man die ersten Schritte, die vorgenommen wurden.Schrift, Gewicht und Farben.

Step 1

Step 2

Rahmen und Linien weg 

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.

Es gibt verschiedene Optionen als Linienalternative:

  • Schatten: Können Flächen sehr schön umrahmen ohne eine Linie zu verwenden
  • Leicht voneinander abgrenzende Flächen-Farben: Elemente werden dadurch voneinander getrennen
  • Abstände zwischen Elemente erhöhen und/oder Spacing hinzufügen: Funktioniert gut bei gruppierten Elementen wie Menüs

 

Farbe

In diesem Schritt habe ich die Farben leicht angepasst und insbesondere den Blauton erhellt. Bei Farbanpassungen sollte man insbesondere auf den Kontrast zwischen Hintergrundfarben und der Schriftfarbe sowie Gewichtung achten. Es sollte immer gut lesbar sein.
Gerade der Kontrast hier zwischen Hintergrund und Link war zu gering.

Weitere Schritte

Nicht nur die Farbe und die Linien haben sich verändert, sondern zusätzlich noch diese Dinge:

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

Das ist das Ergebnis des zweiten Schrittes.Hier haben sich Linien, Farben, das Logo und die Icons verändert.

Step 2

GWiki Micromata UX Design Web

Step 3

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 bei dem Link sowie bei den Flächen dazu gekommen um  diese besonders hervorzuheben und das Design aufzuwerten.

GWiki Micromata UX Design Web

Spacing und die Anordnung der Elemente schaffen Ordnung und Übersichtlichkeit.

Step 3

Step 4 - Final Step

Es folgt der Feinschliff.

Der Benutzer einer Webseite nimmt Inhaltlich ganze 70% nur über Bilder und Grafiken auf. Deswegen sind an der Stelle noch ein paar weitere Icons hinzugekommen.
Schatten trennen nun die Bereiche noch klarer voneinander.

Ein wichtiger, elementarer Bestandteil jeder Webseite sind die Call to Actions (anhang von Buttons). Bei der Farbwahl der Buttons gibt es einige Punkte, auf die besonders zu achten ist:

    • Farben können Bedeutungen haben:
      Positiv = grün, Negativ (wie löschen) = rot
    • Mit Hilfe von Farbe und Kontrast kann man eine Hierarchie entstehen lassen:
      1. Ebene: Wichtige, prominente Button : Hoher Kontrast
      2. Ebene: z.B: Linien anstelle von Farbflächen odr weniger Kontrast
      3. Ebene unaufdringlich: Text mit Linkfarbe oder unterstrichen

Zusammenfassung

Und hier findet ihr den Vorher-Nachher Vergleich. Ihr Seht: Mit Hilfe von vielen Kleinigkeiten wie zum Beispiel Farben, Spacing, Grafiken kann man schon eine große Veränderung erzeugen und somit hoffentlich dem Nutzer/Besucher ein schöneres Erlebnis verschaffen.

GWiki Micromata UX Design Web
GWiki Micromata UX Design Web

Die Urheberrechte des Videos liegen ganz bei der Micromata GmbH. Quelle: https://youtu.be/-5GojgWN6Us