Heat Mapping aids Mobile/Content-First Responsive Web Design

by Michael Moores

Heat Mapping aids Mobile/Content-First Responsive Web Design

by Michael Moores

by Michael Moores

Responsive Heat Map Example

I love sitemaps. When properly done, a sitemap communicates how a user can access all the most important pages of your site. Site hierarchy is built on SEO data and categories are nicely organized into logical product groups. Mixed with a proper content audit, content pages are relevant, organized and written for your users. But something had been bothering me for a while.

Mobile First Till I Die

It didn’t work with a responsive mind set. With responsive web design we are taught to think mobile/content first. Mobile/content first is essential for responsive design because responsive design relies heavily on relevance and importance. Things need to be relevant so a simplified phone layout is still designed for user goals, rather than just forcing the monitor layout into a smaller screen size. Also by scrutinizing content and interactions, only the best is kept in the design, which is one way of improving performance. You are not wasting load time on items that are not important.

When given a traditional tree structure site map, I am forced to think backward from a monitor screen layout and make assumptions on how to present the sitemap to a user on a mobile device. So, I decided to throw out the tree structure idea and started from scratch.

Keep It Simple

Starting with the home page, I threw my site’s pages into a spreadsheet – each on their own line. If a page was a child of another page, I place it one column over. If any page existed on its own (like a 404 error page) it always existed in the first column.

Color Code

Now, line by line, color code your pages based on importance, similar to a heat map where red = very important and blue = not very important. These colors should be based on SEO data, client input and logical organizational hierarchy/usability.

According to the importance placed on the content, anything that is red should either be directly accessible by a user or no more than one click away.

What This Communicates

By “heat mapping” your sitemap, you allow your designer the freedom to be creative with UI elements while making sure white space is properly used by distinguishing the most relevant pages from the secondary ones. For example, a heat mapped sitemap might note a group of links as very important. A designer can either group these links into one menu or several. Maybe one of the items makes sense to be pulled out and designed on its own. By not putting the sitemap in a tree format and implying layout, the designer is essentially given a clean slate with link relevance information. As a designer, I love when I am given a problem to solve within a “confined space”.

  • Give me all the creative freedom… I don’t know where to start.
  • Imply or give me the solution…. I mentally check out and you get something that isn’t as good as it can be.

A simple concept I think. Its not the prettiest of deliverables but this has worked well on smaller sites. I would be interested to see how if this concept could be properly applied to a larger site. I look forward to your feedback!


Nicole Domanski is a founding partner and the Chief Design Officer for Envalo, Inc., a Cleveland, Ohio-based eCommerce solutions company.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top