5

I am designing a application for android and have decided to go with the cards theme for the visual design. reasons being, that the information being presented fits the cards format: short bursts of important information.

The problem arises when integrating buttons into the layout. There are mainly two types of buttons:

  1. specific to a particular card
  2. specific to a set of cards

For the first, I am placing the button at the bottom of the card, like one would in a modal window and it is looking good and going with the theme. However, in the second case, when an action is applicable to a set of cards, the button has to be placed outside the cards at the end of the list. Often times, the button ends up being below the fold and the testers don't realize that a button needs to be pressed for applying their actions/changes.

My solution for this is placing a permanent, full-width button with shadow effects to show that the content is continuing below it. However, I am hesitating on using this as it doesn't seem to be gelling with with the overall design.

Would love useful and innovative feedback from you guys. Cheers.

Visuals:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • presumably the 'settings' would not be broken into separate cards but rather all contained within one 'settings card' with different setting types segregated with an horizontal line? That would fit with the cards concept just fine and then you could use Renauds (or similar) solution globally and it would be clear that you are saving all changes made to that card regardless of section. It's breaking up one thing into multiple cards that is making it difficult. If you really want to break it up then you'd need to consider select boxes etc to group things for save. – Chris Mar 31 '15 at 15:07
3

If you're worried about Android's standards (which right now is Material Design), then you're using cards in a wrong way. This is why you're facing these issues.

Here's from Material Design page:

When to use

Use a card layout when displaying content that:

  • As a collection, comprises multiple data types (for example, the card collection consists of images, movies, and text).
  • Does not require direct comparison (a user is not directly comparing images or text strings).
  • Supports content of highly variable length, such as comments.
  • Consists of rich content or interaction, such as +1 buttons or comments.
  • Would otherwise be in a list but needs to display more than three lines of text.
  • Would otherwise be in a grid list but needs to display more text to supplement the image.

So in your case, you need to add the settings inside ONE card, not one card for each type of setting. This will provide you with the logical continuity if the card exceeds the size of the screen.

Also, remember you can have actions inside the card, and even use floating action buttons to prevent this behavior should you need it

0

Type1 : Do you really need a "view all" button ? user could simply tap on the group to open it. That way, buttons are only for real actions, not for navigation

Type 2 : The sticky button seems to be a good solution under the condition that you display it only if there is a change to save. As you have a menu bar, the button could also be on the top of the page

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • type1: point accepted about not using buttons for navigation. however, this was just an example (and a poor one, i agree) and i would need to place buttons on cards (e.g. a card about some discount coupon would have a 'grab this deal' button). type2: the CTA button at the top right seems to an iOS standard and our app is for android, so it probably won't fit. p.s. I already did try it and it too didn't go with the look. the sticky button at the bottom looked better (but still not good enough) – BatlaDanny Jun 4 '14 at 7:50

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.