View
215
Download
0
Category
Tags:
Preview:
Citation preview
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
Recommended