1. Web Design

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

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

4. Design Principles  Useable Colour Layout  Predictability / Consistency / Guidance not control  Economy - Minimum number of steps necessary  Accessibility Making it available to all

5. Web Page Design  Storyboards / screen mockups  Flow Charts / Page linkage

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

7. Rough example

9. 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!)

10. 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. htm http://www.soc.staffs.ac.uk/flk1/test/test. htm

11. 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 Company info About Us Products

12. Multi-Dimensional Map Home Products Company Map Latest Offers CD DVD

13. Design Aspects - Colour

14. Colour Source: W3 Schools 2006 16,777,21665,536256 January 200681%16%3% July 200577%20%3% January 200572%25%3% July 200469%28%3% January 200465%31%4% July 200355%40%5% January 200351% 44%5% October 200249%46%5%

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

16. Colour Blind  Care should be taken when designing as 1 in 12 men and 1 in 200 women are colour blind.

17. Colour Blindness  http://www.vischeck.com/ http://www.vischeck.com/  http://www.iamcal.com/toys/colors/inde x.php 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.

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

19. Panels

20. Design Aspects - Fonts

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

22. Mac or PC – spacing and fonts..

23. 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 16- point, the indent would change to 32- point.

24. Browser font size.. http://www.soc.staffs.ac.uk/flk1/test/font.htm

25. Page Size, Screen Layout and Content

26. Screen Size http://www.w3schools.com 2006Higher1024x768800x600640x480Unknown January17%57%20%0%6% 2005 July14%55%25%0%6% January12%53%30%0%5% 2004 July10%50%35%1%4% January10%47%37%1%5% 2003 July8%43%44%2%5% January6%40%47% 2%5% 2002 October 6%38%49%2%5%

27. 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/ http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/ layouts/

29. 800 x 600 real size

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

31. Fixed versus Flexible http://www.webstyleguide.com/page/examples/4.24a.html http://www.webstyleguide.com/page/examples/4.24b.html

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

34. Page Layout

35. Grids / Panels

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

37. One way…

38. If you have to…  Have jumps..

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

40. Consistency  A graphic theme or blocked colour theme

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

42. Plan for scanability..

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

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

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

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

48. 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 hereclick here Use  We have background information on the whalebackground information on the whale  Keep non visited and visited links different colours

49. Headers and Footers

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

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

52. 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/docu ments/PublicWebsite/public_caseforaccessibility.h cspessibility/uk-website-legal-requirements.shtml

53. Discussion…  How do we make things accessible?  Where can we look for more information on accessibility? Full page - http://www.w3.org/WAI/http://www.w3.org/WAI/ Quick Tips - http://www.w3.org/WAI/References/QuickTips/ 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/http://www.w3.org/TR/WCAG10/full- checklist.html http://www.w3.org/WAI/gettingstarted/ How they view the web - http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/ http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/

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

55. 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/WCAGhttp://www.w3.org/TR/WCAG Also use accessibility testers such as http://webxact.watchfire.com/

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

57. Evaluation – Testing the Usability

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

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

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

61. Web sites For HCI / Design Hints  http://www.webstyleguide.com/ http://www.webstyleguide.com/  http://www.useit.com/alertbox/designmist akes.html http://www.useit.com/alertbox/designmist akes.html  http://www.nomensa.com/resources/artic les.html http://www.nomensa.com/resources/artic les.html  http://www.csszengarden.com/ http://www.csszengarden.com/  http://www.webcredible.co.uk/user- friendly-resources/web-usability/ http://www.webcredible.co.uk/user- friendly-resources/web-usability/