30 July - Enhance step action visualization

The instruction viewer has been made more intuitive by hiding the default step action. This change makes SelfGuide more intuitive for end users and also improves other use cases like using SelfGuide for instructions about a mobile device. Read more about this and other changes below.

Enhance step action visualization

The step action is an important element within the Instruction viewer, it does exactly tell the user where an action should be performed on the screen and which action should be performed. We conducted user research and tested different options to enhance the visualization of the step action. Some findings: 

• More than 92% of the step actions is a left mouse click and for this kind of step action, the icon at the bottom of the image did not add any value. The majority of the users was not even aware of the icon.
• The step action consist of two visual elements, the crosshair at the location of the action and the icon near the bottom or top border of the image. The (sometimes) great distance between the two visual elements does make it hard for a user to correlate and interpret the step action.

Based on these findings, two changes have been made throughout the entire product:

• No icon is shown if the step action is a left mouse click
• The step action icon is shown near the crosshair

Adding a censor area near the image border is easier

Adding a censor area near the border was difficult and could cause errors which made it difficult for an editor to save the changes. A few improvements have been made:

• If the mouse leaves the image while dragging, the cursor is still followed and the area keeps changing
• It's possible to let go of the mouse button outside the image area and this does actually end the selection and add the censor area
• Censor areas do have a minimum width and height. If the censor area does not fit within the image area because the top left corner is too close to the right or bottom border, the censor area is moved inside the image area till it fits
• The Add censor area button in the action bar has no state anymore and behaves like other action bar buttons
• You can press the Add censor area button but change your mind. Now you can directly continue with other edit functionality without the need to cancel the Add censor area functionality

UX improvements

• Select components now support keys to select an item, for example when adding a tag to an instruction
• Search is supported in a select component when a value is mandatory, for example the owner of the instruction
• Some select component, like adding an application to an instruction, support adding a new option. The visualization of this feature has been made more obvious to create awareness
• Inputs with a copy behavior, for example the share modal and adding an application identity, all look and behave the same