Chapter 5

Designing Web Sites

WWWWWW

2WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

OBJECTIVES

• Why a Website?

• Life Cycle of Site Building

• Ways to Build a Website

• Web Navigation Design

• Design Criteria

Designing Websites: Objectives

3WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

WHY A WEBSITE?

• Reach Customers Quickly & Reliably

• Establish a Presence in Cyberspace

• Leverage Advertising Costs

• Reduce Customer Service Cost

• Promote Public Relations

• Penetrate International Markets

• Test-market New Products & Services

Designing Websites: Why a Website?

4WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

LIFE CYCLE OF SITE BUILDING

• Plan the Site

• Define Audience & Connection

• Build Site Content

• Define Site Structure

• Create Visual Design

Designing Websites: Life Cycle of Site Building

5WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

PLAN THE SITE

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

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

Designing Websites: Life Cycle of Site Building

6WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

PLANNING OBJECTIVES

• Speed Up Interactive Process

• Reduce Human Intervention to a Minimum

• Save Time

• Save Buying & Selling Costs

Designing Websites: Life Cycle of Site Building

7WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

DEFINE AUDIENCE & COMEPETITION

• Generate a List of Intended Audience

• Identify What Prospective Customers Want

Designing Websites: Life Cycle of Site Building

8WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

HOW CUSTOMERS JUDGE WEBSITES

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

Designing Websites: Define Audience & Competition

9WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

WEB DESIGN

• Focus on Speed & Responsiveness

• Create Scenarios & Test Cases

• Select a Set of Users for Trial

Designing Websites: Define Audience & Competition

10WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

COMPETITVE ANALYSIS

• Make a List of Competitors

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

Designing Websites: Define Audience & Competition

11WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

BUILD SITE CONTENT

• Create Content Inventory

• Determine Priority of Each Department

• Analyze Feasibility of Each Function

Designing Websites: Life Cycle of Site Building

12WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

DEFINE SITE STRUCTURE

• Create Good Site Structure

• Explore Various Metaphors

• Define Architectural Blueprints

• Decide User Navigation

Designing Websites: Life Cycle of Site Building

13WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

VISUAL DESIGN

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

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

• Develop Web Personalization

Designing Websites: Life Cycle of Site Building

14WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

WAYS TO BUILD A WEBSITE

• Storefront Building Service

• ISP (Web Hosting) Service

• Do It Yourself

Designing Websites: Ways to Build a Website

15WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

STOREFRONT BUILDING SERVICE

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

• Drawbacks – Lack of Personalization

Designing Websites: Ways to Build a Website

16WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

ISP SERVICES

• Provide E-Commerce Software

• Offer Well-Versed In-Store building Technology

• Advantage – Good Customer Support

Designing Websites: Ways to Build a Website

17WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

DO IT YOURSELF

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

• Benefits – Unlimited Upgrades & Customization

Designing Websites: Ways to Build a Website

18WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

WEB NAVIGATION DESIGN

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

• Use Scenarios– Help View Navigation Process

Designing Websites: Web Navigation Design

19WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

DESIGN TIPS

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

Designing Websites: Web Navigation Design

20WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

DESIGN CRITERIA

• Appearance

• Public Exposure

• Consistency

• Scalability

• Security

• Performance

• Navigation & Interactivity

Designing Websites: Design Criteria

21WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

APPEARANCE

• Is the Site Aesthetically Pleasing?

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

a Web production schedule

• Use a Style Guide – Ensure consistency within the site

Designing Websites: Design Criteria

22WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

PUBLIC EXPOSURE

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

Designing Websites: Design Criteria

23WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

CONSISTENCY

• Will the Website & Contents Appear the Same on Visitors’ Screens?

• Usage of HTML

• Provide Choice of Browser

Designing Websites: Design Criteria

24WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

SCALABILITY

• Does the Site Provide a Seamless Growth Path?

• Capable of Being Expanded

• Protection of Initial Investment

Designing Websites: Design Criteria

25WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

SECURITY

• Protect from Hackers

• Critical – Website Access

• Knowledge of Developers

Designing Websites: Design Criteria

26WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

PERFORMANCE

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

• Depend on Local Networking, Traffic Volume, Web Connection

• 45-second Timer

Designing Websites: Design Criteria

27WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall

NAVIGATION & INTERACTIVITY

• How a Visitor Gets from One Page to Another

• Format Icons & Buttons

• Give out Function Descriptions of Each Icon

Designing Websites: Design Criteria

Chapter 5

Designing Web Sites

WWWWWW