Web Design Part 2

Page Size, Screen Layout and Content

Screen Size

http://www.w3schools.com

2006 Higher 1024x768 800x600 640x480 Unknown

January 17% 57% 20% 0% 6%

2005          

July 14% 55% 25% 0% 6%

January 12% 53% 30% 0% 5%

2004          

July 10% 50% 35% 1% 4%

January 10% 47% 37% 1% 5%

2003          

July 8% 43% 44% 2% 5%

January 6% 40% 47%     2% 5%

2002            

October  6% 38% 49% 2% 5%

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.htmlhttp://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-friendly-

resources/web-acc http://www.rnib.org.uk/xpedio/groups/public/

documents/PublicWebsite/public_caseforaccessibility.hcspessibility/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/full-

checklist.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.html http://www.csszengarden.com/ http://www.webcredible.co.uk/user-friendly-

resources/web-usability/