4

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.

1
  • 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
2

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

Update

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.

1
  • Nice one, I really like it, esp. the 1st approach! Mar 22 '13 at 15:42
0

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.

0

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .