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
www: structure & navigation John Kelleher “First we thought the PC was a calculator. Then we found out how to turn numbers into letters with ASCII — and we thought it was a typewriter. Then we discovered graphics, and we thought it was a television. With the World Wide Web, we've realized it's a brochure.” Douglas Adams novelist, naturist, web entrepreneur 1 2 web fact #1 web users don’t read pages. They scan them Why? Usually in a hurry Know they don’t need to read everything Good at scanning 3 what designers build… 4 what users see… 5 web fact #2 we don’t make optimal choices. We satisfice Why not? Usually in a hurry Not much penalty for guessing wrong Weighing options may not improve our chances Guessing is more fun 6 web fact #3 We don’t figure out how things work. We muddle through. We proceed without clear understanding We persist with solutions we know to be suboptimal E.g. Yahoo search box E.g. AOL vs. Internet Why? We may not care or care enough to excel 7 web vs. conventional print print took centuries to mature web pages freestanding – major difference headers & footers significant provenance needs to be established navigation critical to exploration books designed for 2-page spread, web pages always single units users can roam to other sites gathering knowledge as they go 8 page structure Reading pattern is dictated by blocks of colour, animation, spacing. The navigation is the most important feature - but should occupy as little space as possible Place the most important information at the top - "above the fold" - viewable without scrolling down Use the "inverted pyramid" - start with the conclusion If you place any important information below the fold, some visitors may not see it and go to a different web site, rather than scrolling down. You need to entice visitors to scroll down, but the home page is less likely to achieve this - put longer content on interior pages. Once a visitor has clicked to further information, they are more likely to scroll. 9 page structure (contd.) vertically and horizontally align items on a page Visitors can read the text quicker important items should appear higher on the page so users can locate them quickly put items which are repeated across the web site, such as the logo, navigation and search box, in a consistent position on all pages. avoid orphan pages – build in context 10 page structure (contd.) ideally shouldn't scroll excessively - split content onto several pages if necessary don't specify a width Should work across range of window sizes Users hate horizontal scrolling If the design dictates a specific width - design to 780 pixels width only Most web users have screen resolutions of 800 pixels width or wider use CSS (though badly implemented by some browsers) 11 site structure 12 site structure 13 site structure 14 logos 15 screen size 640x480 16 screen size 800x600 17 screen size 1024x768 18 screen size 1280x 1024 19 screen size 640x480 800x600 1024x768 1280x1024 20 network download speeds Lots of different speeds out there Modems (28.8 kbps, 33.6 kbps, 56 kbps) DSL (384 kbps, 1.5 mbps, 8mbps) Cable Modems (1 to 27 mbps) Exponential uptake on broadband US 3 million had DSL in 1Q01 – now 16 million1 US 6 million had cable modems in 1Q01 – now 15 million2 However, Keep in mind fuzziness of statistics + Internet access at work and school + laptop modems 1 www.dslforum.org/pressroom.htm 2 www.cabledatacomnews.com/cmic 21 Total Broadband Top Countries By penetration of population Ranking Country Broadband Total Penetration by Population 1 South Korea 25.58 2 Hong Kong 22.94 3 Netherlands 21.90 4 Denmark 21.47 5 Switzerland 20.13 6 Canada 19.19 7 Taiwan 17.81 8 Belgium 17.58 9 Israel 16.47 10 Sweden 16.38 11 Japan 16.18 12 France 13.89 13 UK 13.71 14 USA 13.14 15 Australia 10.62 16 Spain 10.00 22 Source: http://www.dslforum.org/PressRoom/Q205DSLsubscribernumberspresentation.ppt homepage Put as much important content as close to the top of the hierarchy as possible. When creating a Web site that lends itself to a hierarchical style of organization (i.e., pyramid structure with most important information on the top), it is beneficial to "flatten" the hierarchy and to provide more information sooner. The more steps (or clicks) users must take to find the desired information, the greater the likelihood they will make a wrong choice. 23 homepage 24 homepage 25 writing for the web Omit needless words Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.1 William Strunk, Jr., and E.B. White, The Elements of Style (Allyn and Bacon, 1979) 26 writing for the web very different to writing for print Less is more – omit needless words Time critical1 Users scan ref. Poynter Institute study (2000)2 Harder to read from a computer screen than it is from paper Keep sentence structure as simple as possible Keep sentences short (15 or fewer words) Keep paragraphs short (5 sentences or less) Frequently highlight important words or phrases 27 writing for the web (contd.) Use bullet points or numbered lists where possible Keep page length short - avoid too much vertical scrolling Use links to highlight and take the user to further information Avoid using the <hr> (Horizontal Rule) tag (Insert > Horizontal Rule in Dreamweaver) to separate bodies of text Use plenty of headings, subheadings and white space instead It looks better and is easier to read The <hr> tag is also deprecated html Avoid centering text - it's harder to read Don't use all capitals - harder to read Use standard font sizes (can be resized by client) Keep content separate from style - use style sheets and include files 28 text scanning 29 text scanning 30 text scanning 31 line width 32 text pruning Site Survey The following questionnaire is designed to provide us with information that will help us improve the site and make it more relevant to your needs. Please select your answers from the drop-down menus and radio buttons below. The questionnaire should only take you 2-3 minutes to complete. At the bottom of this form you can choose to leave your name, address, and telephone number. If you leave your name and number, you may be contact in the future to participate in a survey to help us improve this site. If you have comments or concerns that require a response please contact Customer Service. 1. How many times have you visited this site? 33 text pruning (after) Site Survey Please help us improve the site by answering these questions. It should only take you 2-3 minutes to complete this survey. NOTE: If you have comments or concerns that require a response don’t use this form. Instead, please contact Customer Service. Before 103 words After 41 words 34 text - consistency 35 inverted pyramid Important facts and conclusions first Why? 1. It lets readers know what's coming, so that when they get to the details it fits into a big picture. 2. Recognizing the benefits first will help to sustain interest. 3. If the reader is extremely pressed for time, s/he may not get beyond the first few sentences. 36 navigation most important aspect of a web site problems of ‘webspace’ helps users find their way around No sense of scale ‘links’ visited colour change reflects ground covered No sense of direction No sense of location tells them where they are where they can go within the site provides a visual means for demonstrating the hierarchy of information to be found Good navigation often reflects good site structure 37 types of navigation navigation panel location indicator device (breadcrumbs) home button links html title site map search facility the 404 (and other error pages) graphics as navigation and/or links 38 navigation panel Set of links on left hand side or top area of page Best saved as a server side include Can be text links or graphics Should take up as little space as possible Keep in a consistent form across the web site Same place If a change of color indicates a different section of the web site - make sure there are other means of indicating the change (note color blindness issues) E.g. Amazon.co.uk 39 navigation – tabs are best 40 navigation – identifying choices 41 location indicator device (breadcrumbs) Should be added to every page other than the home page Near the top of the page Shows the visitor where the page belongs - where they are in relation to the rest of the web site Should be as concise as possible and follow the navigation structure of the site Often as a small section of the site map Each preceding item needs to be a link The last item should not a link as it is the current page and provides an visual indication of this E.g. www.useit.com 42 43 home button Not necessary on actual home page A home button / company logo (link to home page) at the very top left Should make sure there is a textual link to home on all pages for visitors who aren't familiar with the logo being a link The location indicator device (see LID) provides a textual link to the home page 44 links All textual hyper links should be underlined The visitor should not have to mouse over, or hover, on a link to realise it is a link - make it obvious Microsoft web site poor at this Provide plenty of textual links within the web site to allow the visitor to cross reference information Try to provide these in stacked lists of links, rather than "hidden" within the text Links within text can slow down reading flow, but this may be a good thing sometimes by highlighting particular words 45 links (contd.) Differentiate between internal links (links within the web site) and external links (links to other web sites) Within-page links (to #bookmarks) If you are linking within the web site, simply link the appropriate text If you are linking to an external web site, try to include the full web site address in the text sometimes confusing if user scrolls & has read material already make shorter pages to avoid Janus Twenty Avoid ‘wrapped’ links Investment Company of America Royce Premier 46 links (contd.) Don't make links open in a new window When linking to large files provide a KB size in brackets next to the link so visitors know how large the file is before downloading it Make sure visitors know when they have been to a link visitors can get confused and/or irritated by this destroys the back button - a common means of back tracking change the color from blue to red/purple, or a least make visited links a less saturated color than unvisited links use CSS with care Use link titles (IE 4.0 and higher) 47 links 48 links 49 links 50 links – beware CSS/dHTML 51 links not clear 52 html title In the HTML header Use frames with caution Keep it relevant to current page Shows in the top title bar of the browser Keep it useful for those who may bookmark your site See also the search engine section for how this affects listings 53 poor document title 54 site map A separate page which shows a site map The hierarchical structure of the site with links to all relevant pages Have a prominent link to the site map from every page 55 search facility Some users choose a search facility before using any other navigation feature Other users will use a search facility as a last resort Make sure your site has one Put the search box in a prominent position on every page Keep it as simple as possible Don't add extra choices for the user - can be confusing/time consuming Make sure you know/adjust the relevancy of results There are plenty of companies providing free service for smaller sites http://www.atomz.com is free for sites less than 500 pages Allows you to choose how relevant the page title, meta tags, body text etc are. 56 the 404 (and other error pages) Use your error pages effectively If you don't they will probably leave your web site Provide a custom error page for each type of error (404 page not found, 403 forbidden etc) Visitors know they are on your web site and the physical connection is intact Provide the same site wide navigation as on your other pages Utilise it for their benefit Provide a brief description of your web site, why they have got this error and include a site map so they can navigate to something useful quickly Custom error page creation… 57 how to create the custom error pages Create all the custom error pages you need for your site (see list below) Go to the main root directory of your web site (in the same place as your home page) Look for a file called .htaccess (it starts with the dot as though it is a long file extension) If you have the file, you need to edit it. If you don't have the file, create a new text document and save it as ".htaccess" (you need to include the dot) Add/edit the following line: ErrorDocument 404 /errors/error404.html The text needs to remain exactly as above For example, create a 404 error page and save in a folder called /errors/ as error404.html Error 404 Page Not Found is the most common Stay on one line A space on either side of the number 404 Case sensitive – the uppercase of the E and D in ErrorDocument Add any other errors for the pages you have created Save .htaccess Publish the .htaccess file to your root site directory (in the same place as your home page) Publish your custom error pages Test to see if it works on your web site by typing in an erroneous url List of errors Error Code Label 400 Bad Request 401 Authorization Required 403 Access Forbidden 404 File Not Found 500 Internal Server Error 58 why create a custom error page? Visitors get errors for various reasons It retains your web site branding Shows visitors they are still on the same web site Can be a useful navigation tool and help keep visitors on your web site e.g. Even if there are no broken links in your web site a visitor may misspell a url and get a page not found Error 404 In addition to the branding, include the main navigation links Include a brief message explaining the error Try to be helpful - suggest they check the link Don't use the word "error" - can scare off visitors Include a brief paragraph about your web site Include a search box Include a site map Provide an email link to your webmaster If a visitor gets none of the above - will probably leave your site 59 60 graphics as navigation and/or links Be careful when using graphic/images as links or navigation If the border="0" on the graphic tag, there may be no obvious way for the visitor to tell it is a link If they don't mouseover the graphic, they will not see the cursor change to a hand Try and provide textual links to the same information as well as the graphic If aesthetics are less important - keep the border="1" on graphics/images as links be kind to screen readers 61 “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. ” Tim Berners-Lee, W3C Director and inventor of the World Wide Web 62 accessibility Make sure your site is usable on the main browser flavors and versions Make sure it's usable without having to download a plug-in first Use style sheets to separate style and content Users can enforce personal style sheets Accessibility increasingly mandated Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) amendments to Section 508 of the Rehabilitation Act of 1973 (US) 63 accessibility (contd.) Use the appropriate html tags to define your text - enables the text readers blind people use to read the text on your site Make good use of headings, <em> and <strong> Always specify alternative text for graphics - <img src="image.gif" width="10" height="10" alt="image description"> Check the colors you use aren't bad for those with various forms of color blindness Not just for disabled – mobile use also impacted Beware of alt text for single-pixel spacers If in doubt - desaturate (make black and white) the design to see if it still makes sense Don't use color as the only indicator of change (e.g. in a new section) Always underline links Test with www.bobby.org 64 accessibility 65 accessibility – use alt tags 66 color blindness one in twelve people may not be able to use your web site properly due to some form of color blindness. could mean that text is unreadable, navigation unusable and elements are invisible. Most color blind people can't distinguish between shades of red and green Shades of these colors appear lighter to color blind people The most common forms of color blindness are: Protanopia unable to receive red, and Deuteranopia unable to receive green A much more rare form is found in: Tritanopia - unable to receive blue 67 color blindness palettes Using protan palette Using deutan palette 68 how can these problems be counteracted? Don't use color as the only visual clue Always underline links Provide other means to distinguish between sections Avoid using only red and green in your design Maintain a high contrast between text and background Always put "alt" text on graphics Design tips When designing your site, switch to black and white (desaturate in PhotoShop) to see if it still works after removing color Ask color blind colleagues or friends for their opinion Save versions of your design using the PhotoShop color blind palettes to see the design as a color blind person would 69 graphics Use sparingly - they add to download time Keep as small in file and physical size as possible Don't use for navigation graphics if there are going to be several languages - high maintenance Always put width and height specifications in the img src tag - speeds up download time 70 bandwidth Issues 71 graphics (contd.) Always put border="0" in the img src tag or some browsers will display a blue border around the image if it becomes a link Always specify meaningful alt text in the img src tag - some people switch off graphics in their browsers Know the differences between the various image formats GIF 256 colors, best for line art (Illustrator etc) Supports transparency Some compression, keeps all the data JPG Millions of colors, good for photos (or Photoshop) But no transparency Lots of compression, throws data away 72 graphics – use thumbnails 73 new technology Avoid using technology which has been around less than two years Avoid creating a site where users have to download software to view it If you do have a new technology enabled site - create a mirror site without it Give users the choice before entering the site - don't use a browser plugin detection redirect Use your site stats to see if users prefer the html or new technology enabled site - scrap the new technology if it's not popular If you do create with new technology, recognize usability issues concerning all types of web site Check your site statistics to see how many of your users have the latest plug in before designing your site 74 frames Avoid using frames Hard to maintain Destroys url location for users - can't bookmark individual pages Makes it harder for search engines to spider the site 75 web usability – research (1996) Jared Spool, User Interface Engineering 9 sites – large test sample 4 types of information task finding simple facts comparing facts making single judgments comparing judgments of several entities 76 web usability results – research (1996) Graphic design neither helps nor hurts in terms of user performance on the test questions. The design of text links is vital. In particular, the user must be able to predict where the link will take her. Navigation and content are inseparable. In other words, generic navigation labels don't work as well as specific, informative ones. Information finding is a focused task, where anything superfluous is seen as a distraction. User preference does not correlate with their performance. In other kinds of software, there is typically a strong correlation. 77 bad design bugaboos All capitals text Scrolling sideways Teeny, tiny text size, especially in italics Dead links Telling the user how to set the browser Poor contrast in text-to-background color Large typeface (one without impact and contrast) Animations that don’t stop Things that look like buttons but aren’t “Under construction” notices Neglecting ALT tags for images Not denoting image sizes Do-nothing home page Changing color for the heck of it Lack of mail to/feedback throughout site Sites requiring advanced browser or plug in Blink tags 78 billboard design 101 1/3 Create a clear visual hierarchy The more important something is, the more prominent it is Things that are related logically are also related visually Things are ‘nested’ visually to show what’s part of what 79 billboard design 101 2/3 Conventions are your friends E.g. newspaper layout & TV channel logos Conventions only succeed if they work Save users effort (transfer knowledge) Designers are often reluctant to take advantage of them No ‘best use of convention’ award category! 80 billboard design 101 Break up pages into clearly defined areas aid scanning supported by eye-tracking studies Make it obvious what’s clickable 3/3 ‘pin a tail’ contest Keep ‘noise’ level low don’t overwhelm user’s limited attention buffer 81 references Yale Web Style Guide Usability.gov Browser Stats Broadband Stats 82