Designing usable web pages (introduction to usability, part 2) ISMT multimedia 2002 Dr. Vojislav B....

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


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


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


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


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


Example page grid (1)


Example page grid (2)


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)


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


Visual hierarchy example (1a)


Visual hierarchy example (1b)



Show relationships between elements …through the use of positioning (grouping,

nesting, proximity) …through appropriate presentation styles

(size, color, orientation, font)







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






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


Text alignment example (1)


Text alignment example (2)


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


Test results (1)

There were differences in speed, but no significant differences in detection of errors


Test results (2)

Interestingly enough, users did not express preference for the font that resulted in fastest reading


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


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)


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


Contrast – example (1)

color contrast insufficient


Contrast – example (2)

• busy background image

• insufficient color contrast


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


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


Screen real estate (example 1a)


Screen real estate (example 1b)


Screen real estate (example 1c)


Screen real estate (example 1d)


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


‘Above the fold’ (example 1a)


‘Above the fold’ (example 1b)


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


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


User expectations study


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


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)


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)


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)


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


HTML layout techniques

HTML provides a number of layout techniques, such as

Stylesheets Frames Tables Plus, your pages can have fixed or variable

width


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)


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


Frames (example)


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


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


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


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


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


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


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


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


Know your audience


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


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/


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/

Date post:	22-Dec-2015
Category:	Documents
View:	218 times
Download:	0 times

Designing usable web pages (introduction to usability, part 2) ISMT multimedia 2002 Dr. Vojislav B....

Documents