Nutzererlebnis / User Experience

Ein paar Basis-Informationen zum Erstellen eines Web-Projektes und dem Benutzererleben.

Ein paar Begriffe erklärt

  • Homepage, ist die Startseite einer Internetpräsenz. Nicht das ganze…
  • Website, ist die gesamte Internetpräsenz.
  • Webseite, ist eine Seite der Website.
  • Header, die Kopfzeile der Seite. Der obere Teil der Seite enthält in der Regel das Logo, die Navigation und eventuell ein Bild / Slider.
  • Footer, die Fußzeile unter an der der Seite. Hier finden sich oft weiterführende Links, wie Impressum, Datenschutz usw., sowie auch Kontaktdaten, kleine Formulare usw.
  • User Experience, Nutzererlebnis / Nutzererfahrung.
  • Usability, Benutzerfreundlichkeit.
  • Freiraum / Weißraum, der Platz um und zwischen den einzelnen Elementen.
  • Design, wie etwas aussieht und wie etwas funktioniert.
  • Layout, die Anordnung der Elemente, we z.B. Header, Inhalte, Footer, Menüs, Seitenspalten usw.
  • Call to Action, ein Element, welches zu einer Handlung aufruft. Z.B. ein Kontakt-Button.
  • Hero, ein Element, welches großflächig ein Angebot, eine Leistung präsentiert.
  • Slider, eine Abfolge von verschiedenen Bildern, Texten, usw. die nacheinander an der gleichen Position abgespielt werden.
  • Headline, hervorgehobene Überschrift.
Layout

User Experience

Es gibt ein paar Richtlinien, die dem User das Besuchen einer Website leichter machen. Man spricht heute von “User Experience”, vom Erleben einer Webseite / einer Applikation. Wir reagieren in wenigen Sekunden auf den Gesamteindruck einer Webseite, auf die Farben, das Layout, die Elemente, die Schriften usw. So entscheidet sich sehr schnell, ob wir uns wohlfühlen, ob wir das Angebot verstehen und die Seite annehmen. Naja, oder ablehnen…

Seit einiger Zeit haben wir gängige Bestandteile in unserem Verständnis integriert. Wir überfliegen oft den Bildschirm und bleiben nur, wenn wir etwas finden, das uns “berührt”. Wir sortieren unterbewusst, es ist etwas entstanden, das man “Banner Blindness” nennt.

Immer wiederkehrende Elemente mit festen Platzierungen, wie Slider, Logos, Werbebanner werden vom User quasi ausgeblendet / übersprungen und nur noch minimal wahrgenommen. Oft ist das Logo links oben über oder neben der Navigation, ein Slider oder Header-Bild (nicht mehr so häufig) als breites und großes Element unter oder gar über der Navigation.  Der Kontakt Menüpunkt ist ganz rechts oder unten im Footer. Genauso wie der eventuelle Account Button und der Warenkorb auch rechts oben ist.

Wir wissen um diese Elemente und “überspringen” sie mit dem Auge. Statistisch warten die wenigsten bei einem Slider auf weiterfolgende Elemente, höchstens noch das zweite Bild / Panel. Auch das Logo wird oft nur noch überflogen und nicht mehr genauer angeschaut. Spätestens beim zweiten Anschauen…

Das heißt alles nicht, das wir kein schönes Logo verwenden sollten oder keinen Slider… Überhaupt trifft dieses Verhalten nicht auch alle Menschen und Zielgruppen zu 100% zu.
Bitte sieh dieses alles nicht zu verbissen. Aber es kann uns helfen, einen Aufbau und ein Design zu finden, das den User an die Hand nimmt und ihn durch die Website führt.

Experience Design

Layout

Das Auge geht von links nach rechts und versucht einen Überblick zu bekommen.

  • Ordne die Elemente so an, dass du den User gezielt durch deine Inhalte führst. Überlege dir, was er wann wissen sollte und baue deine Navigation und Elemente dementsprechend auf.
  • Baue dein Layout in einzelnen gut “verdaulichen” Blöcken mit genügend Abstand auf. So kann das Auge diese nach und nach abarbeiten.
  • Gib den einzelnen Elementen Raum, damit sie für sich stehen können und einzeln erkannt und gelesen werden. Ist der gesamte Inhalt eine zusammenhängende breite Masse, fühlen wir uns schnell überfordert und verlieren die Lust weiter zu lesen / zu schauen. Die Teile des Layouts sollten “atmen” können.
  • Gestalte deine Navigation logisch und so einfach wie möglich. Was oben in der Navigation nicht notwendig ist, kann in den Footer.
  • Brauchst du eine Seitenleiste, wenn nicht arbeite lieben mit Spalten. Die sortieren sich dann auf Smartphones und Tablets besser.
  • Verzichte auf zu viel Spielerei und Elemente, die nur “hübsch” sind. Animationen und “Blinki” können mal ganz nett sein, nerven aber auch schnell. Vor allem, wenn ein User die Seite öfters besucht.
  • Denke an die mobilen Ansichten.
Layout

Design

Wähle deine Farben und Schriftarten passend zu deinem Angebot und deiner Zielgruppe. Sprich eine einheitliche Designsprache mit gleichen Abständen, sich wiederholenden Elementen, wie Schriftarten und -größen.

Ausgeglichenen Farben und wiederkehrende Teile halten eine Website in einer Form und geben den User ein Grundgerüst, an dem er sich orientieren kann.

  • Nutze z. B. für ein Beratungsangebot, Coaching, Heilpraktiker Praxis usw. Farben, die den User nicht fordern, sondern beruhigen. Knallige Farben erfordern ständig Aufmerksamkeit und lenken irgendwann von den Inhalten ab.
  • Nutze nicht zu viele verschiedene Farben, das kann verwirren.
  • Nutze Farben, die miteinander harmonieren.
  • Verstehe wie Farben wirken.
  • Nutze Schriftarten, die leicht am Bildschirm zu lesen sind. Bei Überschriften kannst du auch gerne auffälligere und verspieltere, trotzdem lesbare nehmen, der Fließtest sollte klar erkennbar und leicht zu lesen sein.
  • Nutze nicht mehr als 3 verschiedene Schriftarten und nicht zu viele verschiedene Größen.
  • Nutze eine gut erkennbare Schriftgröße.
  • Nutze einen guten Zeilenabstand.
  • Auch mit Schriften kannst du Stimmungen erzeugen, eine Schrift mit Serifen als Überschrift kann edel wirken. Eine verspielte Schrift kann warm und persönlich sein…
  • Nutze Bilder, Illustration usw., um die Inhalte aufzulockern und / oder zu erklären.
  • Nutze eine einheitliche Bildsprache, die Elemente sollten miteinander harmonieren. Wähle Grafiken, Fotos usw. die wie “aus einem Guss” wirken.
  • Betone Elemente, die erreicht, geklickt oder wahrgenommen werden sollen.
Design

Usability

  • Das Lesen am Bildschirm ist anstrengender als bei einer Drucklektüre. Langweile deinen User nicht und gib ihm schnell die Informationen, die für ihn wichtig sind. Dann wird er auch bleiben. Weiterführende Informationen zu deinem Angebot kannst du weiter unten oder auf Unterseiten einstellen.
  • Führe den User durch den Aufbau der Inhalte zu den jeweils relevanten Elementen und Seiten. Wenn du z.B. einen neuen Kurs anbietest, lenke die Aufmerksamkeit auf die relevanten Kursinfos und zeige dann eine “Call-to-action” mit “Ruf mich an / Link Telefonnummer” usw.
  • Schaffe nicht zu tiefe Unterseiten. Lass die User alles mit möglichst wenig Klicks finden.
  • Optimiere die Ladezeit der Bilder, die du hochlädst und schalte bei Videos ein Vorschaubild, damit nicht gleich das Video geladen wird (auch bei deaktiviertem Autoplay…).
  • Denke auch an das Datenvolumen bei mobilen Endgeräten.
  • Achte auf genügend Kontrast, um auch bei nicht so guten Lichtverhältnisse bedienbar zu sein.
  • Alle vorhandenen Links und Mechanismen sollten funktionieren. Erschaffe nicht zu viele Baustellen…
  • Versuche komplexe Vorgänge so einfach wie möglich zu halten, z.B. Anmeldeprozesse.
  • Sei deutlich…
  • Versuche dich in die Lage eines Users deiner Zielgruppe zu versetzen. Was wünscht du dir / er sich? Gib ihm das…
Usability

Schreibe einen Kommentar