Grow your CSS skills. Land your dream job.

Eye Tracking CSS-Tricks.com

Published by Chris Coyier

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:

scan

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.

Comments

  1. I also found from the beginning that the Lodge was hard to find, as it is the only non-advertisment with a photo background.

  2. Permalink to comment#

    Thats awesome!!!

  3. James D
    Permalink to comment#

    Eye tracking was really cool. You can’t see yourself browse, so to get a visual representation of what eyes are doing was awesome. The heatmap stuff seemed like it was clicky analytics.

    Thanks for sharing Chris.

  4. Tome
    Permalink to comment#

    This is amazing; real empirical data on how your UI gets used! Very cool stuff.

  5. Minus the homemade hacks and expensive hardware I think the heat map is an excellent idea for user analytics and UI design element positioning.

    Thanks for sharing!

  6. Permalink to comment#

    Wow, great article, kind of weird the way that green dot runs over the screen. Never thought eye tacking is so expensive.

  7. Jason
    Permalink to comment#

    Very cool! Watched all three.

    I didn’t even knew about the “hotlink” area’s. I always hated it when I clicked something and I was redirected to another site. I don’t like it that the design or websites changes when I am at your site.

  8. Permalink to comment#

    awesome trick..
    any way can we do it at blogspot? do you have it tutorial?

  9. Tjorriemorrie
    Permalink to comment#

    Did that first guy burp? lol

  10. dj
    Permalink to comment#

    Chris… Very enlightening – I knew what tracking was but not the rubber on the road specifics for web developers. I DO Wonder – when you make the “tweaks” that you talk about to the site – are you [have you/would you] updating the “downloadable files” for us in the lodge. As I’ve worked through the videos and the files – I’ve found things that are different that I wondered about and thought that you must have them on a list to fix once the site was up and running.

  11. I’m pushing for this kind of testing really hard at my current job. I found a service that does kind of a similar thing, minus the eye tracking and putting together a fancy video:

    http://www.usertesting.com/

    I’m hoping to use this to test our current site. I have a lot of intuition about what is wrong with our site but I want to be able to prove it by having other people say it out loud while using the website. Hopefully this is something I’ll be doing in the future.

    • Hi Andrew, if you get any traction on usability testing with your curent job, I’d love to chat with you about best practices, and maybe even my firm (Simple Focus) can help out (we’re the ones who did Chris’ usability testing). Even if not, would love to chat and offer some free advice. You can get our email on our site.

  12. Permalink to comment#

    Awesome! I love the videos!

  13. Permalink to comment#

    I’m so psyched about eye tracking technology. I think it’s the wave of the future and I think it will reinvigorate the desktop/laptop market. Think about it… Tablets are killing it right now because of portability and the finger touching gestures. Eye tracking technology could be to the laptops/desktops what figure gestures are to the tablet.

    I’m also really looking forward to this technology for the handicap. I have a family member who is handicap and is losing function in their arm/hands. Within a couple years, they won’t be able to operate a computer at all due to the mouse function. But with eye tracking technology, that all changes :)

  14. Permalink to comment#

    Redesign is just perfect…

  15. Permalink to comment#

    Nice and impressive videos

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".