Eye Tracking CSS-Tricks.com

Back in early October, I was at ConvergeFL to give a talk. JD Graffam of Simple Focus and his team were also going to be there giving a workshop on eye tracking. We managed to work it out to do a real eye tracking session for CSS-Tricks.com while we were there.

It was good timing, since I was just wrapping up the v10 redesign of this site. With eye tracking, you kinda gotta have something for the users to look at for it work (I know!). But also, the design was still malleable enough that I wasn’t afraid to make changes.

Here’s highlight video that Simple Focus created from the sessions:

Just for some context, we tested four people and each test was around 45 minutes. There was a script to follow. There was about five questions in the script. Each one provided a small bit of context and then asked the users a question / to perform a task on the site. For example:

Find information at CSS-Tricks about fluid-width videos.

They would then do so and talk their way through doing it. Then there was follow up for each question getting more information about how that task went.

If you’re interested in seeing complete individual sessions, I’ll post three of them here (one testee literally had “untestable” eyeballs. Happens, apparently). The green dot, if it’s not obvious, is where their eyes are focused.

There is a lot that goes into an eye tracking session. This isn’t just simple software you can download and it just works through your iSight camera or something. There are some indie hacker ways to do it inexpensively, but typically, an eye tracking setup is pretty pricy. The system Simple Focus uses is Mirametrix. They are apparently fairly disruptive in this market since it’s priced so much lower than others in the market. Still, you’re looking at $10,000 for the hardware and software you need even with Mirametrix.

Hardware and software isn’t all you need either. You need a decent venue to do it in. One quiet isolated room for the tester and the testee to be in, running the sessions. And another room for another team member and the site owner. Plus, you need to prepare a script and make sure that’s nicely honed. Plus find a group of people willing to do a bunch of fairly boring work and talk about it for 45 minutes. Not a trivial effort!

I learned a good deal from doing it. We found broken things. We found little things that would be super easy to make better. We found things that are going to take a ton of work to make better. Here’s an example of one page from the pile of notes from the sessions:

While watching the sessions live, I jotted down a few quick things in my GitHub Issues for the site to take care of and I’m making my way through that. I think that’s one of the things that has really helped this site out in the long term: I update little things every single day. Little design weirdnesses, information in old posts, code in demos, etc. Things don’t stagnate too long here. So every little email or tweet about the site I get gets attention. This eye tracking study was like rapidfire that stuff.

Thanks to JD Graffam, Patrick McNeely, Casey Zumwalt, and the whole crew at Simple Focus for helping with this. Hit them up if you’re interested in eye tracking for sure. If you’re interested in the entire journey that was redesining this site, you can watch every minute of it at The Lodge.