Designing Embedded User Assistance for Web- based Applications Scott DeLoach.
Post on 27-Mar-2015
219 Views
Preview:
Transcript
Designing Embedded User Assistance for Web-
based Applications
Scott DeLoach
Help that appears in the application rather than in a separate Help window.
Examples:- Microsoft Money- HTML Help Workshop- HomeSite
What is Embedded Help?
Interactivity- shortcut buttons- troubleshooting- product tours- Performance support
Provide alternate interface(s) Easier to use
Advantages of Embedded Help
Small Help areaLacks structure (TOCs, Index)Printing problemsHarder to create and implement
Disadvantages of Embedded Help
Example 1:
Designing for Compatibility
App/Site: Ceridian Empowerment
Specs:Works any browserUses JavaScriptDoes not use DHTML or CSS
Context-sensitivity(draft icons)
Screen-level Help provides a summary of the screen and links to related task topics.
Context-sensitivity
1
How it works
JavaScript code:• determines the current page (currentpage.htm)• loads Help file as h_currentpage.htm
2
Active Assistance
Help text automatically changes when the user moves to a different field.
Active Assistance
JavaScript code:
• receives the form element’s name (bDate)
• shows the Help file (h_bDate.htm)
2
<input name=”bDate" size="11" maxlength="10" onfocus="helpkey(this)" onblur="helpkey()”>
How it works
1
Progress Tracking
Task topics monitor your progress with the arrow and mark skipped steps.
Progress Tracking
<input name=”mStatus" size="11" maxlength="10" onchange="helptaskform(this)">
JavaScript code:
• receives the form element or page’s name
• finds a match in the step list
• moves the arrow to the step
3<BODY TEXT="000000" BGCOLOR="ffffff" onload="helptask();">
1
How it works
2
Cross-browser Help System
JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.
ToolsDreamweaver (embedded Help)Notepad (JavaScript “js” file)RoboHELP HTML (Help system)
Technologies JavaScriptframes
Tools and Technologies
Example 2:
Fully Integrated Assistance
App/Site: “MySample.com”
Specs:Works in IE 4+ and Netscape 4+Uses JavaScript Uses DHTML and CSS
Window Overviews and Tips
Window Overviews and Tips
Enhanced “Hover Help”
Enhanced “Hover Help”How it works
onMouseOver="helpSHOW(this.title)" onMouseOut="helpHIDE(this.title)"
1
JavaScript code shows and hides the requested layer.
2
ToolsDreamweaver (embedded Help)Notepad (JavaScript “js” file)RoboHELP HTML (Help system)
Technologies JavaScriptDHTML and CSS
Tools and Technologies
Example 3:
Automatic Assistance
App/Site: “Alamo.com”
Specs:Works in IE 4+ and Netscape 4+Uses JavaScript Uses DHTML and CSS
Automatic Assistance
“Helpful Information” automatically changes as different fields receive focus.
ToolsHTML Editor
Technologies JavaScriptDHTML and CSS
Tools and Technologies
Example 4:
Focusing on Tasks
App/Site: eBay
Specs:Works in IE 4+ and Netscape 4+Uses JavaScript Uses DHTML and CSS
“Show me how” icon is available for every eBay item.
Modular Task-based Tutorial
Simple introduction and overview of the bidding tutorial.
Modular Task-based Tutorial
Tutorial includes real information based on the item (in this case, the actual current bid rather than a static number).
Modular Task-based Tutorial
Modular Task-based TutorialHow it works
Hidden layer with CGI-generated price.1
JavaScript code shows and hides the requested layer.
2
ToolsDreamweaver (prototyping)
Technologies JavaScriptDHTMLCGI
Tools and Technologies
Example 5:
Focusing on Performance
App/Site: US Postal Service POS1
Specs:Works in any browserDesigned for use without a mouseUses JavaScript
High-volume Retail Application
Quick Procedural Information
Help appears when user presses “Help” on customized keyboard.
ToolsNotepad
TechnologiesHTML JavaScript
Tools and Technologies
HTMLDynamic HTML (DHMTL) Cascading Style Sheets (CSS) JavaScriptDocument Object Model (DOM)
“What do I need to know?”
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
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
Feel free to e-mail me. Or, catch me later at the conference!
Scott DeLoachFounding Partner, User First Services, Inc.Certified RoboHELP Instructor and Consultant404.520.0003scott@userfirst.net
Questions?
top related