Creating a Winning E-Business

Second Edition

Designing Your Web Site

Chapter 8
 Learning Objectives

 Explain the Web site planning process

 Analyze Web site organization
 Plan useful and attractive Web pages
 List advantages and disadvantages of
outsourcing Web design

Creating a Winning E-Business 2

Second Edition, Chapter 8
 Web Site Planning Process
 Identify the site’s business objectives
– Selling products or services
– Educating consumers
– Providing technical support
– Collecting information from visitors
– Offering a virtual community to customers
– Directing consumers to other useful sites
– Recruiting talented employees

Creating a Winning E-Business 3

Second Edition, Chapter 8
 Web Site Planning Process
(continued)
 Understand who will visit the site
 Understand what visitors will do at the site
– Primary audience consists of the targeted
customers identified in business plan
– Secondary audiences
• Vendors
• Strategic partners
• Investors
• General public

Creating a Winning E-Business 4

Second Edition, Chapter 8
 Web Site Planning Process
(continued)
 Design the site to accommodate the most
common technological constraints
– Experienced or novice users
– Browser and version commonly used
– Internet connection speeds
– Screen resolutions used
• Fixed-width pages
• Pages that resize with the browser window

Creating a Winning E-Business 5

Second Edition, Chapter 8
 Web Site Organization
 Home page should answer basic visitor
questions:
– Who are you?
– What do you do?
– Where can I find what I want or need?
– Why should I be interested in your products or
services?

Creating a Winning E-Business 6

Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 7

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Secondary pages
– Customer login page
– Products or services pages
– “Shopping cart” page
– Shipping and return policy pages
– Customer support pages
– Contact information pages
– “About Us” pages

Creating a Winning E-Business 8

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Secondary pages (continued)
– Privacy policy and acceptable use pages
– Frequently asked questions (FAQ) pages
– Employment opportunities pages
– “What’s New?” pages
– Customer stories or case studies pages
– Affiliate program pages
– Help pages

Creating a Winning E-Business 9

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Linear structure
– A series of pages linked in sequential order

Creating a Winning E-Business 10

Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 11

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Webbed structure
– Pages are linked together without regard for how
the content fits logically

Creating a Winning E-Business 12

Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 13

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Pure hierarchical structure
– Similar to business organizational chart
– Information is organized in levels
– Home page at Level 1 (top-level)
– Main topic pages at Level 2
– Additional details about main topics at remaining
levels

Creating a Winning E-Business 14

Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 15

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Mixed hierarchical structure
– Combines structured organization with cross-
linked pages

Creating a Winning E-Business 16

Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 17

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Site organization
– Should enable visitors to find actionable content
quickly and easily
– Be neither too flat nor too deep
– Logical and intuitive
 Avoid a structure that is either too flat or too deep
– Structure that is too flat is uninteresting
– Structure that is too deep is difficult to navigate

Creating a Winning E-Business 18

Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 19

Second Edition, Chapter 8
 Web Site Organization
(continued)

Extending this structure to add additional

levels may create a too deep structure.

Creating a Winning E-Business 20

Second Edition, Chapter 8
 Web Site Organization
(continued)
 Web site storyboard
– Used to test a Web site organizational plan
– Manual mock-up of site’s organization
• Index cards, sticky notes, sheets of paper
represent individual Web pages
• Use push pins or tape to fasten cards, notes, of
sheets of paper to white board or corkboard
• Create connecting lines indicating links
– Look for illogical links, orphan pages, missing
pages
Creating a Winning E-Business 21
Second Edition, Chapter 8
 Web Site Organization
(continued)

Creating a Winning E-Business 22

Second Edition, Chapter 8
 Useful and Attractive
Web Pages
 Web accessibility – Designing Web pages so
that Web resources are available to people with
disabilities
 W3C guidelines for accessibility
– Visual or auditory content is supported by
alternative content
– Color alone should not indicate a link
– Adequate contrast for background/foreground
colors

Creating a Winning E-Business 23

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 W3C guidelines for accessibility (continued)
– Simply worded text
– Movement, scrolling, and blinks can be turned off
without loss of information or navigation
– Navigational links are clear and consistent
– Page content is consistent across all pages

Creating a Winning E-Business 24

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Web usability
– Designing Web pages to help all visitors
accomplish their goals at a site quickly and easily
 Consistency across all pages
– All pages should have a common “look and feel”
– Elements in same position
– Standard color scheme

Creating a Winning E-Business 25

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 26

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 27

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 28

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Navigational elements (internal links)
– Embedded text links
– Clickable table of contents and top-of-page links
– Navigation bars
– Navigation menus
– Navigation tabs
– Breadcrumb trail
– Site map

Creating a Winning E-Business 29

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Embedded text links
– Link positioned inside a paragraph
– Text in link should clearly describe what page
visitors will see
• Use Zax Phones
• Do not use Click here

Creating a Winning E-Business 30

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Clickable table of contents and top-of-page links
– Use to navigate between topics on a long Web
page
– Allow visitors to read subtopics and return to the
top of the page without scrolling

Creating a Winning E-Business 31

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 32

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 33

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Navigation bars, menus, and tabs
– Navigation bar is a series of graphic or text-based
internal links
– Often found at the top or bottom of Web page

Creating a Winning E-Business 34

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 35

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Navigation bars, menus, and tabs (continued)
– Navigation menu is a list of internal links
– Navigation tabs are similar to file folder tabs
– Both are used to conserve space on a page

Creating a Winning E-Business 36

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 37

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Breadcrumb trail
– Hierarchical navigational outline
– Provides visitor with feedback on path taken to
current page
– Use in conjunction with other navigational
elements

Creating a Winning E-Business 38

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 39

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Site map
– Web page that shows a summary of all the linked
pages at the site
 Rollover links
– Hidden links that appear when mouse is “rolled
over” an animated image
– Avoid rollover links

Creating a Winning E-Business 40

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)

Creating a Winning E-Business 41

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Page layout
– Fixed-width pages fit in a maximized browser
window for a specific screen resolution
– Liquid design creates pages that size with the
browser window
• Use tables (arrangement of columns and rows)
• Use CSS (cascading style sheets)

Creating a Winning E-Business 42

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Page length
– Keep pages short to avoid vertical scrolling
 Splash pages and frames
– Avoid them
 Search function and forms
– Add access to search function on all relevant
pages
– Use forms to collect information

Creating a Winning E-Business 43

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Writing for the Web
– Use simple, direct language
– Avoid industry jargon
– Use bulleted and numbered lists
– Use dark text color on light background
– Use a familiar font
– Use at least a 12-point equivalent font
– Check spelling and grammar, and proofread

Creating a Winning E-Business 44

Second Edition, Chapter 8
 Useful and Attractive
Web Pages (continued)
 Choose color scheme carefully
 Use images, audio, and video sparingly and only
when they support the Web site message
 Avoid background images
 Add alternative text to image links
 Add related text links to support image links

Creating a Winning E-Business 45

Second Edition, Chapter 8
 Web Design Outsourcing
 Carefully assess costs of in-house Web design
and development compared to outsourcing costs
 Outsourcing benefits
– May save time and money
– Provides greater access to experienced
specialists familiar with current best practices and
trends
– May provide access to usability analysis

Creating a Winning E-Business 46

Second Edition, Chapter 8
 Chapter Summary
 Begin the Web site and page design process by
determining the site’s business objectives and its
targeted audiences’ wants and needs
 Make sure that the home page answers basic
visitor questions
– Who?
– What?
– Where?
– Why?
Creating a Winning E-Business 47
Second Edition, Chapter 8
 Chapter Summary
(continued)
 Determine the secondary pages needed in
addition to the home page
 Organize the pages at the site in a logical and
intuitive order using the storyboarding process
 Follow the W3C guidelines for Web accessibility
 Pay attention to de facto standards or guidelines
for Web usability

Creating a Winning E-Business 48

Second Edition, Chapter 8
 Chapter Summary
(continued)
 Compare the costs, advantages, and
disadvantages of designing and developing the
Web site in-house versus outsourcing the design
and development process

Creating a Winning E-Business 49

Second Edition, Chapter 8