1. Page Size, Screen Layout and Content
Web Design Part 2
Page Size, Screen Layout and Content

2. Screen Size 2006 Higher 1024x768 800x600 640x480 Unknown January 17%
57%
20% 0% 6%
2005
July
14%
55%
25%
12%
53%
30% 5%
2004
10%
50%
35% 1% 4%
47%
37%
2003 8%
43%
44% 2%
40%
    2%
2002   
October
 6%
38%
49%

3. 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)
2 years down the line everyone has latest browser

5. 800 x 600 real size

6. 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

7. Fixed versus Flexible

8. Page Design Not too much on navigation
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

10. Page Layout

11. Grids / Panels

12. The Scroll factor… Never horizontally!!! Try and avoid vertically…
Most important information should be seen..

13. One way…

14. If you have to…
Have jumps..

15. 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

16. Consistency A graphic theme or blocked colour theme
Different sections have different colours but consistant throughout section

17. 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!
It can cost a company $5,000 for a badly written headline on an intranet. Suc – no more than 50% as in the print version

18. Plan for scanability..

19. 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.

20. Be obvious what the site is about…don’t deceive….

21. 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????

22. 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

23. Graphics Versus Text A good balance… Think of the audience
Think of small graphics or slices

24. 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

25. Headers and Footers

26. 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

27. 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..

28. Why do it? http://www.section508.gov
A proportion of your audience is disabled
That should be enough reason why….
And if its not…it’s the law
America – Section 508 UK

29. Discussion… How do we make things accessible?
Where can we look for more information on accessibility?
Full page -
Quick Tips -
Full checklist - and
How they view the web -

30. 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.

31. 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
Also use accessibility testers such as

32. Quick Tips 3 Allow the user to personalise
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

33. Evaluation – Testing the Usability

34. 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!

35. 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

36. 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

37. Web sites For HCI / Design Hints