Tag 17

Usability

Parameter für Nutzerfreundlichkeit

Seitenarten:

- Landingpage (muss nicht indexiert sein), Startseite (stellt das Unternehmen dar, erfüllt oder erzeugt Erwartungen) Kategorieseite (gibt Überblick und unterstützt die Filterung von Suchbedürfnissen), Markenauswahl, Seitenauswahl, Detailseite (gibt Antworten auf Fragen, stellt Vorteile heraus und regt zum Kaufen an), Microsites (auf Conversion ausgerichtet) > je tiefer in der Navigation, desto weniger Keywords für die Suchmaschinenoptimierung

- Hilfeseite

Navigationsarten: 
- globale (Hauptnavigation, die sich immer und überall befindet), lokale (Kategorienseiten, Navigation zu bestimmten Themen), Breadcrumbs (zeigt an, wo sich der User gerade befindet), Suche (mit Autosuggest-Funktion)

Navigationsstile:
Listen , Klappmenüs, Auswahlmenüs, Register, Clouds

Barrierefreiheit:
- größere Schrift, Kontraste, Gebärdensprache (erzeugt doppelten Content > Canonical Tag nutzen, um Google zu sagen, welche Seite die bevorzugte ist und ausschließlich betrachtet werden soll)

Design: 
- Whitespace, Goldener Schnitt, Drittelregel, max. 7 Navigationsebenen, Google Layoutoperator (prüft das Design), User centered Design (UCD): stellt den User ins Zentrum (Entertainment, Beratung, Produktkauf), Ansprache durch Ästhetik (s. Apple)
- Beachtung von Konventionen/ Usage Patterns (z.B. Einkaufswagensymbol, Angaben im Footer)

Nützliche Tools:
- MockUps/ Wireframes bauen: balsamiq.com (Seitenaufbau skizzieren)
- Blickrichtung eines Users/ Landingpage-Bausteine: http://www.konversionskraft.de/landing-page-optimierung/landingpage-baukasten-infografik.html
- fivsecondtest: usabilityhub.com (zum Testen von Landingpages)
- whichtestwon.com: Beispiele für A/B Tests
- shopstrategie.de: Hilfestellungen für multivariate Tests


Wahrnehmungsgesetze (Design, Typo, Farben):
- Figur und Grund (Vordergrund/ Hintergrund)
- Nähe: nahe beieinander positioniertes wird zusammengehörig wahr genommen
- Ähnlichkeit: s. Nähe
- Geschlossenheit: das menschliche Auge ergänzt Dinge, um bevorzugt geschlossene Formen wahrzunehmen (>Websitegestaltung ganzheitlich betrachten)
- Prägnanz/ Einfachheit: aufs Wesentliche konzentrieren, das Auge bevorzugt Dinge, die sich klar abheben
- Fortsetzung: Das Auge sucht zur Orientierung nach Linien
- Symmetrie: symmetrische Elemente werden eher als zusammengehörig empfunden (besonders gut: achsensymmetrische Anordnung)
- Erfahrung: fehlendes wird aus dem Erfahrungsschatz ergänzt
- gemeinsames Schicksal (bei Animationen): Dinge, die sich ähnlich (schnell) bewegen


10 Grundregeln der Usability:

1. alle Benutzer bedienen (barrierefreie Gestaltung, Inhalte für eine möglichst breite Besuchergruppe
2. einfache Orientierung (logische Seitenstruktur und Navigation, Suchfunktion, klar erkennbare Links, Kennzeichnung der aktiven Seite)
3. Inhalte optimal präsentieren (USP in den Vordergrund, Vorteile hervorheben, Aktualität, Kompaktheit, einheitliche Bildsprache, Tests von unterschiedlichen Browsern)
4. angenehme Atmosphäre (unaufdringliche Gestaltung, dezente Farben, Whitespace)
5. nicht stören/ irritieren (keine störenden Popups, nicht vom Inhalt ablenken, vom User selbst steuerbare multimediale Elemente)
6. Benutzer nicht warten lassen (kurze Ladezeiten/ kleine Bilddateien
7. nicht ausfragen (nur unbedingt benötigte Infos abfordern, knappe gut strukturierte Formulare
8. mit dem Benutzer kommunizieren (Rückmeldung bei Interaktion, positive Nutzererlebnisse
9. Vertrauen schaffen (einfache Kontaktmöglichkeiten, Transparenz)
10. Benutzer wieder bedienen (Newsletter, Bookmarking-Funktion, RSS-Feeds)

Testmöglichkeiten:
- User-Test mit einer kleinen Gruppe von Probanden
- Logfile Analyse (Auslesen interner Suchen und Auswertung von Prozessen mittels Festhalten in einer Datenbank)
- Eyetracking (Helmkameras zeichnen Blickbewegungen auf)
- Mouse- o. Clicktracking (Heatmaps, Clickmaps, Movementmaps)
- A/B Tests
- Mulivariate Tests (komplexer, testet Kombinationen von Elementen

Gelungener Aufbau einer Landingpage (Bindeglied zwischen Werbung und Conversion):

Eine gute Landingpage leitet den User durch den gesamten Prozess bis zur Konversion ("roter Faden").

Die sieben Elemente einer Landingpage:

1. Headline: Soll dem Besucher zeigen, dass er hier richtig ist und Interesse zum Weiterlesen wecken, Keywords aus der Werbung/ Kampagne wieder aufgreifen
2. Heroshot (Foto/ Bildelement): Key Visual, kann das Verlangen nach dem Angebot steigern
3. Fließtext: aus der Perspektive des Suchenden formulieren (Problem lösen), Fokus auf Mehrwert und Kundennutzen, Keywords aus der Suche bzw. Anzeige verwenden, Steuerung in Richtung Conversion (alle Fragen beantworten, Bedenken ausräumen), wichtigste Informationen an den Anfang, möglichst kurz, keine Fremdwörter/ Fachausdrücke
4. Aufzählung: Aufzählungslisten, Zwischenüberschriften, wichtige Begriffe fetten (für die Skimmer und Scanner), "Mehrwert auf einen Blick"
5. Leadtext (besonders bei erklärungsbedürftigen Angeboten): weitere Angaben zum Angebot, Fragen beantworten
6. Trustelemente: "Über uns", Foto der Geschäftsführung, Siegel, Marken, redaktionelle Zertifikate, FB-Likes, professionelles Design, gut strukturierte Seiten, Kundenmeinungen/ Aussagen Dritter, Testergebnisse, Auszeichnungen, Referenzen, Sicherheitsgarantien, Datenschutzbestimmungen, Rückgaberechte (dort integrieren, wo möglicherweise Zweifel aufkommen können)
7. Call-to-action: Zentrum der Landingpage, Blickverlauf dorthin führen, auffällige Gestaltung, klare Aufforderung, Platzierung above the fold (im sichtbaren Bereich), bei längeren Landigpages wiederholen, eindeutig formulieren, sodass klar ist, was als nächstes passiert (Second call to Action für die Unentschlossenen: z.B. Newsletteranmeldung, sollte jedoch nicht ablenken), ggf. mengenmäßige und zeitliche Begrenzung anmerken

zusätzlich: 

- Kommunizieren von Erfolgen (Zugehörigkeit), z.B. Bestseller markieren und Produkte empfehlen, die von anderen gekauft wurden

- in Communitys anzeigen, wie viele User sich schon angemeldet haben

- Zusatzangebote machen (Rabatte, kostenloser Versand, Gratisbeilagen)

- so wenig Ablenkung und Aufstiegsmöglichkeiten wie möglich (keine/ wenige Verlinkungen, die von der Webseite wegführen, keine weiteren Angebote aus dem Portfolio)

Anordnung nach Blickrichtung, s. auch folgende Grafik: http://www.konversionskraft.de/landing-page-optimierung/landingpage-baukasten-infografik.html

- Conversion-Elemente: z.B. Formulare, Call-to-Action Buttons

LPO = Landingpageoptimierung

CRO= Conversionrateoptimierung

http://barmedia-training.blogspot.de/#axzz33TNlajEs