1. Designing usable web pages (introduction to usability, part 2) ISMT multimedia 2002 Dr. Vojislav B. Mišić

2. ISMT Multimedia: Introduction to Usability 2 slide 2 © 2002 Dr. Vojislav B. Mišić Usable web page design  Why? Because page design is the most immediately visible part of web design  What are we going to talk about:  Visual design & layout  Use of screen real estate  Download times  HTML techniques for layout  Interoperability

3. ISMT Multimedia: Introduction to Usability 2 slide 3 © 2002 Dr. Vojislav B. Mišić How eye movement affects design  Visual information processing is very much dependent on eye flow  The more eye flow is required within a visual field, the less information can be received and processed  The need to minimize eye movement is even more important online, because Users' attention span is short It's harder to read from screen than from printed material Users don't read – they scan

4. ISMT Multimedia: Introduction to Usability 2 slide 4 © 2002 Dr. Vojislav B. Mišić Gutenberg diagram  The way we're taught to read affects our text scanning (left-to-right, top-to-bottom) Of course, Chinese can be read in other ways  In the diagram: POA is Primary Optical Area TA is Terminal Anchor Wavy lines denote eye resistance + denotes the so-called fallow areas

5. ISMT Multimedia: Introduction to Usability 2 slide 5 © 2002 Dr. Vojislav B. Mišić Eye movement and shapes  Elements on web pages create visual shapes: text, images, buttons, icons, input boxes, etc.  The rule is: Position shapes so as to minimize eye movement

6. ISMT Multimedia: Introduction to Usability 2 slide 6 © 2002 Dr. Vojislav B. Mišić Shapes create grids  Draw imaginary lines to check the grids and grid alignment  Grids help predict eye movement  Grids help us check placement and alignment of page elements

7. ISMT Multimedia: Introduction to Usability 2 slide 7 © 2002 Dr. Vojislav B. Mišić Example page grid (1)

8. ISMT Multimedia: Introduction to Usability 2 slide 8 © 2002 Dr. Vojislav B. Mišić Example page grid (2)

9. ISMT Multimedia: Introduction to Usability 2 slide 9 © 2002 Dr. Vojislav B. Mišić Visual Hierarchy  There is a relationship between information processing and visual depiction of hierarchical relationships  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… (Krug, 2000)

10. ISMT Multimedia: Introduction to Usability 2 slide 10 © 2002 Dr. Vojislav B. Mišić Goals of visual hierarchy 1  Make important elements bigger, bolder (i.e., stand out)  Position important elements close to the top of the page  Use whitespace around elements to make them stand out

11. ISMT Multimedia: Introduction to Usability 2 slide 11 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (1a)

12. ISMT Multimedia: Introduction to Usability 2 slide 12 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (1b)

13. ISMT Multimedia: Introduction to Usability 2 slide 13 © 2002 Dr. Vojislav B. Mišić Goals of visual hierarchy 2  Show relationships between elements  …through the use of positioning (grouping, nesting, proximity)  …through appropriate presentation styles (size, color, orientation, font)

14. ISMT Multimedia: Introduction to Usability 2 slide 14 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (2a)

15. ISMT Multimedia: Introduction to Usability 2 slide 15 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (2b)

16. ISMT Multimedia: Introduction to Usability 2 slide 16 © 2002 Dr. Vojislav B. Mišić Goals of visual hierarchy 3  Help users' scanning and comprehension by  …creating sufficient contrast between page elements  …using meaningful headings and subheadings  By providing occasional visual relief between dense chunks of text

17. ISMT Multimedia: Introduction to Usability 2 slide 17 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (3a)

18. ISMT Multimedia: Introduction to Usability 2 slide 18 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (3b)

19. ISMT Multimedia: Introduction to Usability 2 slide 19 © 2002 Dr. Vojislav B. Mišić Text alignment and readability  Alignment options: left, right, centered, justified (limited), or a mixture of these  Left alignment is commonly used in Western typography because of reading convention – since we're used to scan the text from left to right, left aligned text is easier to read  Other alignment options are used less often

20. ISMT Multimedia: Introduction to Usability 2 slide 20 © 2002 Dr. Vojislav B. Mišić Text alignment example (1)

21. ISMT Multimedia: Introduction to Usability 2 slide 21 © 2002 Dr. Vojislav B. Mišić Text alignment example (2)

22. ISMT Multimedia: Introduction to Usability 2 slide 22 © 2002 Dr. Vojislav B. Mišić Legibility  Among the factors that affect legibility are  …typeface and size of letters (font)  …use of colors  …contrast  A recent study by Software Usability Research Lab, Wichita State University, 2000: 35 participants, each of them with a normal 20/20 vision, had to read eight passages of text typeset in different ways, measuring speed and accuracy Typefaces used: Times New Roman and Arial Font sizes: 10 and 12 pt Fonts with or without anti-aliasing

23. ISMT Multimedia: Introduction to Usability 2 slide 23 © 2002 Dr. Vojislav B. Mišić Test results (1)  There were differences in speed, but no significant differences in detection of errors

24. ISMT Multimedia: Introduction to Usability 2 slide 24 © 2002 Dr. Vojislav B. Mišić Test results (2)  Interestingly enough, users did not express preference for the font that resulted in fastest reading

25. ISMT Multimedia: Introduction to Usability 2 slide 25 © 2002 Dr. Vojislav B. Mišić What fonts do we use?  For users with good (normal) vision, there is little difference in Times New Roman vs. Arial, and also little difference in using 12- vs. 10-point font  However, not all users have good vision, so maybe 12 pt would be a safer default  Plus, users should be allowed to override this default if they want to

26. ISMT Multimedia: Introduction to Usability 2 slide 26 © 2002 Dr. Vojislav B. Mišić More on text  Also, text is harder to read  …WHEN IT'S ALL IN UPPERCASE  …when it's blinking  …when it's moving across the screen (marquee style)  …when it's zooming (either way)

27. ISMT Multimedia: Introduction to Usability 2 slide 27 © 2002 Dr. Vojislav B. Mišić Color and contrast  Use colors with good contrast: black on white ('positive text) is best white on black ('negative text') is next best  Use plain backgrounds

28. ISMT Multimedia: Introduction to Usability 2 slide 28 © 2002 Dr. Vojislav B. Mišić Contrast – example (1) color contrast insufficient

29. ISMT Multimedia: Introduction to Usability 2 slide 29 © 2002 Dr. Vojislav B. Mišić Contrast – example (2) busy background image insufficient color contrast

30. ISMT Multimedia: Introduction to Usability 2 slide 30 © 2002 Dr. Vojislav B. Mišić Summary of visual design  Eye movement & comprehension : Elements create shapes on page Shapes create grids Align shapes, minimize grids  Visual hierarchy and comprehension Show prominence Show relationships (similarity, parent/child) Aid visual scanning  Legibility Left alignment of text works best Use larger default fonts, and allow the users to adjust font size Use good contrast, preferably black on white Don't use busy background images

31. ISMT Multimedia: Introduction to Usability 2 slide 31 © 2002 Dr. Vojislav B. Mišić Use of screen real estate  Do users want:  …to see whose products you're advertising?  …to evaluate your navigation system?  …to admire your graphic design skills?  Well, no: the users come to your site for CONTENT!  Nielsen recommends that you devote 50 to 80% of your screen area to content

32. ISMT Multimedia: Introduction to Usability 2 slide 32 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1a)

33. ISMT Multimedia: Introduction to Usability 2 slide 33 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1b)

34. ISMT Multimedia: Introduction to Usability 2 slide 34 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1c)

35. ISMT Multimedia: Introduction to Usability 2 slide 35 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1d)

36. ISMT Multimedia: Introduction to Usability 2 slide 36 © 2002 Dr. Vojislav B. Mišić Design ‘above the fold’ and scrolling  'above the fold' is, in fact, a newspaper term – denoting the headings that can be seen when the newspapers are folded and stacked for sale  In web pages: make sure the important information can be seen right away, i.e., in first screen view  The location of the 'fold' may vary because of display resolution: 640x480 is not common any more, 800x600 or 1024x768 is more standard these days  Also, browser toolbars take up some space  Safe bet: about 300 pixels

37. ISMT Multimedia: Introduction to Usability 2 slide 37 © 2002 Dr. Vojislav B. Mišić ‘Above the fold’ (example 1a)

38. ISMT Multimedia: Introduction to Usability 2 slide 38 © 2002 Dr. Vojislav B. Mišić ‘Above the fold’ (example 1b)

39. ISMT Multimedia: Introduction to Usability 2 slide 39 © 2002 Dr. Vojislav B. Mišić Page length and scrolling  With regards to scrolling: early studies have shown that most users would not scroll the page down …  Not true any more (users are more knowledgeable now, they know when they can scroll)  …but still: users WILL scroll only IF they think they're on the right page AND there's something to look for  Rule says: first page should have just one screen, second one can have one or two, subsequent pages can be longer  But watch out: some pages may be accessed directly, which makes THEM first ones 

40. ISMT Multimedia: Introduction to Usability 2 slide 40 © 2002 Dr. Vojislav B. Mišić Placement of page elements  Some design conventions exist, such as  …navigation left or top of page, with text links repeated at bottom  …logo top left or center (as link to home page)  Another user study at Wichita State U, with about 300 participants, mean surfing experience about 3yrs, main goal: education

41. ISMT Multimedia: Introduction to Usability 2 slide 41 © 2002 Dr. Vojislav B. Mišić User expectations study

42. ISMT Multimedia: Introduction to Usability 2 slide 42 © 2002 Dr. Vojislav B. Mišić Summary: screen real estate  Content should dominate (take up 50-80% of the screen area)  Important information should be positioned 'above the fold'  Common page elements should be positioned according to user expectations and, ultimately, conventions

43. ISMT Multimedia: Introduction to Usability 2 slide 43 © 2002 Dr. Vojislav B. Mišić Download times and time limits  Every usability study I have conducted since 1994 has shown the same thing: users beg us to speed up download times (Nielsen, 2000)  Miller's findings about response times (1968) are still considered valid: .01 second limit for system response to appear instantaneous (i.e., applets for screen movement)  1 second limit before user’s flow of thought is interrupted (though delay would be noticed)  10 seconds limit for keeping the user’s attention focused (so 10 seconds max. for a page to load)

44. ISMT Multimedia: Introduction to Usability 2 slide 44 © 2002 Dr. Vojislav B. Mišić Factors affecting response times  Server response and throughput  User's connection to the Internet  Current traffic and congestion  All of the above are beyond web designer's control – but those below are not:  Weight of page and page components (actually, just the file sizes in KB)  Screen content, esp. complex tables (may take long to render)

45. ISMT Multimedia: Introduction to Usability 2 slide 45 © 2002 Dr. Vojislav B. Mišić Graphics and multimedia content  Minimize use of graphics  Optimize images (use GIFs instead of JPEGs, or use lower size JPEGs)  Use as small images as possible, esp. for background  Reuse images where possible  Be careful with media content (good practice is to provide a LINK to the object and indicate its size – in other words, download at your own risk)  Top ten pages had average of about 34.4KB, bottom ten were at 60+KB (Flanders, 1999)

46. ISMT Multimedia: Introduction to Usability 2 slide 46 © 2002 Dr. Vojislav B. Mišić Summary: download times  Response time issues consistently raised by users  Some response time factors may be controlled by the web designer  What can (and should) be done: Simplify tables Rationalize and optimize multimedia Aim for pages below 30 to 40KB

47. ISMT Multimedia: Introduction to Usability 2 slide 47 © 2002 Dr. Vojislav B. Mišić HTML layout techniques  HTML provides a number of layout techniques, such as  Stylesheets  Frames  Tables  Plus, your pages can have fixed or variable width

48. ISMT Multimedia: Introduction to Usability 2 slide 48 © 2002 Dr. Vojislav B. Mišić Stylesheets  Technically, this is the RIGHT way, as stylesheets  …enable separation of content from presentation  …allow content to be accessed on multiple devices and browsers  Use stylesheets to Handle text formatting Handle table colors  Move layout to CSS as soon as possible  However, there may be problems with a few older browsers (less and less of a problem, though)

49. ISMT Multimedia: Introduction to Usability 2 slide 49 © 2002 Dr. Vojislav B. Mišić Frames  Commonly used for layout – esp. to maintain a navigation bar on screen at all times  However, frames are often poorly implemented, with faults such as  Orphan pages  Too small size to hold all content  Bookmarking problems  External link problems

50. ISMT Multimedia: Introduction to Usability 2 slide 50 © 2002 Dr. Vojislav B. Mišić Frames (example)

51. ISMT Multimedia: Introduction to Usability 2 slide 51 © 2002 Dr. Vojislav B. Mišić Frames: user model  The main problem with frames is rather simple: they break user's conceptual model web page is considered to be a SINGLE page With frames, one page contains several pages …even several URLs …which may be confusing to some users  Preferably, DON'T use frames  But if you must, double check for issues like Presence of orphan pages Good fit on ALL frames Pages from other URLs trapped in your frames Whether bookmarking is allowed

52. ISMT Multimedia: Introduction to Usability 2 slide 52 © 2002 Dr. Vojislav B. Mišić Tables  Commonly used for controlled layout (as opposed to free HTML text, which depends on many factors, and can always be overridden by the user)  However, tables can take time to render  Tables are often badly coded (contain too many nesting levels – this is often produced by development tools)  Tables may be rendered slightly differently by different browsers or browser versions

53. ISMT Multimedia: Introduction to Usability 2 slide 53 © 2002 Dr. Vojislav B. Mišić As for tables:  The rule is simple: AVOID THEM! whenever possible  …or at least, KEEP THEM SIMPLE  Whenever possible, reduce nesting of tables  Whenever possible, break longer tables into a number of smaller ones – they will load faster and they will be rendered faster  In particular, make the FIRST table to appear as small as possible  If you use a table to present some information (rather than just to organize elements visually), write a table summary and put it on TOP of the table

54. ISMT Multimedia: Introduction to Usability 2 slide 54 © 2002 Dr. Vojislav B. Mišić Pages with fixed width…  Can look lonely on high resolution displays centering the design will help  Will hold content in place as designed only in graphical browsers only if user hasn’t overridden font size  Can be useful for containing text at readable page width  And, of course, there is the question: which width to use? problems with printing over 600px wide some users don’t know how to change display resolution

55. ISMT Multimedia: Introduction to Usability 2 slide 55 © 2002 Dr. Vojislav B. Mišić Pages with variable width…  Adjust to users’ display resolution  Adjust for printing – but you need to take care of image widths, tables, form elements, otherwise they may not get printed  May have text chunks that are too wide to be read comfortably Consider putting such text inside fixed width cells

56. ISMT Multimedia: Introduction to Usability 2 slide 56 © 2002 Dr. Vojislav B. Mišić Summary: HTML layout techniques  Use stylesheets wherever possible  Avoid frames  Use tables with care  Think twice about pros and cons when deciding whether to use fixed or variable width pages

57. ISMT Multimedia: Introduction to Usability 2 slide 57 © 2002 Dr. Vojislav B. Mišić Interoperability  Browsers: may be graphical but also non-graphical  Operating systems: Windows, MacOS, Unix, Linux, …  Devices: PDAs, mobile phones, …  What you should aim for:  Your design should be accessible to YOUR target audience in the first place  If possible, your design should be accessible to ALL audiences

58. ISMT Multimedia: Introduction to Usability 2 slide 58 © 2002 Dr. Vojislav B. Mišić Know your audience  What do you know about your users?  Target audience profiles (find information on platform/browser usage)  Intranet sites  Special purpose sites  Make use of 3rd party statistics, such as www.nua.ie/surveys www.statmarket.com

59. ISMT Multimedia: Introduction to Usability 2 slide 59 © 2002 Dr. Vojislav B. Mišić Know your audience

60. ISMT Multimedia: Introduction to Usability 2 slide 60 © 2002 Dr. Vojislav B. Mišić How to do it?  Use standards: XHTML, CSS  Follow web content accessibility guidelines  Test your design various graphical browser types various browser versions text browsers multiple platforms  Validate your design at validator.w3.org jigsaw.w3.org/css-validator/ cast.org/bobby

61. ISMT Multimedia: Introduction to Usability 2 slide 61 © 2002 Dr. Vojislav B. Mišić Test tools  Simulation of lynx text browser: www.delorie.com/web/lynxview.html www.delorie.com/web/lynxview.html  Simulation of older browsers: www.delorie.com/web/wpbcv.html www.delorie.com/web/wpbcv.html  Strips illegal HTML markup: www.delorie.com/web/purify.html www.delorie.com/web/purify.html  Disability access checker: www.temple.edu/inst_disabilities/piat/wave/ www.temple.edu/inst_disabilities/piat/wave/

62. ISMT Multimedia: Introduction to Usability 2 slide 62 © 2002 Dr. Vojislav B. Mišić References  Jakob Nielsen, Designing Web Usability, 2000  Steve Krug, Don’t Make Me Think, 2001  Patrick J Lynch and Sarah Horton, Web Style Guide, 1999 (at http://info.med.yale.edu/caim/manual)  World Wide Web Consortium at http://www.w3c.org/