How to Create Web-based Embedded Help

786
-1

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
786
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

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
  • How to Create Web-based Embedded Help

    1. 1. Designing Embedded User Assistance for Web-based Applications Scott DeLoach
    2. 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. 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. 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. 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. 6. Context-sensitivity Screen-level Help provides a summary of the screen and links to related task topics. (draft icons)
    7. 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. 8. Active Assistance Help text automatically changes when the user moves to a different field.
    9. 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 <input name=”bDate&quot; size=&quot;11&quot; maxlength=&quot;10&quot; onfocus=&quot;helpkey(this)&quot; onblur=&quot;helpkey()”> How it works
    10. 10. Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps.
    11. 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 <input name=”mStatus&quot; size=&quot;11&quot; maxlength=&quot;10&quot; onchange=&quot;helptaskform(this)&quot;> <BODY TEXT=&quot;000000&quot; BGCOLOR=&quot;ffffff&quot; onload=&quot;helptask();&quot;> 1 How it works
    12. 12. Cross-browser Help System JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.
    13. 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. 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. 15. Window Overviews and Tips
    16. 16. Window Overviews and Tips
    17. 17. Enhanced “Hover Help”
    18. 18. Enhanced “Hover Help” How it works onMouseOver=&quot;helpSHOW(this.title)&quot; onMouseOut=&quot;helpHIDE(this.title)&quot; 1 JavaScript code shows and hides the requested layer. 2
    19. 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. 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. 21. Automatic Assistance “ Helpful Information” automatically changes as different fields receive focus.
    22. 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. 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. 24. Modular Task-based Tutorial “ Show me how” icon is available for every eBay item.
    25. 25. Modular Task-based Tutorial Simple introduction and overview of the bidding tutorial.
    26. 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. 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. 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. 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. 30. High-volume Retail Application
    31. 31. Quick Procedural Information Help appears when user presses “Help” on customized keyboard.
    32. 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. 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. 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. 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. 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?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×