Der 17. Tag: Usability

Seite 591 bis 748 im Buch

Verstehen wie die User navigieren

Funktionsweise einer Webpräsenz 

Denn Reizüberflutung kann User vertreiben und das wollen wir nicht. Wir wollen eine hohe Verweildauer, lange Interaktionsraten auf unserer Seite und sehr gute Kundenfeedbacks bekommen :)

Usability

Deswegen wappnen wir uns mit guter Werbewirkung, eine gute Usability (Benutzerfreundlichkeit). Denn ein User soll ja nicht erraten, was wir von ihm wollen, sondern eine Einladung bekommen, sich mit unserer Seite zu beschäftigen. Ein Resultat des Besuchs kann sein, das der User eine Beratung wünscht, Entertainment erwartet oder gar Produkte kauft.

Das bedeutet Angebot der Beratung wie zum Beispiel den Livechat. Ich versuche Interessenten zum Kunden zu machen. Ich versuche über die Seite Neukunden zu gewinnen.

Gesetz der 3 Sekunden…Arbeiten mit Aufklappmenüs

Die Frage: Was gehört zum guten Ton, was sind die User gewohnt.

Doch was bedeutet das. Wir brauchen ein Design dass die User in das Zentrum rückt (UCD - User centered design). Als Unternehmen gibt es viele Möglichkeiten herauszubekommen, wo sich der User am wohlsten fühlt - Viele Unternehmen messen eine kleine Gruppe von Probanden (innerhalb eines Prüfverfahrens) mehrere Tage!

Dafür definiert man im Vorfeld den Nutzungskontext, die Zielsetzung der Website und die Situationen, indem sich die User befinden könnten.

• Effektivität: Ist das Ziel erreichbar
• Effizienz: Funktioniert alles (3-Klick-Regel)
  Ich versuche den User ziemlich einfach
• Zufriedenheit, aber nicht zu viel (Feature Creep - leicht verständlich und übersichtlich)
• Beachtung der Konventionen: (Usage Patterns - z.B. der Einkaufwagensymbol  oder die Angaben im Folter)
• Design und Funktion
  Arbeiten mit Buttons und Formularen, Datenbanken
  Arbeiten mit einer Landingpage, die nicht aufgeführt wird und wo meine Banner  und Anzeigen, Affiliate-User „landen“
• Struktur der Website als User-Sitemap (Inhaltsübersicht vergl. www.bundespraesident.de)
  Mit Balsamiq (http://balsamiq.com/products/mockups/) Website in Skizzenformat, Mockup ist die Skizze  der Website, Hier kann ich prüfen, wie die Seite aussieht.  Wichtig zum Herunterladen!!!!

Oberer Bereich der Website sollte werbefrei sein. Auch bei einer Kategorieseite ist zu achten: Gebe ich genug Überblick. Die Starseite braucht eine Hilfefunktion. Alle Artikel gehören auf Kategorieseite. Detailseiten geben Antwort auf Fragen. Hier kann man indirekte Fragen stellen. Das geht mit Hilfe von Formularen. Das ist aber immer noch keine Landing-Page. Kategorieseite bietet Übersicht, dann komme ich auf eine Detailseite, hier muss mein Call to Action rein, Landingpage ist nicht Teil der Navigation, sondern Infos werden hier geführt.

Um eine Website zu strukturieren lässt sich das sog. Card-Sorting einsetzen - dazu werden alle Themen erst einmal auf einzelne Karten geschrieben und dann entsprechend geclustert bzw. gelabelt d.h. mit Überkategorien versehen. Oder wir setzen sog. Wireframes (Mockups) ein. Auch über leere Flächen sollten wir nachdenken, den Whitespace. Dann sind wir schnell beim Goldenen Schnitt und der Drittelregel (um Schnittpunkte, Knotenpunkte optisch zu nutzen). Um zu einer Entscheidung zu gelangen können wir das über ein Rapid Prototyping machen, dass wir den Entscheiden vorlegen und zu einem iterativen Prozess (Entwicklung/Abstimmung/Anpassung) kommen. Wesentlich ist, dass die Struktur eher flach sein sollte, denn der Crawler geht nicht so tief und eine Navigation sollte die "magische Sieben" nicht überschreiten - denn Menschen können maximal sieben Informationen gleichzeitig aufnehmen (Millersche Zahl).

Wichtig ist auch, dass sich ein Suchfenster dort befindet.

Seitenarten: Startseite / Kategorieseite / Detailseite (Je tiefer der User in der Seite, desto weniger Keywords für die Suchmaschinenoptimierung einsetzen) - Die Startseite vermittelt der Zielgruppe den Kern des Unternehmens und erfüllt oder erzeugt Erwartungen. Die Kategorieseite gibt Überblick und unterstützt die Filterung von Suchbedürfnissen. Die Detailseite gibt Antworten auf Fragen, stellt die Vorteile heraus und regt zum Kaufen an.

Navigationsarten: Global / Lokal ( zu Kategorieseiten) / Breadcrump (zeigt dem Besucher, wo er sich auf der Seite befindet) / Suche - Die Globale Navigation ist die Hauptnavigation, die sich immer überall befindet mit den Hauptkategorien und immer die Hilfsnavigation beinhaltet (z.B. das Login, Hilfe etc.). Die lokale Navigation zeigt eine extra Navigation an, die zu bestimmten Themen erscheinen. Der Breadcrump zeigt dem User an, wo er sich gerade befindet. Ein Suchfeld (in einer kurzen und einer erweiterten Variante) sollte jede Seite haben, es lassen sich Autosuggest-Funktionen integrieren und auch Tippfehler (Phonetisch) erkennen. Eine Suchfunktion lässt sich ebenfalls so gestalten, das auf bestimmte Fragen ein "Best Best" sog. Spitzentreffer rauskommt und dann noch eine Liste mit den restlichen Algorithmen Ergebnissen. Dem User sollte immer Hilfestellung gegeben werden, besonders wenn die Suche keinen Erfolg hatte.

Navigationsstile: Listen / Auswahl-Menüs / Register / Clouds / Klappmenüs

Jetzt können wir uns noch mit dem Aufbau von Texten (Spalten mit zwölf Wörtern pro Zeile), Fonts, Buttons, Links, Formulare, above-the-fold Content beschäftigen. Gerade wenn es um Daten geht, werden User ganz empfindlich. Ein Hinweis, was mit den Daten passiert könnte helfen. Eine Einrichtung eines Captchas "Spam-Schutz" kann manche Hürde nehmen, doch bitte mit Erklärung es gibt immer Nutzer, die damit nichts Anfangen können und  sich Fragen "Was soll denn das und was muss ich da eingeben oder ist Groß- oder Kleinschreibung wichtig…)

Nun alles was hilft um sich zurecht zu finden könnte angewendet werden. Hier gilt es dabei auch die Wahrnehmungsgesetze zu beachten, doch die lassen sich wunderbar im Buch nachschlagen und zwar auf der Seite 654-660 oder sich mit Design, Typo und Farben zu beschäftigen.

Die Usability steht immer mehr vorne, da gibt es ein paar goldene 10 Grundregeln (Seite 669- 671) in der Entscheidung für ein gutes Ranking - So funktioniert die Suche!

Barrierefreiheit

Das ist aber alles nicht ganz so einfach, denn es gibt ja Menschen mit Handicap und die brauchen Computerhilfen wie incobs.de. Dazu brauchen wir extra Seiten, um eine Barrierefreiheit zu gewährleisten - dazu integriert man gewisse Weichen auf der Website, die es ermöglichen die Seite in größerer Schrift zu betrachten oder das die Seite in einem höheren Kontrast ausgeliefert wird - Beispiel: imedo.de. Und nicht nur visuelle Themen, sondern das auditive muss auch passen, denn Worte und Bilder können per Screenreader wie freedomsci.de vorgelesen werden. Das Wild-Wide-Web-Consortium hat dazu das POUR Prinzip (WCAG20) aufgestellt.

Vorsicht wegen doppeltem Content, hier kommt der Canonical Tag zum Einsatz

LPO (Landingpage-Optimierer) und CRO (Conversion-Optimierung) - Optimizing der Landingpages und Conversions

Doch Daten lassen sich ja nicht nur auswerten, sondern in neue Dienste verarbeiten: Google entwickelt weitere Ideen wie Google Glases, Google Auto, Google Now, Google Deepmind (Künstliche Intelligenz nutzen um Datenbestände effektiver zu lesen), Google Nest (Web 4.0), Voice-Search. Denn in diesem Zweig tun sich neue Berufsfelder auf - Partner von Google finden. 

Wichtig: Voice-Search

Denn wir wollen ja nicht nur, dass sich jemand auf der Seite gut zurecht findet, sondern eine Conversion auslösen. Und somit sind wir in der Conversion Rate Opimization (CRO) angekommen. Das ist etwas anderes als einzelne Landinpages zu optimieren, sondern hier geht es um den ganzen Kaufprozess. Und die Kunden auf dem Weg ihrer Entscheidung zu begleiten.

Seitenarten: Microsite (kleine Extraseiten, auf der Page oder extra Domain für die Seite) / Brückenseite (Doorway-Pages), heute nicht mehr  üblich und verboten / Squeez-Page / Splash Page (mit Flash-Intro) tot!!!!!

Die Kunst ist es bei gleichbleibenden Besucherzahlen mehr Conversions auszulösen. Nur wie machen wir das? Zum einen gucken wir uns die Einstiegsseiten an und über welchen Kanal über welchen Referrer sind die Kunden auf die Seite gekommen.

Die Tendenz geht zu weniger Navigation. Es geht mehr um den Inhalt

Doch beschäftigen wir uns mal mit dem Aufbau einer Landingpage, das Bindeglied zwischen der Werbung und der Konversion. Die sieben Elemente (Seite 691-702): Headline / Fließtext / Leadtext / Call-to-action / Heroshot / Aufzählung / Trustelement. Wichtig ist zu beachten, dass wir Seiten skimmen (ein überfliegen der Seite nach visuellen Anreizen wie den Heroshot. Danach entsteht erst ein eigentliches Scannen (F-Linie / Z-Linie) und hervorgehobene Elemente geben uns schon mal eine Route vor. Eine Route für eine Entscheidung. Denn auch im Text sollten wir schon in Richtung der Konversion steuern und Fragen der Benutzer beantworten oder Bedenken ausräumen. Wichtig ist die Landingpage muss klar bleiben und nicht ablenken. Danach machen wir den Test mit fivesecondtest.com

Hier kann ich dann mein Mock testen, wie viele Klicks bekommt meine Seite

https://usabilityhub.com/ Hier kann ich meine Landingpage…also bei einer Display-Kampagne setzte ich den Banner auf meine Seite, dann darf dieser mich nicht zur Produktseite führen, sondern  auf n die Landingpage, hier löse ich eine Conversion aus, ein Call to action, ich will, dass der Kunde spielt

Auf der Landingpage gibt es oft Menschen, hier auch Platz für eine Adwords-Kampagne, Hier werden alle Bereiche zu einer aktuellen Kampagne angeboten

Hier nun zum Aufbau einer Landingpage

http://www.konversionskraft.de/landing-page-optimierung/landingpage-baukasten-infografik.html

Logo zum Erwecken  von Vertrauen, dann kommt die Subline mit Kundenfreundlichkeit, abhängig von der Werbekampagne, dann kommt der Heroshot (Identifiziere ich mich mit der Person oder nicht?)

Dann Erklärung, warum ich das Produkt kaufen soll. Also eine personalisierte Einladung. Dazu noch die Erklärung, warum das einen besonderen Wert hat…Dann beantworte ich Fragen, hier Interaktion, Hier eventuell  ein Chatberater, dann Preisangebote (Sonderangebote), dann erst Call To Action, dann muss erklärt werden, was passiert, wenn der Besucher den Button drückt, was dann alles in den Warenkorb kommt.

Unten dann noch die Trustelemente: (TÜV usw.), Zeugnisse, Kundenmeinungen

Nur der Vorschlag --- Links führen zu einer weiteren Landingpage

Nicht jeder Nutzer bleibt oder entscheidet sich sofort zu kaufen. Jetzt gibt es die Unzufriedenen, die Fans und die Abwägenden. Eine entschiedene Frage ist: Was hält Interessenten ab zu kaufen? Jetzt ist es an uns zu überzeugen! Eine Unterstützung könnte sein, dass sich Menschen zu 85% unbewusst entscheiden, sich an anderen Menschen orientieren, emotional Entscheidungen treffen und sich von Sinneseindrücken beeinflussen lassen.

Analyse und das schöne Unterfangen des Datenlesens

Um die Zielgruppe besser kennenzulernen Ode durch Prozesse zu lenken steht im Vorfeld die Analyse. Da gibt es ganz Verschieden Methoden. Eine Website startet meist mit einer Beta-Version erst einmal für eine kleine etablierte Gruppe und geht dann über in eine öffentlich -zugängliche Beta-Version, um erst einmal mal ein paar Funktionen zu testen.

Fangen wir mal mit dem Usability-Test an. Für eine Analyse lassen sich sog. Experten-Test durchführen. Eine kleine Fokusgruppe bekommt bestimmte Aufgaben, die sie durchführen sollen einen "Kognitiven Walkthrough" machen - sich in die Rolle verschiedener Kunden hineinversetzen und Notizen anfertigen. Der Experte muss sich in die Lage der Kunden hineinversetzen können. Eine weitere Möglichkeit ist die "Heuristische Evaluation" mit verschiedenen Aspekten (vergl. Seite 725).

Viele Unternehmen setzten auch sog. User-Test (entweder in einem Testlabor oder zuhause) ein. Die User durchlaufen folgende Phasen: Vorbereitung / Test / Auswertung und Optimierung. Die Vorbereitung liegt Schwerpunktmäßig auf einer guten Auswahl an Probanden (denn mit 5 guten Leuten können schon 85% der Schwachstellen ausfindig gemacht werden). Gerade in der Testphase werden Techniken wie "Thinking Aloud", "Teaching Back" oder einfach per Video-Aufzeichnung eingesetzt werden. Wichtig ist es und er Auswertungsphase zu erkennen, ob es ein "Hawthorne-Effekt" gegeben hat, das sich das Verhalten der Probanden durch die beobachtende Testsituation ändert/anpasst. 

Apple macht es vor - Das Geheimnis von guter Informationsarchitektur!

Weitere Analysearten: Befragungen / Fokusgruppe / Fragebögen / Checklisten / Online Panels / Tagebuch / Online-Test / Card Sorting / Logfile-Analyse

Mit der Logfile Analyse lassen sich interne Suchen auslesen und Prozesse auswerten, die logbuchartig in eine Datenbank festgehalten werden. Ein aufwendigeres Verfahren ist das Eyetracking z.B. usableworld.com.au. De Blickwinkel und Blickbewegungen eines Probanden werden aufgezeichnet (entweder man setzt Helmkameras ein oder es lassen sich auch Kameras im Bildschirmgehäuse nutzen).  Da das Eyetracking ein teures Verfahren ist, gibt es auch die Möglichkeit Mouse- oder Klick-Tracking Verfahren einzusetzen. Die Ergebnisse lassen sich dann in Heatmaps, Clickmaps oder Movementmaps darstellen. Nicht nur Pfade lassen sich aufzeichnen, sondern auch im klassischen Marketing bekannte A/B Tests als Split-Tests Online einsetzen. Ein Grundsatz lautet: Nur ein Element testen oder komplett verschiedene Versionen. Und sich von Groß nach Klein bewegen d.h. vom Groben ins Feine zu testen. Beispiele liefert whichtestwon.com. Erweiterungen lassen sich dann durch Multivariate Tests erkunden. Um z.B. Kombinationen von Elementen besser zu testen, durch die erhöhte Komplexität benötigen wir eine größere Gruppe an Probanden. Wer was zum nachlesen braucht - guckt mal bei shopstrategie.de nach.

Formulare sollte nicht unterschätzt werden. Sie sind häufig ein Einstieg zur Conversion.

Wichtig ist bei allen Analyseformen den Nutzerkontext und verschiedene Usertypen zu berücksichtigen.

Zusammenfassung:

 

Wiederholung

Barrierefreiheit

Navigqation, wie ist sie gestaltet, wie wird sie geklickt

Flache Hierarchie

Mockup aufbauen…Bestimmung der Kategorien , um das aufzubauen

Auf jeder einzelnen Seite muss dann Keywordorientiert gearbeitet werden

Nicht sofort im oberen Teil Werbung auf der Indexseite

Leicht verständlich

7-Punkte-Regel …. Alles muss so schnell wie möglich erkannt werden

Also Kontaktformulare selten benutzt

Bei Reklamationen extra Bereich mit Ansprechpartner

Orientierung an Mitbewerbern, wie man auftritt. Hier darf ich nicht so sehr herausfallen, sonst verliere ich den Anschluss

Navigation: Globale Navigation, Hilfebereich muss immer im Navigationsbereich gefunden werden

Optimierung der  Conversionrate: Farbe des Button?

Direkteste Page dazu: Landingpage, steht zwischen Werbung und unsererem Seiten auftritt

Anliegen: Ich will den Kunden führen, es gibt natürlich Grundtenzen, obwoh es natürlich individuelle Charakteristika gibt.

Durch Sociall-Media. Hat sich das Sehrverhalten geändert…Eye-Tracking-Verfahren.

Beim Lesen habe ich eine Z-Linie…Psychologie spielt für Suchmaschine  eine Rolle

Landingpage

Heroshot: Bilder werden immer größer, 3 Sekunden Zeit sich damit, mit der Person zu identifizieren

Conversion: Anzahl der Jobbesucher und damit den Kauf ausgelöst haben

Testimonials: Abbau der Vorurteile notwendig, immer mehr Videos statt Fotos

Besser ein Bild als keines

Quelle mit persönlichen Ergänzungen und Kommentaren:  

BARmedia Training: Verstehen wie die User navigieren http://barmedia-training.blogspot.com/2014/06/verstehen-wie-die-user-navigieren.html#ixzz33SzdxRDT
Vielen dank für dein Vertrauen
Follow us: @bar_media on Twitter