Universal Design

Have you ever wondered?
How a blind user will use the TV remote control?
How a disabled person will board the bus?
How old aged people will the climb staircase?
How a blind person will use the website?
How a color blind person will use an interface?

These are some questions we need ask ourselves while designing.This list is not over; we need to think about many such questions while designing. Design is not limited to a particular field, but design is very vast and is implemented in each and every field starting from automobile, communication, interior designing to user interface designing and a lot more.

While designing, we need to keep in mind all set of users and this is where the concept of “Universal Design” comes into picture. The word “universal design” may seem simple, but it holds lots of concepts, principles, techniques and process from a designer’s and end-user’s perspective. Let’s understand universal design in detail.

Universal design is the concept or approach to be more precise, of making any design accessible and usable by as many people as possible, irrespective of the age, situation and ability. It is a totally a new “paradigm shift” from the normal design process.

According to the “Americans with Disabilities Act (ADA) 1990” even people with disability have equal rights to work, study and use or access any product or services as a normal person and that is where the concept of “universal design” comes into picture. While designing any product, designers need to keep in mind the following “universal design principles” to make it more usable and accessible.

Equitable Use
Flexibility in Use
Simple and Intuitive Use
Perceptible Information
Tolerance for Error
Low Physical Effort
Size and Space for Approach and Use

Equitable Use: irrespective of age, ability or situation, a person should be able to effectively use a car, bus, elevator, mobile, computer, website, Interface and anything or everything what a normal person can use.

Flexibility in Use: design should be flexible enough to accommodate personal preferences. Example can be adjustable and customizable designs. Ease or flexibility of use makes design more usable by everyone

Simple and Intuitive Use: designers should understand one thing before designing an interface, that its not mandatory that all users will have equal level of technology knowledge, so we should accommodate this option, thus making interface simple and easy to use for a novice to expert. Systematic display system, visual display system helps in making any design intuitive. Proper use of colors and color combination also plays important role while making an intuitive design.

Perceptible Information: design should be able to communicate necessary information to the user effectively irrespective of the user’s ability and disability. For example a blind user, who is using an elevator, may not be able to see which floor he is in, so alternative solution of voice based support should be made available. Similarly a blind user may not be able to see directions in subways or stations, so alternative information system should be made available for such users.

Tolerance for Error: users tend to make mistake while using any interface or design or technology till they get acquainted to the system. “Universal design” means design should accommodate tolerance towards these common errors by helping users giving them “alerts”, “voice alerts” or “error messages” along with the solutions or support based system to help them overcoming from such problems in future.

Low Physical Effort: designers should understand one more thing that not necessarily all users will be “power users”; hence design should be simple enough to reduce physical effort. For example if adjustable interface or design needs users to manually adjust settings, it makes tedious for the users to use them and hence reducing the effectiveness , this can be avoided by using automated systems.

Size and Space for Approach and Use: this principle is important when designing car, bus, elevators, lifts, security system kind of interface or an interior design. These designs should provide ample space and flexibility for disabled users with wheelchairs to use them effectively and easily.

Let’s dive more into the “universal design” concept, by creating some user personas and relating them with the above mentioned principles.

Persona 1:

Name: Zara
Age: 18 years
Profession: Student

Zara is an 18 years old girl. She stays with her parents. Zara is very fond of using electronic gadgets. She lost both her legs in a car accident 2 years ago. She is totally dependable on wheelchair for all her daily work. Zara is doing her bachelors in arts from a regular college and needs to commute 10 miles daily. Due to her disability she cannot board bus or car easily, but at the same time, she wants to be self dependant rather than depending on others to help her out. She needs a transportation method which makes it easy for her to commute easily with less effort. An automobile engineer/designer needs to keep in mind people like Zara before designing a transportation interface. “Equitable use” makes sense when people like Zara are able to use it effectively and easily, without any hassle and confusion.

How can a car or bus be universally designed?

• Having automatic adjustable and twistable car seat, thus making it flexible to use
• Removable car seats so that 100% wheelchair dependant disabled users can replace it wheelchairs
• Having a “slider based bus system” for wheelchairs to climb easily without the need of lifting them, thus reducing the physical effort needed
• Having “no step bus system”, so that aged people need not worry about slipping from the bus, while trying to board.
• Blind users may not be able to see which location they reached, hence having a voice based information system in buses can help blind users to know where they reached

Toyota F1 Series

Chief Designer:
Toyota

Consulting Designer:
Satoshi Nakagawa

Date:
May 28 2009

Courtesy: http://www.pbs.org/pov/pov2004/freedommachines/special_universal_02.html

Persona 2:

Name: Nancy King
Age: 24 years
Profession: Housewife

Nancy is 24 year old women and a house wife by profession. She is disabled by birth and totally dependant on wheelchair. She stays with her husband, who is software professional and busy most of the time. Being a housewife, Nancy has vey little technology knowledge and finds it difficult to use technology spontaneously. Nancy doesn’t want her disability to become her weakness and wants to work like a normal housewife, like cooking for her husband, washing utensils etc. She wants a kitchen which is “universally designed” and where she should be able to work effectively like a normal person with “ease of use and learning” being her first priority.

How should an interior designer design a “universally designed kitchen” keeping in mind people like Nancy?

• Making the height of the kitchen cabinet, Cook top, Microwave stand accessible by wheelchair.
• Having an adjustable-height cabinets, can help all users to use them effectively. Also customizable design which can be changed based on user preferences also makes design effective and more usable.
• Having a removable sink and drying rack will give sufficient space for food preparation. This can again be re-fitted as and when required. Thus giving flexibility to people like Nancy or old aged people, who can’t stand and cook.
• Foldable cabinet doors under cooktop, providing sufficient knee space.
• Providing visual support can also help users to use kitchen more easily and effectively.
• Voice based support in kitchen can also be a good idea, thus making design accessible for people with low vision.
• Automated dishwasher or microwave system can help them easily placing dish without much effort.

Courtesy: http://www.thekitchendesigner.org/journal/2007/3/27/uber-universal-kitchen-design.html

Chief Designer:
GE appliances, the kitchen designer

Date:
May 28 2009

Courtesy
http://www.geappliances.com/design_center/universal_design/

Persona 3:

Name: Rodney Connors
Age: 75 years
Profession: Retired army many

Rodney is 75 years old man. He is a retired professional and stays alone in his 2 bedroom apartment which is on the 10th floor. He finds it difficult to walk and climb stairs and also have sight problem. Rodney has very little technology knowledge and finds it difficult to remember things, due to his growing age. He depends on electronic wheelchair most of the time. He needs an elevator system in his apartment which can accommodate his wheelchair also, making his life easy at this age.

How can we make a “universally designed” elevator?

• Increasing the width of the elevator hence giving ample space to use wheelchairs and thus making it approachable
• Big display screen, which displays the floor details big and clear, thus accommodating people like Rodney to use it with ease
• Voice based support system, which informs the user which floor the user is in, can also help the disabled user to use them effectively.

Courtesy: http://www.centrair.jp/en/service/sv-ud-facilities/index.html

Conclusion:

Irrespective of age, ability or disability and situations, every has the right to effectively use any products or services, hence designers should always be conscious about this fact and implement their design ideas to serve one and everyone. This is what universal design means.

Accessbility Standards & Tips

There are couple of accessibility tips and standards, I’ll be talking about today. This will help make your website of application accessibile to people with disability also.

Rule #1: Always use a DOCTYPE
This is a general W3c standards for any HTML or XHTML markup to have a DOCTYPE, to know which version of document you are using.

Rule #2: Always mention the language: You know what language you’re writing in, so tell your readers… and their software.

Screen reader software (JAWS) needs to know what language your pages are written in, so it can pronounce your words properly when it reads them aloud. If you don’t identify your language, JAWS will try to guess what language you’re using, and it can guess incorrectly, especially if you quote source code or include other non-language content in your pages.

How to do it?

1. If you’re using any variant of HTML 4, change your <html> tag to this (use your own language code if not English):
   

   <html lang="en">

2. If you’re using any variant of XHTML 1.0, change your <html> tag to this (use your language code in both places):
   

   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

3. If you’re using XHTML 1.1, change your <html> tag to this (again, insert your own language code):
   

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Like the DOCTYPE, you should identify your language on every page of your web site.

Rule #3: Construct meaningful page titles

Every page of your web site should have a unique and meaningful page title.

JAWS has a special keyboard shortcut (INSERT + F10) which displays (and reads) a list of the currently open windows, by window title. In the case of web pages, this would be your page title. It also reads the window title while ALT-TABbing through open windows. Other screen readers, like Home Page Reader, read the page title out load as soon as you visit the page.

Lynx displays the page title in the first line of output, so it’s always the first thing that Blind users reads in Braille.

Rule #4: Provide additional navigation aids

You may be familiar with the tag in relation to external stylesheets. But did you know you can also use a similar syntax to point to your home page, and to previous and next pages in a series?

<link rel=”home” title=”Home” href=”http://url/of/home/page” />

<link rel=”prev” title=”Title of previous page” href=”http://url/of/previous/page” />

<link rel=”next” title=”Title of next page” href=”http://url/of/next/page” />

These links, normally invisible to visual browsers like Internet Explorer, can be displayed in alternate browsers and help users navigate through your web site.

Rule #5: Present your main content first

One of the main advantages of using a purely CSS-based layout is that it is easy to rearrange elements within your HTML source without affecting the visual layout, so that your main content displays while the rest of the page is still loading.

If you have a table-based layout with a navigation bar along the left, your navigation bar is being presented to blind users before your main content and this creates lot of problem.

Rule #6: Use colour safely

Rule #7: Use real links

Avoid JavaScript a pseudo-link that executes a piece of Javascript code when you click on it, to create links. Tool like Lynx does not support Javascript.

Rule #8: Add titles to links

The title of a link generally shows up as a tooltip in visual browsers, but it can be presented in non-visual browsers as well.

Rule #9: Define keyboard shortcuts

One of the least known features of HTML is the accesskey attribute for links and forms, which allows the web designer to define keyboard shortcuts for frequently-used links or form fields.

When JAWS reads a link that defines an accesskey, it announces the access key as well. For example, the link Home page would be read by JAWS as “link: Home page, ALT + 1″. Disbaled user can focus on the link by pressing ALT+1, then follow it by pressing ENTER.

Rule #10: Dont open links in new window

In all dominant browsers, using the tag to force a link to open in a new window breaks the Back button. The new window does not retain the browser history of the previous window, so the “Back” button is disabled.

Although JAWS does announce “New browser window” when a link opens a new window, this is easy to miss, as it is spoken wedged between the reading of the link text and reading of the new page. Home Page Reader has a better solution; it plays a distinctive sound every time a new window opens. And Window Eyes, another popular screen reader, gives no indication of new windows at all.

Rule #11: You should define an acronym whenever you use it

CSS, HTML

Rule #12: Use captions for your tables

<table summary=”CD’s I listned to Recently” class=”footcollapse”>

<caption>My recent CDs</caption>  

Rule #13: Use Table headers for tables

<thead><tr>

<th>Title</th>

<th>Artist</th>

<th>Quality</th>
</tr>
</thead> 

Rule #14: Provide summary for table.

<table border=”0″ cellspacing=”4″ cellpadding=”0″ summary=”Monthly calendar with links to each day’s posts”>

Rule #15: Provide text equivalent for images.

Every single image on every single page of your site should have a text equivalent, so-called “alt text”, specified in the alt attribute of the <img> tag.

Rule #16: Provide text equivalent for images maps.

<img alt="Site navigation links" src="footer.gif" width="500" height="212" usemap="#Map">

<map name="Map">

 
<area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html">

<area alt="by category" shape="rect" coords="277,113,348,129" href="/category/">

<area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org"></map>


Rule #17: Use relative font sizes

Rule #18: Use real headers for headings

Mark up your web site as an outline, using real
<div>
<h1>,</p>
<h2>,</p>
<h3>tags. Screen readers rely on these tags to interpret the structure of your pages. Your pages do have a structure, but without proper header tags, screen readers can’t find it.</h3>
</h2>
</h1>
</div>
<h1>
<h2>
<h3>

Rule #19: Label form elements

The <label> tag allows you to associate a form label with any kind of form input element: text box, multi-line text area, checkbox, radio button, whatever. This allows screen readers to intelligently announce what a particular input element is, by reading the label. Furthermore, if you use a <label> tag to associate a checkbox (<input type="checkbox">) with the text next to it, your web-based form will work like a GUI application: clicking anywhere on the text label will toggle the checkbox.

<label for=”author”>Name:</label><br />
<input id=”author” name=”author” /><br /><br />

<label for=”email”>Email Address:</label><br />
<input id=”email” name=”email” /><br /><br />

Rule #20: Make everything Searchable