developing embedded user assistance for web-based applications
TRANSCRIPT
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 [email protected]
Questions?