All About Website Usability Blog – Holly Phillips

The coming evolution of usability, part 1
February 15, 2010, 4:13 am
Filed under: customer-centered-design, visual design

A change is coming over the usability field, and it promises to help move websites into a whole new realm of usefulness.  This change is a natural result of the evolution of design for usability. 

In the early days, the focus was on making websites usable:  making pages scannable, ensuring links conveyed the right scent and navigation was clear, making processes clear and straightforward, etc.  In essence, it was all about removing frustration and obstacles to using a site.

But now that we’ve grown as an industry and most sites follow at least basic usability rules, we’ve come to realize that this is not enough.  A user may be able to easily complete his task, but if it’s a hum-drum boring experience he’s likely to be merely satisfied and not happy, delighted, or eager to return.

I’m starting to see glimmers of this realization all over the place:

  • Stephen Anderson calls it “seductive interactions”
  • RJ Owen calls it “the differences between usability and user experience”
  • Forrester signals it by including “enjoyability” as one of the primary drivers of satisfaction
  • We see it in our own research that shows that traditional elements of usability account for only 60% of a visitor’s satisfaction with the experience

The question now is:  how do we advance from a site that’s perfectly usable to one that’s engaging and fun?  The answer to that is really the marriage of interaction design, visual design, and visitor engagement.  And it promises to open the door to a world of new possibilities.

(to be continued in next week’s blog)


Takeaways from Patric Hofmann’s “Icons & Images” presentation
January 5, 2010, 4:05 am
Filed under: confidence, customer-centered-design, scent, usability basics, visual design

I just attended a webnar on “Icons & Images” by Patrick Hofmann.  Key takeaways:

When designing an icon, strive for:

  • Simplicity – simplify the design to just the key elements that convey the message.  For example, iPhone uses only 4 buttons in an icon of a calculator, instead of showing an entire calculator face.  Use silhouettes or outlines where possible
  • Distinction – make sure the icons are clearly distinct from other icons used on that same page; use color, contrast, size , and shape to help differentiate.  Again, iPhone does a good job at this:

  • Standardization – use common icons that people already understand (eg envelope for mail; clockface for clock).  The American Society for Graphic Artists and iStock Photos are good places to look for common icons
  • Words – If needed, use one or two words (no more) in conjunction with an icon.  Some users are more text-based than visual-based so words will help, but only if the icons aren’t clear on their own, and if the addition of text won’t add clutter.  One example – a square box with the words “TV” inside is much more instantly recognizable as a TV than the more traditional box with rabbit-ears (which doesn’t mean anything to younger people).
  • Understandability across cultures  – For example, many cultures don’t understand the old-fashioned US mailbox or telephone icons; better to use more common stylized versions.  Never use hand symbols in icons!  They’re bound to be offensive in at least one country or culture (most likely a Mediterranean-bordering nation).  Things like “OK”, happy face, frowny face, etc are much better.  Red circle with a diagonal slash is universally accepted as meaning no or incorrect or prohibited.

And finally, some good sources for icons:


Marketing Sherpa’s “Surprising Wins from 2009”

If you’re not familiar with Marketing Experiments or Marketing Sherpa, you should check them out.  They specialize in landing page optimization and A/B/multivariate testing, and share a lot of their findings.  They just had a short webinar “Surprising Wins from 2009:  Using insights from an uncertain economy to drive 302% growth.” 

A few key takeaways:

  1. Even if you’re a design expert, you STILL should test.  These folks know all the tips and tricks to optimize a page and get the highest clickthru possible, but even they admit that they can’t always predict the outcome, so you should always test (specifically, A/B or multivariate testing).
  2. When demand is soft, make your value rock solid.  Figure out what it is that sets you apart from your competitors and communicate it.  Communicate your value with statements that are instantly credible; use quantitative statements rather than qualitative ones.
  3. When you have fewer resources, have your page do more.  Consider asking different questions to better be able to analyze the quality of the leads (thus letting you possibly pass fewer but more qualified leads to your sales force.
  4. When customers are overwhelmed, change your focus.  One example used a popup overlay with name/email capture and “start your free xx” call-to-action, overlaid over the original homepage.  This resulted in 64% conversion improvement.
  5. Measure what matters.  Connect your results to the company’s bottom-line results — eg convert ‘# leads’ to ‘increased revenue’ or ‘increased profit’.
  6. Test radically different strategies.  Don’t just test minor wording or layout differences – you may miss the bigger opportunity.
  7. Competitive analysis is vital.  This will help ensure your PPC ads and value propositions stand out.
  8. It’s never too late to start gaining value from testing.  Again – test, test, test

They also reiterated a few good design principles for eeking out the highest clickthru possible:

  • use a dedicated landing page instead of sending people to a page on your site
  • remove unsupervised thinking – make it clear what the main objective of the page is
  • reduce friction and anxiety (long forms, confusing terms, asking for private data)
  • place testimonials close to call-to-action (best way to alleviate any anxiety)
  • clarify the value proposition and ensure continuity (carry the value proposition through from step to step, have a clear headline that reinforces whatever the offer was that led to the page
  • have credible content and include credibility indicators where appropriate
  • ensure a clear and compelling call-to-action action button (eg “get free access” instead of “click here” or, worse yet, “submit” ).  And focus focus focus – don’t have 6 alternative calls-to-action — have one
  • understand and use the typical eyepath (eg don’t put the call-to-action or primary information in the secondary right-hand area of the page)

Where’s the banana?
December 15, 2009, 4:01 am
Filed under: Landing Page design, usability basics, visual design

Landing pages are destinations for marketing campaigns — the pages that your P4P ads link to.  These pages may or may not be accessible from your core site, but they’re still critical opportunities to capture and keep your visitors.

One of the most important things a designer can do on a landing page is to ensure there’s a clear call-to-action.  After all, if you’re spending money running P4P ads or sending customer emails to drive people to your site, why would you want to just dump them onto a page and let them try to figure out what to do next?  It’s much better to know exactly what you want them to do, and make that clear and easy to do from that landing page. Including a clear call-to-action has been shown to dramatically improve the conversion rates of landing pages.

Seth Godin calls this clear call-to-action the “banana” – the un-missabile primary visual element on the page.  This is the key action you want the visitors to take — download a demo, request a quote, view a document.  Whatever the goal of the marketing campaign is should be reinforced with the design of this landing page.

In my busines, I often hear people wanting to run campaigns “just to raise awareness”.  That’s fine, but even an awareness campaign still needs to have a clear action for the customer.  If you merely drop them into the middle of your site with no direction, you’re losing an opportunity. 

So next time you’re thinking about landing pages — or any page on your site, for that matter — make sure you provide the banana.

The huge difference between .1 and 1 second, part 2
November 21, 2009, 4:29 am
Filed under: confidence, visual design

My last post referenced an astounding finding by Jakob Nielsen about the difference in perception between a 0.1-second page response time and a 1-second response time.  So why do I think this is such a big deal? 

Let’s put this together with a few other things that we know about website visitors.  We’ve found in other usability research that visitors (at least ours) like to be in control.  They want to be the ones to decide when to initiate a chat session, or when to talk to a salesperson.  We also know that they like to see all their options, and not feel that any information is being hidden from them.

So, let’s say that we have two different tabbed page designs — Design A has a .1-second page response time when switching between tabs and Design B has a 1-second response time.  According to Nielsen, our visitor will feel that he’s in control with Design A, and that he can access all of the information because it’s all “on the page”.  On the other hand, with Design B, he’ll feel that the computer is in control and is meting out the information to him.  The user is much more likely to prefer Design A because of these factors. 

This insight can help us make coding decisions, such as whether to load the information on every tab upon first entry to a page, or to load it only when the tab is clicked.  This can thus make the difference between a satisfying and unsatisfying final design, even if they both look identical.  Food for thought…

The huge difference between .1 and 1 second, part 1
November 14, 2009, 4:09 am
Filed under: confidence, visual design

Jakob Nielsen’s Oct 5 Alertbox describes the difference in user expectations about timeframes on the web.  While he discusses instances where users are willing to wait 1 hour, 1 day, 1 week, and even longer for specific types of results, the really interesting thing is his finding about the perception of response times of 0.1 second vs 1 second.

On the surface, it would seem that there shouldn’t be much difference in user satisfaction to have to wait 0.1 second vs 1 second for a page to respond.  It’s not like that extra 9/10ths of a second will significantly contribute to the time available to read a page.  But the interesting finding is not that one seems appreciably faster than the other.  Instead, it’s the subjective impression given by the time:  Nielsen found that a page that responds in less than 0.1 seconds feels as if you made something happen, whereas a page that takes 1 second to respond feels as if the computer is doing something to create the response.

Why is this so interesting?  We’ve watched users interact with webpages that have very similar designs at different sites.  In one case, both pages had a tabbed-structure on the lower half of the page, where clicking on one of the tabs kept the upper-half of the page constant but changed the lower-half of the page.  On the first site, the new tab was brought up immediately (less than 0.1 seconds), and on the second it was brought up in about 1 second (we of course alternated which sites the users saw first).  Users didn’t comment on the speed, but instead commented about how they preferred the first site because “you don’t have to go to a whole new page for each tab, like on the second site”.  In reality, neither design was taking the user to a new page.  But in the perceptions of the user, the second site was slower specifically because it had to bring up a new page.  Ie, the slower page implied that the computer was doing something, whereas the faster page implied the user was controlling the action.

This perception of having to bring up a new page then led to comments about the second site “being harder to navigate, since you have to go to all these different pages”.  The first site was deemed easier to navigate since “all the information is right there on the same page so I never had to navigate around” — even though they actually did navigate to the different tabs.

To me, this finding is incredibly insightful and helps explain how seeminly tiny time differences can have profoundly different cognitive impacts on website visitors.

Can layout alone influence satisfaction?
November 7, 2009, 4:24 am
Filed under: visual design

In customer usability studies we often watch customers struggle to find what they’re looking for, to figure out the navigation, or to wade through irrelevant search results.  But understanding the impact of page layout on customer behavior and satisfaction is tough to do unless you focus specifically on that and conduct task-based usability testing using a few different page layout designs.

Chaparro, Shaikh, and Baker conducted a study to help quantify the impact of page layout on usability.  Their finding: 

“Layout on a web page (whitespace and and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction.” Chaparro, Shaikh, & Baker

Could this be one of those elusive design characteristics that help explain why customers who can easily find their desired information or complete their desired task still only rate their satisfaction as 8 out fo 10?  We’ve seen in our studies that satisfaction is strongly correlated with task completion up to a point.  After all, if you can’t complete your task, it’s pretty unlikely you’ll be very satisfied.  But that correlation tends to break down at the high-end; perfectly successful visitors with nothing but positive comments often don’t give us the maximum satisfaction ratings.  There’s clearly something else that goes into their mental evaluation in addition to successful task completion.  Improving page layout may help crack this nut.