Embedded UA 101 - STC Summit 2013, Scott DeLoach, ClickStart

  • 808 views
Uploaded on

Web-based embedded user assistance guidelines, best practices, and examples, including HTML5 techniques

Web-based embedded user assistance guidelines, best practices, and examples, including HTML5 techniques

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
808
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
28
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Embedded UA 101 – STC Summit 2013Scott DeLoach – scott@clickstart.net ClickStart – www.clickstart.netWriting guidelinesPersuade, motivate, and communicatewww.bankofamerica.com – overview text set expectations and establishes trust, “Help Center” predicts common user questionsRemember that writing is a conversationwww.restaurant.com – uses an informal and friendly writing style to match their corporate imageSTC Summit 2013 © 2013, ClickStart
  • 2. Integrate content from other sourcesDreamweaver CS5 – includes content from O’Reilly guidesUser feedback guidelinesAllow users to add commentsmsdn.microsoft.com – allows users to add comments, even if they highlight bugsProvide other UA optionsSTC Summit 2013 © 2013, ClickStart
  • 3. www.americanexpress.com – provides chat and phone optionswww.download.com – provides instructional videos while users download applicationsRequest feedbackmsdn.microsoft.com – provides a link for users to comment on UA topicsSTC Summit 2013 © 2013, ClickStart
  • 4. Rank popular topicswww.apple.com – automatically ranks popular discussions, topics, and search termsCustomization guidelinesAllow users to select a languagewww.carnival.com – allows user to translate contentimg.labnol.org/files/translation.html – uses Google’s AJAX Language APISTC Summit 2013 © 2013, ClickStart
  • 5. Allow users to ask their own questionswww.washingtonpost.com – uses a third-party application (Apture) to provide additional informationAllow users to reuse contentkb.madcapsoftware.com – provides links to post content on Facebook or Twitter, save to favorites, or printAllow users to turn off automatic user assistancewww.ebay.com – users can turn user assistance popups off/onSTC Summit 2013 © 2013, ClickStart
  • 6. User learning guidelinesEncourage successexplore.live.com – Windows Live uses UA link wording to encourage users to learnEncourage explorationwww.kayak.com – encourages users to become “Kayak experts”Challenge usersqlc.intuit.com – encourages users to test their knowledgeSTC Summit 2013 © 2013, ClickStart
  • 7. HTML5 techniquesI will demonstrate these techniques during the session.Adding subtitles to instructional videosYou can use Jan Gerber’s jQuery-based script to match an srt subtitle document to an HTML5 video.<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.srt.js"></script><video src="video.webm" type="video/webm" id="video" controls></video><div class="srt" data-video="video" data-srt="subtitles.srt" />Editing contentYou can use the contenteditable attribute to allow users to change content.<p contenteditable="true">Beckenbauer is the best soccer player of all time.</p>Saving contentYou can use the WebStorage API to save the user-provided content.<form name=myForm><p><label>First Name: <input name=fName></label></p><p><label>Last Name: <input name=lName></label></p><input type=button value="Add Player" onclick="addPlayer()"><input type=button value="Get Player" onclick="getPlayer()"><input type=button value="Remove Player" onclick="removePlayer()"><table id=team></table><p><label><input type=button value="Clear Team" onclick="clearAll()"></label></p></form><script>function addPlayer() {var fName = document.forms.myForm.fName.value; var lName = document.forms.myForm.lName.value;localStorage.setItem(fName,lName);showAll();}function getPlayer() {var fName = document.forms.myForm.fName.value; var lName = document.forms.myForm.lName.value;localStorage.getItem(fName,lName);document.forms.myForm.fName.value = fName; document.forms.myForm.lName.value = lName;showAll();}function removePlayer() {var fName = document.forms.myForm.fName.value;localStorage.removeItem(fName);showAll();document.forms.myForm.fName.value = ""; document.forms.myForm.lName.value = "";}function clearAll() { localStorage.clear(); showAll(); }function showAll() {var key = ""; var players = "<tr><th>First</th><th>Last</th></tr>n";var i=0; for (i=0; i<=localStorage.length-1; i++) {key = localStorage.key(i); players += "<tr><td>"+key+"</td>n<td>"+localStorage.getItem(key)+"</td></tr>n";}if (players == "<tr><th>First</th><th>Last</th></tr>n") { players += "<tr><td>empty</td>n<td>empty</td></tr>n"; }document.getElementById(team).innerHTML = players;STC Summit 2013 © 2013, ClickStart
  • 8. } </script>FormsHTML5 provides numerous built-in user assistance options for forms.Requiring user input<label>First name <input name="fname" required> </label>Validating email addresses<input name="myEmail" type="email">Validating URLs<input name="myURL" type="url">Validating custom form elements<label>SSN: <input pattern="[0-9]{9}" name="ssn" title="A social security number has nine digits." > </label>Formatting valid/invalid HTML5 form elementsinput:required:focus:invalid, input:required:invalid {background-image: url(bad.png);background-position: right top;background-repeat: no-repeat;}input:required:valid, input:required:focus:valid {background-image: url(good.png);background-position: right top;background-repeat: no-repeat;}Spellchecking user input<p spellcheck="true" contenteditable="true">type your favorite city here</p>City: <input type="text" spellcheck="true" >ExamplesWindows applicationsDreamweaverMadCap FlareWebsiteswww.bankofamerica.comSTC Summit 2013 © 2013, ClickStart
  • 9. www.restaurant.commsdn.microsoft.comwww.americanexpress.comwww.download.comwww.apple.comwww.carnival.comimg.labnol.org/files/translation.htmlwww.washingtonpost.comkb.madcapsoftware.comwww.ebay.comexplore.live.comwww.kayak.comqlc.intuit.comwww.html5tothepoint.comAbout the presenterScott DeLoach is the Founder of ClickStart, where he provides training and consulting for MadCap Flare,Adobe Captivate, embedded user assistance, CSS, and HTML5. He has been developing browser-based helpsystems since 1997, and he has received four Best in Show awards for his work from STC.Scott is a certified Flare and Captivate instructor, and he is the author of MadCap Flare V9 Developers Guide,CSS to the Point, HTML5 to the Point, and Word 2013 to the Point. For more information about Scotts bookssee www.lulu.com/clickstart.You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.STC Summit 2013 © 2013, ClickStart
  • 10. www.restaurant.commsdn.microsoft.comwww.americanexpress.comwww.download.comwww.apple.comwww.carnival.comimg.labnol.org/files/translation.htmlwww.washingtonpost.comkb.madcapsoftware.comwww.ebay.comexplore.live.comwww.kayak.comqlc.intuit.comwww.html5tothepoint.comAbout the presenterScott DeLoach is the Founder of ClickStart, where he provides training and consulting for MadCap Flare,Adobe Captivate, embedded user assistance, CSS, and HTML5. He has been developing browser-based helpsystems since 1997, and he has received four Best in Show awards for his work from STC.Scott is a certified Flare and Captivate instructor, and he is the author of MadCap Flare V9 Developers Guide,CSS to the Point, HTML5 to the Point, and Word 2013 to the Point. For more information about Scotts bookssee www.lulu.com/clickstart.You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.STC Summit 2013 © 2013, ClickStart