Cheesetoast » Usability http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.9 9 Simple Tips to Improve Web Usability http://www.cheesetoast.co.uk/9-simple-tips-improve-web-usability/ http://www.cheesetoast.co.uk/9-simple-tips-improve-web-usability/#comments Mon, 16 Jul 2012 23:56:01 +0000 http://www.cheesetoast.co.uk/?p=544 Advice on copy writing, linking, font styling, and more. These simple steps can help improve website usability. Continue reading

The post 9 Simple Tips to Improve Web Usability appeared first on Cheesetoast.

]]>
Keep Your Content Concise
Website content (headers, lists, tables, paragraphs, etc.) should be concise and logical. Headers should be given short, accurate descriptions that use familiar terms so that users can quickly scan them. Keep paragraphs reasonably short and use lists where necessary to improve readability.
Use Sensible Link Names (Avoid “Click here”)
Link names should have an accurate description of where they lead. For example:

Learn more about <a href="#">feeding bonsai trees</a>.

is far better than

<a href="#">Click here</a> for more information on feeding bonsai trees.

This is also better for SEO, since the link has some context.

Color Code Links
Make sure users can tell that a link can be clicked on. If you have to change the default link color for aesthetic reasons make sure it still stands out as a link. Visited links should have a different text color from links that have never been visited. This isn’t usually a problem, since you need to go out of your way to change it, but it helps users a lot if they know where they’ve visited already. Especially when interlinking is so important…
Interlink Your Site
Interlinking involves creating links to other pages within your site. It’s not only great for SEO but it provides a good way for users to explore your site. Don’t confine internal links to the navigation menu, make sure you include them in your content so that users can find new pages while they’re reading.
Use Bold
Remember, users don’t read content, they scan it. Strip paragraphs of unnecessary language and draw attention to key words or phrases by putting them in bold. Highlight keywords so that they stand out when users are scanning. They can conduct more in-depth reading if they find the snippet of interest. Just don’t go too crazy with it and be careful that your bold text isn’t competing with your headlines.
Line Length
Content can be hard to read if the line length is too long or too short. Research has shown that around 11 words per line is optimal for adults. Children tend to prefer slightly shorter line lengths. Obviously these days with flexible and responsive designs this can be difficult to control, but it’s worth considering when designing your layout.
Use White Space
Don’t be afraid of white space. Not only can it look sophisticated but it can act as a great separator between content areas and is excellent for avoiding a cluttered site.
Use Sans Serif Fonts
Sans serif fonts have been shown to be easier to read for main body text, although serif fonts can work well in headings as it gives them a distinct look.
Keep Color Blindness in Mind
A lot of people don’t realize this but around 8% of males (and only about 0.5% of females) are color blind (myself included). Don’t forget to take this into consideration when choosing colors. Red & green color blindness is the most common, however other color combos such as blue & purple can be problematic. For information on which colors combinations to avoid read about color blindness at usability.gov.

Further Reading

For more tips on how to make your website more usable take a look at my other articles on website usability.

The post 9 Simple Tips to Improve Web Usability appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/9-simple-tips-improve-web-usability/feed/ 0
Website Navigation http://www.cheesetoast.co.uk/website-navigation/ http://www.cheesetoast.co.uk/website-navigation/#comments Fri, 29 Oct 2010 23:51:23 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=70 Web pages are more than just a collection of pages containing useful information and forms for interaction. They are a network of interrelated nodes that have been structured and organised so that users can find what they are looking for. Since the structure of websites varies so much, users are forced to relearn how to navigate around them. Users frequently have trouble deciding which page within a site to visit next. This decision usually involves an understanding of their current location within the site, and for poorly constructed sites this can be difficult to determine. One possible reason for this could be that developers design the navigation system around the assumption that users will first visit the home page when they enter the site. This is not always true, as users may be linked to any page on the site from a bookmark, url or search engine result. Continue reading

The post Website Navigation appeared first on Cheesetoast.

]]>
Web pages are more than just a collection of pages containing useful information and forms for interaction. They are a network of interrelated nodes that have been structured and organised so that users can find what they are looking for. Since the structure of websites varies so much, users are forced to relearn how to navigate around them. Users frequently have trouble deciding which page within a site to visit next. This decision usually involves an understanding of their current location within the site, and for poorly constructed sites this can be difficult to determine. One possible reason for this could be that developers design the navigation system around the assumption that users will first visit the home page when they enter the site. This is not always true, as users may be linked to any page on the site from a bookmark, url or search engine result.

One method for effectively communicating the site structure is to organise headings and pages in a way that is instinctive and logical to the target audience. This can be accomplished early in the design stage, by carrying out a method known as ‘card sorting’. By asking representative users to sort cards into category piles based on how they think the site should be arranged, designers can gain a better understanding of how users mentally organise the information. This fresh perspective can also be used to come up with suitable menu titles and headings by choosing words and phrases that are familiar to the user.

In his book The Psychology of Everyday Things 1988, Norman describes what he calls ‘the gulf of evaluation’. “The gulf of evaluation is the degree to which the system/artefact provide representations that can be directly perceived and interpreted in terms of the expectations and intentions of the user”. In other words, how well the system communicates the current state and how easy it is to interpret. The gulf is small if the system presents itself in a way that the users’ actions match their expectations of how easy it is to complete their goal. Closing the gulf of evaluation on a website is particularly important because as soon as the user becomes confused it is very easy for them to leave.

Communicating current location in a site can be accomplished through visual cues. According to Nielsen (1999), linking is the most important part of hypertext. He advises that the names of links should be carefully chosen and should supply a short, yet accurate description as to where they lead. For example, link names such as “click here” should be avoided because the name itself does not carry any information about what it links to. Since we know that users scan pages, suitably named links can avoid users having to read the context in which they are placed. In 2004, Nielsen wrote an article outlining some of the guidelines for visualising links. In the article he strongly recommends that visited links and unvisited links should be coloured differently, as this is what users have become accustomed to on web pages. The colour of text for these links should not be used for any other text, as this would make it difficult to distinguish between them. Another cue is a list of words or phrases presented by the side of the screen. This is a common style of navigational column and may also be associated with links. When these cue’s are not provided on a website, users can lose track of which pages they have visited before and can become lost. This is especially true when the websites are ‘deep’, having many levels and sub menus. By conforming to these simple guidelines, designers can improve the ‘learnability’ of a site, one of the factors of good usability.

Designers are confronted with the task of grouping all the information on a website into sizeable chunks. This involves separating the content into individual pages whilst making it easily accessible to the user.

Links and menu need to be careful arranged so that information retrieval is efficient. With a hierarchical website structure, choices need to be made about how deep or how broad the site becomes. The deeper a website structure is, the more sub levels it has. A broader website will be relatively shallow, with a larger number of levels accessible from the root. Miller (1985) learned that human memory is an important factor in a hierarchical structure, with test subjects taking longer to reach a target in a deeper hierarchical structure. Later, Larson and Czerwinski (1998) carried out a study with three different structures (8x8x8, 32×16, 16×32). His findings supported Millers findings. Users completed tasks more quickly with the broadest structure (16×32) and took the longest time with the deepest (8x8x8). However, these experiments are based on the fact that the menus are spread out in a symmetrical fashion. Since it is unlikely that all website will have such a symmetrical structure, this does not accurately reflect real world web pages. Shneiderman et al. (1999) conducted a study which took into consideration not only an asymmetrical hierarchical structure, but also the difference in menu presentation. The two types of menus tested were sequential and expanding indexes. The results reinforced previous research, as time and efficiency of tasks deteriorated with depth. In addition to this, tasks were accomplished faster with sequential menus than those tested with expanding menus.

The implications for designers are that site structures should be broad with most of the nodes within 3 levels of the root. As the site becomes deeper there is more strain on the short-term memory of the user. Especially broad levels can group page links under headings and make use of secondary links within closely related nodes.

The post Website Navigation appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/website-navigation/feed/ 0
What Makes Good Usability? http://www.cheesetoast.co.uk/what-makes-good-usability/ http://www.cheesetoast.co.uk/what-makes-good-usability/#comments Sat, 19 Jun 2010 23:48:43 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=67 This article is based on research I did for a dissertation on web usability and highlights some of the key areas that make a website easier to use. Continue reading

The post What Makes Good Usability? appeared first on Cheesetoast.

]]>
This article is based on research I did for a dissertation on web usability and highlights some of the key areas that make a website easier to use.

The main goal is not to complicate the already difficult life of the consumer – Raymond Loewy

Usability experts agree that, despite what many people may assume, users don’t want a great deal of information. They just want the amount of information necessary for them to complete their task. Users want information quickly and they can become confused or frustrated when something distracts them from their goal.

Users Don’t Read Content, They Scan It

Many website authors make the mistake of presuming that users will take the time to read in-depth content and try to understand how a site is organised. However, users want information quickly. In fact, instead of reading text, they scan it (Morkes & Nielsen). They do this by picking out single words or sentences and extracting only basic information. This allows them to cover larger areas of text in less time. Therefore, web page content should be written in a way that is concise and with logical layout (headers, lists, short paragraphs, etc.).

Strip Down Content

Users pay attention to information that is either relevant to the task at hand, of personal interest to them or to trigger words. These trigger words are ones that we naturally respond to; words like “free”, “sale” and “sex”. Web content can be improved when it is stripped of unnecessary language and when important words or phrases are drawn attention to (hence the bold lines of text in this article).

Headers and sub-headers should give a short but accurate description of the content to follow, using terms that the user is familiar with. Since users normally won’t read a large body of text, paragraphs should be limited to one idea at a time so that they are easily digested.

The Inverted Pyramid

Most newsworthy info should be appear first.The ‘inverted pyramid’ style of writing, which is often used in journalism, works well on the web. This method of puts forth the most important information at the beginning of the text with additional information following in descending order of importance. This allows the users to easily browse each section and surmise the context then decide on whether to continue reading. In web design, the area under which the user has to scroll down to see (known as ‘the fold’) is of less importance.  Another advantage to this writing style is that search engines are more likely to analyse the information closer to the top of the page.

Interlinking

What makes website content different from traditional styles of writing is that information can be easily linked. Text doesn’t need to appear as a linear body of text, but can be separated into individual areas, each linking to one another. Therefore the reader has more control over which path they wish to follow. Since the user is given more power over the direction they can take, there is more need for each area to compete for attention. Again, this interlinking of page can benefit a site’s search engine rankings.

Font Size

Font size is a common concern with designers. If a font size is too small or too large then the text becomes difficult to read at length. Studies show that common web fonts are read noticeably slower when it is less than 10 point. 12-14 point is considered optimal for most adults, although older people prefer larger font sizes. Sans serif fonts are generally preferred to serif, however there is little evidence to suggest that they effected reading times. An important factor to consider when selecting a font, however, is that the actual text size may differ with fonts of the same point size. The way the font is viewed may also vary depending on user settings, screen resolution and browsers types.

Line Length

Line length is also an important factor on how quickly users can read text. This is based on the capabilities of the human eye which, at typical reading distance, only has a visual field of a few inches. Reading long lines of text which exceed this distance requires more eye movement and can become tiresome. An investigation by Bernard et al. (2000) concluded that longer line lengths should not be used for web pages, especially those with large bodies of text. Shorter line lengths (around 11 words) are favoured over full-screen lines, as users are more likely to loose their place in the text when reading longer lines. However, very short line lengths are discouraged, as they require the user to scroll down the page. The study concluded that for adults, a typical line should consist of around 65 to 75 characters per line (CPL), whereas children favoured shorter lines (around 45 CPL).

White Space

It is a popular opinion of graphic designers that open-space (referred to as ‘white-space’, though not necessarily white) not only contributes to the attractiveness of a design, but provides additional functionality. Areas of white space can be used to organise areas on a page by drawing attention to easily identifiable regions. Important areas can be made to stand out if unnecessary visual elements are reduced to a minimum and information is suitably structured. The use of white space can eliminate the need for artificial barriers such as boxes or bars. White space is useful for, “directing the viewer’s attention to the regions where important information is provided and allowing the global structure of the composition to assume a meaningful configuration”.

Contrast

A major concern with the usability of web pages is the appropriate contrast between the text and the background colours. This is especially relevant to users who are colour deficit, or “colour blind”. Around 8% of males are believed to be colour blind (myself being one of them). The condition is much less common with females, with around 0.5%. Research shows that in general dark text on a light background results in more accurate reading (Bauer and Covonius, 1980) and that black text on a white background is the best combination.

Researchers agree that black and white produce the most effective contrast for reading, but realise that this is not always suitable for commercial web pages where aesthetics and human psychology play a larger role. Still, darker colours against light backgrounds produce high contrast. People were more likely to find information quickly when the background was plain, rather than textured, although this is not so significant when there is sufficient contrast between text and background.

The post What Makes Good Usability? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/what-makes-good-usability/feed/ 0
Why is Usability Important? http://www.cheesetoast.co.uk/why-is-usability-important/ http://www.cheesetoast.co.uk/why-is-usability-important/#comments Sat, 19 Jun 2010 23:45:31 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=65 Usability plays a significant role in our lives. Everyday tasks such as driving a car, watching TV or filling out a form involves usability in some way. As technology becomes more complex and diverse, there is a greater need to ensure that users are able to operate it. Human computer interaction principles have existed for decades for the design of traditional software applications. However, there are several significant differences between traditional software interfaces and designing for the web. Web designers do not have the luxury of knowing where the user will be when surfing the Internet. They may be sitting at home on a desktop computer, travelling on a train or sitting in an crowded cafe. Find out why website usability is so important. Continue reading

The post Why is Usability Important? appeared first on Cheesetoast.

]]>
Usability plays a significant role in our lives. Everyday tasks such as driving a car, watching TV or filling out a form involves usability in some way. As technology becomes more complex and diverse, there is a greater need to ensure that users are able to operate it.

Human computer interaction principles have existed for decades for the design of traditional software applications. However, there are several significant differences between traditional software interfaces and designing for the web. Web designers do not have the luxury of knowing where the user will be when surfing the Internet. They may be sitting at home on a desktop computer, travelling on a train or sitting in an crowded cafe.

With a traditional graphical user interface (GUI), developers can control everything that is displayed on the screen. They know which systems they are being designed for, which fonts are installed and in some cases, the screen size. This is not so with web interfaces. Web pages may contain the information in their code, but it is the browser that presents it. Some of the differences between GUI’s and web interfaces are as follows:

  • Compatibility – There is a need to design for browser and device compatibility. What looks appealing on a desktop PC browser may not look or act the same on a different browser or on a mobile device.
  • Security – The Internet is less secure. Any personal information divulged is at risk of being communicated over the Internet to unwanted parties. Websites have to earn the trust of the users.
  • No manual – Unlike many software packages, there is no manual for the Internet. In most cases, users have to be able to be able to use website interfaces intuitively.
  • Range of users – With over one and a half billion Internet users in the world (www.internetworldstats.com), the range of user types is diverse. Websites may have to cater for people of different age groups, cultures and capabilities. Accessibility is often a legal requirement for website design.

With over 230 millions websites on the Internet, users have more choices than ever (www.netcraft.com). Website designers are constantly trying to find ways to make websites more appealing for users. If a web page is confusing or difficult to use, they are more likely to leave. If the text is hard to read or the site content does not satisfy their needs, they will simply go elsewhere (Nielsen, 2000). There are many reasons why a user would want to leave a site and after all, it is as easy as clicking a mouse button. Improving the usability of a website can accomplish the following:

  • Increased usefulness – the more you cater for the needs of the user, the more likely they are to want to use it.
  • Increased efficiency – ensuring that the user can do what they want, as quickly and with as much ease as possible without error.
  • Improved productivity – because the site is more efficient and has less errors, the user can accomplish more.
  • Improved acceptance – user satisfaction means that users will trust the site and want to return. The better the impression you make on users, the more you enhance the perception of the business or organisation and improve its reputation, which can lead to more visitors.

In his book, User-Centred Web Design, John Cato (2001) explains what he calls the ‘creation trap’. This can be described as the mindset in which developers know what they want from the offset and just want to move on to its creation. Developers often feel the pressure of time, budget and management and want to get something visible done so that they can show progress, with the disillusion that the discovery and design stages are unproductive. In this rush to the creation stage, they begin development too early and suffer the consequences later, when it is often too late.

Many website development managers see the usability studies as an added cost, however, companies who invest their money into conducting usability studies have seen the benefits. A recent study has shown that for websites that have been redesigned for increased usability with 10% of the development budget had an average improvement in key performance indicators of 85% (Nielsen, 2008, Retrieved June 23rd).

The cost of development can be reduced when designing with usability in mind. Often, the first 10% of the design process can establish a basis for 90% of the total cost. Therefore, a usability approach is important to ensure that the site adheres to its goals (Reinersten, 1991).

In summary, the money that is spent on usability is saved in later development when fewer changes have to be made. This creates a significant return on the investment.
“The rule of thumb in many usability-aware organisations is that the cost-benefit ratio for usability is $1:$10-$100. Once a system is in development, correcting a problem costs 10 times is much as fixing the same problem in design. If the system has been released, it costs 100 times as much relative to fixing in design” (Gilb, 1988, chapter 2).

The post Why is Usability Important? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/why-is-usability-important/feed/ 0
What is Usability? http://www.cheesetoast.co.uk/what-is-usability/ http://www.cheesetoast.co.uk/what-is-usability/#comments Wed, 16 Jun 2010 23:40:16 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=63 This article introduces website usability and goes over the five key usability components. Taken from my Masters dissertation on User-Centred Design and Web Usability. Continue reading

The post What is Usability? appeared first on Cheesetoast.

]]>
When having a discussion about usability it is virtually impossible to do so without mentioning Jakob Nielsen. Nielsen is one of the worlds leading experts on usability and the founder of the “discount usability” movement. Nielsen describes interface usability as, “a quality attribute that assesses how easy user interfaces are to use” and goes on to explain that usability can be defined by five components:

Five Key Usability Components

  • Learnability: The ease of which users grasp the ability to perform basis tasks.
  • Efficiency: The speed at which users can complete tasks.
  • Memorability: The ability for users to recall information and to re-establish proficiency.
  • Errors: The number and severity of errors made.
  • Satisfaction: The satisfaction derived from using the system and the extent to which requirements were met.

The authors of “Usability for the Web: Designing Web Sites That Work” explain that a usable system should have the appropriate functionality and be efficient to use. This efficiency can be, “a measure of time or actions required to correctly perform the functions that the user needs.

Author Steve Krug suggests that usability means, “making sure that something works well: that a person of average (or even below average) ability and experience can use the thing – whether it’s a Web site, a fighter jet, or a revolving door – for its intended purpose without getting hopelessly frustrated”

So what is website usability? A usable website will allow the user to accomplish their tasks quickly, efficiently and easily, without confusion or frustration. Furthermore, designing for good usability is about understanding the processes, capabilities and preferences of the users instead of relying on the perspective of the programmers alone. This prevents programmers from designing systems according to their personal interpretation.

 

The post What is Usability? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/what-is-usability/feed/ 0