designing embedded user assistance for web based applications n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Designing Embedded User Assistance for Web-based Applications PowerPoint Presentation
Download Presentation
Designing Embedded User Assistance for Web-based Applications

Loading in 2 Seconds...

play fullscreen
1 / 36

Designing Embedded User Assistance for Web-based Applications - PowerPoint PPT Presentation


  • 200 Views
  • Uploaded on

Designing Embedded User Assistance for Web-based Applications . Scott DeLoach. What is Embedded Help?. Help that appears in the application rather than in a separate Help window. Examples: Microsoft Money HTML Help Workshop HomeSite. Advantages of Embedded Help. Interactivity

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

Designing Embedded User Assistance for Web-based Applications


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
what is embedded help
What is Embedded Help?
  • Help that appears in the application rather than in a separate Help window.
  • Examples:
    • Microsoft Money
    • HTML Help Workshop
    • HomeSite
advantages of embedded help
Advantages of Embedded Help
  • Interactivity
    • shortcut buttons
    • troubleshooting
    • product tours
    • Performance support
  • Provide alternate interface(s)
  • Easier to use
disadvantages of embedded help
Disadvantages of Embedded Help
  • Small Help area
  • Lacks structure (TOCs, Index)
  • Printing problems
  • Harder to create and implement
example 1 designing for compatibility
Example 1:Designing for Compatibility

App/Site: Ceridian Empowerment

Specs:

  • Works any browser
  • Uses JavaScript
  • Does not use DHTML or CSS
context sensitivity

(draft icons)

Context-sensitivity

Screen-level Help provides a summary of the screen and links to related task topics.

context sensitivity1

How it works

1

2

  • JavaScript code:
  • determines the current page (currentpage.htm)
  • loads Help file as h_currentpage.htm
Context-sensitivity
active assistance
Active Assistance

Help text automatically changes when the user moves to a different field.

active assistance1

How it works

2

  • JavaScript code:
  • receives the form element’s name (bDate)
  • shows the Help file (h_bDate.htm)

<input name=”bDate" size="11" maxlength="10" onfocus="helpkey(this)" onblur="helpkey()”>

Active Assistance

1

progress tracking
Progress Tracking

Task topics monitor your progress with the arrow and mark skipped steps.

progress tracking1

How it works

<BODY TEXT="000000"

BGCOLOR="ffffff"

onload="helptask();">

1

<input name=”mStatus" size="11" maxlength="10" onchange="helptaskform(this)">

Progress Tracking

3

  • JavaScript code:
  • receives the form element or page’s name
  • finds a match in the step list
  • moves the arrow to the step

2

cross browser help system
Cross-browser Help System

JavaScript-based TOC and CGI-based search work with older browsers on virtually any platform.

tools and technologies
Tools and Technologies

Tools

  • Dreamweaver (embedded Help)
  • Notepad (JavaScript “js” file)
  • RoboHELP HTML (Help system)

Technologies

  • JavaScript
  • frames
example 2 fully integrated assistance
Example 2:Fully Integrated Assistance

App/Site: “MySample.com”

Specs:

  • Works in IE 4+ and Netscape 4+
  • Uses JavaScript
  • Uses DHTML and CSS
enhanced hover help1

How it works

onMouseOver="helpSHOW(this.title)" onMouseOut="helpHIDE(this.title)"

1

JavaScript code shows and hides the requested layer.

2

Enhanced “Hover Help”
tools and technologies1
Tools and Technologies

Tools

  • Dreamweaver (embedded Help)
  • Notepad (JavaScript “js” file)
  • RoboHELP HTML (Help system)

Technologies

  • JavaScript
  • DHTML and CSS
example 3 automatic assistance
Example 3:Automatic Assistance

App/Site: “Alamo.com”

Specs:

  • Works in IE 4+ and Netscape 4+
  • Uses JavaScript
  • Uses DHTML and CSS
automatic assistance
Automatic Assistance

“Helpful Information” automatically changes as different fields receive focus.

tools and technologies2
Tools and Technologies

Tools

  • HTML Editor

Technologies

  • JavaScript
  • DHTML and CSS
example 4 focusing on tasks
Example 4: Focusing on Tasks

App/Site: eBay

Specs:

  • Works in IE 4+ and Netscape 4+
  • Uses JavaScript
  • Uses DHTML and CSS
modular task based tutorial
Modular Task-based Tutorial

“Show me how” icon is available for every eBay item.

modular task based tutorial1
Modular Task-based Tutorial

Simple introduction and overview of the bidding tutorial.

modular task based tutorial2
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 tutorial3

How it works

Hidden layer with CGI-generated price.

1

JavaScript code shows and hides the requested layer.

2

Modular Task-based Tutorial
tools and technologies3
Tools and Technologies

Tools

  • Dreamweaver (prototyping)

Technologies

  • JavaScript
  • DHTML
  • CGI
example 5 focusing on performance
Example 5:Focusing on Performance

App/Site: US Postal Service POS1

Specs:

  • Works in any browser
  • Designed for use without a mouse
  • Uses JavaScript
quick procedural information
Quick Procedural Information

Help appears when user presses “Help” on customized keyboard.

tools and technologies4
Tools and Technologies

Tools

  • Notepad

Technologies

  • HTML
  • JavaScript
what do i need to know
“What do I need to know?”
  • HTML
  • Dynamic HTML (DHMTL)
  • Cascading Style Sheets (CSS)
  • JavaScript
  • Document Object Model (DOM)
recommended javascript books
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. It’s the best resource for answering syntax and browser compatibility questions.

recommended dhtml books
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 Explorer—and there’s a lot it can do!—this is the book for you.

questions
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@userfirst.net