LEC14

Download as pdf or txt
Download as pdf or txt
You are on page 1of 18

Designing for the Web

1 SWE 312
Objectives
❑ To understand design principles for web sites.

❑ To understand navigation aids

2 SWE 312
Design principles for web sites
❑ High-quality content

❑ Often updated

❑ Minimal download time

❑ Ease of use

❑ Relevant to user’s needs

❑ Unique to the online medium

3 SWE 312
Designing web sites
❑ How the web pages are structured in relation to the tasks the users
want to carry out and the natural organization of the information.

❑ How to tell users where they are.

❑ How to help users navigate around the site.

4 SWE 312
Designing the web site structure
❑ The Web is a hypertext system made up of a huge number of pages
that are linked together in a very complex way.

❑ The most common site structure is some form of hierarchy, with the
home page as the root node.

❑ When you are designing the structure of a site, it can help to look
first at the natural organization of the information.

5 SWE 312
Example: Organizing the book information

❑ This classification can be useful for structuring a web site to sell books.
➢ A web page for each node in this classification.
➢ It is often not this simple (why? see next slide)

6 SWE 312
Issues to consider
❑ How deep and how wide should the hierarchy be?
➢ Shallow vs. deep
➢ Page download time
➢ Number of pages to find the information

❑ Is it better to divide a block of information into several short pages or leave it


as one long page?

❑ Can several web pages be combined into one larger one?

❑ Does the structure of the site reflect the structure of the tasks the users
want to carry out?
➢ Browse
➢ Search

❑ How should the site content be grouped?

7 SWE 312
Helping the users know where they are

❑ It is quite common for users to jump directly to a page within a web


site without passing through the home page.

❑ Clearly label each page.

❑ Include the organization’s logo in the top-left corner, along with the
name of the site.

8 SWE 312
Helping the users navigate around the
site
❑ Structural navigation links
➢ These form the underlying structure of the site.
➢ They point to other web pages within the site.

❑ Associative link
➢ When a page is particularly long, it is common practice to have
associative links that connect to fixed places on the page.

❑ “See Also” links


➢ These point to other web sites.
➢ Enable users to explore related sites.

9 SWE 312
Text links
❑ What color should text links be?
➢ Most sites stuck to the convention of saturated blue underlined text for
links. The color then changed to purple or red after the link had been
selected.
➢ Provide consistent clickability cues
➢ Designate used links

❑ How do you make the names of links meaningful to the user?


➢ Example: A museum site has a link called “Visiting?” in the navigation
bar!!!
• It turned out that “Visiting?” led to a page with the directions to the museum
so a link title like “How to find us” would have been better.

10 SWE 312
Alternatives to text links
❑ Buttons or selectable graphical images

❑ Drop-down lists
➢ Available options are invisible until the list is selected.
➢ List items do not indicate when the particular page has been viewed
previously.
➢ Take up less space than multiple text links.

11 SWE 312
Navigation aids
❑ Site map

❑ Breadcrumb trail

❑ Geographical or visual maps

❑ Navigation bars

❑ Drop-down lists

12 SWE 312
Site map
❑ Showing the site hierarchy condensed onto a single page.

13 SWE 312
Breadcrumb trail
❑ Every level in the hierarchy from the top to your current position is listed
from left to right.

14 SWE 312
Geographical or visual maps
❑ Links are contained within a visual metaphor.

15 SWE 312
Scrolling
❑ The most important content should be visible without scrolling.
➢ Positioning content above the fold.

❑ Make page-length decisions that support the primary use of the Web
page.

❑ Use shorter pages for homepages and navigation pages, and pages
that need to be quickly browsed and/or read online.

❑ Use longer pages to …


➢ Facilitate uninterrupted reading, especially on content pages
➢ Match the structure of a paper counterpart
➢ Simplify page maintenance (fewer Web page files to maintain)
➢ Make pages more convenient to download and print

16 SWE 312
Horizontal scrolling
❑ Horizontal scrolling, across the page, interrupts the flow of reading
on every line.

❑ Try to ensure that either the text wraps to the user’s screen size or
the line length is less than the anticipated screen size.

17 SWE 312
Style sheets
❑ Use style sheets to achieve consistent visual appearance of a web
site.

❑ Style sheets also allow you to change the appearance of the whole
site with relative ease.

➢ For example, if you decide that the typeface used for titles should be
changed, you simply alter the style sheet rather than changing every
title by hand.

18 SWE 312

You might also like