I am making a flashcard webapp, and am deciding between using lists or boxes to represent the decks and cards. i.e.,

Lists Lists Boxes (with create new deck/card box at the end) Boxes

So far, my points are as follows:

  • Lists are a convention, easy to read, etc. but hard to visually identify as a deck or card

  • Boxes are easier to relate to as actual flashcards since they are shaped like one, hard to misclick, and can be clearly differentiated (e.g. with their backgrounds or icons)

Which option is better?

  • 1
    This is almost entirely dependent on what content is going to be inside the cards/lists, and how many items the user is going to need to scan and/or interact with. Please provide some more details here, because otherwise the question becomes largely opinion driven.
    – tohster
    May 5, 2015 at 23:09

2 Answers 2


I'd recommend to go with boxes first, probably your amount of "decks" will increase with time, so you could actually add the feature to select both views in a future upgrade.

Boxes fits perfect for little amounts of items, but eventually a user will find more useful to select from a list.

I also noticed the boxes have a star, is that a "favorite star" to pin your decks or is it a "challenger solved" indicator? If it's the second, I would change the icon for a green check probably.

The "favorite star" feature would be cool to have as well, you can represent solved decks in a different way.


Your two suggested solutions represent two very different types of interfaces. The list approach uses a "conversation" metaphor, where the user indirectly "talks" to the application, while the second approach uses a "model-world" metaphor, where the user can directly interact with domain objects (in your case "cards" and "decks"). Using a model-world approach can minimize indirection, reinforce a strong mental model and potentially better communicate affordances, hence leading to a more natural, intuitive experience. Of course, you would have to support the interaction that your cards and decks metaphor signals to the user (e.g. drag and drop cards between multiple, visually seperated decks). See "direct manipulation" for more info.

Otherwise you could look into Tidwells "Designing Interfaces" that has a whole chapter for designing lists of things.

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.