Download presentation
Presentation is loading. Please wait.
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 (draft icons) Screen-level Help provides a summary of the screen and links to related task topics.
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 JavaScript code: receives the form elements name (bDate) shows the Help file (h_bDate.htm) 2 How it works 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 <BODY TEXT="000000" BGCOLOR="ffffff" onload="helptask();"> 1 How it works 2
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
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
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
Show me how icon is available for every eBay item. Modular Task-based Tutorial
25
Simple introduction and overview of the bidding tutorial. Modular Task-based Tutorial
26
Tutorial includes real information based on the item (in this case, the actual current bid rather than a static number). Modular Task-based Tutorial
27
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. Its 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 Explorerand theres 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 scott@userfirst.net Questions?
Similar presentations
