140602_UX-UI

Liebes Tagebuch, ...

heute sprechen wir über Usability.
Das Layout einer Site sollte nicht nur wegen des Page Algorithmus angepasst werden, sondern sollte jedem User ermöglichen, sich einfach zurechtzufinden.

Eine gute Benutzerfreundlichkeit zeichnet sich dadurch aus, dass der User sich schnell zurecht findet, so dass er am Ende seines Besuchs gerne bereit ist, unser Produkt zu erwerben --
> Gesetz der 3 Sekunden: binnen dieser Frist entscheidet der User, ob er auf einer Website verweilt oder diese wieder verlässt.
Hierfür ist ein Design nötig, das den User (und nicht unser Produkt) in den Vordergrund rückt.
Regel: In 3 Schritten bzw. Klicks muss ich den User dahin führen, was ihn tatsächlich interessiert.
 
Dafür definiert man im Vorfeld den Nutzungskontext, die Zielswetzung der Website und die Situationen, in der sich der User befinden könnte. Wie baue ich nun idealerweise meine Site auf? Hierzu werden die Hauptattribute neben dem Aspekt der Nutzerforientierung aufgeführt:

• Effektivität: Ist das Ziel erreichbar (Genauigkeit und Vollständigkeit der Zielerreichung)
• Effizienz: Funktioniert alles binnen der 3-Klick-Regel (Der im Verhältnis zur Genauigkeit und Vollständigkeit eingesetzte Aufwand, mit dem Benutzer ein best. Ziel erreichen)
• Zufriedenheit (Feature Creep - leicht verständlich und übersichtlich); Aufteilung der Site in 3x3 Felder (Freiheit von Beeinträchtigung und  positive Einstellung gg. der nutzung des Produkts)
• Beachtung der Konventionen (Usage Patterns: z. B. Wunschzettel, Einkaufswagensymbol, Hilfe/Suche, Footerangaben; sollten stets oben stehen)
• User Sitemap (Übersichtsthemen, wo findet man was, Newsletter, Kontakt) --> Google spricht den Hilfe-Seiten eine enorme Wichtigkeit zu
• Design & Funktion (Seite muss ohne Scrollen funktionieren)
• Struktur der Website als User-Sitemap

Mit Hilfe von MockUps kann ich eine Vorskizze meiner Website anlegen. Ein solches Aufbautool findet man unter http://balsamiq.com/products/mockups/.

Framing: Website in Skizzenart.

Seitenarten:

• Startseite: vermittelt der ZG den Kern des Unternehmens und erfüllt/erzeugt Erwartungen
• inkl. Hilfe-Funktion (bzw. User Sitemap), Filtermöglichkeiten, Seitennavigation
• Kategorieseite: Gibt Überblick und untertsützt die Filterung von Suchergebnissen
• Detailseite: gibt Antworten auf Fragen, stellt Vorteile heraus und regt zum Kauf an (durch z. B. virtuelle Anprobe, Warenkorb, ...)

Navigationsarten:

• Globale Navigation: Hauptnavigation, die sich immer überall befindet mit den Hauptkategorien und immer die Hauptnavigation beinhaltet (Login, Hilfe, ...)
• Lokale Navigation: zeigt eine extra Navigation an, die zu best. Themen erscheinen
• Breadcrump: zeigt dem User an, wo sich dieser aktuell auf der Page befindet bzw. den Pfad, den dieser bis dort zurückgelegt hat (Herren - Accessoires - Schals) ... (kann in RichSnippet integriert werden)
• Suchfeld: sollte jede Seite aufweisen; lassen sich z. B. Autosuggest Funktionen integrieren und Tippfehler erkennen und korrigieren? Dem User wird damit eine Hilfestellung geboten, falls die Suche keine Ergebnisse hervorgebracht hatte.

Aufbau von Texten (Spalten von zwölf Wörtern/Zeile):

• Fronts
• Buttons
• Links
• Formulare
• Above-the-fold Content (gerade auf Indexseite sollte man auf Werbung verzichten, da sonst die Gefahr eines downrankings besteht; Google sendet hier einen Layout Algorithmus) --> http://de.onpage.org/blog/above-the-fold-webseiten-richtig-aufbauen

Wahrnehmungsgesetze (Buch S. 654-660):

• Figur und Grund
• Nähe
• Ähnlichkeit
• Geschlossenheit
• Prägnanz bzw. Einfachheit
• Fortsetzung
• Symmetrie
• Erfahrung

Barrierefreiheit: 

• Gebärdensprache
• Kontrast
• unterschiedl. Schriftgrößem

Die Gefahr des doppelten Contents kann man mit einem gezielten Canoncial Tag begegnen, diese Seiten nicht mehr anzuzeigen.

Die 10 Usability Gebote (Buch S. 669-671) für ein besseres Ranking: 

1. Intuitiv nutzbare Website (gelernte Muster, erkennbare Links)
2. Einfache Orientierung (klares Gestaltungsraster)
3. Eyecatcher planen/wichtige Elemente hervorheben
4. Lesen am Bildschirm erleichtern
5. Navigation an Nutzer orientieren
6. Versprechen einhalten (What you see is what you get)
7. Werbung umsichtig einsetzen
8. Formulareingabe leicht gemacht
9. Multimedia bedienbar machen
10. Den Nutzer verwöhnen              ... nachzulesen unter http://www.mm-bit.com/fileadmin/pr%C3%A4sentationen/STZ-Usability.pdf

Seitenarten: Microsite/Brückenseite/Squeeze Page/

LPO & CRO:
LPO: Zurechtfinden auf einer Seite --> Landingpage optimieren
CRO: bezeichnet die ganze Reise des Users bis hin zum Auslösen einer Conversion --> seitenarchitektonisch optimieren

Landingpage --> via AdWords Kampagne (per Klick auf Banner; muss nicht via Suche auffindbar sein bzw. nicht indexiert)
Regel: Wer auf Werbung klickt, findet! ( ... alle anderen navigieren)

Die sieben Elemente der Landingpage (Buch S. 691-702):  Ein Mix aus Kenventionen und Highlights:

1. Headline
2. Fließtext
3. Leadtext
4. Call-to-Action
5. Heroshot (so rein wie möglich halten --> Heroshot (=der erste Eindruck, den ich bekomme)
   
6. Aufzählung
7. Trustelement

Mit Hilfe von Tools kann man den Aufbau bzw. dessen Optimierung seiner eigenen Landingpage vorantreiben:
http://www.konversionskraft.de/landing-page-optimierung/landingpage-baukasten-infografik.html
(Logo-->Headline/Subline-->HeroShot-->Einleitung (warum soll ich kaufen)-->UVP (bes. Wert für mich)-->Reason Why-->Preis-->Call-to-Action-->Fkt. Prinzip (was passiert bei Klick)-->Trust Element (Kd. Meinung/Zutaten/Materialien z. B. eines Shirts)-->Testimonials 

Die Landinpage muss klar bleiben und sollte den User nicht ablenken.
Um das Design der eigenen Landingpage zu testen, hilft folgendes Tool:
http://fivesecondtest.com/.