Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
- 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