Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Designing Embedded User Assistance for Web- based Applications Scott DeLoach."— Presentation transcript:

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 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

16

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?


Download ppt "Designing Embedded User Assistance for Web- based Applications Scott DeLoach."

Similar presentations


Ads by Google