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 hypothetical content – just for
page layout
 http://www.soc.staffs.ac.uk/flk1/test/test.h
tm
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 when designing 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/inde
x.php
Hats.
As seen by a person
with deuteranopia.
As seen by a person
with protanopia, another
form 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
Design Aspects 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
Page Size, Screen Layout and
Content
Screen Size
2006
Higher
1024x768
800x600
640x480
Unknown
17%
57%
20%
0%
6%
July
14%
55%
25%
0%
6%
January
12%
53%
30%
0%
5%
July
10%
50%
35%
1%
4%
January
10%
47%
37%
1%
5%
July
8%
43%
44%
2%
5%
January
6%
40%
47%
2%
5%
6%
38%
49%
2%
5%
January
2005
2004
2003
2002
October
http://www.w3schools.com
Best bet?
 Design for multiple screen resolutions





Frames, Tables etc. – Use % not fixed
pixels
Make sure design works well with different
font sizes and different resolutions
Use style sheets for layout
Min width and max width (But not work in all
browsers yet)
http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/
layouts/
800 x 600 real size
Page Layout
 HTML was designed by engineers..before
you could put a graphic on the web.
 If you place a chunk of text on a Web page,
the dimensions of the viewer's browser
window will determine the line length.
 When the user resizes his or her window,
the text reflows to fill the new space.
 But the graphic does not resize
 http://www.soc.staffs.ac.uk/flk1/test/flow.htm
Fixed versus Flexible
http://www.webstyleguide.com/page/examples/4.24a.html
http://www.webstyleguide.com/page/examples/4.24b.html
Page Design
 Interesting To The User
 Try blocking the areas of your web page
Not too much on navigation
 Content should be 50 – 80% of page
 Be careful about the amount of white
space
 Try different size monitors

Page Layout
Grids / Panels
The Scroll factor…
 Never horizontally!!!
 Try and avoid vertically…
 Most important information should be seen..
One way…
If you have to…
 Have jumps..
Short Versus Long Pages
 Shorter Web pages should be used for:
Home pages and menu or navigation pages
 Documents to be read online
 Pages with very large graphics
 Longer pages are:
 Easier to maintain (content is in one piece,
not in linked chunks)
 More like the structure of their paper
counterparts (not chopped up)
 Easier for users to download and print

Consistency
 A graphic theme or blocked colour theme
Content Design
 The actors can be well dressed and good at their job, but
the play is the important thing!
 Be succinct - Write for scanability


People read the first sentence, then scan for hyperlinks
If you have lots of information – give them a print version
 Use things like
 Concise text / Bullet points or scannable text
 Neutral language
 Quality content is one of the most important factors in web
usability


What’s in this site for me?
Keep it up to date!
Plan for scanability..
Credibility
 Don’t fill your pages with junk
 Don’t be amateur – animated gifs everywhere
etc.
 It’s the visual appearance that the user sees
first
 Don’t open new windows all the time! – It
pollutes the screen
 Tell the user things – don’t assume they know
what your site is about.
The Home Page
 The most important
 Links to on every page - Some people use the
logo..but do not assume!
 Types





Menu
News
Path based – specific target audience drill down
Splash Screen
Combination of the above
 Graphics or Text????
Site Maps
 Would you have a
book without an
index or contents
page???
 A web site can be
so much bigger
 Finding your way
about – search /
a-z pages
Graphics Versus Text
 A good balance…
 Think of the
audience
 Think of small
graphics or slices
Navigation
 Navigation
Where am I? / Where have I been? / Where can
I go?
 Heading bar..the same each page..not too wide
 Menus..same place, same order each page
 Hyperlinks - use groups of words for a link


Not


For background information on the whale, click here
Use

We have background information on the whale
 Keep non visited and visited links different colours
Headers and Footers
Time to Load
 ‘Lets give them better design and they are happy to wait
for it!’ – wrong!
 Everyone does not have a broadband connection!
 If it takes longer than 10 sec, people will go elsewhere!
 Keep those download times consistent for each re-visit
to the site
What is accessibility?
 "The power of the Web is in its universality. Access
by everyone regardless of disability is an essential
aspect."
-- Tim Berners-Lee, W3C Director and inventor of the
World Wide Web
 For a website to be accessible, its content must be
available to everyone, including people with
disabilities.
 Type it in a web browser…you will see the results you
get..
Why do it?
 A proportion of your audience is disabled
 That should be enough reason why….
 And if its not…it’s the law


America – Section 508
 http://www.section508.gov
UK
 http://www.webcredible.co.uk/user-friendlyresources/web-acc
 http://www.rnib.org.uk/xpedio/groups/public/docum
ents/PublicWebsite/public_caseforaccessibility.hcs
pessibility/uk-website-legal-requirements.shtml
Discussion…
 How do we make things accessible?
 Where can we look for more information on
accessibility?




Full page - http://www.w3.org/WAI/
Quick Tips http://www.w3.org/WAI/References/QuickTips/
Full checklist - http://www.w3.org/TR/WCAG10/fullchecklist.html and
http://www.w3.org/WAI/gettingstarted/
How they view the web http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
Quick Tips from W3C
 Images & animations: Use the alt attribute to
describe the function of each visual.
 Image maps. Use the client-side map and text for
hotspots.
 Multimedia. Provide captioning and transcripts of
audio, and descriptions of video.
 Hypertext links. Use text that makes sense when
read out of context. For example, avoid "click here."
 Page organisation. Use headings, lists, and
consistent structure. Use CSS for layout and style
where possible.
Quick Tip 2
 Graphs & charts. Summarize or use the longdesc




attribute.
Scripts, applets, & plug-ins. Provide alternative content
in case active features are inaccessible or unsupported.
Frames. Use the noframes element and meaningful
titles.
Tables. Make line-by-line reading sensible. Summarize.
Check your work. Validate. Use tools, checklist, and
guidelines at http://www.w3.org/TR/WCAG

Also use accessibility testers such as
http://webxact.watchfire.com/
Quick Tips 3
 Allow the user to personalise
 http://www.drc-gb.org/accessoptions/index.asp
 Check site in different browsers to make
sure it’s the same
 Use the text size changer in the browser
to make sure the text size increases

Use ems for sizes not pixels
Evaluation – Testing the Usability
Test It!
 Don’t assume its right just because you
do it
 Show it to people
 Get them to use it
 Ask them to perform a task

Get to the screen with the history of Berlin
 Watch how they do it and ask them for
feedback
 Improve it!
Why Evaluate?
 To see if it suits its purpose
 To see if it is “useable”
 To see if the user understands the
navigation
 To see if the web interface works
 To see if it hits its target - what it aimed
to do
How do you evaluate
 Decide what you are evaluating
 Decide how you are going to
evaluate it
 Decide who is going to evaluate
 Perform the evaluation
 Measure reactions / results
 Analyse results
 Report on results
Web sites For HCI / Design
Hints
 http://www.webstyleguide.com/
 http://www.useit.com/alertbox/designmist
akes.html
 http://www.nomensa.com/resources/artic
les.html
 http://www.csszengarden.com/
 http://www.webcredible.co.uk/userfriendly-resources/web-usability/