User Centred DesignWe shall look at:

Considering your intended audienceUse of fontsSelecting graphicsThe style of the written contentOther issues relating to your designAccessibility for visitors with disabilities

Overview of Last WeekLast week we looked at:

Creating a paper based designCreating storyboardsCreating a wireframe model of your site

System PrototypeA 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

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

Generic User CharacterisationsWe may make this process more efficient by

working out what we know / don't know about our potential users

Tool PreferencePhysical Differences.“Cultural” Differences.

Tool Preferencedo the users know how to –

Use the back button? Use a query language? Frames? Pop up windows?

Physical Differences

Physical disabilitiesColour perceptionVisibility of small type – Age?Small children lack fine motor control

“Cultural” DifferencesNationality

e.g. ColourRed Egypt Death

China HappinessJapan Anger / DangerFrance 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!

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?

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:

Topice.g. Yell.com (Yellow pages.)

Following the sequence of task the user must follow.e.g. On-line registration process.

Specific needs of the usere.g. personal v business banking.

By means of a metaphor.

Basing your site on a metaphore.g. Money to describe Time

Time may be

Spent Saved Wasted

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

Selecting Fonts

Welcome to my Fun Web Site

Selecting Graphics.Quality Bathrooms?

Quality Bathrooms?

General Design RulesContrast

Make different parts of the site that are different – look different!

RepetitionRepeat visual elements of the design throughout the

site.

AlignmentGive items a visual association to other items.

ProximityItems related to each other should be grouped close to

each other.

ContrastWhen you make two items different – make

them really different!

Welcome to My SiteHi my name is Matthew and this is my Web

Site.

Or…

Welcome to My SiteHi my name is Matthew and this is my Web

Site.

Repetition

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

ProximityMake 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 belowNetworks and Communications.Guide to HTMLCSCI2002 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 belowVisual Basic.NET.

Access 2000 Trainer.

Networks and Communications.Guide to HTML