![Page 1: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/1.jpg)
Chapter 8DESIGNING WEBSITES
- From Page to Stage
Day 13
WWWWWW
![Page 2: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/2.jpg)
2WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
Day 13 Agenda
• Assignment #4 Graded– 7 A’s, 1 B and 1 C
• Quiz #2 Graded– 3 A’s, 5 B’s and 1 F
• Lecture/Discuss Designing Web Sites
![Page 3: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/3.jpg)
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
![Page 4: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/4.jpg)
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?
![Page 5: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/5.jpg)
5WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
LIFE CYCLE OF SITE BUILDING
1. Plan the Site2. Define Audience & Competition3. Build Site Content4. Define Site Structure5. Visual Design
Designing Websites: Life Cycle of Site Building
![Page 6: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/6.jpg)
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
![Page 7: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/7.jpg)
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
![Page 8: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/8.jpg)
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
![Page 9: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/9.jpg)
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
![Page 10: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/11.jpg)
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
Designing Websites: Define Audience & Competition
![Page 12: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/12.jpg)
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
![Page 13: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/13.jpg)
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
![Page 14: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/14.jpg)
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
![Page 15: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/15.jpg)
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
![Page 16: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/16.jpg)
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
![Page 17: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/17.jpg)
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
![Page 18: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/18.jpg)
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
![Page 19: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/19.jpg)
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
![Page 20: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/20.jpg)
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
![Page 21: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/21.jpg)
21WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
Usability Sites
• http://www.webpagesthatsuck.com/• Art and the Zen of Web Sites
![Page 22: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/22.jpg)
22WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
DESIGN CRITERIA
• Appearance• Public Exposure• Consistency• Scalability• Security• Performance• Navigation & Interactivity
Designing Websites: Design Criteria
![Page 23: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/23.jpg)
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
![Page 24: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/24.jpg)
24WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
PUBLIC EXPOSURE
• Site Availability– Networking & Technology Infrastructure– Network Administrators & Web Designers
Designing Websites: Design Criteria
![Page 25: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/25.jpg)
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
![Page 26: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/26.jpg)
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
![Page 27: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/27.jpg)
27WWWWWW Awad –Electronic Commerce 1/e© 2002 Prentice Hall
SECURITY
• Protect from Hackers• Critical – Website Access• Knowledge of Developers
Designing Websites: Design Criteria
![Page 28: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/28.jpg)
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
![Page 29: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/29.jpg)
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
![Page 30: Chapter 8 DESIGNING WEBSITES - From Page to Stage](https://reader034.vdocument.in/reader034/viewer/2022042703/5681678f550346895ddcbddb/html5/thumbnails/30.jpg)
Chapter 8Designing Web Sites
WWWWWW