Questions tagged [cards]
A bounded, self-contained element within the UI that signifies a tightly related set of information and actions.
122 questions
173
votes
13
answers
23k
views
Why is this design considered cluttered or overwhelming?
I'm developing a web app for Desktop and Tablet browsers. All of my UX knowledge stems from personal experience and iteration - I've never been formally trained. I took great care in presenting the ...
- 1,873
40
votes
5
answers
38k
views
What's the difference between cards, panels, and tiles?
It seems as if with some of the modern front-end development frameworks there is a blur between the different types of 'container' elements. Whether this is an attempt to abstract the design from ...
- 27.7k
24
votes
4
answers
6k
views
Will users know a CardView is clickable?
I am working on a personal project to sharpen my mobile development and UX skills and ran into a small UX dilemma.
Each CardView contains some data and a start button that, when pressed, will take ...
- 351
19
votes
3
answers
6k
views
Design pattern for sorting / ordering items in card view
In a table design pattern there is usually a 'primary' key value which all the other values can be sorted by, and it is easy to sort or order the rest of the attributes associated with the item.
...
- 27.7k
17
votes
7
answers
4k
views
Best Representation of Countdown Timers like "Deal Expires in MM SS"
UI cards in my application expire after 3 days of creation. I indicate this in a badge as shown in the image.
The different states of the element are:-
The live countdown timer starts once it ...
- 3,017
15
votes
6
answers
12k
views
How to indicate that a card is expandable?
Currently I'm working on an app which uses a vertical 'list' of cards, somewhat like Google Now. These cards can contain static text, (small) images and some control elements (buttons etc.), or a ...
- 153
15
votes
5
answers
19k
views
Difference between Tiles and Cards?
We are developing a platform and we need to show a visual way the most relevant information from different sources to the users. The user need to interact with this "pieces of information" and this ...
- 151
14
votes
2
answers
6k
views
What is a great way to display a user's email address in a small amount of horizontal space (in a user card)?
I'm designing an area of an app that needs to display users in a certain group. To save space while providing larger (more recognizable photos), I've decided to use a "card" style with photo above ...
- 143
13
votes
2
answers
2k
views
Card design with long and short text options
I am designing a card for uploaded files. The card displays the file name, the company or user who uploaded the file, and the upload date. The data should be easy to scan, so the same data on ...
- 133
11
votes
3
answers
3k
views
How to deal with an excess of white-space in a CRM UI?
I'm designing a CRM-style interface for nurses to help them manage their workflow, and I'm running into a UI issue where, in most use cases, there's kind of an awkward excess of white-space in the "...
- 543
10
votes
3
answers
4k
views
Flipping cards, good or bad idea?
I want to implement flipping cards on my website because they look awesome and they allow the user to see more information on hover.
However I started to think it was a bad idea because instead of ...
- 852
7
votes
5
answers
1k
views
Any value to gathering qualitative data from card sorts?
One of the best tools I've found for card sort experiments seems to be websort, mainly because you can just send out a link for participants to go through the exercise at their own convenience.
...
- 1,958
7
votes
3
answers
1k
views
Cards with margins VS Edge to Edge container
Is there any logic behind when to use cards with margins in design VS edge to edge containers. I've gone through material design guidelines as well as iOS guidelines, which does not give any clear ...
- 145
7
votes
2
answers
1k
views
dynamic credit card forms design
I am looking at the design of credit card entry forms. I have the option of validating the card number to determine the additional information fields on the form like start date and issue number.
...
john freeman
6
votes
2
answers
3k
views
What is the best way to display empty fields in a user card?
I'm creating a user widget for dashboard. What is the best way to fill the empty fields here?
I can't hide the labels here if they are empty. And if I use "No information available" does it seems ...
- 63
5
votes
2
answers
2k
views
How do I handle white space in cards with varying amounts of information?
I'm creating this page to display books I've read/reviewed, but I'm not sure how to handle the different amounts of information that each card has. Most cards will not have a review so there ends up ...
- 53
5
votes
2
answers
403
views
Best way to denote duration of course on cards for hours and minutes
I am working on in house LMS. It displays a list of courses in a card view. Essentially it shows
thumbnail of course
Title of course
Version of course
Duration of course in hours
Now as per a new ...
- 1,448
4
votes
3
answers
7k
views
Improving UX for multi-selectable cards
I'm designing a screen where the user should be able to:
1. Select b/w multiple options (displayed in cards)
2. Search for other cards and be able to select those as well.
Here's a picture for better ...
- 493
4
votes
1
answer
593
views
Material for inspirational workshop
I've been searching around for the last few days looking for resources for a inspirational workshop. What I have in mind—and haven't been able to find—in a set of "cards" with different ...
- 7,646
4
votes
2
answers
2k
views
Is it possible to use a Card component also for edit
On our UI, we are presenting the user his saved credit cards as a list of Card components, each saved card represented as a card.
The user can save up to 5 cards which will be presented in two rows, ...
- 351
4
votes
2
answers
119
views
Alignment vs. consistency in button space
Let's say you have a card that uses a gray area to separate buttons from content. Should the buttons try to be aligned with the content? (24px on left/right, 12px top/bottom)
Or should the left/right ...
- 12.9k
3
votes
3
answers
538
views
How to make cards distinguishable without using colour
Given a card based material design styled interface presenting cards representing people in a system, what visual techniques can be used to distinguish different states those cards may be in? We need ...
- 7,888
3
votes
2
answers
608
views
Double expansion option for a single card
I'm trying to work on a data card and its expanded version.
I want a user to access more details of a card body by expanding
There are children entity on a card where I also want user to access ...
- 121
3
votes
4
answers
3k
views
Expandable Card Interaction
I'm trying to create a card with some text/images inside, which can expand down and expose more content if a user clicks on the expand button (a huge down arrow).
The natural way to do this obviously ...
- 31
3
votes
4
answers
6k
views
Make it clear that a card is clickable
I am currently working on a Mobile Application, mainly using Material Design, with some client-specific adaptation.
On our project, we display a list of cards, each card having a varying number of ...
- 33
3
votes
1
answer
7k
views
Card with Button or Completely Clickable Card
If a card has a button, the CTA will be clearer but it'll be more useful from usability point of view if the card completely clickable.
So in mobile, will a card with button or a completely clickable ...
- 306
3
votes
6
answers
119
views
How to place 3 textbox in 1140px width of card? There are 2 tabs in card. width is fixed due to content in other tab
The width is 1140px width.
The content in tab 1 is more and takes width 1140px.
so to maintain consistency can't change or make smaller width
Suggest any other layout or better solution
Find attached ...
3
votes
1
answer
8k
views
What is the optimal width of a card? And responsive?
First, I know it depends on the content. And after reading through ux.se, blogs and observing websites; the results are quite less.
What I've found so far:
Text is readable at best ~100 characters (...
- 1,463
3
votes
1
answer
617
views
Mobile card carousel navigation
Background
We are currently using a standard mobile pattern to showcase 3 cards where users can compare different plans.
Problem
The cards are very text heavy and contain alot of content below the ...
- 61
3
votes
1
answer
299
views
Select maximum of two options to display summary info cards
I am trying to devise a mechanism whereby a user can select only two options at a time in order to display summary information for their selections.
It looks like this at present (actual content ...
- 235
3
votes
1
answer
838
views
Cards: single column or multiple columns
I'm working a card-based UI concept which allows grouping. As an example I look at a person and see his tasks and documents (and there could be many more categories):
So far so good. Now if I only ...
- 1,463
2
votes
4
answers
409
views
Where to place icon on a card with only text and an icon?
I have a list of cards where each card has a text content, an optional title, and one or more optional icon indicators.
The exact use-case is not important but as an example, the user has a list of ...
- 159
2
votes
3
answers
199
views
Showing little text in a big panel
Intro
I want to show a list of 5 to 10 items, each about 5-15 words.
The list has a significant role in the view, and the user must notice it and understand that it is very important.
My page is ...
- 209
2
votes
2
answers
419
views
Spacing between two tiles for good readability?
Are there any studies that having some space between two tiles would improve readability in an app experience?
I've included two wireframes that give an idea of what I mean, which is better spacing ...
- 235
2
votes
3
answers
649
views
How to concisely represent a set of statistics on a dashboard?
I'm designing a dashboard for a web app representing statistics related to a quiz/test.
I'm using visual aids like charts, icons and other cards displaying a small piece of information.
Each such card ...
- 123
2
votes
3
answers
242
views
What is the terminology, UI name for readonly field value?
What is the terminology of the following UI elements in this screenshot?
John Doe
https://www.facebook.com/john.doe
Principal: [email protected]
...
These UI elements are readonly field values; ...
- 123
2
votes
2
answers
2k
views
How can I communicate that a list item is expandable?
I have a grid list made of cards. Each one of this cards contains 4 list item. If the user tap on the list item, the card is expanded in order to become a hero and to show the contents related to that ...
2
votes
2
answers
118
views
Does objects cause less cognitive load than tables
I have a feeling that if you make card view or similar object that represents an item from the real world, such as a 'car' or 'person', then it causes less cognitive load than a table view - except ...
- 125
2
votes
2
answers
822
views
How to avoid the use of nested cards
I am developing a school web app and trying to follow material design guidelines.
There's a functionality that allows teacher to create homework and in-class test models, wherein they can input a list ...
- 61
2
votes
1
answer
223
views
How can I make it more obvious that a card view needs to be clicked?
We have a booking platform where users choose different types of activities to do in their area, But when users go to search page only 52.9% of them continue to activity page which made me think that ...
- 335
2
votes
2
answers
75
views
How to make long headings easy to copy inside a card?
When somebody hovers on the heading "Thanksgiving", the full text appears as tooltip. The problem here is the Heading must be easy to copy so that user can send it to another user for particular ...
- 307
2
votes
3
answers
1k
views
Scroll of the main content when the modal window is open
Should the main content of the screen (a layout of cards) be scrollable, when a modal window is open (without any overlay)?
What about the solution like this: when the modal window is open, the main ...
- 71
2
votes
1
answer
804
views
Hover on a card with clickable links
I am working on card which has a clickable link/ clickable options but the card itself is not clickable. I want to add a shadow to the card when someone is hovering on/ clicking on the link. I have ...
- 1,035
2
votes
2
answers
1k
views
For a list of 10+ cards, Should I use a CTA button on each card for a better conversion rate?
Should I use a CTA button on each card for a shortcut knowing that I have cards feed layout pagination for more than 10 cards?
For example if I have a projects feed inside a freelancing app here're ...
2
votes
1
answer
542
views
Nested Cards on mobile
I've come across many good nested/hierarchical data on mobile, problem is they often only include one line of information.
I'm looking to include more information than just a card title, so I'm ...
- 95
2
votes
2
answers
373
views
Best pattern for an image link on a card
I am using cards with images in a project. Ideally, I would like to have the images to be clickable and link to additional information on the topic presented on the card. On desktop, this works ...
- 121
2
votes
1
answer
181
views
If a tab has the same name as a card, should the card heading be removed?
I am using material design concept. I have tabs and within each tab are cards with headings and content. Sometimes there are 4+ cards inside each tab, sometimes there is only 1 card.
I understand ...
user98199
2
votes
1
answer
909
views
Are there best practices regarding card details horizontal or vertical layout?
What are the best practices for having a product card laid out horizontally or vertically? Can a product card be laid out both ways? If so, my concern is breaking user's mental map of how they're ...
- 71
2
votes
1
answer
72
views
Conveying that a card linked to a gallery has multiple photos instead of one
I'm creating a card view in which each card is linked to a separate view which contains either one photo or multiple photos. The resulting view is not necessarily a gallery, but more of an asset type ...
- 33
2
votes
2
answers
1k
views
Button placement in the footer of card layout?
Should the button be placed on the bottom left corner or bottom right corner in the card layout?
I was referring to Google's material design I found out that action buttons are placed on the bottom ...
- 2,511