Lecture 9: Usability , Accessibility & professional practices SFDV2001 Web Development
What is usability? Why should we care about usability? Because if you don’t people won’t want to use your site. Remember t...
<ul><li>Pay close attention to how you feel when you use a web page.  </li></ul><ul><ul><li>What makes you feel frustrated...
First Impression rule: You should be able to look at the home page of any site and figure out what the site is about withi...
Content Quality content is vital.  Your site needs to contain things of use or interest to those who visit. <ul><li>Writin...
<ul><li>Out of date   </li></ul><ul><ul><li>For repeat visitors you need to regularly provide fresh content. </li></ul></u...
Backgrounds Flashing things Entrance pages Flash Intros Be careful with: Avoid: Music that starts up without warning Pop-u...
What is Accessibility <ul><li>WAI- Web Accessibility Initiative </li></ul><ul><ul><li>Setting standards for accessibility ...
WAI Principles <ul><li>Perceivable </li></ul><ul><ul><li>The information must be able to be perceived </li></ul></ul><ul><...
Who is involved? <ul><li>Disabled, and able bodied. </li></ul><ul><li>Disabled </li></ul><ul><ul><li>Among adult computer ...
Blind users <ul><li>Electronic information important part of information access. </li></ul><ul><li>Special programs </li><...
Colour Blindness <ul><li>10% of men have some form of colour blindness.  Mostly red-green. 1% of women </li></ul><ul><li>S...
Colour Blindness test 25 45 29 56 6 8 5
Deaf users <ul><li>Web access very important, and mostly fine </li></ul><ul><li>Problems </li></ul><ul><ul><li>Audio instr...
Mobility issues <ul><li>Pointer control for aging population </li></ul><ul><li>concerns over mouse use </li></ul><ul><li>P...
PDAs and Wireless <ul><li>Downloads to PDAs are expensive </li></ul><ul><ul><li>Turn off images and heavily compact text <...
Issue - Separate pages <ul><li>Suggestion </li></ul><ul><ul><li>Treat disability like a different language and provide sep...
Practical Steps <ul><li>Avoid using imagemaps for navigation. </li></ul><ul><li>Do not use pop-ups. </li></ul><ul><li>Make...
What are professional practices? Making a web page isn't hard - anybody can get something on the web. Making quality web p...
Web browsers will display any old rubbish.
<ul><li>No  doctype   </li></ul><ul><li>No  <html>  tag </li></ul><ul><li>No  <head> ,  <title>  or  <body>  tags </li></u...
Use your comments to document what isn't obvious: When code is used for something other than its standard purpose. <form m...
Use tabs to indent the different levels of your code: <table> <tr> <td> <p>Content</p> </td> </tr> </table> Code Layout La...
<ul><li>Efficiency </li></ul><ul><li>Ask yourself - Is there a simpler, more elegant way of doing this? </li></ul><ul><li>...
Fonts If you specify a specific font face, you should always provide a suitable generic font family name too: <font face=&...
Image size and the web Dialup (56k modem) = 56 kilo bits  per second, not kilobytes!  56 kilobits = 7 kilobytes per second...
Standards <ul><li>Any professional worth their salt has a good understanding of the standards of their trade. Web develope...
<ul><li>Validation </li></ul><ul><li>Use a validation tool like the W3C's HTML validator </li></ul><ul><li>Be aware that t...
Don’t forget the text in your  <title> ,  alt , etc. Use a spell checker to help, but don’t rely on it alone.  Spelling an...
Testing Check and double-check that  all  your links work. Before and after you upload to your web server. Test on every b...
Involvement Keep up with what’s new in the field. There is always something to learn. For web development, one of the best...
Recommended sites: Dey Alexander (user experience design specialist) http://www.deyalexander.com/ Jakob Nielsen’s website ...
Upcoming SlideShare
Loading in...5
×

Accessibility Usability Professional Summry

472

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
472
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Project 1 (and project 2) application of these concepts is very Important.
  • Rules for personal sites are generally laxer but if you are working on something purely for your use, why publish it on the web? The act of placing something on the web invites an audience. Personal web sites can be read by potential employers. Commercial sites need to care about usability most - their viability relies on their ability to attract customers. Clubs and societies may have a reasonably limited audience and may wish to tailor their content to members.
  • Tip: Hold your breath while you page loads.
  • What’s the point of putting content on the web? To inform To advertise something To sell something To display your artistic ability To mislead
  • Provide on/off controls for music.
  • Show aboutsct.html as an example of a poor choice.
  • Clicker Q 1
  • Show sites if time.
  • Accessibility Usability Professional Summry

    1. 1. Lecture 9: Usability , Accessibility & professional practices SFDV2001 Web Development
    2. 2. What is usability? Why should we care about usability? Because if you don’t people won’t want to use your site. Remember there are millions of other web sites to use and they are all just a few clicks away. Usability is a quality used to refer to an interface’s ease of use. Usability is about ensuring that something you create is usable. Usable not by you, but by the intended audience. Usability is about enhancing the experience for all users.
    3. 3. <ul><li>Pay close attention to how you feel when you use a web page. </li></ul><ul><ul><li>What makes you feel frustrated or confused? </li></ul></ul><ul><ul><li>What makes your visit to a site a good one? </li></ul></ul><ul><li>Expectations for different kinds of sites vary: </li></ul><ul><ul><li>Personal </li></ul></ul><ul><ul><li>Commercial </li></ul></ul><ul><ul><li>Clubs and societies </li></ul></ul>Creating successful web pages depends on your ability to critically analyse pages that you create and encounter.
    4. 4. First Impression rule: You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed. - Vincent Flanders ( Web Pages that Suck ) <ul><ul><li>http://www.trademe.co.nz/ </li></ul></ul><ul><ul><li>http://www.sorted.org.nz/ </li></ul></ul>Some examples: <ul><ul><li>http://www.1amp.com/ </li></ul></ul><ul><ul><li>http://www.resultassociates.com/ </li></ul></ul>Those who don’t get it: Those who do get it:
    5. 5. Content Quality content is vital. Your site needs to contain things of use or interest to those who visit. <ul><li>Writing for the web </li></ul><ul><li>Text should be: </li></ul><ul><ul><li>Simple </li></ul></ul><ul><ul><li>Clear </li></ul></ul><ul><ul><li>Short </li></ul></ul><ul><li>Avoid jargon & “geek speak”. </li></ul><ul><li>Check spelling and grammar, names and dates, etc. </li></ul><ul><li>Appropriate titles </li></ul><ul><ul><ul><li>Used by both people and search engines. </li></ul></ul></ul><ul><ul><ul><li>Should help distinguish pages from each other. </li></ul></ul></ul>
    6. 6. <ul><li>Out of date </li></ul><ul><ul><li>For repeat visitors you need to regularly provide fresh content. </li></ul></ul><ul><ul><li>For many sites the “freshness” of their content is key. http://news.bbc.co.uk </li></ul></ul><ul><li>Make important information easy to find </li></ul><ul><ul><li>Contact information - email, phone, address </li></ul></ul><ul><ul><li>Store location </li></ul></ul><ul><ul><li>Open hours </li></ul></ul><ul><li>Unfinished </li></ul><ul><ul><ul><li>Poorly planned. </li></ul></ul></ul><ul><ul><ul><li>Enthusiasm lost. </li></ul></ul></ul><ul><ul><ul><li>The dreaded “under construction” page. </li></ul></ul></ul>
    7. 7. Backgrounds Flashing things Entrance pages Flash Intros Be careful with: Avoid: Music that starts up without warning Pop-up windows Required plug-ins Appearance Problems <ul><li>Tiny text </li></ul><ul><li>Poor contrast </li></ul><ul><li>Inconsistency </li></ul><ul><li>Horizontal scrolling </li></ul><ul><li>Odd Behavior </li></ul>
    8. 8. What is Accessibility <ul><li>WAI- Web Accessibility Initiative </li></ul><ul><ul><li>Setting standards for accessibility </li></ul></ul><ul><ul><li>Key component of the W3C's involvement in directing the development of the web </li></ul></ul>&quot;The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.&quot; -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web Accessibility is about measures you can take to make your pages easier to use for people with disabilities. <ul><li>Why is it so important? </li></ul><ul><ul><li>People who cannot access information in a standard format often turn to the web as a replacement. </li></ul></ul>
    9. 9. WAI Principles <ul><li>Perceivable </li></ul><ul><ul><li>The information must be able to be perceived </li></ul></ul><ul><li>Operable </li></ul><ul><ul><li>All links and actions of the page must be able to be activated by as many devices as possible </li></ul></ul><ul><li>Understandable </li></ul><ul><ul><li>Use language that can be understood by as many people as possible </li></ul></ul><ul><li>Robust </li></ul><ul><ul><li>As the ability of the user decreases there is little change to their access to the content </li></ul></ul>
    10. 10. Who is involved? <ul><li>Disabled, and able bodied. </li></ul><ul><li>Disabled </li></ul><ul><ul><li>Among adult computer users in the United States: </li></ul></ul><ul><ul><ul><li>1 in 4 has a vision difficulty </li></ul></ul></ul><ul><ul><ul><li>1 in 4 has a dexterity difficulty </li></ul></ul></ul><ul><ul><ul><li>1 in 5 has a hearing difficulty </li></ul></ul></ul><ul><ul><ul><ul><ul><li>Source : Study Conducted by Forrester Research, 2004 </li></ul></ul></ul></ul></ul><ul><li>Able bodied with different </li></ul><ul><ul><li>knowledge levels </li></ul></ul><ul><ul><li>devices </li></ul></ul><ul><ul><ul><li>Braille, Mobile phone, PDA,.... </li></ul></ul></ul>
    11. 11. Blind users <ul><li>Electronic information important part of information access. </li></ul><ul><li>Special programs </li></ul><ul><ul><li>Screen readers – JAWS, FoxyVoice </li></ul></ul><ul><ul><li>Braille readers </li></ul></ul><ul><li>Visual Barriers </li></ul><ul><ul><li>Information in colour only </li></ul></ul><ul><ul><li>Image based navigation </li></ul></ul><ul><ul><li>Text inserted as images </li></ul></ul><ul><ul><li>Lack of Alt attributes </li></ul></ul>
    12. 12. Colour Blindness <ul><li>10% of men have some form of colour blindness. Mostly red-green. 1% of women </li></ul><ul><li>Some have only grey vision. </li></ul><ul><li>Often people cope by using redundancy </li></ul><ul><ul><li>Lights at intersections </li></ul></ul><ul><ul><li>Shape of fruit </li></ul></ul><ul><ul><li>Often intensity (grey) is good enough </li></ul></ul>
    13. 13. Colour Blindness test 25 45 29 56 6 8 5
    14. 14. Deaf users <ul><li>Web access very important, and mostly fine </li></ul><ul><li>Problems </li></ul><ul><ul><li>Audio instructions </li></ul></ul><ul><ul><li>Multimedia content such as recorded lectures </li></ul></ul><ul><li>Solutions </li></ul><ul><ul><li>Provide subtitles </li></ul></ul><ul><ul><li>Markup alerts so they have redundant information such as visual signal. </li></ul></ul><ul><ul><li>Use redundancy as much as possible </li></ul></ul><ul><ul><ul><li>Blue underlined is an example of redundancy. </li></ul></ul></ul>
    15. 15. Mobility issues <ul><li>Pointer control for aging population </li></ul><ul><li>concerns over mouse use </li></ul><ul><li>Parkinson’s </li></ul><ul><li>Many neurological disorders </li></ul><ul><li>General mobility </li></ul><ul><ul><li>Often house bound </li></ul></ul><ul><ul><li>Internet important part of social activities </li></ul></ul><ul><ul><li>Shopping and information </li></ul></ul><ul><ul><li>Quadriplegic and tetraplegic </li></ul></ul><ul><li>Head mounted mouse control, large keyboards </li></ul>
    16. 16. PDAs and Wireless <ul><li>Downloads to PDAs are expensive </li></ul><ul><ul><li>Turn off images and heavily compact text </li></ul></ul><ul><ul><li>1c/k </li></ul></ul><ul><li>Small screens </li></ul><ul><ul><li>Often optimised for text display </li></ul></ul><ul><ul><li>Resolutions quite low </li></ul></ul><ul><li>Hands free operation </li></ul><ul><ul><li>voice recognition </li></ul></ul><ul><ul><li>page reading </li></ul></ul><ul><ul><ul><li>navigation in cars, business information, etc.... </li></ul></ul></ul>
    17. 17. Issue - Separate pages <ul><li>Suggestion </li></ul><ul><ul><li>Treat disability like a different language and provide separate pages for text only, colour blind, French, … </li></ul></ul><ul><ul><li>Good </li></ul></ul><ul><ul><ul><li>Very easy to conform to standards as primary concern becomes solving specific problems </li></ul></ul></ul><ul><ul><ul><li>More specific information for those groups </li></ul></ul></ul><ul><ul><li>Bad </li></ul></ul><ul><ul><ul><li>Easy to allow information to become out of date </li></ul></ul></ul><ul><ul><ul><li>Ghettoization of disable people. </li></ul></ul></ul><ul><ul><ul><li>Perception of disabled access as something you have to tack on the end of development </li></ul></ul></ul>
    18. 18. Practical Steps <ul><li>Avoid using imagemaps for navigation. </li></ul><ul><li>Do not use pop-ups. </li></ul><ul><li>Make tables that are readable when read left to right, row by row. </li></ul><ul><li>Install Fangs if using firefox, and FoxyVoice if using Windows </li></ul><ul><li>Check pages in black and white mode. </li></ul><ul><li>Single-pixel image that links to the main content of the page. </li></ul><ul><li>Blue Underline , two forms of signal giving redundancy </li></ul>
    19. 19. What are professional practices? Making a web page isn't hard - anybody can get something on the web. Making quality web pages requires skill, requires a professional. Some professional practices are things that by law you should conform to. Others are the things that distinguish your work from that of an amateur. We expect professionals to possess significant skills, that they produce work of a quality not obtainable by an amateur and that their knowledge is significant.
    20. 20. Web browsers will display any old rubbish.
    21. 21. <ul><li>No doctype </li></ul><ul><li>No <html> tag </li></ul><ul><li>No <head> , <title> or <body> tags </li></ul><ul><li>No structural tags </li></ul><ul><li>Multi-word face value not quoted </li></ul><ul><li>Incorrect values for size </li></ul><ul><li>No closing tags </li></ul><ul><li>No alt etc. for image. </li></ul>
    22. 22. Use your comments to document what isn't obvious: When code is used for something other than its standard purpose. <form method=&quot;get&quot; action=&quot;/bin/search&quot;> <!-- Table controls layout of search form --> <table border=&quot;0&quot;> <ul><li>To make identifying the key elements of your page structure easier: </li></ul><ul><li><!--Table controlling page layout --> </li></ul><ul><li><!-- Main navigation bar --> </li></ul><ul><li><!-- Text only navigation strip --> </li></ul><ul><li><!-- Page footer --> </li></ul>Comments Developers who take the time to properly document their work make their lives, and the lives of others, much easier.
    23. 23. Use tabs to indent the different levels of your code: <table> <tr> <td> <p>Content</p> </td> </tr> </table> Code Layout Layout your code in a way that makes it easy to read. In the lab Taco will do this for you (with various degrees of success). You can, of course, alter Taco's attempt or forgo the automatic option altogether and do it manually.
    24. 24. <ul><li>Efficiency </li></ul><ul><li>Ask yourself - Is there a simpler, more elegant way of doing this? </li></ul><ul><li>Tables: </li></ul><ul><ul><li>keep your tables as simple as possible - why use two when one will do? </li></ul></ul><ul><li>Frames: </li></ul><ul><ul><li>- Take advantage of <base> where appropriate. </li></ul></ul><ul><li>Alignment: </li></ul><ul><ul><li>Use align for single line centering and <center> for blocks of central alignment. </li></ul></ul><ul><li><center><h1>Ice Cream</h1></center> </li></ul><ul><li>Vs </li></ul><ul><li><h1 align=&quot;center&quot;>Ice Cream</h1> </li></ul>
    25. 25. Fonts If you specify a specific font face, you should always provide a suitable generic font family name too: <font face=&quot;arial, sans-serif &quot;> font-family: courier, monospace Images Use correct width and height specifications. Resize your images with graphic editing software not with your HTML code. Use good alt values - descriptive sentences. alt=&quot;Percy the cat.&quot; alt=&quot;Giraffe in hiking gear.&quot;
    26. 26. Image size and the web Dialup (56k modem) = 56 kilo bits per second, not kilobytes! 56 kilobits = 7 kilobytes per second. So, a single 32KB image will take at least 4.5 seconds. &quot;Broadband&quot; starts at 256 kilobits (32KB per second) maximum. 1 megabit (1024 kilobits) broadband = 128KB per second max.
    27. 27. Standards <ul><li>Any professional worth their salt has a good understanding of the standards of their trade. Web developers are no different. </li></ul><ul><li>HTML standards: </li></ul><ul><ul><li>- HTML 4.01 Transitional/Frameset/Strict </li></ul></ul><ul><ul><li>XHTML 1.0 Transitional/Frameset/Strict </li></ul></ul><ul><ul><li>XHTML 1.1 </li></ul></ul><ul><li>Use the right doctype for your code. </li></ul><ul><li><!Doctype HTML Public “-//W3C//DTD HTML 4.01 Transitional//EN”> </li></ul><ul><li><!Doctype HTML Public “-//W3C//DTD HTML 4.01//EN”> </li></ul>
    28. 28. <ul><li>Validation </li></ul><ul><li>Use a validation tool like the W3C's HTML validator </li></ul><ul><li>Be aware that they can't check everything. You need to manually verify your code too. Validation tools won't check: </li></ul><ul><ul><li>Some values inside quotation marks. E.g.: </li></ul></ul><ul><ul><li><img src=&quot;test.jpg&quot; alt=&quot;&quot; width=&quot;banana&quot; height=&quot;rabbit&quot;> </li></ul></ul><ul><ul><li>will pass in online validators. </li></ul></ul><ul><ul><li>How sensible and/or efficient your code is. </li></ul></ul>
    29. 29. Don’t forget the text in your <title> , alt , etc. Use a spell checker to help, but don’t rely on it alone. Spelling and grammar Nothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.
    30. 30. Testing Check and double-check that all your links work. Before and after you upload to your web server. Test on every browser and operating system you can get your hands on. Test with different connection speeds. Test on different screen resolutions. Test on different monitor types. Usability testing.
    31. 31. Involvement Keep up with what’s new in the field. There is always something to learn. For web development, one of the best way to stay current is to participate in and read the many quality web-based publications in the profession. A List Apart ( http://alistapart.com/ ) Digital Web Magazine ( http://www.digital-web.com/ ) Style Gala ( http://www.stylegala.com/ ) Mailing Lists: W3C ( http://www.w3.org/Mail/ )
    32. 32. Recommended sites: Dey Alexander (user experience design specialist) http://www.deyalexander.com/ Jakob Nielsen’s website http://www.useit.com/ Vincent Flanders’ Web Pages That Suck http://www.webpagesthatsuck.com/ The Web Standards Project: http://www.webstandards.org/ Further reading: Don’t Make Me Think by Steve Krug Web Bloopers by Jeff Johnson
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×