LEC14
LEC14
LEC14
1 SWE 312
Objectives
❑ To understand design principles for web sites.
2 SWE 312
Design principles for web sites
❑ High-quality content
❑ Often updated
❑ Ease of use
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.
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
❑ Does the structure of the site reflect the structure of the tasks the users
want to carry out?
➢ Browse
➢ Search
7 SWE 312
Helping the users know where they are
❑ 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.
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
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
❑ 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.
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