User Centric Web Design

User Centric Web Design

Crafting Web sites that are accessible and usable by a broad spectrum of users

Saroj [email protected]

Nov 10, 2009Web Design Group


Saroj Primlani



Saroj Primlani

The Role of Web site

Space for Communication Information Business transactions Community building Learning Entertainment



Saroj Primlani

Difference between Web and Physical Spaces

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

Physical Space 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



Saroj Primlani

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

Scan not read a web page Impatient with distractions that compete with their objectives

Are impatient 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

How People use the Web Sighted users scan by sight

reading order is visual use visual cues (typography, color, graphic elements etc) to seek information

Blind users scan by ears/touch using assistive technology 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 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

Interact using keyboard or alternative input devices Learning disabled - difficulty processing, easily distracted or confused



Saroj Primlani

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

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

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

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

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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Resources – Guidelines /Tutorials

Writing Accessible Web W3C Web Accessibility Initiative WebAIM Usability.gov Designing for Accessibility



Saroj Primlani

Resources - Information Accessify.com A List Apart Accessibility BlueRobot.com Mark Pilgrims - Dive Into Accessibility 456 Berea Street Paciello Group JuciyStudio Sitepoint



Saroj Primlani

Questions?

Documents

User Centric Web Design