Transcript DESIGNING WEB SITES - From Page to Stage

Chapter 8
DESIGNING WEBSITES
- From Page to Stage
Day 13
WWW
Day 13 Agenda
• Lecture/Discuss Designing Web Sites
• Spring Break!
WWW
2
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Objectives
OBJECTIVES
•
•
•
•
•
•
Why a Website?
Life Cycle of Site Building
Ways to Build a Website
Web Navigation Design
Design Criteria
Hiring a Web Designer
WWW
3
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Why a Website?
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
WWW
4
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
LIFE CYCLE OF SITE BUILDING
1.
2.
3.
4.
5.
Plan the Site
Define Audience & Competition
Build Site Content
Define Site Structure
Visual Design
WWW
5
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
PLANNING OBJECTIVES (1)
•
•
•
•
Speed up Interactive Process
Reduce Human Intervention to a Minimum
Save Time
Save Buying & Selling Costs
WWW
6
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
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
WWW
7
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
DEFINE AUDIENCE &
COMEPETITION (2)
• Generate a List of Intended Audience
• Identify What Prospective Customers Want
WWW
8
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Define Audience & Competition
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
WWW
9
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Define Audience & Competition
WEB DESIGN (2)
• Focus on Speed & Responsiveness
• Create Scenarios & Test Cases
• Select a Set of Users for Trial
WWW
10
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Define Audience & Competition
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
WWW
11
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
BUILD SITE CONTENT (3)
•
•
•
•
Create Content Inventory
Determine Priority of Each Department
Analyze Feasibility of Each Function
See Box 8-1 on Page 240
WWW
12
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
DEFINE SITE STRUCTURE (4)
• Create Good Site Structure
• Explore Various Metaphors
– Objects for Actions
– Intuitive Displays
• Define Architectural Blueprints
• Decide User Navigation
WWW
13
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Life Cycle of Site Building
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
WWW
14
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Ways to Build a Website
WAYS TO BUILD A WEBSITE
• Storefront Building Service
• ISP (Web Hosting) Service
• Do It Yourself
WWW
15
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Ways to Build a Website
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
WWW
16
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Ways to Build a Website
ISP SERVICES
• Provide E-Commerce Software
• Offer Well-Versed in Store-building
Technology
• Advantage – Good Customer Support
• www.verio.com
WWW
17
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Ways to Build a Website
DO IT YOURSELF
• Requires Experience
–
–
–
–
Security
Web Traffic Management
Responsive Support
Full-Time Web Administration
• Benefits – Unlimited Upgrades &
Customization
WWW
18
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Web Navigation Design
WEB NAVIGATION DESIGN
• Create User Profiles (page 247)
– Keep Human Factor as Part of the Design
• Use Scenarios
– Help View Navigation Process
WWW
19
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Web Navigation Design
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
WWW
20
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Usability Sites
• http://www.webpagesthatsuck.com/
• Art and the Zen of Web Sites
WWW
21
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
DESIGN CRITERIA
•
•
•
•
•
•
•
Appearance
Public Exposure
Consistency
Scalability
Security
Performance
Navigation & Interactivity
WWW
22
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
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
WWW
23
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
PUBLIC EXPOSURE
• Site Availability
– Networking & Technology Infrastructure
– Network Administrators & Web Designers
WWW
24
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
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
WWW
25
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
SCALABILITY
• Does the Site Provide a Seamless Growth
Path?
• Capable of Being Expanded
• Protection of Initial Investment
WWW
26
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
SECURITY
• Protect from Hackers
• Critical – Website Access
• Knowledge of Developers
WWW
27
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
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
WWW
28
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall
Designing Websites: Design Criteria
NAVIGATION & INTERACTIVITY
• How a Visitor Gets from One Page to
Another
• Format Icons & Buttons
• Give out Function Descriptions of Each
Icon
• “Click-depth”
WWW
29
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/
WWW
30
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?
WWW
31
Awad –Electronic Commerce 1/e
© 2002 Prentice Hall