Skip to main content
35 votes
Accepted

Will users know a CardView is clickable?

Make the title of the workout the same as the active click colour, so that it prompts users to click on the title. Even if the whole card is active - it gives the user something to focus on.
Roger Attrill's user avatar
32 votes
Accepted

Best Representation of Countdown Timers like "Deal Expires in MM SS"

According to me, the best option would be to use 59m 59s. This will surely help a user to understand the time available without any confusion. Here the labels are clearly visible at the first glance ...
Akhil Ashok's user avatar
  • 1,201
18 votes
Accepted

How do I handle white space in cards with varying amounts of information?

In these cases, although the excess white area exists, the perceiver tends to place the vision in the center of those framed empty spaces, which further accentuates the lack of content: To counteract ...
Danielillo's user avatar
  • 19.2k
16 votes

How to deal with an excess of white-space in a CRM UI?

Visualize hierarchy You have an opportunity here to maintain flexibility while emphasizing the known priority of data elements and adding some scan-ability and visual interest. The nice thing about ...
plainclothes's user avatar
  • 21.3k
13 votes

Will users know a CardView is clickable?

I recently did some testing with a similar design where the cards were not tappable, only the button like your "Start". The participants mostly expect cards and tiles to be tappable IF there is only ...
Ling's user avatar
  • 1,412
11 votes

Best Representation of Countdown Timers like "Deal Expires in MM SS"

Kishan I would step back and approach it from a deeper UX perspective; who are your users, what are they doing, what information is pertinent to them? When you delve a little deeper, the answers ...
Wristy Manchego's user avatar
11 votes

How to deal with an excess of white-space in a CRM UI?

I don't see an issue with the white space. Card-type interfaces are prone to having white space. Maybe you can condense the details into the global components, like the header, and dedicate the body ...
Nicolas's user avatar
  • 5,608
10 votes

Best Representation of Countdown Timers like "Deal Expires in MM SS"

Why don't you just give the actual time until expiry? At the moment, you're proposing to tell me that the offer expires "in one day". But what does that mean? Let's say it's 3pm on Thursday. It ...
David Richerby's user avatar
9 votes

Best Representation of Countdown Timers like "Deal Expires in MM SS"

You also have an option to display it as 59m 59s, if you're worrying about ambiguity. If you have to stick with the options you provided I would go for 59:59 mins, since 59:59 may be interpreted as ...
Jaroslav M's user avatar
8 votes

Will users know a CardView is clickable?

There's nothing wrong with having clickable cards. An example of that is YouTube: when you're browsing a list of videos, each video is represented with a card. Notice that the card also has a "show ...
gardenapple's user avatar
7 votes

Will users know a CardView is clickable?

I think when a big chunky object represents an action by interacting with it directly (clicking, tapping, hovering, etc) there should be an explicit visual hint (especially given "Cards" in Material ...
Dai's user avatar
  • 907
6 votes

Cards with margins VS Edge to Edge container

Cards with margin and shadow look like real cards. That's the motto of material design. To make things appear as real objects. Objects are presented to the user without breaking the continuity of ...
Dipak's user avatar
  • 16.2k
6 votes

Card Design - Layout

This article should give you a better perspective on the use of Carousels on mobiles - Carousels on Mobile Devices Dots are generally weak signifiers which basically means that they could be ...
Arriving From The Sky's user avatar
5 votes

Should CTA be placed on all cards

You have two actions available from the card: Visit website Learn more You need to decide which of these is the primary action, and make sure the rest of the content doesn't conflict with these ...
Matt O'Keefe's user avatar
  • 1,860
5 votes

Between cards and tiles, what pattern is acceptable to use on a dashboard?

That also depends on your content. In my experience tiles are not that scalable if the length and amount of content can vary. But if you have some fixed graphs (e.g. pie charts, donut charts, line ...
Luchadora's user avatar
  • 370
5 votes

What's the difference between cards, panels, and tiles?

According to Google's Material Specification...Tiles have square corners, no more than 2 actions, cannot be rearranged or dismissed. Cards have rounded corners (like playing cards), have multiple ...
Kevin Braun-Braun Interactive's user avatar
4 votes

How can I communicate that a list item is expandable?

I'd suggest trying to find an UI pattern that fits this purpose - so users are familiar with it, and will find it intuitive to click there to 'expand' and have more content. In your case, perhaps '...
Ana Santos's user avatar
4 votes
Accepted

What would I call this element?

It looks like what I've heard called a "drawer" https://codepen.io/tag/drawer/
Luke's user avatar
  • 131
4 votes
Accepted

Improving UX for multi-selectable cards

As Muhammad Jahangir already hinted at, using Chips to select multiple results in searches is a very common approach. If you google "ux search multi select", a lot of the results look like this: ...
Big_Chair's user avatar
  • 6,835
4 votes

Card with Button or Completely Clickable Card

The answer is it depends. As you have marked this as "accessibility" I will weigh in on that the most, luckily it links to usability quite nicely. Please note I have also answered this as if ...
GrahamTheDev's user avatar
  • 2,598
4 votes

Benefits of displaying information in a grid of cards over a table list?

There are well-established patterns for the usage of tables to display information versus using cards. As you mentioned before, it can be helpful to display pictures or graphical information in a grid ...
Michael Lai's user avatar
  • 27.3k
4 votes
Accepted

Make it clear that a card is clickable

You have nested actions: a clickable card with a clickable button on it. Your testing has shown that users did not understand that. Instead of having the card clickable you should provide a second ...
BrunoH's user avatar
  • 3,435
3 votes
Accepted

Best way to denote duration of course on cards for hours and minutes

The answer of @Dominik Oslizlo is interesting, however the clocks seem a bit like full moons. I'd put it in the comment, unfortunately my reputation is still too low for that. I'd suggest keeping the ...
Mike's user avatar
  • 3,125
3 votes

Showing little text in a big panel

You say that: "Showing the list panel on the right side of the panel 1. It makes it look of minor importance." But I think that given the information you have it is better to use columns for the ...
Alvaro's user avatar
  • 16.8k
3 votes
Accepted

Showing little text in a big panel

How about splitting and perhaps enlarging the List Panel text? (my sketch is very rough).
MMacD's user avatar
  • 1,026
3 votes

Improving the UX of my "Hire Me" card

There are a couple of issues with your current design which stand out 1. Your call to action is lost against the other content : The call to action is your primary interaction point for the user. ...
Mervin's user avatar
  • 44k
3 votes

Best Representation of Countdown Timers like "Deal Expires in MM SS"

Based on the update speed (the seconds value changes every second) it should be pretty clear quickly whether it is hh:mm or mm:ss. So the format mm:ss should be sufficient to remove the ambiguity.
JAD's user avatar
  • 139
3 votes

Best Representation of Countdown Timers like "Deal Expires in MM SS"

Well, depending on your geographical location and type of users, you could stick to the French way, which is 59m55 for 1 hour minus 5 seconds. The drawback of this is that it is unusual (anywhere non-...
yo''s user avatar
  • 1,383
3 votes

Where to place icon on a card with only text and an icon?

Adding some visual hierarchy might help. Example :
Chetan Keshav's user avatar
3 votes
Accepted

Can a card have lozenges?

I'm not sure if i understand you right, but you want to display chips (i guess thats what you call "lozenges") within a card. Just an example from material ui which provides the user with choice-...
Pectoralis Major's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible