developing embedded user assistance for web-based applications
TRANSCRIPT
![Page 1: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/1.jpg)
Developing Embedded User Assistance for
Web-based Applications
Scott DeLoach
![Page 2: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/2.jpg)
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
![Page 3: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/3.jpg)
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
![Page 4: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/4.jpg)
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
![Page 5: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/5.jpg)
Field-level
Procedural Conceptual
User Questions
![Page 6: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/6.jpg)
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
![Page 7: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/7.jpg)
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
![Page 8: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/8.jpg)
Labels
DHTML popup layers Popup windows
Grouped popups Dedicated UA panel
Field-level UA Options
![Page 9: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/9.jpg)
Field Labels – Example
eloan.com
field-level UA
![Page 10: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/10.jpg)
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
![Page 11: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/11.jpg)
DHTML Popups – Example
nationalcitymortgage.com
field-level UA
![Page 12: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/12.jpg)
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
![Page 13: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/13.jpg)
Popup Windows – Example
apple.com
field-level UA
![Page 14: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/14.jpg)
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
![Page 15: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/15.jpg)
Grouped Popups – Example
dodge.com
field-level UA
![Page 16: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/16.jpg)
Dedicated Panel – Example
alamo.com
field-level UA
![Page 17: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/17.jpg)
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
![Page 18: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/18.jpg)
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
![Page 19: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/19.jpg)
Embed vital information and warnings
Link to background, introductory, and advanced information
Conceptual UA Goals
![Page 20: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/20.jpg)
Page overviews DHTML popup layers Dedicated UA panels
Conceptual UA Options
![Page 21: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/21.jpg)
Page Overviews – Exampleconceptual UA
![Page 22: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/22.jpg)
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
![Page 23: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/23.jpg)
DHTML Popups – Example
msdn.microsoft.com
conceptual UA
![Page 24: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/24.jpg)
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
![Page 25: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/25.jpg)
Dedicated Panel – Example A
bankofamerica.com
conceptual UA
![Page 26: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/26.jpg)
Dedicated Panel – Example B
fidelity.com
conceptual UA
![Page 27: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/27.jpg)
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
![Page 28: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/28.jpg)
Task Steps"How do I complete my task?"
High-level Process"What do I do next?"
Expectations"How long will this take?"
Procedural Questions
![Page 29: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/29.jpg)
Embed UA for most common tasks
Link to UA for less common tasks Link to reusable field-level UA
Procedural UA Goals
![Page 30: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/30.jpg)
DHTML layers
Dedicated UA panels
Procedural UA Options
![Page 31: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/31.jpg)
DHTML Popups – Example
USPS (in post office)
procedural UA
![Page 32: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/32.jpg)
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
![Page 33: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/33.jpg)
Dedicated Panel – Example Aprocedural UA
![Page 34: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/34.jpg)
Dedicated Panel – Example B
neimanmarcus.com
procedural UA
![Page 35: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/35.jpg)
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
![Page 36: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/36.jpg)
Selecting an embedded UA approach
How to open- DHTML layers- Popup windows- Dedicated UA panels
Recommendations
Examples
Wrapping Up
![Page 37: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/37.jpg)
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
![Page 38: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/38.jpg)
Opening a DHTML Help Layer on “mouseover”
![Page 39: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/39.jpg)
<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”
![Page 40: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/40.jpg)
Opening Popup Windows
![Page 41: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/41.jpg)
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>
![Page 42: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/42.jpg)
Opening a UA Panel – Example A
![Page 43: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/43.jpg)
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>
![Page 44: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/44.jpg)
Opening a UA Panel – Example B
![Page 45: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/45.jpg)
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>
![Page 46: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/46.jpg)
JavaScript Visual Quickstart GuideTom Negrino and Dori Smith
Designing with JavaScriptNick Heinle and Bill Peña
JavaScript BibleDanny Goodman
Recommended JavaScript Books
![Page 47: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/47.jpg)
eloan.comnationalcitymortgage.comapple.comdodge.comalamo.commsdn.microsoft.comfidelity.combankofamerica.comneimanmarcus.com
Example Embedded UA Sites
![Page 48: Developing Embedded User Assistance for Web-based Applications](https://reader036.vdocuments.mx/reader036/viewer/2022071600/613d300b736caf36b75a5b1d/html5/thumbnails/48.jpg)
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?