Website Development Website Design Prototyping

1. Website DevelopmentWebsite Design Prototyping Stewart Blakeway FML 213 blakews@hope.ac.uk http://hopelive.hope.ac.uk/computing/ 0151 291 3113

2. Session Objectives • To be able to describe a website team • To be able to describe the stages in prototyping a web page, in particular: • Navigation diagrams • Storyboards • Designing for different monitors • File organisation • Forward and backward compatibility is important

3. Emphasis on Information • In 1995. Al Gore coined the phrase “Information Superhighway” NOT “Design Superhighway” • Web is about delivering information • Design must be secondary

4. Backward Compatible • Compliant with older browsers without having to make a separate set of pages • Design fails gracefully– it is not pretty, but the information is there

5. Forward Compatibility • Not committed to one platform / browser • Ready for what the future brings • PDA • Mobile phone • TV • Screen readers (for the visually-impaired) • etc

6. Web Site Development • Agree a brief with your client • Gather your information • Prototyping • Implementation • Site maintenance

7. People Involved There are three groups of people to be considered • Client • Design team • Will vary according to scale and size of project • Users

8. The Team 1

9. The Team 2

10. Prototyping • Create storyboards • Agree upon navigation • Prepare page summaries • Rough working version of a few pages

11. Designing Navigation • Helps the designer decide how the user will move around the site • It should be: • Easy for your user to learn • Consistent • Provide feedback • Provide clear visual messages • Consider alternative navigation

12. Navigation Charts • Should represent the movement through the site • Can use multiple diagrams • To identify movement through main sections • To identify movement within sections • Otherwise known as a structure chart

13. Intro Home Sandwiches Contact About us Drinks Wholemeal French Wraps White Hot Cold Herbal Navigation diagram 1 All pages link back to the home page

14. Navigation structure • The structure adopted might be: • Linear • Hierarchical • Mixture • It should be logical • Ensure you • Illustrate navigation flow (arrows) • All boxes are appropriately named

15. Home Order About us Sandwiches Drinks Contact Wholemeal French White Wraps Hot Cold Herbal Home Sandwiches Contact About us Drinks Wholemeal French White Hot Cold Herbal Breadth v Depth • Howmany clicks to get to a page? • How many choices for your user? Wraps

16. Navigation Example 1

17. Navigation Example 2

18. Storyboards why? • To show your client? • To help you plan your layout? • Usually paper based • Should compliment the navigation diagram • Identify elements such as: • Layout and colour schemes • Font size and style • The use of other media elements (sound, video) • Interactivity

19. Storyboards Paper • Portrait layout Hand-drawn contents Project details Script Project Title:Date: Page Title: Filename: Script

20. Storyboard Example

21. Storyboard Example Project details Hand-drawn contents Script

22. Using Storyboards • Once drawn use to plan your website • Tables? Sizes? • Frames? Sizes? • Colours? • Fonts? • Size and type of images

23. Use of Templates • Layout shared by more than one page • Create one page, the template • Copy and paste content for each page into the template file and use Save Asto give the file a new name

24. Example

25. Template • Plan table layout • Screen grab of browser

26. Home Page Design • All major features should appear on screen • Preferably no scrolling at all • Might include • Nameof the site/business • Primary message • Indication of what the site is about • Main navigational options

27. Other Pages • Should contain: • Consistent navigation • Link to the home page • Consistent colour scheme • If scrolling, links at the bottom of the page • May be a different layout from the home page

28. Monitor sizes • Resolution– The number of dots displayed by the monitor • Consider the resolution of your site users monitor • 640 x 480 • 800 x 600 • 1024 x 768 • At present the majority of monitors • 1152 x 864 • 1280 x 1024 and more…..

29. 640 x 480 - horizontal scrolling

30. 800 x 600 – just right?

31. 1024 x 768 – white space

32. Pixels or percentage? • Fixed design • layout remains the same • Better control of layout • May require horizontal scrolling • May get large areas of white space • Flexible design • The whole window is filled • Don’t need to worry about monitor resolutions • Length of text may get too long (on large monitors) • Less coherent or predictable design

33. File Organisation Good practice to: • Call Home page index.htm • Store images in a separate folder • Store other media in separate folder • If large site create folders for pages • Use short meaningful names • No spaces • Be consistent - use lowercase • Use relative path names

34. Useful Links • www.webstyleguide.com • www.lynda.com/hext.html • www.7sisters.com

35. PBL 1 • Your first assessment details

36. The Scenario Ace Training Ltd is a small company, which delivers technical computer-training courses at its training centre in Manchester, and on customer premises throughout the UK. Despite being an IT training company, Ace has been slow in implementing IT in its head office, and has only now decided that a web site would be useful for marketing purposes. One of the sales assistants (Sue Devlin) has produced a prototype which she showed to her manager (Kris Kochanski). Kris raised the issue at the weekly management meeting and the board has decided that a web site should be implemented.

37. The Contract Ace Training Ltd has called in your team to advise them. They require your team to: • Evaluate the prototype (and fix any bugs). • Design an improved version, identifying good usability and design principles. • Implement a number of your suggested improvements. • Present your results, both orally and as a brief report. • Ace Training has asked a number of other teams to advise them; it is a competitive situation, and the best solution will be awarded a (small) prize

38. Deliverables • An improved Web site • A team report explaining: • Site map and storyboard for new site • Principles of good web site design with references • List of improvements with justifications • A presentation: • Demonstrating your web site • Explaining its purpose • Explaining how you improved the prototype, relating particularly to usability/ HCI criteria

39. Principles of good web site design with references Some research indicates that graphics distract users from completing their goal (Zhang, 1999), while other research suggests that users successfully ignore graphics when extracting necessary textual information (Diaper and Waelend, 2000). Diaper, D. and P. Waelend (2000) "World Wide Web working whilst ignoring graphics: good news for web page designers", Interacting with Computers, Vol. 13, No. 2:63-181, 2000. Zhang, P. (1999) "Will you use animation on your web pages?", In Doing Business on the Internet: Opportunities and Pitfalls (Sudweeks, F. and Romm, C.T. editors), Springer, Berlin, 35-51, 1999. Good Pass

40. Principles of good web site design with justification Some research indicates that graphics distract users from completing their goal (Zhang, 1999), while other research suggests that users successfully ignore graphics when extracting necessary textual information (Diaper and Waelend, 2000). This leads to the conclusion that although graphics are not necessarily compulsory in web design it is of the opinion that they do enhance the users experience and the user can ignore the graphics and extract the information required if necessary. Therefore after consultation with the group it was decided that we would use graphics to enhance our pages although we would use them sparsely. Diaper, D. and P. Waelend (2000) "World Wide Web working whilst ignoring graphics: good news for web page designers", Interacting with Computers, Vol. 13, No. 2:63-181, 2000. Zhang, P. (1999) "Will you use animation on your web pages?", In Doing Business on the Internet: Opportunities and Pitfalls (Sudweeks, F. and Romm, C.T. editors), Springer, Berlin, 35-51, 1999. Excellent Pass

41. Presentation • You are assessed on 14 points • The assessment is peer assessment, you will present your website and solution to the seminar class • Your peers will list 3 good points and 3 bad points

42. Presentation Criteria • Consistency of page structure and design throughout site. • White space is used actively to enhance design and structure. • Structure: Appropriate amount of information on each page, logically arranged. Most important information is in the centre of the screen in the viewable area at normal screen resolution. • Simplicity: No unnecessary graphics and distracters (e.g. animated gifs) • Evidence that accessibility issues have been considered. (e.g. Alt tags for images, colour blindness, dyslexia) • Text is legible (font size, contrast, sans serif) • Suitability: The overall design is applicable to the stated audience/ user and visually appealing.

43. Presentation Criteria • Standards: Evidence that pages meet the W3C XHTML validation criteria. • Portability: the pages have been tested on more than one browser (e.g. Firefox and IE) • Affordance: It is obvious what you can click on as a link. • Visibility: it is intuitive where a link will navigate • Reliability: Links work correctly (no broken links) • Simplicity: It is easy to navigate around the site. Reduced cognitive load: The user always knows where they are on the site (e.g. breadcrumbs) • Structure: It is clear where the user can go to from any page & browser back button unnecessary

44. NEXT ? • PBL1 (Seminar) • Get organised into Groups of 3 (maximum 4) • Download the PBL 1 Website, Criteria and Presentation Criteria • Start the critical analysis of the current website • Design the storyboards • Implement the navigation charts