Five+ Ways to Add Interactivity to Online Help

1,316 views

Published on

Nicky Bleiel

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,316
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Five+ Ways to Add Interactivity to Online Help

  1. 1. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 1Nicky BleielSenior Information DeveloperComponentOneSTC Mid-Atlantic Conference9 March, 2012Biography — Nicky Bleiel• 17+ years of experience as a technicalcommunicator.• Director, Society for Technical Communication.• Written and designed documentation for softwareproducts in the documentation, media, industrialautomation, simulation, and pharmaceuticalindustries.• Speaker at STC, WritersUA, tcworld, LavaCon, andCIDM on a variety of topics, including: embeddedhelp, tools and technologies, user assistancedesign, single sourcing, wikis, Web 2.0, Agile, andconvergence technical communication.• Articles published in STC Intercom, tcworldmagazine, TechCom Manager, WritersUA website,and the Content Wrangler.
  2. 2. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 2What We Will Cover• Discover the options available for interactivity.• Discuss how they can improve readability andusability.• Learn how to implement them in a singlesourcing environment.What About the Wisdom of the Crowd?
  3. 3. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 3Notes About Online Help• Many more options for delivery available.• Browser-based Help makes more possible, butcan add interactivity to HTML Help also.• ELearning encourages interactivity – Help is aform of Elearning.• Help = website.Considering InteractivityWill the user understand and expect therelevant action that occurs?If content is hidden, will the user know how toaccess it?Does the additional user input actually improvethe overall experience?From: Bringing Interactivity To Your Website With Web Standardshttp://coding.smashingmagazine.com/2011/02/03/bringing-interactivity-to-your-website-with-web-standards/
  4. 4. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 4Expanding/Collapsing TextImage Maps
  5. 5. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 5Glossary PopupsGoogle Maps<iframe width="425" height="350" frameborder="0"scrolling="no" marginheight="0" marginwidth="0"src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=201+South+Highland+Avenue,+Pittsburgh,+PA&amp;aq=0&amp;oq=201+south+highland+avenue,+pittsburgh&amp;sll=37.0625,-95.677068&amp;sspn=34.450489,57.832031&amp;ie=UTF8&amp;hq=&amp;hnear=201+S+Highland+Ave,+Pittsburgh,+Pennsylvania+15206&amp;ll=40.458836,-79.924694&amp;spn=0.008082,0.014119&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br/><small><ahref="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=201+South+Highland+Avenue,+Pittsburgh,+PA&amp;aq=0&amp;oq=201+south+highland+avenue,+pittsburgh&amp;sll=37.0625,-95.677068&amp;sspn=34.450489,57.832031&amp;ie=UTF8&amp;hq=&amp;hnear=201+S+Highland+Ave,+Pittsburgh,+Pennsylvania+15206&amp;ll=40.458836,-79.924694&amp;spn=0.008082,0.014119&amp;t=m&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">ComponentOne on a Map</a></small>
  6. 6. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 6Twitter “Follow” ButtonsTwitter FeedsEmbed a Twitter widget <script charset="utf-8"src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: search,search: Doc-To-Help OR DocToHelp OR #DocToHelp,interval: 30000,title: ,subject: Follow Doc-To-Help on Twitter,width: 250,height: 300,theme: {shell: {background: #8ec1da,color: #ffffff},tweets: {background: #ffffff,color: #444444,links: #1985b5}}, features: {scrollbar: true,loop: true,live: true,behavior: default}}).render().start();</script>
  7. 7. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 7VideosAre great for visual learners, but also add interactivity.Facebook Badges
  8. 8. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 8Email FeedbackAdding a simple email feedback mechanism iseasy.Dos
  9. 9. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 9What we want to do…• Make information readable• Expose layers• Encourage discovery• Include useful informationDon’ts
  10. 10. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 10What we don’t want to do…• Overdo the click count.• Get seduced by eye candy.• Mess with established standards.Things to Consider• Remember accessibility.• What about translation?• Add analytics to browser-based help – get thestats.• Security
  11. 11. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 11References/Fur ther ReadingInteractivity: A Forgotten Art? http://www2.gsu.edu/~wwwitr/docs/interact/Add Interactivity With Google Web Elements: http://www.web-hosting-newsletter.com/2009/05/29/add-interactivity-with-google-web-elements/Formulas for Readability: http://en.wikipedia.org/wiki/Readability30 Ways to Improve Readability: http://www.problogdesign.com/blog-usability/30-ways-to-improve-readability/5 Tips For Improving Readability On Your Website: http://spyrestudios.com/5-tips-for-improving-readability-on-your-website/Bringing Interactivity To Your Website With Web Standards:http://coding.smashingmagazine.com/2011/02/03/bringing-interactivity-to-your-website-with-web-standards/Progressive User Adoption: http://www.uxmatters.com/mt/archives/2009/03/progressive-user-adoption.phpTry It!• Google Maps: http://maps.google.com/• Twitter widgets:http://twitter.com/about/resources/widgets/widget_search• Twitter “follow” buttons:https://twitter.com/about/resources/buttons• Facebook Badges:http://www.facebook.com/badges/page.php
  12. 12. Nicky BleielSTC Mid-Atlantic Conference9 March, 2012 12Questions?Contact information:Nicky BleielComponentOnePittsburgh, PAnickyb@componentone.comwww.nickybleiel.comwww.doctohelp.comTwitter: @nickybleiel

×