Accessibility Usability Professional SummryPresentation Transcript
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 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.
Pay close attention to how you feel when you use a web page.
What makes you feel frustrated or confused?
What makes your visit to a site a good one?
Expectations for different kinds of sites vary:
Clubs and societies
Creating successful web pages depends on your ability to critically analyse pages that you create and encounter.
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 )
Those who don’t get it: Those who do get it:
Content Quality content is vital. Your site needs to contain things of use or interest to those who visit.
Writing for the web
Text should be:
Avoid jargon & “geek speak”.
Check spelling and grammar, names and dates, etc.
Used by both people and search engines.
Should help distinguish pages from each other.
Out of date
For repeat visitors you need to regularly provide fresh content.
For many sites the “freshness” of their content is key. http://news.bbc.co.uk
Make important information easy to find
Contact information - email, phone, address
The dreaded “under construction” page.
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
What is Accessibility
WAI- Web Accessibility Initiative
Setting standards for accessibility
Key component of the W3C's involvement in directing the development of the web
"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 Accessibility is about measures you can take to make your pages easier to use for people with disabilities.
Why is it so important?
People who cannot access information in a standard format often turn to the web as a replacement.
The information must be able to be perceived
All links and actions of the page must be able to be activated by as many devices as possible
Use language that can be understood by as many people as possible
As the ability of the user decreases there is little change to their access to the content
Who is involved?
Disabled, and able bodied.
Among adult computer users in the United States:
1 in 4 has a vision difficulty
1 in 4 has a dexterity difficulty
1 in 5 has a hearing difficulty
Source : Study Conducted by Forrester Research, 2004
Able bodied with different
Braille, Mobile phone, PDA,....
Electronic information important part of information access.
Screen readers – JAWS, FoxyVoice
Information in colour only
Image based navigation
Text inserted as images
Lack of Alt attributes
10% of men have some form of colour blindness. Mostly red-green. 1% of women
Some have only grey vision.
Often people cope by using redundancy
Lights at intersections
Shape of fruit
Often intensity (grey) is good enough
Colour Blindness test 25 45 29 56 6 8 5
Web access very important, and mostly fine
Multimedia content such as recorded lectures
Markup alerts so they have redundant information such as visual signal.
Use redundancy as much as possible
Blue underlined is an example of redundancy.
Pointer control for aging population
concerns over mouse use
Many neurological disorders
Often house bound
Internet important part of social activities
Shopping and information
Quadriplegic and tetraplegic
Head mounted mouse control, large keyboards
PDAs and Wireless
Downloads to PDAs are expensive
Turn off images and heavily compact text
Often optimised for text display
Resolutions quite low
Hands free operation
navigation in cars, business information, etc....
Issue - Separate pages
Treat disability like a different language and provide separate pages for text only, colour blind, French, …
Very easy to conform to standards as primary concern becomes solving specific problems
More specific information for those groups
Easy to allow information to become out of date
Ghettoization of disable people.
Perception of disabled access as something you have to tack on the end of development
Avoid using imagemaps for navigation.
Do not use pop-ups.
Make tables that are readable when read left to right, row by row.
Install Fangs if using firefox, and FoxyVoice if using Windows
Check pages in black and white mode.
Single-pixel image that links to the main content of the page.
Blue Underline , two forms of signal giving redundancy
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.
Web browsers will display any old rubbish.
No <html> tag
No <head> , <title> or <body> tags
No structural tags
Multi-word face value not quoted
Incorrect values for size
No closing tags
No alt etc. for image.
Use your comments to document what isn't obvious: When code is used for something other than its standard purpose. <form method="get" action="/bin/search"> <!-- Table controls layout of search form --> <table border="0">
To make identifying the key elements of your page structure easier:
<!--Table controlling page layout -->
<!-- Main navigation bar -->
<!-- Text only navigation strip -->
<!-- Page footer -->
Comments Developers who take the time to properly document their work make their lives, and the lives of others, much easier.
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.
Ask yourself - Is there a simpler, more elegant way of doing this?
keep your tables as simple as possible - why use two when one will do?
- Take advantage of <base> where appropriate.
Use align for single line centering and <center> for blocks of central alignment.
<h1 align="center">Ice Cream</h1>
Fonts If you specify a specific font face, you should always provide a suitable generic font family name too: <font face="arial, sans-serif "> 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="Percy the cat." alt="Giraffe in hiking gear."
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. "Broadband" starts at 256 kilobits (32KB per second) maximum. 1 megabit (1024 kilobits) broadband = 128KB per second max.
Any professional worth their salt has a good understanding of the standards of their trade. Web developers are no different.
- HTML 4.01 Transitional/Frameset/Strict
XHTML 1.0 Transitional/Frameset/Strict
Use the right doctype for your code.
<!Doctype HTML Public “-//W3C//DTD HTML 4.01 Transitional//EN”>
<!Doctype HTML Public “-//W3C//DTD HTML 4.01//EN”>
Use a validation tool like the W3C's HTML validator
Be aware that they can't check everything. You need to manually verify your code too. Validation tools won't check:
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.
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.
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/ )
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