User Experience

Die Definition von User Experience kurz (UX)

User Experience (ISO 9241-11(Usability)/210(UX) ist das Kriterium für den Erfolg einer (Firmen-)Website oder App: Wenn das Anwender- und Nutzererlebnis für den Seitenbesucher zu einer positiven Interaktion wird, kann das vorgestellte Produkt oder die beworbene Dienstleistung enorm davon profitieren.  Benutzerzentriertes Design mit interaktiven Oberflächen und mobilen Lösungen konzipieren, gestalten, fortentwickeln und evaluieren ist das Ziel der Zukunft.

Dabei gibt es drei Erfolgskriterien:

  1. Festigkeit, im Sinne von Sicherheit vor Hackerangriffen und EDV-Systemstabilität aber auch Stabilität unter Gesichtspunkten der Datenpflege und der Kontaktgeschwindigkeit.
  2. Nützlichkeit, sinnvolle, weiterbringende Funktionalitäten, wie zum Beispiel Kontaktformulare, Videobeiträge oder aktuelle Blogposts. Die subjektive Wertigkeit kann mithilfe von UEQ (User Experience Questionnaires) evaluiert werden. Wie schnell vermitteln sich dem User Sinn, Konzeption und Zweck einer Website? Das „Warum?“ sollte im Mittelpunkt stehen: Kennt man Gründe für bestimmte Verhaltensweisen, werden Optimierungspotentiale offensichtlich.
  3. Schönheit – zur Maximierung der durchschnittlichen Verweildauer in einer schnelllebigen Zeit (quantifizierbar z.B. durch die Blickerfassungsmethode). Dazu gehören ästhetische Ansprüche, Ergonomie aber auch die emotionale Nutzeransprache nach der AIDA-Formel: attention, interest, desire and action bzw. der darüber hinaus gehenden Dagmar-Formel: Defining Advertising Goals for Measured Advertising Results. Basis sind wahrnehmungspsychologische Grundlagen.

Erfolgsrezept Erlebnisorientierung

Erlebnisse, so Studien, machen nicht nur glücklicher als Produkte; sie erscheinen dem „User“ auch als die lohnendere, Freude bringende Investition. Die Entwicklung läuft von der materiellen Glückseligkeit hin zu immaterieller Erfüllung durch befriedigendes Erleben. Vor Produkterwerb und Konsum steht somit die Befriedigung ästhetischer Ansprüche bei Vorabinformation. Online-Erleben als sinnlicher, emotionaler, räumlich-zeitlicher Ablauf im Kopf der Benutzer. Daher sollte humane User Experience also bei Evaluation und Marktforschung einen Schwerpunkt auf die entstehenden Erlebnisse setzen und nicht nur auf spezifische Attribute der Produkte (USP). Eine UX-Vision dient umgekehrt auch der Produktgestaltung; sie soll inspirieren und Leitfaden für Designentscheidungen sein. Dabei geht UX über starre Styleguide-Vorgaben hinaus: Screen und Bedienoberflächen bieten den Anwendern alle Funktionalitäten, die erforderlich sind, in nachvollziehbarer Ansicht. Gestaltungsprinzipien und der Fokus auf Teamarbeit beim Weg von Entwurf über Visualisierung und Umsetzung lassen mehr Freiräume für kreative Erfolgsgeschichten bei gleichzeitiger Kenntnis der technischen Möglichkeiten von Programmcode.

Trendschau UX – Wohin geht’s?

Das Mozilla Open Innovation Toolkit z.B. beschreibt in übersichtlicher Machart Methoden für Stategien, Produktentwicklung, Ideenfindung und Evaluation hinsichtlich der Frage: Wie verschaffe ich mir und meinen Web-Inhalten mehr Aufmerksamkeit und Relevanz bei der Zielgruppe? Die Ära gesichtsloser Web-Firmen-Accounts ist passé – Kunden suchen nach menschlichen Vertrauenspersonen mit Wiedererkennungswert, die sie durch die virtuelle Welt mit enormem Bewegtbildpotential lotsen. Der Anwendungskontext muss zum großen Ganzen passen.

Heatmap

Was ist eine Heatmap?

Mithilfe einer Heatmap analysiert man das Besucherverhalten auf einer Webseite um diese darauf zu optimieren. Eine Heatmap wird in Form von Temperaturschwankungen dargestellt. Auf diese Weise lässt sich das Besucherverhalten bzw. die Verweildauer eines Besuchers auf einem bestimmten Punkt analysieren. Dabei wird zwischen vier Arten von Heatmaps unterschieden.

Klassische Heatmap:

Mit einer klassischen Heat Map ist es dem Webmaster möglich, visuell die Häufigkeit der Klicks, welche von Webseiten-Besuchern getätigt werden. Dabei werden die am häufigsten angeklickten Bereiche der Webseite als heiß (weiß) dargestellt, während die Bereiche, die am wenigsten geklickt werden, blau, also kalt dargestellt werden.
Diese Darstellung ermöglicht es den Webmaster, seine Seite hinsichtlich der Conversion weiter zu optimieren.

Eyetracking:

Das Eyetracking ist wie der Name schon verrät, dass Messen von Augenbewegungen und Blickverläufen. Hierbei sitz der Proband vor einem Bildschirm und seine Augenbewegungen werden dabei aufgezeichnet, während er sich Inhalte von Webseiten ansieht. Mittlerweile gibt es auch Simulatoren die menschliches Verhalten beim Betrachten von Webseiten simulieren. Dabei wurden viele Datenmengen von klassischen Aufzeichnungen gesammelt und diese per Software visualisiert. Diese Simulation entsprechenden mit einer hoher Wahrscheinlichkeit, den Fixationen und Sakkaden, also den Augenbewegungen, eines menschlichen Betrachters.

Mouse Movement Map:

Bei dieser Form der Heat Maps handelt es sich um eine Analyse, welche die Mausbewegungen der Besucher aufzeichnet. Auf diese Weise weiß der Webmaster, welche Bereiche der Seite für den Besucher am Hilfreichsten ist. Dadurch ist es möglich, genau diese Bereiche bei der Optimierung noch einmal mehr in den Vordergrund zu rücken. Eine Mouse Movement Map gleicht einer Eye Tracking Analyse, ist jedoch nicht ganz so hilfreich bzw. genau.

Clickmap:

Bei dieser Analyse werden die einzelnen Klicks ausgewertet. Das ist im Hinblick auf die Usability sehr wichtig. So kann der Webmaster mit Hilfe der Clickmap nachvollziehen, welche Links besonders oft angeklickt werden, oder welche Bilder oder Menüs sie besondere Beachtung schenken. Diese Bereiche können auf Basis der Analysedaten verändern werden, oder einen Call-to-Action an einer anderen, besseren Stelle angebracht werden. Für Onlineshops ist diese Analyse ebenfalls sehr wichtig, um zum Beispiel den Warenkorb an eine geeignete Stelle zu platzieren.

Scrollmap:

Die Scrollmap dient dazu das Scrollverhalten der Besucher grafisch darzustellen. Alles was sich unterhalb des sogenannten “Above the Fold”-Bereich befindet, kann vom Besucher nur durch scrollen wahrgenommen werden. Deshalb wird der “Below the Fold”-Bereich von Usern wenig beachtet. Mittels der Scrollmap Analyse, sieht der Webmaster, welche Bereiche der Webseite für den User nützlich sind.

Wie sollte eine Heatmap am besten nutzen und auf was sollte man achten?

Bei der Head Map Analyse einer Webseite hat der Betreiber der Seite viele Möglichkeiten sie einzusetzen. Aber es gibt ein paar Punkte, die man bei der Nutzung einer solchen Analyse beachten muss.
Zum einen ist ein Blick auf den Traffic sehr wichtig. Will man eine derartige Analyse starten, sollte man bedenken, dass auch entsprechend genug Traffic auf der Seite vorhanden ist. Eine Analyse zu starten, obwohl man nur 10-20 Besucher am Tag hat, bringt keine wirklichen Erkenntnisse. Auch wenn man den Test ein paar Wochen laufen lässt.

Ein weiterer wichtiger Aspekt ist die Art der Webseite, die man analysieren möchte. Eine statische Webseite eignet sich deutlich besser als eine dynamische Seite. Den bei einer Seite, bei der sich der Content regelmäßig ändert, zum Beispiel bei Blogs, sind die Klicks meist großflächig auf der Seite verteilt.

Stößt der Webmaster nach einer Heat Map Analyse auf Punkte, die optimiert werden sollten, hat es sich als äußerst nützlich herausgestellt einzeln vorgehen und die Bereiche nach der Optimierung erstmal weiter beobachten. Sonst kann man nur schwer sagen, wie viel die Optimierung gebracht hat.

Welche Anbieter (kleine Auswahl) von Heatmap Tool gibt es und was sind Ihre Unterschiede:

  • eTracker (Webanalyse-Software mit verschiedensten Heatmap-Funktionen)
  • Lucky Orange (Datenserver in den USA, keine Formularanalyse, leichte Installation)
  • overheat (Deutsches Unternehmen, Heatmap, Formular Analyse, Funnel, kostengünstig)

Die Funktionsweisen und der Umfang der angeboten Tools sind recht unterschiedlich. Bei der Auswahl sollte man daher im Vorhinein genauestens bestimmten was man messen möchte und wie die gewonnenen Daten eingesetzt werden können.

Breadcrumb

Was bedeutet der Begriff?

Das Wort Breadcrumb kommt aus dem Englischen und bedeutet übersetzt Brotkrümel. Doch was hat dies mit Webseiten zu tun? In diesem Artikel erklären wir Ihnen den Zusammenhang.

Warum sollte man Breadcrumbs verwenden?

Der Begriff ist an das Märchen „Hänsel und Gretel“ angelehnt, wo Brotkrumen verstreut werden, um den Weg zurück zu finden. Die Breadcrumbs auf einer Internetseite haben die gleiche Funktion! Sie werden als Navigationselement eingesetzt und sollen dem User, also dem Benutzer zeigen, wo er sich gerade befindet und ihm so bei der Orientierung auf der Seite helfen.

Eine Breadcrumb-Navigation kann gerade in sehr verzweigten Strukturen sinnvoll sein, wo ein Menü eventuell an seine Grenzen kommt und nicht die genaue Position des Users anzeigt. Dank der Breadcrumb-Navigation weiß man so aber genau, wo man sich befindet und kann bei Bedarf jederzeit problemlos zurück zum Ausgangspunkt gelangen, was wiederum für eine gute Usability, also Benutzerfreundlichkeit sorgt.

Wie verwendet man eine Breadcrumb-Navigation richtig?

Die Breadcrumb-Navigation soll natürlich gut sichtbar aber nicht zu dominant und präsent sein. Aus diesem Grund empfiehlt es sich hier, auf eine kleinere Schriftart oder Schriftgröße zurückzugreifen oder aber eine dezentere Farbe zu wählen. Damit sie jedoch gleich gefunden werden kann, sollte sie im besten Fall über dem Hauptinhalt der Internetseite platziert werden. Je nach Layout / Design ist es aber auch möglich, dass sie über dem Header (Kopfbereich) positioniert werden.

Damit das Navigationselement die ihm angedachte Aufgabe erfüllt, sollten die einzelnen Punkte identisch mit den Menüpunkten sein und auch zu dem jeweiligen Text verlinken. So landet man unabhängig davon, welche Navigation verwendet wird, auf der identischen Seite.

Die Breadcrumb-Navigation sollte mit der Nennung der Startseite beginnen – je nach Webseite wäre das „Startseite“, „Home“ oder aber „Willkommen“. Das Ende bildet dann der Name der aktiven Seite. Während alle aufgeführten Punkte zu der dazugehörigen Seite verlinkt werden, ist der letzte Punkt der aktiven Seite nicht verlinkt.

Damit die einzelnen „Brotkrumen“ voneinander getrennt werden und dies auf den ersten Blick sofort erkennbar ist, hat sich die Verwendung des Symbols „»“ etabliert.

Welche Arten gibt es?

Es gibt verschiedene Arten von Brotkrumen-Navigationen. Die wohl am häufigsten verwendete Variante ist die location based Breadcrumb-Navigation, bei der die aktuelle Position des Users in der Hierarchie der Webseite aufgeführt wird.

Bei dem Klickpfad (Path) werden die Seiten, die man vorher geöffnet hat, chronologisch wiedergegeben. Dies ist gerade bei komplexen Webseiten mit tiefgehender Struktur nur bedingt geeignet. Der User könnte auch einfach die Vor- und Zurück-Buttons des Internetbrowsers verwenden, um das gleiche Resultat zu erhalten.

In Onlineshops werden oft die attributbasierten Breadcrumb-Navigationen verwendet, die dem User einen Überblick über die Kategorien gibt, zu der die gerade besuchte Seite gehört. Die Verwendung einer solchen Brotkrumen-Navigation ist um einiges komplexer, denn hier muss die Navigation gegebenenfalls die Datenbank angepasst werden.

Welche Bedeutung hat die Breadcrumb-Navigation für die Suchmaschinenoptimierung?

Damit die Breadcrumb-Navigation sich positiv auf die OnPage Optimierung auswirkt, ist es wichtig, dass die Brotkrumen richtig implementiert werden. Dies sollte man im Quelltext mit Hilfe von Mikrodaten oder RFDa machen.

Der Google Crawler kann die Elemente, die semantisch ausgezeichnet sind, auslesen und im Index speichern. Teilweise wird so das Navigationselement bei Google in den SERPs, also den Search Engine Result Pages, als Rich Snippets in der URL-Zeile angezeigt.