User Centred Design We shall look at: • Considering your intended audience • Use of fonts • Selecting graphics • Other issues relating to your design
Design Process so far We looked at: • Creating a paper based design • Creating storyboards • Creating a wireframe model of your site
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
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
Tool Preference do the users know how to – • Use a query language? • Frames? • Pop up windows?
Physical Differences • Physical disabilities • Colour perception • Visibility of small type – Age? • Small children lack fine motor control
“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!
How might you organise a web site? Group cookery recipes by: • country? • foodstuff? • chronology? Group cookery magazines by: • country? • foodstuff? • chronology
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.
Consider the Design for a • Children’s Nursery
Consider the Design for an • Undertaker
Consider the Design for a • Dentist
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.
Contrast • When you make two items different – make them really different!
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
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
Rule of Thirds • Which picture is best?