chapter 5 designing web sites. awad –electronic commerce 1/e © 2002 prentice hall 2 objectives...
TRANSCRIPT
![Page 1: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/1.jpg)
Chapter 5
Designing Web Sites
WWWWWW
![Page 2: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/2.jpg)
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
![Page 3: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/3.jpg)
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?
![Page 4: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/4.jpg)
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
![Page 5: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/5.jpg)
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
![Page 6: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/6.jpg)
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
![Page 7: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/7.jpg)
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
![Page 8: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/9.jpg)
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
![Page 10: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/11.jpg)
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
![Page 12: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/12.jpg)
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
![Page 13: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/13.jpg)
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
![Page 14: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/14.jpg)
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
![Page 15: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/15.jpg)
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
![Page 16: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/16.jpg)
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
![Page 17: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/17.jpg)
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
![Page 18: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/18.jpg)
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
![Page 19: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/19.jpg)
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
![Page 20: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/20.jpg)
20WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
DESIGN CRITERIA
• Appearance
• Public Exposure
• Consistency
• Scalability
• Security
• Performance
• Navigation & Interactivity
Designing Websites: Design Criteria
![Page 21: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/21.jpg)
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
![Page 22: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/22.jpg)
22WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
PUBLIC EXPOSURE
• Site Availability– Networking & Technology Infrastructure– Network Administrators & Web Designers
Designing Websites: Design Criteria
![Page 23: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/23.jpg)
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
![Page 24: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/24.jpg)
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
![Page 25: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/25.jpg)
25WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
SECURITY
• Protect from Hackers
• Critical – Website Access
• Knowledge of Developers
Designing Websites: Design Criteria
![Page 26: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/26.jpg)
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
![Page 27: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/27.jpg)
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
![Page 28: Chapter 5 Designing Web Sites. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 OBJECTIVES Why a Website? Life Cycle of Site Building Ways to Build](https://reader033.vdocuments.net/reader033/viewer/2022051621/56649ea45503460f94ba8613/html5/thumbnails/28.jpg)
Chapter 5
Designing Web Sites
WWWWWW