All About Website Usability Blog – Holly Phillips

Writing for the web
February 8, 2010, 4:43 am
Filed under: Content, scent, usability basics

In usability it’s tempting to focus on navigation, look&feel, search, and other elements of the interface and ignore the content.  But in the end, the content is really what matters.  We have been conducting a quarterly website satisfaction survey for years now, and “content” is always one of the top three dissatisfiers for our customers.  Missing content, confusing content, poorly-written content, mis-categorized content, marketing fluff disguised as real content…the list is very long.

That’s why I was excited to see this great article about improving content on the web by Shay Howe:  Writing for the Web:  The Right Strategy.  It’s worth taking a quick peek at.  Nothing earthshattering, just some good solid principles to follow when writing for the web.  I particularly like his bullets about “writing user-friendly content”:

  • Give users a summary
  • Get to the point quickly
  • Use small sentences
  • Limit one thought per paragraph
  • Use bullet points
  • Use sub headings
  • Do not over use exclamations!!!
  • Drive emphasis with repetition
  • Drop unnecessary adjectives
  • Use details, be specific
  • Use hyperlinks
  • Use a personal tone
  • Be unique
  • Escape content overload

He also advocates judicious use of fonts, colors, and sizes — things we’ve definitely seen in our research that help focus the customer on what you want him to focus on.

All in all a good reminder that even the best IA and UI’s will fail if not supported by appropriate, good content.


Clarity Trumps Persuasion – always!
January 5, 2010, 4:23 am
Filed under: customer-centered-design, Landing Page design, usability basics

I just attended a great webinar by Marketing Experiments called “Clarity Trumps Persuasion”.  If you’re not familiar with them, Marketing Experiments is a company that specializes in optimizing website landing pages, but the principles they tout are equally applicable to normal web pages.  Their main point:  poorly-designed pages that present visitors with competing objectives end up confusing cusotmers and damaging conversion rates.

A great quote from Flint McGlaughlin:  “The chief enemy to forward momentum is confusion.”  If you don’t have a clear next action on the page, you’re “bleeding revenue”. 

I’ve written earlier about our simple A/B test with a landing page where we applied some of these basic principles and improved our conversion rate by 370% (which directly translates into a 370% increase in ROI, by the way).  But we should all remember that these same principles apply to non-landing pages as well.  Yes, typical site pages may have to serve many purposes (for example, a product page need to serve those who want to find out about the product before purchase, buy the product, and service or support the product after purchase.)  That’s how we often justify having many, many links on a page like this and expecting the customer to figure out what he wants to do.  But that’s in fact the easiest way to confuse and lose the visitor. 

If, instead, those pages had very clear next steps and helped walk the cusomer down the right path, they’d be MUCH more effective.  “Clarity trumps persuasion”.  Indeed – clear pages with clear next steps will always improve customer thruput and conversion rates.

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)

Card-sorting tool for remote team brainstorming
December 21, 2009, 4:13 am
Filed under: usability basics

Most of us at one point or another in our careers have been involved in team projects that used a brainstorming / affinity diagram / clustering approach to attack a problem.  The typical process is to get everyone in a room, have everyone write their ideas on individual yellow post-it notes, then stick them on the wall and have the teammembers group and re-group the post-its until they end up in some mutually-agreed-upon set of groups.  This is a great technique that can work very well.

But what if you can’t get your team all in the same room?  My current team is spread out all over the world, and it’s a rare luxury to get us all physically together.  Yet we still have the same type of projects that need a team to sort through lots of items and make sense out of it all.  My solution:  Online Card Sorting.  While not a typical use for card sorting, it actually worked perfectly.

After the team did phone/webex brainstorming (capturing the issues in an Excel spreadsheet visible to everyone), we had over 200 ideas.  I then imported these issues into the online (and free!) Websort , created a new sorting project using these items, and shared the “survey” with the team over webex.  We moved each item individually into “piles” that made sense to the team, rearranged as needed, and then named the resulting piles.  Voila!  We had the equivalent of stacks of yellow post-its and team consensus without ever being in the same room (or Country, for that matter).  Certainly a lot cheaper than flying everyone in for an “old-fashioned” face-to-face meeting…



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.

Reminder of usability basics: NNG and Gomez’s “10 Mistakes your website is making”
December 7, 2009, 4:55 am
Filed under: usability basics

Nielsen/Norman Group and Gomez recently presented a webinar on “10 mistakes your website is making – and how to fix them”.  While there’s nothing really new here, it’s a good refresher on the basics of usability.  Here’s a quick summary:

#1: Not recognizing that users don’t read; they scan
– “F” pattern
– 1st Two are important (2 words, 2 sentences, 2 paragraphs, etc.)

#2: Not balancing your and your user’s priorities
– E.g. Registration or request for customer info that gets in the way or is not a value add to the customer

#3: Ignoring Standards
– Search box location
– Emerging standard of having mouse-over for “quick look” of more details w/o leaving current page

#4: Using wrong images
–  Image must add to content, not just attempt to look good
– Image must be clear, right size
– “Approachable” image – real people, looking at camera

#5: Not speaking your user’s language
– Use meaningful names that distinguish items from customer perspective (not rely on descriptions to do this)
– Use of customer-provided product reviews can add ‘user language’ to the site

#6: Blocking Progress
– Don’t have extra steps that are not needed
– Don’t force users to leave a flow to get more information (or make them worry what will happen to the process if they need to leave the flow to get more information)

#7: Saying too much or too little (at one time)
– Don’t use terms that are not clearly standard (“large”, “fast”, etc)
– Suggest using ‘layers’ of information to keep from overwhelming user

#8: Not taking a walk in your user’s shoes
– Watch for issues that exist for users that happen outside your firewall (ISP issues, using images or page elements from different servers and not accounting for this)

#9: Not checking your work twice
– Check how site performs in different web browsers

#10: Not preparing for success
– Ensure highest possible user loading is considered so a spike in load does not crash performance levels
– Highest traffic often happens at most critical times for site to be up and running.