Popular Mistakes in Universal Web Design
11/09/2011 - By By Dennis Lembree
Web Design Mistakes
It’s bewildering as to why since there are many social, technical, financial, and legal reasons which support universal design practices. Let’s discuss some of the more prevalent issues in websites today, and how they relate to the main universal design principles.
The Principles
First, let’s review the seven universal design principles including some web related examples. Keep in mind that these principles are applied, of course, to many industries outside of computer and web, such as civil engineering (buildings, walkways), entertainment (movie theaters, theme parks), and transportation (buses, trains).
1.Equitable use: useful and marketable to people with diverse abilities.
Example: A local government’s website is designed so that it is accessible to those who are using assistive technology such as a screen reader.
2.Flexibility in use: accommodates a wide range of individual preferences and abilities.
Example: Design of an airline website maintains visual aesthetics in various computer display sizes.
3.Simple and intuitive: easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
Example: Primary controls of a web application are labeled with both text and symbols.
4.Perceptible information: communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
Example: An instructional video with captions provides the option to read the dialogue in addition to listening.
5.Tolerance for error: minimizes hazards and the adverse consequences of accidental or unintended actions.
Example: A technical error when submitting a form provides a clear explanation and options for how to continue.
6.Low physical effort: can be used efficiently and comfortably, and with a minimum of fatigue.
Example: Website design has sufficient color contrast and text size which minimizes eye strain.
7.Size and space for approach and use: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of the user’s body size, posture, or mobility.
Example: A website is designed so that a physically impaired user who cannot use a mouse can still access all the content with a keyboard (or onscreen keyboard!).
Now that we are familiar with the principles, let’s examine several related web design issues.
Difficult to Read
The first popular mistake in Universal Design is textual content which, because of its design, is difficult for many to read. This relates to Principles 1, equitable use; and 6, low physical effort, specifically, eye strain. Note that cognitive reading difficulty is a separate issue not within the scope of this article. Good readability makes a website more usable and aesthetically pleasing. By the way, check out the Readability.com web application for super easy reading.
So what are the issues? Small sized text and low color contrast are two key problems which make web typography difficult to read. In the example below, the main textual content is gray over a black background which fails Difference in Brightness and Difference in Colour tests. The text size is set to 12 pixels which is fairly small for many users, including myself. When removing the text size from the CSS, the browser displays the default size which is slightly larger, and much more readable! So instead of setting the default text to 12px or .75em, try a little higher like 16px or .95em.
Another best practice relating to text is to use relative sizing in the CSS (ems or percentages) rather than fixed sizes (pixels or points) to help ensure the user is able to resize the text in the browser as needed and have the layout scale with the text. Other good guidelines including provide user friendly headings and ample line spacing.
More > http://designfestival.com/popular-mistakes-in-universal-web-design/
 Privacy Protected |
Copyright © 2012. Website Development.org All Rights Reserved. Terms of Use/Disclaimer Privacy Policy login Articles |
Website Development |