Web Usability Site Design


Published on


Published in: Education

Web Usability Site Design

  1. 2. Site design <ul><li>Page design sometimes gets the most attention. </li></ul><ul><li>With current web browsers, you see only one page at a time. </li></ul><ul><li>The site is never explicitly represented on the screen. </li></ul><ul><li>From usability perspective, site design is more challenging and usually also more important than page design. </li></ul>
  2. 3. General guidelines <ul><li>“ Under construction” sings (construction worker digging away). These still could be found on the Web. </li></ul><ul><li>Don’t tell users what you don’t have! That’s only frustrating. </li></ul><ul><li>Don’t release a partially finished website. </li></ul><ul><li>Although, it is acceptable to have a small article talking about future plans or upcoming attractions. </li></ul><ul><li>The main entry to the site should focus on what a user can do here and now! </li></ul>
  3. 4. Site usability <ul><li>Once users arrive at a page, they can usually figure out what to do there, if only they would take a little time. </li></ul><ul><li>Web usability suffers dramatically as soon as we take users off the home page and start them navigating or problem solving. </li></ul><ul><li>Site design must be aimed at simplicity with a very clear information architecture and matching navigation tools. </li></ul>
  4. 5. Homepage <ul><li>The homepage should be designed differently from the remaining pages, but they should share the same style. </li></ul><ul><li>Homepage should not have “Home” button, should typically have a larger logo and a more visible placement of company name or site name. </li></ul><ul><li>The main goals of a homepage are to answer the questions: “Where am I?” and “What does this site do?” </li></ul><ul><li>The answers to the questions should not be in the form of the scaring mission statements. </li></ul>
  5. 6. Homepage (continued) <ul><li>It should be obvious from the design what purpose the site would serve for a first-time user. </li></ul><ul><li>Homepage should also serve as the entry point to the site’s navigation scheme. </li></ul><ul><li>For example, people visiting a travel site will often want to make an airline reservation. </li></ul><ul><li>Mostly people come to your site in order to accomplish something specific. </li></ul><ul><li>Only rarely they are interested in simply checking out what might be happening in your company. </li></ul>
  6. 7. Homepage (continued) <ul><li>The news area should be relatively restrained and leave a large part of the page available for navigation (the exception being the news sites). </li></ul><ul><li>Most homepages need a visible search feature because many users are search-dominant and don’t want to bother navigating to their destination link-by-link. </li></ul><ul><li>In summary, homepage should offer 3 features: </li></ul><ul><ul><li>Directory of the site’s main content area (navigation) </li></ul></ul><ul><ul><li>Summary of the most important news or promotions </li></ul></ul><ul><ul><li>Search feature </li></ul></ul>
  7. 8. Page width <ul><li>Users have varying monitor sizes set to a variety of resolutions, and windows are not always maximized. </li></ul><ul><li>Optimize Web pages for 1024x768 , but use a liquid layout that stretches well for any resolution, from 800x600 to 1280x1024 . </li></ul><ul><li>Currently, about 60% of all monitors are set at 1024x768 pixels. Only about 17% use 800x600 . </li></ul><ul><li>Your page should look and work the best at the most common size. </li></ul><ul><li>The three main criteria in optimizing a page layout for a certain screen size are: initial visibility, readability, and aesthetics. </li></ul>
  8. 9. Homepages and interior pages <ul><li>The name of the company or the site is the most important design element on the homepage. </li></ul><ul><li>It should not necessarily be biggest design element. </li></ul><ul><li>Usually it is in the left-upper corner. </li></ul><ul><li>Site name is to be repeated on all interior pages. </li></ul><ul><li>Interior pages should focus more on specific content and less on providing a general welcome statement or an overview for the homepage. </li></ul>
  9. 10. Homepages and interior pages (continued) <ul><li>A link to the homepage should be consistent from each interior page (e.g., in the left-upper corner), which is also the preferred placement of the site name and logo. </li></ul><ul><li>On all interior pages, the logo should be clickable and linked to the homepage. </li></ul><ul><li>Nowadays, users are more and more accustomed to the use of the logo as a link to the homepage. </li></ul>
  10. 11. Deep linking <ul><li>It is mistaken strategy to force users to enter the site on the homepage. </li></ul><ul><li>Deep linking enables other sites to point users to the exact spot on your site that is of interest to those users. </li></ul><ul><li>The homepage can never be as specific or helpful as the actual page that describes the product or answers the question. </li></ul><ul><li>You should encourage deep links, and affiliates programs in e-commerce is one mean to implement this principle. </li></ul>
  11. 12. Affiliates programs <ul><li>An affiliates program is a way to pay for incoming traffic. If Site A links to Site B, then B will pay a small referral fee for those users who follow the link. </li></ul><ul><li>Most current affiliates programs pay commissions only for users who end up buying something on the destination site. </li></ul><ul><li>In principle it would be possible to have a layered commission structure and pay more for users who actually purchase and less for users who simply visit bit don’t buy anything. </li></ul>
  12. 13. Metaphor <ul><li>The greatest weakness of metaphors is that they seem clever to designers, but users do not understand them. </li></ul><ul><li>It is usually better to be explain something by text than to use a metaphor which is not totally clear to everyone. </li></ul><ul><li>Metaphor could be useful when it: </li></ul><ul><ul><li>provides a unifying framework for the design; </li></ul></ul><ul><ul><li>facilitates learning by allowing users to draw upon the knowledge they already have. </li></ul></ul>
  13. 14. “ Shopping cart” metaphor <ul><li>“ Shopping cart” is a good example of established well-known metaphor in e-commerce. </li></ul><ul><li>You can place products in the shopping cart where they are kept ready for purchase but have not been bought. </li></ul><ul><li>Weakness of the “shopping cart”: often users do not know how to remove products from the cart. </li></ul><ul><li>One site selling sport products tried to use “shopping sled”. Then, 50% of users did not understand the concept; 50% said they figured out what it meant because it was in the same location as a shopping cart would be. </li></ul><ul><li>Don’t use vague concepts if well-known ones exist! </li></ul>
  14. 15. Navigation <ul><li>The Web is a navigational system. The basic user interaction is to click on hypertext links. </li></ul><ul><li>It is necessary to provide users with navigational support. </li></ul><ul><li>Navigation interfaces need to help users answer the fundamental questions of navigation: </li></ul><ul><ul><li>Where am I? </li></ul></ul><ul><ul><li>Where have I been? </li></ul></ul><ul><ul><li>Where can I go? </li></ul></ul>
  15. 16. Where am I? <ul><li>This is the most important navigational question. </li></ul><ul><li>Users will never have a chance to understand the site’s structure if they don’t understand where they are. </li></ul><ul><li>The user’s location needs to be shown at two different levels: </li></ul><ul><ul><li>relative to the Web as a whole; </li></ul></ul><ul><ul><li>relative to the site’s structure. </li></ul></ul>
  16. 17. Where am I? (continued) <ul><li>You need to identify your site on all of your pages because they form a subset of the Web. </li></ul><ul><li>Users will not know what site they are one unless you tell them. </li></ul><ul><li>Users usually are not happy when a site uses navigation interfaces that are drastically different from others. </li></ul><ul><li>Navigation rule: include your logo on every page. </li></ul><ul><li>It should have a consistent placement and be made into a hypertext link to the homepage. </li></ul>
  17. 18. Where have I been? <ul><li>A site doesn’t know where have you been without resorting to cookies or other user-tracking measures. </li></ul><ul><li>Navigational mechanisms in browsers: </li></ul><ul><ul><li>“ Back” button; </li></ul></ul><ul><ul><li>history list; </li></ul></ul><ul><ul><li>hypertext links shown in different colour. </li></ul></ul><ul><li>Knowing what links lead to visited pages is useful: </li></ul><ul><ul><li>1) it helps users learn the structure of the site, and </li></ul></ul><ul><ul><li>2) it prevents them from wasting time going to the same page many times. </li></ul></ul>
  18. 19. Where can I go? <ul><li>The question is answered by the visible navigational options and any other links on the page. </li></ul><ul><li>A good site structure is a major benefit in helping users answer this question. </li></ul><ul><li>Represent links as underlined text, keeping the standard link colours. </li></ul><ul><li>Three types of hypertext links that can be used: </li></ul><ul><ul><li>embedded links </li></ul></ul><ul><ul><li>structural links </li></ul></ul><ul><ul><li>associative links </li></ul></ul>
  19. 20. Types of links <ul><li>Embedded links are the traditional underlined text that “more stuff” is available about some topic that is discussed in the body text. </li></ul><ul><li>Structural links are links that systematically point to other levels of the site structure. It is important to have the same structural links on all pages. </li></ul><ul><li>Associative links are used to give users “see also” hints about pages that may be of interest to them if they are similar to the current page. </li></ul>
  20. 21. Site structure <ul><li>Navigation visualizes the user’s current location relative to the structure of the underlying information. </li></ul><ul><li>If the information is a mess, then no navigation design can rescue it. Poor information architecture will always lead to poor usability. </li></ul><ul><li>The two most important rules about site structure are: </li></ul><ul><ul><li>to have one </li></ul></ul><ul><ul><li>to make it reflect the user’s view of the site, info or services. </li></ul></ul><ul><li>Unfortunately, many sites evolve without any planned structure and end up in total chaos as a collection of random directories. </li></ul>
  21. 22. Site structure (continued) <ul><li>Site structure should not mirror the organizational structure instead of reflecting user’s view. Users should not care how your company is organized. </li></ul><ul><li>Distributing responsibility for the site to divisions and departments results in an internally centred site rather than a customer-focused site. </li></ul><ul><li>The site structure should be determined by the task users want to perform on your site , even if that means having a single page for info from two very different departments. </li></ul>
  22. 23. Site structure (continued) <ul><li>A typical example of poorly managed website is when the homepage has a button for each of the senior vice presidents in the company. </li></ul><ul><li>A corporate site may be divided into high-level categories such as product information, employment information, and information for investors. </li></ul><ul><li>Then, the product information might again be divided into different product families, e.g., www.sony.com </li></ul>
  23. 24. Navigation on the site <ul><li>One common design is to list all the top levels of the site, often in a column on the left. </li></ul><ul><li>Example ? </li></ul><ul><li>Benefit: users are constantly reminded of the full scope of services available on the site. </li></ul><ul><li>This is particularly useful for users who go directly to a page deep within the site. </li></ul><ul><li>Pitfall: up to 20% of valuable screen space is always dedicated to the same information, all of which can be accessed from the homepage at the cost of a single additional click. </li></ul>
  24. 25. Breadcrumb navigation <ul><li>Breadcrumb navigation is more preferred nowadays. </li></ul><ul><li>It shows a hierarchical path from the homepage down through all the levels to the current page. </li></ul><ul><li>Examples: www.useit.com , ? </li></ul><ul><li>Benefits: 1) extremely simple and taking up minimal space on the page; 2) it helps users to quickly move away from the page. </li></ul><ul><li>Potential pitfall: useful only for hierarchical information architectures. </li></ul>
  25. 26. Navigation on the site (continued) <ul><li>Navigation could be designed also for the higher and lower levels of the site at the same time. </li></ul><ul><li>Top-level options are shown across the top of the page usually. </li></ul><ul><li>Low-level options are shown at the left side of the page and include the links to all the content at the level of the current page, including “see also” materials. </li></ul><ul><li>This type of design might be necessary for very large sites (including about 10,000 pages). </li></ul><ul><li>Example: www.edu.tokem.fi </li></ul>
  26. 27. The user controls navigation <ul><li>In UI, the designer can control where the user can go. You can gray out menu options or to use some modal dialog box. </li></ul><ul><li>On the Web, the user controls his or her navigation. Users can take paths that were never intended by the designer. </li></ul><ul><li>Users also control their own bookmark menu and can use it to create a customized interface to a site. </li></ul><ul><li>Web designers need to accommodate and support user-controlled navigation. </li></ul><ul><li>Sometimes you can force users to go through predefined paths and prevent them from linking to certain pages, but users are not happy about such sites. </li></ul>
  27. 28. The user controls navigation (continued) <ul><li>It is better to design for freedom of movement and flexible navigation. </li></ul><ul><li>On the Web, users move between sites at a rapid pace, and the borders between pages are fluid. </li></ul><ul><li>Users feel that they are using the Web as a whole rather than any specific site. </li></ul><ul><li>Users don’t want to read manuals how to use individual sites, but they demand the ability to use a site on the base of their prior experience. </li></ul><ul><li>Users are going to move between sites, and we have to make it easy for them to use each new site as they go. </li></ul>
  28. 29. Comparison tables <ul><li>Users always request easy ways of comparing products or other items discussed on a site. </li></ul><ul><li>As long as information is restricted to individual pages, it is hard for users to form an overview of the space and to understand where to go. </li></ul><ul><li>A comparison table is a nice way to reduce the amount of navigation and allow users to go straight to the one or two products they are really interested in. </li></ul><ul><li>Example: www.gigantti.fi, www.sony.com, www.toshiba.com </li></ul>
  29. 30. Sitemaps <ul><li>All users say they want sitemaps. But many current sitemaps do not seem to help users much. </li></ul><ul><li>One feature could be added there: “you are here” indicator. </li></ul><ul><li>Many sites design their sitemaps as a simple list of all their stuff. </li></ul><ul><li>A better solution would be a dynamic sitemap indicating the page from which it was accessed and highlighting information of interest to specific user. </li></ul><ul><li>Example: www.metso.com </li></ul>
  30. 31. Reducing navigational mess <ul><li>Aggregation . Showing a single unit that represents a collection of smaller ones. </li></ul><ul><li>Summarization . Representing large amount of data by a smaller amount (the use of smaller images, the use of abstract to represent documents). </li></ul><ul><li>Filtering . For example, only show stuff that other people have found to be valuable ( www.amazon.com ). </li></ul><ul><li>Truncation . Cut off everything except the first initial parts of the info and let users click “More…” link for the rest. </li></ul><ul><li>Example-based representations . Instead of showing everything, show some representative examples and say something like “100 more objects”. </li></ul>
  31. 32. Subsites <ul><li>Subsite is a collection of web pages within a larger site having a common style and navigation. </li></ul><ul><li>It a way of handling the complexity of large websites with thousands of pages. </li></ul><ul><li>There should be a single page serving as a homepage for the subsite. </li></ul><ul><li>Each of the pages within the subsite should have a link to the subsite homepage and the homepage of the entire site. </li></ul><ul><li>Example: www.toshiba.com </li></ul>
  32. 33. Search capabilities <ul><li>About 50% of users are search-dominant , about 20% are link-dominant , and the rest of users exhibit mixed behavior . </li></ul><ul><li>Search should be easily available from every single page on the site. </li></ul><ul><li>Advanced search is a good choice in the case of the search space including thousands of pages. </li></ul><ul><li>Examples: www.metso.com , www.bn.com </li></ul>
  33. 34. Searching the Web from the site <ul><li>For unknown reasons, many websites offer a search-engine feature allowing users to chose between searching the current site and the Web. </li></ul><ul><li>This option has very little utility. </li></ul><ul><li>People perfectly know where to find a web-wide search engines; these sites are the most used on the Web. </li></ul><ul><li>In most cases, there is no need to clutter up your interface with this option. </li></ul>
  34. 35. References <ul><li>Chapter 4 from Nielsen, J., 2000, Designing Web Usability: The Practice of Simplicity, New Riders Publishing. </li></ul><ul><li>Nielsen, J. and Loranger, H., 2006, Prioritizing Web Usability, New Riders Press. </li></ul><ul><li>www.useit.com </li></ul>
  35. 36. Exercise <ul><li>Select one web-site and evaluate its usability. </li></ul><ul><li>www.tokem.fi </li></ul><ul><li>www.aa.com </li></ul><ul><li>www.united.com </li></ul><ul><li>www.csmonitor.com </li></ul><ul><li>www.jaguar.com </li></ul>