Download User Centric Web Design

User Centric Web Design
Crafting Web sites that are
accessible and usable by a broad
spectrum of users
Saroj Primlani
[email protected]
User Centric Web Design
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
The Role of Web site
Space for
 Communication
 Information
 Business transactions
 Community building
 Learning
 Entertainment
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Difference between Web and Physical Spaces
Physical Space
Web Space








Open 24 /7
Space: online
Access: technology based and
constantly changing
Interaction: human-computer
Audience: global/cross cultural
Users not identified
User needs: user controlled
Control of navigation and
transaction: user driven
Saroj Primlani








Web Design Group
Limited time
Space: physical
Access: physical /manual
mostly static
Interaction: human –
human/analog
Audience: local /regional
User identified
User needs: can be facilitated
Control of navigation and
transaction: can be facilitated
Nov 10, 2009
User Centric Web Design
User Behaviors on the Web


In a hurry, quickly look for and choose the first reasonable
option not the best
Have a low attention span



Are impatient





Scan not read a web page
Impatient with distractions that compete with their objectives
Want information easy to find within site
Want to quickly and easily complete transactions
Have low tolerance for complex and difficult visual
presentation
Use learned behaviors - look for recognized patterns
expected behavior
Want control over technology for access and use
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
How People use the Web

Sighted users scan by sight



Blind users scan by ears/touch using assistive technology







use both visual and structural elements to magnify content for relevant
information
want control over visual element
Can use mouse and keyboard for interaction
Hearing impaired users scan by sight but cannot hear audio
Physically limited scan by sight


reading order is linear
use structural elements to navigate listening for relevant information
Use keyboard only to interact
Vision Impaired users scan by sight and ears


reading order is visual
use visual cues (typography, color, graphic elements etc) to seek information
Interact using keyboard or alternative input devices
Learning disabled - difficulty processing, easily distracted or confused
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Considerations



Technology for delivery (bandwidth, user agents,
viewers, helpers etc), authoring (creating), security
User Expectations – technology independence, high
security, content relevance; easy to find, access,
navigate and complete transactions.
Site Owner’s needs- high user conversion ratio and
return visits; cost-effective methods to develop,
maintain and upgrade sites, accessible to search
engines (SEO)
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
What is Usability ?
Measures how easily a web site can be used
by all users




Effective- can the user do what they want to do
Efficient- how much effort do they need to do it
Low learning curve – finding information and user
interaction is intuitive.
Satisfaction – enhance user experience (will they
return)
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
What is Accessibility?
Measure of how easily users can access the
content





Perceive – (see, hear, read)
Understand- comprehend
Navigate – find information
Interact – perform activities
User technology independent (AT, mobile,
browsers, emerging)
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
What is Functionality?
Number of features and functions available to
the user.



Are they relevant to the objective of the web site?
Are the accessible?
Are they easy to use?
Increased functionality does not mean improved
accessibility / usability!
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
User Centric Design


Focus is on accessibility and usability not
functionality.
Web resources are easier to use by all
regardless of users’



Functional limitations
Language limitations
Technology used to access the website
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Web site components




Content Objects – text, images, audio, video
multimedia objects (simulations, animations
etc)
Associated documents - PDF, Word,
PowerPoint, Excel etc
Helpers and viewers
Programmatic elements (scripting, CSS etc)
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Requirements






User centric design
Technology independence (browser, bandwidth,
display size, platforms, assistive technology)
Backward and forward compatibility
Optimized for search engines
Smaller footprint and load faster
Cost effective - easy to maintain or repurpose
… meet legal mandates
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Legal Requirements






Disability Rights as Civil Rights covered by 14th amendment.
Goal to provide nondiscriminatory access to programs and services
Ensures full and equal enjoyment of the goods, services, facilities,
privileges, advantages, or any place of public accommodation
Websites are public spaces that fall within the definition of a “place
of public accommodation” and/or “facilities”
Increased the standard from "Reasonable" to "Readily Achievable"
Accommodations provide equivalent experience
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Laws for Equitable Access


Section 504 of the Rehabilitation Act of 1973 establishes
Disability Rights as Civil Rights covered by 14th amendment
Americans with Disabilities Act (ADA) ensures full and equal
enjoyment of the goods, services, facilities, privileges, advantages,
or any place of public accommodation
Websites are public spaces that fall within the definition of a “place of
public accommodation” and/or “facilities”



The Telecommunications Act of 1996 include digital devices
and communications
April 2000 U.S. Attorney General Report held use of an "ad hoc"
or "as needed" approach to IT accessibility will result in barriers for
persons with disabilities
NC Senate Bill 0866 (Oct 2002) guarantees the right to access
electronic information, including web sites.
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Standards and Best Practices

Standards provide specifications and techniques for
creating web resources and can be validated and
tested



W3C Web Content Accessibility Guidelines (WCAG)
Section 508 – subset of WCAG
Best Practices is applications of standards to
crafting user centric design principles



Web Accessibility Best Practices- University of Illinois
IBM Web Accessibility Checklist
Accessible Design- Best Practices - Ohio State
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategy
Four Principles that govern universal design




Perceivable – information is available to all
senses
Operable – all interactions can be performed
Understandable – all content and interface
elements
Robust – reliably used by current and future user
agents and assistive technologies
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Structure






Code to generally-accepted W3C standards (XHTML,
XML, CSS, scripting etc)
Separate structure from presentation
Write content so that the hierarchy of information is
perfectly clear (linear read order)
Create a liquid design (page flows logically in any view
port)
Avoid using frames and scroll bars within the page
Do not use structural elements for presentation
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Presentation







Use external style sheets, do not use inline or internal styles
Maintain a consistent layout and visual design
Provide contrast between foreground (text) and background
Do not use color, shapes, location only to convey information
Use relative sizes for font, tables, margins and container elements
like <div>
Use readable font types, do not use multiple font types or color on a
single page
Keep it clean and simple. Avoid clutter, noise, blinking and moving
text and irrelevant objects
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Reading

Design for ease for visual / programmatic scanning





Organize: provide the user with a clear and consistent
conceptual structure
Categorize: using nesting heading levels <h> for sub
categories
Use visual elements, white spaces, paragraphs <p> tags
and lists <ul>, <ol>, <dl>
Use clear and concise language, chunking content in
small units
Define site language, language changes and
abreviations
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Navigation











Make sure menu structure and layout is consistent
Avoid multiple menus on a single page
Use list <ul> element to create the menu and sub-menu links
Use CSS to position and style the menu items
Avoid fly-out or DHTML menus.
Use heading tag <h> to label menu groupings
Clearly identify links
Labels links so that they make sense when removed from context,
avoid duplicate link names
Provide alternative text descriptors for images used for links
Start links with relevant keywords
Provide method to skip repetitive links; example "skip to content" or
"skip navigation" as first item on page
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies – Graphics



ALT attribute- to convey short description
of an image.
LONGDESC attribute or D-Link - to
convey a richer description of an image
TITLE attribute- to annotate most elements
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Multimedia




Audio – require text transcript
Video – require synchronized captions and
text descriptors
Rich media – require text descriptors
Interactive elements – require accessible
user control
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Forms







Explicitly associate the label with the form control .
Place labels for text controls adjacent and left and labels for radio
buttons and check box to the right of the form control
Do not use structural elements like table cells to separate the
label from the form control.
Avoid using images as labels for form controls, if they are used,
be sure to use them within the <label> element and include the
alt attribute
Organize form controls into related groups. Use <fieldset> to
group form controls and the <legend> to label the group
If needed use <tabindex> to establish the tab order of the entries
Use CSS to control the visual appearance of the form
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies – Data Tables




Use <th> element to create row and column
headers.
Use summary attribute of the <table> element to
create a text description of the content of the table.
Associate data cells with their row and column
headers
Use <thead>, <tbody>, <tfoot> and <colgroup> to
group table rows and columns into meaningful
sections
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies - Frames

Avoid frames, they break the fundamental user
model of the web page






Each frame has its own source URL
Non graphic user agents render web pages with frames a
single frame at a time
Bookmarking does not work well
Breaks the return button
Printing option is difficult
Content relationship between the different frames is hard to
establish
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies – Frames 2

If Frames are used






Use correct document type indicating to non-graphical user
agents that page consists of multiple frames.
Use the name attribute to identify the frame and the title
attribute to identify the purpose of the content.
Do not create relationship between frames where the user
needs to switch back and forth.
Avoid graphic element as page source
Do not create scroll bars in the middle of web page layout
Iframe should include name and title attributes
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Design Strategies – Scripting





Event triggers
 Use device-independent event triggers like "onFocus", "onBlur"
and "onSelect“
 If device-dependent triggers are used, provide redundant input
mechanisms
Provide warning of change of focus, opening of new window or
inserting new content
Avoid page refresh especially within the Meta tags
Provide user controls for "time-out events"
Use server side scripting for programmatic functionality essential
to the web page, eg. making calculations in background.
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Resources - Tools


Accessibility Toolbars / browser extensions provide code
validators and simulation tools
 Web Accessibility Toolbar for IE and Opera from wat-c.org
 Web Development Toolbar by Chris Pederick for Mozzila
 Accessibility Extension for Mozzila from University of Illinois,
Urbana/Champaign.
 Wave from WebAIM
Evaluation and Reporting Services spider websites and report on
issues


Wave from WebAIM has a group of web accessibility tools.
Functional Accessibility Evaluator from University of Illinois, Urbana
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Resources – Guidelines /Tutorials





Writing Accessible Web
W3C Web Accessibility Initiative
WebAIM
Usability.gov
Designing for Accessibility
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Resources - Information








Accessify.com
A List Apart Accessibility
BlueRobot.com
Mark Pilgrims - Dive Into Accessibility
456 Berea Street
Paciello Group
JuciyStudio
Sitepoint
Saroj Primlani
Web Design Group
Nov 10, 2009
User Centric Web Design
Questions?
Saroj Primlani
Web Design Group
Nov 10, 2009