User Centric Web Design

1. User Centric Web Design Crafting Web sites that are accessible and usable by a broad spectrum of users Saroj Primlani sarojprimlani@gmail.com

2. Web Design Group

3. The Role of Web site Space for • Communication • Information • Business transactions • Community building • Learning • Entertainment Web Design Group

4. 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 Difference between Web and Physical Spaces Web Design Group

5. In a hurry, quickly look for and choose the first reasonable optionnot 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 User Behaviors on the Web Web Design Group

6. 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 Web Design Group

7. 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) Web Design Group

8. 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) Web Design Group

9. 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) Web Design Group

10. 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! Web Design Group

11. 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 Web Design Group

12. 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) Web Design Group

13. 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 Web Design Group

14. 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 Web Design Group

15. 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. Web Design Group

16. 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 Web Design Group

17. 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 Web Design Group

18. 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 Web Design Group

19. 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 Web Design Group

20. 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 Web Design Group

21. 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 Web Design Group

22. 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 Web Design Group

23. 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 Web Design Group

24. 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 Web Design Group

25. 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 Web Design Group

26. 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 Web Design Group

27. 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 Web Design Group

28. 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. Web Design Group

29. 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 Web Design Group

30. Resources – Guidelines /Tutorials • Writing Accessible Web • W3C Web Accessibility Initiative • WebAIM • Usability.gov • Designing for Accessibility Web Design Group

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

32. Questions? Web Design Group