Download Usability Part 3 (WORD)

- Usability: Ch 3
Usability: Chapter 3
Miscellaneous Tips
Screen Real Estate
When designing webpages you must think carefully of how you present your
information in the limited space you have available to you (i.e. the size of the browser
window).
Most webpages contain several categories of information.
The most common of these are:
Content
Commercial Advertising
Self Advertising
Navigation
(Whitespace, i.e. no information)
We can divide a page into these different types and measure their proportion to each
other. This should gives us a good indication of how well the page was designed. For
example, consider the page below.
1 of 34
- Usability: Ch 3
We can show how much space is taken up by the different categories as follow:
Navigation
2 of 34
- Usability: Ch 3
Self-Advertising
Content
3 of 34
- Usability: Ch 3
In that example there was very little whitespace and no commercial advertising. In the
page below there is no content at all.
When you design a page you must be aware that the page will be viewed in browser
windows of many different sizes. You can make assumptions as to the maximum and
minimum sizes (based on common monitor sizes) but should try and design a page so
that it will look good no matter what size the viewers window is (monitor sizes, in
combination with Operating Systems, used to restrict window sizes to 640 X 480).
Now 800 X 600 would be the minimum size you would need to design for and 1024 X
768 an average. If you intend your page to seen for years to come without
modification, then you should assume average monitor sizes will become larger.
Remember to take the viewable area into account when laying out your content, not
just the overall page layout. The following diagrams show the entire RTE page. The
second diagram shows just the content, the third shows the area likely to be seen by a
viewer of the page.
4 of 34
- Usability: Ch 3
5 of 34
- Usability: Ch 3
6 of 34
- Usability: Ch 3
The ratio of content to the rest of the page doesn't seem as bad in this case. However,
the user only ever sees one browser window of it at a time.
7 of 34
- Usability: Ch 3
You must remember is that if you have a large web page the user can only see a
small portion at a time. In the case of the RTE news page above, the area that will be
seen first is highlighted in the previous diagram. As a designer you should ensure that
all the important information the user will need appears in that area. This is the
equivalent of placing important news in the top half of a broadsheet newspaper. This
is so a folded newspaper in shop will be showing the important news. Therefore,
important news should always go “above the fold”. Keep in mind 10% of users don’t
scroll down beyond what they first see when they load a page.
The news page above was also designed with a particular window width in mind. If
you exceed that width then the page content does not adapt, leaving large amounts of
white space. If the window is too narrow, large parts of the page cannot be seen.
Wide Window
8 of 34
- Usability: Ch 3
Narrow Window
You must ensure that your page is viewable in the minimum window size you think
your users will be using (the narrow window size above is unlikely to be used, and was
included for illustration purposes only).
The webpage in the following example will expand to any width. Unfortunately there is
so much wrapable navigation content at the top of the page (a usability disaster - too
much information for a user to easily absorb) that it pushes the content further down
(almost out of the window area) when you make the window narrower. Similarly, the 3
columns begin to overlap (unlike the previous example where the leftmost column
disappeared).
9 of 34
- Usability: Ch 3
Wide Window
Narrow Window
This is the same page as above but in a smaller window (not to the same scale as the
previous screen shot). Again, note how the large number of links at the top push the
contents down, and how the middle column is overlapping the rightmost one.
10 of 34
- Usability: Ch 3
Below we can compare the amount of content visible in both browser widths.
The difference in the amounts of visible content is not solely due to the window size. In
this case the design of the page gives preference to navigation elements at the
expense of the content.
11 of 34
- Usability: Ch 3
To summarise:
• Try to design liquid pages (pages that can adapt to any width - i.e. when
specifying widths, use percentages rather than pixel measurements).
• In pages that use columns the rightmost column should contain the least
important information since it the most likely to be occluded in narrow
windows.
• The most important information (whether content, advertising or navigation)
should be able to appear in a 800 X 600 area at the top left-hand side of the
page (i.e. above the fold).
File Sizes and Response Times
Studies show that the average user will leave a site if they don't feel they are getting a
response to their actions. Acceptable responses times were found to be:
0.1 seconds
User feels there is instantaneous reaction to their actions
1 second Beyond this limit the user's flow of thought is interrupted and the
user loses the feeling of operating directly on the
data. In a normal HCI you would usually give some
kind of feedback to the user alerting them to a delay
for response times greater than this.
10 seconds
Beyond this limit the user doesn’t feel like they are
interacting and will probably leave the site.
It is in any web publishers interest to reduce response times as much as possible.
12 of 34
- Usability: Ch 3
Response times are affected by several things
Download time for contents of page
Size of contents
Server performance
Servers connection to internet
Rendering speed of client
Clients connection to internet
Internet (connection speeds, congestion, etc.)
Many of these factors are outside the scope of webpage design. However, you should
keep in mind the following statistics. The table below shows the upper file size limits
in order to achieve a 1 and 10 second response time. Keep in mind that these are
rough estimates.
Response time of ...
Connection
1 Second
10 Seconds
Modem
2 KB
34 KB
ISDN
8 KB
150 KB
T1
100 KB
2 MB
13 of 34
- Usability: Ch 3
Size Warnings
If a page on your site is likely to be viewed by people using a modem, then any page
or file over 50KB should have warnings listed on their links. These warnings will make
people more tolerant of a wait of over 10 seconds.
E.g.
go to page 2 [warning: large file size]
If your clients are more likely to have faster connections then only pages of 200KB or
above should require warnings.
Page Sizes
Various opinion surveys and site statistics point to the same fact. Small files sizes are
better.
Note: the size of a webpage for a user (with graphics turned on) includes not
only the HTML but each graphic as well.
•
In opinion surveys most people state a preference for quick loading
pages and a general lack of interest in flashy graphics that cause delays
in downloading.
•
In a comparison of the homepages of major websites, the more popular
sites happen to have the quickest download time (i.e. the smallest
webpage size).
14 of 34
- Usability: Ch 3
However, there are some exceptions to these file size constraints.
•
In an Intranet, network access is usually faster and therefore pages
download more quickly.
•
In sites where the purpose of the site is flashy graphics (entertainment
sites, etc.) viewers will tolerate longer waits.
•
In cases where there will be a high interest in a particular web page (it
may contain high quality photographs or other multimedia, large
amounts of important text, etc.) users may be willing to wait the extra
time needed to downloaded.
Text Content
Research indicates that people read text 25% slower on the web than they do on
paper, and generally speaking people do not like reading online (They are more likely
to print out web pages if they want to read them). People like to feel that they are
interacting with the web. That is what makes it different from print publications. And as
a result they don't like sitting still and reading text.
Another aspect of the nature of the web affecting people's reading habits is that they
are usually searching for something when they browse the web. It is very likely that
when they reach your page they still don't know if it's exactly what they are looking for.
Therefore, people usually scan quickly through a webpage's contents checking
whether or not it is of use to them.
Also remember that your webpage is competing with every other page on the web, as
well as with all the emails and reports a user has to read during the day. For these
reasons you have make your content concise and eye catching. Your design should
direct the user to the information that is of most importance first, and so on.
15 of 34
- Usability: Ch 3
Some rules of thumb:
When writing content you should use the inverted pyramid approach, the
first paragraph should indicate the entire breadth of the contents of the text,
As you go further down the text it becomes more specific. Readers should be
made aware of the contents of your text as soon as possible.
Always make sure that your content is grammatically correct. Check spelling
also. Grammatical and spelling mistakes give a bad impression of a site
and make it look unprofessional. Make sure you proof read any content that
you provide since computerised spell checking cannot catch many types of
error (E.g. "Their going to arrive soon" contains a misspelling - "Their" should
be "They're" - but won't be caught by a spell checker since each individual
word will be found in its dictionary).
In general you should write 50% of the text you would normally write for a
paper publication.
Write for people who will scan through the content, rather than expecting
people to read every word. (Studies show that people tend to read only the
first sentence of each paragraph.) This can be achieved by the liberal use of
the following:
• headlines
• paragraphs
• bullets
• highlighting
• spacing/whitespace
Split up long sections of text and use links to direct the reader to the various
parts.
This example from the Guardian website shows how the text can be broken up into
small paragraphs, some of which contain only one sentence.
16 of 34
- Usability: Ch 3
Legibility
Not only should your content be laid out in such a way that it is easier to read online, it
should also be visibly easy to read.
Avoid All Caps
All caps text should be avoided because not only is it harder to read, it can
also give a hostile impression (it is considered the equivalent of shouting).
Keep Text Still (i.e. Motionless)
Moving text is associated by most users with advertising and is usually
ignored by them. Moving text is also harder to read.
17 of 34
- Usability: Ch 3
High Contrast
There should be a high contrast between text and the background it appears
on. The highest contrast (and easiest to read) would be black text on a white
background or white text on a black background. Tests suggest
that the former is the easiest to read. Pink on green is one of the hardest to
read, and impossible for those with red-green colour blindness.
Be careful when using graphics in the background as they can be too busy
and render any text illegible.
Keep Text Left-Justified
Left justified text is easier to read than right-justified or centred text.
Keep Text Large
With larger resolution monitors, the text on web pages appears smaller. For
this reason you should try to keep you text reasonably big. You should also
keep visually impaired users in mind.
Don't specify absolute font sizes. Use relative ones.
Remember that text appears smaller on Macintoshes because
they are rendered at 72 dpi (windows use 96 dpi)
Serif Fonts at 9pts and below can't be seen clearly.
You should never design pages to be pixel accurate since Windows and Macintosh
machines will render fonts and graphics at different sizes on screen (They will be
smaller on a Macintosh )
18 of 34
- Usability: Ch 3
Attitude
Users normally prefer a casual & informal tone in the material they read on the web.
They can also appreciate humour, but rarely angry or opinionated diatribes. Similarly,
marketing blurbs rarely impress. If users browse a commercial site, it is normally for
hard facts (specifications of a product, contact address, etc.). Despite its
commercialisation, the internet is still perceived as something "cool" and (slightly)
underground. If your tone becomes too officious, you will stand out (in a negative way)
from the rest of the content on the web.
First Impressions
The homepage of your website must grab the attention of your visitors. If you want to
keep people browsing your site, you must make a good impression straight away.
Once people go to your site you must show them information as quickly as possible to
indicate the purpose of your site. Since you have no way of knowing the connection
speed of your viewers, you should display information to the user before every graphic
is downloaded. (i.e. a user on a modem might be waiting several seconds before all
the graphics are downloaded. If in that time there is no information visible to them they
may leave your site).
This can be achieved by the following:
Use ALT attributes in your IMG tags
Complex tables may take time to render. Simplifying these tables (i.e. using
several tables instead of one complicated one) may speed up the display of
the page
Use WIDTH and HEIGHT attributes in your IMG tags so that the browser can
layout the page immediately instead of waiting until all the graphics are
downloaded.
Optimise all your graphics for the web.
Ensure that all the information you want to present to the user appears
"above the fold".
19 of 34
- Usability: Ch 3
Avoid the Latest Technology
Some sites use the latest plug-ins and other technologies in order to make their
webpages look as up-to-date as possible in order to impress users. Unfortunately this
has the effect of scaring away many potential viewers/customers whose browsers
don't support this technology. This is because most ordinary internet users don’t
upgrade at the frequency of content providers. The reasons for this include:
• Lack of technical knowledge
• Mistrust of new technologies
• Lack of interest in new technologies
As a rule of thumb you should wait a year before integrating new technologies to your
site, and if you do, you should make sure that any information that is presented with
that technology can be accessed elsewhere without it. There are exceptions to this
rule such as cases where you want to show off your prowess in web technologies, or if
you are designing an entertainment site (where people are more tolerant of gimmicks).
Navigation
Whenever you arrive at a page, your navigation system should indicate the following
• Where am I?
(Logos, Page titles, etc.)
• Where have I been?
(Bread Crumbs, Followed Links, etc.)
• Where can I go?
(Links, Menus, etc.)
20 of 34
- Usability: Ch 3
Browser Navigation Controls
Remember that your navigation system should complement the browser's navigation
controls.
The browser controls are the one constant feature of nearly every single webpage. It
is the navigation system the user is most familiar with, particularly the Back button.
The following page removes the browser navigation system from the browser window
(with Javascript). They then provide their own equivalent. This means the user has to
search each page for the back feature. (Note: the browser controls were removed
from all the other screen shots to better show the contents. In this case it is the
website itself that removed them).
21 of 34
- Usability: Ch 3
On the page above the following icon will bring you back to the previous page (in the
hierarchy, not the browser history)
However on the page below , a different navigation element is used.
I.e. you must use the text "Back" in the lower left-hand corner of the table.
22 of 34
- Usability: Ch 3
Other pages on the site have the back link in different locations again. This needlessly
confuses the user. They may not even notice the element. If the browser controls
were left in place this would not be a problem. Remember, every website presents a
new navigation system to a user. The only constant navigation controls the user will
have are their browser controls. Leaving them on your pages makes your site easier
to navigate. If you do remove them you should make your alternative system as clear
as possible.
Links
Links can usually fall into one of three categories:
Structural Links:
These are used to implement the structure of the site
(menus, bread crumbs, link to homepages, etc.)
Associative Links:
These are the normal link that occur in the content
which point to pages of relevance
"See Also" Links:
These are link are used to point to pages that may
be of relevance to the user (unlike Associative links
which would be). I.e. if you are on the wrong page
one of these links may point the right one.
Text
You should choose the text you use as for a link carefully so that it is clear what it is
you are linking to. Viewers will not appreciate vague links which bring them to pages
they didn't want to see.
Consistency
Make sure your links are consistent. The page extract below shows the Quick
Converter part of the Oanda.com homepage. Note that the most important link
("convert") is lost in the design. It is in low contrast with the background. It is also
smaller than the other elements, implying it is not as important. The text chosen is also
unfortunate as there is nothing to convert (i.e. clicking on "convert" Does not convert
anything. Instead the link brings you to another page where you must type in the
currency amounts you wish to convert).
23 of 34
- Usability: Ch 3
To make matters worse, this same feature on internal pages looks different (although
a slight improvement in design, the new label "go" may confuse users. Does it do
something different to "convert"? In this case it doesn't)
You should try to be consistent in your labelling, especially for links.
Make Links Easy to Read
A common technique used by authors is to add the text "click here" to indicate there
is more information on a certain page.
If you want to see more information, click here
24 of 34
- Usability: Ch 3
However this is wasteful of a usability opportunity. The underlining of the word "here"
wastes an important attention grabbing feature of your page: underlined/coloured text.
The text "here" is meaningless in this context but you are highlighting it on your page.
Instead you could have made the description of the target page the link, and as a
result highlights that description rather than than the word "here".
We also have more information
This second version will have a more immediate impact on users.
The text you use for your link should make it clear where the links goes to. (The more
unwanted pages the user views, the less likely they are to stay with our site). The
example below - from a newspaper site - gives just enough information so that the
user can tell whether they want the page or not.
25 of 34
- Usability: Ch 3
Link Titles
Some browsers support the title attribute of the anchor (<A>) tag. This allows us to
provide extra text that can further describe a link. If your mouse hovers over the link,
this information is displayed (usually in a manner similar to tool tips).
<TITLE>Link Titles</TITLE>
<H1>John Smith</H1>
<A HREF = "http://somesite.com"
TITLE = "Go to Personal Page">More Info</a>
26 of 34
- Usability: Ch 3
Concise Links
Keep your links as short and as legible as possible so that it is immediately clear what
it links to. In the case of URLs there is no need for the full address. I.e. it is usual to
omit the "http://" part (but not in the href attribute)
Go to <A HREF = "http://www.cnn.com/">www.cnn.com</A>
Go to www.cnn.com
Remember to make links stand out. If you remove the underline from a link it should
stand out in some way from the other text (by colour, font, etc.)
Deep Linking
If linking to another site, link to the relevant page on that site and not the homepage
(or link to both). Don't assume users will know how to find that information.
Printing
Many people wish to print out webpages in order to read them. If you think your page
will not print well, you should provide an alternative version specifically meant for
printing (i.e. it will have less graphics, no navigation, etc. )
The following two screen shots show the same information. One is a regular webpage
(with global navigation elements), while the other is the printable version of that page
(with the global navigation elements removed). And while not obvious from the screen
shots, the regular version spreads the contents over 3 webpages, while the printable
version has the same contents on a single page.
27 of 34
- Usability: Ch 3
Regular Page
28 of 34
- Usability: Ch 3
Printable Page
Page Titles
Remember that a bookmarked page uses the title of the page in listings. Similarly the
Forward and Backward buttons on a browser use the title to indicate where it has
been. Histories also use these titles. For this reason the title should be different on
every page of your site. It can include the main site identity but should also contain a
identifying label for the particular page it is on.
29 of 34
- Usability: Ch 3
To better place your site in these lists, you should also:
Keep names short
Omit leading words such as a, an , the, etc.
Redundant Pages
As the web develops, many features that were thought essential at the time are now
unfashionable, or redundant.
Splash Pages
These are pages that usually contain one major navigational link that brings you to the
home page of the site. They serve no purpose and only delay a user going about their
business. Putting animated introductions to your site there delays them even further.
30 of 34
- Usability: Ch 3
Best Viewed with .....
Many sites are designed with the features of specific browsers in mind. These sites
usually list the browsers they were designed for on each page. Other sites will state
the resolution they were designed for. Others will list the technologies you will need for
their site. However, while they might seem to be useful information to provide for your
site visitors, they also act as a deterrent. Designing a site for one browser gives the
impression you don't want people who use any other. Large lists of the technologies
you use can intimidate novice users who may not even know if they have any of the
technologies listed. The purpose of a website is to encourage visitors, not scare them
off.
These types of messages should be avoided primarily because you should not have
designed your site for specific technologies/browsers in the first place.
Welcome Pages
These are pages (usually on academic sites) where a senior management figure
welcomes people to the site. These usually contain no information of any use to users
(normally just marketing speak and liberal doses of self-congratulation - neither of
which are appealing to an average user) and can easily be omitted since they are
rarely of interest to any one.
31 of 34
- Usability: Ch 3
"Under Construction" Page
In the early days of the web, people would use these pages as placeholders for pages
that had not yet been created. Web sites usually went online in this piecemeal fashion
but the Internet has since matured, as has its users. Advertising features that do not
exist is now frowned upon (as it would be in other types of business).
Another reason to avoid them is that there is a hostility toward them in the internet
community. They are considered one of the cardinal sins of web design.
In terms of navigation they are also undesirable. If a user follows a link they expect to
see the page they were looking for. If, instead, they see a "Page under Construction"
Page their patience with your site will be sorely tested. If a page is not yet a part of
your site, you have several options. The preferred option is not to include any link. If
you must indicate that the option will be available you can include the text/graphic of a
link, but without making it active. You could add some descriptive text such as
"coming soon" or "not yet implemented". However, these phrases have been misused
so badly on the internet they are meaningless (features on some sites have been
"coming soon" for several years). The important thing is that users are not sent off
looking for a page that does not exist.
32 of 34
- Usability: Ch 3
Common Mistakes
The most common mistakes people make when designing web pages can be
summarised as follows.
Treating a Site like a Web Brochure.
This ignores the potential of the web as an interactive communications tool.
Self Centred Design
Designing a website from the point of view of the provider tends to generate
consumer unfriendly sites. Websites should always be designed from the point
of view of the customer/consumer.
Ignoring Bandwidth Considerations
Many designers test their websites on high performance machines, and on high
bandwidth networks. This tends to result in very large file sizes which mean
very long download times on regular machines.
33 of 34
- Usability: Ch 3
Not Adapting your Content for the Web
Many designers take the text for their web sites from content prepared for other
sources (press-releases, books, brochures, etc.). However, people read
content on the web differently to way they read those other sources (people
tend to scan websites, therefore content should be designed in such as way as
grab their attention).
Ignoring your Site’s Relationship to the Rest the Web
Designers can forget that people browsing their site will probably be browsing
several other sites at the same time. For example, you need to indicate to the
user that they are on your site on every page. This is particularly important
since they may have entered your site on an internal page (due to a search
engine or a link on another site). You should also indicate where any given
page is in relation to the rest of the site.
H.O.M.E.
Jakob Nielsen summarised the elements of a good web page with H.O.M.E:
High Quality Content
Often Updated
Minimal download time
Ease of use
More information on the topics discussed in this chapter can be found in "Designing Web Usability" by Jakob
Nielsen (New Riders, 2000)
34 of 34