CSUN 2012: ScienceDirect Article Of The Future Collaboration
•Download as PPTX, PDF•
2 likes•922 views
These slides were presented by Hadi Rangin and myself at CSUN 2012, The International Technology and Persons with Disabilities Conference. The topic was the ongoing collaboration between Elsevier and university experts in accessibility such as University of Illinois Urbana/Champaign.
Recommended
Recommended
More Related Content
Similar to CSUN 2012: ScienceDirect Article Of The Future Collaboration
Similar to CSUN 2012: ScienceDirect Article Of The Future Collaboration (20)
More from Ted Gies
More from Ted Gies (12)
CSUN 2012: ScienceDirect Article Of The Future Collaboration
- 1. ELSEVIER: ARTICLE OF THE FUTURE COLLABORATION CSUN, 2012
- 2. Presenters Hadi Rangin It Accessibility Designer and Collaborator Coordinator University of Illinois at Urbana/Champaign Ted Gies Principal User Experience Specialist Elsevier
- 3. Overview Background on the collaboration group Introducing Elsevier, development culture, and lessons learned What is Article of the Future? Article Redesign on SciVerse ScienceDirect Definition of the accessibility challenge Demo of Article Redesign Accessibility Features Closing Remarks Q&A
- 4. The Importance of Accessible Library Databases Library resources are essential for the success of students, faculty, and researchers Most Literature DB’s not designed with accessibility in mind Users with disabilities are usually not included in design and evaluation Only universally designed applications can be utilized effectively by users with disabilities
- 5. Accessibility of Redesigned Article Page and how we got there Article of the Future results in redesigned article page Elsevier approached UIUC We formed a group and brought interested parties together We started with mockups Had the chance to eliminate inaccessible approaches in the beginning Everyone had access to the prototype early on We recorded and discussed accessibility issues
- 6. Accessibility of Redesigned Article Page and how we got there All users will benefit from most Accessibility/usability features Elsevier team recorded lessons and findings and turned into best practices for future use Opened a dialog with decision makers and kept them on course of universal design Resulted in bringing ScienceDirect team on board to address accessibility
- 7. Background on Elsevier Publishing company founded in 1880 Over 20,000 products for educational and professional science 300 customer facing web applications Authors include: Stephen Hawking, Nobel Peace Prize Winners, Mike Paciello! ~200 books and journals on topics of disability and accessibility College of Direct Support
- 8. Background on SciVerse ScienceDirect ScienceDirect, born in 1997 Hosts over 2500 journals Hosts over 11,000 books SciVerse platform launched in 2010 SciVerse Application Marketplace and APIs launched in 2011
- 9. Why I Care About Web Accessibility Elsevier User Centered Design Group (UCD) (45 FTEs) UCD designs web products around user needs Reed Elsevier Accessibility Working Group Goal to Educate and foster a culture of Universal Access Connects UX, Product, Universal Access, Strategy, Archive, Customer Support, Corporate Responsibility Presented Over 15 Webinars on Accessibility Supporting our sales teams and disability services! Civil Rights and quality products for all!!! 2 Big Wins this year…
- 10. Accessibility Matters Booklet 28 page educational booklet sent to 60 offices worldwide
- 12. What is Article of the Future? www.articleofthefuture.com Ongoing effort to continuously improve content on SciVerse ScienceDirect Redesigned HTML article page is one component “lab environment” to revolutionize traditionally flat article format Vision: Excellent online readability Seamless navigation and discoverability Extensible: Can accommodate new apps and domain specific features such as The Protein Viewer 1st version released in January 2012
- 13. Before Article Page Redesign
- 14. Redesigned Article Page on SciVerse ScienceDirect Left Pane Middle Pane Right Pane (TOC/ (Full Text Article) (Extensible) Navigation)
- 15. What Was the Challenge? Accessibility expertise is diffuse can take a back seat not in requirements Addressed accessibility late in the game Lack of usability test participants who use AT
- 16. What Was the Challenge? Heavy Process 3 releases > 30 requirements > 300 pages documentation Competition for resources and across requirements Scope police Increasing trend towards rich internet applications Multipane layouts/components/AJAX Lack of in house expertise with contemporary techniques
- 17. Lessons Learned From Collaboration Treat accessible design with discipline Follow (and “bend”) the process if necessary Establishing roles in team was very helpful Don’t ask for permission But…keep stakeholders engaged A Working, Accessible Prototype Is an Indispensable Tool!
- 18. Example of UI Specification – ARIA Landmarks DIV Description HTML/ARIA role 1 Global navigation <div aria- with SciVerse links label="SciVerse" role="navigation"> 2 ScienceDirect <div aria- global navigation label="ScienceDirect" role=”navigation ”> 3 Results navigation <div aria- label="Results" role="navigation"> 4 Download options <div aria-label="Download options" role="navigation"> 5 Quick search <div class="singlesearch js_searchform" aria-label="Quick search" role="search“ 6 Extended Search <div aria- labelledby="extendedSearch" role="search"> 7 Left side pane <div class="toc" aria-label="table of contents" role="navigation"> 8 Article/middle pane <div class="content" aria- label="Article" role="article"> 9 Right side pane <div id="sidebar" aria-label=”Related content” role="complementary"> 10 Footer <div class="content" aria- label=”product support” role="contentinfo">
- 19. Demo of Accessibility Features Logical linearization of page Keyboard operability ARIA Landmarks Logical headings structure Accessible Search function Good use of structural markup such as lists Setting Keyboard Focus From TOC pane Visual Indication of Keyboard Focus
- 20. Article of the Future Backup Slides: Screen Shots and Features
- 21. Logical Linearization - Fangs
- 23. ARIA Landmarks
- 26. Good use of structural markup such as lists
- 27. Setting Keyboard Focus From TOC
- 28. Visual Indication of Keyboard Focus a:hover, a:focus { color: #0156AA; text-decoration: underline; }
- 29. Redesigned HTML Article Page on SciVerse ScienceDirect
- 30. Collaboration Group Members Rogier Barendrecht (Elsevier) Jon Gunderson (UIUC) Spencer de Groot (Elsevier) Julie Hardesty (Indiana University Vasu Edala (Elsevier) Ranti Junus (Michigan State) Ted Gies (Elsevier) Hadi Rangin (UIUC) Stefan Kuip (Elsevier) Robert Slater (UIUC) Doug Miller (Elsevier) <You> (are invited to join us!) UIUC = University of Illinois at Urbana- Champaign
- 31. Closing Remarks Thank you to Hadi and Jon!!! Future Plans Streamline Accessibility into the Process Share Technical Best Practices Across Elsevier Expand the Collaboration Group Involve AT users in usability testing Tackle other pages Roll out of Elsevier Accessibility Policy Road shows Try out new set of “teeth”
- 32. Q&A
- 33. Contact Us Hadi Rangin It Accessibility Designer and Collaborator Coordinator University of Illinois at Urbana/Champaign hadi@illinois.edu 217 244-0518 Ted Gies Principal User Experience Specialist Elsevier t.gies@elsevier.com 937 865-6800 Elsevier Accessibility/Usability Collaboration Page
- 34. Resources and Links http://www.articleofthefuture.com/ www.developers.elsevier.com/ SciVerse Applications Gallery http://www.disability.illinois.edu/ Join Elsevier Accessibility/Usability Collaboration
Editor's Notes
- Thanks everyone for attending I know everyone would like to go out and enjoy the beautiful weather.I’m Ted Gies and I work for Elsevier’s User Centered Design group out of Dayton Ohio. This is my first time to CSUN.First a poll…who else used firebug or some other tool to see how the conference producers coded the required form fields on the registration site?Let me tell you a little bit about Elsevier, SciVerseScienceDirect, and why I care about accessibility before we get into the meat of the Article of the Future project.Elsevier founded in 1880 is a large publishing company We produce both print and electronic products with over 20K individual products…Last inventory I saw there were about 300 customer facing web applications.Elsevier publishes about 200 journals and books in the topics of disability and accessibility.Web Accessibility for People with Disabilities; (Mike Paciello CMP imprint)Cost Justifying Usability; Tolley’s Discrimination in EmploymentHandbook; Designing for the Disabled: The New Paradigm; andDisability and Health Journal.In addition our College of Direct support online courseware helps train people who provide in home care for older adults and people with intellectual, developmental, and physical disabilities. Content is developed with Univ of Minnesota’s Research and Training Center on Community Living.
- So ScienceDirect is our primary online journal and book platform that was first launched in 1997. Since then virtually all of our products and content are available in online form in one way or another.In 2010 we released the new SciVerse platform that better connects our core web platforms of ScienceDirect, Scopus, and HUB which is our kind of Google across our core researcher products.Last year SciVerse introduced the application market place which allows developers to tap into our APIs and develop their own plugins if you will to ScienceDirect, Scopus, and Hub. The application marketplace is actually very cool. There are over 100 apps for ScienceDirect, most of them for free. So as an example of some apps on ScienceDirect, there is a built in screen reader, a plugin to convert an article to ePub, and discipline specific features like when a protein identifier appears in an article, it will put in a 3D model of the protein below an article abstract.I believe SciVerse Hub with the application marketplace took the PROSE award this year for ePorduct/Innobation in ePublishing. http://www.proseawards.com/current-winners.htmlSo in my opinion SD is much more sophisticated and mature than your average 15 year old.
- So what I love about my job is that being part of the User Centered Design Group I get to wear the hats of field researcher, designer, and accessibility lead.The UCD Group consists of 45 FTEs who last year supported 133 different products. There are about 125 active projects going on at any given time. As I mentioned Elsevier itself produces about 300 electronic products.So there are about 3 web accessibility experts in Elsevier with many of our UCD staff knowing the very basics. That’s a ratio of about 40 projects to 1 ucd accessibility expert. Or a ratio of 100 Elsevier electronic web applications to 1 accessibility expert.I know some of you are thinking…wow time to get into consulting The UCD group is all about developing products with the user at the center, so we help drive requirements based on user understanding, do field research such as usability testing and ethnography, but we are also a fully capable front end design shop with experts in user experience, human factors, visual design, and web development. Our team completed over 150 different end user interviews to drive the requirements for the article of the future project.Part of my role of accessibility lead is running the Reed Elsevier accessibility working group which connects the different groups across the business who care about web accessibility. So the working group has members from UX, corporate responsibility, the book archive, product management, customer support, universal access, and upper management.The goal of the working group is to educate our staff and share best practices and to really develop a culture of universal access.I feel that the culture shift is happening at Elsevier now with 2 recent major initiatives that have happened:Accessibility MattersLast year with the support of our Elsevier CIO we published a 28 page educational booklet on disability and accessibility which was sent to over 60 offices worldwide. This was a huge success with it yielding some business units throwing money at our group to do accessibility work. Also, our RE CEO Erik Engstrom mentions Accessibility Matters in the upcoming Corporate Responsibility Report. Please see me after the show if you would like to flip through a copy of Accessibility Matters.The graphic I’m displaying is the cover of accessibility matters and one page from within the booklet. The cover of the booklet shows the palm side of a hand which is created as a tapestry of different words common in the field of accessibility. In the center of the hand a gold colored key hole shines with a globe of earth contained within the keyhole. The page from accessibility matters shows a table of disability on each row and then the impact of using computers and web with assistive technology.2) Our Universal Access group which reports directly into Elsevier strategy sponsored a task force for a company wide accessibility policy for our electronic and print products. This policy recommends that both our external products and internal sites follow WCAG 2.0 guidelines . The policy is supplemented by an implementation plan. The implementation plan details 5 steps for addressing product accessibility across our business units. The steps are Review, Document, Prioritize, Implement, and Verify. My last point is why I personally believe in creating accessible products which I regard as a civil right for everyone to have the same access to information and tools. And really that a more accessible product is more usable for everyone, so of course we should be creating quality products.
- So what I love about my job is that being part of the User Centered Design Group I get to wear the hats of field researcher, designer, and accessibility lead.The UCD Group consists of 45 FTEs who last year supported 133 different products. There are about 125 active projects going on at any given time. As I mentioned Elsevier itself produces about 300 electronic products.So there are about 3 web accessibility experts in Elsevier with many of our UCD staff knowing the very basics. That’s a ratio of about 40 projects to 1 ucd accessibility expert. Or a ratio of 100 Elsevier electronic web applications to 1 accessibility expert.I know some of you are thinking…wow time to get into consulting The UCD group is all about developing products with the user at the center, so we help drive requirements based on user understanding, do field research such as usability testing and ethnography, but we are also a fully capable front end design shop with experts in user experience, human factors, visual design, and web development. Our team completed over 150 different end user interviews to drive the requirements for the article of the future project.Part of my role of accessibility lead is running the Reed Elsevier accessibility working group which connects the different groups across the business who care about web accessibility. So the working group has members from UX, corporate responsibility, the book archive, product management, customer support, universal access, and upper management.The goal of the working group is to educate our staff and share best practices and to really develop a culture of universal access.I feel that the culture shift is happening at Elsevier now with 2 recent major initiatives that have happened:Accessibility MattersLast year with the support of our Elsevier CIO we published a 28 page educational booklet on disability and accessibility which was sent to over 60 offices worldwide. This was a huge success with it yielding some business units throwing money at our group to do accessibility work. Also, our RE CEO Erik Engstrom mentions Accessibility Matters in the upcoming Corporate Responsibility Report. Please see me after the show if you would like to flip through a copy of Accessibility Matters.The graphic I’m displaying is the cover of accessibility matters and one page from within the booklet. The cover of the booklet shows the palm side of a hand which is created as a tapestry of different words common in the field of accessibility. In the center of the hand a gold colored key hole shines with a globe of earth contained within the keyhole. The page from accessibility matters shows a table of disability on each row and then the impact of using computers and web with assistive technology.2) Our Universal Access group which reports directly into Elsevier strategy sponsored a task force for a company wide accessibility policy for our electronic and print products. This policy recommends that both our external products and internal sites follow WCAG 2.0 guidelines . The policy is supplemented by an implementation plan. The implementation plan details 5 steps for addressing product accessibility across our business units. The steps are Review, Document, Prioritize, Implement, and Verify. My last point is why I personally believe in creating accessible products which I regard as a civil right for everyone to have the same access to information and tools. And really that a more accessible product is more usable for everyone, so of course we should be creating quality products.
- Elsevier Company Accessibility Policy
- So what exactly is this article of the future that I’m hoping wasn’t too sensational to put into our presentation title.There is a real initiative out of our content innovation group called Article of the Future.Article of the Future is not just about redesigning the HTML article page, but a larger initiative to More background and a video about the ongoing Article of the Future project can be found at: www.articleofthefuture.com. Spoke to over 150 users in development of article redesignSome example apps include convenience programs like the iSpeech reader, which voices the content within the article. The protein viewer
- So just to provide some visuals on the before and after, this is the pre redesign HTML article page with a two column layout where all content scrolls together and the article outline would appear below the abstract.
- This redesigned article page shows three pane layout with the “always there” table of contents on the left, the main article body in the middle, and the right column with related articles and extensible apps and features.
- So my first reaction to the Redesigned article page was wow, you guys have done a lot of work here and we’re starting to really make this pretty flat webpage more dynamic and filled with more features. The three pane layout makes sense if you want to keep core features in view as users scroll read through the page and scroll.But! Have we thought about the impact of the redesign on accessibility? No, we haven’t looked at that. I thought that this was a huge risk, where in my opinion our existing HTML article page was quite accessible with good use of headings and not a lot of UI shell around it. We were talking about a new layer of navigation that we really needed to get right.So one challenge was that we came into the project after requirements were drafted, but lucky for us before UI spec was final.I reached out to Hadi and Jon Gunderson who I knew from earlier contributions to Scopus. They were great, and so willing to help us out. I think that it helped that they subscribe to ScienceDirect and have a stake in the product as users/subscribers.Let’s talk about the Operational aspects that we dealt with.So with such a large revenue generating product and constant push from the business to drive usage there is a constant queue of requirements all competing with each other to see the light of one of the 3 yearly releases. Accessibility can take a back seat when during each cycle 3-4 requirements will make it out of more than a dozen. We have 7 product managers for ScienceDirect, and they are extremely busy. We’ve had success with taking a system wide look at ScienceDirect, in fact we released an accessibility release 4 years ago. But since then, new features get put in with a varying level of emphasis on accessibility.The process that goes into creating features can also be quite heavy with long documentation. Accessibility if in our UI specs will be delivered, but can be overlooked with deadlines and UCD’ers supporting many UI specs. Keep in mind that about 1/3 of UCD time is spent on spec writing for ScienceDirect.There are also lots and lots of folks that support ScienceDirect and that has its pros and cons. But when it comes to accessible markup, you have to have a champion on the team otherwise again accessibility might get lost. Even within our own UCD team there’s the challenge of sharing the technical details like how to apply ARIA properly across the team.I remember Hadi’s reaction when I explained each ScienceDirect person’s role on the team to Hadi. It was really pretty funny. I think he thought I was Dilbert for a second. Furthermore, I also remember Hadi’s reaction to the idea that we only can touch one page in the system and the idea of applying the same learning across all pages would not fly in a release unless it was a specific requirement.So, streamlining accessibility into the process, how to succinctly promote use of ARIA landmarks, how to properly associate form fields with labels. To get into the workflow of our UCD’ers if we can remind them in the UI specification by using macros or an appendix that they can see. This is something we will be experimenting with this year.
- So my first reaction to the Redesigned article page was wow, you guys have done a lot of work here and we’re starting to really make this pretty flat webpage more dynamic and filled with more features. The three pane layout makes sense if you want to keep core features in view as users scroll read through the page and scroll.But! Have we thought about the impact of the redesign on accessibility? No, we haven’t looked at that. I thought that this was a huge risk, where in my opinion our existing HTML article page was quite accessible with good use of headings and not a lot of UI shell around it. We were talking about a new layer of navigation that we really needed to get right.So one challenge was that we came into the project after requirements were drafted, but lucky for us before UI spec was final.I reached out to Hadi and Jon Gunderson who I knew from earlier contributions to Scopus. They were great, and so willing to help us out. I think that it helped that they subscribe to ScienceDirect and have a stake in the product as users/subscribers.Let’s talk about the Operational aspects that we dealt with.So with such a large revenue generating product and constant push from the business to drive usage there is a constant queue of requirements all competing with each other to see the light of one of the 3 yearly releases. Accessibility can take a back seat when during each cycle 3-4 requirements will make it out of more than a dozen. We have 7 product managers for ScienceDirect, and they are extremely busy. We’ve had success with taking a system wide look at ScienceDirect, in fact we released an accessibility release 4 years ago. But since then, new features get put in with a varying level of emphasis on accessibility.The process that goes into creating features can also be quite heavy with long documentation. Accessibility if in our UI specs will be delivered, but can be overlooked with deadlines and UCD’ers supporting many UI specs. Keep in mind that about 1/3 of UCD time is spent on spec writing for ScienceDirect.There are also lots and lots of folks that support ScienceDirect and that has its pros and cons. But when it comes to accessible markup, you have to have a champion on the team otherwise again accessibility might get lost. Even within our own UCD team there’s the challenge of sharing the technical details like how to apply ARIA properly across the team.I remember Hadi’s reaction when I explained each ScienceDirect person’s role on the team to Hadi. It was really pretty funny. I think he thought I was Dilbert for a second. Furthermore, I also remember Hadi’s reaction to the idea that we only can touch one page in the system and the idea of applying the same learning across all pages would not fly in a release unless it was a specific requirement.So, streamlining accessibility into the process, how to succinctly promote use of ARIA landmarks, how to properly associate form fields with labels. To get into the workflow of our UCD’ers if we can remind them in the UI specification by using macros or an appendix that they can see. This is something we will be experimenting with this year.
- So, Hadi will be demonstrating some of the features of the redesigned article page, but I wanted to talk about some of the lessons learned during the collaboration.I think that we really tried to be as disciplined as possible within our collaboration group while trying to follow the development process as much as possible and without alarming the business that there would be any risk or delay with the release.Being disciplined included:Bi-monthly meetingsCapturing Meeting minutesEstablishing priorities and deadlinesUsing tools such as our listserv, web conferencing.Documenting our best practices with Word and using versioning.Transferring the knowledge to the development team at the right time.Everyone on the team being able to review the prototype and Cert environment from their desktop and provide feedback.Following up with each stage of developmentFollowing and bending our internal process meant that we needed to complete a “change control” to give us a license to add details to the UI specifications. (We also were able to convince the lead developer to tackle some additional items even though we were late).Having roles for our team was nice: I lead on the Elsevier side, Hadi led on the University side, Vasu was the lead UX’er who owned the UI specification. Julie, Ranti, Hadi, and Jon contributed the perspective of the users and accessibility gurus.I would encourage anyone struggling with getting buy-in for accessible products to just go for it without asking permission. If you act like it is your job to create fully accessible products, you might be surprised at the cooperation you get.I can’t say enough good things about the utility of a functional prototype.The functioning prototype is something that historically has served many purposes in UCD: To take screenshots for UI spec, to run usability testing with, and to help define functional requirements. For our collaboration, the functional prototype allowed all of our group to review and rally around the same code and test with assistive tec. It allowed our developer to make quick changes outside of a heavy process. It also allowed us to sit down with the developer and demonstrate proper markup.Unfortunately in Elsevier not all products have the luxury of a working prototype. Many times designs are spec’d out graphically.
- I just wanted to show a screen shot demonstrating how we document things in our UI specifications and best practices. This is a screen shot on the left of the article redesign.Each functional area on the page is circled and numbered. Then we include a table that specifies the type of ARIA landmark and label for each container.
- So I’m going to turn it over to Hadi now, but in case you want to know what features we’d like to show here is a list:Logical linearization of pageKeyboard operabilityARIA LandmarksLogical headings structureAccessible Search functionGood use of structural markup such as listsSetting Keyboard Focus From TOC paneVisual Indication of Keyboard Focus
- Screen shot of the FANGs screen reader emulator output for the article of the future page
- Screen shot of the article of the future showing the More Options menu open with Email article, Alert me about new volumes/issues, and Show thumbnail images. This is one of the features that is keyboard operable.
- Screen shot of the article of the future showing JAWS list of landmarks including Navigation, Search, Navigation, Main, Complimentary content, and Content Info
- Screenshot of article of the future displaying the JAWS Headings List.
- Screen shot of the article of the future with the search area circled. Each form element uses the label tag to associate the form input field and the corresponding label.
- Screen shot shows the article page with overlayed instances of ordered lists.Ted used the AIS toolbar for IE to highlight this. Use: Structure > List items.
- Screen capture from the Article of the Future showing that when users click the left hand article Table of Contents in the left pane, the middle pane scrolls to the appropriate section and we set keyboard focus to that section heading.
- Screen shot of the article of the future.A related article link is circled. Text links are underlined and change color when they receive keyboard focus.
- Screen capture of the article of the future page. The article is Web accessibility policies at land-grant universities.
- There is much work to do with the SciVerse ScienceDirect platform and making it universally accessible. Currently our group is tackling the search and search results.We think that this collaboration is a really great start towards universal access. We’re involving real world users who use assistive technology and are at the forefront of accessibility in the process of the product creation and we’ve proved that we can positively impact the delivered code.