Tech Usability

I love good design that’s easy to use, so here’s a collection of rants and hints about it all

Touch accessibilityOctober 9th, 2009

Ever since Apple released the iPhone, it seems that everything has suddenly gone touchscreen, with copycat mobile phones all including touchscreen interfaces. These better quality devices mean you can get the “real web” on your mobile (unlike the time of WAP and a numeric keyboard to navigate around the page). It’s worth pointing out that this brings us a new usability consideration for the web that we’ve never had before.

Some sites have content and features which appear only after you hover over them. This isn’t a new technique, many years ago web designers would make use of the fact that Internet Explorer would show an image’s alt attribute in a tooltip when you hover over it to show more content, and this feature is still here if you use the title attribute of links. Javascript gives you even more choice; some drop down menu solutions work by hovering over menu items, and yours truly has been guilty of using jquery to display tooltips containing extra bits of information.

Don’t get me wrong, I think that this is a great thing. It allows the designer to keep the page clutter free and in some cases is a very helpful interface interaction. But we need to remember that you can’t hover on a touch screen interface.

By including content that can only be displayed on a mouse hover, we are ignoring a growing market of users that browse the web on mobile devices while out and about. But is this information important? Can they get to it by other means?

Am I saying to not make use of hover techniques? Far from it, hover is a useful gesture whose uses are limitless. But we need to be mindful of touch screen devices, and consider making an alternative stylesheet or using other javascript methods for these users if the information is important and isn’t available elsewhere.

Tech Usability #6: Keyboard onlyApril 17th, 2009

One of an ongoing series of articles discussing usability and accessibility issues in technology and the web; with tips, tricks and standards to improve the user’s overall experience.

It’s not impossible for users to have to use the keyboard; those with motor problems may find the mouse difficult to use no matter how large the target, so it’s always helps to make things easy to use for the keyboards users among us.

Beware drop down menus

In general, I’m not a fan of dropdown menus on the web. Most solutions are badly written and generally take over the browser, and don’t work if you disable Javascript or Flash (so won’t work with screenreaders). But the major point here is most solutions don’t play nicely with the keyboard. If the user cannot use the mouse, you’re stuck.

If you use drop down menus, then have an alternative means of navigation, such as a sitemap or important links at the bottom.

Beware tab ordering

There’s nothing worse than having to tab again and again. And again and again. Include a hidden “skip to content” for keyboard users to easily select so that they don’t have to tab through your navigation all the time (BBC News do this well).

Make it obvious what link has focus

Safari seems to be the only browser that outlines links whenever you have keyboard focus on them, so for the other browsers never underestimate how useful it can be. Use a:focus CSS to show the user where their focus is, even if it’s just a subtle outline or background colour change, or the same CSS as a:hover.

Set a default focus

Again, the usefulness of having a default focus in text boxes is easily overlooked. Consider if the page could be improved by including one, or indeed if it could hinder usability.

Try it yourself

It’s easy to test how simple it is to navigate a site using just the keyboard: just unplug the mouse. Are you able to easily get around, or are you hitting tab a lot?

Tech Usability #5: PopupsMarch 27th, 2009

One of an ongoing series of articles discussing usability and accessibility issues in technology and the web; with tips, tricks and standards to improve the user’s overall experience.

Ask anybody who uses the internet what irritates them the most about the web and the answer you get back will probably be popups that take over the screen.

They might not even be open up in a new window and it might not even be for an advert (For example opening new windows for a login box, or opening a link in a new window), but either way you are taking the content away from the user. It’s the digital equivalent of a printer putting a post-it note over a magazine article with an advert or a reminder to email the editor if you have feedback printed on it. (And if you work in the advertising industry, please don’t start doing that. I’ll never forgive myself).

Personally I find the worst offender to be snap.com. This is a service which, when the mouse moves over a link, will show a screenshot of the site being linked to. Not only is it incredibly unhelpful to have a three inch wide screenshot, it also slows down your experience because your browser has to load the javascript, load the site linked to in order to grab a screenshot, and then display it. Talk about slowing you down!

Yes, there are legitimate uses for using popups, and I’m honestly not complaining about this. There are many good javascript modal box solutions out there such as Lightbox and Facebox which shows an image or webpage when you click on a link or picture (click on the screenshot in this article to see what I mean). These have truly useful applications from image galleries to the media upload box in WordPress, don’t take over your browser so you can move to another tab, and are lightweight and simple enough to not be irritating… but only if the application is right.

So, if your design calls for a modal box popup, then use a javascript solution rather than opening in a new window. And if you need to show a message such as the “could you possibly spend two minutes to fill in a survey to tell us how to improve our site?” variety, then don’t use popups! Instead, show a banner along the top of the screen which will grab the user’s attention, but won’t take over their screen nor ruin their browsing experience.

The Accessible Web #4: Text and typographyMarch 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

It’s amazing that something as simple as how the body text looks on the page or screen can help or hinder with reading. Font selection, spacing, line length and the alignment of the text can all make a massive difference.

Font selection

Sadly there isn’t much choice in font selection on the web just now, since with most browsers the font needs to be on the user’s computer. This pretty much limits you to a small list of fonts including Verdana, Times New Roman, Arial/Helvetica, Gill Sans and Lucida Sans.

Font selection should still be taken with care; fonts have their own character and very often Verdana and Times New Roman are overused (and should only be used as fallback).

Contrary to typography rules for paper, you will likely be better off choosing a sans-serif font for your body text. This is because the relatively low resolution of a computer monitor will make those fonts with serifs a little harder to read than those without them. Having a serif font for the header will however often make a nice contrast.

Leading and kerning

Leading (pronounced to rhyme with heading) is the amount of space between two lines of type: the name comes from the thin block of lead originally used to increase the space. Kerning is the space between two letters.

Both leading and kerning can affect how quickly and easily the copy can be read: too big a leading and the reader will struggle to read down to the next line. Too small a leading or kerning and the letters and words might be hard to distinguish. If you’re unsure, you ought to leave these to the defaults.

Line length

Again, speed and ease of reading is affected by line length. If the line is too long then the muscles in the eye and neck need to be used, which is tiring for the reader. It also affects how easily you can find the next line: the eye has to travel a relatively great distance to go back to the start of the line.

Alignment

In Latin languages, body text should be left aligned; any other alignment will be confusing for the reader. Right and centre aligned text is fine in some cases, such as the tag and category information that is displayed at the bottom of this post.

Justified text should never be used: using this alignment means that gaps appear between words and so ‘rivers’ of space will form. This can be disconcerting for those with dyslexia and so they will find it hard to read the copy.

Tech Usability #4: Website navigationFebruary 27th, 2009

One of an ongoing series of articles discussing usability issues in technology and how to improve the overall experience for the user

One of the simplest ways to make your website easy to use is to improve the navigation. Even though doing this is relatively simple, many sites still neglect to do so. Implementing improved navigation not only means your visitors will stay longer and visit more pages, it also means that your site will have improved search engine optimisation. By having confusing navigation your visitors will get confused so will give up, often after only visiting your front page.

So here are some tips to improve your site’s navigation. Even if you only implement just a few of these your site will be much more usable, but of course I recommend you implement them all!

  • Link the site logo/title to the front page — It’s become natural for the user to be able to click on the top site banner to get back to the front page, so make it a link. This also makes it easier for the user to get to the front page. Some sites also highlight the fact that the logo goes to the front page, such as the Red Nose Day 2009 site (see right), although this isn’t necessary

  • Make all pages reachable within three clicks — Make it easy to get to a page, and make sure the user doesn’t have to click from page to page to get to where they want to go: after about three clicks the user will probably give up. Good ways of shortening the number of clicks required include sitemaps and search
  • Consider using breadcrumbs/sitemaps — These are both secondary navigation, but can prove invaluable if the user is lost
  • Consider using search — If your site has a lot of pages, then search is the best way of finding something. Implement a decent search (Google provide a search for sites) and make it easy to find: the top right or in the sidebar is the most common positions for the search box
  • Tell the user where they’ve been, where they are, and where they are going — …if the page is one in a series of stages. A breadcrumb-style navigation is a useful method of doing this, or prev and next links can also help
  • Keep navigation consistant — This will help the user find their way around the site. Having a navigation that considerably changes from page to page will only confuse the visitor
  • Highlight visited and current pages — Linked to the “where they’ve been, where they are, and where they’re going” guideline. Highlighting visited links helps the visitor know where they’ve already been, saving the user having to click the browser’s back button after realising they’ve already read the page. Highlighting the current page simply tells the user where they are. Whether or not the current page link should be clickable is a debate that will probably never be resolved, but personally I say you should so that the visitor can get the URL using the right-click popup menu

The Accessible Web #3: Prose and contentFebruary 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

The content of a site is something that most website owners neglect to give much thought to, but in my opinion it is something that is just as important as the design of the site itself. Good prose not only makes the site more pleasurable to read (making people come back), but it also helps people with ADHD, those reading from a mobile device, and those who are merely tired.

Use a structure

If there’s a structure to your writing, this allows the reader to skim through the page first to decide whether or not the article is worth reading. So of course, if the reader can’t skim the article easily they might just move on.

Use bullet points and headings

Something else to help skimming the article is using bullet points and headings. This helps the reader get the general gist of the article without having to carefully read the entire page. For example in this article, headings are used which means the reader only needs to read the introduction and the headings to get the general idea.

Get to the point

There’s nothing more dull than somebody going off on a tangent; especially if it’s a boring one. Try and stick to the point as much as you can (unless, of course, the point of your writing is to be a free-for-all rant), that way you’re less likely to lose your readers.

Use simple language (WCAG2 3.1.5)

People shouldn’t need to have a dictionary to hand whenever they visit your site. Try not to use over-complicated language, using simple words rather than obscure ones. This helps those with learning disabilities and younger readers, who may not know what the words mean.

Provide definitions (WCAG2 3.1.3 — 3.1.4)

Whenever using acronyms, abbreviations1 and technical language, you should always provide a definition for those who do not know what the word or abbreviation means. Thankfully, HTML makes it easy to do this without disrupting your copy with three tags:

Acronyms

Using <acronym title="British Broadcasting Corporation">BBC</acronym>'s iPlayer you are able to watch a previously aired program at any time

Using BBC‘s iPlayer you are able to watch a previously aired program at any time

Abbreviations

<abbr title="Adobe Creative Suite 4">CS4</abbr> is the latest version of the software suite, with many improvements from the previous version

CS4 is the latest version of the software suite, with many improvements from the previous version

Definitions

There are a number of <dfn title="An audio file that can be downloaded to your iPod or other MP3 player">podcasts</dfn> available on the iTunes store that you can download for free

There are a number of podcasts available on the iTunes store that you can download for free

Use good typography

This will be covered in a later article, but using good typography (such as word and line spacing, font selection, and text alignment) will also make your writing easier and quicker to read, with subtle changes making huge improvements.

  1. The difference between the two is up to you to debate! []

Tech Usability #3: Making mistakesFebruary 6th, 2009

One of an ongoing series of articles discussing usability issues in technology and how to improve the overall experience for the user

It’s perfectly human to make mistakes: everybody’s done it. That’s why computers make it easy for you to undo your last action, and that’s why applications should do too.

Some applications ask if you’re sure if you want to do this action, with a confirmation box. This is bad!

The confirm box appears so often now, people ignore it. It becomes part of the process to do that action. Want to delete a file? Hit delete and enter. Even if you really really didn’t want to delete that file, it’s too late: the file’s gone. Because you automatically hit ‘yes’ when it asks you if you are sure.

It’s like asking a colleague to make you a cup of coffee when it’s their turn to do the office tea-round. They wouldn’t respond saying “Are you sure you want a coffee?”, because it’s just silly. And if they did, as with confirmation boxes, you’d just end up saying “Can I have a coffee please? … Yes”.

Undo is the only way to confidently ensure that no problems occur from making a mistake. Whether it’s accidentally deleting that file and being able to retrieve it from the recycle bin, or hitting the wrong option in a form and having the ability to go back. Give the user security in the knowledge that if they do something wrong, it doesn’t matter.

Let’s stop making people too scared to use computers.

Tech Usability #2: Hitting your targetJanuary 2nd, 2009

When making targets for your user to click or point on, the bigger you can make it, the better. This is shown by Fitts’ law, which states:
Time = a + b log2(distance/size + 1)

Where a is the start/stop time of the device, bthe speed of the device, distance is how far is is from the starting point to the target, and size is how big the target is (or rather, how wide it is on the axis of the direction you are moving).

How does this affect me?

There’s two ways which Fitts’ law can be used to your advantage to make your websites more accessible: putting your targets near the “starting point” and making them nice and big.

Put your targets nearby

It goes without saying that the further away something is, the longer it will take to get there. Of course, if you are designing a website then you won’t know where the user’s mouse pointer is, but you can make a guess. For example, if they’ve just filled in a form, then it’s probably likely that their mouse pointer is over the last field that was filled in, so put the submit button near the last field.

Popup menus can be useful for proximity, since the target is pretty much right next to the pointer. The most common usage of this is the popup menu you get in Windows when you right-click, but this could also be done on the left-click or even when a user presses and holds on a touch-screen device (such as in Windows 7).

However, you need to beware that popup menus don’t get in the way of the intended target. The Marks and Spencer website does this by covering up a large amount of the page (including the search box) when you go over the menu item (see below). This could be solved by either having a short delay before showing the menu, or having it show when the user clicks on the menu bar.

Screenshot of M&S website

Another noteworthy method is having the targets at the edge of the screen, for example having the Windows Start menu at the bottom left, and the Dock at the bottom of the screen in Mac OS. Mac OS also make extensive use of hot spots, where the corner of a screen is the target.

Make your targets big

Screenshot of BBC News sidebar menuWhen making links, make them nice and big. Don’t use small 5px high buttons, make them nice and clunky!

A common mistake designers make is to ignore the whitespace around links in menu bars. So even though the link itself is small, if you make the whitespace active then the target is made bigger! For example, the BBC News website (see right) has wide menu items in the sidebar, where the whole width of the sidebar is active rather than just the link text. This can be seen in the image where the whole ‘politics’ menu item has been highlighted.

It’s also helpful for accessibility!

Your older visitors will thank you for having large link targets: those with poor motor skills will struggle to move the mouse with fine detail, so will be able to browse quicker. To see this for yourself, try using your mouse with the tip of only one finger: you’ll notice yourself slowing down to try and hit the small targets.

The Accessible Web #2: All about colourDecember 19th, 2008

Picking the right colours for your site can be a tricky thing, and the accessibility considerations only makes things a bit trickier. But if you ask me, the limits imposed will make your website easier to see and read by everybody: somebody doesn’t have to be colour-blind to struggle to read green text on a red background.

Help the colour-blind

A large chunk of people are colour-blind: about 1 in 10 males have red-green colour-blindness, this is when the person cannot easily discriminate between red and green hues. A less common form of colour-blindness is blue-yellow colour-blindness, where the individual struggles to discriminate between blue and yellow.

The quick and simple solution to make life easier for those who are colour-blind is to not use the red/green and blue/yellow colour combinations where discrimination is important (for example having green text on a red background, or having red and green as the two colours on a graph). To check how a site looks to somebody who is colour-blind, take a screenshot and convert the image to greyscale.

Give the colours sufficient contrast (WCAG2 1.4.3/1.4.6)

Giving the background and foreground colours enough contrast makes it easier for those with visual difficulties to read the text, and makes the site easier to read in general by everybody (I’m sure we’ve all squinted at some yellow text, struggling to read it).

A formula (based on ISO-9241-3) is used to gauge a ratio of the contrast between two colours. To meet WCAG2 Level AA this should be at least 4.5:1 (3:1 for text larger than 18pt), which is increased to 7:1 (4.5:1 for large text) if you want to meet Level AAA. Some websites prefer to have an option to change the colour scheme to a high contrast one, which is perfectly acceptable.

Don’t use too much contrast!

Having said that, try not to have too much contrast. People who have dyslexia sometimes struggle to read text (particularly small text) which has a high amount of contrast (black on white is a classic example).

For a quick and simple fix, don’t use black on white. Depending on your site’s colour scheme, you might want to use a dark shade of grey (BBC use the colour value #4d4d4d) or you might want to introduce a light background colour.

Using colour correctly (WCAG2 1.4.1)

When using colour, don’t forget that not everybody can see it. If you were to say “click the red button to continue”, you need to keep in mind that people may not be able to see which is the red button (this isn’t to say that using colour-coding is bad, just make sure you don’t rely on the colour to identify objects or an as an action prompt).

Many website owners and developers don’t realise this, but only using colour to identify a link and identifying failed/required fields with colour only may fail WCAG2 guidelines.

Final thoughts

The best way to ensure your site is viewable by everybody is to go out there and test it. You don’t even have to do formal testing to get colour right, since colour blindness and dyslexia are relatively common. Chances are you have a family member, friend or colleague who have one of the two, so run the site past them to see if they struggle at all.

Tech Usability #1: Introduction to usabilityDecember 5th, 2008

If you ever visit an Asda or Tesco (other supermarkets are available), you might see a small number of self-service tills at the end. I guess the point of these tills is to make it quicker for the customer to pay for their goods, particularly if they only have a handful of items to pay for. But there’s one big problem with these tills which slows things down: they aren’t very useable.

A self-service till at Tesco. Image by Cowfish

A self-service till at Tesco. Image
by Cowfish

OK, before I go all out on the attack, the system does have some good points: the buttons are nice and big, which makes it quicker and easier to hit them (I’ll explain why in a future article); and I’ve certainly used worse touch screens in my life. But still; they’re annoying, and there are design elements that slows things down. Small things, like having the customer to press “Finish & Pay” before paying (why not just have the customer place the money into the slot?) and requiring every single item be ‘bagged’ (that is, be placed in the bagging area) before you continue to scan the next item and not letting you put your own bag on there.

Basically, usability matters — whether it’s on the web, or just some random piece of technology. It might be something small (like not requiring the customer press a button before paying), but it could make all the difference. Things should be simple and intuitive to use: in fact, I claim (perhaps wrongly) that if something is well designed then it shouldn’t need any kind of sign or copy with instructions for the user (there should be no need for ‘press here’ or ‘pull’). It should be a joy to use the product.

Of course, no designer has all the answers when it comes to intuitive design and knowing how the product will be used, which is why testing is so important. If you sit a prospective user down at a computer (and note that a prospective user is usually not the client!) and invite them to use the system, you will gain a lot of information about what you got right and what you got wrong, just by watching them. Do they keep going to the bottom of the page to look for your company’s contact information? That’s where you should put your company’s contact information. Many companies get usability wrong, by assuming that if a user doesn’t know how to use their system then they are clueless idiots, rather than the problem being with the software itself.

Note that customer support is a great method of getting user feedback! If you find out what the users are thinking by looking at error and access logs, watching out for general trends and habits, and actually inviting feedback (Get Satisfaction is a great tool for this), you’ll learn how to make your site more useable. Instead of going against the grain and telling the users how they should use the product, a good designer will help make it easier to use it in that way. A good example is Twitter‘s @replies. This started off as an unofficial way of replying to each other’s messages, and once the guys at Twitter noticed this trend they built in all sorts of features which uses the @reply.

So, in conclusion, usability is (in my opinion) one of the most important parts of any kind of product — be it a physical item, software, or a website. Users should be listened to, software and websites should be tested, and results should be implemented.

“[Design is] not just what it looks like and feels like. Design is how it works.” – Steve Jobs