When Ben and I started learning about UX back in August, we committed to a period of learning that ended on December 15th. That doesn’t mean we’re going away, but it does mean that we’re at the end of the time we set aside to get our feet wet in the discipline. As a result, we’ve been doing some reflecting on what we’ve learned and what the most valuable take-aways are from the past 4 months.
On Wednesday, Ben covered the first 5 key UX concepts and today we polish off the list with numbers 5 through 1.
When you don’t know what you’re doing, watching experts is like watching magic happen. How in the world does somebody know how to do that? I mean, how did he know how to do that!?
For visual design and page layout, the saving grace for me was CARP.
We talk most about CARP during the Feng-GUI vs… posts. In those posts we would evaluate a page using the principles of CARP and then run it through the Feng-GUI tool. This gave us a way to reflect on the visual elements on the page and a way for active testing those reflections. CARP is important for UX’ers because it allows for a way to communicate design decisions to stakeholders who don’t have a visual eye. You can tell them “This is not ‘Nam. There are rules!” to quote the Big Lewbowski. It gave form to the void – a method to the magic. When looking at a design, it gave me a way of looking at it to know not just if it was any good but why it was the way it was. It gave me a system for thinking about design.
4. Prove vs. Improve
In the beginning of learning about user testing, we thought user testing was essentially a scientific endeavor. And by that I mean that we thought that you had to have strict controls and that it really mattered how the tests were conducted. We felt a strong need to make sure that no bad data tainted the testing process.
But thanks to the Wisdom of Steve Krug and the idea that user testing doesn’t have to be about proving an idea, it’s about improving the website. And because all websites can be improved, in a sense it’s fish in a barrel.
There’s more to that concept: we are all experts at filtering and grouping, it’s about getting points of view not about error bars, and that a majority of the improvements on the website are going to be able to be discovered by out-of-context users.
This means that quick, down-and-dirty testing can be effective because to a certain extent, it’s all about just measuring stimulus response. It’s a freeing concept.
3. Signal vs. Noise / Information Theory / Entropy
It’s important to remember that websites are at heart, a communication medium. The computer is a communication device. The Internet connects us. But your web presence is responsible for communicating the message.
The ability to effectively communicate online is essentially what it’s all about.
There are two parts to communication: the communication channel and the message itself.
Information theory is concerned with the communication channel. The message is for all intents is irrelevant. The reason the message doesn’t matter is because it’s generic. Web content is text, video, and audio. The specifics of those content types don’t have any bearing on how the Internet works.
The channel itself has a maximum capacity (or maximum bandwidth). In that channel, there are three possible states:
- the amount of the channel used by the signal
- the amount of the channel used by noise
- the remaining unused channel capacity
If you assume that channel capacity is 100%, all you’re left with is signal and noise. Or, more abstractly, order and disorder.
That’s why we dragged the concept of entropy into the discussion in the first place (Ben’s awesome entropy in UX podcast). At a real level, defining a website’s critical path is the same thing as creating order from disorder.
We know that entropy is the tendency of things to go from order to disorder. But it’s also a measure of the system’s inability to do work.
A web site’s job is to do work. “Work” in this case is defined as “the process of accomplishing the website’s goals”. If you lay out your critical path, you should be able to generate a number for each page in the process that is probability that somebody will leave that page and not continue any farther on the critical path.
Lower that number and you will have reduced the entropy on the website. You will also have strengthened the website’s signal and lowered its noise. You will have strengthened your critical path and will have additional leads or revenue to show for it.
2. Quick Tests Can Be Valuable
As we talked a bit #7 Prove vs. Improve, the real shocker for user testing is that it can be done really quickly and with all kinds of leading questions. Essentially, think of a professional yet scientifically invalid test and it’s probably good enough for a basic user test.
The take away is another Krug-ism: “Test early and test often”.
1. There’s a Great UX Community
When we started this site it was a selfish endeavor to learn about web usability. I only use the word ‘selfish’ to mean that we did all of this for our own gratification. Yes, we hoped that what we put together would resonate with others. Yes, we hoped we’d find a cool existing community of people who are into UX which we could become part of and could learn from and contribute to. And yes, we hoped to reach out to a web ux company here and there.
What we found exceeded our best expectations. Universally, the UX community seems to be made up of good folks who love to learn, are striving to get better, and who generally have a groovy outlook on things.
We’ve been lucky enough to talk to Rafael from Feng-GUI, Paul from Usabilla, and Rachit from Inspectlet. They were very generous with their time and their wisdom and we appreciate them taking the time to talk with us. Check out our Blogroll and Twitter … followees to find out our community.
In the coming weeks and months we hope to talk to loads more. We want to talk to people passionate about building a better user experience. Learning how to build sites that give users a better experience is what motivates us to do this website, to write these posts and to do the podcasts that we do. We’re fighting entropy and we’ve learned that we’re not alone.
There’s a whole wonderful community of developers, designers, interface experts and ux tool makers who are all fighting the good fight. We’re honored to be a part of it.
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:
Jakob Nielsen – How Long Do Users Stay on Web Pages?
Jakob Nielsen – E-Commerce Usability
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.
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.
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…’ ?
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.
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…’ ?