Web Design - Part 1 Case Study: The W W W Aims: Applying the design guidelines studied so far to the World Wide Web Shneiderman, Chapter 16 Autumn 2014 ITNP43:Interface Design and the WWW 2
Why the W W W? Web design is often poor Bloated design leading to longer download times Too much hype, not enough information for customers Obscure or difficult-to-see site structures Difficulty in finding the way around a site Autumn 2014 ITNP43:Interface Design and the WWW 3 The Web Usage Paradox Despite the bad usability of many web sites, many users use the web and get a good experience from it. Why? Users don t spend time at the bad sites - they become loyal users of good sites Many people don t know how much better the web could be Sometimes the Web does work Triumph of hope over experience? Autumn 2014 ITNP43:Interface Design and the WWW 4
Outline Topics to be covered today: Know thy web user What s in a web site? Structure and Navigation Next time: Layout Common Issues in Web Design Resources Autumn 2014 ITNP43:Interface Design and the WWW 5 Know thy Web User Requirements of visitors to pages can fit into many categories, and these include: Educational purposes (teacher-directed/self-directed learning) Reference Purchases (casual shopping or determined buyers) Non-specific web browsing ( surfers ) Social media For any web site, there may be a number of different types of user, each with different aims: e.g. University web site Prospective students, Researchers seeking information, Companies seeking experts for consultancy, Autumn 2014 ITNP43:Interface Design and the WWW 6
Know thy Web User For a web designer, the question What is the visitor to my site like? will have many different answers depending on the pages themselves. However there are general things we can say about web users - research into web usage has been carried out by several organizations. Take such information as a rough guideline only, as: web usage is constantly changing at a very rapid rate visitors to a web page vary a lot according to how they arrived there in the first place Autumn 2014 ITNP43:Interface Design and the WWW 7 Language use on the web - 2011 Source:http://www.internetworldstats.com/stats.htm Autumn 2014 ITNP43:Interface Design and the WWW 8
Languages - 2011 Autumn 2014 ITNP43:Interface Design and the WWW 9 Web Browser Usage www.w3schools.com/browsers www.webdesigneronline.co.uk/some-interesting-usability-tatistics Web Browser Usage Autumn 2014 ITNP43:Interface Design and the WWW 10
Screen Resolution and Colour Depth Autumn 2014 ITNP43:Interface Design and the WWW 11 User Behaviours Impatience Web users are impatient for pages to download. On average, users will only tolerate 10 seconds of nothing happening before going elsewhere (unless they are convinced that they are waiting for exactly what they want). Interlaced browsing Pattern of loading up one window whilst reading another Scanning Web users tend to scan web pages, not read them Text attracts attention before graphics Of users first three eye-fixations on a page, only 22% were on graphics, 78% was on text Autumn 2014 ITNP43:Interface Design and the WWW 12
Page Design Page Size Autumn 2014 ITNP43:Interface Design and the WWW 13 What s in a Website? Home page Content pages Additional Reference Pages: FAQ (Frequently Asked Questions) page Glossary Links page, or References page Cover / Splash page Visitors Book Feedback/Comments page Autumn 2014 ITNP43:Interface Design and the WWW 14
Splash/Cover Page Don t have a splash page unless it adds something Users find it frustrating to have one more click to get to the good stuff One company found that 16% of visitors didn t get beyond the splash page - so they redesigned the site without a splash page If there is a cover page, it should be analogous to a magazine cover - it should present a corporate image, and should quickly give the reader an idea of what s in there and why they might want to see it. Must be visually tempting in some way - a boring splash page will not result in a high hit rate to the site! And is worse if it takes a long time to download. Autumn 2014 ITNP43:Interface Design and the WWW 15 Structure Careful structural design is crucial to a good web site. The design should be chosen for maximum efficiency so that people can find quickly the information they want from your site. Consider possible types of structure: Linear Tree-like hierarchy Network / Web Autumn 2014 ITNP43:Interface Design and the WWW 16
Linear Structure Examples: In web-based training it is helpful for the learner to follow a pre-set course, step by step Cartoons with a day-by-day archive Autumn 2014 ITNP43:Interface Design and the WWW 17 Hierarchy Example: Clothes catalogue with different types of clothing - outdoor gear, shoes, casual, lingerie etc. Autumn 2014 ITNP43:Interface Design and the WWW 18
Network Many pages link to other pages in a irregular way. There may be links back. On some web sites it may be that every page links to every other page. Example: Dept of Computing Science and Mathematics web pages. Autumn 2014 ITNP43:Interface Design and the WWW 19 Navigation Having carefully chosen the structure of your web site, it is important to give the user navigational guidelines so that they can get around the web site. Guide the user to a clear mental model and don t violate it. It is important that the user knows which page they are on in a web site, just from looking at the page itself. Books and magazines have physical cues to give the reader some idea of where they are; so should web pages. Use a cue, e.g. a breadcrumb trail, colours, logos Autumn 2014 ITNP43:Interface Design and the WWW 20
Navigation Buttons with information names, simple icons (such as arrows) can be very helpful. Button bar very useful - also helps to give a consistent sense of identity to the site. Relevant links to the outside are also nice, particularly for an educational/reference site Autumn 2014 ITNP43:Interface Design and the WWW 21 Navigation There should be no dead end or orphan pages Remember someone can jump into the middle of your site (e.g. from a web search engine) Autumn 2014 ITNP43:Interface Design and the WWW 22