Posts Tagged ‘Feng-GUI’

Better User Experience Podcast #15 – Remote User Testing With Usabilla

November 21, 2011 Leave a comment

Today it’s “Show and Tell” time on the podcast.  I’ve brought “Usabilla” to the front of the class for you to enjoy – in living color.  Podcast #15 is ALSO Screencast #1.  Your welcome internet community – the future of communications technology is here (may not be available in all markets)

[Note from Ben: The upload choked. I’m uploading it again and it’ll be here soon. It’s the screencast to go with the podcast, but you can enjoy the podcast without watching the screencast… That said, I’ll have it up as soon as possible.]

Ben and I discuss to the process to create a test and how it might fit into a site design / revision process.  We also brought in our old friend Feng-GUI to help ‘triangulate’ the results. We agreed that the standard questions were lacking and probably not going to reveal actionable data.  And, we finish the show with the love triangle between chocolate, peanut butter and jelly.  ENJOY!

Subscribe to our podcast on iTunes – Insightful episodes each week!

Posts we reference in the podcast:

BUX Post: Simple Usability Tests with Usabilla



Usabilla Blog post – Five things you can test under five minutes

Destiny’s Child – Bootylicious

Better User Experience Podcast #13: Managing the Developer/Client Relationship by Implementing a System

November 7, 2011 Leave a comment

These days everybody is talking about relationships.  And, so are we.

Ben and I talk about the nature of relationships between Business Owners and Web Designers.  We  argue for a process-based relationship, and argue against an ill-defined series of interactions … okay, call them  ‘One night stands’.

Without clearly stating goals and establishing boundaries,  fear and doubt [FUD – Fear, Uncertainty and Doubt] will creep into your interactions and it will harm the project.   However, by committing to goals and a process, everyone reaps the benefits of gradual improvement and ‘getting what you want’… unless you don’t want to be in a relationship.  It’s complicated – We plan to write about this more. Check back for future blog posts.

Also, we chat a bit about card sorting tools.

Remember you can subscribe to our podcast on iTunes –  episodes each Monday!

Referenced in the podcast:

Optimal Sort and

Gordon Ramsay’s Kitchen Nightmares

Rock Out with Your Crock Out

Better User Experience Podcast #12 – What You Say Versus How You Say It

October 31, 2011 Leave a comment

Tonight, Newman and I do a Late Night Podcast. We talk about Steve Krug, Jakob Nielsen, and swagger. We talk about what you say versus how you say it. We cover the Feng-GUI vs. Usability Hub post and for the first time we have a different ending song.

Remember you can subscribe to our podcast on iTunes – new episodes each week!

Posts we reference in the podcast:

Feng-GUI vs. Usability Hub

4 Points of Wisdom from Steve Krug’s “Rocket Science Made Easy”

Jakob Nielsen – How Long Do Users Stay on Web Pages?

Jakob Nielsen – E-Commerce Usability

Feng-GUI vs UsabilityHub

October 28, 2011 4 comments

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. - 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!!!

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.


Did my interpretations match yours?

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

Feng-GUI vs Crazy Egg

October 12, 2011 2 comments

This is a new blog post series on Better User Experience.  We call it ‘Feng-GUI vs…’  Each episode we choose one homepage design from one of the Usability tools featured in our categorized blog-roll, and we test it using the attention tracking algorithm from Feng-GUI.

Crazy Egg

Crazy Egg Home Page

Crazy Egg Web Analytics - Click Tracking, Website Heat Maps and Usability Software

Before I get to the synthetic eye tracking, here are some of my thoughts about the design. I’ll use the CARP attributes of graphic design to guide my critic – that is Contrast/Color, Alignment, Repetition and Proximity.

The first thing I notice is the washed out color palette. I do like the headline “boost your websites profit within 30 days space-space guaranteed”, but the subheading is a little confusing. What exactly does this crazy egg do?


There is not enough.  For instance, the different styles of font for heading and body text are too similar – the two fonts in the logo don’t really connect with anything else. I do like the ‘get started’ button but I’m wondering why it has a text get started below it. There are no hard contrasting edges other than the get started button. I suppose the brand logos have strong contrast compared to the pastel palette of the rest of the page.


The two column content blocks are repeated but I’m wondering why the right block is a pink pastel shade background.


The centered alignment doesn’t seem professional to me. I think there are definite alignment issues here. Notice how the vertical edges don’t form any strong lines or edges.

And finally, proximity:

There are issues with proximity on this page. Notice the spacing between the header “What you’ll discover on this page” and the bulleted list below. It’s the same as the spacing between the header and the subtitle above. The padding and proximity help to create the visual hierarchy – or to reinforce the visual hierarchy established by the different heading styles.

My initial impression is generally positive – see my last post, ‘It’s the questions, stupid’ – but the more I dig into this the more I see room for improvement (or the more a critical nit picker I become). I would create more contrast by giving a little more white space around the main title and subheading. I would also fix the alignment issues – Get rid of the Centering!  And finally I would revisit the subheading copywriting – use fewer, stronger words.

Now let’s see what Feng-GUI thinks of the page:

The heat map:

The strong heading got quite a bit of attention-it seems that the text attracts the eye. The Brand logos got some attention, but I expected the red Virgin logo to get more. The most attention on the page went to the highly contrasting and proximally distant “get started” button. I feel that button is “the banana” or the critical path for the site – so that’s working.

The gaze plot:

It seems to be all over the place without any tight grouping of fixations. It starts at the ‘get started’ button – and then spirals around the layout. I feel this is because there is not enough visual interest to create a flow to the layout – call it lacking visual hierarchy.

Changes I would make

Maybe reinforce the connection between the ‘get started’ button and something else in the layout – the main headline, the logo – Anything to tie those two elements together to create a visual boundary. The pastel, top-border and small logo are not creating enough visual framework.



This is the first installment of ‘Feng GUI vs…’  I had some fun evaluating the page.  It was insightful to critique a page design and match that with how the attention tracking software ‘saw’ the page.  It’s all open to interpretation and the benefit is in the process of doing it.


Did my interpretations match yours?

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

Better User Experience Podcast #9: An Interview with Feng-GUI CEO Rafael Mizrahi

October 10, 2011 Leave a comment

It’s amazing, these Internets. Last Wednesday, Newman and I we’re using Feng-GUI and writing a blog post about using Feng-GUI to aid in determining your website’s critical path and the very next day I received an email from their CEO, Rafael Mizrahi, complimenting us on the blog post. This wasn’t exactly a trivial thing to do. In our rush to get content on the website we didn’t yet have an easy way to reach out to us. I believe he eventually found a contact form on my company website and used that to send his message. So in addition to going out of his way to say something nice to us, he actually had to work to find out how to do so. (Side note: We fixed that.)

Newman is on a well-deserved two-week vacation so I invited Mr. Mizrahi to be on today’s podcast and graciously accepted even though Feng-GUI is located in Tel Aviv, Irasel and we’re located in North Carolina. We arranged a time to Skype and that conversation is what you’ll hear on today’s episode.

If you haven’t already, be sure to subscribe to our podcast on iTunes – new episodes are available every Monday!

Show Notes:

We discuss various aspects of Feng-GUI’s charts including:

Attention Analysis Heatmap

Gaze Plot

Area’s of Interest Report

We also talk a bit about the other research the gang at Feng-GUI does including mind controlling Angry Birds, and the Iron Man Simulator.

Using Feng-GUI in Determining Your Website’s Critical Path

October 5, 2011 4 comments

Have you heard the good news?

Web usability testing works.

What’s more awesome is that just the act of focusing on your website and thinking about it systematically can result in website improvements.  I’ve spoken with two business owners in the past week – one a DJ and the other an accountant about their websites.  I talked to the DJ a few weeks back about defining a critical path on his website and helped him think through what services he offers and how to make them part of the critical path. He called me earlier this week ecstatic. He had made the changes I recommended and in the few intervening short weeks, incoming calls from new perspective clients increased 300%.  Many of those callers specifically mentioned that the website was what provoked them to pick up the phone.

He couldn’t be happier.

The other guy is an accountant and I just spoke to him today about defining his website’s critical path and redesigning the website around it. After years of having the same website, just talking about a critical path made his eyes light up. He immediately saw what I was getting at and it caused him to think about his website and how it can be improved.  If he can maintain the dissatisfaction with his current site, based on the idea that it doesn’t create a good flow through a critical path, then he will eventually decide to make the changes that will help his business, like the DJ above.

I also have a good friend who runs a web design business. We’ve been talking about web usability and employing the techniques we discuss here to improve the websites of his clients.

To get him in the mood to talk web usability, Newman and I decided to take the front page of his website and run it through Feng-GUI to see what it thought of the website.

Here’s what we tested: (I’ve removed the name of the company and the location in which he works out of respect for my buddy.)

And here’s what we got back:

What you’re looking at is a gaze-plot chart.  The circles represent the places a web user would look on the site.  The number in the circle tells you the order and place where the user looks.

Now, the $64,000 question. What are the take-aways from the gaze-plot chart?

Remember that the purpose – in my mind – of user testing is to shore up the website’s critical path.

What we see in the above image is that the user is utterly confused about what to do.  There’s a small giveaway that the company knows their website is difficult to navigate too. They have a small “Questions?” pop-up balloon at the bottom of their page where users can chat with somebody from the company.

To me, rather than looking like a nice way to make yourself available to prospective clients, what the Questions bubble says to users is that their website is too dense and that you can short-cut your way around the whole thing just by talking to somebody directly.

But if the user wanted to talk to somebody directly, why didn’t they just pick up the phone?

So right away we have some cause to be concerned about determining the critical path of the website.  The “Questions” balloon isn’t inspiring confidence and the gaze-plot seems to confirm the idea that the site is confusing to visitors.

The next thing I wanted to do was look at what their critical path should be.  To do that I looked at their menu and listed out all of their options.  They are:

  • Home
  • Company
  • Support
  • Design
  • SEO
  • Portfolio
  • Blog
  • Contact
  • Client Login

Additionally they have three tabs that also seem to be part of the menu so I will add them here as well. They are:

  • Web Services
  • Network Services
  • Testimonials

Remember, a critical path is the path that a user takes in order to get what they (and you) want.  In this instance, because they are a service-oriented firm, the website is supposed to provide leads. We know that to be true because the company went so far as to put a “Request A Quote” on the front page. So we can list a contact as the ultimate goal, and the front page as the logical place where the user will start their journey.

Let’s write all that out.

Step 1: Front page

Step 2: ???

Step 3: Contact (Profit!)

What you’ll see here is that, as seems to be the norm, step 2 needs to be better defined.  Step 2 is the path between the front page and getting that contact.

In order to determine what step 2 should be, we need to look at what it is this company does. Using the menu items above, I will now divide that list into Things They Do and Other Stuff.

Things They Do

  • Design
  • SEO
  • Web Services
  • Network Services

Other Stuff

  • Home
  • Company
  • Support
  • Portfolio
  • Blog
  • Contact
  • Client Login
  • Testimonials

When we group their menu items by what they do, it immediately becomes apparent that they are not giving themselves a fair shake. Part of this has to do with terminology and part of this has to do with the fact that not everything they do is listed on the website. This is a problem because I know they didn’t mean to be intentionally vague.

That leads to the obvious question, what do they do?

Since I have experience with this firm, I can tell you that they do five main things:

  1. Web Design
  2. Web Marketing
  3. Hosting
  4. Hardware Sales
  5. Networking Services

All of which, except for hardware sales, is accounted for (if just barely) by their list. The difference between the two lists is that my list is consistent and their list is alternately too specific and too vague.  They list ‘design’ as something they do but it’s not self-evident that it’s web design.  They do SEO, PPC, and social network marketing but all that’s listed in the menu is ‘SEO’.  The phrase ‘web services’ is confusing because it sits next to ‘design’ and ‘SEO’ which makes you wonder what else ‘web services’ could be referring to. And finally there’s ‘Network Services’ which is something they do, but for some reason when I was first doing this, I ignored.

In place of their list, I would substitute mine.

Next, I’d take a look at all of the remaining menu items and I would try to combine and arrange them into a coherent secondary menu.  The reason we have these items on the secondary menu is because we are distinguishing between pages that get a user onto the critical path and pages that get a user onto a secondary path.

In this instance, the above Other Stuff list can be condensed to:

  • Home
  • Company
  • Blog
  • Contact
  • Client Login

Furthermore I would substitute the phrase “About Us” for “Company” and would replace the “Contact” page with a “Customer Service” page.

This leaves two menu items left, the portfolio page and the testimonials page. I’ve left them out because while they aren’t technically part of the critical path, it’s virtually guaranteed that this page will be viewed by potential clients before they make the decision to reach out and contact the company.  This makes it necessary to promote it to the main menu rather than to keep it on the secondary menu.  It’s such a substantial part of the selling process that I believe it’s better to weave the portfolio and testimonials throughout the website.

This leaves us with the following primary and secondary menus:

Primary Menu:

  • Web Design
  • Web Marketing
  • Hosting
  • Hardware Sales
  • Network Services
  • Portfolio

Secondary Menu

  • Home
  • Company
  • Blog
  • Contact
  • Client Login

Now all that’s left is to draw some boxes that bring all of this together.  Here’s what I did:

From there Newman mocked it up and ran it through Feng-GUI.

What we were hoping to see was a visual narrative that made sense. In our original test, the gaze-plot was all over the place.  Now that we’ve put the most important things out front and center, we should see the gaze-plot be a lot more orderly, an indication of understanding.

Here’s what Feng-GUI thought of the redesign:

It’s a mock up that’s for demonstration purposes only, not meant to be other than looking at how the content blocks are seen.  And I think we can safely say that this is a BIG improvement over what currently exists there now.

What we’ve proved is that if you keep your eye on the critical path of your website and design your information so that it can be digested at a glance, it will yield valuable results.

For Further Consideration

One thing that kind of bugs me about the above gaze plot is that nobody seems to be reading the information that’s in the main image.  Arguably, that should be some important info there.  It leads me to think that this opens us up to testing different headline sizes and different messages in that space to determine what works most effectively.


  1. This whole post presumes that Feng-GUI returns valuable data. Is it dangerous to make all of the assumptions that I did in this post based on an algorithm that simulates eye-tracking rather than doing it with a real test subject?
  2. Does this mean that we’re forced into a box model for most service-oriented websites?