Chapter 17 Designing for the Web

1
Chapter 17Designing for the Web

• Ryan Galloway
• Andy ONeil
• Joe Ahn

2
Introduction

• Five aspects of web design
• Design principles for web sites
• 2. Designing web sites
• 3. Designing home pages and interior pages
• 4. Design issues for web pages
• 5. Writing the content of web pages

3
1. Design Principles for Web Sites (HOME-RUN)

• High-quality content
• Often updated
• Minimal download time
• Ease of use
• Relevant to users needs
• Unique to the online medium
• Net-centric corporate culture

4
2. Designing web sites

• Designing the web site structure
• Helping the users know where they are
• Helping the users navigate around the site
• Navigation aids

5

• Designing the web site structure
• Most common is the hierarchical structure
• Several points to consider
• How deep and how wide should the hierarchy be?
• 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?
• How should the site content be grouped?

6
Deep Hierarchical Structure
Shallow Hierarchical Structure
7

• Helping the users know where they are
• Clearly label each page
• Have a logo in the top-left corner and the name
  of the site

8

• Helping the users navigate around the site
• Three types of links
• Structural navigation links
• Associative links
• See Also links
• Text links
• Should be distinctive and consistent
• Should be discriptive
• Other alternatives to text links
• Buttons and selectable graphical images
• Drop-down lists

9

• Navigation aids
• Site maps
• Breadcrumb trail
• Geographical or visual maps
• Navigation bars
• Drop-down lists

10
Site Map and Simple List
Breadcrumb Trail and Rows of Tabs
11
Single Line of Tabs and Drop-down Lists
12
2. Designing home pages and interior pages

• Home page Tells the users where they are and
  what the site does. Contains all or some of the
  following
• Name or logo of the organization usually in
  top-left corner with tagline
• Name of the site
• Navigation aid
• Summary of news, promotions, or changes
• Summary of key content for first-time visitors
• Search facility for experienced users
• Some sites use a flash page

13

• Interior pages Contains all or some of the
  following
• Typically contains more content and less
  introductory and navigational information
• Logo and name of site may be smaller and less
  intrusive but still helps the user stay oriented
• Link to homepage
• Links to pages within level of hierarchy

14
3. Design issues for web pages

• Widgets on web pages
• Scrolling
• Designing for different screens and platforms
• Using the screen area effectively
• Improving download time
• Using style sheets
• Designing for accessibility

15
Homepage that needs scrolling
16
4. Writing the content of web pages

• Keep text to a minimum (about 50 of what would
  be included in print form)
• See if the introductions are necessary
• Use numbered or bulleted lists and tables for
  organizing information
• Check whether the text actually adds value from
  the users point of view

17

• Help users to scan
• Use headings and subheadings as appropriate
• Use meaningful headings
• Bulleted and numbered lists help
• Highlight and emphasize important issues and
  topics

18

• Dividing long blocks of text into separate
  sections
• Could be done using same page with associative
  links
• Split text into chunks where each chunk relates
  to a different topic

19

• Questions?