Over the past month I’ve toiled away on a special project: a gallery of 51 simulated eye tracking heatmaps featuring the homepages of popular websites. The heatmaps cover a variety of industries including travel, consumer retail, media, government & politics, a catchall category of “other,” and finally a few categorized as “fun.” (More information about how I generate simulated eye tracking heatmaps.)
As you might imagine, this project was a huge undertaking and offered the opportunity to tackle some interesting UI problems. The first question: how to organize the images so comparing the best and worst in a category was easy for those viewing the heatmaps. The second question was more bedeviling: in what way should I display the final images so we capture the nature of the content in them. Should I display them as small image thumbnails? If so, what size? Should the thumbnails be “clickable” and appear in a modal window, an established website design pattern? Even then I had to consider that each image was based on the content width of the page. Egads — many questions, with many imperfect answers. I looked at a variety of jquery plugins, including:
I considered Lightbox 2 most seriously, but decided against it because the content in the hotspots is obscured when displayed at smaller sizes thus rendering the heatmap image virtually meaningless.
For now, I’ve settled on Supersized, which allowed me to display the images in their original full screen format. This solution is not without its limitations, namely that some images may be slightly distorted in some browser windows. Most of this is owing to the variations in image size and the inability to specify a fixed resolution. The other limitation is more minor: there’s a bar across the lower portion of the page that gives a bit of image information and allows the user to rewind, forward, and pause/play the slide show. Because of this, a portion of the each image is obscured. If I think (or hear) this is problematic after it goes live, then I’ll use A/B testing to see if users would be more satisfied with the Lightbox 2 solution.
The images I selected are based purely on my whims and interests. Among the homepages featured in the 51 images:
Apple (www.apple.com)
Continental Airlines (www.continental.com)
Continental Airlines Homepage Eye Tracking Heatmap
Martha Stewart (www.marthastewart.com)
Martha Stewart Homepage Eye Tracking Heatmap
Major League Baseball (www.mlb.com)
Major League Baseball Homepage Eye Tracking Heatmap
Senate.gov (www.senate.gov)
Senate.gov Homepage Eye Tracking Heatmap
Wall Street Journal (www.wsj.com)
Wall Street Journal Heatmap
To see all of them, visit the Homepage Eye Tracking Heatmap Gallery. And please enjoy!
——
Unrelated side note: If you didn’t get to enjoy the first night of the new PBS series on national parks – The National Parks: America’s Best Idea (A Film by Ken Burns) – check out your local listings for the cable-style repeats they plan to offer. You’ll learn all about Yosemite, Yellowstone, the amazing John Muir, and a bit about gorgeous Alaska. I shouldn’t really single out Alaska as the only “gorgeous” one — they’re all just breathtaking. And if you haven’t been to any of these places, by all means go. I’m a better person for the few hours I spent at Yosemite watching the sunrise the morning of a friend’s wedding, and my current “happy place” is a variety of scenic landscapes near Anchorage, Alaska. Indeed, my mighty life list includes the goals of spending a summer living in/exploring Alaska and visiting all the national parks at least once, collecting a stamp in my passport for each one.
{ 1 trackback }
{ 0 comments… add one now }