View
217
Download
0
Tags:
Embed Size (px)
Citation preview
Designing usable web pages(introduction to usability, part 2)
ISMT multimedia 2002Dr. Vojislav B. Mišić
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
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
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
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 soas to minimizeeye movement
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
ISMT Multimedia: Introduction to Usability 2 slide 7 © 2002 Dr. Vojislav B. Mišić
Example page grid (1)
ISMT Multimedia: Introduction to Usability 2 slide 8 © 2002 Dr. Vojislav B. Mišić
Example page grid (2)
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)
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
ISMT Multimedia: Introduction to Usability 2 slide 11 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (1a)
ISMT Multimedia: Introduction to Usability 2 slide 12 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (1b)
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)
ISMT Multimedia: Introduction to Usability 2 slide 14 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (2a)
ISMT Multimedia: Introduction to Usability 2 slide 15 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (2b)
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
ISMT Multimedia: Introduction to Usability 2 slide 17 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (3a)
ISMT Multimedia: Introduction to Usability 2 slide 18 © 2002 Dr. Vojislav B. Mišić
Visual hierarchy example (3b)
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
ISMT Multimedia: Introduction to Usability 2 slide 20 © 2002 Dr. Vojislav B. Mišić
Text alignment example (1)
ISMT Multimedia: Introduction to Usability 2 slide 21 © 2002 Dr. Vojislav B. Mišić
Text alignment example (2)
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
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
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
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
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)
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 bestwhite on black ('negative text') is next best
Use plain backgrounds
ISMT Multimedia: Introduction to Usability 2 slide 28 © 2002 Dr. Vojislav B. Mišić
Contrast – example (1)
color contrast insufficient
ISMT Multimedia: Introduction to Usability 2 slide 29 © 2002 Dr. Vojislav B. Mišić
Contrast – example (2)
• busy background image
• insufficient color contrast
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
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
ISMT Multimedia: Introduction to Usability 2 slide 32 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1a)
ISMT Multimedia: Introduction to Usability 2 slide 33 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1b)
ISMT Multimedia: Introduction to Usability 2 slide 34 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1c)
ISMT Multimedia: Introduction to Usability 2 slide 35 © 2002 Dr. Vojislav B. Mišić
Screen real estate (example 1d)
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
ISMT Multimedia: Introduction to Usability 2 slide 37 © 2002 Dr. Vojislav B. Mišić
‘Above the fold’ (example 1a)
ISMT Multimedia: Introduction to Usability 2 slide 38 © 2002 Dr. Vojislav B. Mišić
‘Above the fold’ (example 1b)
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
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
ISMT Multimedia: Introduction to Usability 2 slide 41 © 2002 Dr. Vojislav B. Mišić
User expectations study
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
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 appearinstantaneous (i.e., applets for screen movement)
1 second limit before user’s flow of thought isinterrupted (though delay would be noticed)
10 seconds limit for keeping the user’s attentionfocused (so 10 seconds max. for a page to load)
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)
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)
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
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
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)
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
ISMT Multimedia: Introduction to Usability 2 slide 50 © 2002 Dr. Vojislav B. Mišić
Frames (example)
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
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
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
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 readablepage 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 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
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
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
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
ISMT Multimedia: Introduction to Usability 2 slide 59 © 2002 Dr. Vojislav B. Mišić
Know your audience
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
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
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 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/