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, 2013 at 0:58

2 Answers 2

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, 2013 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

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.