swissupa / swisschi event, 27. oktober 2011 (zürich)
DESCRIPTION
Kontinuierliche Evaluation mit grafischer Echtzeit Visualisierung des Benutzerverhaltens im WebTRANSCRIPT
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