Electronic Commerce MIS 4108

1. Electronic CommerceMIS 4108 Session 7: Designing, Building and Evaluating Web Sites

2. Session Objectives • The objectives of this session are: • To analyse some basic Web site design principles • To construct a Web site using e-commerce and Web-based software • To apply five criteria in order to determine the credibility of an Internet source • To test the usability of Web sites Designing, Building and Evaluating Web Sites

3. Web Site Design Principles1,2 • In this section we will: • Briefly discuss interface design • Present some Web site design principles http://www.cybermarket.co.uk/ishop/images/923/429_904.jpg Designing, Building and Evaluating Web Sites

4. Web Site Design Principles Cont’d • What is an interface? • It is the front end (or user controls) of a device • E.g. a remote control is the interface for a television set • Or a light switch is the interface for an electric light Designing, Building and Evaluating Web Sites

5. Web Site Design Principles Cont’d • So what makes a good Web interface? • It must be easy to use • The Web site functionality must be easy to deduce • Important items are always available, yet not intrusive • E-commerce site should provide links to the checkout • The purpose of the Web site must be immediately understandable; things must be arranged logically • This includes no cryptic icons • In addition, the site should be interesting and colourful (without being irritating) Designing, Building and Evaluating Web Sites

6. Web Site Design Principles Cont’d • When designing a Web site the designer must consider: • The type of screen or device that the Web page will be displayed on (is it in colour etc.) • Whether the page will be printed • Although this is a secondary issue • The size of the screen • The designer unfortunately does not have full control over these media Designing, Building and Evaluating Web Sites

7. Web Site Design Principles Cont’d • It is important to set a Web site theme. This is a multi-step process: • Set the Web site goals • Determine your audience • Define the look and feel of the Web site Designing, Building and Evaluating Web Sites

8. Web Site Design Principles Cont’d • To determine the goals of your Web site consider asking the following questions: • What is the purpose of creating your Web site? • Should I concentrate on only one goal? • What will happen if the goals change and how will it affect the maintenance of the Web site? • Goals need to be balanced against available resources and time Designing, Building and Evaluating Web Sites

9. Web Site Design Principles Cont’d • To determine the audience of the Web site consider the following factors: • Visitor’s age: young, elderly or ageless? • Language: is there a requirement to support more than one? • Culture • Income group: who can afford your product/service? • Educational sophistication: scientific Web sites have less images • Attention span: after a few clicks the visitor might leave Designing, Building and Evaluating Web Sites

10. Web Site Design Principles Cont’d • When considering the Web site look and feel it is important to communicate: • The company’s logos, name, products and location • The unique qualities of the company Designing, Building and Evaluating Web Sites

11. Web Site Design Principles Cont’d • Design principles • Nonlinear presentation • One or two screens per page • Simple navigation • Small graphics for faster page loading • Appealing visual effects Designing, Building and Evaluating Web Sites

12. Web Site Design Principles Cont’d • The WWW is characterised by: • Non-linear information delivery • Pages that are viewed on desktop PCs, Notebooks computers, Web-enabled mobile phones and Palm PCs • Multiple Internet connection options including Fibre optic lines, TV cable and dial-up phone lines • These characteristics must be considered when designing a Web site Designing, Building and Evaluating Web Sites

13. Web Site Design Principles Cont’d • Nonlinear Presentation: • Traditional media, e.g. a lecture, present information in a linear way • A Web site should utilise multi-dimensional hyperlinks for quick, user-centered navigation Designing, Building and Evaluating Web Sites

14. Web Site Design Principles Cont’d • One or Two Screens Per Page: • The home page of a Web site should be no longer than one or two pages • Effective home pages present corporate information, logos and links on the first or second screen • This prevents the need for a significant amount of scrolling, since the top of the page is what a visitor sees when entering the site Designing, Building and Evaluating Web Sites

15. Web Site Design Principles Cont’d • Simple Navigation: • The layout of a Web site should be clear and simple allowing easy navigation • Hyperlinks should be grouped together logically • Each hyperlink should connect a major topic or category e.g. Products Designing, Building and Evaluating Web Sites

16. Web Site Design Principles Cont’d • Navigational links could be presented as: • A bar of file folders • A line of small rectangular or oval buttons • A list of underlined text • For easy navigation links should be placed: • On the left, right or top side of the screen • Or frames could be used which freeze the navigation controls on the screen Designing, Building and Evaluating Web Sites

17. Web Site Design Principles Cont’d • Smaller Graphics For Faster Page Loading: • The larger the graphics the longer a Web page will take to load, especially on a narrow-band connection (e.g. dial-up) • Visitors will probably get fed up and leave the site Designing, Building and Evaluating Web Sites

18. Web Site Design Principles Cont’d • As a general rule: • JPEG (Joint Photographic Expert Group image format) is a 24-bit (16.7 million colours) image format • Photographs should use the JPEG format • A JPEG pictures on a Web page should be smaller than 50KB • Not more than two (2) 50KB JPEG images should be on a single Web Page Designing, Building and Evaluating Web Sites

19. Web Site Design Principles Cont’d • Alternatively: • The GIF format (Graphics Interchange Format by CompuServe) is an 8-bit (256 colours) image format • The GIF format is therefore suitable for navigation buttons, logos and Icons • Navigation buttons should be smaller than 5KB each • Typical buttons are 1-2KB each Designing, Building and Evaluating Web Sites

20. Web Site Design Principles Cont’d • Appealing Visual Effects: • Appealing visual effect can be made using the right combination of style, layout and colour • 12 point Times New Roman or 11 point Arial fonts are typically used for regular text • Headings are usually in a different colour, bold or in a larger font Designing, Building and Evaluating Web Sites

21. Web Site Design Principles Cont’d • Colour contrast between text and background is crucial • It is best to use a light background colour and dark text • Special effect (e,g. blinking text) are suitable for short text strings, e,g, “Special Offer” not long sentences • Always check the page layout on 12.1” – 15” diagonal screens since this is the monitor size for the average user Designing, Building and Evaluating Web Sites

22. Web Site Design Principles Cont’d • Some additional design hints include: • Always ensure that the user can get to all important pages (e.g. product descriptions) using a small number of mouse clicks • Users get fed-up after a few mouse clicks • Always design your Web site for the slowest connection speed, and the earliest browser used by your target audience Designing, Building and Evaluating Web Sites

23. Web Site Design Principles Cont’d • Some additional design hints include: • When creating information sites include a lot of white space; make the pages simple and uncluttered • Users get fed-up after a few mouse clicks • Always write an outline for your content and decide whether each major topic will be on a separate Web page (recommended); and which sub-topics require their own pages Designing, Building and Evaluating Web Sites

24. Constructing a Web Site • Software requirements • Hardware requirements Designing, Building and Evaluating Web Sites

25. Constructing a Web Site Cont’d • From the company goals you should be able to estimate • The number of visitors that will use your site • The number of pages viewed by the average visitor • The average and maximum allowed size of each page • The maximum allowed number of simultaneous visitors • This allows the software and hardware requirements to be determined Designing, Building and Evaluating Web Sites

26. Constructing a Web Site Cont’d • First let us review some fundamentals about Web clients and servers Designing, Building and Evaluating Web Sites

27. Constructing a Web Site Cont’d Web Clients and Servers • When an individual connects to the Internet to view a document, they become a client on the Webs client/server network • The client/server architecture is used for LANs, WANs and the Web. • Typical request serviced by servers connected to these networks include request to print, to retrieve information and to access databases Designing, Building and Evaluating Web Sites

28. Constructing a Web Site Cont’d Web Clients and Servers • Web servers typically have • More memory • Larger and faster disk drives than client computers • Web browser software e.g. IE, Netscape and Firefox is the software that makes computers work as Web clients • The Internet connects several different types of computers together, therefore Web software must be platform neutral Designing, Building and Evaluating Web Sites

29. Constructing a Web Site Cont’d Dynamic Content • A static page is an unchanging page retrieved from a disk • A dynamic page is a page created by a program (script) based on user input • E.g. a Web client inquires about the status of an order and the Web page that is returned is created from information stored in a database • This property (being dynamic) can affect the performance of the Web Server • static pages are delivered faster than dynamic pages Designing, Building and Evaluating Web Sites

30. Constructing a Web Site Cont’d Dynamic Content • The first Web site to provide dynamic pages used server side scripting • Programs running on the Web server that create web pages • These technologies are slow • Newer technologies used for generating dynamic content include: • Microsoft’s Active Server pages (ASP) • Sun’s Java Server Pages (JSP) • Apache’s PHP Hypertext Preprocessor (PHP) Designing, Building and Evaluating Web Sites

31. Constructing a Web Site Cont’d Dynamic Web Pages: The Future • Some critics say that ASP/JSP/PHP etc. do not solve the problem since they simply shift the responsibility of Web page creation from people to programs • A project that is currently underway to tackle the problem of dynamic Web page creation is the Apache Cocoon project Designing, Building and Evaluating Web Sites

32. Constructing a Web Site Cont’d Dynamic Web Pages: The Future • The Apache Cocoon project: • Is creating a Web development framework that • Allows programmers to query the system using data in XML format • Receives output in multiple formats including HTML • The content is stored in XML tags which describes the semantics (meaning) of each content item • A Java servlet handles the information request • A style sheet is applied to the data Designing, Building and Evaluating Web Sites

33. Constructing a Web Site Cont’d Servers • A Server is any computer used to provide files or make applications available to other computers connected to it through a network • Server software refers to the programs that run on the server • Web Servers are connected to the Internet and serve Web pages (e.g. Apache) Designing, Building and Evaluating Web Sites

34. Constructing a Web Site Cont’d Servers • E-mail Servers handle incoming and outgoing email • Database Servers are server computers on which database management software runs Designing, Building and Evaluating Web Sites

35. Constructing a Web Site Cont’d Web Client/Server Communication • When a Web Client requests a page from a Web server the following occurs • The request is converted into HTTP by the browser and sent to the Web Server • The Server receives the request and retrieves the information requested by the Client • The Server formats the information using HTTP and sends it back to the Client • The Client displays the information in the browser • Web pages may take long to appear because each page element requires a separate request/response Designing, Building and Evaluating Web Sites

36. Constructing a Web Site Cont’d 2/3-Tier Client/Server Architecture • The typical Web Client/Server model is two tier because it has one client and one Server • In the three-tier Client/Server model the third tier includes Server applications that supply information to the Web Server • E.g. a catalog style Web site with search, update and display functions: the catalog database and database management software would make up the third tier Designing, Building and Evaluating Web Sites

37. Constructing a Web Site Cont’d Web Server Hardware • Web Servers have more memory, faster hard drives and faster processors (or multiple processors) than desktop machines Designing, Building and Evaluating Web Sites

38. Constructing a Web Site Cont’d Cost • A high-end desktop PC with 512MB RAM, 3GHz processor, a 200GB IDE drive, a good LCD monitor and DVD/CD-RW drive cost between Rs. 50,000 • A low end Web server might cost around Rs. 150,000 • Companies spend between US$ 1,500 and $2,000 for a Web server • Suppliers of these servers include Dell, Gateway and Hewlett Packard,IBM etc. Designing, Building and Evaluating Web Sites

39. Constructing a Web Site Cont’d Web Server Architectures • Server farms refer to large (hundreds, or thousands) of Web servers used to handle daily traffic on large Web sites • A Centralised architecture uses a few very large and very fast computers • A Distributed/decentralised architecture uses a larger number of less powerful computers Designing, Building and Evaluating Web Sites

40. Constructing a Web Site Cont’d Web Server Architectures • The Centralised architecture requires • Expensive computers • Is more susceptible to technical problems • If one or a few of the servers are available then a large proportion of the site is unavailable • As a result a backup/recovery plan is essential Designing, Building and Evaluating Web Sites

41. Constructing a Web Site Cont’d Web Server Architectures • The Distributed/decentralised architecture: • Spreads the risk over a large number of servers • The smaller servers are less expense that larger ones (the cost of 100 smaller servers is usually less that the cost of one large one) • Additional hubs and switches are required to link the servers together and to the Internet • These sites might also use load-balancing systems which are an additional cost Designing, Building and Evaluating Web Sites

42. Constructing a Web Site Cont’d Load Balancing Systems3 • A load-balancing switch: • A piece of network hardware that monitors the workload of servers attached to it • Assigns incoming web traffic to the server with the most available capacity at the given time Designing, Building and Evaluating Web Sites

43. Constructing a Web Site Cont’d Why Load-balance? • Allows Highly-Trafficked Sites To Maintain Fast Response Times • Server Redundancy - If An Application Server Goes Down, Your Site Stays Up • Better Site Performance = Better User Experience = Better Sales Results • Readies Your Hosting Configuration For Traffic Growth & Intense Traffic Spikes Designing, Building and Evaluating Web Sites

44. Constructing a Web Site Cont’d Simple Load-Balancing • Traffic enters the site from the Internet through a router (not shown in diagram) • This traffic is then directed to the appropriate Web server by the load-balancing switch www.inetu.com Designing, Building and Evaluating Web Sites

45. Constructing a Web Site Cont’d Load Balancing Systems Cost • Load-balancing switches and software cost between US$10,000 and US$50,000 www.inetu.com Designing, Building and Evaluating Web Sites

46. Constructing a Web Site Cont’d • It should now be clear what hardware and server software is required to construct a Web site • In this next section we will discuss the client-side and server-side software used to construct Web sites Designing, Building and Evaluating Web Sites

47. Constructing a Web Site Cont’d Client-side Technologies • Client-side Web technologies include: • HTML • XML • JavaScript • VBScript • Java Applets Designing, Building and Evaluating Web Sites

48. Constructing a Web Site Cont’d Server-side Technologies • Server-side Web technologies include: • Perl/CGI • JSP • PHP • Microsoft ASP/ASP.NET Designing, Building and Evaluating Web Sites

49. Constructing a Web Site Cont’d • In addition to the client-side and server-side software that has just been discussed, it is also important to know the e-commerce software that is available to businesses, who either want to host their own Web sites, or want to outsource the hosting function Designing, Building and Evaluating Web Sites

50. Constructing a Web Site Cont’d Finding and Evaluating Web Hosts • When a company takes on the responsibility of hosting their own Web site this is called self-hosting • Small and mid-size businesses tend to outsource to a third party, i.e. use a Web hosting service provider • These third parties are called Internet Service Providers (ISPs), Commerce Service Providers (CSPs), Managed Service Providers (MSPs) or Application Service Providers (ASPs) Designing, Building and Evaluating Web Sites