How to Create Web-based Embedded Help

  • 633 views
Uploaded on

 

  • 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
633
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
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.
    • Help that appears in the application rather than in a separate Help window.
    • Examples:
      • Microsoft Money
      • HTML Help Workshop
      • HomeSite
    What is Embedded Help?
  • 3.
    • Interactivity
      • shortcut buttons
      • troubleshooting
      • product tours
      • Performance support
    • Provide alternate interface(s)
    • Easier to use
    Advantages of Embedded Help
  • 4.
    • Small Help area
    • Lacks structure (TOCs, Index)
    • Printing problems
    • Harder to create and implement
    Disadvantages of Embedded Help
  • 5. Example 1: Designing for Compatibility
    • App/Site: Ceridian Empowerment
    • Specs:
    • Works any browser
    • Uses JavaScript
    • Does not use DHTML or CSS
  • 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
    • JavaScript code:
    • determines the current page (currentpage.htm)
    • loads Help file as h_currentpage.htm
    2
  • 8. Active Assistance Help text automatically changes when the user moves to a different field.
  • 9. Active Assistance 1
    • JavaScript code:
    • receives the form element’s name (bDate)
    • shows the Help file (h_bDate.htm)
    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. Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps.
  • 11. Progress Tracking
    • JavaScript code:
    • receives the form element or page’s name
    • finds a match in the step list
    • moves the arrow to the step
    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. Cross-browser Help System JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.
  • 13.
    • Tools
    • Dreamweaver (embedded Help)
    • Notepad (JavaScript “js” file)
    • RoboHELP HTML (Help system)
    • Technologies
    • JavaScript
    • frames
    Tools and Technologies
  • 14. Example 2: Fully Integrated Assistance
    • App/Site: “MySample.com”
    • Specs:
    • Works in IE 4+ and Netscape 4+
    • Uses JavaScript
    • Uses DHTML and CSS
  • 15. Window Overviews and Tips
  • 16. Window Overviews and Tips
  • 17. Enhanced “Hover Help”
  • 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.
    • Tools
    • Dreamweaver (embedded Help)
    • Notepad (JavaScript “js” file)
    • RoboHELP HTML (Help system)
    • Technologies
    • JavaScript
    • DHTML and CSS
    Tools and Technologies
  • 20. Example 3: Automatic Assistance
    • App/Site: “Alamo.com”
    • Specs:
    • Works in IE 4+ and Netscape 4+
    • Uses JavaScript
    • Uses DHTML and CSS
  • 21. Automatic Assistance “ Helpful Information” automatically changes as different fields receive focus.
  • 22.
    • Tools
    • HTML Editor
    • Technologies
    • JavaScript
    • DHTML and CSS
    Tools and Technologies
  • 23. Example 4: Focusing on Tasks
    • App/Site: eBay
    • Specs:
    • Works in IE 4+ and Netscape 4+
    • Uses JavaScript
    • Uses DHTML and CSS
  • 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.
    • Tools
    • Dreamweaver (prototyping)
    • Technologies
    • JavaScript
    • DHTML
    • CGI
    Tools and Technologies
  • 29. Example 5: Focusing on Performance
    • App/Site: US Postal Service POS1
    • Specs:
    • Works in any browser
    • Designed for use without a mouse
    • Uses JavaScript
  • 30. High-volume Retail Application
  • 31. Quick Procedural Information Help appears when user presses “Help” on customized keyboard.
  • 32.
    • Tools
    • Notepad
    • Technologies
    • HTML
    • JavaScript
    Tools and Technologies
  • 33.
    • HTML
    • Dynamic HTML (DHMTL)
    • Cascading Style Sheets (CSS)
    • JavaScript
    • Document Object Model (DOM)
    “What do I need to know?”
  • 34.
    • Heinle, Nick. Designing with JavaScript . A great introduction to JavaScript.
    • Holzner, Steven. JavaScript Complete . This book focuses on version 4+ browsers and provides good information about Dynamic HTML.
    • Goodman, Danny. JavaScript Bible . An excellent reference book. It’s the best resource for answering syntax and browser compatibility questions.
    Recommended JavaScript Books
  • 35.
    • Schurman, Eric. Dynamic HTML in Action . Great introduction to HTML and DHTML.
    • Goodman, Danny. Dynamic HTML: The Definitive Reference . A handy reference, especially if you are developing cross-platform embedded Help.
    • 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.
    Recommended DHTML Books
  • 36.
    • Feel free to e-mail me. Or, catch me later at the conference!
    • Scott DeLoach
    • Founding Partner, User First Services, Inc.
    • Certified RoboHELP Instructor and Consultant
    • 404.520.0003
    • [email_address]
    Questions?