Transcript Creating a Winning E-Business

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
Second Edition, Chapter 8
2
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
Second Edition, Chapter 8
3
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
Second Edition, Chapter 8
4
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
Second Edition, Chapter 8
5
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
Second Edition, Chapter 8
6
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
7
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
Second Edition, Chapter 8
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
Second Edition, Chapter 8
9
Web Site Organization
(continued)
 Linear structure
– A series of pages linked in sequential order
Creating a Winning E-Business
Second Edition, Chapter 8
10
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
11
Web Site Organization
(continued)
 Webbed structure
– Pages are linked together without regard for how
the content fits logically
Creating a Winning E-Business
Second Edition, Chapter 8
12
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
13
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
Second Edition, Chapter 8
14
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
15
Web Site Organization
(continued)
 Mixed hierarchical structure
– Combines structured organization with crosslinked pages
Creating a Winning E-Business
Second Edition, Chapter 8
16
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
17
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
Second Edition, Chapter 8
18
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
19
Web Site Organization
(continued)
Extending this structure to add additional
levels may create a too deep structure.
Creating a Winning E-Business
Second Edition, Chapter 8
20
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
Second Edition, Chapter 8
21
Web Site Organization
(continued)
Creating a Winning E-Business
Second Edition, Chapter 8
22
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
Second Edition, Chapter 8
23
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
Second Edition, Chapter 8
24
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
Second Edition, Chapter 8
25
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
26
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
27
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
28
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
Second Edition, Chapter 8
29
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
Second Edition, Chapter 8
30
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
Second Edition, Chapter 8
31
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
32
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
33
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
Second Edition, Chapter 8
34
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
35
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
Second Edition, Chapter 8
36
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
37
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
Second Edition, Chapter 8
38
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
39
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
Second Edition, Chapter 8
40
Useful and Attractive
Web Pages (continued)
Creating a Winning E-Business
Second Edition, Chapter 8
41
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
Second Edition, Chapter 8
42
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
Second Edition, Chapter 8
43
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
Second Edition, Chapter 8
44
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
Second Edition, Chapter 8
45
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
Second Edition, Chapter 8
46
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
Second Edition, Chapter 8
47
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
Second Edition, Chapter 8
48
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
Second Edition, Chapter 8
49