Question: How can Internet Mapping Applications be made accessible?
Following I will identify areas that make web-based maps inaccessible as per WCAG 1.0 (please see section: 'Questions and Possible Research Areas').
Shout for Help
Question: How can Internet Mapping Applications be made accessible for users with disabilities?
If you are currently working on resolving any (or all) of these issues, know of somebody that is working on them or even know existing solutions, I would greatly appreciate if you pointed them out to me.
It is absolutely impossible to continue with our current approach to seek exceptions as a 'work-around'!
Background
It is important to note that I'm not talking about simple Google maps like driving directions or locate services that could be described through alternative, textual output.
Many times a map is the means to select, query, mix and eventually analyze data across multiple layers from multiple services. The input requires good vision and motor skills (mouse) and same applies to the output that is highly visual as well.
A simple example that illustrates this fact pretty well is shown in Figure 1, Drive Times from a specific location based on traffic grid.
Figure 1: ESRI Map: Drive Times; produced using ArcGIS JavaScript API, http://mapapps.esri.com/serverdemos/siteselection/index.html
The Law
Section 508 as explained by Authority 29 U.S.C. 794d: “Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”
This law is extended and applicable to companies that develop applications for the agency, i.e. ESRI has to adhere to the Section 508 Standards.
The Section 508 Checkpoints were translated into Web Content Accessibility Guidelines which cover most of Section 508 and describe its implementation in terms of HTML & CSS.
Current ‘Solution’
So far, exceptions to this law have been granted for the specific case of online maps. It is believed to impose an ‘undue burden’ to the agency/contractor to make maps accessible. In many cases a 1-800 number was provided that would help the user to get the same information.
Questions and Possible Research Areas
Currently the following WCAG checkpoints are Level 1 (A) show-stoppers and need to be solved/researched/implemented:
Checkpoint 1: Provide equivalent alternatives to auditory and visual content
How to read a map when blind? E.g. redundant text for active regions/content.
Checkpoint 2: Don’t rely on color alone
Map application could provide different color schemes/black&white/shades of gray?!
Checkpoint 6: Ensure that pages featuring new technologies transform gracefully
How to provide a map (or alternative) that can be used when scripts are turned off?
Checkpoint 8: Ensure direct accessibility of embedded user interfaces
Do not write event-handlers that rely on mouse-coordinates (device-independence; see also Checkpoint 9)
Checkpoint 9: Design for device-independence
How to navigate a map without a mouse?
Checkpoint 12: Provide context and orientation information
How to describe the content of a map (especially after a change, e.g. query)?
You know of a solution?
Please get in touch with me if you know of solutions to these problems!
I hope that solutions for these problems can be found and maps become available to everyone. As always, not only users with disabilities will benefit from these efforts but also the applications themselves, e.g. better SEO (search engine optimization), alternative support for mobile user agents, assistance for elderly people, etc.
I love Speed… therefore Google Chrome is.
Happy St. Patrick
Happy St. Patrick's Day everyone! While you're still sipping your Guinness and chewing on your shamrocks, everything seems to be new and shiny at Google: As announced today in their new Google Chrome blog, Google has released their new beta of Chrome.
New Features
Besides some really nice features (form autofill, full page zoom and autoscroll) Google Chrome offers a cool new way to drag tabs out to get a side-by-side view - way to go.
Did Google Chrome Just Get Even Faster?
Have I mentioned speed yet? As if (ooooold stable version of) Chrome wasn't fast enough, the neeeeew beta promised 25% to 35% in speed enhancements according to their V8 and Sunspider benchmarks. Ask your typical user to see why speed matters 
Which Browser do you use?
Are you still on Internet Explorer? Don't tell me IE6 - I'd have to creep through your monitor and strangle somebody... Firefox? Chrome? What are your experiences?
Go figure: 10 Comic Strips that have Something in Common
Here is to all you peeps that cannot survive the weekend without a computer, smart phone or internet connection: What do the following 10 comic strips have in common?
Be aware, this is a trick question!
Comic 01: 'You have major self-esteem issues. I highly recommend that you immediately disable commenting on your blog.'
Comic 02: 'You don't send me trackbacks anymore. Are you blogging someone else?'
Comic 03: 'I wanna Wii' - 'Well, please wait until you're finished telling Santa what you want.'
Comic 04: 'Will blog for food'
Comic 05: 'You can't go outside to play until you've finished reading all your RSS feeds!'
Comic 06: 'Hey Sport, there's a huge sale today so I'm going to buy some software. You need anything?'
Comic 07: '...and Phillip, do you promise to blog about Janice, every day for the rest of your life...'
Comic 08: 'Waddya mean all my facts are wrong? I copied everything straight off the internet.'
Comic 09: 'I can't find my GPS.' - 'Oh, the sweet, sweet irony.'
Comic 10: 'I don't care what 57% of your blog readers think is cool. We're not naming her Skype!'
Design Guidelines: 404 Error Pages
404 error
The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but either the server could not find what was requested, or it was configured not to fulfill the request and did not reveal the reason why.
Possible Reasons
Possible reasons for 404 error pages can be
- click on a broken link
- the page has been deleted
- mistyped URL
Depending on your internet service provider (ISP) the standard 404 page can vary greatly in terms of visual display and information on the error itself. In order to not loose visitors it's strongly suggested to create a custom 404 page. A good custom 404 page will help people find the information they're looking for, as well as providing other helpful content and encouraging them to explore your site further.
Design Guidelines for 404 Pages
A good 404 error page conveys a right message and leads the visitor to where he intends to go:
- Tell visitors clearly that the page they're looking for can't be found.
- Use language that is easy to understand, non-technical, friendly and inviting.
- Display an error message that explains what could have gone wrong.
- Offer means to recover (e.g. list site's naming conventions, spell check functionality, most common problems).
- Offer links to other important links of the site (e.g. most popular, homepage, FAQ).
- Provide a way for users to report a broken link (easy form, email the webmaster).
- Do not display ads.
- Avoid redirection of 301 and 302.
Other Considerations
No matter how beautiful and useful your custom 404 page, you probably don't want it to appear in Google search results. In order to prevent 404 pages from being indexed by Google and other search engines, make sure that your webserver returns an actual 404 HTTP status code when a missing page is requested.
Got a nice 404 page?
Send me screenshots of your 404 error pages - I'd love to see them!
Thx to Claude Betancourt who sent me this 404 page (Figure 1) of Dow Jones Indexes telling me that "behind the scenes we capture all CGI and request scope variables, log it and email the admins to correct the error if necessary." Nicely done!
Figure 1: Sample 404 page from Dow Jones Indexes
Another nice one with a funny little video:
Uh-oh, you hit a 404
References
- Frickey, D.; A More Useful 404; http://www.alistapart.com/articles/amoreuseful404
- 404 Error Pages; 404 Error Pages; http://www.404errorpages.com/
Benefits & Principles of User-Centered Design
We, the people, have been around for quite some years now. Computers, software, applications and the web not so much. Therefore it is clear that applications have to adjust to the people and not the other way round.
Many design principles have developed throughout the decades, but the main difference of user-centered design to others is that
UCD tries to optimize the user interface around how people can, want, or need to work, rather than forcing the users to change how they work to accommodate the system or function.
Purpose of UCD
UCD answers questions about users and their tasks and goals, then use the findings to make decisions about development and design.
UCD seeks to answer the following questions:
- Who are the users of the application?
- What are the users’ main tasks and goals?
- What are the users’ experience levels with the application?
- What functions do the users need from the application?
- What information might the users need, and in what form do they need it?
- How do users think the application should work?
Benefits & Return of Investment
- Increased usability
- Higher degree of customer satisfaction
- Continued business
- Higher revenues
- Project management optimization
- Focus on important functionality early
- Unforeseen user requirements
- Reduced costs
- Training costs
- Help-Desk calls and service costs
UCD Principles
- Focus on users’ needs, tasks and goals
- Spend time on initial research and requirements
- Identify your target audience and observe them (accomplishing their tasks)
- Let users define product requirements
- Emphasis on iterative design process
- Evaluate system on real target users
Summary
Nobody could state it simpler than Susan Dray: "If the user can’t use it, it doesn’t work".
Make it easy for your customers to throw money at you!
Ok, I don't know how to state this any better: "Make it easy for your customers to throw money at you!" or "Don't talk back when your customers wave at you with their Credit Card".
The reverse postulation is also true: "Don't hide your products that are meaningful to your customers" or "Enable your customer to purchase what they want however they want".
What you should do
This being said, during the shopping procedure, remove any unnecessary distractions, offer alternative payment methods, only ask for information really necessary and most important of all, make sure it works!
I hate showing bad examples but I'm really frustrated and sense some redemption in publishing the following screenshots, so please bear with me:
Make a Payment
Yes, it's this time around, a check needs to be delivered and I wish to do this online. I've registered and see great potential in setting up automatic payments so that my money arrives in the banks hands on time. I select the choice "Automatically pay ... using a non-Wells Fargo checking or savings account" (Figure 1).
Figure 1: Choose a payment type
I arrive at a screen (Figure 2) with 70 links (besides 2 tab menus, header, footer and something that seems to be commercials). What the h...? Only later I realize the error message in between the jiggle "You have no accounts eligible to set up a recurring payment." - well, I knew that, but how about I can set one up now?
Figure 2: You have no accounts eligible to set up a recurring payment
All right, I really want to throw money at them, so I start digging into the links to see if there is actually one that might help setting up the missing 'eligible account'.
So I click on "Add accounts"... just to find the same error message from before (Figure 3). Am I crazy or who is?
Figure 3: Add accounts for access online error
I pogo-stick between some more links from the previous page with the same result, this $%^&*$ error message seems to keep on hunting me. Do I call the 1-800 number? I should, let them at least pay for their negligence - or just send a check by mail like always. The bitter taste stays, believe me.
Lesson learned?
No, nobody learned anything here, at least not Wells Fargo. They will probably never find out. Or how the famous Benny Hill once said: "Just because nobody complains doesn’t mean all parachutes are perfect".
But for you, my dear readers, please help making the world a better place to pay your bills. Don't keep your customers from throwing money at you Cheers.
Go figure: Are You Colorblind? Take a quick Color Vision Test
8% of the male population has a red/green color weakness. Take a quick color vision test to see where you stand The following 8 images were taken from PseudoIsochromatic Plate Ishihara Compatible (PIP) Color Vision Test 24 Plate Edition by Dr. Terrace L. Waggoner.
Can you identify the numbers?
Leave a comment with your answers (or guesses hahahaha).
Demonstration Plate 1
Demonstration Plate 2
Demonstration Plate 3
Demonstration Plate 4
Demonstration Plate 5
Demonstration Plate 6
Demonstration Plate 7
Demonstration Plate 8
Design Guidelines: Radio Buttons versus Checkboxes
Design guidelines for checkboxes versus Radio buttons
Users hate formulars, it is work to them. Filling out forms on the web is no different, that's why getting web form design right is difficult, even simple forms can be challenging.
A good start is using the correct form element, or in the words of this blog entry to know when to use Radio Buttons versus Checkboxes:
General Design Guidelines
- Use standard visual representations
- Visually present groups of choices as groups (e.g. use subheads)
- Lay out your lists vertically with one choice per line
- Use positive and active wording for checkbox labels
- If possible, use radio buttons rather than drop-down menus
- Always offer a default selection for radio button lists
- Make radio button options comprehensive and clearly distinct
- Associate each button/box with a label
- Define accesskeys for frequently used checkboxes and radio buttons
- Use checkboxes and radio buttons only to change settings, not as action buttons
Radio Buttons
Radio Buttons are used when a list of two or more options is mutually exclusive and the user must select exactly one choice.
<fieldset>
<legend>Gender</legend><br />
<input id="female" type="radio" name="sex" value="female" checked>
<label for="female">Female</label><br />
<input id="male" type="radio" name="sex" value="male">
<label for="male">Male</label><br />
</fieldset>
Checkboxes
Checkboxes are used when a list of options exists where the user may select any number of choices – including zero, one or several.
<fieldset>
<legend>What is your favorite type of salad dressing?</legend><br />
<input id="French" type="checkbox" name="dressing1" value="checkbox">
<label for="French">French</label><br />
<input id="Italian" type="checkbox" name="dressing2" value="checkbox">
<label for="Italian">Italian</label><br />
<input id="Russian" type="checkbox" name="checkbox3" value="checkbox">
<label for="Russian">Blue cheese</label>
</fieldset>
Opt-in Checkbox
A stand-alone checkbox is used for a single option that the user can turn on and off.
<input id="accept" type="checkbox" name="yes" value="checkbox">
<label for="accept">I accept the terms and conditions.</label><br />
References
- Nielsen, J.; Checkboxes vs. Radio Buttons; http://www.useit.com/alertbox/20040927.html
Best Practices for Accessible Frames
Frames are hardly used anymore (thanks God) but they can be useful and a good method to organize huge sites with lots of content, e.g. document libraries, API documentation, etc.
The 508 standard has no objection against frames and screen readers can handle frames well even though it might be difficult to comprehend the structure. The following basic rules and best practices outline how one can make frames accessible:
Basic Rules
- Title frameset and frames with meaningful names (descriptive instead of location, i.e. ‘navigation’ instead of ‘left’)
- Provide an alternative (NOFRAMES tag)
Best Practices
Level 1
| Description | W3C | 508 | Example |
|---|---|---|---|
| Provide a text equivalent for every non-text element | 1.1 | a |
<FRAMESET cols="50%,50%" title="...">
<FRAME src="sitenavbar.htm" ...> <FRAME src="story.htm" ...> <NOFRAMES> [<A href="sitenavbar.htm" title="...">Table of Contents</A>] [<A href="story.htm" title="...">Story</A>] </NOFRAMES> </FRAMESET> |
| Title each frame to facilitate frame identification and navigation | 12.1 | i |
<FRAMESET cols="10%, 90%" title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar"> <FRAME src="doc.html" title="Documents"> </FRAMESET> |
Level 2
| Description | W3C | 508 | Example |
|---|---|---|---|
| Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone | 12.2 | i |
<FRAME src="sitenavbar.htm" name="navbar" title="Sitewide navigation bar" longdesc="frameset-desc.htm#navbar">
<FRAME src="story.htm" name="story" title="Selected story - main content" longdesc="frameset-desc.htm#story"> |
Template
<frameset cols="50%,50%" title="Our library of electronic documents">
<frame src="navigation.htm" title="Navigation bar">
<frame src="start.htm" title="Main Content">
<noframes>
[<a href="navigation.htm" title="Navigation bar">Table of Contents</a>]
</noframes>
</frameset>
References
- WebAIM; Creating Accessible Frames; http://webaim.org/techniques/frames/
Feature Fatigue: Say NO to Your Clients
Are your clients asking to add features upon features to your application because they think it will boost their success? This might really harm them and therefore you in the long run. Here is why:
Feature Fatigue
A study by Harvard Business Review (Defeating Feature Fatigue) has found that the features of a product mattered more to participants (customers) before they bought a product but after the purchase the actual satisfaction was greater with the simpler version of the product.
Feature Fatigue; This graph extrapolates a bit from the results.
That means that customers think they want feature-loaded offerings while they are shopping but once they start using their purchase, they suffer feature fatigue: they become overwhelmed by the product's complexity and annoyed by features they realize they don't want or need.
There is an inverse relation between expected utility and experienced utility. The turning point is the purchase and subsequent use of the product.
Say NO to your Clients
It's been common knowledge for some time and we all kinda felt it and even saw it with our own eyes with products like the Flip camcorder taking 13% of the market with doing less. I can find plenty of useful features for my new search portal but the reason why google is so successful is because they perfected their main task and prevented adding useful but unnecessary features to their portal.
So now you know why you should say NO to your clients when they brainstorm cool and sexy features.
What you should do
- Design products with just enough features to stimulate sales
- Ensure the features are easy enough to use once the customers start using them.
- Provide a variety of simpler application, each tailored to a particular task.
- Remind your client and your team about the main task that enables their users to do something outstanding.
About Me
Michael Gaigg is Lead UI Engineer in Esri's Professional Services Division.
He has been designing map application for over 10 years and can't stop thinking about improving them.
Categories
- Accessibility (16)
- Code Samples & Tips (15)
- Conclusions (6)
- Design Guidelines (12)
- Designing Map Interfaces (5)
- Go figure (9)
- Good News (25)
- Here and there (29)
- Map Applications (12)
- This Week's Highlights (53)
- Usability & UCD (27)
- Web Design (28)
Popular Posts
- 10 Webpage Design Lessons learned from a trip to Las Vegas… seriously!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Powerpoint Wireframe Stencils as Free Download
- Go figure: 10 Comic Strips that have Something in Common
- Job Posting: User Interface (UI) Engineer at ESRI
- Dashboard Design
