I'm designing a flashcard webapp, I'm facing a UX issue. At the beginning, I thought it would simply be on one side a question, and on the other side the answer just like the "real life" flashcards.
But finally I'd like to let the user answer the question directly one the "question side" and then the other face would reveal the answer, but I don't know exactly what is the best way to do that, until right now I had two ideas, first, here is a little screenshot :
A screenshot of a card
And here are my ideas :

  • Displaying the question in big (like the world Montagne), and reducing it (to the size of Moutain) whenever the user would start to type and what the user would type would have the same size than Montagne, then when turning the card, the answer would be displayed in big (like the world Montagne) and the question in small.
  • Something that I found problematic with the first solution was that there isn't anything to indicate to the user that he should type the answer, so my second solution would be to display the question in small right from the very beginning and there would be a blinking text cursor to indicate to the user that he have to type his answer.

What is the best way to do in your opinion ? Have you got other ideas ? Does it makes sense to let the user type something on a card ? I'm opened to all your suggestions.

  • I hope I was clear enough, do not hesitate to ask me any additional detail. – Trevör Mar 7 '14 at 8:44

I think the font size of your questions should depend on the length of the question. Is it just like seen in the pic, just a word to which you have to give the translation? Or is it going to be a question like: what is the highest mountain in Europe called? For the first, a bigger sized font is suitable, but if the question is long, a big font will cause you to run out of space very quick.

The problem I have with your first solution is that there is no clear indication for the user to answer the question. How will the users know they can answer the question and they can just start typing.

Your second solution has the affordance your first solutions lacks. The flashing cursor will indicate to the user they can try to answer it.

I would personally give the question and the answer functionality an even amount of space.

enter image description here

In the example above I did just that and styled the input as a simple line, just like you might have on real flashcards. Just a simple line to write on. Real cards wouldn't have bordered white boxes in which you can write like standard input fields on the web. To add to the skeuomorphic design you could use a handwriting font to add to the illusion the user is writing on the card.

I would also like to add, that you might want to add a key function to rotating the card. Having to constantly switch between keyboard and mouse can be annoying. If the user can keep his hands on the keyboard might make the experience more pleasant and efficient.

  • Thanks a lot for your answer ! The cards will be displaying different type of content : - Vocabulary. - Dates & Events. - Basically any question with a simple answer. - More in the future. In every case, there will never be a big amount of words but I will of course automatically adapt the size of the font to the content. I think that your solution is great ! And what's also great with the fact to be using a handwriting font is that it will help the user to visually distinguish his answer and the correction. Thanks for the key function, I already planned to use the return key ! – Trevör Mar 7 '14 at 10:06

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.