Transcript HCI / Usability

Web Design
Why is design important for the
web?

Traditional systems
You controlled the user
 You know exactly who you are designing
for
 You know the exact screen spec


Web Pages….
You don’t know how they got there – via
home page or direct
 Search Engines
 Bookmarks

Planning the site..




Design your site
What are your goals for the site?
Who is the audience for the Web site?
Is a web site useable


If its not, then it will not attract visitors
How will you measure the success of
your site?
Consider the purpose of the site
 Test the site with users

Design Principles

Useable
Colour
 Layout

Predictability / Consistency / Guidance not control
 Economy - Minimum number of steps necessary


Accessibility

Making it available to all
Web Page Design


Storyboards / screen mockups
Flow Charts / Page linkage
Storyboards




A4 piece of paper, pen, Post-it Notes
PowerPoint with notes view on
Needs details of fonts, sizes, style sheet,
pictures, text
Should be able to pass it to someone else and
they build it
Rough example
Advantages and Disadvantages
of Storyboards

Advantages
Paper based so quick to draw
 Application independent
 Little or no skills required !


Disadvantages
Does not provide a realistic front end
 Does not provide full functionality
 Difficult to change (rub out!)

Designing a template



Gets your style sheet sorted
Build with rubbish content – just for page layout
http://www.soc.staffs.ac.uk/flk1/test/test.htm
A web site map / Flow chart



Drawn by hand / Done On Computer
Shows navigation through the web site
Can end up being a spiders web mess
Home
About Us
Company info
Products
Multi-Dimensional Map
Home
Products
CD
DVD
Company
Map
Latest
Offers
Design Aspects Colour
Colour
16,777,216
65,536
256
January 2006
81%
16%
3%
July 2005
77%
20%
3%
January 2005
72%
25%
3%
July 2004
69%
28%
3%
January 2004
65%
31%
4%
July 2003
55%
40%
5%
January 2003
51%
44%
5%
October 2002
49%
46%
5%
2006
Source: W3 Schools
Colour and Design



Colour is very effective for highlighting,
but must be used carefully.
Don’t use too many colours on one screen
Be consistent across the whole system


one colour should not be used for more
than one purpose.
Colours which clash should be avoided
e.g. purple with pink.
Colour Blind

Care should be taken as 1 in 12 men and 1
in 200 women are colour blind.
Colour Blindness


http://www.vischeck.com/
http://www.iamcal.com/toys/colors
/index.php
Hats.
As seen by a person with
As seen by a person with
protanopia, another form
deuteranopia.
of red/green deficit.
Presentation And Contrast



Positive presentation is when the
background is fairly subdued, i.e. white
background, dark text
Negative presentation – dark background,
white text.
Bright colours can be too much in blocks.
Consider panels
Panels
Fonts
Type Face







Font Size to be readable - clear and not
unusual
Use default or range of fonts as the default
Don’t use more than 2 fonts on a page
(unless you are displaying computer code
then a third font is ok)
Some fonts can be difficult to read, and
should be avoided.
Left Justified most of the text – can centre
or right justify a few lines for effect
Contrast foreground to background
Avoid blinking, zooming or moving text
Mac or PC –
spacing and fonts..
Font size
W3C recommends that you let users
set the base font size in their browser
and that you set all sizes using "em".
 Using em, if the user-set default is
12-point, then a 2-em text indent
would be 24-point, but if the user
used the text zoom feature of the
browser to change the size to 16point, the indent would change to 32point.

Browser font size..
http://www.soc.staffs.ac.uk/flk1/test/font.htm