| |
| |
|
 
|
|
Embedded User Assistance and IE 5 BehaviorsBy Ed HessThis article focuses on different methods to provide embedded Help within an Internet Explorer 5 (IE 5) application. You may want to use one or all of these methods depending on the needs of your end-users. If you think your project might benefit from embedded Help, you should design the user interface to accommodate that possibility from the beginning. The most important step in designing a user interface is to know and understand the working environment and needs of your end-user. Even with this knowledge, however, the reality is that no user interface will ever be completely intuitive to everyone who will need to use it. There will almost always be a need for some form of user assistance in user interfaces for web applications. My design goal was to be able to provide assistance without covering up the workspace and forcing the user to move back and forth between the workspace and the assistance (i.e., my goal was to embed the Help). I also wanted to be able to provide assistance for sections on a page, an entire page or task, and access to a complete Help system. Let's start with assistance for a section of a page where I use an expand/contract behavior. Behaviors separate script from content and allow a means for script encapsulation and code reuse. User Assistance for a Section of a PageMy additional goal for user assistance on a section of a page was to have it appear as close to the section as possible. When I first saw an instance of the expand behavior in the Newsletter application that comes with the Microsoft IE 5.0 Corporate Applications Kit (no longer available on CD), I thought I might be able to use it for embedding section assistance with some minor modifications. This is how the page looks before it is expanded: 
After it is clicked on and expands, it looks like: 
The relevant code for the page is the following: <STYLE>
@media all
{
expand\:node {
behavior:url(expand.htc)
}
}
</STYLE>
<expand:node CLASS="expandTitle" imgExpand="info.gif"
imgClose="a_down.gif">
Section One - Section Headers and the
"i" Image
<p CLASS="expandContent">When you click on a header with an "i" image on it,
the text expands to give you additional information about that section.
If you click on the header again, it contracts back!</p>
</expand:node>
A copy of EXPAND.HTC, INFO.GIF, and A_DOWN.GIF, along with full-size versions of the figures in this article, are available for download. I didn’t need to make any modifications to EXPAND.HTC to get this to work the way I wanted it to. However, if you decide to place the information icon at the end of the section header, you will need to modify two lines in EXPAND.HTC as follows: • In function DoInit(): change if (bImage) insertAdjacentHTML("AfterBegin", sImgTag);
to if (bImage) insertAdjacentHTML("AfterEnd", sImgTag);
• In function DoNode(sImage, sDisplay): change for (i=(bImage?1:0); i<children.length; i++) to for (i=(bImage?0:1); i<children.length; i++) I also used a style sheet (HELP.CSS) for the font, borders, and margins around the expanded text. This helped to position the text and separate it from the rest of the page: .expandContent
{
BACKGROUND-COLOR: #FFFFCC;
COLOR: darkblue;
CURSOR: default;
LEFT: 0px;
text-decoration:none;
FONT-FAMILY: ar, Verdana;
FONT-SIZE: 10pt;
FONT-WEIGHT: normal;
MARGIN-LEFT: -2 px;
MARGIN-TOP: 0px;
PADDING-TOP: 10px;
PADDING-LEFT: 15px;
PADDING-BOTTOM: 10px;
PADDING-RIGHT: 10px
}
User Assistance for a PageUser assistance for an entire page was a little more difficult to accomplish and my solution requires coordination between the UI developer and the user assistance author. Each page needs to be a frameset with the page and the Help page in separate frames. When the frameset page is initially loaded the Help page gets as little width as possible (and looks like the first figure above): <frameset cols="*,.1" frameborder="yes" framespacing="2" bordercolor="#003366"> <frame name="well" src="default.asp" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0"> <frame name="help" src="defaulthelp.htm" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0"> </frameset> After the user clicks on the information icon on the menu bar, the Help page widens and looks like the following: 
When the information icon on the page is clicked, it fires showHelp(), which widens the Help frame and changes the Help icon: function showHelp()
{
if (top.document.body.cols != "700,*")
{
helpimage.src="help_down.gif";
top.document.body.cols="700,*";
}
else
{
top.document.body.cols="*,.1";
helpimage.src="help_up.gif";
}
return;
}
If the elements on the page are relative widths, the page will flow when it is resized. If there are elements with absolute widths, they will be covered. This is a design decision and will need to be addressed for each page and its associated Help page. Calling Page Help and Contents Help from a MenuThanks to George Young and his great set of articles on DHTML/XML menus, I have been able to provide menus in my web applications that are a snap to administer. In the sample code for this article, if you mouse over the Help menu you will see: 
Clicking on Current Page provides the exact same functionality as clicking on the information icon as it calls the following URL: javascript:top.well.showHelp() Your showHelp() function can either be in a .JS include, if you want to always have the same width for your Help, or can be in the script section of each page with different widths. You can also call a complete Help system from the menu bar. That should give you some good ideas on how to embed user assistance into your web applications. Let me know how you make out! Ed works as an advisory analyst in a User Performance Group. You can catch Ed talking to his computer a lot lately; his work concentrates on using speech recognition interfaces with Health Care applications. Ed published two articles in Microsoft Internet Developer last year on using speech recognition with MS English Query and PowerPoint 2000. You can reach Ed at edhess@iname.com.
|
