Feng-GUI vs UsabilityHub

Welcome to the latest edition of ‘Feng-GUI vs…’! in this series we choose one homepage design and test it with the Feng-GUI attention tracking algorithm.

This week’s contender is usability hub, a website that offers three different services for the usability tester- 5 second test, navflow and clicktest. We’ve reviewed 5 fivesecondtest in the past and can recommend it with some reservations. The results are slightly suspect (see my earlier post for the details) but the cost is right.

UsabilityHub.com - offering services to the user-tester and website owner

First impressions (the CARP test)

Contrast- There’s is a limited amount of color in the homepage.  That’s good.  I feel they are using good contrast with the blue “sign up for free” button. The color of the top navigation are muted and it seems that’s intentional

Alignment- I noticed some misalignment of the header with the top nav and the body. I suspected that it had something to do with the Red, UserVoice feedback button. I set my my browser window to 1024 x 768 for the screen shots and this caused the mis-alignment. It might be interesting to test both aligned in misaligned to see how the feng-GUI notices the difference. I decided to test ONLY the aligned version – but I would suggest checking how the feedback button effects alignment in small screens.

Vertical alignment is guided by a three column layout of the approximately 960 pixels. The left column is that two thirds width and the right is a 1/3 width. The header with the tagline and headings breaks this vertical alignment slightly – not to a unpleasing effect but I wonder how the algorithm will see it.

Repetition- I see this in the use with the blue in the sub-headings and the images for the list of services. Nothing stands out as breaking the rule. One thing about the Facebook and twitter display- I might look for a way to repeat the format and make them as similar as possible.

Proximity – that’s hot bath items may be a little close together and the separation graphic – a dotted vertical bar- is a little hard to see on my screen. The button “sign up for free” sort of floats in space and doesn’t appear grounded to any other element. And, lastly, the twitter heading is equidistant between the two elements. It should be closer to the twitter posts.

That was fun. It’s good to get the critical eye going. I chose this because it was one  of the designs that I liked. But it proves that whenever you have a design and look at it critically, you will find things to adjust and change. Is it picking nits? maybe. Will it improve website goal conversion? maybe. Is it fun and interesting? yes.

Bring in the Feng-GUI!!!

UsabilityHub.com – offering services to the user-tester and website owner

UsabilityHub Heat Map

UsabilityHub gaze plot

The Heat Map – This is surprising. The “sign-up for free” button got no attention. The graphic in the header which had a highly contrasting green circle got the most attention on the page. Additionally, the top navigation and branding got zero attention, which I feel is by design because of the muted colors.

Why do I suspect this happened? I feel that the green circle graphic garnered attention because of its contrasting color and it breaks the grid alignment. Also notice that it is (roughly) centered in the page.

The red, feedback button may have something to do with it as well. It may have stolen attention because of the high contrast and close proximity.

The Gaze Plot – The gaze plot shows fairly tight groupings around the key content. In particular the heading “take the guesswork out of your interface designs” I feel would be read by the user. It seems like the user will read the headline, scan the “tools available at the hub” heading text, and and scan the tweets.

My suggestions

I feel the intended goal -the banana- for the page is to get people to sign up and click on that “sign-up for free” button. In order to increase attention to the button, I would try to get a brighter color – perhaps a repetitive color with that green in the graphic. I like green, the color of go. Maybe I would change that green graphic, and use the green for the button. Likewise I would move the feedback button to the right side of the page – to see if that shifts more attention to the content of the page. Additionally, I might move the “Latest News” heading ‘below the fold’ on my most common monitor resolution.

Questions:

Did my interpretations match yours?

Would you like to see more installments of ‘Feng GUI vs…’ ?