User Centred Design User Centred Design We shall

User Centred Design

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

System Prototype

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 No Is it what the user wants?

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 Education Date format: 10/2/05 0 r 10/2/05? ? ? 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!

Repetition

Alignment

Proximity Make use of visual organisation to convey content organisation CSCI 1413 Programming Year 1 CSCI 2608 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 CSCI 2002 Visual Basic as a Second Language CSCI 2008 Networks & Communications INFO 1004 Application Development CSCI 2010 Developing Business Database Applications

Better… CSCI 1413 Programming Year 1 CSCI 2608 Multimedia and Internet Technology CSCI 2002 Visual Basic as a Second Language CSCI 2008 Networks & Communications INFO 1004 Application Development CSCI 2010 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

Use White Space

Rule of Thirds Which picture is best?

Think of an Image Split into Thirds