4 Answers
4

I would show the blanks as underline-style blank spaces. Clicking one of these would turn it into an input field. When the field loses focus, you could leave it as is: an input field with some text in it.

If you can go the distance, though, the ideal is when the input field loses focus, turn it back into an underline but with the user's answer filled in. Clicking the filled-in blank would bring back the input field to change the answer.

Nice elegant suggestion. Follows on from most school examples where a blank is usually a long underline.
–
JohnGB♦Sep 7 '11 at 9:32

While it worked for Mad Libs when they didn't have cheap-as-free color printing, computer screens offer more options. Note my answer about not using lines at all...
–
HostileForkSep 7 '11 at 12:21

Part of why I suggested underlines is that they immediately communicate their purpose, in addition to being relatively easy to control.
–
Todd SielingSep 7 '11 at 17:53

2

I suggest turning the underline to a translucent edged box on hover. This might increase the visibility of the input field. The user would have to tap the field to actually start typing in any text.
–
VirajSep 9 '11 at 17:10

Nice touch, Viraj. That would reinforce the click ability of the line.
–
Todd SielingSep 9 '11 at 18:06

I think a lot of the visual disruption to reading comes from using any kind of line at all (box -OR- underline). Things immediately improve once you remove the -webkit-box-shadow and box-shadow from .input.

Then what I'd suggest is that rather than making the background for the blanks look darker than the enclosing text, reverse the situation so that the blanks are a bit lighter than the background you are using for the main text. This will make them seem more like "holes" and less like "barriers" or "blobs".

Keeping the box styling on the blank currently being focused on as a highlight would still be fine, since it's only on one (and one worth calling out). Once a correct answer is filled in, then perhaps that could be a case for using a subtle box while making the backgrounds match—I imagine that could be made not too disruptive.

You have a very good point with keeping the currently focused boxes highlighted. I also see your point about making the blanks ligher, but what kind of a color would you use? Green and red are taken. That leaves blue and yellow. Was thinking maybe rgb(250, 228, 133), but the end result is too flashy.
–
RandomblueSep 7 '11 at 17:06

1

This is a good idea to test out, as it's the lowest cost approach. When thinking about making the boxes lighter, focus less on different colours and more on a lighter shade of grey both in the input boxes and on their outlines.
–
Todd SielingSep 7 '11 at 17:54

1

What @Todd said...not a different color, just lighter shade of same color spectrum. Start by swapping the color you have for the blanks with the white background color of the text. Compare against variations until it looks most readable while still really making it clear where the blanks are. Post the most promising set here as a question or try "hallway testing"...you might even offer your users more than one choice in case color perception varies. en.wikipedia.org/wiki/Usability_testing#Hallway_testing
–
HostileForkSep 7 '11 at 18:13