12
Nicky Bleiel STC Mid-Atlantic Conference 9 March, 2012 1 Nicky Bleiel Senior Information Developer ComponentOne STC Mid-Atlantic Conference 9 March, 2012 Biography — Nicky Bleiel 17+ years of experience as a technical communicator. Director, Society for Technical Communication. Written and designed documentation for software products in the documentation, media, industrial automation, simulation, and pharmaceutical industries. Speaker at STC, WritersUA, tcworld, LavaCon, and CIDM on a variety of topics, including: embedded help, tools and technologies, user assistance design, single sourcing, wikis, Web 2.0, Agile, and convergence technical communication. Articles published in STC Intercom, tcworld magazine, TechCom Manager, WritersUA website, and the Content Wrangler.

Five+ Ways to Add Interactivity to Online Help

Embed Size (px)

DESCRIPTION

Nicky Bleiel

Citation preview

Page 1: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 1

Nicky BleielSenior Information DeveloperComponentOne

STC Mid-Atlantic Conference9 March, 2012

Biography — Nicky Bleiel• 17+ years of experience as a technical

communicator.

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

Page 2: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 2

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

Page 3: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 3

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

Page 4: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 4

Expanding/Collapsing Text

Image Maps

Page 5: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 5

Glossary Popups

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

Page 6: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 6

Twitter “Follow” Buttons

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

Page 7: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 7

VideosAre great for visual learners, but also add interactivity.

Facebook Badges

Page 8: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 8

Email FeedbackAdding a simple email feedback mechanism iseasy.

Dos

Page 9: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 9

What we want to do…

• Make information readable

• Expose layers

• Encourage discovery

• Include useful information

Don’ts

Page 10: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 10

What 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

Page 11: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 11

References/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/Readability

30 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.php

Try 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

Page 12: Five+ Ways to Add Interactivity to Online Help

Nicky Bleiel

STC Mid-Atlantic Conference9 March, 2012 12

Questions?

Contact information:

Nicky BleielComponentOne

Pittsburgh, PA

[email protected]

www.nickybleiel.com

www.doctohelp.com

Twitter: @nickybleiel