0

I am creating a card stack ui for selecting items and creating a new item. Right now the page looks like this:

enter image description here

I'm not sure if the ui for creating a new item should be a card itself or a separate button. Anyone seen anything similar?

2

There are many similar interfaces for selecting and adding items in a card interfaces with the most common being the selecting of addresses or credit cards in an e-commerce checkout process.

It is important to distinguish the cards from the 'add new' option however, since they're two different type of actions. A good way to do this would be by using suitable colors, borders and other visual aids to distinguish these actions.

in the mockup below, i have created a simplistic filled and empty grid effect using different colors and borders

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The placement of the 'add new' card div is also important.

As a general rule, if there are

  • a lesser number of items in the grid with the selection generally being from the already listed items, then it makes sense to keep the 'add new' div at the end of the list and give priority to the existing data (without compromising on the visibility of the 'add new' div)
  • a larger number of items in the grid with frequent addition of new items, keeping the 'add new' div at the start is necessary
  • Thanks. I think I agree. The only issue is if there a lots of items, I may not want to take up precious card space with a "New Item". That is why I thought a button somewhere else in the page might be better. – alice meade Sep 5 '14 at 13:20
  • Your screenshot suggested a web app with a large number of cards. If that is the case, on screen real estate shouldn't be a driving factor, especially since the 'add new' div is equivalent to just one more card. are you sure you don't want to implement it in this fashion? – BatlaDanny Sep 5 '14 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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