Clickmap

Usability Analyse im WebWerkzeug & Nutzen

SwissUPA/SwissCHI Event – Zürich, 27.10.2011www.clickmap.ch | Pascal Bender

FacesPerson & Firma

Pascal Bender, dipl. Inf. Ing. FH

• 1 Kind, ledig, Basel-Stadt

• Studium Diplomingenieur Informatik FHNW

• Web Applikationen

• Smartphone & Bildverarbeitung

• Projektleitung

• Cargo & Aussenhandel (BL, 3 Jahre)

• Online-Media (ZH, 2 Jahre)

• Mitgründer und Geschäftsführer arteria GmbH

Faces

arteria GmbH

• Reinach / BL

• Entwicklung von Web Applikationen

• Eigene Projekte (mischbar.ch, flypost.in, …)

• Standardprodukte (CMS, eCommerce, …)

• Kunden Projekte

• Vermarktung & Vertrieb, sowie Projektleitung

• «SaaS – driven»

Faces

FLYPOSTFLYPOSTFLYPOSTFLYPOST

StoryMischbar

www.mischbar.ch

• Virtueller Barschrank mit angepassten Rezeptvorschlägen und Online Bestellvorgang über Kurierdienste (< 1h)

• Google Analytics als Grundlage, aber wie steht es um …

• … Klickverhalten? (n Links: 1 Landingpage)

• … Scrollverhalten? (tiefe Indexseiten)

• … Usability?

• Proprietäre Lösung �

• Keine RealTime �

• Teilweise Zweckerfüllung (Layoutflexibilität, etc.) �

Story

Besucherverhalten analysierenClickmap

Besucherverhalten analysieren

www.clickmap.ch

• Kontinuierliche Evaluation mit grafischer Echtzeit Visualisierung des Benutzerverhaltens im Web

• Bedarf – Was?

• Mehr Erfolg im Web (Leads, Sales, Prozesse, etc.)

• Werkzeug – Womit?

• Benutzerverhalten analysieren (keine Seitenaufrufe!)

• Heatmaps, Clickmaps, Foldmaps

• Nutzen – Wozu?

• Das Verhalten der Besucher kennenlernen

• Die eigene Zielgruppe verstehen

• Grundlage für konkrete Optimierungen schaffen

Besucherverhalten analysieren

Scope & Features

• Major: Heatmaps, Clickmaps, Foldmaps

• Minor: RealTime, KPI, Social Link, Snapshots, etc.

• Nutzer

• Von: Blogs, Startups, etc.

• Über: KMU und Webseiten mit viel Traffic

• Bis: Partner / Integratoren

Besucherverhalten analysieren

Funktionsweise

• RIA Konzept

• Client Framework: jQuery

• Server Framework: Django / Python

• HTML5 & Canvas & JavaScript

• Kein Browser Plugin erforderlich (vs. Java, Flash, Silverlight etc.)

• Generische Lösung für Jedermann

• Flexibel bzgl. Web Layout (XPath)

• Linksbündig

• Zentriert

• Liquid / Fluid / etc.

• XPath unreferenziert: /html/body/div[2]/div[2]/div/div[2]/div[2]/center/div• XPath referenziert: //*[@id="button"]

Besucherverhalten analysieren

• Der Clickmap Tracker wird asynchron geladen• Die RealTime Bridge vermittelt die Besucherinteraktion zwischen Webseite und Report

Clickmap Tracker

Besucherinteraktion

Klicks Scrolls

1. überwacht

ClickmapBenutzerkonto

2. übermittelt

Usability Reports

3. erstellt

RealTime!

Webseite Clickmap

Foldmap

Clickmap

Heatmap

Besucherverhalten analysieren

• Der Proxy bildet die Grundlage für den Datenaustausch in Echtzeit• Gesamthaft bilden 3 inline Frames die Grundlage für die RealTime Funktionalität

Besucherinteraktion Usability ReportsRealTime!

Webseite Clickmap

RealTime Bridge

ProxyWebseite Report

iFrame iFrame iFrame

Hands on!Live-Demo

ArbeitsergebnisseHeatmap, Clickmap, Foldmap

Arbeitsergebnisse

Heatmap, Clickmap, Foldmap

• Analyse in RealTime

• Snapshot-to-Mail zur Weiterverarbeitung

• Social Link für das Projektmarketing

• Visuelles Tuning bei Clickmaps

• Weitere Informationen

Arbeitsergebnisse

Heatmap (Verein Jakobsweg)

Arbeitsergebnisse

Heatmap (Snoobi Inc. Finland)

Arbeitsergebnisse

Clickmap (Mischbar)

Arbeitsergebnisse

Foldmap (Verein Jakobsweg)

Nutzen«da draussen»

Nutzen

Case Study #1 – Kunde: AYOM Internet Marketing

• Einsatzgebiete:

• Ergänzung zu Google Analytics

• Interpretation von Web Analyse Daten vereinfachen

• Schulung von Mitarbeitern / Contentredakteuren

• Nachhaltige Bewertung von bereits umgesetzten Massnahmen

Case Study #1

1

2

• Google Analytics:6‘107 Besucher nutzen den Link auf „aktuelle Diskussionen“ (1), aber nur 123 Besucher klicken auf „neue Beiträge“ (2).Beide Links führen auf dieselbe Zielseite.

• Clickmap zeigt eindeutig, dass dieses Verhältnis offensichtlich nicht stimmen kann.

«Erst nach mühsamem Filtern in Google Analytics wurde uns klar, dass viele der Besuche auf Link #2 durch eingeloggte Benutzer stattfinden. Diese fallen in der initialen Statistik schlicht durch unser Such-Raster» (Alain Aubert, Ayom CTO)

Case Study #1

• Gute Usability:Text verlinken & Links einheitlich formatieren

• Schlechte Usability:Nicht verlinkter Text(Pfeil)

• Führt zu verlorenem Traffic und schlechtem Engagement der Nutzer

• Die Clickmap Analyse deckt dieses Problem in Echtzeit auf

«Wir können Content Redakteure direkt mit den Erkenntnissen aus clickmap schulen.Ein Bild sagt mehr als 1000 Worte und gibt einfaches und für jeden verständliches Realtime Feedback worauf bei Usability und SEO geachtet werden muss.» (Remo Uherek, Ayom CEO)

Case Study #1

«Besucher welche über die Google Suche direkt auf einer Zielseite landen, erzeugen dort einen hohen Traffic. Die Forumsbeiträge auf den Plätzen 4 und 5 zeigen dies. Dabei gerät der in clickmap effektiv erkennbare Flow

(die Interaktion des Besuchers) ausser Sichtweite des Betrachters. Die Heatmap deckt dieses Problem auf. »(Remo Uherek, Ayom CEO)

• Google Analytics (1):Das Forum liegt weit zurück auf Platz 6

• Clickmap (2):Das Forum wird von Besuchern häufig angeklickt

1

2

Case Study #1

• Die Foldmap zeigt:Die Hälfte der Besucher scrollen bis auf 150% des sichtbaren Bereichs («Fold»). Danach fällt die Aufmerksamkeit bis zum Ende der Seite auf 14% ab.Der dort platzierte Inhalt wird faktisch nicht mehr wahr-genommen!

Nutzen

Case Study #2 – Kunde: Verein Jakobsweg

• Einsatzgebiete:

• Ergänzung zu Google Analytics

• Argumentationsgrundlage für das Management

• Erkennen von konzeptionellen Fehlern

• Beispiele: Wegstrecken, Pilgerherbergen

• Zusätzliche Usability Sicht bei A/B Tests

• Beispiel: Index Seite

• Konversionsziel: Wegstrecken PI & Pilgerherbergen Exits erhöhen

• «Analyse Ziel»: Absprungrate senken, Exitrate steuern

• Strategisches Ziel: Vermarktungsmöglichkeiten für Content steigern

Case Study #2

• Besucher nutzen die Karte intuitiv als Navigation. Kartenpunkte sind aber nicht verlinkt [#1].

• Linkliste unterhalb der Karte ist redundant zum Menu links, wird aber kaum angeklickt [#2]. 2

1

Case Study #2

1

• Besucher nutzen die Karte intuitiv sehr stark als Navigation. Kartenpunkte sind aber nicht verlinkt [#1].

Case Study #2

• A/B Test als Schritt um die gesteckten Ziele zu erreichen

• Konversionsziel: Wegstrecken PI & Pilgerherbergen Exits erhöhen

• «Analyse Ziel»: Absprungrate senken, Exitrate steuern

Indexseite A, A/B Test Original

Case Study #2

• Variante B mit starkem Fokus auf die Incentivierung derWegstrecken sowie derPilgerherbergen

• Testsetup wird über denGoogle Website Optimizermit entsprechenderZieldefinition gesteuert

• Testdurchführung:November 2011

Indexseite B, A/B Test Variante

Nutzen

RealTime

• Sofortiges Feedback und Handlungsfähigkeit

• Sofortkorrekturen bei konzeptionellen Fehlern (z.B. Verlinkung)

• Sofortanalyse bei zeitkritischen Kampagnen (z.B. Werbung)

Nutzen

Neue Sichten auf weiterführende Schritte

• A/B Tests inkl. Berücksichtigung der Usability

• Plan – Do – Check – Act, inkl. Usability Betrachtung

• Grundlage für die aktive Usability Analyse (Eingrenzung)

• Etc.

Outlook

Outlook

Strategie des Werkzeuges Clickmap

• Segmentierung inkl. Individualparameter (Q4)

• Auto-Snapshots (Q4 / Q1)

• IntelliReports (Q1)

Strategie des Produktes Clickmap

• Langfristige Partnerschaften

• Affiliate Netzwerke / Programme

• Kundensegment Enterprise

Ihre ExpertenmeinungClickmap Feedback

Ihre Expertenmeinung

«SWOT» Analyse

• Strengths & Opportunities

• Usability Analyse näher am Benutzer (& Menschen) als Web Analyse

• Passive Analyse = Massentests = jeder Besucher ist Tester

• In Kombination mit A/B- und Multivariatentests

• Zur Ergänzung von Web Analyse Daten (z.B. Google Analytics)

• Vorgehende Eingrenzung für aktive Usability Tests (z.B. Labor)

• Weaknesses & Threads

• Technologieabhängig in der Auswertung (Webkit nötig)

• Interpretationsspielraum bei unzureichendem Wissen

Ihre Expertenmeinung

Einsatzgebiete von Usability Analysen im Web

• Ihre Nutzung und Meinung zu passiven / aktiven Methoden?

• Ihre Erfahrungen positiv / negativ?

• Ihre Anwendungsfälle?

• Ihre konkreten Fragen?

USPDie eierlegende Wollmilchsau

USP

Warum Clickmap?

• XPATH Analyse bringt verlässliche Resultate

• Unabhängig vom jeweiligen Browser des Besuchers (IE, FF, etc.)

• Keine Videos, keine Screenshots sondern in-place Live Analysen

• KISS!

• Transparentes Businessmodell

• Unlimierte Reports, Pages, Visits etc. Eingrenzung erfolgt ausschliesslich auf die Klicks selbst

• Technische Schnittstelle für tiefe Integrationen

• Gratis Blog im Usability Bereich vermittelt wichtiges Fachwissen

Herzlichen Dank!www.clickmap.ch