Good Links: 7 guidelines how to improve usability

How you write and design your links is crucial to your visitors clicking them or not. Write them badly and they leave, write them well and they stay. Who knows, they might even do exactly that what you created your site for. Following are 7 guidelines how links should be written to improve the usability of your site.


Do it consistently
Visitors learn for example how a website marks the links or where the "related-content box" can be found. Consistently adhering to these established "codes" will make it easy to navigate and read the site.

Breaking these conventions will interrupt the flow. Such distractions might be enough for the user to leave. When creating a site it is important to define all the conventions and rules that are used. Consistently following them is essential for giving the user an easy time when visiting.


Don't mislead the visitor
Although links can look however the screen-designer decides, certain standards have developed and find widespread use. Underlining a text for example is a common indicator.

It is good practice not to underline text, marking it blue or putting an arrow in front, if is not a link. Visitors might construe them to be clickable.

The same applies to images. Many users will try to click on a graphic or any other image. Very rarely, they will find an active link - a tiny, but nevertheless negative experience. Captions have proven to be effective to add that little bit of content that users need in order not to click on an image. And if a link is present, it can be placed in the caption itself.


Show used links
Marking which links have been visited is very valuable. It helps to quickly "tick off" when going through a site or helps in finding this piece of information from a previous visit. Unfortunately, a great many sites do not use this very basic feature.

If the "visited" feature should also extend to the navigation is debatable. On very deep sites it might be useful. On the other hand it might confuse the visitor. The navigation should be a constant and change only minimally.


Match the destination with the link
Clicking on a link can be compared to following road signs in a city never visited before - you are very happy if you get confirmation that the choice you just made was the one intended.

Same thing applies to links - if a link reads "find out more about our services" the page that it relates to should show the words "Our Services" somewhere prominently in the title. It confirms the action taken.

Well written titles indicate clearly what the main topic is on the page. This is very useful, especially considering that a lot of traffic directly dives deep into the page.

Embedded links used to their full advantage
Links are visually different than the surrounding text. Color, a markup or other cues denote a link. Something maybe even happens before you click - mouse-over effects or an overlay, displaying the title.

Everything is designed to draw your eyes away from the surrounding text. If you embed links within a sentence, readers will very likely notice the link first and only later read your content. On first thought that is unfortunate, but it can be turned into an advantage.

Since reading online involves lots of scanning, the eye is always looking for visual cues. They can be provided by using subtitles or in this case descriptive links. By creating a meaningful link, finding the relevant information on a page is made easier. "Click here" is less effective then "View a list of articles about usability".


How to link to files
When linking to a file it is likely that another application is opened and that the visitor is drawn away from the site. Not something that should be done lightly.

A great many times websites link to related documents, very often PDF files. What exactly can be found in the file, the visitor needs to figure out from the link itself. The first step in creating a good link to a document is to summarize the content. That gives the visitor information how he wants to proceed.

The second step is more basic by asking why the document cannot be created as a webpage. If it is worth to be put onto the site, it surely is worth the effort to make if searchable, fully integrated and less work for the visitor. Using for instance PDF-files can make sense. Very often however, it is simply easier for the developer to put it onto the site - but not easier for the visitor to use it.


Mark the external links
An internal link refers to a page or file within the current domain, an external link usually points to a site, housed on a remote domain.
Although technically there is no difference in how the code for the links is written, it is common usage, even a w3.org recommendation, to inform the user if an external site is accessed by a link.

The rationale behind this is not to confuse the visitor who is getting used to the layout, navigation and architecture of a particular site. An external link can either be declared by stating it in the text, by a specific icon (like for instance Wikipedia does) or even by using the "title" tag of a link.

Whether the new site is opened in a new browser-window or replaces the current content could depend on the kind of information the visitor will find. It could be argued that sites with related content or sites who delve further into a topic might best be opened in a new window. The visitor can more easily relate back to the original site. In that case not only the external link, but maybe also the fact of a new window opening should be placed with the link.


Creating good links is vital for creating a good site. A link for instance is the only possibility an e-shop has to have users put products into the shopping basket. If that link should be badly written or confusingly placed, many users would give up before buying. That would be like not accepting money from a client standing right in front of you.

Website content & usability

Writing for the web is totally different to writing for printed matter. We tend to scan content on the web hunting for the information we're after, as opposed to reading word-for-word. As a result of this, there are certain guidelines you should be sure to follow when writing copy for your website:

1. Use clear and simple language

Reading from computer screens is tiring for the eyes and about 25% slower than reading from printed matter. As such, the easier the style of writing the easier it is for site visitors to absorb your words of wisdom.

Some techniques for using clear and simple language include:

- Avoid slang or jargon - Get your grandmother and ten year old nephew to read your site - if both can understand the page content you've done well!
- Use shorter words where possible - ‘Begin' rather than ‘commence', ‘used to' rather than ‘accustomed to' etc.
- Avoid complex sentence structures - Try to include just one idea or concept per sentence
- Use active ahead of passive words - ‘We won the award' is shorter and easier to comprehend than, ‘The award was won by us'

2. Limit each paragraph to one idea

If you assign just one idea to each paragraph site visitors can:

- Easily scan through each paragraph
- Get the general gist of what the paragraph is about
- Then move on to the next paragraph

All this and without fear that they'll be skipping over important information, because they will already know roughly what the paragraph is about.

Limiting each paragraph to just one idea is especially effective when combined with front-loading paragraph content.

3. Front-load content

Front-loading content means putting the conclusion first, followed by the what, how, where, when and why. The first line of each paragraph should contain the conclusion for that paragraph, so site visitors can:

- Quickly scan through the opening sentence
- Instantly understand what the paragraph is about
- Decide if they want to read the rest of the paragraph or not

Because each paragraph contains just one idea, users can do all this safe in the knowledge that if they jump to the next paragraph they won't be missing any new concepts.

Front-loading also applies to web pages, as well as paragraphs. The opening paragraph on every page should always contain the conclusion of that page. This way, site visitors can instantly gain an understanding of what the page is about and decide whether they want to read the page or not.

Unfortunately many websites don't adhere to this guideline and end up writing page content in a story-format. On each page there's an introduction, middle and conclusion, in that order. Unfortunately, when scanning through web content we don't tend to read all the text nor read all the way to the bottom of the screen. As such, you may easily miss the conclusion if it's left until the end.

So remember, conclusion first, everything else second! For a great example of front-loaded content, just read any newspaper article. The opening paragraph is always the conclusion of the article.

4. Use descriptive sub-headings
Breaking up text with descriptive sub-headings allows site visitors to easily see what each section of the page is about. The main heading on the page provides a brief overall view of what page is about, and the opening paragraph gives a brief conclusion of the page (because you've front-loaded the page content). Within the page though, there are various sub-themes which can be quickly put across with sub-headings.

There's no hard and fast rule for how frequently to use sub-headings, but you should probably be roughly aiming for one sub-heading every two to four paragraphs. More importantly though, the sub-headings should group on-page content into logical groups, to allow site visitors to easily access the information that they're after.

5. Bolden important words

Another way to help users locate information quickly and easily is to bolden important words in some paragraphs. When site visitors scan through the screen this text stands out to them, so do make sure the text makes sense out of context.

Bolden two to three words which describe the main point of the paragraph, and not words on which you're placing emphasis. By seeing these boldened words site visitors can instantly gain an understanding of what the paragraph is about and decide whether or not they want to read it.

6. Use descriptive link text

In the same way that bold text stands out to screen-scanning web users, so does link text. Link text such as ‘click here' makes no sense whatsoever out of context so is useless to site visitors scanning web pages. To find out the destination of the link, site visitors have to hunt through the text both before and after the link text.


7. Use lists

Lists are preferable to long paragraphs because they:

- Allow users to read the information vertically rather than horizontally
- Are easier to scan
- Are less intimidating
- Are usually more succinct

8. Left-align text
Left-aligned text is easier to read than justified text, which in turn is easier to read than centre- or right-aligned text.

When reading through justified text the spacing between each word is different so our eyes have to search for the next word. This slows down our reading speed. Right- and centre-aligned paragraphs slow down reading speed even more because each time you finish reading one line your eye has to search for the beginning of the next line.

Conclusion

These eight guidelines are nothing revolutionary nor are they difficult to implement. Yet so many websites structure their content so poorly to the detriment of their site visitors. Have a quick look over your website now - how does it do with regards to these content guidelines?

The Secret Benefit Of Search Engine Optimisation: Increased Usability

A higher search ranking is what many website owners dream of. What they don't realise is that by optimising their site for the search engines, if done correctly, they can also optimise it for their site visitors.

Ultimately this means more people finding your website and increased sales and lead generation. But are search engine optimisation and usability compatible? Aren't there trade-offs that need to be made between giving search engines what they want and giving people what they want? Read on and find out (although I'm sure you can guess the answer!)...

1. Keyword research carried out

Before you even begin building your website, you should carry out keyword research to identify which keyword phrases your site should target. Using publicly available tools such as Wordtracker (http://www.wordtracker.com), you can discover which keywords are searched for the most frequently and then specifically target those phrases.

Doing keyword research is also crucial for your site's usability. By using the same keywords in your website that web users are searching for in search engines, you'll literally be speaking the same language as your site visitors.

For example, you might decide to target the phrase, "sell toys", as your website does in fact sell toys. Keyword research would undoubtedly show you that web users are actually searching for, "buy toys" (think about it - have you ever searched using the word, "sell", when you want to buy something?). By placing the phrase, "buy toys" on to the pages on your website, you'll be using the same words as your site visitors and they'll be able to find what they're looking for more easily.

2. 200 word minimum per page

Quite simply, search engines love content - the more content there is on a page the easier it is for search engines to work out what the page is actually about. Search engines may struggle to work out the point of a web page with less than 200 words, ultimately penalising that page in the search rankings.

In terms of usability, it's also good to avoid pages with very little content. A page with less than 200 words is unlikely to contain a large amount of information, so site visitors will undoubtedly need to click elsewhere to find more detailed information. Don't be afraid to put a reasonably large amount of information on to a page. Web users generally don't mind scrolling down anymore, and provided the page provides mechanisms to aid scanning (such as employing sub-headings - see point 6 below) it shouldn't be too difficult for site visitors to locate the information that they're after.

3. 100kb maximum HMTL size

If 200 words is the minimum page content size, then 100kb is the maximum, at least in terms of HMTL file size. Anything more than this and search engines may give up on the page as it's simply too big for them.

A 100kb HMTL file will take 20 seconds to download on a 56k dial up modem, used by three in four UK web users as of March 2004 (source: http://www.statistics.gov.uk/pdfdir/intc0504.pdf). Add on the time it takes for all the other parts of the page to download, such as images and JavaScript files, and you're looking at a highly un-user-friendly download time!

4. CSS used for layout

The website of Juicy Studios (http://www.juicystudio.com) saw a six-fold increase in site visitors after switching from a table-based layout to a CSS layout. Search prefer CSS-based sites and are likely to score them higher in the search rankings because:

The code is cleaner and therefore more accessible to search engines
Important content can be placed at the top of the HTML document
There is a greater density of content compared to coding


Using CSS for layout is also highly advantageous for usability, as it leads to significantly faster download times.

5. Meaningful page title

If you know anything about search engine optimisation you'll know that search engines place more importance on the page title than any other attribute on the page. If the title adequately describes the content of that page then search engines will be able to more accurately guess what that page is about.

A meaningful page title also helps site visitors work out where they are, both within the site and the web as a whole. The page title is the first thing that loads up, often quite a few seconds before the content, so a descriptive, keyword-rich page title can be a real aid to help users orientate themselves.

6. Headings and sub-headings used

Search engines assume that the text contained in heading tags is more important than the rest of the document text, as headings (in theory at least) summarise the content immediately below them.

Headings are also incredibly useful for your human site visitors, as they greatly aid scanning. Generally speaking, we don't read on the web, we scan, looking for the information that we're after. By breaking up page sections with sub-headings that effectively describe the content beneath them, scanning becomes significantly easier.

Do be sure not to abuse heading tags though. The more text you have contained in heading tags within the page, the less importance search engines assign to them.

7. Opening paragraph describes page content

We've already established that search engines love content, but they especially love the first 25 words or so on each page. By providing an opening paragraph that adequately describes the content of the rest of the page (or the site if it's the homepage), you should be able to include your important keyword phrases in this crucial area.

As web users, whenever we arrive at a web page the first thing we need to know is whether this page has the information that we're after. A great way to find this out is to scan through the first paragraph, which, if it sufficiently describes the page content, should help us out.

8. Descriptive link text

Search engines place a lot of importance on link text. They assume that link text will be descriptive of its destination and as such examine link text for all links pointing to any page. If all the links pointing to a page about widgets say 'click here', search engines can't gain any information about that page without visiting it. If on the other hand, all the links say, 'widgets' then search engines can easily guess what that page is about.

One of the best examples of this in action is for the search term, 'miserable failure'. So many people have linked to George Bush's bio using this phrase as the link text, that now when miserable failure is searched for in Google, George Bush's bio appears top of the search rankings!

As web users, we don't generally read web pages word-for-word - we scan them looking for the information that we're after. When you scan through text you can't take any meaning from the word 'click here'. Link text that effectively describes its destination is far easier to scan and you can understand the destination of the link without having to read its surrounding words.

9. Frames avoided

Frames are quite an old-school technique, and although aren't as commonplace as they once were, do still rear up their ugly head from time to time. Using frames is one of the worst possible things you could do for your search engine ranking, as most search engines can't follow links between frames.

Even if a search engine does index your pages and web users find you through a search engine, they'll be taken to one of the pages within the frame. This page will probably be a content page with no navigation (navigation is normally contained in a separate frame) and therefore no way to navigate to any other page on the site!

Frames are also disadvantageous for usability as they can cause problems with the back button, printing, history and bookmarking. Put simply, say no to frames!

10. Quality content provided

This may seem like a strange characteristic of a search engine optimised website, but it's actually crucial. Search engines, in addition to looking at page content, look at the number of links pointing in to web pages. The more inbound links a website has, all other things being equal, the higher in the search rankings it will appear.

By providing creative, unique and regularly updated content on your website, webmasters will want to link to you as doing so will add value to their site visitors. You will also be adding value to your site visitors.

Conclusion

Optimising your website for both search engines and people needn't be a trade-off. With this much overlap between the two areas, you should easily be able to have a website that web users can find in the search engines, and when they do find it, they can find what they're looking for quickly and efficiently.

Mobile & handheld usability testing - why it matters

Mobile & handheld usability testing - why it matters

Word Count:

700

Summary:

Mobile and handheld usability testing is crucial to your business - find out why and what you need to do for this unique medium.

Keywords:

mobile usability

Article Body:

Mobile phone and PDA usability testing is critical to your business. In fact, mobile and handheld usability testing could be even more important than computer-based usability testing. The main reasons for this are:

- The number of people accessing the Internet from mobile and handheld devices is increasing at a massive rate - in 2008 alone there'll be an estimated 58 million PDAs sold worldwide (source: eTForecast).
- People generally have a lot less experience of using their mobile to go online than they do of using their computer. This means that computer-based users can be assumed to have a higher level of existing expertise than mobile and handheld users.
- The platform through which users access your site is far less predictable when using mobile phones. Computer-based site visitors generally only differ from one another in their browser and operating system (i.e. most people will use a screen, mouse and keyboard), whereas the different types of mobile phones and PDAs differ can drastically.


Which mobile phones and PDAs do you need to consider?

Mobile phones and PDAs can differ from one another dramatically, and this will radically change how people experience and use websites. Some of the ways in which handheld devices can differ include:

- Screen size (small vs. large)
- Screen layout (portrait vs. landscape)
- Input device (stylus, numeric keypad, dial-wheel, QWERTY keypad)

Because the mobile phone / PDA that someone is using will have such a profound effect on their experience of your site, you should try to test with as many mobile phones and PDAs as possible.

Of course, testing with every mobile phone and PDA is impossible. Here are some ideas to help narrow down the number of devices you'll need to test with:

- Your mobile site visitors may belong to a specific audience. Certain audiences tend to prefer particular types of phones (e.g. phones with big screens that are designed to support online access vs. small-screen models that aren't).
- There are 'phone families' that offer a very similar user experience (and will not need to be tested individually).
- You may only want to test with the most popular mobile phones in Europe or the most popular models that are being used to access your site (you can check your site statistics to find out this information).


Who do you want to test with?

The people you want to conduct your mobile phone usability testing sessions with will, of course, depend on your particular business and its audience. Some things to bear in mind include:

- How much experience they should have of using their mobile phones to access services. This is particularly important as the market for accessing online services through mobile phones is growing and the percent of 'complete novices' (i.e. people using the technology for the first time) will be far higher than for computer users of your website.
- Which mobile phone or PDA they have. We would usually recommend that people use their own mobile phone in a session, so the test can focus on your website and not on the way the handheld device works.


Where should mobile usability testing sessions be conducted?

Mobile phones and PDAs are used in the real world so usability testing of handheld devices should therefore not only take place in a usability laboratory.

Where, when and how a mobile phone is used is critical to a person's experience of the site they are accessing. Any of the following circumstances could influence this experience and therefore considerations of the site's usability:

- Lighting
- Background noise
- Distractions
- Concurrent tasks (i.e. anything the person is doing at the same time)
- Physical movement

As such, we'd recommend, if possible, that any mobile phone and PDA usability testing is conducted both in a laboratory and also in the 'outside world'.

How you plan and run mobile phone usability sessions will be based on your business and its audience, but the most popular methods of mobile usability testing include:

- Lab-based (using a camera to record the session)
- Diary-studies (asking people to keep a diary of how they have used their mobile phone and any problems they encounter)
- Paper prototypes (running usability testing on a paper-based version of the site, using mobile phone screen-sized pieces of paper)

Improving Usability for Screen Reader Users

Simply ensuring your website is accessible to screen reader users is unfortunately not enough to ensure these users can find what they're looking for in a reasonably quick and efficient manner. Even if your site is accessible to screen reader users, its usability could be so incredibly poor that they needn't have bothered coming to your site.

Fortunately, there are plenty of simple-to-implement guidelines you can follow, which not only drastically improve usability for screen reader users, but for all web users:

1. Descriptive headings

The use of on-page headings is one of the most important usability features for screen reader users, as it helps them more easily understand the page structure. Although text on the page may appear to be a heading for sighted users, it must be labelled as a heading within the HTML code for screen reader users to know it is a heading.

Screen readers don't look at web pages - they read through the HTML code. If a piece of text is called a heading within the HTML code then the screen reader will announce that it's a heading. If not, screen reader users won't actually know if something that visually appears to be a heading is actually a heading.

Another usability benefit of using headings for screen reader users, is that these users can call up a list of on-page headings and jump to the section of the page in which they're most interested. This works in much the same way as sighted web users scanning through web pages by glancing at headings. If headings are descriptive of the content contained beneath them it becomes far easier for screen reader users to find the information which they're after.

2. Descriptive link text

Screen reader users can browse through web pages by calling up a list of on-page links, and activating the link in which they're most interested. As such, non-descriptive link text such as ‘click here' should be avoided at all costs as it makes no sense whatsoever out of context.

The good news is that the use of descriptive link texts represents a usability benefit for everyone. When we scan through web pages, one of the items that stands out to us is link text. ‘Click here' is totally meaningless to web users scanning through pages and forces users to hunt through surrounding text to discover the link destination.

3. Lists

Using lists within the HTML code is extremely useful for screen reader users, as screen readers announce the number of items in each list before reading out the list items. This helps these users know what to expect when hearing a list of items (such as site navigation).

This works in mush the same way as an answer phone telling you how many messages you have, before listening to them. By informing you of how many messages you have, you instantly know what to expect. If there's only one or two messages you can probably remember them; much more and you'll probably want to get a pen and paper and make notes.

The use of lists is really just a behind-the-scenes change to the code and needn't affect the visual appearance of the website.

4. Logical linearization

Screen reader users generally have to listen to web pages from start to finish, top to bottom, left to right. Sighted web users on the other hand can glance through a web page almost randomly, spotting important information wherever it may appear on the page. Because of this, important information should always be placed towards the top of the page.

One example of how not to do this is to place instructions for a form at the bottom of the page.

Placing important information towards the top of the page actually benefits everyone, as the important information is now in the place where sighted users look first - the top of the page.

5. Short, succinct ALT text

ALT text is the alternative text for images that gets read out to screen reader users. Any website offering even basic accessibility will provide this alternative text. Some websites try to over-explain the information conveyed by images, forcing screen reader users to have to listen to a lot of unnecessary and irrelevant information.

Screen reader users often take longer than sighted web users to work through websites, so help make their surfing time easier with succinct ALT text.

6. Short, front-loaded paragraphs

Front-loading means placing the conclusion first, followed by the what, why, when, where and how. By placing the conclusion first, screen reader users can instantly gain an understanding of what the paragraph's about. They can then decide whether they want to keep on listening or if they want to skip to the next paragraph (which they can easily do with the screen reader). If the paragraphs are short, they can do this safe in the knowledge that they won't be missing extra information.

Front-loading content obviously benefits everyone, as web users no longer have to search around for the main point of each paragraph.

7. Descriptive page title

The page title is the very first thing that screen reader users hear when arriving at any web page, so it's truly essential that it's descriptive of the page. Again, this benefits everyone as users can use the page title to orientate themselves and confirm that they're on the page they think they're on. This is especially true for web users on dial-up connections where the page title displays a number of seconds before the rest of the page.

Conclusion

There are a number of relatively simple and painless things that can be done to improve usability for screen reader users. Fortunately, nearly all of them improve usability for all web users, meaning everyone benefits - which is never a bad thing.

Usability testing with children

Usability testing with children is similar in many respects to usability testing with adults. In order to get the most out of the sessions, and ensure the child is comfortable and happy, there are a few differences that you need to be aware of.

Stress of new people and surroundings

Children are far more likely than adults to find encountering new places and people stressful. You should always remember this, so try to find as many ways as possible to relax the child. Some things you could do are:

- Allow a significant period of time - at least 10 minutes - to meet the child. This is critical in putting them at ease before beginning the session. Some easy things to talk about might be computer games, cartoons, sports or school. Trying to make all the equipment used during the session match that which the child uses at home/school (phone up their parents/teachers beforehand to check).
- Try to be as comforting and reassuring as possible. It's especially important to make it clear to the child that you want their views on the site and that you're not testing them.
- Plan for the fact that younger children may prefer their parents to remain in the testing room with them. Make sure that parents know that they should stay out of the child's line-of-sight and not help or distract them.

Asking for help

Children are far more used to asking for - and receiving - help than adults, so it's very important for the moderator to:

- Clearly explain at the beginning of the test that you want the child to use the site on their own
- Make a sustained effort to deflect any such questioning during the session itself

Good ways of deflecting questions can include:

- Answering a question with a question (e.g. What do you think [you should do now]?)
- Re-stating that you want the child to use the site ‘on their own'
- Asking the child to have ‘one last go' before you move on to something else

Children get tired, bored and discouraged more easily

Children (especially of younger ages) are less inclined - and/or able - to apply themselves to a single task for a prolonged period. Some ways to work around this are:

- Limiting sessions to 1 hour or less.
- Taking short breaks during sessions if the child becomes tired or irritable.
- Ensuring that sessions cover the intended tasks/scenarios in a different order - this will make sure that the same scenarios are not always tested by tired children, who are less likely to succeed/persevere.
- Asking the child for help so as to provide them with motivation (e.g. asking ‘Could you please find out for me how to...', or by actually pretending to not be able find/do something on the site).
- Keeping up a steady stream of encouragement and positive feedback ("You're doing really well and telling us lots of useful things - it will really help make the site better. Keep it up!").

The importance of non-verbal cues

Children can't always be relied upon to verbally articulate their thoughts/feelings, either due to their:

- Not being articulate enough
- Being too shy
- Not wanting to say the wrong thing and displease an adult
- Saying things they don't believe just to please the adult

This makes it particularly important that the usability expert be sensitive to children's non-verbal cues, such as:

- Sighs
- Smiles
- Frowns
- Yawns
- Fidgeting
- Laughing
- Swaying
- Body angle and posture

Physical differences

A couple of very obvious - but easily forgotten - differences which need to be taken into account are:

- Chair and table settings - Make sure you have a chair/table setting that allows the child to comfortably use the equipment during the session.
- Microphone positioning - Children tend to have quieter voices than adults, so microphones should be placed slightly nearer to the participant than normal.

Levels of literacy and understanding
It is critical to ensure that a session's participant has an accurate understanding of the scenario being presented to them. Some ways to do this include:

- Asking participants to re-phrase scenarios/goals in their own words.
- Asking participants to repeat a scenario (i.e. what they are trying to achieve) if the task has gone on for some time and you suspect they may have forgotten it.