Eye Tracking CSS-Tricks.com

Anfang Oktober war ich auf der ConvergeFL, um einen Vortrag zu halten. JD Graffam von Simple Focus und sein Team waren ebenfalls dort, um einen Workshop zum Thema Eye-Tracking zu geben. Wir haben es geschafft, während unseres Aufenthalts eine echte Eye-Tracking-Sitzung für CSS-Tricks.com durchzuführen.

Es war genau der richtige Zeitpunkt, da ich gerade die v10-Neugestaltung dieser Website abschloss. Mit Eye-Tracking muss man den Nutzern schon etwas zum Anschauen geben, damit es funktioniert (ich weiß!). Aber auch das Design war noch flexibel genug, dass ich keine Angst hatte, Änderungen vorzunehmen.

Hier ist ein Highlight-Video, das Simple Focus aus den Sitzungen erstellt hat

Nur zum Kontext: Wir haben vier Personen getestet und jeder Test dauerte etwa 45 Minuten. Es gab ein Skript zu befolgen. Im Skript gab es etwa fünf Fragen. Jede Frage bot einen kleinen Kontext und dann wurde den Nutzern eine Frage gestellt / eine Aufgabe auf der Website gestellt. Zum Beispiel

Finde Informationen auf CSS-Tricks über flüssigbreite Videos.

Sie taten dies dann und sprachen dabei darüber. Anschließend gab es zu jeder Frage eine Nachfrage, um weitere Informationen darüber zu erhalten, wie diese Aufgabe verlief.

Wenn Sie daran interessiert sind, vollständige einzelne Sitzungen zu sehen, werde ich drei davon hier posten (ein Proband hatte buchstäblich „nicht testbare“ Augen. Kommt vor, anscheinend). Der grüne Punkt zeigt, wo sich ihre Augen konzentrieren, falls das nicht offensichtlich ist.

Es steckt viel in einer Eye-Tracking-Sitzung. Das ist nicht einfach nur eine einfache Software, die Sie herunterladen können und die über Ihre iSight-Kamera funktioniert oder so. Es gibt einige Indie-Hacker-Wege, dies kostengünstig zu tun, aber typischerweise ist ein Eye-Tracking-Setup ziemlich teuer. Das System, das Simple Focus verwendet, ist Mirametrix. Sie sind anscheinend ziemlich disruptiv in diesem Markt, da es viel günstiger als andere auf dem Markt ist. Dennoch müssen Sie mit Mirametrix etwa 10.000 US-Dollar für die benötigte Hard- und Software einplanen.

Hardware und Software sind auch nicht alles, was man braucht. Man braucht einen ordentlichen Veranstaltungsort dafür. Einen ruhigen, isolierten Raum für den Tester und den Testteilnehmer, in dem die Sitzungen durchgeführt werden. Und einen weiteren Raum für ein weiteres Teammitglied und den Website-Besitzer. Außerdem muss man ein Skript vorbereiten und sicherstellen, dass es gut ausgearbeitet ist. Dazu muss man eine Gruppe von Leuten finden, die bereit sind, eine Menge ziemlich langweiliger Arbeit zu leisten und 45 Minuten lang darüber zu reden. Keine triviale Anstrengung!

Ich habe dabei viel gelernt. Wir haben defekte Dinge gefunden. Wir haben kleine Dinge gefunden, die sehr leicht zu verbessern wären. Wir haben Dinge gefunden, deren Verbesserung eine Menge Arbeit erfordern wird. Hier ist ein Beispiel für eine Seite aus dem Stapel Notizen von den Sitzungen

Während ich die Sitzungen live verfolgte, notierte ich mir einige schnelle Dinge in meinen GitHub Issues für die Website, um sie zu erledigen, und ich arbeite mich gerade durch. Ich denke, das ist eines der Dinge, die dieser Website langfristig wirklich geholfen haben: Ich aktualisiere jeden Tag kleine Dinge. Kleine Design-Eigenheiten, Informationen in alten Beiträgen, Code in Demos usw. Dinge stagnieren hier nicht zu lange. So erhält jede kleine E-Mail oder jeder Tweet über die Website, den ich erhalte, Aufmerksamkeit. Diese Eye-Tracking-Studie war wie ein schnelles Abfeuern dieser Dinge.

Vielen Dank an JD Graffam, Patrick McNeely, Casey Zumwalt und die gesamte Crew von Simple Focus für die Hilfe dabei. Kontaktieren Sie sie auf jeden Fall, wenn Sie an Eye-Tracking interessiert sind. Wenn Sie sich für die gesamte Reise der Neugestaltung dieser Website interessieren, können Sie jede Minute davon auf The Lodge ansehen.