I'm working on a web app and want to indicate that the elements on the page (mostly pictures the user clicks in response to audio) are not clickable until the App is ready for them to click.
This avoids the user clicking the image which then doesn't respond (b/c the Web App isn't ready) and getting frustrated.
Reasons the Web App isn't ready:
- Might not have finished loading the page.
- The audio hasn't finished playing. (The user really should not be clicking yet, but some will click prematurely).
Options I've considered:
Graying out all of them. That won't work here b/c some pictures have color that's important and we want the user to see the pictures while they listen to the audio.
Making them partially transparent (maybe 70% or so of normal opacity).
Downside: The FIRST time they see it it may not be obvious they are disabled, but I think they'll figure it out after the images "appear"
What other options are there?
UPDATE: Program goal is that the user listen to the audio and select an appropriate picture, so we don't want to distract the user while we play the audio.