0

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:

  1. Might not have finished loading the page.
  2. 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.

Improve this question
7
  • do you have to show the pictures in the beginning? why not wait until loading has finished?
    – Lovis
    Sep 17, 2013 at 15:31
  • A quick tooltip or notification the first time someone runs the app should do the trick. If they need a reminder, then make sure that the user is able to work out when they can click the image easily by showing the relevant information or status change.
    – Michael Lai ♦
    Sep 17, 2013 at 23:23
  • @MichaelLai, IMHO, a UI should have all the information the user needs without them needing to "remember" something. A TT notification would require A) that they READ something (=cognitive friction) and B) they REMEMBER this for later use. I'd like to avoid both.
    – Clay Nichols
    Sep 18, 2013 at 14:01
  • @DonL. As I noted in the Graying Out option, The goal of the app is for the user to listen and look at the pictures. So we do want the pictures visible while they are listening.
    – Clay Nichols
    Sep 18, 2013 at 14:02
  • @ClayNichols ah okay, sorry I didn't see this
    – Lovis
    Sep 18, 2013 at 14:07

1 Answer 1

Reset to default
1

I think you're on the right track with the strategies you're brought up already, especially the partially transparent one. I don't know how your layout is composed, so my suggestion is for a fictive layout which I hope can be applicable for your app.

You're looking for a strategy for providing feedback of system state, to communicate to the user what is going on to easy user stress. I think you want to provide this feedback in the two cases you describe in two different ways. When the app/sounds are loading you should visually style the images in a way which cues that they are not ready for playback yet, and that the app is loading. In this mockup the tiles are brought down to 50% opacity and a progress window is displayed:

enter image description here

When the sounds have loaded you remove the transparency and the progress window. The user can tap/click to choose a sound to play: enter image description here

When playback begins the surrounding tiles are faded out here with a 50% transparency but the active tile has persistent fill. A play icon is displayed together with a timeline, your app knows how long the sound is so providing feedback of how long the playback will go on is preferable: enter image description here

I would personally also like to see an action to pause the playback, however I don't know if that's applicable or in scope for the app you're developing:

Improve this answer
6
  • This is an app for speech therapy and there is not need (and might confuse the user) to have a Pause option. The GOAL is for them to LISTEN in REAL TIME, simulating the real world, where they could NOT magically pause a short bit of speech they are listening to. (They could ask someone to stop or repeat but that only applies to longer utterances and that's actually what we'd call a "compensatory strategy" which is taught as part of a different lesson. THIS lesson is focused on "can you attend to and comprehend short bits of speech".
    – Clay Nichols
    Sep 18, 2013 at 13:58
  • The "loading" msg would actually distract the user in this case.
    – Clay Nichols
    Sep 18, 2013 at 14:04
  • @ClayNichols You can't simply with capital letters in an arrogant tone in the comment section of an answer criticize that answer and refer to background info which wasn't in the OP in the first place. I realize you're new here and don't really know how to post questions with appropriate context, but lowering yourself to this level? If you're even remotely this unpleasant outside this forum then I feel sorry for the people around you, hell, I do either way.
    – AndroidHustle
    Sep 19, 2013 at 9:13
  • wasn't intending to be arrogant. There's not bolding/italics so I used CAPS for emphasis.
    – Clay Nichols
    Sep 20, 2013 at 13:47
  • 1
    @ClayNichols alright, maybe I misinterpreted what you wrote then. I think this sentence "The GOAL is for them to LISTEN in REAL TIME, simulating the real world, where they could NOT magically pause a short bit of speech they are listening to", was the comment I thought sounded pretty condescending. But if I'm wrong in that then I apologize (I usually associate USING ALL CAPS with an arrogant tone). But FYI, Bold and italic are available in comment formatting, you encase what you want Bold with ** and italic with *.
    – AndroidHustle
    Sep 23, 2013 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.