1

I'm creating a web application that displays flashcards. Basically, they are cards that have got, on one face, a word in a language (for example "Eat") and on the other side the same word in an other language (for example "Manger" in French). I need to provide to my users a way to "turn" the card (to display one face or the other) and to "go to" the other cards.

Right now, my idea is to put arrows on the right and on the left. Clicking on these arrows will go to the next/previous card and clicking on the card itself will reveal the other side.

I think that I will also enable the user to use the arrows to browse the cards and the return key to turn the card.

Have you got any suggestions to help me improve this UX?

A test with Pixelmator

Improve this question
5
  • 2
    Those are called flashcards.
    – Dan D.
    Feb 27, 2014 at 16:02
  • Do you possibly have a screen shot of what you have so far?
    – Code Maverick
    Feb 27, 2014 at 16:17
  • @CodeMaverick I have added it to my post ! But this is just a test ! (it won't be the same look, but it was just to show you the place of the elements !).
    – Pop Flamingo
    Feb 27, 2014 at 16:23
  • 1
    Just a note on the UI design, not sure about others but the screenshot you've provided does not look like a flashcard to me, it looks like a large button. If you can make it look more like a flashcard (larger rectangularish), it will improve UX and let user know it's a flashcard that can be flipped.
    – Chairman Meow
    Feb 27, 2014 at 18:16
  • @ChairmanMeow Yes you are right ! I'll correct that thanks a lot !
    – Pop Flamingo
    Feb 28, 2014 at 14:55

1 Answer 1

Reset to default
1

This would be the recommended route (what you have explained). There are various reasons for this:

  • It benefits users with touch devices when "swiping" from card to card
  • The orientation is only set to one way (horizontal). Introducing a vertical orientation may confuse users.

the only thing I would add is an affordance tactic to indicate that the user can click on the card to flip it over. A rotate or flip arrow might do this trick - although small, this would work and indicate there there is an action on this card.

enter image description here

I've been searching for the past 30 minutes because there is an apple app that currently does this in iOS7 but I can't remember it.

Here is a coded explanation of how to do it too! https://stackoverflow.com/questions/9032331/ios-flip-animation-only-for-specific-view

Improve this answer
3
  • Thank you for your answer, do you think that the arrows should be putted at each side of the browser window or should they be near of the card, or between the card and the browser window sides ? And about the flip arrow, isn't it a too explicit way to do affordance ? And is there a difference between the flip arrow and the rotate arrow ? I think that it's iBooks about the app, I will look it but I'm not completely sure that it's the same thing !
    – Pop Flamingo
    Feb 27, 2014 at 17:21
  • There is a difference between the flip and the rotate arrow. If you google them you will get slightly different variations. the rotate one might be more akin to "refresh" so I might stay shy of that. I FOUND IT! Go to your camera app on your iPhone and take a selfie - flips the screen!
    – DLM
    Feb 27, 2014 at 17:33
  • RE: Arrows. I think it depends on the distance between the end of the flash card and the edge of the browser. A mid-way point between the two would be the most risk-adverse.
    – DLM
    Feb 27, 2014 at 17:33

Your Answer

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

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