Introduction to web usability Usability rules the Web! It is especially important for commercial sites. If users can’t figure out how to use a website in a minute or so, they conclude that it won’t be worth their time. The software industry has more motivation than the physical product industry to improve usability.

Usability rules the Web! It is especially important for commercial sites.

If users can’t figure out how to use a website in a minute or so, they conclude that it won’t be worth their time.

The software industry has more motivation than the physical product industry to improve usability.

Introduction to web usability On the Web, you are always in competition for the user’s time and attention with all the other millions of sites. Art vs. Engineering – The main goal of most web projects should be to make it easy for customers to perform useful tasks. Engineering approach has one major benefit: when you are in doubt whether to choose one design or another, you can pose an empirical question.

On the Web, you are always in competition for the user’s time and attention with all the other millions of sites.

Art vs. Engineering – The main goal of most web projects should be to make it easy for customers to perform useful tasks.

Engineering approach has one major benefit: when you are in doubt whether to choose one design or another, you can pose an empirical question.

Mistakes in web design Business model. Treating the Web as a brochure. Information architecture. Structuring the site to mirror the way the company is structured. Page design. Creating pages that look gorgeous. Instead, design for an optimal user experience under realistic circumstances. Content authoring. Writing in the same linear style as you have always written. Linking strategy. Treating you own website as the only one that matters, without proper links to other sites and without well-established entry-points for others to link to.

Business model. Treating the Web as a brochure.

Information architecture. Structuring the site to mirror the way the company is structured.

Page design. Creating pages that look gorgeous. Instead, design for an optimal user experience under realistic circumstances.

Content authoring. Writing in the same linear style as you have always written.

Linking strategy. Treating you own website as the only one that matters, without proper links to other sites and without well-established entry-points for others to link to.

Web usability topics Page design Content design Site design International use

Page design

Content design

Site design

International use

Page design Page design is the most immediately visible part of web design. Web pages should be dominated by content of interest to the user. Unfortunately, many sites spend more screen space on navigation and advertisements than they do on the information presentation.

Page design is the most immediately visible part of web design.

Web pages should be dominated by content of interest to the user.

Unfortunately, many sites spend more screen space on navigation and advertisements than they do on the information presentation.

Exercise www.amazon.com www.finnair.fi Try to estimate the proportion (percentages) of screen space used for: The browser and operating system Site navigation Advertising The content Unused space (white)

www.amazon.com

www.finnair.fi

Try to estimate the proportion (percentages) of screen space used for:

The browser and operating system

Site navigation

Advertising

The content

Unused space (white)

White space on the page White space is not necessarily useless It would be a mistake to design overly compact pages. White space can guide the eye and help users understand the grouping of information.

White space is not necessarily useless

It would be a mistake to design overly compact pages.

White space can guide the eye and help users understand the grouping of information.

Suggestions for design Content should account for at least half of a page’s design, and preferably closer to 80%. Navigation should be kept below 20% of the space for destination pages; higher for intermediate navigation pages. It would be best to eliminate advertising . If not possible, it should be considered as a part of overhead with navigation. If the design works well without a certain design element, kill it! Simplicity always wins over complexity, especially on the Web. “Light” (in size) pages load faster. It is impossible to estimate the size of monitor the user will have and what size window will be used to display the content. “ Adaptable content” concept is one of important goals of web design.

Content should account for at least half of a page’s design, and preferably closer to 80%.

Navigation should be kept below 20% of the space for destination pages; higher for intermediate navigation pages.

It would be best to eliminate advertising . If not possible, it should be considered as a part of overhead with navigation.

If the design works well without a certain design element, kill it!

Simplicity always wins over complexity, especially on the Web. “Light” (in size) pages load faster.

It is impossible to estimate the size of monitor the user will have and what size window will be used to display the content.

“ Adaptable content” concept is one of important goals of web design.

User-controlled navigation In GUI you control every pixel on the screen. On the Web, the user fundamentally controls his or her navigation through the pages. Users can take paths that were never intended by the designer! Web designers need to accommodate and support user-controlled navigation. It is better to design for freedom of movement.

In GUI you control every pixel on the screen.

On the Web, the user fundamentally controls his or her navigation through the pages.

Users can take paths that were never intended by the designer!

Web designers need to accommodate and support user-controlled navigation.

It is better to design for freedom of movement.

Using non-standard content The Web is constantly changing and new technologies appear. Some designers immediately apply these new technologies to make their site more fancy. There is a huge risk that your pages will not be displayed correctly by other browsers. You should never suppose that other users around the world should have the same modern Web technologies as you do.

The Web is constantly changing and new technologies appear.

Some designers immediately apply these new technologies to make their site more fancy.

There is a huge risk that your pages will not be displayed correctly by other browsers.

You should never suppose that other users around the world should have the same modern Web technologies as you do.

Upgrade of browsers In the early years of the Web, users would upgrade to new browser version at a speed of about 2% per week! Nowadays it happens much more slowly: The pressure to upgrade (from designers’ side) is getting weaker. The desire to upgrade (from users’ side) is not high (older browsers are reasonably good). The user population has changed.

In the early years of the Web, users would upgrade to new browser version at a speed of about 2% per week!

Nowadays it happens much more slowly:

The pressure to upgrade (from designers’ side) is getting weaker.

The desire to upgrade (from users’ side) is not high (older browsers are reasonably good).

The user population has changed.

Response times Users wish to speed up page downloads. Users need response times of less than 1 second when moving from one page to another. 0.1 second is about the limit for having the user feel that the system is reacting immediately. 1 second is about the limit for the user’s flow of thought to remain uninterrupted. 10 seconds is about the limit for keeping the user’s attention focused on the dialogue.

Users wish to speed up page downloads.

Users need response times of less than 1 second when moving from one page to another.

0.1 second is about the limit for having the user feel that the system is reacting immediately.

1 second is about the limit for the user’s flow of thought to remain uninterrupted.

10 seconds is about the limit for keeping the user’s attention focused on the dialogue.

Suggestions for design Web pages must be designed with speed in mind. Depending on the purpose of a page, graphics should be kept to a minimum, only when it really adds to the user’s understanding of the information. It does not mean that pages should be boring. Much can be done with coloured table cells and creative use of different fonts. When using graphics try to use multiple occurrences of the same image (after the initial download it will be stored in user’s local cash). This applies to buttons, arrows, and icons.

Web pages must be designed with speed in mind.

Depending on the purpose of a page, graphics should be kept to a minimum, only when it really adds to the user’s understanding of the information.

It does not mean that pages should be boring. Much can be done with coloured table cells and creative use of different fonts.

When using graphics try to use multiple occurrences of the same image (after the initial download it will be stored in user’s local cash). This applies to buttons, arrows, and icons.

Links Links are the most important part of hypertext. Structural navigation links. These links outline the structure of the information space and allow users to go to other parts of the space. Associative links within the content of the page (usually underlined words). See Also lists of additional references. These links help users find what they want if the current page is not the right one www.nytimes.com , www.tokem.fi

Links are the most important part of hypertext.

Structural navigation links. These links outline the structure of the information space and allow users to go to other parts of the space.

Associative links within the content of the page (usually underlined words).

See Also lists of additional references. These links help users find what they want if the current page is not the right one

www.nytimes.com , www.tokem.fi

Link descriptions The link anchors should not include too many words. Do not use “Click Here” captions. The words “Click” and “Here” are not informative. “ For background information on the usability, click here ” – example of poor design. “ You also can read additional background information about the usability ” – this is better.

The link anchors should not include too many words.

Do not use “Click Here” captions. The words “Click” and “Here” are not informative.

“ For background information on the usability, click here ” – example of poor design.

“ You also can read additional background information about the usability ” – this is better.

Link descriptions (continued) It is strongly recommended to include additional text that explains the link. Users cannot be expected to follow all links simply to learn what they are about. The departure page must include sufficient information to enable users to decide what link to follow next. www.nytimes.com, www.tokem.fi

It is strongly recommended to include additional text that explains the link.

Users cannot be expected to follow all links simply to learn what they are about.

The departure page must include sufficient information to enable users to decide what link to follow next.

www.nytimes.com, www.tokem.fi

Link titles Modern browsers have the capability to pop up a short explanation of a link. These explanations can give users a preview of where the link will lead and improve their navigation. The link explanation is called a link title . Look at: www.tokem.fi, www.ibm.com, etc. The goal of the link is to help users predict what will happen if they follow a link.

Modern browsers have the capability to pop up a short explanation of a link.

These explanations can give users a preview of where the link will lead and improve their navigation.

The link explanation is called a link title .

Look at: www.tokem.fi, www.ibm.com, etc.

The goal of the link is to help users predict what will happen if they follow a link.

Guidelines for link titles Name of the site the link will lead to (if different from the current site). Name of the sub-site the link will lead to (if staying within the current site but moving to a different part of the site). Added details about the information to be found on the destination page, as well as how it relates to the context of the current page. Warnings about possible problems at the other end of the link (e.g., “user registration required”).

Name of the site the link will lead to (if different from the current site).

Name of the sub-site the link will lead to (if staying within the current site but moving to a different part of the site).

Added details about the information to be found on the destination page, as well as how it relates to the context of the current page.

Warnings about possible problems at the other end of the link (e.g., “user registration required”).

Guidelines for link titles (continued) Link titles should be less than 80 characters, and rarely they ever exceed 60 characters. Shorter links titles are better. When it is obvious from the link context where the link will lead, then you don’t have to add link title. Link titles do not eliminate the need to make the link anchor understandable. Users should not have to point to a link to understand what it means!

Link titles should be less than 80 characters, and rarely they ever exceed 60 characters. Shorter links titles are better.

When it is obvious from the link context where the link will lead, then you don’t have to add link title.

Link titles do not eliminate the need to make the link anchor understandable.

Users should not have to point to a link to understand what it means!

Links to homepages When the name of a person is made into a link, try having it to go to a biography page. In the interests of fast downloads, the personal page should have a relatively small photo. The personal page should also briefly describe the person’s background with appropriate links to more detailed information. The personal page should list all those contact mechanisms that the person is to make available. Person’s name as a link is not recommended to evoke email to that person.

When the name of a person is made into a link, try having it to go to a biography page.

In the interests of fast downloads, the personal page should have a relatively small photo.

The personal page should also briefly describe the person’s background with appropriate links to more detailed information.

The personal page should list all those contact mechanisms that the person is to make available.

Person’s name as a link is not recommended to evoke email to that person.

Colours of links Most browsers use two colours to display links: Blue for the links that the user has not seen before. Purple or red for the links to pages that the user did see earlier. It is critical for web usability to retain this colour coding in your link colours. When non-standard link colours are used, users lose the ability to distinguish between pages they visited or not visited.

Most browsers use two colours to display links:

Blue for the links that the user has not seen before.

Purple or red for the links to pages that the user did see earlier.

It is critical for web usability to retain this colour coding in your link colours.

When non-standard link colours are used, users lose the ability to distinguish between pages they visited or not visited.

Physiology of blue If we were designing the Web today, few skilled user interface designers would pick up blue as the colour for unvisited links. Blue text is slightly harder to read than, for example, black or red (assuming white backgrounds) because the human eye has fewer receptors for blue wavelengths. Users have grown accustomed to blue being the link colour, so they have zero delay in figuring out what it is.

If we were designing the Web today, few skilled user interface designers would pick up blue as the colour for unvisited links.

Blue text is slightly harder to read than, for example, black or red (assuming white backgrounds) because the human eye has fewer receptors for blue wavelengths.

Users have grown accustomed to blue being the link colour, so they have zero delay in figuring out what it is.

Outbound links Some web sites avoid links to external sites. This contradicts the basic nature of the Web: users are in control of their own destiny. Some sites provide warning clues that you’re about to leave the site. This is not recommended. It is the web designer’s duty to give users the best links to the most valuable destinations. If users feel that they get good results out of going to your site, they will return again and again. The links turn into content. It might be hard to track down useful information on the Internet that users are going to love you for your links.

Some web sites avoid links to external sites.

This contradicts the basic nature of the Web: users are in control of their own destiny.

Some sites provide warning clues that you’re about to leave the site. This is not recommended.

It is the web designer’s duty to give users the best links to the most valuable destinations.

If users feel that they get good results out of going to your site, they will return again and again. The links turn into content.

It might be hard to track down useful information on the Internet that users are going to love you for your links.

Opening new windows Opening up new browser windows is like the vacuum cleaner sales person who starts a visit by emptying an ashtray on the customer’s carpet. In most cases, if we want a new window, we’ll open it ourselves. Some designers open new browser windows on the theory that it keeps users on their site. The strategy is self-defeating since it disables the “Back” button.

Opening up new browser windows is like the vacuum cleaner sales person who starts a visit by emptying an ashtray on the customer’s carpet.

In most cases, if we want a new window, we’ll open it ourselves.

Some designers open new browser windows on the theory that it keeps users on their site.

The strategy is self-defeating since it disables the “Back” button.

Incoming links Incoming links are one of valuable means of generating traffic for you site. When others link to you, they provide you with free publicity. You should do your best to support incoming links. Some sites even have formal affiliates programs that actually pay for inbound links. The simplest way of enabling incoming links is to have permanent URLs for each of your pages. Also you can have great content or focus on specific issues.

Incoming links are one of valuable means of generating traffic for you site.

When others link to you, they provide you with free publicity.

You should do your best to support incoming links.

Some sites even have formal affiliates programs that actually pay for inbound links.

The simplest way of enabling incoming links is to have permanent URLs for each of your pages.

Also you can have great content or focus on specific issues.

Linking to subscription & registrations Incoming links might be lost as a source of new users if you require subscriptions or user registration. Authors will prefer not to link to a page if their users will have to sign up before being allowed in to read the page. If you have a subscription anyway, try to have free pages as well representing your service, etc. Incoming links should always be directed to these free pages.

Incoming links might be lost as a source of new users if you require subscriptions or user registration.

Authors will prefer not to link to a page if their users will have to sign up before being allowed in to read the page.

If you have a subscription anyway, try to have free pages as well representing your service, etc.

Incoming links should always be directed to these free pages.

Advertising links Advertising is a special case of incoming links because you control the links yourself if you pay for the advertisement. Recommendation: links to be directed to payoff pages that follow up on the message in your advertisement instead of linking directly to your homepage. Research has found that 20-30% of web users who click on a banner advertisement and connected to the homepage of the company hit the “Back” button immediately.

Advertising is a special case of incoming links because you control the links yourself if you pay for the advertisement.

Recommendation: links to be directed to payoff pages that follow up on the message in your advertisement instead of linking directly to your homepage.

Research has found that 20-30% of web users who click on a banner advertisement and connected to the homepage of the company hit the “Back” button immediately.

Advertising links (continued) Some webmasters link the advertisements to the homepages because they want potential users to explore their site. Too many advertisements simply scream “Look at me!” with annoying animations, and yet they don’t provide any link-following motivation beyond the continual command “Click Here”.

Some webmasters link the advertisements to the homepages because they want potential users to explore their site.

Too many advertisements simply scream “Look at me!” with annoying animations, and yet they don’t provide any link-following motivation beyond the continual command “Click Here”.

Conclusion Simplicity should be the goal of page design. Remember: u sers are rarely on your site to enjoy the design ; instead, they prefer to focus on the content. Your design should work across a wide range of platforms and that pages can be accessed by people who use old technology. Make sure that your design works on small monitors and has acceptable response times when use a modem.

Simplicity should be the goal of page design.

Remember: u sers are rarely on your site to enjoy the design ; instead, they prefer to focus on the content.

Your design should work across a wide range of platforms and that pages can be accessed by people who use old technology.

Make sure that your design works on small monitors and has acceptable response times when use a modem.

Exercise Look at some web pages and analyse their usability. Select pages from different purposes web sites (commercial, corporate, education, entertainment, etc.) What usability features can you notice there? What you do and don’t like at those sites from usability point of view?

Look at some web pages and analyse their usability.

Select pages from different purposes web sites (commercial, corporate, education, entertainment, etc.)

What usability features can you notice there?

What you do and don’t like at those sites from usability point of view?