Web Design - Part 1. University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 1

Transcription

1 Web Design - Part 1 University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 1

2 Case Study: The W W W Aim Applying the design guidelines studied so far to the World Wide Web. See the Resources web page, but includes: Don t Make Me Think! (Steve Krug) Shneiderman Ch 10, 11.5 Yale Style Guide W3C Guidelines Jakob Nielsen s Alertbox column (useit.com) Vincent Flanders Web Sites That Suck site University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 2

3 Why the W W W? It s everywhere! A large proportion (Nielsen estimates over 90%) of commercial (and other professional) sites are overly difficult to use, due to errors such as: Bloated design leading to long 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 University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 3

4 Is Web Design really that bad? Yes. See also Molich and Gram (summary on alertbox/ html) University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 4

5 Is Web Design really that bad? Spool s study of 15 commercial sites found that users found their desired information only 42% of the time. Forrester Research found various results: Only 51% of the major commercial sites studied complied with simple web usability goals Very few companies had any design goals for the site (although 56% did mention fast loading) Only 24% of the companies conducted usability testing on their web sites The net result for commercial companies: Loss of approx 50% of potential sales Loss of approx 40% of repeat business - due to a bad experience the first time... University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 5

6 The Web Usage Paradox Why do we still use the web? 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 University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 6

7 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 University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 7

8 Know thy Web User What sort of users are there? e.g. for the University web site? in general? The web designer must ask What is the visitor to my site like? How do you think users arrive at a page? What technology are they using? for web information University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 8

9 Language use on the web Source: /stats.htm University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 9

10 Computer Resources Web Browser Usage & Configuration University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 10

11 Screen Resolution and Colour Depth University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 11

12 Impatience Interlaced browsing Scanning User Behaviours Text attracts attention before graphics (image from Don t Make Me Think) University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 12

13 So? You can t really change the users: you must design around these behaviours. Steve Krug s main rule of usability: Don t make me think (Don t waste my time) University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 13

14 What s in a Web Site? Home page Content pages (Sections, subsections, etc) Additional Reference Pages: FAQ (Frequently Asked Questions) page Glossary Links page, or References page Cover / Splash page Visitors Book Feedback/Comments page University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 14

15 Structure Careful structural design is crucial to a good web site. how many pages does the site have? Efficiency: people can find quickly the information they want from your site: Don t waste my time Consider possible types of structure: Linear Tree-like hierarchy Network / Web University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 15

16 Hierarchy From University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 16

17 Navigation Guide the user to a clear mental model and don t violate it! How does the user know which page they are on in a web site? and why do we care? Cues: breadcrumb trail, colours, logos University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 17

18 Navigation Buttons with informative names, simple icons (such as arrows): Button bar / sections/ navigation - also helps to give a consistent sense of identity to the site. Consider putting navigation buttons at the top and at the bottom of web pages. Tabbed panes (e.g. Amazon). University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 18

19 Navigation There should be no dead end or orphan pages that contain no links to other parts of the site. Why? University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 19

20 Where am I? Steve Krug s Trunk Test : Identify (rapidly) Site ID Page Name Sections and Subsections Local Navigation You are here indicators Search box University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 20

21 Greeked Layout A technique for testing layout: All contents are replaced by greeked (unreadable) text Each tester has to identify several standard elements on the page e.g. page title, main content selections, site-local navigation University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 21

22 Greeked Example University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 22

23 End of Lecture University of Stirling 2011 ITNP43: Interface Design & The World Wide Web 24