Date post: | 09-Apr-2017 |
Category: |
Education |
Upload: | sur-college-of-applied-sciences |
View: | 714 times |
Download: | 0 times |
SFDV2001 Lecture 3, Semester, Year
Lecture 9:Usability ,Accessibility & professional practices
SFDV2001Web Development
SFDV2001 Lecture 3, Semester, Year
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.
SFDV2001 Lecture 3, Semester, Year
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:PersonalCommercialClubs and societies
Creating successful web pages depends on your ability to critically analyse pages that you create and encounter.
SFDV2001 Lecture 3, Semester, Year
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)
http://www.trademe.co.nz/http://www.sorted.org.nz/
Some examples: Those who don’t get it:
http://www.1amp.com/http://www.resultassociates.com/
Those who do get it:
SFDV2001 Lecture 3, Semester, Year
ContentQuality content is vital.
Your site needs to contain things of use or interest to those who visit.Writing for the webText should be:
SimpleClearShort
Avoid jargon & “geek speak”.Check spelling and grammar, names and dates, etc.Appropriate titles
Used by both people and search engines.Should help distinguish pages from each other.
SFDV2001 Lecture 3, Semester, Year
UnfinishedPoorly planned.Enthusiasm lost.The dreaded “under construction” page.
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 findContact information - email, phone, addressStore locationOpen hours
SFDV2001 Lecture 3, Semester, Year
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
Tiny text
Poor contrast
Inconsistency
Horizontal scrolling
Odd Behavior
SFDV2001 Lecture 3, Semester, Year
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.
SFDV2001 Lecture 3, Semester, Year
WAI Principles• Perceivable
– The information must be able to be perceived• Operable
– All links and actions of the page must be able to be activated by as many devices as possible
• Understandable– Use language that can be understood by as many people
as possible• Robust
– As the ability of the user decreases there is little change to their access to the content
SFDV2001 Lecture 3, Semester, Year
Who is involved?
• Disabled, and able bodied.• Disabled
– 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 – knowledge levels– devices
• Braille, Mobile phone, PDA,....
SFDV2001 Lecture 3, Semester, Year
Blind users
• Electronic information important part of information access.
• Special programs– Screen readers – JAWS, FoxyVoice– Braille readers
• Visual Barriers– Information in colour only– Image based navigation– Text inserted as images– Lack of Alt attributes
SFDV2001 Lecture 3, Semester, Year
Colour Blindness
• 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
SFDV2001 Lecture 3, Semester, Year
Colour Blindness test
25 45 2956
6 8 5
SFDV2001 Lecture 3, Semester, Year
Deaf users• Web access very important, and mostly fine• Problems
– Audio instructions– Multimedia content such as recorded lectures
• Solutions– Provide subtitles– Markup alerts so they have redundant information such as
visual signal.– Use redundancy as much as possible
• Blue underlined is an example of redundancy.
SFDV2001 Lecture 3, Semester, Year
Mobility issues
• Pointer control for aging population• concerns over mouse use• Parkinson’s• Many neurological disorders• General mobility
– Often house bound– Internet important part of social activities– Shopping and information– Quadriplegic and tetraplegic
• Head mounted mouse control, large keyboards
SFDV2001 Lecture 3, Semester, Year
PDAs and Wireless• Downloads to PDAs are expensive
– Turn off images and heavily compact text– 1c/k
• Small screens– Often optimised for text display– Resolutions quite low
• Hands free operation– voice recognition– page reading
• navigation in cars, business information, etc....
SFDV2001 Lecture 3, Semester, Year
Issue - Separate pages• Suggestion
– Treat disability like a different language and provide separate pages for text only, colour blind, French, …
– Good• Very easy to conform to standards as primary concern becomes
solving specific problems• More specific information for those groups
– Bad• 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
SFDV2001 Lecture 3, Semester, Year
Practical Steps• 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
SFDV2001 Lecture 3, Semester, Year
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.
SFDV2001 Lecture 3, Semester, Year
Web browsers will display any old rubbish.
SFDV2001 Lecture 3, Semester, Year
• No doctype
• 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.
SFDV2001 Lecture 3, Semester, Year
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 -->
CommentsDevelopers who take the time to properly document their work make their lives, and the lives of others, much easier.
SFDV2001 Lecture 3, Semester, Year
Use tabs to indent the different levels of your code:
<table><tr>
<td><p>Content</p>
</td></tr>
</table>
Code LayoutLayout 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.
SFDV2001 Lecture 3, Semester, Year
EfficiencyAsk yourself - Is there a simpler, more elegant way of doing this?
Tables:- keep your tables as simple as possible - why use two when one will do?
Frames:- Take advantage of <base> where appropriate.
Alignment:- Use align for single line centering and <center> for blocks of central alignment.
<center><h1>Ice Cream</h1></center>Vs<h1 align="center">Ice Cream</h1>
SFDV2001 Lecture 3, Semester, Year
FontsIf 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
ImagesUse 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."
SFDV2001 Lecture 3, Semester, Year
Image size and the webDialup (56k modem) = 56 kilobits 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.
SFDV2001 Lecture 3, Semester, Year
StandardsAny professional worth their salt has a good understanding of the standards of their trade. Web developers are no different.
HTML standards:
- HTML 4.01 Transitional/Frameset/Strict
- XHTML 1.0 Transitional/Frameset/Strict
- XHTML 1.1
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”>
SFDV2001 Lecture 3, Semester, Year
ValidationUse 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:
- Some values inside quotation marks. E.g.:
<img src="test.jpg" alt="" width="banana" height="rabbit">
will pass in online validators.
- How sensible and/or efficient your code is.
SFDV2001 Lecture 3, Semester, Year
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 grammarNothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.
SFDV2001 Lecture 3, Semester, Year
TestingCheck 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.
SFDV2001 Lecture 3, Semester, Year
InvolvementKeep 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/)
SFDV2001 Lecture 3, Semester, Year
Recommended sites:Dey Alexander (user experience design specialist)http://www.deyalexander.com/
Jakob Nielsen’s websitehttp://www.useit.com/
Vincent Flanders’ Web Pages That Suckhttp://www.webpagesthatsuck.com/
The Web Standards Project:http://www.webstandards.org/
Further reading:Don’t Make Me Think by Steve KrugWeb Bloopers by Jeff Johnson