Egal ob Webadmin, Designer, Marketing Mitarbeiter oder CEO. Egal ob one-man Show oder Unternehmen – sofern du dich näher mit dem Thema Web beschäftigst, bist du sicher schon über den Begriff Usability, sprich Benutzerfreundlichkeit gestolpert. Genau hier kommt der UI / UX – Designer ins Spiel. Im folgenden Artikel sehen wir uns etwas näher an was genau mit diesen Begriffen gemeint ist und wo der Unterschied zwischen UI und UX bzw. Webdesign und Webentwicklung liegt.
Obwohl es unmöglich ist, alle Dos and Don’ts und Best Practices in einem einzigen Artikel zusammenzufassen – wir suchen uns die 5 grundlegendsten Regeln raus, die Du befolgen solltest, um ein gutes Erlebnis für Deine User zu schaffen.
1. Kerndisziplinen zur Erstellung einer Website
Sehen wir uns zuerst 4 Disziplinen an, die zum Einsatz kommen, wenn es darum geht eine Website zu erstellen. Dieser Punkt ist jetzt keine „Regel“ an sich – doch wird er oft falsch verstanden. ↓
Webdesign
Entgegen mancher Erwartungen: mit Webdesign ist generell nur der „Designteil“ einer Webseite gemeint. Gerade in unseren Breitengraden wird darunter auf Kundenseite oft der gesamte Prozess bis zur fertig entwickelten Website verstanden. Webdesign ist lediglich die Überkategorie der UI / UX Design angehören.
Ein Webdesigner ist somit nicht zwingend auch Webentwickler. (Programmierer)
Wie die Unterkategorien des Webdesigns untereinander zu verstehen sind, siehst du hier:
Webentwicklung
Der technische Teil. Die „Programmierung“ der Website nach der Designvorlage, die im Webdesign Prozess entstanden ist. Prinzipiell handelt es sich hier um 2 Gebiete – Das Frontend (das was der User sieht) und das Backend (dort wo der User Content im Frontend ändern kann)
Sowie ein Webdesigner kein Programmierer sein „muss“ ist auch ein Coder nicht zwingend ein Designer.
UI (User Interface) – Design
User Interface Design ist eine spezielle Unterkategorie des Webdesigns und beschäftigt sich mit dem Look des „Raums“ in dem die Interaktion zwischen User (Kunde) und Produkt (Website) stattfindet. Das beinhaltet Farben, Formen, Typografie, Icons, etc.
UX (User Experience) – Design
Wie fühlt sich der User, wenn er mit deiner Seite interagiert? Ist das Besuchererlebnis klar und intuitiv oder irritierend und frustrierend? Während sich User Interface mit dem Look beschäftigt, kümmert sich User Experience Design um die Interaktion und das Gefühl das dabei entstehen soll.
Purely Visual (Grafikdesign)
Rein visuell? Was ist mit damit gemeint? Kurz gesagt: der Teil der Website der nicht zwingend Funktionalität beinhaltet. Damit kann die Bildsprache von Fotos, Icons und Illustrationen gemeint sein sowie der generelle Look der Website.
2. Farben
Eines vorweg: je ausgereifter die CI deines Unternehmens bereits ist, desto weniger Spielraum gibts hier. Kurz gesagt: halte dich an die bestehenden CI Farben. Ich möchte dennoch 2 Punkte erwähnen, die wichtig sind und hoffentlich bereits bei Gestaltung deines Brands berücksichtigt wurden.
Look and Feel
Farbpsychologie. Wie willst du wahrgenommen werden? Welches Gefühl soll beim User bei Interaktion mit deinem Brand entstehen? Wirf einen Blick auf die Farbpsychologie-Tabelle unten, um einige der Emotionen und Motive zu sehen, die traditionell mit Farben verbunden sind:
Denk daran, dass unterschiedliche Kulturen Farben anders wahrnehmen. Auch Alter und Geschlecht spielt dabei eine wichtige Rolle. Wenn du mehr dazu erfahren willst, kann ich dir folgenden Link empfehlen: https://www.canva.com/colors/color-meanings/.
Kontrast und Lesbarkeit
Ein zweiter wichtiger Punkt ist der Kontrast deiner Farbwahl. Obwohl Elemente mit weniger gutem Kontrast generell harmonischer und „angenehmer“ fürs Auge wirken, ist im Web die Lesbarkeit ausschlaggebend. Das betrifft sowohl Hintergrund und Fließtext darüber sowie Bedienelemente wie z.B. Buttons. Sehen wir dazu am besten ein Beispiel an.
Wenn es sich also nicht gerade um einen Button im disabled State, oder einen *Text den du lieber verstecken möchtest handelt, solltest du auf ein gutes Kontrastverhältnis achten. Kleiner Tipp für schwarzweiß Layouts: pures Schwarz (#000000) durch ein dunkles Grau wie #030303 ersetzen – das macht deinen Text angenehmer zu lesen auch bei längeren Passagen.
Wenn du selbst Farben und deren Kontrastverhältnis testen möchtest, kannst du das z.B.: hier machen: https://contrastchecker.com/.
3. Bilder und Icons
Bildformat
JPG, PNG, GIF, WebP, SVG? Was ist nun das richtige Bildformat für meinen bestimmten Use Case?
Hier die wichtigsten Grundregeln:
- Verwende JPG für Fotos und detailreiche Illustrationen.
- Verwende PNG für einfachere Illustrationen oder falls Transparenzen zwingend nötig und/oder nicht anders lösbar sind – SVG z.B.
- Verwende GIF für kurze, kleine Animationen die nicht mit SVG oder Video umsetzbar sind.
- Verwende SVG für Icons uns Illustrationen von geringem Detailgrad
- Verwende WebP anstatt von JPG, falls der noch limitierte Browser Support für deinen Use Case kein Problem darstellt.
Wenn du mehr dazu wissen willst, ließ doch unseren Artikel „Bildformate des Webs im Detail erklärt“.
Dateigröße
Einer der häufigsten Fehler, der uns beim Check einer Website auffällt, sind Bilder, die nicht fürs Web optimiert wurden. Je mehr Bilder auf deiner Website zu finden sind, desto größer ist der Einfluss auf die Ladegeschwindigkeit. Kurz gesagt: Deine Website lädt schneller, wenn deine Bilder optimiert sind. Wie man das am besten macht, erfährst du in unserem Artikel „Wie man Bilder richtig fürs Web optimiert“.
Dimensionen
2 wichtige Punkte dazu:
- Lege dein Bild in den richtigen Dimensionen an. Was damit gemeinst ist: wenn der Container in dem dein Bild sitzt maximale Dimensionen von z.B. 800 x 600px hat, dann sollte dein Bild in eben diesen Dimensionen angelegt werden.
- Dimensionen (Breite & Höhe) im HTML Code hinzufügen. Tust du das nicht, führt das zu sogenannten Layout Sprüngen. Das heißt das Layout „hüpft“ wenn der Content geladen wird. Das Hinzufügen von Dimensionen verhindert das – in dem der Platz für das Bild „reserviert“ wird.
Look and Feel
- Achte darauf, dass deine Icons zu deiner Brand passen.
- Immer nur ein Icon Set verwenden
- Stockfotos solltest du so gut es geht vermeiden – besser selbstgemachte „echte“ Foto anstatt gekauftem Material verwenden.
4. Typografie
Look and Feel
So wie Farben eine gewisse Stimmung beim User hervorrufen können, so tut es auch Typografie. Manche meinen sogar:
„90% of design is typography.“
POPULAR OPINION
Sehen wir uns dazu ein Beispiel anhand von 3 unterschiedlichen Typefaces an:
Tipp: such dir eine Typeface aus die zu deinem Brand passt und halte die Schriftschnitte, die du verwendest gering. Das spart KB und damit Ladezeit.
Hierarchie
Ein weiterer wichtiger Punkt ist die Hierarchie. Richtig umgesetzt hilft dir Typografie dabei deinem Content Struktur zu geben und dem Leser dabei den Content leichter zu konsumieren. Am besten suchst du dir ein sogenanntes „Type-Scaling“ aus. Das kannst du z.B.: hier machen: https://type-scale.com/
5. Bedienelemente
Sehen wir uns als Nächstes ein paar Bedienelemente an. Wir konzentrieren uns auf die zwei wichtigsten – Buttons und Formularfelder.
Buttons
Auch hier gibts viele verschiedene Möglichkeiten ein gewisses Gefühl zu transportieren. Sehen wir uns dazu am besten 3 Buttons im Vergleich an. Am besten in Kombination mit dem was wir bereits über Farben und Typografie wissen 🙂
Aber nicht nur der Style ist wichtig und sollte zu deiner Brand passen. Achte auch darauf das deine Buttons States haben.
Button States helfen deinen Usern deine Website besser zu navigieren. Ein Hover-State gibt visuelles Feedback und macht deutlich, dass etwas „klickbar“ ist. Wichtig ist hier vor allem die Konsistenz – zu viele unterschiedlich designte Buttons verwirren deine User.
Formularfelder
Egal ob Check-out Prozess im Onlineshop oder einfaches Kontaktformular – du hast sicher schon frustrierende Erfahrungen mit Formularfelder gehabt. Verschwindende Labels, fehlendes User Feedback oder Layout Shifts sind dabei nur ein paar
Auch Formularfelder haben States. ↓
Die Kernpunkte hier:
- Icons geben einen zusätzlichen visuellen Anker
- States helfen beim User Input (Hover, Focus, Input, Error, Success)
- User Feedback im Error und Success State geben zusätzliche Information
- Ganz wichtig sind Labels – die sollten auch im Focus State auf mobile sichtbar bleiben, deswegen platzieren wir sie über dem Formularfeld:
Wenn du mehr Details dazu erfahren willst, hat mein Kollege Robert dazu 2 Artikel verfasst.
Der erste Teil befasst sich mit dem UX Design: https://www.crafted.at/b/9-tipps-fuer-benutzerfreundliche-formulare-teil-1-ux-design/
Der zweite Teil mit der technischen Umsetzung: https://www.crafted.at/b/9-tipps-fuer-benutzerfreundliche-formulare-teil-2/
Fazit
Während der rein visuelle Teil einer Website als „Geschmacksache“ abgetan werden kann, gibt es doch gewisse Regeln und best practices, die deinem User ein benutzerfreundlicheres Erlebnis bieten – solange du die Basics verfolgst bist du schon gut dabei. Wenn dir dieser Artikel geholfen hat und wenn du Fragen oder Kritik hast, schreibe diese doch einfach in die Kommentare!
