Your SlideShare is downloading. ×
0
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
How to Create Web-based Embedded Help
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to Create Web-based Embedded Help

703

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
703
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
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
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • 2 2 2 2
  • Transcript

    • 1. Designing Embedded User Assistance for Web-based Applications Scott DeLoach
    • 2. <ul><li>Help that appears in the application rather than in a separate Help window. </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Microsoft Money </li></ul></ul><ul><ul><li>HTML Help Workshop </li></ul></ul><ul><ul><li>HomeSite </li></ul></ul>What is Embedded Help?
    • 3. <ul><li>Interactivity </li></ul><ul><ul><li>shortcut buttons </li></ul></ul><ul><ul><li>troubleshooting </li></ul></ul><ul><ul><li>product tours </li></ul></ul><ul><ul><li>Performance support </li></ul></ul><ul><li>Provide alternate interface(s) </li></ul><ul><li>Easier to use </li></ul>Advantages of Embedded Help
    • 4. <ul><li>Small Help area </li></ul><ul><li>Lacks structure (TOCs, Index) </li></ul><ul><li>Printing problems </li></ul><ul><li>Harder to create and implement </li></ul>Disadvantages of Embedded Help
    • 5. Example 1: Designing for Compatibility <ul><li>App/Site: Ceridian Empowerment </li></ul><ul><li>Specs: </li></ul><ul><li>Works any browser </li></ul><ul><li>Uses JavaScript </li></ul><ul><li>Does not use DHTML or CSS </li></ul>
    • 6. Context-sensitivity Screen-level Help provides a summary of the screen and links to related task topics. (draft icons)
    • 7. Context-sensitivity 1 How it works <ul><li>JavaScript code: </li></ul><ul><li>determines the current page (currentpage.htm) </li></ul><ul><li>loads Help file as h_currentpage.htm </li></ul>2
    • 8. Active Assistance Help text automatically changes when the user moves to a different field.
    • 9. Active Assistance 1 <ul><li>JavaScript code: </li></ul><ul><li>receives the form element’s name (bDate) </li></ul><ul><li>shows the Help file (h_bDate.htm) </li></ul>2 &lt;input name=”bDate&amp;quot; size=&amp;quot;11&amp;quot; maxlength=&amp;quot;10&amp;quot; onfocus=&amp;quot;helpkey(this)&amp;quot; onblur=&amp;quot;helpkey()”&gt; How it works
    • 10. Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps.
    • 11. Progress Tracking <ul><li>JavaScript code: </li></ul><ul><li>receives the form element or page’s name </li></ul><ul><li>finds a match in the step list </li></ul><ul><li>moves the arrow to the step </li></ul>3 2 &lt;input name=”mStatus&amp;quot; size=&amp;quot;11&amp;quot; maxlength=&amp;quot;10&amp;quot; onchange=&amp;quot;helptaskform(this)&amp;quot;&gt; &lt;BODY TEXT=&amp;quot;000000&amp;quot; BGCOLOR=&amp;quot;ffffff&amp;quot; onload=&amp;quot;helptask();&amp;quot;&gt; 1 How it works
    • 12. Cross-browser Help System JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.
    • 13. <ul><li>Tools </li></ul><ul><li>Dreamweaver (embedded Help) </li></ul><ul><li>Notepad (JavaScript “js” file) </li></ul><ul><li>RoboHELP HTML (Help system) </li></ul><ul><li>Technologies </li></ul><ul><li>JavaScript </li></ul><ul><li>frames </li></ul>Tools and Technologies
    • 14. Example 2: Fully Integrated Assistance <ul><li>App/Site: “MySample.com” </li></ul><ul><li>Specs: </li></ul><ul><li>Works in IE 4+ and Netscape 4+ </li></ul><ul><li>Uses JavaScript </li></ul><ul><li>Uses DHTML and CSS </li></ul>
    • 15. Window Overviews and Tips
    • 16. Window Overviews and Tips
    • 17. Enhanced “Hover Help”
    • 18. Enhanced “Hover Help” How it works onMouseOver=&amp;quot;helpSHOW(this.title)&amp;quot; onMouseOut=&amp;quot;helpHIDE(this.title)&amp;quot; 1 JavaScript code shows and hides the requested layer. 2
    • 19. <ul><li>Tools </li></ul><ul><li>Dreamweaver (embedded Help) </li></ul><ul><li>Notepad (JavaScript “js” file) </li></ul><ul><li>RoboHELP HTML (Help system) </li></ul><ul><li>Technologies </li></ul><ul><li>JavaScript </li></ul><ul><li>DHTML and CSS </li></ul>Tools and Technologies
    • 20. Example 3: Automatic Assistance <ul><li>App/Site: “Alamo.com” </li></ul><ul><li>Specs: </li></ul><ul><li>Works in IE 4+ and Netscape 4+ </li></ul><ul><li>Uses JavaScript </li></ul><ul><li>Uses DHTML and CSS </li></ul>
    • 21. Automatic Assistance “ Helpful Information” automatically changes as different fields receive focus.
    • 22. <ul><li>Tools </li></ul><ul><li>HTML Editor </li></ul><ul><li>Technologies </li></ul><ul><li>JavaScript </li></ul><ul><li>DHTML and CSS </li></ul>Tools and Technologies
    • 23. Example 4: Focusing on Tasks <ul><li>App/Site: eBay </li></ul><ul><li>Specs: </li></ul><ul><li>Works in IE 4+ and Netscape 4+ </li></ul><ul><li>Uses JavaScript </li></ul><ul><li>Uses DHTML and CSS </li></ul>
    • 24. Modular Task-based Tutorial “ Show me how” icon is available for every eBay item.
    • 25. Modular Task-based Tutorial Simple introduction and overview of the bidding tutorial.
    • 26. Modular Task-based Tutorial Tutorial includes real information based on the item (in this case, the actual current bid rather than a static number).
    • 27. Modular Task-based Tutorial How it works Hidden layer with CGI-generated price. 1 JavaScript code shows and hides the requested layer. 2
    • 28. <ul><li>Tools </li></ul><ul><li>Dreamweaver (prototyping) </li></ul><ul><li>Technologies </li></ul><ul><li>JavaScript </li></ul><ul><li>DHTML </li></ul><ul><li>CGI </li></ul>Tools and Technologies
    • 29. Example 5: Focusing on Performance <ul><li>App/Site: US Postal Service POS1 </li></ul><ul><li>Specs: </li></ul><ul><li>Works in any browser </li></ul><ul><li>Designed for use without a mouse </li></ul><ul><li>Uses JavaScript </li></ul>
    • 30. High-volume Retail Application
    • 31. Quick Procedural Information Help appears when user presses “Help” on customized keyboard.
    • 32. <ul><li>Tools </li></ul><ul><li>Notepad </li></ul><ul><li>Technologies </li></ul><ul><li>HTML </li></ul><ul><li>JavaScript </li></ul>Tools and Technologies
    • 33. <ul><li>HTML </li></ul><ul><li>Dynamic HTML (DHMTL) </li></ul><ul><li>Cascading Style Sheets (CSS) </li></ul><ul><li>JavaScript </li></ul><ul><li>Document Object Model (DOM) </li></ul>“What do I need to know?”
    • 34. <ul><li>Heinle, Nick. Designing with JavaScript . A great introduction to JavaScript. </li></ul><ul><li>Holzner, Steven. JavaScript Complete . This book focuses on version 4+ browsers and provides good information about Dynamic HTML. </li></ul><ul><li>Goodman, Danny. JavaScript Bible . An excellent reference book. It’s the best resource for answering syntax and browser compatibility questions. </li></ul>Recommended JavaScript Books
    • 35. <ul><li>Schurman, Eric. Dynamic HTML in Action . Great introduction to HTML and DHTML. </li></ul><ul><li>Goodman, Danny. Dynamic HTML: The Definitive Reference . A handy reference, especially if you are developing cross-platform embedded Help. </li></ul><ul><li>Microsoft Press. DHTML Reference and SDK . Comprehensive reference book. If you need to know everything about DHTML in Internet Explorer—and there’s a lot it can do!—this is the book for you. </li></ul>Recommended DHTML Books
    • 36. <ul><li>Feel free to e-mail me. Or, catch me later at the conference! </li></ul><ul><li>Scott DeLoach </li></ul><ul><li>Founding Partner, User First Services, Inc. </li></ul><ul><li>Certified RoboHELP Instructor and Consultant </li></ul><ul><li>404.520.0003 </li></ul><ul><li>[email_address] </li></ul>Questions?

    ×