Download
1 / 83
830 likes | 932 Views
www: structure & navigation. John Kelleher.
E N D
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 Adamsnovelist, naturist, web entrepreneur
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
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
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 sub-optimal • E.g. Yahoo search box • E.g. AOL vs. Internet • Why? • We may not care or care enough to excel
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
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.
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
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)
640x480 800x600 1024x768 1280x1024 screen size
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 1www.dslforum.org/pressroom.htm 2 www.cabledatacomnews.com/cmic
Total Broadband Top Countries By penetration of population 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.
writing for the web Omit needless wordsVigorous 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)
writing for the web • very different to writing for print • Time critical1 • Users scan • ref. Poynter Institute study (2000)2 • Harder to read from a computer screen than it is from paper • Less is more – omit needless words • 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
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
text pruning 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? Site Survey
text pruning (after) 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 Site Survey
inverted pyramid • Important facts and conclusions first • Why? • It lets readers know what's coming, so that when they get to the details it fits into a big picture. • Recognizing the benefits first will help to sustain interest. • If the reader is extremely pressed for time, s/he may not get beyond the first few sentences.
navigation • most important aspect of a web site • problems of ‘webspace’ • No sense of scale • ‘links’ visited colour change reflects ground covered • No sense of direction • No sense of location • helps users find their way around • 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
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
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
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
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
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
Janus Twenty InvestmentCompany ofAmerica RoycePremier links (contd.) • Differentiate between internal links (links within the web site) and external links (links to other web sites) • 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 • Within-page links (to #bookmarks) • sometimes confusing if user scrolls & has read material already • make shorter pages to avoid • Avoid ‘wrapped’ links
links (contd.) • Don't make links open in a new window • visitors can get confused and/or irritated by this • destroys the back button - a common means of back tracking • 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 • 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)
