Web Technology Fundamentals COMP 1130 (CS14K)

1. Web Technology FundamentalsCOMP1130 (CS14K) Session 5: Building A Web Site Part III Dr. Paul Walcott Department of Computer Science, Mathematics and PhysicsUniversity of the West Indies, Cave Hill CampusBarbados Created 17/02/05. Updated 21/02/06 © 2005/2006 Dr. Paul Walcott

2. Session Objectives • After completing this session you will be able to: • Comprehend Web site usability issues • Evaluate the design of Web sites using five design principles • Test a Web site for correctness • Use additional HTML tags to create Web sites

3. Web Site Usability3 • In this section we will examine • Web visitors expectations • Customer centric Web site design • Web site response times

4. Web Visitor’s Expectations • Early Web sites simply provided information and often did not include e-mail addresses • Due to staffing levels no response might have been received from an email query anyway • So what does a Visitor expect when entering a Web site? What is their motivation?

5. Web Visitor’s Expectations Cont’d • Some of the motivations of visitors include: • Learning about products and services • Buying products or services • Obtaining general company information • Identification of the management team and their contact information • Obtaining company financial information in order to make investment decisions

6. Web Visitor’s Expectations Cont’d • As a result a visitor should be given access to the: • Organisation’s history • A statement of objectives/mission statement • Information about products or services • A way to communicate with the organisation • Through the use of announcements of upcoming content the visitor should be encouraged to return • Every visitor to a Web site is a potential customer • Note however that it is difficult to meet the needs of all of your visitors

7. Web Visitor’s Expectations Cont’d • To meet the needs of Web site visitors you must consider: • The expectation level and experience when they enter your site • The communication channel used to connect and the bandwidth • The Web browser used • The add-ins available for the browser being used

8. Web Visitor’s Expectations Cont’d • A well designed Web site will therefore provide: • A separate version with and without frames • A Text-only versions (for visually impaired people who use special browser software) • A way for the user to download smaller versions of graphics • A way for the user to select the connection type (so that adjustments may be made for bandwidth) when using Web pages with audio or video clips

9. Web Visitor’s Expectations Cont’d • A way of allowing the users to select the level of detail, viewing format and download format • Multiple information formats (e.g. HTML, PDF or Excel spreadsheet for financial data)

10. Web Visitor’s Expectations Cont’d • Companies are only now performing usability testing on their Web sites • Average e-commerce sites frustrate up to 70% of their users (resulting in the user leaving the site without purchasing anything) • Sites are confusing or difficult to use • In many cases simple changes can improve the usability of the site See http://www.cs.umd.edu/hcil/ and http://www.useit.com/alertbox/ for further details

11. Customer-Centric Design • The goal of e-commerce site is to convert as many visitors to customers, as quickly as possible • After the visitor becomes a customer the goal is to retain them, i.e. make them a repeat customer • To achieve this Web sites need to be customer-centric, providing personalisation for the given customer • If enough information is not provided it is likely that they will go elsewhere

12. Customer-Centric Design Cont’d • To meet the needs of the customer consider the following guidelines: • Arrange links in the way that a customer would use them • It should be possible to access information quickly • Keep product and service descriptions simple, do not over sell by including a lot of marketing • Keep the language simple and jargon free

13. Customer-Centric Design Cont’d • The Web site should work with the oldest browser, running on the oldest computer at the lowest bandwidth • This might mean several different versions of the Web site are required (what about the cost of updating content?) • Label all navigational aids clearly • Test text visibility on smaller monitors • Choose colour combinations that would not impair the vision of colour-blind visitors • Test the usability of your site using potential users

14. Web site Response Times • One of the major threat to repeat visits is the response time of your Web site • The required response time for hypertext navigation is one second, therefore your Web pages should be no more than 3KB (assuming a 28.8kbps modem which most users have)5 • The above limitation rules out most graphics

15. Web site Response Times Cont’d • The basic advice on response times are6: • 0.1 seconds for a user to feel that a system is instantaneous • 1.0 seconds for the user’s thought to remain uninterrupted • 10 seconds for keeping a users attention • Generally, the response time should be as fast as possible

16. Web site Response Times Cont’d • When an immediate response is not possible continuous feedback should be provided • Myers7 suggests a percentage completed indicator, if the operation takes more than 10 seconds, which has three advantages: • It assure the user that the system has not crashed • It indicates how long the user has to wait • It provides the user with something to look at, which makes the wait less painful (for this reason a graphic progress bar is far better than text)

17. Web site Response Times Cont’d • When the amount of work to be done by an operation is unknown a percentage completed indicator might be inappropriate • In this case a number of progress indicators are still available: • If an operation goes through a defined set of steps, these steps could be displayed as they are started and completed • As a last resort progress indicator, such as dots printed on a status line or a spinning ball could be used – which indicates that the system is working

18. Web site Response Times Cont’d • For operations that complete within 2 – 10 seconds a percentage done indicator is unnecessary6

19. Web Site Design Principles1,8 • In this section we will: • Briefly discuss interface design • Present five Web site design principles http://www.cybermarket.co.uk/ishop/images/923/429_904.jpg

20. 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

21. 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

22. Web Site Design Principles Cont’d • So what makes a good Web interface Cont’d? • 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)

23. 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

24. 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

25. 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

26. 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

27. 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

28. 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

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

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

36. 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

37. 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

38. 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

39. 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

40. 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 • 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

41. Software Validation/Verification2 • What is the difference between validation and verification? • Identify test requirements • Develop test cases • Execute tests • Record test results

42. Identify Test Requirements • Software validation is the process of ensuring that the developed software is the software the customer really wanted • This is achieved through constant communication with the customer, verifying requirements and user acceptance testing • User acceptance testing is when the software is tested by the user; and error or issues are highlighted by them

43. Identify Test Requirements Cont’d • Software verification is the process of ensuring that the developed software does what the specifications say that it should do • This is achieved through: • unit testing • system test • integration testing

44. Identify Test Requirements Cont’d • In both software validation and verification test requirements and test cases are identified • The identification of test requirements is fundamental to the testing process • Test requirements specify what must be tested

45. Identify Test Requirements Cont’d • Some test requirements for our worked example are: • Ensure that all clickable links take the user to the correct page • Ensure that the pages look the same in the following browsers • Microsoft Internet Explorer • Netscape Navigator

46. Identify Test Requirements Cont’d • Ensure that the detailed news items are summarised properly on the home page (a content issue) • Ensure that all Web pages are valid HTML 4.0 Transitional • What are other possible test requirements for our example?

47. Develop Test Cases • Tests cases describe the way to execute a test and its expected result • Tests case are made up of: • a pre-condition • a test • a post-condition • Test cases are tied to test requirements and are based on the software specifications

48. Develop Test Cases Cont’d • The pre-condition describes the state that the system must be in before a test • A test describes the steps the tester must go through to execute the test • The post-condition describes the state of the system after the test is executed

49. Develop Test Cases Cont’d • A test case is said to have passed, if after executing the test case the documented post-condition is the resulting state of the system after the test • Otherwise the test has failed.

50. Test Case Examples • Pre-condition: • The user is at the home page of the COMP1130 course Web site • Test • Click on the Contact link • Post-condition • The contact page is displayed