1. User Centred Design We shall look at: Considering your intended audience Use of fonts Selecting graphics The style of the written content Other issues relating to your design Accessibility for visitors with disabilities

2. Overview of Last Week Last week we looked at: Creating a paper based design Creating storyboards Creating a wireframe model of your site

3. System Prototype A prototype aircraft might have the following features of the finished article: Shape Proportion Colour Wings The prototype may not have Glass windows Engines or any internal systems

4. Q. How do you know if the design of your site is correct? A. By seeking input from the client and potential users at each stage of the design process Design Prototype Evaluate Is it what the user wants? No

5. Generic User Characterisations We may make this process more efficient by working out what we know / don't know about our potential users Tool Preference Physical Differences. “Cultural” Differences.

6. Tool Preference do the users know how to – Use the back button? Use a query language? Frames? Pop up windows?

7. Physical Differences Physical disabilities Colour perception Visibility of small type – Age? Small children lack fine motor control

8. “Cultural” Differences Nationality e.g. Colour RedEgypt Death China Happiness Japan Anger / Danger France Aristocracy Date format: 10/2/05 0r 10/2/05??? Education research student v “Joe Public” Profession – e.g. Default means different things to bankers and programmers!

9. Organisational Considerations How would you organise a supermarket? Alphabetically? By some other logical consideration? – e.g. group dairy products? group fish products? group tinned products? Where would tinned tuna go?

10. How might you organise a web site? Group cookery recipes by: country? foodstuff? chronology? Group cookery magazines by: country? foodstuff? chronology

11. Contents may be organised by: Topic e.g. Yell.com (Yellow pages.) Following the sequence of task the user must follow. e.g. On-line registration process. Specific needs of the user e.g. personal v business banking. By means of a metaphor.

12. Basing your site on a metaphor e.g. Money to describe Time Time may be Spent Saved Wasted

13. http://www.bbc.co.uk/torchwood/

14. Selecting Fonts Welcome to my Fun Web Site

15. Selecting Graphics. Quality Bathrooms?

17. General Design Rules Contrast Make different parts of the site that are different – look different! Repetition Repeat visual elements of the design throughout the site. Alignment Give items a visual association to other items. Proximity Items related to each other should be grouped close to each other.

18. Contrast When you make two items different – make them really different! Welcome to My Site Hi my name is Matthew and this is my Web Site. Or… Welcome to My Site Hi my name is Matthew and this is my Web Site.

19. Repetition

20. Alignment Make sure that the type of alignment you use is suitable for the content. In this case the fact that the text is centred makes it very hard to read as we are used to following a line of text to the left of the paragraph. You see this text is so much easier to follow as the paragraph is left aligned which allows our eye to follow it so much more easily sorry about the lack of punctuation though.

22. Proximity Make use of visual organisation to convey content organisation. CSCI1413 Programming Year 1. CSCI2608 Multimedia and Internet Technology. Personal Tutoring. Final Year Project Proposals. Creating Database Applications in VB.NET. Visual Basic.NET. Access 2000 Trainer. Visual Basic Generic guides for using VB 6 and below Networks and Communications. Guide to HTML CSCI2002 Visual Basic as a Second Language. CSCI2008 Networks & Communications. INFO1004 Application Development. CSCI2010 Developing Business Database Applications

23. Better… CSCI1413 Programming Year 1. CSCI2608 Multimedia and Internet Technology. CSCI2002 Visual Basic as a Second Language. CSCI2008 Networks & Communications. INFO1004 Application Development. CSCI2010 Developing Business Database Applications Personal Tutoring. Final Year Project Proposals. Creating Database Applications in VB.NET. Visual Basic Generic guides for using VB 6 and below Visual Basic.NET. Access 2000 Trainer. Networks and Communications. Guide to HTML