1. Page design and layout for improved usability CSCI 4800/6800 Spring 2005

2. The importance of page design “Page design is the most immediately visible part of web design.” Jakob Nielsen, Designing Web Usability –Has an effect on how people will judge your site –Crucial to enhancing usability

3. Page layout and design Eye flow and information processing Establishing a visual hierarchy Use of screen real estate Devote most space to content Design “above the fold” Common location of page elements Download (response times)

4. Eye flow “Good design is based on eye flow. The more eye movement required within a visual field, the less information can be received and processed.” Duff & Mohler, 1996 –Relationship between Eye flow Information processing

5. Natural eye flow Movement is from the Primary Optical Area to the Terminal Anchor Wavy lines indicate movement that the eye naturally resists Crosses are fallow areas on the page/screen Colin Wheildon, Type and Layout

6. Issues with reading online Minimizing eye movement in web page design is even more important than in print It is harder to read online Around 80% of users scan pages Users attention span is short Paradox of the active user

7. How to reduce eye movement Don’t put important, distracting or eye catching objects in the areas of the screen that causes movement the eye resists –Top right –Bottom left Important items might be missed Eye catching items might cause users to miss important content

8. How to reduce eye movement Recognise that elements on pages create shapes –Text blocks –Headings –Images Use the squint test to check your page layout

9. How to reduce eye movement Draw imaginary grids

10. Reducing eye movement Making all the images a uniform size would improve the layout of this page

11. Reducing eye movement Use left alignment for text and headings –It is no accident that this is the most used alignment –Not only reduces eye movement Also places a fixed point on the page from where all headings and text can be scanned

12. Reducing eye movement

14. Page layout and design Eye flow and information processing Establishing a visual hierarchy Use of screen real estate Devote most space to content Design “above the fold” Common location of page elements Download (response times)

15. Visual hierarchies “One of the best ways to make a page easy to grasp in a hurry is to make sure that the appearance of things on the page… clearly and accurately portrays… which things are related and which things are part of other things…” Steve Krug, Don’t Make Me Think –Relationship between Placement of objects on a page Information processing

16. Establishing a visual hierachy Design and layout of information to –Show importance or priority –Show relationships between elements –Aid scanning and comprehension

17. Show importance or priority Make important elements bigger, bolder Position important elements nearer to the top of the page Use a stronger colour for important elements Use whitespace around elements to make them stand out

18. Show importance or priority Newspapers do this well Headline story, then secondary stories…

19. Show importance Government entry point – all departments shown on equal footing Some priority content is highlighted

20. Show relationships between elements Use positioning –Grouping shows family relationship –Nesting shows child relationship –Proximity shows similarity Use presentation styles –Size, colour, font style, orientation

21. Show relationships Family relationship Child relationship

22. Show relationships

23. Aid scanning and comprehension Provide visual relief from dense chunks of text –Use meaningful headings and sub-headings –Turn lists and series into bullet points –Emphasize key words or phrases within paragraphs Create contrasts between page elements Present appropriate content as tables, graphs, charts, images

24. Aid scanning Headings and sub- headings Bulleted lists

25. Aid scanning Too much dense text Hyperlink colour doesn’t stand out enough

26. Aid scanning Too much dense text Hyperlink colour doesn’t stand out enough

27. Aid scanning Still too hard to scan links to main content

28. Page layout and design Eye flow and information processing Establishing a visual hierarchy Use of screen real estate Devote most space to content Design “above the fold” Common location of page elements Download (response times)

29. Use of screen real estate Most users visit sites for their content So, the first rule concerning the use of screen real estate is: –Devote most of the screen real estate to content

30. Devote screen real estate to content

33. Content is displayed inside a small frame. No scrolling would be required if the frame was removed

34. Devote screen real estate to content Content is displayed inside a small frame, requiring more scrolling than would otherwise be necessary

35. Devote screen real estate to content

36. Page layout and design Eye flow and information processing Establishing a visual hierarchy Use of screen real estate Devote most space to content Design “above the fold” Common location of page elements Download (response times)

37. Use of screen real estate Users are in a hurry –Not sure if this page is the right page So, the second rule concerning the use of screen real estate is: –Design ‘above the fold’

38. Scrolling behaviour Early studies (1994/5) showed that users were reluctant to scroll Not true any more, but Users will not scroll unless they think the content they’re looking for is on that page So, give good clues above the fold about what’s below the fold

39. The fold moves Variations in screen displays means that the page fold is not static –Different display resolutions (640x480, 800x600, 1024x768, etc.) Browser toolbars also take up space Safe space is around 300 pixels

40. “Above the fold” Real content is hidden below the fold

41. Page length and scrolling As a rule of thumb –Home page: 1 screen –Level 2 page: 2 screens –Level 3 page: 3 screens Caution: pages can be accessed directly

42. Horizontal scrolling Users don’t expect horizontal scrolling

43. Page layout and design Eye flow and information processing Establishing a visual hierarchy Use of screen real estate Devote most space to content Design “above the fold” Common location of page elements Download (response times)

44. Common location of page elements Some design conventions exist –Logo at top left or centre –Logo increasingly functions as a link to home page –Navigation at top and/or left Right side navigation increasing Practise of repeating links in text at bottom of the page is decreasing

45. User expectations study Conducted at Wichita State University Usability Research Lab (SURL) 2000 304 participants (128 male, 183 female) Age range 18-63 (average 20) Internet experience > 1yr (mean 3 yrs) Primary surfing goal - education

46. User expectations study

47. Example Logo placement Navigation placement Search placement

48. Example Logo placement Navigation placement Search placement

49. Example Logo placement Navigation placement Search placement

50. Example Logo placement Navigation placement Search placement

51. Example Logo placement Navigation placement Search placement

52. Example Logo placement Navigation placement Search placement

53. Example Logo placement Navigation placement Search placement

54. Example Logo placement Navigation placement Search placement

55. Page layout and design Eye flow and information processing Establishing a visual hierarchy Use of screen real estate Devote most space to content Design “above the fold” Common location of page elements Download (response times)

56. Download times “Every usability study I have conducted since 1994 has shown the same thing: users beg us to speed up download times”. Jakob Nielsen, Designing Web Usability

57. Factors affecting download times Many factors are outside the control of the web designer –Server’s connection to the Internet –Throughput of the server –Bottlenecks on the Internet –User’s connection to the Internet

58. Factors affecting download times Many factors are within our control –Weight of page components Use graphics and multimedia judiciously Optimise graphics and multimedia Reuse images and other page components –Browser rendering speeds Reduce nesting in complex tables

59. Guidelines for page sizes Survey of top 50 sites in 1999 by Vincent Flanders –Top ten average size - 34.4Kb –Bottom ten average size - 61.3Kb –Average size - 47.8Kb

60. Page weight a coincidence? 1 second 10 seconds modem 2Kb 34Kb ISDN 8Kb 150Kb T1100Kb 2Mb Jakob Nielsen, Designing Web Usability

61. Human reaction to response times Miller (1968), but still considered valid –0.1 second limit for system to appear to react instantaneously –1 second before user’s flow of thought is interrupted –10 second limit for keeping a user’s attention focused Voila! 34Kb

62. Page weight examples Google – 12Kb Yahoo – 46Kb (usually around 29Kb) Hotmail – 17Kb Amazon – 142Kb (usually around half this) AltaVista – 15Kb Ninemsn – 80Kb

63. Page weight examples - G8 University of Melbourne – 109Kb University of Queensland – 61Kb University of WA – 75Kb University of NSW – 75Kb University of Adelaide – 63Kb University of Sydney – 73Kb ANU – 63Kb Monash University – 38Kb

64. Summary Minimize eye movement across the page Create a visual hierarchy Devote most space to content Design “above the fold” Put things where users expect them Keep (navigational) pages lean (around 34Kb)

65. Resources and tools Jakob Nielsen Designing Web Usability, 2000 Steve Krug Don’t Make Me Think, 2001 Patrick J Lynch and Sarah Horton Web Style Guide, 1999 http://info.med.yale.edu/caim/manual ZDNet Mechanic Site Tune Up http://www.netmechanic.com/cobrands/zd_dev/