How to better display metadata about a card?

Question

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):

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.

Answer 1

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

Update

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

So vertical column can be replaced with simple horizontal component:

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

Answer 2

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.