Créateur de présentation | Survey | Quiz | Lead-form Accédez à 1,00,000+ modèles PowerPoint (pour les utilisateurs de SlideServe) - Parcourir maintenant
Download
designing embedded user assistance for web based applications n.
Skip this Video
Loading SlideShow in 5 Seconds..
Designing Embedded User Assistance for Web-based Applications PowerPoint Presentation
Download Presentation
Designing Embedded User Assistance for Web-based Applications

share
play prev play next
play fullscreen
1 / 36

Designing Embedded User Assistance for Web-based Applications

228 Vues Download Presentation
Télécharger la présentation

Designing Embedded User Assistance for Web-based Applications

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Designing Embedded User Assistance for Web-based Applications Scott DeLoach

  2. What is Embedded Help? • Help that appears in the application rather than in a separate Help window. • Examples: • Microsoft Money • HTML Help Workshop • HomeSite

  3. Advantages of Embedded Help • Interactivity • shortcut buttons • troubleshooting • product tours • Performance support • Provide alternate interface(s) • Easier to use

  4. Disadvantages of Embedded Help • Small Help area • Lacks structure (TOCs, Index) • Printing problems • Harder to create and implement

  5. Example 1:Designing for Compatibility App/Site: Ceridian Empowerment Specs: • Works any browser • Uses JavaScript • Does not use DHTML or CSS

  6. (draft icons) Context-sensitivity Screen-level Help provides a summary of the screen and links to related task topics.

  7. How it works 1 2 • JavaScript code: • determines the current page (currentpage.htm) • loads Help file as h_currentpage.htm Context-sensitivity

  8. Active Assistance Help text automatically changes when the user moves to a different field.

  9. How it works 2 • JavaScript code: • receives the form element’s name (bDate) • shows the Help file (h_bDate.htm) <input name=”bDate" size="11" maxlength="10" onfocus="helpkey(this)" onblur="helpkey()”> Active Assistance 1

  10. Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps.

  11. How it works <BODY TEXT="000000" BGCOLOR="ffffff" onload="helptask();"> 1 <input name=”mStatus" size="11" maxlength="10" onchange="helptaskform(this)"> Progress Tracking 3 • JavaScript code: • receives the form element or page’s name • finds a match in the step list • moves the arrow to the step 2

  12. Cross-browser Help System JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.

  13. Tools and Technologies Tools • Dreamweaver (embedded Help) • Notepad (JavaScript “js” file) • RoboHELP HTML (Help system) Technologies • JavaScript • frames

  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. How it works onMouseOver="helpSHOW(this.title)" onMouseOut="helpHIDE(this.title)" 1 JavaScript code shows and hides the requested layer. 2 Enhanced “Hover Help”

  19. Tools and Technologies Tools • Dreamweaver (embedded Help) • Notepad (JavaScript “js” file) • RoboHELP HTML (Help system) Technologies • JavaScript • DHTML and CSS

  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 and Technologies Tools • HTML Editor Technologies • JavaScript • DHTML and CSS

  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. How it works Hidden layer with CGI-generated price. 1 JavaScript code shows and hides the requested layer. 2 Modular Task-based Tutorial

  28. Tools and Technologies Tools • Dreamweaver (prototyping) Technologies • JavaScript • DHTML • CGI

  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 and Technologies Tools • Notepad Technologies • HTML • JavaScript

  33. “What do I need to know?” • HTML • Dynamic HTML (DHMTL) • Cascading Style Sheets (CSS) • JavaScript • Document Object Model (DOM)

  34. Recommended JavaScript Books 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.

  35. Recommended DHTML Books 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.

  36. Questions? 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 scott@userfirst.net