Скачать презентацию www structure navigation John Kelleher First Скачать презентацию www structure navigation John Kelleher First

666ec1a3448a3f4e92b00d5d8498d409.ppt

  • Количество слайдов: 83

www: structure & navigation John Kelleher www: structure & navigation John Kelleher

“First we thought the PC was a calculator. Then we found out how to “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 2

web fact #1 l l web users don’t read pages. They scan them Why? web fact #1 l l web users don’t read pages. They scan them Why? l l l Usually in a hurry Know they don’t need to read everything Good at scanning 3

what designers build… 4 what designers build… 4

what users see… 5 what users see… 5

web fact #2 l l we don’t make optimal choices. We satisfice Why not? web fact #2 l l we don’t make optimal choices. We satisfice Why not? l l 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 l We don’t figure out how things work. We muddle through. web fact #3 l We don’t figure out how things work. We muddle through. l l l We proceed without clear understanding We persist with solutions we know to be sub optimal E. g. Yahoo search box E. g. AOL vs. Internet Why? l We may not care or care enough to excel 7

web vs. conventional print l l print took centuries to mature web pages freestanding web vs. conventional print l l print took centuries to mature web pages freestanding – major difference l headers & footers significant l l 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 l l l Reading pattern is dictated by blocks of colour, animation, page structure l l l 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 l Use the "inverted pyramid" start with the conclusion l 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. l You need to entice visitors to scroll down, but the home page is less likely to achieve this put longer content on interior pages. l Once a visitor has clicked to further information, they are more likely to scroll. 9

page structure (contd. ) l vertically and horizontally align items on a page l page structure (contd. ) l vertically and horizontally align items on a page l l 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. ) l l ideally shouldn't scroll excessively split content onto several page structure (contd. ) l l ideally shouldn't scroll excessively split content onto several pages if necessary don't specify a width l Should work across range of window sizes l Users hate horizontal scrolling l If the design dictates a specific width design to 780 pixels width only l l 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 12

site structure 13 site structure 13

site structure 14 site structure 14

logos 15 logos 15

screen size 640 x 480 16 screen size 640 x 480 16

screen size 800 x 600 17 screen size 800 x 600 17

screen size 1024 x 768 18 screen size 1024 x 768 18

screen size 1280 x 1024 19 screen size 1280 x 1024 19

screen size 640 x 480 800 x 600 1024 x 768 1280 x 1024 screen size 640 x 480 800 x 600 1024 x 768 1280 x 1024 20

network download speeds l Lots of different speeds out there l l Modems (28. network download speeds l Lots of different speeds out there l l Modems (28. 8 kbps, 33. 6 kbps, 56 kbps) DSL (384 kbps, 1. 5 mbps, 8 mbps) Cable Modems (1 to 27 mbps) Exponential uptake on broadband l l US 3 million had DSL in 1 Q 01 – now 16 million 1 US 6 million had cable modems in 1 Q 01 – now 15 million 2 However, Keep in mind fuzziness of statistics + Internet access at work and school + laptop modems www. dslforum. org/pressroom. htm 2 www. cabledatacomnews. com/cmic 1 21

Total Broadband Top Countries By penetration of population Ranking Country Broadband Total Penetration by 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 Source: http: //www. dslforum. org/Press. Room/Q 205 DSLsubscribernumberspresentation. ppt 22

homepage l l l Put as much important content as close to the top homepage l l l 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 24

homepage 25 homepage 25

writing for the web Omit needless words Vigorous writing is concise. A sentence should 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 l very different to writing for print l l Less writing for the web l very different to writing for print l l Less is more – omit needless words l l Time critical 1 Users scan l 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. ) l l Use bullet points or numbered lists writing for the web (contd. ) l l 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


(Horizontal Rule) tag (Insert > Horizontal Rule in Dreamweaver) to separate bodies of text l Use plenty of headings, subheadings and white space instead l l l It looks better and is easier to read The
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 29

text scanning 30 text scanning 30

text scanning 31 text scanning 31

line width 32 line width 32

text pruning Site Survey The following questionnaire is designed to provide us with information 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 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. l Before l l 103 words After l 41 words 34

text - consistency 35 text - consistency 35

inverted pyramid l Important facts and conclusions first l Why? 1. It lets readers inverted pyramid l Important facts and conclusions first l 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 l l most important aspect of a web site problems of ‘webspace’ l navigation l l most important aspect of a web site problems of ‘webspace’ l l helps users find their way around l l No sense of scale l ‘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 l l l l l navigation panel location indicator device (breadcrumbs) types of navigation l l l l l 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 l l Set of links on left hand side or top area navigation panel l l 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 l l l 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 – tabs are best 40

navigation – identifying choices 41 navigation – identifying choices 41

location indicator device (breadcrumbs) l l l Should be added to every page other location indicator device (breadcrumbs) l l l 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 l l l 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 43

home button l l Not necessary on actual home page A home button / home button l l Not necessary on actual home page A home button / company logo (link to home page) at the very top left l 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 l The location indicator device (see LID) provides a textual link to the home page 44

links l All textual hyper links should be underlined l l l The visitor links l All textual hyper links should be underlined l l l The visitor should not have to mouse over, or hover, on a link to realise it is a link make it obvious l 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 l Links within text can slow down reading flow, but this may be a good thing sometimes by highlighting particular words 45

links (contd. ) l Differentiate between internal links (links within the web site) and links (contd. ) l Differentiate between internal links (links within the web site) and external links (links to other web sites) l l l Within page links (to #bookmarks) l l l 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. ) l Don't make links open in a new window l l links (contd. ) l Don't make links open in a new window l l l When linking to large files l l 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 l l l 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 48

links 49 links 49

links 50 links 50

links – beware CSS/d. HTML 51 links – beware CSS/d. HTML 51

links not clear 52 links not clear 52

html title l l l In the HTML header Use frames with caution Keep html title l l l 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 poor document title 54

site map l l l A separate page which shows a site map The site map l l l 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 l l Some users choose a search facility before using any other search facility l l Some users choose a search facility before using any other navigation feature Other users will use a search facility as a last resort l Make sure your site has one l Put the search box in a prominent position on every page l Keep it as simple as possible l l l 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 l l 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) l l Use your error pages effectively l the 404 (and other error pages) l l Use your error pages effectively l 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) l Visitors know they are on your web site and the physical connection is intact l Provide the same site wide navigation as on your other pages l Utilise it for their benefit l l 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 l Create all the custom error pages how to create the custom error pages l Create all the custom error pages you need for your site (see list below) l l l Go to the main root directory of your web site (in the same place as your home page) l l l 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: Error. Document 404 /errors/error 404. html The text needs to remain exactly as above l l For example, create a 404 error page and save in a folder called /errors/ as error 404. 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 Error. Document 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 l l why create a custom error page? Visitors get errors for various reasons l l It retains your web site branding l l Shows visitors they are still on the same web site Can be a useful navigation tool and help keep visitors on your web site l l l l l 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 60

graphics as navigation and/or links l l Be careful when using graphic/images as links graphics as navigation and/or links l l 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 l l 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 “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. ” Tim Berners-Lee, W 3 C Director and inventor of the World Wide Web 62

accessibility l l l Make sure your site is usable on the main browser accessibility l l l 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 l l Users can enforce personal style sheets Accessibility increasingly mandated l l Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W 3 C) amendments to Section 508 of the Rehabilitation Act of 1973 (US) 63

accessibility (contd. ) l Use the appropriate html tags to define your text enables accessibility (contd. ) l Use the appropriate html tags to define your text enables the text readers blind people use to read the text on your site l l Make good use of headings, and Always specify alternative text for graphics image description l l l Check the colors you use aren't bad for those with various forms of color blindness l l 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 65

accessibility – use alt tags 66 accessibility – use alt tags 66

color blindness l l l one in twelve people may not be able to color blindness l l l one in twelve people may not be able to use your web site properly due to some form of color blindness. l 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: l Protanopia unable to receivered, and l Deuteranopia unable to receivegreen A much more rare form is found in: l Tritanopia unable to receive blue 67

color blindness palettes Using protan palette Using deutan palette 68 color blindness palettes Using protan palette Using deutan palette 68

how can these problems be counteracted? l l Don't use color as the only how can these problems be counteracted? l l Don't use color as the only visual clue l Always underline links l 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 l When designing your site, switch to black and white (de saturate in Photo. Shop) to see if it still works after removing color l Ask color blind colleagues or friends for their opinion l Save versions of your design using the Photo. Shop color blind palettes to see the design as a color blind person would 69

graphics l l Use sparingly they add to download time Keep as small in graphics l l 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 bandwidth Issues 71

graphics (contd. ) l l l Always put border= graphics (contd. ) l l l 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 l 256 colors, best for line art (Illustrator etc) l Supports transparency l Some compression, keeps all the data JPG l Millions of colors, good for photos (or Photoshop) l But no transparency l Lots of compression, throws data away 72

graphics – use thumbnails 73 graphics – use thumbnails 73

new technology l l l Avoid using technology which has been around less than new technology l l l 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 l l 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 l l Avoid using frames Hard to maintain Destroys url location for users frames l l 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) l l l Jared Spool, User Interface Engineering 9 web usability – research (1996) l l l Jared Spool, User Interface Engineering 9 sites – large test sample 4 types of information task l l finding simple facts comparing facts making single judgments comparing judgments of several entities 76

web usability results – research (1996) l l l Graphic design neither helps nor web usability results – research (1996) l l l 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 l l l l l All capitals text Scrolling sideways Teeny, bad design bugaboos l l l l l 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 l 1/3 Create a clear visual hierarchy l l l The billboard design 101 l 1/3 Create a clear visual hierarchy l l l 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 l 2/3 Conventions are your friends l l E. g. newspaper billboard design 101 l 2/3 Conventions are your friends l l E. g. newspaper layout & TV channel logos Conventions only succeed if they work l l Save users effort (transfer knowledge) Designers are often reluctant to take advantage of them l No ‘best use of convention’ award category! 80

billboard design 101 l Break up pages into clearly defined areas l l l billboard design 101 l Break up pages into clearly defined areas l l l aid scanning supported by eye tracking studies Make it obvious what’s clickable l l 3/3 ‘pin a tail’ contest Keep ‘noise’ level low l don’t overwhelm user’s limited attention buffer 81

references l l Yale Web Style Guide Usability. gov Browser Stats Broadband Stats 82 references l l Yale Web Style Guide Usability. gov Browser Stats Broadband Stats 82