User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

A Card has the following metadata:

Information: Status (ready or not), Stage (one of nine) Actions: Edit, View Statistics, Edit, Delete, Archive

I need to display both sides of the card on this page, as well as the metadata/actions. I can hide the Delete/Archive actions behind the Edit button if required/appropriate.

EDIT replaces both sides with editable text areas. STATS replaces both sides with a single side containing graphs/stats.

This is what I've come up with so far (in paint):

enter image description here

It feels a little clunky though. I think I'd like to keep the three-block layout, but the info in the leftmost block doesn't seem very visually appealing. What do you think? How would you improve it? EDIT: This will be on a page that lists cards.

share|improve this question
What is the purpose of having side 1 and side 2 if both sides need to be displayed on this page? How are these cards displayed on other pages? Are the cards listed in the context of a board (similar to a Kanban board)? or, are they just listed like a product backlog/queue? What goest in the text area of side 1 versus side 2? – Josh Bruce Mar 23 '13 at 0:58

Additional information regarding the actual usage scenario will definitely help, but let's use what we have. I would suggest to do the following:

  • fix layout a bit, in order to enhance space usage and avoid any potential chance to get a horizontal scrollbar
  • visualize stages and current editing state in order to provide editing progress
  • let cards to be a primary element on the form
  • make form look like a form

enter image description here


There is a way to simplify it even more. Simpler progress visualization can be used, like, for example, RallyDev does:

enter image description here

So vertical column can be replaced with simple horizontal component:

enter image description here

Everything depends on specific of your application. Usually it is better to have all states explicitly defined.

share|improve this answer
Thanks so much Renat ") – SB2055 Mar 22 '13 at 15:36
Nice one, I really like it, esp. the 1st approach! – Dominik Oslizlo Mar 22 '13 at 15:42

Maybe try this:

  1. Remove block with metadata and leave two blocks with card sides.
  2. Put metadata above cards in one line: The card is READY in STAGE ONE.
  3. Put all 4 buttons below cards in one line.

So, you have three well defined areas - status information at the top, working area in the middle and command area (buttons) at the bottom of your screen.

share|improve this answer
Trying this and Renat's now, thanks Serg – SB2055 Mar 22 '13 at 15:36

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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