![Page 1: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/1.jpg)
Clickmap
Usability Analyse im WebWerkzeug & Nutzen
SwissUPA/SwissCHI Event – Zürich, 27.10.2011www.clickmap.ch | Pascal Bender
![Page 2: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/2.jpg)
FacesPerson & Firma
![Page 3: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/3.jpg)
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
![Page 4: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/4.jpg)
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
![Page 5: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/5.jpg)
StoryMischbar
![Page 6: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/6.jpg)
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
![Page 7: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/7.jpg)
Besucherverhalten analysierenClickmap
![Page 8: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/8.jpg)
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
![Page 9: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/9.jpg)
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
![Page 10: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/10.jpg)
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"]
![Page 11: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/11.jpg)
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
![Page 12: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/12.jpg)
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
![Page 13: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/13.jpg)
Hands on!Live-Demo
![Page 14: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/14.jpg)
ArbeitsergebnisseHeatmap, Clickmap, Foldmap
![Page 15: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/15.jpg)
Arbeitsergebnisse
Heatmap, Clickmap, Foldmap
• Analyse in RealTime
• Snapshot-to-Mail zur Weiterverarbeitung
• Social Link für das Projektmarketing
• Visuelles Tuning bei Clickmaps
• Weitere Informationen
![Page 16: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/16.jpg)
Arbeitsergebnisse
Heatmap (Verein Jakobsweg)
![Page 17: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/17.jpg)
Arbeitsergebnisse
Heatmap (Snoobi Inc. Finland)
![Page 18: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/18.jpg)
Arbeitsergebnisse
Clickmap (Mischbar)
![Page 19: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/19.jpg)
Arbeitsergebnisse
Foldmap (Verein Jakobsweg)
![Page 20: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/20.jpg)
Nutzen«da draussen»
![Page 21: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/21.jpg)
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
![Page 22: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/22.jpg)
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)
![Page 23: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/23.jpg)
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)
![Page 24: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/24.jpg)
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
![Page 25: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/25.jpg)
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!
![Page 26: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/26.jpg)
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
![Page 27: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/27.jpg)
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
![Page 28: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/28.jpg)
Case Study #2
1
• Besucher nutzen die Karte intuitiv sehr stark als Navigation. Kartenpunkte sind aber nicht verlinkt [#1].
![Page 29: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/29.jpg)
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
![Page 30: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/30.jpg)
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
![Page 31: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/31.jpg)
Nutzen
RealTime
• Sofortiges Feedback und Handlungsfähigkeit
• Sofortkorrekturen bei konzeptionellen Fehlern (z.B. Verlinkung)
• Sofortanalyse bei zeitkritischen Kampagnen (z.B. Werbung)
![Page 32: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/32.jpg)
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.
![Page 33: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/33.jpg)
Outlook
![Page 34: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/34.jpg)
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
![Page 35: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/35.jpg)
Ihre ExpertenmeinungClickmap Feedback
![Page 36: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/36.jpg)
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
![Page 37: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/37.jpg)
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?
![Page 38: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/38.jpg)
USPDie eierlegende Wollmilchsau
![Page 39: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/39.jpg)
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
![Page 40: SwissUPA / SwissCHI Event, 27. Oktober 2011 (Zürich)](https://reader033.vdokument.com/reader033/viewer/2022052905/5583d884d8b42a4c3f8b45f4/html5/thumbnails/40.jpg)
Herzlichen Dank!www.clickmap.ch