Avoiding confusion with superscript/subscript buttons

March 26, 2012 7:46 AM

Is there any convention or other way to make subscript / superscript icons look intuitive?

I'm trying to design an educational game for teenagers. Over the course of the games they get asked questions on a variety of subjects and they often have to type in the answer.

I’ve hit a slight roadblock, however, with questions about Chemistry, and in particular answers like H2O(subscript) or Fe2+ (superscript). I’m trying to find a way to allow pupils to enter subscript and superscript that’s intuitive for them to use, and I can’t think of anything that works particularly well!

For example, there could be buttons at the end of the textfield marked ‘subscript’ and ‘superscript’, but that will confuse pupils who don’t recognise these
words. Or the buttons could have up and down arrows, but I'm not sure this is in any way better... There's no existing text-formatting palette, so I can't put these icons next to existing font, alignment etc ones.

What's more, it seems like this is a problem that other people must have solved before! Are any of these people you? And if so, how did you do it?

I'd particularly welcome visual examples of good solutions to this conundrum, but any ideas would be good!

posted by piato to computers & internet (3 answers total)

There are a few examples on this page that might be helpful. I'd say the best button would be a visual representation of super/subscript, where the text of the subscript or superscript is visually more prominent than the letter it's next to. So the first example on that page (grey 'H', black '2') is good, particularly if you've got other buttons with black text.
posted by le morte de bea arthur at 8:16 AM on March 26, 2012

I would vote for not making the user worry about superscript or subscript and let the code handle it, but for an educational game, you'd probably want to make sure that they knew where the super- and subscripts should go.

For questions where you really want to check the student's knowledge of the exact chemical symbol, could you:

1) have several one-character text fields for each character in the formula, maybe present them with a series of 10 fields unless you know the right answer has more characters than 10
2) position an up or down arrow to the right of each of those fields
3) have some help text that says something like "enter each character of the symbol, then press the up or down arrow next to each character that should be superscripted or subscripted, for example, H2O or Fe2+"

?
posted by Currer Belfry at 8:53 AM on March 26, 2012

Sorry for the double-dip, but some real-time visual confirmation of the input the user is about to send to the application would also be helpful before that input actually gets sent.
posted by Currer Belfry at 8:59 AM on March 26, 2012