Show visual feedback for disabled interactive objects

Scenario: You have some interactive buttons in your course content that are disabled at certain times. But since disabling an interactive object in Adobe Captivate does not change its appearance in any way, users are often unaware of an object’s inactive state. Some users are even becoming frustrated and complaining about interactive objects that don’t respond, believing they have found a glitch in your course interactivity.  

How can you ensure that users find your interactions more intuitive to use, especially when some objects should NOT be used?

Techniques required to solve this issue

You need to provide visual feedback that makes it obvious and intuitive to users which interactive objects can be clicked and which cannot. One common way software interfaces show disabled state is by ‘greying out’ or fading the appearance of the object.

The easiest way to provide visual feedback is by hiding and showing objects as discussed below.


Step-by-step

  1. Navigate to a slide containing interactive objects that will be disabled at some point.
  2. Place a slightly transparent object such as a Highlight Box or Shape over the top of the interactive object. The screenshot below shows a white highlight box set to 60% opacity placed over the top of a button of the same size.
  3. Create a standard advanced action to Disable the interactive object and Show this slightly transparent object on top at the same time.
  4. Add any other actions that the interactive object is required to take (e.g. navigating to a different slide, showing or hiding other slide objects, setting any variables).
  5. Make sure you set the On Success event of the interactive object to execute this advanced action.

    Enhancing the effect with extra images
  6. If deemed necessary, you can make it even more apparent to the user that an object is disabled by inserting an image that is universally understood to mean something is disabled or not allowed, and placing this image near or on top of the interactive object (as shown).
  7. Modify your standard actions to Show this image in addition to disabling the interactive object and showing the faded highlight box on top.

    At run-time the disabled object looks like this…

Why not just use Advanced Actions to apply Captivate Effects to disabled objects?

If only it were that simple,...but unfortunately it's not. Many Adobe Captivate developers try to use advanced actions with the Apply Effect action to manipulate an object’s Alpha or Brightness percentage at run-time. However, unfortunately this does not work as expected because Captivate provides no way to manipulate the timing of effects applied by advanced actions.  So the effect usually just lasts for a few seconds and then disappears again. This is another one of those areas where we hope Adobe will improve Captivate in future.


If you liked this topic, you'll also like these...

 

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!