Developing Embedded User Assistance for

Web-based Applications

Scott DeLoach

Introduction to embedded UA

Three types of embedded UA- field-level- conceptual- procedural

How to open embedded UA- DHTML popup layers- popup windows- embedded UA panels

Session Overview

Rarely developed with a HAT

Often stored with application Less navigation

Very short topics More emphasis on field descriptions and

less on procedures

How Embedded UA Is Different from External Help Systems

What questions do users have?- Field-level- Conceptual- Procedural

How much screen real estate is available?- No space- Page overviews- Field labels- Moving UA area- Dedicated UA panel

What technologies can you use?- JavaScript- ASP/VBScript- Java/JSP- .NET

Decision Points for Embedded UA

Field-level

Procedural Conceptual

User Questions

Reminders"What does this acronym mean?"

Exceptions"What if I have two middle names?"

Relationships and Dependencies"How do these settings relate to each other?"

Field-level Questions

Embed as much as possible

Link to conceptual and procedural topics when necessary (and possible)

Group related field-level topics to increase usability

Field-level UA Goals

Labels

DHTML popup layers Popup windows

Grouped popups Dedicated UA panel

Field-level UA Options

Field Labels – Example

eloan.com

field-level UA

Field Labels – Pros and Cons

Pro Very useful and easy to use

Cons Do not scale well to support all fields

Very limited amount of information

field-level UA

DHTML Popups – Example

nationalcitymortgage.com

field-level UA

DHTML Popups – Pros and Cons

Pro Can include a large amount of information

Cons Usually cannot include links

Must be "found" by users

field-level UA

Popup Windows – Example

apple.com

field-level UA

Popup Windows – Pros and Cons

Pros Can use a HAT to develop topics Can include links and navigation

Can include an "unlimited" amount of information

Con Often obscure application window

field-level UA

Grouped Popups – Example

dodge.com

field-level UA

Dedicated Panel – Example

alamo.com

field-level UA

Dedicated Panel – Pros and Cons

Pros Can include a large amount of information Very easy to use

Con Difficult to add to an existing application

field-level UA

Navigation"Am I on the right page?"

Features and Limitations"Can I save this information?"

Goals"What can I do with this application?"

Conceptual Questions

Embed vital information and warnings

Link to background, introductory, and advanced information

Conceptual UA Goals

Page overviews DHTML popup layers Dedicated UA panels

Conceptual UA Options

Page Overviews – Exampleconceptual UA

Page Overviews – Pros and Cons

Pro Appear in a prominent position, so they are

more likely to be read

Con Usually ignored if longer than ~2 sentences

conceptual UA

DHTML Popups – Example

msdn.microsoft.com

conceptual UA

DHTML Popups – Pros and Cons

Pro Save space by layering information

Cons Can be confusing to novices

Opener can be confused with a hyperlink

conceptual UA

Dedicated Panel – Example A

bankofamerica.com

conceptual UA

Dedicated Panel – Example B

fidelity.com

conceptual UA

Dedicated Panel – Pros and Cons

Pros Can provide adequate answers to multiple

questions

Very easy to use

Con Difficult to add to an existing application

conceptual UA

Task Steps"How do I complete my task?"

High-level Process"What do I do next?"

Expectations"How long will this take?"

Procedural Questions

Embed UA for most common tasks

Link to UA for less common tasks Link to reusable field-level UA

Procedural UA Goals

DHTML layers

Dedicated UA panels

Procedural UA Options

DHTML Popups – Example

USPS (in post office)

procedural UA

DHTML Popups – Pros and Cons

Pros Can include detailed instructions Can appear in the main task area to keep

the user focused

Cons UA temporarily replaces part of the UI Opener can be confused with a hyperlink

procedural UA

Dedicated Panel – Example Aprocedural UA

Dedicated Panel – Example B

neimanmarcus.com

procedural UA

Dedicated Panel – Pros and Cons

Pros Always available—user does not have to ask

for help

Easy to see the help and the application at the same time

Con Difficult to add to an existing application

procedural UA

Selecting an embedded UA approach

How to open- DHTML layers- Popup windows- Dedicated UA panels

Recommendations

Examples

Wrapping Up

UA Approach Comparison

Ease of implementing with a new application

Labels Dedicated Panel

Popup Windows

DHTMLPopups

Ease of retrofitting into an existing application

Ease of use

Links and navigation

Amount of information

Poor Good

Opening a DHTML Help Layer on “mouseover”

<span id="description" onMouseOver="helpSHOW(this.id)"onMouseOut="helpHIDE(this.id)">Description</span>

<script>function helpSHOW(fieldID) {fieldID = "help" + fieldID;if (document.all) document.all(fieldID).style.visibility = "visible";else document.layers[fieldID].visibility = "show";}

function helpHIDE(fieldID) {fieldID = "help" + fieldID;if (document.all) document.all(fieldID).style.visibility = "hidden";else document.layers[fieldID].visibility = "hide";}</script>

Opening a DHTML Help Layer on “mouseover”

Opening Popup Windows

Opening Popup Windows

<a href="javascript:openHelp('fieldname')">click me</a>

<script>function openHelp(id) {helpurl = location.href;begin=(helpurl.lastIndexOf('/') + 1);end=(helpurl.lastIndexOf('m') + 1);helpurl = "h_" + helpurl.substring(begin, end);helpWin = window.open(helpurl,'CShelpwin','toolbar=0, location=0,directories=0,status=0,menubar=0,scrollbars=1, resizable=1,width=500,height=600');setTimeout('helpWin.focus()',250);}</script>

Opening a UA Panel – Example A

Opening a UA Panel – Example A

Create a “Top” level frameset<frameset cols="100%,*" rows="*" frameborder="NO" name="myframes"> <frame src=“yourapplication.htm" name="app"><frame src="helpblank.htm" name="help"></frameset>

Resize the frameset and open the Help<script>function openHelp() {parent.myframes.cols="70%,30%";parent.help.location = "helppage.htm";}</script>

Opening a UA Panel – Example B

Opening a UA Panel – Example B

<input type="text" name="projectnumber" onFocus="changeUA(this.name)">

<script>var help_projectnumber = "<p><b>Project Number</b></p><p>The project number is based on your office location. For example, Atlanta-based projects begin with 'ATL.'</p>";

function changeUA(fieldID) {document.all.UA.innerHTML = eval("help_" + fieldID);}</script>

JavaScript Visual Quickstart GuideTom Negrino and Dori Smith

Designing with JavaScriptNick Heinle and Bill Peña

JavaScript BibleDanny Goodman

Recommended JavaScript Books

eloan.comnationalcitymortgage.comapple.comdodge.comalamo.commsdn.microsoft.comfidelity.combankofamerica.comneimanmarcus.com

Example Embedded UA Sites

Feel free to e-mail me. Or, catch me later at the conference!

Scott DeLoachFounding Partner, User First Services, Inc.Certified RoboHELP and RoboDemo InstructorCertified Performance Technologist404.520.0003scott@userfirst.net

Questions?