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…’ ?
The book I’m reading: Steve Krug’s “Rocket Surgery Made Easy“. It’s a short 168 page instruction manual for performing user-tests on websites. Following the success of his first book on web usability, “Don’t make me think”, Steve taught workshops for businesses and organizations to instruct them in how to implement the ideas in the book. “Rocket Surgery” is that workshop in book form.
First name basis with Steve
I like Steve enough to call him by his first name. His style is very personable and direct. He is obviously insightful and thoughtful, and yet communicates in a concrete style that makes the topic easy to understand. He does use clichés too much and speaks with quotes and axioms often – I cut him some slack because that’s what I do.
I think it’s easy to understand – where other, more pedantic manuals are not – is the personalification principle (I could be making this up b/c I can’t find a reference) . He speaks directly to the reader, as if engaged in conversation. He is writing for a clearly define audience – those wanting to use the ideas in the first book or wanting to user-test websites. He speaks with the audience, not at the audience. You become engaged with the material and you learn more.
I like the book and can recommend it whole heartedly. Here are just a few takeaways that I’d like to share and promote among other web usability practitioners.
Test everything, all the time
Test the sketch on the napkin, test the wire-frame, test the page mockups, test the landing pages, EVENT test competitor’s websites before you even have a sketch.(great way to do market analysis) He illustrates the common pitfall of testing too late and the reluctance to test in the early stages of design. Any product of the design process can be tested and those tests can lead to small corrections that avoid big mistakes later in the process
He says it’s never too early to start testing a website – I agree. A small thing in the beginning of a project can become a big thing later. Small and early is easy to fix while big and late is hard to fix. Don’t delay, test today. Don’t worry about not being perfect or not being ready, because…
Perfect is the enemy of Good
There has to be some truth to this or there wouldn’t be so many dang quotes about it. Personally, I have three or four I use and switch between – “Put the ball in the fairway” and “Put the ball in play” and “Base hits, not homeruns”. … it keeps going, “you can’t catch fish, unless your line is in the water” and “A good plan in action is better than the best plan on the shelf.”
It means that we should resist the temptation towards perfectionism and that we should think about gradual improvement instead of “all or nothing”. There is a Japanese term for it that is popular in management circles – “Kaizen“. This idea fits with Steve’s practical, simple style – it works and that’s good enough.
KISS – Keep it simple, smarty-pants
Simple and practical is serviceable and useful. Simple holds up under pressure and close inspection. Everything about the book and its procedures is to reduce the complexity in order to make user-testing more likely to occur. Simple tests, simple reports, and simple improvements are essential to building a user-testing culture in an organization. Why? Because, complexity doesn’t yield better results. This is especially true when compared to not doing any testing at all.
One of his axioms states “one morning a month, that’s all we ask”. He is making it clear that the investment is small and the return can be big. His ‘small, non-honkin’ report’ should be written in 30 minutes and read in 2.
Lo and Behold “Maxims”
Steve uses 6 maxims to summarize his advice to user-testers. I’ve listed them here with a few notes:
- A morning a month, that’s all we ask
- Start earlier than you think makes sense
- Recruit loosely and grade on a curve
- Make it a spectator sport
- Focus ruthlessly on a small number of the most important problems
- When fixing problems, always do the least you can do
And, here is my interpretation. (matched by number)
- We (user-testing group) need resources and attention (from the organization), but it’s not going to be much.
- Always be testing and test as much as you can afford.
- Finding the ‘right’, target market users isn’t as important as you may think – problems and improvements will still be found.
- The more stakeholders you can get to view the tests and be involved the better – seeing is believing.
- Create a priority list of observed problems and follow through on fixing them.
- Simple fixes are better than a total redesign. Subtraction is often better than addition.
When it comes to user testing e-commerce sites, it’s easy to wax poetic about defining the critical path and fixing various aspects of the design to fit the results of user testing. From where I sit – a freelance designer – I’m comfortable with this idea because it keeps me neatly in my yard. But there’s one glaring issue that we’re ignoring in all of this. It’s the issue that decides more than anything else whether a customer will buy your product. It’s price.
As a web designer, I find it’s a bad idea to get between a man and his profit margin. That is traditionally the role of the business owner in this equation: the business part. It seems like a gross overreach to make suggestions on price as a part of the user testing experience.
Furthermore, price might already be an absolute thing. The manufacturer could have pricing rules. Or prices have already been pushed as low as is feasible. It seems awfully arrogant to want to bring it up in a design meeting.
On the whole, I would agree with you. But that doesn’t mean we shouldn’t address it anyway.
A website that sells things is ultimately a sales tool. It’s designed and refined through user testing to sell things better over time. It only makes sense to have pricing strategies in place that encourages users to purchase your product while retaining a healthy profit margin.
To do this, the website, like any salesman, will need to become a better negotiator. It needs to make a persuasive case that your product is worth buying and that its worth buying at the price you have listed. Sounds easy, right?
Well, once you know a thing or two about negotiating principles, it will be.
Here are three strategies that will improve your bottom line.
Price is Relative
“There’s a sucker born every minute.” – P.T. Barnum
Everybody hates to be taken for a sucker. You hate it, I hate it. It’s a fact of life. When somebody says “It costs X number of dollars.” we instinctively think, “Is he telling me the truth?. I bet Wal-Mart (or the Dollar Store) has it for cheaper.”
Have you ever seen List vs. Actual Price before?
WTF is that all about? Shouldn’t there just be one price: the actual cost? What’s the list price about? And if it’s going to be $421.99, why not go ahead and make it $1,000?
It’s because studies have shown that people like it when they feel like they’re getting a relatively good deal. When a price is relatively lower, as in the above case, it makes a compelling case to buy the product. When it’s grossly higher than the price, something smells fishy.
Simply put: price is contextual.
There’s a deep psychological need to see things relative to one another. There’s no intrinsic value for most things that we buy. The market sets the price, whether it’s bananas or banana-splits. What a MSRP does is try to create a level playing field.
If a company like Apple sets a MSRP, you can expect to pay that on their website. In the case of an iPod Touch, Apple sells a 8gb model for $199.
Wal-Mart competes on price and sells it at a comparative bargain of $195.00.
But that’s strictly a pricing issue, right? I mean, Wal-Mart is known for having the lowest price (and everybody else is known for paying MSRP). But it’s really a conflagration of ideas. Yes, Wal-Mart is known for having low prices. But who decided that $195 was low for an 8gb iPod Touch? It’s Apple’s MSRP of $199. If it was at $89, Wal-Mart would look grossly overpriced. If it was at $299, Wal-Mart’s price would look like a steal.
The only reason $195 feels like a deal is because it can be juxtaposed against Apple’s $199.
It’s always better to contrast your price with another higher price, as long as that price doesn’t seem too high or unreasonable.
If you’re in the service business, take a cue from restaurant menus.
Research tells us that the top right hand corner is the #1 place where people look on a restaurant menu. You will never find a filet mignon in this space. Why? It’s because a filet is going to sell because it’s a filet, not because it’s on sale or costs a certain amount. The demand is built in because of the quality of the cut of meat. As a result, restaurants know they can use this as an anchor point. So they can price it at a premium.
You’ll see $40-50 steaks on the menu at a quality restaurant, no problem.
Why is that? In an economy such as this, are people dying to spend $40 on a steak? No. They aren’t. But once there’s a $40 steak on the menu, a $25 piece of fish doesn’t sound out of hand.
If the menu had a $25 fish as its highest priced item, everybody would be ordering the $12 pasta dish. But because there’s a steak for $40, $25 for an entree sounds reasonable by comparison.
The same is true with your service. For example:
When you look at the above example, aren’t you just DYING to buy the middle plan? It’s only 20 pounds more than the smallest plan but it includes SO MUCH MORE. And if you look at it, the Flyer Advanced program is WAY MORE but all you get is more flyer capacity. Sure, it makes sense to spend an extra 20 pounds when I can get an additional 6,720 capacity from it plus design and production. But for another 6,880 I have to spend another 100 pounds? Hogwash. Gimmie the middle one!
And that’s the point. There’s really only one selection on this page. But because they were able to frame it between the smaller and the larger, you think of it as such.
So think of your pricing in context. Pricing is relative.
Provide a Service That Trumps Price
Nobody would accuse Zappos as having the lowest price on shoes, though in some cases that is probably true. What everybody knows Zappos for is for their return policy. Simply put, if you don’t like it, you can return it. And they handle all the costs.
It’s great if you’re a user. You can order a pair of shoes without having to worry that you’re going to be stuck with them. That, as it turns out, is a bigger factor for people that buy shoes online than is price.
One of the key things you need to know about your customers is WHY are they buying from you. If you’re in a commodity market, like shoes, it makes sense to compete on something other than price. Otherwise it’s a race to the bottom. Zappos figured out how to compete on Customer Service. As a result, nobody comes close to matching what they offer from a customer service perspective.
Create Windows of Opportunity
Retailers love holidays. It’s because it lets them put their stuff on sale.
LOL. Okay. I’m kidding.
But if you read the weekly circulars you’d think I was telling the truth. Retailers can’t wait for a holiday – Mother’s Day, Father’s Day, Columbus Day, Back-to-School, Halloween, Thanksgiving, Arbor Day, Christmas, New Years – so they can give you an additional few percent of their product.
Why is that? What does Christopher Columbus, Thanksgiving, or the birth of Jesus have to do with early-bird sales?
Simply put, holidays allow for windows of opportunity. It gives retailers an excuse to create a reason for you to buy from them.
If you need an example that sounds hip to 2011, what about Groupon? Their whole deal is predicated on buying a deal on one day and how many people buy that deal in the same day.
In short, their whole gimmick is based on creating a window of opportunity.
Holidays aren’t the sum-total of opportunity windows. Promo codes are windows of opportunity too. If you give a 10% off promo code that’s valid through the end of the month, you’ve created a window of opportunity for them to get your product or service at a discount.
Price isn’t just contextual to other prices, it’s contextual to it’s own price.
In short, people love deals. Put a section on your website that says ON SALE and it will quickly become one of the most trafficked pages on your site. Finding ways to position your product as having an advantageous price will ultimately increase sales on your website.
If you listened to Monday’s podcast, you know that I’m on a bit of a kick about entropy. It has to do with this book I’m reading called The Information, by James Gleick. The book is a history of information and the rise of information theory. Really good stuff. And he spends a good bit of time going on about entropy.
Now, entropy is a bit of a scary word. It has a kind of intrinsic feel to it, like we have some intuitive sense of what it means but when it comes to spitting out a specific definition, we all turn into karaoke performers trying to sight read Snow’s song “Informer”.
Hello? 1992 called. They want their metaphor back.
Entropy, simply, is a measure of the unavailability of work inside a closed system.
At least that was its original definition. It was first purposed by Rudolf Clausius and described a specific quality of thermodynamics.
Energy as Information
James Clerk Maxwell was the first to link this quality to the idea of information. See, he looked at it as order and disorder. Order and disorder imply knowledge. To make order you must know something about the thing you are ordering. In his mind, it involved a little demon who controlled a very tiny door between two rooms. In one room were fast moving molecules. In the other room were slow moving molecules. And he decided what molecules got through the door. While he was sitting at the door he could choose to mix the molecules or keep them separate. But, because of the laws of thermodynamics, if he were to just open the door, after a period of time of fast molecules bumping into small molecules, every molecule would more or less be moving at the same speed*.
With the help of Maxwell’s Demon, entropy was now linked to information.
The second law of thermodynamics says that entropy is always increasing. This means that without intervention, everything moves from order to disorder. Or to put that another way, from specific to general.
If you’ve ever been to a business meeting, you’ve seen this before: Interesting, dynamic ideas often get presented at the start of a meeting and boring, mediocre ones often end them. Sweet, sweet car designs are presented at automobile shows and then the same boring sedans are cranked out year after year. Windows XP was supplanted by Windows Vista.
Entropy is everywhere.
A case can be made that what made Steve Jobs great was his ability to fight entropy in the extreme. Before him, computers were for governments, science and business. Because of him we can talk to our phone using natural language and it can respond to our information needs. For sure, he didn’t do this alone and in a vacuum. But it’s hard to deny that he brought information to the masses in a way that had never been seen or experienced before.
He gave people the tools to be able to manipulate information – to create order out of disorder. He created the technological environment that we are now living in. Would there be an Android without an iPhone? Would Windows 7 be half the OS it is now without having to compete with OSX?
Dig a little deeper into social behavior and two themes for how people deal with entropy begin to emerge.
People’s Relationship to Entropy
- They want to create order from disorder
- Not all the time
Now let’s run those two rules through a “customer” filter and see what happens.
Customer’s Relationship to Entropy
- People have a finite amount of energy to spend in a day
- As a result, people want to conserve their energy
- People want to expend energy on activities of their choice
- People do not want to spend their energy unnecessarily
And like that we’re out of thermodynamics and into the world of web design.
Common Sense Stuff
What a customer is saying is: I’ll buy your product or service if I like it and the price but I’m not going to spend a lot of energy to do it.
Now we can state the goal of web design in scientific terms:
The goal of web design is to produce a website with low entropy.
That is to say, a web design is successful when it makes it easy for a person to do what they want to with as little effort as possible.
And this can be measured. Right now. In fact, you may already be measuring it.
Entropy and Efficiency
Look at the number of visitors to your site. Look at the number of sales. Now, do that for the past six months, or year, or two years and get an average number of visits to sales. Whatever that percentage is, that’s how well your website has worked over that period of time.
Let’s say, for the sake of argument that you have 100 visitors to your website each month, on average, for the past year. And in that time, on average, you had 2 sales each month. Simple math will tell you that your website has a 2% conversion rate. That is to say, it is two-percent efficient.
The goal of user testing is to discover changes that can be made that will increase the number of sales on your website, given the same number of visitors.
If user testing is conducted and changes are made to the website in the above example and over the next several months the website averaged 4 sales per month, the website would have doubled its efficiency from 2% to 4%.
Efficiency is directly related to entropy. Entropy, remember is about order and disorder. The more order we bring to the website, the less energy the visitor has to expend to buy the product or service and the more efficient it is.
The reason we should talk as designers about entropy rather than efficiency is because efficiency is a by-product of entropy, not the other way around. Entropy is by its nature probabilistic. The more knowledge you have about the pages of your website, the more effect you have can on reducing entropy – you become like Maxwell’s demon deciding which molecules to let through the door.
Every page on your website that somebody can find via search or a link is a potential entry point. Likewise, every page is a click away from being an exit point. It’s all very messy and random.
The job of web designers, programmers, interface designers, and SEO people do is give shape to those pages.
SEO is responsible for managing the website’s relationship with search engines. Another way to think about it is that they are responsible for getting traffic to the website. In a closed system, an SEO guy wouldn’t be necessary. But our website itself exists in the larger eco-system of the Internet and so messaging extends beyond your website. SEO, because of its connection to traffic, is the first person to set expectations for your website’s visitors.
Designers and programmers work to bring shape to the website. E-commerce sites have catalog pages, product description pages, a cart, and a checkout process – and they show up in that order.
Information sites like Google, YouTube, and Wikipedia are designed so that information can be easily found and accessed.
From disorder emerges order.
On this website we’ve spent a good bit of time talking about defining a website’s critical path. We believe that user testing should revolve around improving the efficiency of that path. It’s important to remember that it’s a literal path. It is about energy flow.
Entropy, for a website, can be defined as the likelihood that a visitor to a website will NOT complete the critical path.
Fighting entropy on a website means giving form to and then reducing the resistance of the critical path.
This is why a conversion funnel is such a valuable web analytics tool. It shows entry and exit points with respect to the critical path. It points out to you places where user testing could reduce entropy.
On Friday, we’re going to take a look at the third-rail of web design: pricing.
Nothing introduces entropy into a website quite like pricing. Money is really a physical manifestation of a person’s energy. They know that they have to expend a certain amount of energy to accumulate money. Money, like energy, is also finite for most people. Thus, pricing is directly related energy, and thus, entropy.
We’re going to take a look at some pricing strategies that can reduce entropy and increase the odds that your site’s visitors will respond positively to your price point.
* I saw more or less because it’s not practical for the average person to know the behavior of every molecule. So what has risen in its place are laws of probability. That is to say, while a closed system tends towards maximum entropy, at the molecular level, there will be exceptions to this rule. Extremely unlikely events, however unlikely, still happen. But at the macro level, these probabilities are so low as to be practically non-existent.
Newman is, no kidding, on a five day canoe trip down the Suwannee River in Florida. It’s enough to make you want to break out in song, I swear…
In lieu of lining up another special guest this week I decided to pull a one-man show and talk about everybody’s favorite topic: entropy.
Wait! Hold that yawn! I swear, I’m going to clarify things for you and turn around and show you why it’s a big deal for web usability.
If you haven’t already, be sure to subscribe to our podcast on iTunes – new episodes are available every Monday!
And, if you’re interested, you can read more about entropy and information theory in the book The Information by James Gleick.
- I refer to Rudolf Clausius as Clausius Rudolf at least once in the podcast. My bad. His name is actually Rudolf Clausius.