View
217
Download
1
Category
Tags:
Preview:
Citation preview
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?
Recommended