Chapter 8

Designing Web Sites

WWWWWW

2WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

OBJECTIVES

• Why a Web site?

• Life Cycle of Site Building

• Ways to Build a Web site

• Web Navigation Design

• Design Criteria

3WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

WHY A WEB SITE?

• Reach Customers Quickly and Reliably

• Establish a Presence in Cyberspace

• Leverage Advertising Costs

• Reduce Customer Service Cost

• Promote Public Relations

• Penetrate International Markets

• Test-market New Products and Services

4WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

LIFE CYCLE OF SITE BUILDING

• Plan the Site

• Define Audience and Connection

• Build Site Content

• Define Site Structure

• Visual Design

5WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

PLAN THE SITE

• Define the Site’s Goals– Determine Who Will Be Involved– Understand the Time and Need Constraints

• Ask Questions Deciding on Site’s Mission and Purpose for the Organization

6WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

PLANNING OBJECTIVES

• Speed up Interactive Process

• Reduce Human Intervention to a Minimum

• Save Time

• Save Buying and Selling Costs

7WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

DEFINE AUDIENCE AND COMEPETITION

• Generate a List of Intended Audience

• Identify What Prospective Customers Want

8WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

HOW CUSTOMERS JUDGE WEB SITES

• Product Prices• Product Representation• Product Selection• Shipping and Handling• Delivery• Ordering• Privacy Policy• Web Navigation

9WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

WEB DESIGN

• Focus on Speed and Responsiveness

• Create Scenarios and Test Cases

• Select a Set of Users for Trial

10WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

COMPETITVE ANALYSIS

• Make a List of Competitors

• Evaluate Criteria:– Personalization– Consistency– Ease of Navigation

11WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

BUILD SITE CONTENT

• Create Content Inventory

• Determine Priority of Each Department

• Analyze Feasibility of Each Function

12WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

DEFINE SITE STRUCTURE

• Create Good Site Structure

• Explore Various Metaphors

• Define Architectural Blueprints

• Decide User Navigation

13WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

VISUAL DESIGN

• Use Layout Grid– Show icons, buttons, banners, etc.

• Establish Look and Feel of Site via Page Mock-ups

• Develop Web Personalization

14WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

WAYS TO BUILD A WEB SITE

• Storefront Building Service

• ISP (Web Hosting) Service

• Do It Yourself

15WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

STOREFRONT BUILDING SERVICE

• Offers Customized Online Store– Provide Web Address– Manage Web Traffic– Maintain Store on Web Servers

• Drawbacks – Lack of Personalization

16WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

ISP SERVICES

• Provide E-Commerce Software

• Offer Well-Versed in Store-building Technology

• Advantage – Good Customer Support

17WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

DO IT YOURSELF

• Requires Experience– Security– Web Traffic Management– Responsive Support– Full-Time Web Administration

• Benefits – Unlimited Upgrades and Customization

18WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

WEB NAVIGATION DESIGN

• Create User Profiles– Keep Human Factor as Part of the Design

• Use Scenarios– Help View Navigation Process

19WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

DESIGN TIPS

• Keep the Site Simple• Address the Problem the Web site Needs to Solve• Enhance Response Time• Raise Transmission Speed• Focus on Content• Ensure Company’s Name Visible• Emphasize on Appearance• Allow Easy Return to Homepage

20WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

DESIGN CRITERIA

• Appearance

• Public Exposure

• Consistency

• Scalability

• Security

• Performance

• Navigation and Interactivity

21WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

APPEARANCE

• Is the Site Aesthetically Pleasing?

• Conduct Quality Assurance– Check the readiness of a Web site– Examine how easy it passes under the stress of

a Web production schedule

• Use a Style Guide – Ensure consistency within the site

22WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

PUBLIC EXPOSURE

• Site Availability– Networking and Technology Infrastructure– Network Administrators and Web Designers

23WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

CONSISTENCY

• Will the Web site and Contents Appear the Same on Visitors’ Screens?

• Usage of HTML

• Provide Choice of Browser

24WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

SCALABILITY

• Does the Site Provide a Seamless Growth Path?

• Capable of Being Expanded

• Protection of Initial Investment

25WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

SECURITY

• Protect from Hackers

• Critical – Web site Access

• Knowledge of Developers

26WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

PERFORMANCE

• How Long Does It Take for the Page to Appear?

• Depend on Local Networking, Traffic Volume, Web Connection

• 45-second Timer

27WWWWWW Awad –Electronic Commerce 2/e© 2004 Pearson Prentice Hall

NAVIGATION & INTERACTIVITY

• How a Visitor Gets from One Page to Another

• Format Icons and Buttons

• Give out Function Descriptions of Each Icon

Chapter 8

Designing Web Sites

WWWWWW