1. Chapter 8 DESIGNING WEBSITES - From Page to Stage Day 13

2. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 2 Day 13 Agenda Lecture/Discuss Designing Web Sites Spring Break!

3. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 3 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

4. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 4 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?

5. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 5 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

6. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 6 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

7. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 7 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

8. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 8 DEFINE AUDIENCE & COMEPETITION (2) Generate a List of Intended Audience Identify What Prospective Customers Want Designing Websites: Life Cycle of Site Building

9. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 9 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

10. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 10 WEB DESIGN(2) Focus on Speed & Responsiveness Create Scenarios & Test Cases Select a Set of Users for Trial Designing Websites: Define Audience & Competition

11. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 11 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.htmlhttp://www.bizrate.com/ratings_guide/guide.html Designing Websites: Define Audience & Competition

12. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 12 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

13. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 13 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

14. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 14 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

15. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 15 WAYS TO BUILD A WEBSITE Storefront Building Service ISP (Web Hosting) Service Do It Yourself Designing Websites: Ways to Build a Website

16. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 16 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

17. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 17 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

18. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 18 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

19. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 19 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

20. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 20 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

21. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 21 Usability Sites http://www.webpagesthatsuck.com/ Art and the Zen of Web Sites

22. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 22 DESIGN CRITERIA Appearance Public Exposure Consistency Scalability Security Performance Navigation & Interactivity Designing Websites: Design Criteria

23. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 23 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

24. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 24 PUBLIC EXPOSURE Site Availability –Networking & Technology Infrastructure –Network Administrators & Web Designers Designing Websites: Design Criteria

25. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 25 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

26. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 26 SCALABILITY Does the Site Provide a Seamless Growth Path? Capable of Being Expanded Protection of Initial Investment Designing Websites: Design Criteria

27. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 27 SECURITY Protect from Hackers Critical – Website Access Knowledge of Developers Designing Websites: Design Criteria

28. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 28 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

29. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 29 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

30. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 30 WebSite Design resources http://www.killersites.com/ http://www.web-source.net/ http://www.wpdfd.com/ http://www.webstyleguide.com/ http://www.oswd.org/

31. Awad –Electronic Commerce 1/e © 2002 Prentice Hall 31 Extra Credit question for next Quiz Extra Credit (5 points) What is the derivation of the name “cookie” used by Internet Browsers?