Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Designing usable web pages (introduction to usability, part 2) ISMT multimedia 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 ISMT Multimedia: Introduction to Usability 2 slide 2 © 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 ISMT Multimedia: Introduction to Usability 2 slide 3 © 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 ISMT Multimedia: Introduction to Usability 2 slide 4 © 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 ISMT Multimedia: Introduction to Usability 2 slide 5 © 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 ISMT Multimedia: Introduction to Usability 2 slide 6 © 2002 Dr. Vojislav B. Mišić Example page grid (1) ISMT Multimedia: Introduction to Usability 2 slide 7 © 2002 Dr. Vojislav B. Mišić Example page grid (2) ISMT Multimedia: Introduction to Usability 2 slide 8 © 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) ISMT Multimedia: Introduction to Usability 2 slide 9 © 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 ISMT Multimedia: Introduction to Usability 2 slide 10 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (1a) ISMT Multimedia: Introduction to Usability 2 slide 11 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (1b) ISMT Multimedia: Introduction to Usability 2 slide 12 © 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) ISMT Multimedia: Introduction to Usability 2 slide 13 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (2a) ISMT Multimedia: Introduction to Usability 2 slide 14 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (2b) ISMT Multimedia: Introduction to Usability 2 slide 15 © 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 ISMT Multimedia: Introduction to Usability 2 slide 16 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (3a) ISMT Multimedia: Introduction to Usability 2 slide 17 © 2002 Dr. Vojislav B. Mišić Visual hierarchy example (3b) ISMT Multimedia: Introduction to Usability 2 slide 18 © 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 ISMT Multimedia: Introduction to Usability 2 slide 19 © 2002 Dr. Vojislav B. Mišić Text alignment example (1) ISMT Multimedia: Introduction to Usability 2 slide 20 © 2002 Dr. Vojislav B. Mišić Text alignment example (2) ISMT Multimedia: Introduction to Usability 2 slide 21 © 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 ISMT Multimedia: Introduction to Usability 2 slide 22 © 2002 Dr. Vojislav B. Mišić Test results (1) There were differences in speed, but no significant differences in detection of errors ISMT Multimedia: Introduction to Usability 2 slide 23 © 2002 Dr. Vojislav B. Mišić Test results (2) Interestingly enough, users did not express preference for the font that resulted in fastest reading ISMT Multimedia: Introduction to Usability 2 slide 24 © 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 ISMT Multimedia: Introduction to Usability 2 slide 25 © 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) ISMT Multimedia: Introduction to Usability 2 slide 26 © 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 ISMT Multimedia: Introduction to Usability 2 slide 27 © 2002 Dr. Vojislav B. Mišić Contrast – example (1) color contrast insufficient ISMT Multimedia: Introduction to Usability 2 slide 28 © 2002 Dr. Vojislav B. Mišić Contrast – example (2) • busy background image • insufficient color contrast ISMT Multimedia: Introduction to Usability 2 slide 29 © 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 ISMT Multimedia: Introduction to Usability 2 slide 30 © 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 ISMT Multimedia: Introduction to Usability 2 slide 31 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1a) ISMT Multimedia: Introduction to Usability 2 slide 32 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1b) ISMT Multimedia: Introduction to Usability 2 slide 33 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1c) ISMT Multimedia: Introduction to Usability 2 slide 34 © 2002 Dr. Vojislav B. Mišić Screen real estate (example 1d) ISMT Multimedia: Introduction to Usability 2 slide 35 © 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 ISMT Multimedia: Introduction to Usability 2 slide 36 © 2002 Dr. Vojislav B. Mišić ‘Above the fold’ (example 1a) ISMT Multimedia: Introduction to Usability 2 slide 37 © 2002 Dr. Vojislav B. Mišić ‘Above the fold’ (example 1b) ISMT Multimedia: Introduction to Usability 2 slide 38 © 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 ISMT Multimedia: Introduction to Usability 2 slide 39 © 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 ISMT Multimedia: Introduction to Usability 2 slide 40 © 2002 Dr. Vojislav B. Mišić User expectations study ISMT Multimedia: Introduction to Usability 2 slide 41 © 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 ISMT Multimedia: Introduction to Usability 2 slide 42 © 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) ISMT Multimedia: Introduction to Usability 2 slide 43 © 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) ISMT Multimedia: Introduction to Usability 2 slide 44 © 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) ISMT Multimedia: Introduction to Usability 2 slide 45 © 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 ISMT Multimedia: Introduction to Usability 2 slide 46 © 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 ISMT Multimedia: Introduction to Usability 2 slide 47 © 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) ISMT Multimedia: Introduction to Usability 2 slide 48 © 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 ISMT Multimedia: Introduction to Usability 2 slide 49 © 2002 Dr. Vojislav B. Mišić Frames (example) ISMT Multimedia: Introduction to Usability 2 slide 50 © 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 ISMT Multimedia: Introduction to Usability 2 slide 51 © 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 ISMT Multimedia: Introduction to Usability 2 slide 52 © 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 ISMT Multimedia: Introduction to Usability 2 slide 53 © 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 ISMT Multimedia: Introduction to Usability 2 slide 54 © 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 ISMT Multimedia: Introduction to Usability 2 slide 55 © 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 ISMT Multimedia: Introduction to Usability 2 slide 56 © 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 ISMT Multimedia: Introduction to Usability 2 slide 57 © 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 ISMT Multimedia: Introduction to Usability 2 slide 58 © 2002 Dr. Vojislav B. Mišić Know your audience ISMT Multimedia: Introduction to Usability 2 slide 59 © 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 ISMT Multimedia: Introduction to Usability 2 slide 60 © 2002 Dr. Vojislav B. Mišić Test tools Simulation of lynx text browser: www.delorie.com/web/lynxview.html Simulation of older browsers: www.delorie.com/web/wpbcv.html Strips illegal HTML markup: www.delorie.com/web/purify.html Disability access checker: www.temple.edu/inst_disabilities/piat/wave/ ISMT Multimedia: Introduction to Usability 2 slide 61 © 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/ ISMT Multimedia: Introduction to Usability 2 slide 62 © 2002 Dr. Vojislav B. Mišić