Chapter 8

DESIGNING WEBSITES- From Page to Stage

Day 13

WWWWWW

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

Day 13 Agenda

• Lecture/Discuss Designing Web Sites

• Spring Break!

3WWWWWW 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

• Hiring a Web Designer

Designing Websites: Objectives

4WWWWWW 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?

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

LIFE CYCLE OF SITE BUILDING

1. Plan the Site

2. Define Audience & Competition

3. Build Site Content

4. Define Site Structure

5. Visual Design

Designing Websites: Life Cycle of Site Building

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

PLANNING OBJECTIVES (1)

• 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

PLAN THE SITE (1)

• 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

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

DEFINE AUDIENCE & COMEPETITION (2)

• Generate a List of Intended Audience

• Identify What Prospective Customers Want

Designing Websites: Life Cycle of Site Building

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

HOW CUSTOMERS JUDGE WEBSITES (2)

• Competitive Product Prices• Well-designed Product Representation• Good Product Selection• Reliable Shipping & Handling• On-time Delivery• Easy Ordering• Posted Privacy Policy• User-friendly Web Navigation

Designing Websites: Define Audience & Competition

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

WEB DESIGN (2)

• Focus on Speed & Responsiveness

• Create Scenarios & Test Cases

• Select a Set of Users for Trial

Designing Websites: Define Audience & Competition

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

COMPETITVE ANALYSIS (2)

• Make a List of Competitors• Evaluate Criteria:

– Personalization

– Consistency

– Ease of Navigation

• Compare your design against your competitors– http://www.bizrate.com/ratings_guide/guide.html

Designing Websites: Define Audience & Competition

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

BUILD SITE CONTENT (3)

• Create Content Inventory

• Determine Priority of Each Department

• Analyze Feasibility of Each Function

• See Box 8-1 on Page 240

Designing Websites: Life Cycle of Site Building

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

DEFINE SITE STRUCTURE (4)

• Create Good Site Structure

• Explore Various Metaphors– Objects for Actions– Intuitive Displays

• Define Architectural Blueprints

• Decide User Navigation

Designing Websites: Life Cycle of Site Building

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

VISUAL DESIGN (5)

• Use Layout Grid – Show icons, buttons, banners, etc.– 4X3 layout – Use Graph Paper

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

• Develop Web Personalization– cookies

Designing Websites: Life Cycle of Site Building

15WWWWWW 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

16WWWWWW 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

• shopping.yahoo.com/stores

• www.bigstep.com

Designing Websites: Ways to Build a Website

17WWWWWW 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

• www.verio.com

Designing Websites: Ways to Build a Website

18WWWWWW 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

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

WEB NAVIGATION DESIGN

• Create User Profiles (page 247)– Keep Human Factor as Part of the Design

• Use Scenarios– Help View Navigation Process

Designing Websites: Web Navigation Design

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

DESIGN TIPS

• Keep the Site Simple -KISS• Address the Problem the Website 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

Designing Websites: Web Navigation Design

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

Usability Sites

• http://www.webpagesthatsuck.com/

• Art and the Zen of Web Sites

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

DESIGN CRITERIA

• Appearance

• Public Exposure

• Consistency

• Scalability

• Security

• Performance

• Navigation & Interactivity

Designing Websites: Design Criteria

23WWWWWW 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

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

PUBLIC EXPOSURE

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

Designing Websites: Design Criteria

25WWWWWW 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– Netscape 4.7 – 7.0– Internet Explorer 5.0-6.0

Designing Websites: Design Criteria

26WWWWWW 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

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

SECURITY

• Protect from Hackers

• Critical – Website Access

• Knowledge of Developers

Designing Websites: Design Criteria

28WWWWWW 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 for search engines

Designing Websites: Design Criteria

29WWWWWW 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

• “Click-depth”

Designing Websites: Design Criteria

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

WebSite Design resources

• http://www.killersites.com/

• http://www.web-source.net/

• http://www.wpdfd.com/

• http://www.webstyleguide.com/

• http://www.oswd.org/

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

Extra Credit question for next Quiz

• Extra Credit (5 points)

• What is the derivation of the name “cookie” used by Internet Browsers?