Designing Embedded User Assistance for Webbased Applications Scott De. Loach
What is Embedded Help? l Help that appears in the application rather than in a separate Help window. l Examples: - Microsoft Money HTML Help Workshop Home. Site
Advantages of Embedded Help l Interactivity - shortcut buttons troubleshooting product tours Performance support Provide alternate interface(s) l Easier to use l
Disadvantages of Embedded Help Small Help area l Lacks structure (TOCs, Index) l Printing problems l Harder to create and implement l
Example 1: Designing for Compatibility App/Site: Ceridian Empowerment Specs: l Works any browser l Uses Java. Script l Does not use DHTML or CSS
Context-sensitivity (draft icons) Screen-level Help provides a summary of the screen and links to related task topics.
How it works Context-sensitivity 1 2 Java. Script code: • determines the current page (currentpage. htm) • loads Help file as h_currentpage. htm
Active Assistance Help text automatically changes when the user moves to a different field.
How it works Active Assistance Java. Script code: • receives the form element’s name (b. Date) • shows the Help file (h_b. Date. htm) 2 1 <input name=”b. Date" size="11" maxlength="10" onfocus="helpkey(this)" onblur="helpkey()”>
Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps.
How it works Progress Tracking Java. Script code: • receives the form element or page’s name • finds a match in the step list • moves the arrow to the step 1 3 2 <BODY TEXT="000000" BGCOLOR="ffffff" onload="helptask(); "> <input name=”m. Status" size="11" maxlength="10" onchange="helptaskform(this)">
Cross-browser Help System Java. Script-based TOC and CGI-based search work with older browsers on virtually any platform.
Tools and Technologies Tools l Dreamweaver (embedded Help) l Notepad (Java. Script “js” file) l Robo. HELP HTML (Help system) Technologies l Java. Script l frames
Example 2: Fully Integrated Assistance App/Site: “My. Sample. com” Specs: l Works in IE 4+ and Netscape 4+ l Uses Java. Script l Uses DHTML and CSS
Window Overviews and Tips
Window Overviews and Tips
Enhanced “Hover Help”
How it works Enhanced “Hover Help” 1 2 on. Mouse. Over="help. SHOW(this. title)" on. Mouse. Out="help. HIDE(this. title)" Java. Script code shows and hides the requested layer.
Tools and Technologies Tools l Dreamweaver (embedded Help) l Notepad (Java. Script “js” file) l Robo. HELP HTML (Help system) Technologies l Java. Script l DHTML and CSS
Example 3: Automatic Assistance App/Site: “Alamo. com” Specs: l Works in IE 4+ and Netscape 4+ l Uses Java. Script l Uses DHTML and CSS
Automatic Assistance “Helpful Information” automatically changes as different fields receive focus.
Tools and Technologies Tools l HTML Editor Technologies l Java. Script l DHTML and CSS
Example 4: Focusing on Tasks App/Site: e. Bay Specs: l Works in IE 4+ and Netscape 4+ l Uses Java. Script l Uses DHTML and CSS
Modular Task-based Tutorial “Show me how” icon is available for every e. Bay item.
Modular Task-based Tutorial Simple introduction and overview of the bidding tutorial.
Modular Task-based Tutorial includes real information based on the item (in this case, the actual current bid rather than a static number).
How it works Modular Task-based Tutorial 1 2 Hidden layer with CGI-generated price. Java. Script code shows and hides the requested layer.
Tools and Technologies Tools l Dreamweaver (prototyping) Technologies l Java. Script l DHTML l CGI
Example 5: Focusing on Performance App/Site: US Postal Service POS 1 Specs: l Works in any browser l Designed for use without a mouse l Uses Java. Script
High-volume Retail Application
Quick Procedural Information Help appears when user presses “Help” on customized keyboard.
Tools and Technologies Tools l Notepad Technologies l HTML l Java. Script
“What do I need to know? ” HTML l Dynamic HTML (DHMTL) l Cascading Style Sheets (CSS) l Java. Script l Document Object Model (DOM) l
Recommended Java. Script Books Heinle, Nick. Designing with Java. Script. A great introduction to Java. Script. Holzner, Steven. Java. Script Complete. This book focuses on version 4+ browsers and provides good information about Dynamic HTML. Goodman, Danny. Java. Script Bible. An excellent reference book. It’s the best resource for answering syntax and browser compatibility questions.
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 crossplatform 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.
Questions? Feel free to e-mail me. Or, catch me later at the conference! Scott De. Loach Founding Partner, User First Services, Inc. Certified Robo. HELP Instructor and Consultant 404. 520. 0003 scott@userfirst. net
Скачать презентацию Designing Embedded User Assistance for Webbased Applications Scott
fafee84344616257a13fe4f442872429.ppt