Transcript User Centred Design.

User Centred Design
We shall look at:






Considering your intended audience
Use of fonts
Selecting graphics
The style of the written content
Other issues relating to your design
Accessibility for visitors with disabilities
Overview of Last Week
Last week we looked at:
 Creating a paper based design
 Creating storyboards
 Creating a wireframe model of your site
System Prototype
A 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
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 the back button?
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
e.g. Colour
Red
Egypt
China
Japan
France
Death
Happiness
Anger / Danger
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:
 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.
Basing your site on a metaphor
e.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 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!
Welcome to My Site
Hi my name is Matthew and this is my Web Site.
Or…
Welcome to My Site
Hi my name is Matthew and this is my Web Site.
Repetition
Alignment
Make 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.
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