eTapestry

The website presence of a not-for-profit organization requires a more delicate touch than that of the typical commercial venture. Not only does the website need to reach as many viewers as possible, it needs to actually be usable. While this seems like common sense, many organizations actually sabotage themselves by engaging in practices that prevent users from reaching necessary information or gift-giving. I’ve put together a small showcase of questionable practices and have dissected them.

Fly-out menus
Also commonly referred to as drop-down menus, these are created using a piece of JavaScript code that causes a piece of hidden navigation to appear when a link is clicked or moused over. Because their original design intention was to navigate software applications and not websites, fly-out menus can be very deceptive. I’ve worked with customers who insist that they make navigation easier but studies have proven that they actually work against website accessibility as well as ease-of-use. But don’t think I’m only criticizing small mom-and-pop organizations. Many large groups, both commercial and not-for-profit, still use them, including groups like PBS. A few weeks ago I was visiting pbs.org, looking for the latest episode of “Sherlock.” The website used a drop-down navigation system and attempting to keep my arrow in the correct drop-down box, “Mystery”, while simultaneously sliding it to another fly-out, “Sherlock,” made me feel like I was attempting to disarm a bomb. I lost the menu three times until I figured out how to keep my hand absolutely still while using only my fingers to move the mouse. It was very frustrating.

So why else shouldn’t you use fly-out menus? The reasons are plentiful.

Fly-out menus can’t be read by search engines.

Fly-out menus offer no visual affordance that they have information lurking beneath them, so users many not even realize they are there. Users can also be startled when hovering over an area of a screen and a new element pops up unexpectedly.

Fly-out menus negate any benefit from using submenu items as they hide or disguise the hierarchy of the site. They typically use tiny fonts and place their items very close together. This means that a user must have precise mouse-using skills in order to select the right item (*cough* PBS *cough*). I’ve seen users select incorrect items from fly-outs then become confused when they’re taken to the wrong section of the website.

People with arthritis, Parkinson’s and other forms of limited mobility often find it very hard to use fly-out menus. It takes a degree of dexterity to move the mouse to the desired drop-down which these individuals often do not have. Also, individuals who use screen magnifiers often find these menus difficult to use. When the screen is magnified extensively, fly-out items can disappear off screen. In some cases, it is impossible to navigate to the drop-down items as moving the visible screen area deactivates the drop-down. Many fly-out menus are built using nested lists as the underlying markup. This causes trouble for blind users with screen-reading technology. The user is not notified when he leaves a nested list and moves back into the main list again. This can cause considerable confusion – especially when nested lists are part of a complicated site navigation scheme.

People with cognitive impairment, and even mild cognitive impairment, often find fly-out menus difficult to use and understand. Many users, especially older users, simply do not know how to use drop-downs.

I recommend my customers consider using a secondary menu scheme that requires actual clicking. A secondary and tertiary menu can fill a column in the content area or appear any where else that makes sense in the grand scheme of the site design. Take a look at childhoodleague.org for an example of an easy-to-use menu scheme with an obvious secondary hierarchy.

Pop-up windows and tabs

When I’m asked about using pop-up windows, I send my customers to this URL: www.w3.org/TR/WAI-WEBCONTENT. In 2004, the UK’s Disability Rights Commission published a report on Web Accessibility, which listed eight of the W3C’s Web Accessibility checkpoints as being especially important for disabled people. Violations of those eight caused the majority of problems encountered. Checkpoint 10.1 states “Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and do not change the current window without informing the user.”

If I’m using a screen reader and I’m focused on a small chunk of text on a complicated page, and I click, the screen reader may not notice the pop-up has appeared. If I’m using a screen magnifier, what has opened may even be off the screen. Dyslexics and others with attention disorders my have to start over again and orient themselves to new windows.
Not all web browsing platforms have the ability to support pop-ups, like a mobile phone that strips sites of their Cascading Style Sheets.
Pop-up blockers are also an issue. Some do discriminate between actual advertising pop-ups and a requested pop-up but I haven’t been convinced that they’re successful. I was using Pandora.com yesterday and my Chrome browser prevented me from accessing the New Artist listing because the listing used a pop-up.

Pop-ups are so abused by decades of people involved in invasive money-making schemes, like using misleading keywords in Search Engine Optimization, that they’ve simply ceased to be useful.

Conventional wisdom used to be “keep users on your site for as long as possible.” But that wisdom has changed with technological proficiency. Users do not like having their browsers shanghaied by your website’s programming. And most users do actually know how to utilize their back-button as well as right-clicking their mouse (or using the CTRL/CMD key) to open a new tab in their browser if they so choose. The back button is the lifeline of the web-user and second-most used navigation feature, after URL links.

If you have a piece of content that you feel requires a pop-up in order to grab the user’s attention, consider placing that content within the body of the actual website. Or utilizing a landing page that a visitor must view before proceeding to the site’s actual home page. See sfhdc.org for an example.

Flash, animated content and sound

According to Steve Jobs, Flash isn’t going away any time soon, though it’s proprietary and closed as future iPads and iPhones will no longer support it. But… the web is not a movie, the web is not a plug-in, the web is not a single vendor, and the web is not a single technology.

Flash earned and maintained its dominant position by continuously providing solid cross-platform graphic animation and audio and video support in the browser where others have tried and failed. However, the functions that Flash provides (a shiny User Interface, motion, skip intro buttons, etc.) are completely irrelevant to the not-for-profit sphere. Unless your organization specifically ties itself into browser-based gaming and audio-video services. The majority of customer I’ve worked with who want Flash want it for the ability to make snazzy cartoons. But these animations serve little purpose other than to treat site visitors like children who need constant visual stimulation to maintain interest. And do you remember the vision impaired that I discussed above? They can’t use it, nor can anyone using a stripped down browser or a system operating without Flash installed. If a third-party plug-in is required to run your site, you’ve shackled yourself to the whims of that third party and there’s nothing a web designer can do if that third-party changes how its product operates.

Simple rule of thumb: “Animated content is wasted content.”

Second and probably equally as important, unless you’re a radio station, don’t use sound. Don’t have buttons beep and boop when they’re pressed, don’t use the sound of a squeaking door when a new page is loaded, don’t use background music. Imagine what happens when you have your speaker volume up high and you’re suddenly ambushed by a weird noise that was unexpected. Don’t Use. Sound. These are all very, very effective techniques at irritating your website visitor and encourage him to not return.