One of the more welcome additions to the Web Assistant in the 1811 release [a.k.a. Version: 10.2.5 (build 726)] is the enhancements to the Hotspot functionality for Help Tiles. In this post we’ll take a quick look at these enhancements.
Prior to this release, Hotspots were always displayed as a circle, which was overlaid directly onto the screen object. The unfortunate consequence of this was that the Hotspot sometimes made it difficult to interact with the object, because the Hotspot was in the way. To alleviate this to some degree, you could change the size of the circle, and/or ‘offset’ it so that instead of appearing directly in the middle of the screen object, it appeared slightly up and to the right of this center point (by a fixed amount), but typically still overlapping the object. The 1811 release fixes this by providing different styles of Hotspot (over and above the standard circle), and providing better ways of controlling the position of this Hotspot. Because the settings are different per style, we’ll look at each of these separately.
Circle
The Circle Hotspot style is visually the same as (the only style available in) pre-1811 Enable Now. However, whereas before there was only one option available to change the position of the Hotspot: Use Offset, which would shift the circle up and to the right of the object center (by a fixed but unspecified amount), there are now several new options.
The first of these is the Use Click Offset option. Despite the similar name to the pre-1811 Use Offset option, this works entirely differently. This option can best be interpreted as “offset the center of the Hotspot circle to appear exactly where you clicked when assigning the Hotspot, and not in the center of the object. This exact ‘offset’ is shown in the Position (%) fields. If you look at the example on the right, you will see that the Hotspot circle is centered on (approximately) the “g” in the menu option. This is because that’s exactly where I clicked when assigning the Hotspot. This happens to be about 3/4 of the way along the menu option, and about halfway down it. Or exactly, 75.72% of the way along the X axis and 43.75% of the way down the Y axis (starting from the upper-left corner of the object) – as shown in the Position (%) fields. You can change this ‘offset’ position by changing the Offset (%) fields to any value between 1 and 99. If you deselect the Use Click Offset checkbox, then the Hotspot Circle is centered on the screen object, and the Position (%) fields are hidden.
The Offset fields specify the number of pixels the center point of the Hotspot should be shifted from its current position – regardless of whether this is the center of the screen object, or the ‘offset’ position determined by the Position (%) fields. Use the plus sign to increase the offset and move the Hotspot right or down (as appropriate) and the minus sign to move the Hotspot left or up (again, as appropriate). These fields effectively provide the same functionality as the previous Use Offset field, but allow you to control the absolute (pixel-level) offset used.
Rectangle
The Rectangle Hotspot style places a solid rectangle around the screen object. This is similar to the Highlight in Demo mode simulations or Desktop Assistant, but the lower-right corner of the rectangle contains a filled-in triangle (presumably just to identify it as help as opposed to some form of in-application highlighting, as clicking on it does nothing).
There is only one option available for this style: the Modify Size fields. These increase the width (leftmost field) and height (rightmost field) of the rectangle. Because the rectangle will always remain centered on the screen object (there are no ‘offset’ options here), this has the effect of controlling the amount of space around the object (effectively, the ‘inner margin’ of the rectangle). This is helpful for objects with little border clearance of their own, such as menus (as shown in this example).
Underline
The Underline Hotspot style is very similar to the Rectangle, but effectively uses only the bottom border of the screen object. This is shown slightly thicker than the Rectangle border (presumably for extra emphasis), and again, the lower-right corner of the object area contains a filled-in triangle.
As with Rectangle, there is only one option available for this style: the Modify Size fields. They effectively work in exactly the same way, but their effect is better understood as follows: The leftmost field will increase (or decrease) the length of the underline. The line will always be centered on the screen icon, which is unfortunate, because sometimes you just want to extend it to the right to move the triangle off the object but this also has the effect of extending the line to the left, which just looks odd (see the example on the right). The rightmost Modify Size field effectively controls the horizontal position (or ‘offset’, if you want to look at it that way) of the underline. This is useful for lowering the underline (by increasing the value) out of the way of the screen object contents.
Icon
This brings us to the last, and possibly most useful, new Highlight style: Icon. This replaces the Hotspot with a graphic icon. This is wonderfully flexible in that there are 14 different icons available, via the Icon Type field, which allows you to differentiate between different types of information that are provided by your Help Tiles. (Just make sure you use icons consistently, and in a way that makes sense to your users.)
By default, the icon appears directly centered on the screen object, but the Icon Position field provides a number of useful defaults for locating the icon elsewhere, in relation to the screen object. Centered (the default); Top left; Top left, outside; Top left, above; Top right; Top right, outside; Top right, above; and Manual. These are significantly clearer than the ‘compass-point’ specifications used in the Producer Editor (or Web Editor) – maybe SAP will adopt this naming convention for those at some point. But in case even these aren’t intuitive to you, “above” means just inside the left or right border of the object, and “outside” means just outside the border. Note that if you use Manual then you need to specify the position of the icon (relative to the center of the screen object) via the Offset fields.
The Offset fields work in exactly the same way as for the Circle Highlight style, and allow you to shift the icon by the specified number of pixels. This is relative to the position specified via the Icon Position setting, allowing you to fine-tune the positioning of the icon.
You may also want to pay attention to the Size property for the Icon Highlight style. In my testing, only XS produces an acceptable look (being closer in size to the icons for Desktop Assistant Context Help – although, annoyingly, the new Web Assistant icon set is entirely different from the Desktop Assistant icon set). Anything above XS just seems to dominate the screen too much.
So there you have it. A nice enhancement to Web Assistant Help Tiles. Note that the Use Click Offset / Position (%) / Offset fields are also used for Guided Tour steps, where they control the position of the Bubble Arrow, so you may find the above explanation useful there, as well.
