Last updated on December 2nd, 2016 at 12:30 pm
I’ve just been visiting the Feng-GUI website after reading about it briefly in SitePoint’s Design View Newsletter #40.
This is really quite an interesting tool. The idea behind it is that using the algorithm they have developed, it can work out what points of the website are the main points that would draw a user’s vision towards them. It then works creates a salience heat map to determine which parts of the page are effectively the “hottest” areas. Or as described on their webpage it:
“…is an artificial intelligence service which simulates human visual attention and creates an attention heatmap.”
How cool is that? As you can see in the little image above showing this blog, the hottest points are not even on the content. While I don’t think this is 100% accurate as of yet, I would say it is actually getting reasonably close and is definitely still a very useful tool for a web and/or graphic designer.
If you use the tool found on their home page, you can upload any image that is a max of 5mb and it will run the algorithm over it and produce a heat map for you. Alternatively, you can use bookmarklets or there is a Firefox extension available. These two options produce a larger image than the tool on their home page and so these might be more useful for some people, however I did notice that their is a slightly different result using these options. I don’t know if it is because they are larger images or if it is something else.
Personally I think the heat maps produced by the home page tool are a bit more accurate, however the larger images are definitely more useful, especially in area’s that have a lot of detail. I noticed that the Firefox extension and bookmarklets seemed to time out less than trying to create a heat map through the main page as well.
The Feng-GUI Firefox extension is very simple to use and is my favourite of the options. Once it is installed, it just ads a little flame icon to the bottom right of the Firefox status bar. Simply browse to the page you wish to see a heat map of and then click the flame. You will then be taken to the Feng-GUI website with a completed heat map in front of you. Easy as that.
The bookmarklet code can be found on the tools page of the Feng-GUI website and I have setup a little example below so you can see how it works:
I know I’ve already found this useful, so hopefully you will too.