Web Technologies COMP6115 Session 2: Planning, Designing, Constructing and Testing Static Web Sites Dr. Paul Walcott Department of Computer Science, Mathematics and Physics University of the West Indies, Cave Hill Campus Barbados 01/12/06 © 2006/2007 Dr. Paul Walcott

Web Site Design Principles 1,2 In this section we will: In this section we will: –Briefly discuss interface design –Present five Web site design principles

Web Site Design Principles Cont’d What is an interface? 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 E.g. a remote control is the interface for a television set Or a light switch is the interface for an electric light Or a light switch is the interface for an electric light

Web Site Design Principles Cont’d So what makes a good Web interface? So what makes a good Web interface? –It must be easy to use The Web site functionality must be easy to deduce 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 E-commerce site should provide links to the checkout

Web Site Design Principles Cont’d So what makes a good Web interface 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 This includes no cryptic icons –In addition, the site should be interesting and colourful (without being irritating)

Web Site Design Principles Cont’d When designing a Web site the designer must consider: 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 Although this is a secondary issue –The size of the screen The designer unfortunately does not have full control over these media The designer unfortunately does not have full control over these media

Web Site Design Principles Cont’d It is important to set a Web site theme. This is a multi-step process: 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

Web Site Design Principles Cont’d To determine the goals of your Web site consider asking the following questions: 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 Goals need to be balanced against available resources and time

Web Site Design Principles Cont’d To determine the audience of the Web site consider the following factors: 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

Web Site Design Principles Cont’d When considering the Web site look and feel it is important to communicate: 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

Web Site Design Principles Cont’d Design principles Design principles –Nonlinear presentation –One or two screens per page –Simple navigation –Small graphics for faster page loading –Appealing visual effects

Web Site Design Principles Cont’d The WWW is characterised by: 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 These characteristics must be considered when designing a Web site

Web Site Design Principles Cont’d Nonlinear Presentation: 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

Web Site Design Principles Cont’d One or Two Screens Per Page: 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 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 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

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

Web Site Design Principles Cont’d Navigational links could be presented as: 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: 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

Web Site Design Principles Cont’d Smaller Graphics For Faster Page Loading: 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 Visitors will probably get fed up and leave the site

Web Site Design Principles Cont’d As a general rule: 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 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

Web Site Design Principles Cont’d Alternatively: 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 Typical buttons are 1-2KB each

Web Site Design Principles Cont’d Appealing Visual Effects: 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 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 Headings are usually in a different colour, bold or in a larger font

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

Web Site Design Principles Cont’d Some additional design hints include: 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 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

Web Site Design Principles Cont’d Some additional design hints include: 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

References [1] Darnell, Rick, et al., “HTML4: Unleased”, Sams.net Publishing, First Edition, 1997 [2] Zhao, Jensen J., “Web design and development for e-business”, Prentice Hall, 2003