Designing Embedded User Assistance for Web-based Applications

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 1Designing 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.
7
Context-sensitivity
8
Active Assistance
Help text automatically changes when the user
moves to a different field.
9
Active Assistance
1
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 pages name
• finds a match in the step list
• moves the arrow to the step

3
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 2Fully 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
19
Tools and Technologies

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

20
Example 3Automatic 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
Modular Task-based Tutorial
28
Tools and Technologies

• Tools
• Dreamweaver (prototyping)
• Technologies
• JavaScript
• DHTML
• CGI

29
Example 5Focusing 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. Its 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
  Explorerand theres 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_at_userfirst.net