“Unsere neue Website soll es in sich haben: Wir wünschen uns einen echten Wow-Effekt!” – Das ist eine dieser Anfragen, die wir regelmäßig bekommen. Eine Website mit einer besonderen Idee, einem Effekt oder coolen Animationen anzubieten ist für uns nicht nur kein Problem, sondern eine spannende Herausforderung für unsere Designer:innen, Konzepter:innen, Illustrator:innen und Motion Designer:innen.
Trotzdem gibt es dafür bestimmte Regeln: Etablierte Konventionen, die sich in der Website Usability durchgesetzt haben und für Nutzer:innen elementarer Bestandteil ihrer Erwartungshaltung an Websites ist. Eine Website, die in ihrer Optik besonders ist aber keine Besucher:innen anzieht und somit keine wirtschaftlichen Ziele erreicht, bringt schließlich niemanden ans Ziel.
Wir erklären dir, welche Kriterien das Webdesign erfüllen muss und wie du trotzdem den Wow-Effekt auf deine Website bekommst!
1. Was ist Web-Usability?
Damit wir verstehen, warum Usability für Website-Nutzer:innen und Designer:innen so wichtig ist, schauen wir uns den Begriff in der Theorie und in der Praxis einmal genauer an. Vorab kann ich dir sagen: Es gibt gute Gründe, warum Websites ähnlich aufgebaut sind. Welche diese Gründe sind, wirst du nach diesem Artikel wissen und verstanden haben.
1.1. Web-Usability in der Definition
“Web-Usability ist die Benutzerfreundlichkeit (engl. usability) von Websites. Ist eine Website benutzerfreundlich, werden die Besucher[:innen] die Ziele, die mit der Website verfolgt werden, besser erreichen. Der Anbieter[:innen] eines Webangebotes sollte den Benutzer[:innen] daher eine effektive und intuitive Nutzung der Webpräsenz ermöglichen.” Quelle.
Diese Definition macht deutlich: Der Erfolg einer Website ist eng gekoppelt an die Usability einer Website. Nutzer:innen müssen in der Lage sein, sich intuitiv über eine Website zu navigieren, schnell zu den relevanten Informationen zu kommen und noch einem oder mehreren Eyecatchern zu begegnen. Nur so entsteht eine User Experience, die Nutzer:innen im Gedächtnis bleibt.
1.2. Web-Usability in der Praxis
Es gilt bei der Gestaltung einer Website also, sich an gängige Design-Regeln zu halten, die sich über eine längere Zeit bewährt und durchgesetzt haben. Dabei steht gleichermaßen im Fokus, dass die Nutzerfreundlichkeit einer Website optimal wird. Das bedeutet im Umkehrschluss, dass sich Websites nicht durch spektakuläres Design auszeichnen, sondern in der Basis durch die Einhaltung gängiger Usability-Regeln, die dann durch gezielte Design-Impulse individualisiert werden.
2. Gängige Design-Regeln für nutzerfreundliche Websites
Websites bestehen aus wiederkehrenden, teilweise branchenrelevanten Konventionen, die Nutzer:innen auf verschiedenen Websites kennenlernen. User besuchen immer wieder neue Websites, die ähnlich aufgebaut sind: Somit befindet sich das Logo oben rechts, die Navigationsleiste ist oben in der Mitte, der Warenkorb oben rechts usw. Nutzer:innen verbringen viel Zeit auf anderen Websites, woraus eine Erwartungshaltung entsteht, die sie intuitiv an Websites stellen.
Das Ziel einer Website ist also, diese Konventionen und Erwartungen zu bedienen und gleichzeitig ein Webdesign mit Wiedererkennungswert zu schaffen.
Einige der konventionellen Webdesign-Regeln sind in den Usability-Heuristiken nach Jakob Nielsen festgehalten. Diese stellen wir dir vor, damit du ein Gefühl bekommst, wie vielfältig die Konventionen eines Designs sind und gleichzeitig bemerkst, dass du die meisten aus deiner persönlichen Erfahrung wiedererkennst.
3. Website-Usability Checkliste: 9 Wichtige Tipps für User-freundliches Webdesign
3.1. Feedback des Systems / Rückmeldung einer Aktion
Nutzer:innen soll die Möglichkeit geboten werden, zu verstehen, was eine Website gerade macht und wie sie auf eine Aktion reagiert. Die Benutzeroberfläche informiert Nutzer:innen über den Status oder die Aktivität, die auf einer Website geschieht.
Eine Ladeanimation, ein Button, der seine Farbe verändert, wenn User darüber hovern, ein Balken, der sich langsam füllt, während ein Dokument/Bild gespeichert wird – All diese Aspekte geben Nutzer:innen Feedback über den aktuellen Zustand des Systems.
Gleiches gilt für einen Onlineshop: Fügst du dem Warenkorb ein Produkt hinzu, ist die Erwartungshaltung, dass sich diese Aktion am Warenkorb-Icon oben rechts widerspiegelt.
3.2. Gängige Modelle aus “der realen Welt” übernehmen
Bekannte Modelle aus dem Alltag und nahem Umfeld werden ins Design übernommen und auf Websites eingesetzt. Beispielsweise ist eine Diskette das gängige Icon für die Speicherfunktion geworden.
Im Prinzip geht es darum, die Bild- und Sprachwelt zu benutzen, die Nutzer:innen vertraut ist. Das kann je nach Zielgruppe unterschiedlich aussehen. Ärztinnen und Ärzte nutzen eine andere Sprache als Schreiner:innen und wiederum eine andere Sprache als Marketer:innen. Genauso funktioniert der B2B-Kontext als auch der B2C-Bereich. Modelle aus der Umgebung der Nutzer:innen aufzugreifen unterstützt die intuitive Nutzung und Verständlichkeit einer Website.
3.3. Den Nutzer:innen “Freiheiten” liefern
Nutzer:innen sollen die Möglichkeit bekommen, Aktionen rückgängig zu machen oder abzubrechen. Damit wird ihnen das Gefühl gegeben, Kontrolle über das System zu haben.
Du hast bestimmt schon online eingekauft und deine persönlichen Angaben, Adresse und Rechnungsdetails angegeben. Genau bei solchen Prozessen sollen diese Undo-Funktionen integriert sein. Idealerweise werden deine Informationen sogar gespeichert, wenn du zurückgehst, um eine Angabe zu ändern.
3.4. Konsistentes Design und eindeutige Standards
Nutzer:innen hilft es, wenn sie Standards erkennen und auf deiner Website wiederentdecken. Finden sie auf deiner Website Elemente, die sie bereits von anderen Websites kennen, wirkt deine Seite nach innen und außen konsistent.
Konsistenz bedeutet auch, dass Elemente, die die gleiche Aufgabe haben, gleich aussehen – wie das Icon für den Warenkorb, Speichern oder Schließen. Designer:innen nehmen die Icons, an die Nutzer:innen gewöhnt sind, damit sie sich leicht über eine Website navigieren können.
3.5. Fehler vorab vermeiden
Missverständnisse und Fehler lassen sich auch auf einer Website nicht vermeiden. Allerdings kann man Nutzer:innen oftmals davor bewahren, Fehler zu machen. Sie lassen sich vorab minimieren und aus dem Weg räumen.
Beispiel: In einem Kontaktformular sollen User ihre Telefonnummer angeben. Anstatt hier ein gängiges Eingabefeld zu hinterlegen, sollte das Feld nur aus Ziffern bestehen. Dadurch kommen Nutzer:innen erst gar nicht in die Situation, dass sie in das Eingabefeld irgendwas anderes als Ziffern eingeben wollen.
3.6. Zeige deinen Nutzer:innen den richtigen Weg
Für Menschen ist es leichter, Dinge zu sehen als sich an sie zu erinnern. Daher gilt folgendes Grundprinzip der Usability: Reduziere den kognitiven Aufwand deiner Website-Besucher:innen. Daher ist es sinnvoll, Nutzer:innen die wichtigsten Informationen, Vorgänge und Optionen anzuzeigen.
Das kann wie folgt aussehen: In der Suchleiste werden Suchbegriffe vorgeschlagen, nachdem User beispielsweise drei Buchstaben eingegeben haben. Dadurch hilft man Nutzer:innen, sich an etwas zu erinnern oder neue Ideen/Interessen zu entdecken.
3.7. Ästhetisches und minimalistisches Design
Dein User Interface (UI), das sich auf die Interaktion zwischen dem Menschen und der Website konzentriert, sollte nie mehr Informationen enthalten als notwendig. Jede überflüssige Informationseinheit macht es für deine Nutzer:innen schwieriger, sich über die Website zu navigieren.
Die visuellen Elemente einer Website unterstützen Nutzer:innen dabei, deine primären Ziele zu erreichen (Kontaktanfrage stellen, Kauf abschließen, etc.). Das heißt nicht zwangsläufig, dass eine Seite minimalistisch sein muss, sondern fordert eine bewusste Auswahl und Menge der inhaltlichen und interaktiven Elemente auf einer Website/Seite/Unterseite.
3.8. Fehler erkennen und Fehlerbehebung unterstützen
Eine nutzerfreundliche Website zeigt Fehler an und gibt idealerweise sinnvolle Lösungsvorschläge, um Fehler zu beheben. Das kann wie folgt aussehen: Nutzer:in XY hat in einem Kontaktformular nur 4 Ziffern in die Postleitzahl-Zeile eingefügt, weil ein Fehler unterlaufen ist. Dann kann als Fehlermeldung mit dem Hinweis erscheinen, dass eine Postleitzahl immer aus 5 Ziffern bestehen muss. Das erleichtert Nutzer:innen einerseits, ihre Fehler schnell zu erkennen und hilft dabei, dass so wenig Frustration wie möglich entstehen kann.
3.9. Hilfe anbieten
Das Ziel einer Website ist, dass Nutzer:innen sie intuitiv und ohne hohen kognitiven Aufwand bedienen können. Allerdings kann es immer Elemente geben, die erklärt werden müssen.
Beispielsweise ein Icon, bei dem ein Tooltip erscheint, wenn man darüber hovert. Oder auch ein FAQ Bereich. Die Informationen sind dabei möglichst kurz und konsumierbar.
4. Wie du dennoch eine Website mit Wow-Effekt bekommst, ohne die Usability-Regeln zu missachten
Trotz der gängigen Design-Regeln gibt es Websites, die sich von anderen abheben. Natürlich ist nicht jede Website gleich aufgebaut und es gibt durchaus solche, die eindeutig anschaulicher und ästhetischer sind als andere. Das ermöglichen gezielt eingesetzte Design-Elemente, die die Usability deiner Website nicht einschränken, sondern vielmehr unterstützen.
Unsere Digital Art Director Christina Mauel sieht die Chancen für eine Website, die im Gedächtnis bleibt, vor allem im Bereich Animationen und Microinteractions, die unwahrscheinlich vielfältig und individuell umgesetzt werden können. Ich stelle dir einige vor, die entweder aktuell im Trend liegen oder der no brainer in Sachen Design-Animationen sind.
4.1. Hover Effekte
Hover-Effekte lassen statische Elemente einer Website zum Leben erwachen. Der Effekt tritt dann ein, sobald der Cursor über einem Element “schwebt” (engl.: to hover). Gleichzeitig gibt dieser Hover-Effekt den Nutzer:innen ein Feedback, dass sich etwas hinter diesem Element verbirgt. In der Regel werden Hover-Effekts bei Buttons und Links eingesetzt, um diese klar zu kennzeichnen.
4.2. Fluid Gradients
Farbübergänge kennen wir vor allem aus den 90er Jahren – von Geburtstagseinladungen bis Schulprojekte. Doch Gradients haben in den vergangenen Jahren ein großes Comeback geschafft. Sie dienen dazu, einem “flat design” eine neue Tiefe zu verleihen.
Der Gradient-Trend ist vor allem deswegen so interessant, weil er besonders vielfältig ist: Verschiedene Farben und Farbtöne ergeben neue Farbkombinationen, die immer wieder aufs Neue einzigartig wirken. Dem Webdesign sind hier keine Grenzen gesetzt.
Besonders auf der Startseite als Herobild dienen Fluid-Gradients als Eyecatcher: Stell dir eine leere Leinwand vor und jede Farbe, die du dieser Leinwand hinzufügst hat eine bestimmte Farbe und verfließt miteinander. Das ist ein Fluid-Gradient.
Beispiel-Website mit Fluid Gradient Background:
Julie Bonnemoys Portfolio
4.3. Parallax Scrolling Effekt
Der Parallax Scrolling Effekt verleiht deiner Website einen dreidimensionalen Effekt, der durch das Scrollen entsteht. Wie das funktioniert? Verschiedene Grafiken, Bilder und oder Animationen werden auf unterschiedlichen Ebenen einer Seite eingebunden, die sich während des Scrollens einer Seite unterschiedlich schnell bewegen. Dadurch können sich beispielsweise Textelemente langsamer bewegen als die Bilder und Grafiken, die auf der Seite eingebunden sind. Anhand des Parallax Scrolling Effekts erhält eine Website mehr Tiefe, da Räumlichkeit und Bewegung simuliert werden.
Beispiel-Website mit Parallax-Effekten:
4.4. Text Animationen
Der Name beschreibt schon gut, was sich dahinter verbirgt: Text-Animationen sind Textelemente mit einem besonderen Twist. Das kann einerseits der User Experience helfen, indem bestimmte Textpassagen als Eyecatcher eingesetzt werden oder eben auch als das besondere Etwas dienen, das eine Website bieten kann. Text-Animationen können vielfältig sein: Es gibt Sliding Text Animations, bei denen Textblöcke einfliegen, Text-Animationen, die durch Scrolling getriggert werden, Text-Fade-In, wobei Textblöcke erst nach und nach geladen werden uvm.
4.5. Page Transitions
Page Transitions sind die animierten Übergänge zwischen Unterseiten einer Website. Das hat vor allem einen Vorteil für die User Experience, denn Nutzer:innen haben nie das Gefühl, sie würden eine Seite verlassen, wenn lediglich eine Unterseite geladen wird. Daraus entsteht ein völlig neues Wohlgefühl bei der Navigation, das auch verhindert, dass Nutzer:innen von einer Website abspringen, denn die Benutzererfahrung fühlt sich dank Page Transitions nie unterbrochen an. Denn vor allem abgehackte Übergänge zwischen Unterseiten sorgen oftmals für eine hohe Absprungrate.
4.6. Deine Corporate Identity neu interpretiert
Nicht in jedem Fall sind Trends der optimale oder einzige Weg, um eine Website einzigartig zu machen. Manchmal macht es am meisten Sinn, das individuelle CI eines Unternehmens neu zu interpretieren und aufzugreifen. Das kann beispielsweise durch passende Illustrationen oder Patterns umgesetzt werden, die wiederum die Thematik einer Website optisch unterstützen. Was zunächst nicht sonderlich spektakulär klingt, kann am Ende ein homogenes und besonders ästhetisches Endergebnis liefern, dessen Fokus beispielsweise auf individuellem und hochwertigem Content liegt.
Eurer Website fehlt der WOW-Effekt?
Erfahre in unserem ausführlichen Relaunch-Guide alles, was für einen erfolgreichen Relaunch wichtig ist: Von der CMS-Wahl über das Konzept bis hin zum Design.
Fazit
Eine Website mit Wow-Effekt ist nicht immer das große Feuerwerk. Im Webdesign sind es vielmehr die subtilen Dinge, wie Microanimations oder Farbgebungen, die einer erfolgreichen Website den gewünschten individuellen Touch geben.
Denn: Die Usability legt für die Gestaltung einer Website einen bestimmten Rahmen fest, der sich bewährt hat und von Usern unbewusst erwartet wird.
Designer:innen kennen alle Designregeln und Trends und berücksichtigen diese bei der Konzeption und Erstellung einer Website. Was sich daraus ergibt ist im Idealfall eine Website, die intuitiv und einwandfrei funktioniert und gleichzeitig eine Auswahl an spannenden Designelementen hat, die eine Website einprägsam macht.
