Engineering Usability And Accessibility Into Portlets And Portals
1. Engineering Usability and
Accessibility into Portlets and
Portals
A Presentation By:
RAJESH KUMAR TRILOKHRIA
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
2. Engineering Usability and Accessibility into Portlets and Portals
Agenda
User eXperience (UX)
Usability
Accessibility
Best practices
CampusEAI audit process
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
3. Engineering Usability and Accessibility into Portlets and Portals
UX
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
4. Engineering Usability and Accessibility into Portlets and Portals
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
5. Engineering Usability and Accessibility into Portlets and Portals
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
6. Engineering Usability and Accessibility into Portlets and Portals
User Experience Design
User design Self design
Task-oriented Intuition-oriented
Sympathetic Confident
Accessible Usable
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
7. Engineering Usability and Accessibility into Portlets and Portals
User Experience Design
Vision
Feedback
Culture
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
8. Engineering Usability and Accessibility into Portlets and Portals
Why should I bother?
Social Technical
Financial Legal
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
9. Engineering Usability and Accessibility into Portlets and Portals
Usability
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
10. Engineering Usability and Accessibility into Portlets and Portals
Principles
Learnability Efficiency Memorability
Recoverability Functionality Satisfaction
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
11. Engineering Usability and Accessibility into Portlets and Portals
Principles: User-centered
General Fast Mapping
Learnability Efficiency Memorability
Visibly Answers THEM
handled
Recoverability Functionality Satisfaction
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
12. Engineering Usability and Accessibility into Portlets and Portals
Principles: Self-centered
Simple Practical Intuition
Learnability Efficiency Memorability
Hidden by Questions ME
design
Recoverability Functionality Satisfaction
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
13. Engineering Usability and Accessibility into Portlets and Portals
Challenges
Dynamic navigation
Errors (misconfiguration)
Customization
Cluttered screen / complex layout
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
14. Engineering Usability and Accessibility into Portlets and Portals
Workshop
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
15. Engineering Usability and Accessibility into Portlets and Portals
Accessibilit
y
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
16. Engineering Usability and Accessibility into Portlets and Portals
Accessibility
A hostile environment
97% of websites fail to meet basic requirements
600-750 million people have a disability
3 out of every 10 families
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
17. Engineering Usability and Accessibility into Portlets and Portals
Standards and guidelines
WCAG 1.0
WCAG 2.0
Section 508 (USA)
DDA (UK)
IBM Guidelines
IEEE Standards
Internal Organization Guidelines
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
18. Engineering Usability and Accessibility into Portlets and Portals
Standards and guidelines
WAI
w3.org/WAI/
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
19. Engineering Usability and Accessibility into Portlets and Portals
Access Barriers
Visual Auditory Mobility
Cognitive Learning Technologica
l
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
20. Engineering Usability and Accessibility into Portlets and Portals
Access Barriers
Visual Auditory Mobility
Cognitive Learning Technologica
l
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
21. Engineering Usability and Accessibility into Portlets and Portals
Access Barriers
Visual Auditory Mobility
Cognitive Learning Technologica
l
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
22. Engineering Usability and Accessibility into Portlets and Portals
A Personal Perspective
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
23. Engineering Usability and Accessibility into Portlets and Portals
Workshop
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
24. Engineering Usability and Accessibility into Portlets and Portals
Access Barriers
Visual Auditory Mobility
Cognitive Learning Technologica
l
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
25. Engineering Usability and Accessibility into Portlets and Portals
Access Barriers
Visual Auditory Mobility
Cognitive Learning Technologica
l
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
26. Engineering Usability and Accessibility into Portlets and Portals
A Personal Perspective
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
27. Engineering Usability and Accessibility into Portlets and Portals
Workshop
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
28. Engineering Usability and Accessibility into Portlets and Portals
Best
Practices
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
29. Engineering Usability and Accessibility into Portlets and Portals
Testing for Accessibility
Practical testing with disabled people
Stand alone software
Deque Ramp, InFocus by SSB, Fujitsu Web Accessibility
Inspector
Online tools for accessibility checking
Cynthia Says, WAVE, WebXact, Watchfire® Bobby
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
30. Engineering Usability and Accessibility into Portlets and Portals
CEAI Audit
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
31. Engineering Usability and Accessibility into Portlets and Portals
CampusEAI Audit Process
Design Web Accessibility
Standards
Usability Performance Functionality
jonathan_mullapudy@campuseai.org
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
32. Engineering Usability and Accessibility into Portlets and Portals
User Experience Design
Vision
Feedback
Culture
1940 East 6th Street • 11th Floor • Cleveland • Ohio 44114 • Tel: 216.589.9626 • Fax: 216.589.9639
info@campuseai.org• http://www.campuseai.org
Above all, we want a user experience to be valuable. If it isn’t, we should work on something else.
You start with findability (do I know about it?), then accessibility (can I perceive it?), desirability (is this something I want to use?), usability (how easy is this to use?), credibility (now that I’m using it do I trust its results?), and usefulness (did this help me do what I wanted/needed to do?) and finally value (will I use this again? Will I depend on this?)
If you focus on the just the user or just yourself, can you really create successful user experiences for the universe of users?User-centered versus self-centered design.Microsoft (15,000 user tests a year; user-centered)Apple (barely any; self-centered)
UCD is dogma. Self-design is dogma. There is a center: UX.Source: Jared Spool, “Journey to the Center of Design”, sxsw interactive 2009 * Vision - Can everyone on the team describe what the experience of using your design will be like five years from now (an experience vision)? (me) * Feedback loop - In the last six weeks, have you spent more than 2 hours watching someone use your design or a competitor’s design? (them) * Great culture - In the last six weeks, have you rewarded a team member for creating a major design failure (accepting making mistakes means you honor learning from mistakes; if you are completely risk averse where everything has to be perfect, you put out drek)? (us)
Describe each:Social - Positive Public Image - Web Accessibility is an Aspect of Social Responsibility- Improved Usability - Web Accessibility Benefits People With and Without Disabilities Increased interaction between your site and end usersTechnical Reduce Development and Maintenance TimeEnable Content for Different Configurations - write it once, use it many times Be Prepared for Advanced Web Technologies - future proof your siteFinancial Decreases the need for creating multiple versions of a site for different devices Improved Search Engine ranking - Increased Web Site use by reaching a wider audienceLegal Web Accessibility is Essential for Equal Opportunity Proactive initiatives are defensive Legal liabilities generally un-tested - negative publicity
Is it just about not making me think?
Learnability: familiar, consistent, general (related to previous experience), predictable, simpleEfficiency: time to completion for tasks, practicality of method for completing tasksMemorability: do users repeat initial mistakes after a time has passed since the last time they used the product? How intuitive is the experience? What kinds of aliases does your product provide (symbols)?Recoverability: how well do you handle errors or design applications to not have errors?Functionality: does the tool solve my problem? does it do so in the way I would expect? Satisfaction: is this the tool for me? How successful do I feel after using the tool? Do I feel like the developer had me in mind? Do I enjoy using the tool?
Thinking about THEM.
Thinking about ME.Self-centered design is about delivering products where quality is high because you only create what you know, and adoption can be high because you are developing for people who might not have found another solution yet (nonconsumers)
Accessibility means making sure yourwebsite is accessible to all users, regardless of abilityor disability.Basic requirements are: keyboard navigation, descriptive text for non-text artifacts, and use of headers to provide outline navigationThere is a continuum of ability and disability; almost everyone has some level of disability, just like people have different strengths in ability. Some disabilities are severe obstacles to gaining access to the information the rest of us take for granted.
These guidelines and laws started out as technical ways to accommodate people with disabilities (post development).
(WAI) develops guidelines for accessibility of Web sites, browsers, and authoring tools, in order to make it easier for people with disabilities to use the Web.Guidelines like the Web Accessibility Initiative (WAI) are starting to take a design-level approach for the equitable use of web content:Web content must be perceivable, interface elements must be operable, content/controls must be understandable, and content must be sustainable (withstand future technological change).
Going to talk about three of them.
Visual DisabilitiesBlindnessScreen readersScreen reader limitationsImagesVisual layoutData tablesKeyboard accessibilityLow VisionFixed Fonts should be avoidedScreen Magnifiers - Use true text as much as possible, rather than text in graphicsHigh ContrastUser % for document layoutColor BlindnessColor must not be the only means of conveying information.Foreground and background Color pairs must have sufficient contrastColors must be declared in the style sheet
Kyle, a student at Utah State University who is blind, shares his perspective on Web accessibility and screen readers in the video below. *Source - www.webaim.org/articles/visual/blind.php
Auditory DisabilitiesAudio is unusableProvide transcripts for audio clips
Motor DisabilitiesMake sure that all functions are available from the keyboard (try tabbing from link to link).Make sure that your pages are error-tolerant (e.g. ask \"are you sure you want to delete this file?\"), do not create small links or moving links.Provide a method for skipping over long lists of links or other lengthy content.In addition to onMouseOver and onMouseOut, use onFocus and onBlur.
Gordon Richins, Consumer Liaison at the Center for Persons with Disabilities at Utah State University, who has quadriplegia, shares his perspective on web accessibility. *Source - www.webaim.org/articles/motor/motordisabilities.php
Engaging disabled users in testing your website with real tasks is a guaranteed way of ensuring everyone can use your website easily and effectively.screen reader (Jaws/Window-Eyes/Hal) magnification software (Zoomtext/Lunar/Magic) large text in browser with colour preferences
Design AuditWeb Standard AuditAccessibility AuditUsability AuditPerformance AuditFunctionality Audit
UCD is dogma. Self-design is dogma. There is a center: UX.Source: Jared Spool, “Journey to the Center of Design”, sxsw interactive 2009 * Vision - Can everyone on the team describe what the experience of using your design will be like five years from now (an experience vision)? (me) * Feedback loop - In the last six weeks, have you spent more than 2 hours watching someone use your design or a competitor’s design? (them) * Great culture - In the last six weeks, have you rewarded a team member for creating a major design failure (accepting making mistakes means you honor learning from mistakes; if you are completely risk averse where everything has to be perfect, you put out drek)? (us)