S8080 Blog

Pick up any usability book and it will say (rightly so) that considered usability, information architecture and user experience work will save money and get your site performing better whether it’s a Charity Site, NGO information site, E-commerce store or FTSE 100 site. Here’s a couple of usability tweaks, not redesigns, which have had big impacts:

Jared Spool (www.uie.com), usability guru suggested a tweak on Amazon; this added an estimated $2.7 billion to Amazon’s revenue. Jared and the team found that products with more than 20 reviews had a much higher sales conversion rate, so by adding a question ‘was this review helpful to you’ and then tweaking the site to place the most relevant reviews at the top, meaning more conversions – a real big winner for Amazon.

See the full article here: http://www.uie.com/articles/magicbehindamazon

I’m sure you’re frustrated when you have to register to actually buy something on an online store which you probably won’t return to? Here’ another example by Jared Spool (www.uie.com) on a different e-commerce store where a minor tweak increased to site’s annual revenue of $300 million per year!

In a nutshell users would have to login and register after they had filled their shopping cart but before they could actually enter delivery and credit card information to pay for their goods – sound familiar?

Jared and his team found that first time shoppers didn’t want to register – they just wanted to pay for the goods quickly and leave, in fact the users tested really resisted registering. Jared and the team also found that repeat customers didn’t find the process helpful either – with 45% of all customers having multiple registrations. The solution was simple, and one that many sites are now taking, remove the register button before the actual check out but add a message:

“You do not need to create an account to make purchases on our site. Simply click Continue to proceed to checkout. To make your future purchases even faster, you can create an account during checkout.”

And what about the money?

“The results: The number of customers purchasing went up by 45%. The extra purchases resulted in an extra $15 million the first month. For the first year, the site saw an additional $300,000,000.”

See the full article here: http://www.uie.com/articles/three_hund_million_button/

Giving exact ROI figures is always going to be more difficult for non transactional sites, but with Google Analytics we can quickly benchmark and show improvements (using metrics such as reduced bounce rate, increased average time on site, increased page views, increased page visits and higher Google Adwords conversions if you are using them).

I’m always great to that sometimes a minor tweak to the user interface, labelling or say the process of filling in a form can make huge differences to the usability and performance of web sites.

We have just launched a brand new kiddies website for Lee Valley Regional Park – the largest open space within the M25 stretching 26 miles from the East End to Hertfordshire.

The new site features a bunch of little guys called The LeeVs…

LeeVs love nothing better than playing in the wind, chasing each other, racing each other and generally running around having fun together. They enjoy floating down the river, paddling in puddles or cycling around their Regional Park.

The accessible site features extensive use of Flash for interactive games and character animation that really brings the LeeVs to life.

Lucy Hose, the Regional Park’s Marketing Manager, said “The new site has been designed to encourage children to learn through having fun and to find out more about the Regional Park and the environment. We’ll continue to update the pages and youngsters need to keep a look out for competitions which we’ll be running on the pages. My favourite game is Rob the Ranger!”

We pulled out all of the stops to get the site looking fantastic for the youngsters – our illustrators worked

very closely with our Flash team and created a whole virtual word for the LeeVs to inhabit. The site features lots of little surprises that delight youngsters.

For example, you’ll be reading about birthday parties in the park and all of a sudden, a little bright blue bug will wander around the screen, or a LeeV will ride his bike right past you and even pop a wheelie for you.

More kid’s sites in the pipeline

We are just about to launch another two sites for young people, a bit closer to home, but we can’t say too much about that yet.

Matt Howard, our Technical Director and Information Architecture guru said “There are a whole different set of usability rules to apply to sites for younger audiences. We have lots of experience designing for children of all ages for clients like Careers Wales, Welsh Assembly Government, DTI and the Mid and South Wales Safety Camera Partnership, so we have learnt a lot along the way”.

“Our illustration team have even been commissioned to design and produce a whole visual language for youngsters with special educational needs (SEN) and this has been so successful it looks like it will be rolled out across Wales and hopefully nationally”.

From a design perspective, designing for kids is just very good fun. Why just have a ‘help’ link when you can have an animated wriggly worm pointing the way!

Here’s some usability research on mega drop-downs which have been appearing on sites (particularly clothing sites and online shops) recently: http://www.useit.com/alertbox/mega-dropdown-menus.html undertaken by useit.com .

So What Are Mega Drop-Downs?

They are those big, chunky, typically 2 column drop-down panels which group navigation options, use typography, icons and tool tips to provide the user with links to content within a section of the site – meaning everything is visible at once with no scrolling.

Mega Drop-Downs vs. Regular Drop-Downs

The bottom line is that regular drop-down menus have many usability problems, but the mega drop-downs from usability studies have overcome the limitations.

Things to Think About When Considering Mega Drop-Downs

• Speed of the mega drop-downs is critical
• Grouping of related options
• Using descriptive labels
• Labels should be a medium level of granularity – and act as trigger words

Finally, it’s important to test the drop-downs, make sure they don’t obscure other key navigation devices (particularly search) and understand accessibility issues for assertive technologies and mobile devices.

Source: http://www.useit.com/alertbox/mega-dropdown-menus.html

I’ve previously mentioned Instapaper on this blog – a fantastic service that lets you easily mark web pages to read later. One great Instapaper feature is that it provides a ‘text-only’ view of any page you bookmark, removing any clutter surrounding the body of the article. I often find it difficult to read from a computer screen for long periods of time; any superfluous ‘debris’ is likely to distract me and I also find shorter lines of text much easier to read than long ones – so this feature is very welcome.

The guys at arc90 have taken this idea and produced a simple bookmarklet that sits in your bookmarks bar, with the aim of making almost any web page ‘readable’ with just one click. It doesn’t work with every website, as it has to try and work out where the main content of a page is, and some sites prove a bit too tricky. When it does work, it’s great for pages that I’m finding difficult to read, but don’t want to add to my Instapaper queue.

[vimeo]http://vimeo.com/3445774[/vimeo]

You can get the bookmarklet here: http://lab.arc90.com/experiments/readability/ (you can also customize it to your needs), and read arc90′s blog entry about it here: http://lab.arc90.com/2009/03/readability.php.

The goal of heuristic evaluation is to find usability problems early in the design of a website so that improvements can be made as part of the iterative design process.

Heuristic evaluations are usually conducted by a small set (one to three) of evaluators. The evaluators independently examine a user interface and judge its compliance with a set of usability principles. The result of this analysis is a list of potential usability issues or problems. The usability principles, also referred to as usability heuristics, are taken from published lists. [1]

What is a heuristic?

An example of some high-level heuristics might be:

• Help users recognize, diagnose, and recover from errors. [2]
  
• Design to facilitate recognition rather than recall memory. [2]
• Enable frequent users to use shortcuts. [3]

Lower-level heuristics may include:

• Clearly and prominently communicate the purpose and value of the web site on the home page. [4]
• Provide feedback to let users know where they are within a web site. [4]
• Make the link text consistent with the title or headings on the destination (i.e. target) page. [4]

What are the advantages of a heuristic review?

The method can provide some quick and relatively inexpensive feedback to designers. Feedback can be obtained early in the design process. Assigning the correct heuristic can help suggest the best corrective measures to designers. [5]

How does it differ from an expert review?

In an expert review, the heuristics are assumed to have been previously learned and internalised by the evaluators. That is to say, evaluators do not use a clear-cut set of heuristics. As a result, the expert review tends to be less formal, and usually there is no requirement to assign a specific heuristic to each potential problem. [6]

Sources

1. http:www.usability.gov/methods/heuristiceval.html#whatis
2. Jakob Nielsen, Ten Usability Heuristics: http://www.useit.com/papers/heuristic/heuristic_list.html
3. Shneiderman’s Rules for Design:  http://en.wikipedia.org/wiki/Shneiderman%27s_rules_for_design
4. Usability.gov, Research-Based Web Design & Usability Guidelines
5. http://usability.gov/methods/heuristiceval.html#advan
6. http://usability.gov/methods/heuristiceval.html#how

If you are asked to use CAPS in navigation menus argue hard that you should be using mixed cases – even if it isn’t ‘on brand‘

The online guidelines are against using all caps in navigation menus, as this reduces legibility & readability by 10%. When mixing cases there is a more varied letterform which is easier to read than than the BOXY SHAPES OF ALL CAPS.

In the autumn we did a big IA project for a client and we wanted & needed to make the point that sign up for news forms should be VERY short.

The marketing data vultures always want a form longer than my leg (I’m 6ft 5″ so that’s long), so we went to a load of the bigger brands and showed them how they do it – they don’t get their users to jump through hoops to sign up they make it REALLY simple and fast to fill in a form, typically just getting the user to leave their email address.

Here’s how Nintendo do it:

The sign up form is really short, the button is descriptive and obvious and the opt ins are opt ins…

and what I really liked about Nintendo was that right next to the fill in form they tell you what you get before you sign up.
Source: http://www.nintendo.co.uk/NOE/en_GB/news/index_newsletter.jsp

So next time your marketing data vultures say they want a 40 field form show them how the bigger brand sites do it, and tell them that if they want to increase the number of subscribers they need to reduce the input fields to the absolute minimum.

Instapaper is a really simple way to save web pages for reading later. They give you a little bookmarklet which you can stick in your browser’s bookmarks bar. Then, if you get to an article/page online that you don’t have to time to read just now, click the bookmark and the page will be added to your Instapaper list. Instapaper stores a link to the web page and also creates an easy-to-read text-only version of the page. This is especially handy for reading on the go, with the help of their iPhone application.

I’d certainly recommend it, and it seems everyone else loves it too.

From a web usability point of view, the site is incredibly easy to use. In particular, I really like the signup form:

 
You don’t even have to set a password! (Although you can later, once you’ve made the account). The barrier-to-entry here is so low, and it’s so easy to get started. It’s a refreshing change from pages-long signup forms that want your name, address, phone number, height, shoe size, favourite flavour of crisps… and something I think more sites should try and aspire to. As Luke Wroblewski says: Signup Forms Must Die!

We often get asked the question – “how many users do we need to test our site on?“, In most cases I really believe the ideal number is 5, current thinking is that it’s better to spend the usability budget on a number of rounds of testing by 5 users rather than say 1 test with more users.

Typically the first 3 users will find nearly all the biggest usability problems with the site (see: Jakob Nielson’s March 2000 article: ‘Why you only need to test with 5 users‘) – so keep the groups small and focus on finding and fixing the key usability problems.

So how would you order the buttons on a form?

(A)   OK   |  Cancel

or

(B)   Cancel  |  OK

Option A is the natural reading order in English (e.g. Yes / No), but putting ‘OK’ last as in option B is more like the Next in ‘Previous / Next’ which moves the user forward and improves flow. Which is best?

From the reading I’ve done, the order doesn’t seem to matter. What is important is that you follow these rules of thumb:

• Be 100% consistent through your whole site – this is really important
• If most of your users use Windows and you are building a web app then use the windows guidelines and put OK first
• If most of your users use MAC OS then follow Apple and put OK last
• Hey… Do you really need the Cancel / Reset button? If you don’t need a cancel / reset button then I say lose it all together and just give the user 1 button whether it is OK or Save, hitting a reset or cancel button by accident after filling in a huge form is a real pain!
• Set the most commonly selected button as the default
• Space them out! Give a good amount of white space between the buttons
• Make the most commonly selected button more visually obvious (in terms of size and colour)
• Label buttons to explain what it does, so rather than ‘Submit’ on a contact form use ‘Send email’

Here’s an example – it’s big, bright obvious button (please don’t click it, it doesn’t go anywhere!)