Скачать презентацию Designing Embedded User Assistance for Webbased Applications Scott Скачать презентацию Designing Embedded User Assistance for Webbased Applications Scott

fafee84344616257a13fe4f442872429.ppt

  • Количество слайдов: 36

Designing Embedded User Assistance for Webbased Applications Scott De. Loach Designing Embedded User Assistance for Webbased Applications Scott De. Loach

What is Embedded Help? l Help that appears in the application rather than in 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 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 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 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 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 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. 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 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

Progress Tracking Task topics monitor your progress with the arrow and mark skipped steps. 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 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

Cross-browser Help System Java. Script-based TOC and CGI-based search work with older browsers on 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) 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 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

Window Overviews and Tips Window Overviews and Tips

Enhanced “Hover Help” Enhanced “Hover Help”

How it works Enhanced “Hover Help” 1 2 on. Mouse. Over= 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) 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 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. 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 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+ 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 “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 Simple introduction and overview of the bidding tutorial.

Modular Task-based Tutorial includes real information based on the item (in this case, the 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. 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 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 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 High-volume Retail Application

Quick Procedural Information Help appears when user presses “Help” on customized keyboard. Quick Procedural Information Help appears when user presses “Help” on customized keyboard.

Tools and Technologies Tools l Notepad Technologies l HTML l Java. Script 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 “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 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 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 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 [email protected] net