User Centred Design

1. User Centred Design

2. User Centred Design We shall look at: • Considering your intended audience • Use of fonts • Selecting graphics • Other issues relating to your design

3. Design Process so far We looked at: • Creating a paper based design • Creating storyboards • Creating a wireframe model of your site

4. System Prototype

5. Design Prototype Evaluate Is it what the user wants? No 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

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

7. Tool Preference do the users know how to – • Use a query language? • Frames? • Pop up windows?

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

9. “Cultural” Differences • Nationality 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!

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. Consider the Design for a • Children’s Nursery

15. Consider the Design for an • Undertaker

18. Consider the Design for a • Dentist

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

22. Contrast • When you make two items different – make them really different!

23. Repetition

24. Alignment

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

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

27. Use White Space

28. Rule of Thirds • Which picture is best?

31. Think of an Image Split into Thirds