6

I have some text with many text input boxes. I have been told (more than once) that the input boxes make the text hard to read.

What I have done is available at wikilearner.net/wiki

screenshot from the wiki form

Do you think I should change the formatting, or even consider a different approach?

Improve this question

4 Answers 4

Reset to default
9

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.

Improve this answer
6
  • 1
    Nice elegant suggestion. Follows on from most school examples where a blank is usually a long underline.
    – JohnGB ♦
    Commented Sep 7, 2011 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...
    – HostileFork says dont trust SE
    Commented Sep 7, 2011 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 Sieling
    Commented Sep 7, 2011 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.
    – Viraj
    Commented Sep 9, 2011 at 17:10
  • Nice touch, Viraj. That would reinforce the click ability of the line.
    – Todd Sieling
    Commented Sep 9, 2011 at 18:06
6

To go further on Todd's idea: you could just style your text input boxes like Todd suggested instead of switching it into a different element.

.input
{
    border: none;
    border-bottom: dotted 1px #000;
}
Improve this answer
4

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.

Improve this answer
3
  • 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.
    – Randomblue
    Commented Sep 7, 2011 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 Sieling
    Commented Sep 7, 2011 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
    – HostileFork says dont trust SE
    Commented Sep 7, 2011 at 18:13
2

been in this situation before, what I did was give the textbox the same markup as the rest of the text so it's invisible.

then add a little pencil icon to the textbox so the user knows it's editable

Improve this answer

Your Answer

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

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