Transcript Web Design Part 2

Web Design Part 2
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)
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
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/docu
ments/PublicWebsite/public_caseforaccessibility.
hcspessibility/uk-website-legalrequirements.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 on
 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/designmistakes
.html
 http://www.nomensa.com/resources/articles.h
tml
 http://www.csszengarden.com/
 http://www.webcredible.co.uk/user-friendlyresources/web-usability/