18

I developed an app for learning Chinese that requires the user to do fill-in-the-blank exercises. A word in the sentence will be blank, and the user has to select which options is correct. It looks like this:

enter image description here

Users seem to be able to understand what they are supposed to do there. However, some users are confused by exercises like this one:

enter image description here

They don't notice that the character for "two" is already present and that the blank should be filled with "twenty". Instead, they look for a button that has "twenty two" and are confused when they can't find it.

Is there a better way to present the exercise to make it more clear that they need to fill in the blank, rather than find the translation of "twenty two"?

  • 13
    I question the premise: it seems to me that in both cases the users understood there was a blank that needed to be filled in. If the latter question had asked them to translate "twenty" there likely wouldn't have been any confusion. You may be dealing with the perception that 22 is single unit for translating; partly because it isn't part of a longer sentence, and partly because you wouldn't ask them to translate only the "law" part of "lawyer". – Nathan Rabe Sep 3 at 20:02
  • 6
    I would blame the number two, for being a couple of lines that are easy to miss. – Ángel Sep 4 at 2:31
  • Step 1) Make sure the user knows they are performing a "fill in the blank exercise" by making the title "Fill in the blanks". Step 2) Fill in the _____ exercise questions are traditionally/usually made apparent with adequate underscores. See what I did there? – MonkeyZeus Sep 4 at 16:18
  • I'd suggest that the ellipses are the main problem. A solid underscore or box could go a long way here. – usul Sep 4 at 17:12
  • @Ángel And potentially for masquerading as an "equals" sign... – Chronocidal Sep 5 at 14:18
67

You could suggest a shape that matches the choices below, and use a color to suggest interactivity.

Then, to match that, make a hover state that matches the area above:

enter image description here

Another slight option is to treat it like a drop area, and just have the space, but no ellipses:

enter image description here

  • 20
    Maybe you could also replace the ellipses with the caption of the button when you hover it, like a preview? I don't know, but that could work well. – Andreas Rejbrand Sep 4 at 6:49
  • 8
    Assuming OP means "mobile app" when they write "app", hovering may not be applicable @AndreasRejbrand – DeepSpace Sep 4 at 7:25
  • 2
    I'd also border the panel containing the six choices in the same blue as surrounds the gap to be filled. – nigel222 Sep 4 at 8:43
  • 1
    I would recommend replacing the ellipses with a question mark(s) – BlueRaja - Danny Pflughoeft Sep 4 at 9:58
  • 1
    The shape within the sentence alone should be plenty since users will most likely be familiar with this from preschool (or equivalent) exercises from their early youth. (Extra UI help is definitely helpful though!) – Sayse Sep 4 at 14:52
4

You may need to add any signal (icon or graphic) showing where the beginning of the area to be completed is, in this way you will avoid leaving orphan the incomplete areas at the beginning of the paragraph.

enter image description here

  • 6
    In your first image the icon is not at the beginning of the area to be completed, so it doesn't really help much. – Luciano Sep 5 at 11:37
1

Instead of giving the character for ‘two’ as part of the question, could you include it next to (or as part of) each answer?

That would take a little more screen space, but seems far clearer than the other alternatives, with less opportunity for confusion or misinterpretation, even for people not giving it their full attention.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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