Web Design - Part 1. Case Study: The W W W

(1)

Web Design - Part 1

Case Study: The W W W

Aims:

–  Applying the design guidelines studied so far to the World

Wide Web

(2)

Why the W W W?

Web design is often poor

–  Bloated design leading to longer download times

–  Too much hype, not enough information for customers

–  Obscure or difficult-to-see site structures

–  Difficulty in finding the way around a site

Autumn 2014 ITNP43:Interface Design and the WWW 3

The Web Usage Paradox

Despite the bad usability of many web sites, many users use the web and get a good experience from it. Why?

–  Users don t spend time at the bad sites - they become loyal

users of good sites

–  Many people don t know how much better the web could be

–  Sometimes the Web does work

(3)

Outline

Topics to be covered today:

–  Know thy web user

–  What s in a web site?

–  Structure and Navigation

Next time:

–  Layout

–  Common Issues in Web Design

–  Resources

Know thy Web User

Requirements of visitors to pages can fit into many categories, and these include:

–  Educational purposes (teacher-directed/self-directed learning)

–  Reference

–  Purchases (casual shopping or determined buyers)

–  Non-specific web browsing ( surfers )

–  Social media

For any web site, there may be a number of different types of user, each with different aims: e.g. University web site

–  Prospective students,

–  Researchers seeking information,

(4)

Know thy Web User

For a web designer, the question What is the visitor to my site like? will have many different answers depending on the pages themselves.

However there are general things we can say about web users - research into web usage has been carried out by several

organizations.

Take such information as a rough guideline only, as:

–  web usage is constantly changing at a very rapid rate

–  visitors to a web page vary a lot according to how they arrived

there in the first place

Language use on the web - 2011

(5)

Languages - 2011

Web Browser Usage

www.w3schools.com/browsers

(6)

Screen Resolution and Colour Depth

User Behaviours

Impatience

–  Web users are impatient for pages to download. On average, users

will only tolerate 10 seconds of nothing happening before going elsewhere (unless they are convinced that they are waiting for exactly what they want).

Interlaced browsing

–  Pattern of loading up one window whilst reading another

Scanning

–  Web users tend to scan web pages, not read them

Text attracts attention before graphics

–  Of users first three eye-fixations on a page, only 22% were on

(7)

Page Design – Page Size

What s in a Website?

Home page Content pages

Additional Reference Pages:

–  FAQ (Frequently Asked Questions) page

–  Glossary

–  Links page, or References page

–  Cover / Splash page

–  Visitors Book

(8)

Splash/Cover Page

Don t have a splash page unless it adds something

–  Users find it frustrating to have one more click to get to the

good stuff

–  One company found that 16% of visitors didn t get beyond the

splash page - so they redesigned the site without a splash page

If there is a cover page, it should be analogous to a magazine cover - it should present a corporate image, and should quickly give the reader an idea of what s in there and why they might want to see it.

Must be visually tempting in some way - a boring splash page will not result in a high hit rate to the site! And is worse if it takes a long time to download.

Structure

Careful structural design is crucial to a good web site.

The design should be chosen for maximum efficiency so that people can find quickly the information they want from your site.

Consider possible types of structure:

–  Linear

–  Tree-like hierarchy

(9)

Linear Structure

Examples:

–  In web-based training it is helpful for the learner to follow a

pre-set course, step by step

–  Cartoons with a day-by-day archive

Hierarchy

Example:

–  Clothes catalogue with different types of clothing - outdoor gear,

(10)

Network

Many pages link to other pages in a irregular way. There may be links back. On some web sites it may be that every page links to every other page.

Example:

–  Dept of Computing Science and Mathematics web pages.

Navigation

Having carefully chosen the structure of your web site, it is important to give the user navigational guidelines so that they can get around the web site.

Guide the user to a clear mental model and don t violate it. It is important that the user knows which page they are on in a web site, just from looking at the page itself.

Books and magazines have physical cues to give the reader some idea of where they are; so should web pages. Use a cue, e.g. a breadcrumb trail , colours, logos

(11)

Navigation

Buttons with information names, simple icons (such as arrows) can be very helpful.

Button bar very useful - also helps to give a consistent sense of identity to the site.

Relevant links to the outside are also nice, particularly for an educational/reference site

Navigation

There should be no dead end or orphan pages

Remember someone can jump into the middle of your site (e.g. from a web search engine)