Questions tagged [cards]
A bounded, self-contained element within the UI that signifies a tightly related set of information and actions.
122 questions
0
votes
2
answers
60
views
Design approach for a card based audio file catalogue dashboard
What is the recommended approach for a design as follows when it comes to colors and spacing. I am looking for feedback.
Is this considered too much white space?
Or should there be more padding / ...
- 117
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
0
votes
1
answer
63
views
How to show users that cards in a card list are clickable [duplicate]
I am working on a desktop and mobile app that sometimes shows a list or grid of cards, that are clickable to get to the detail of each item.
I worry that some users may not understand that they can ...
- 101
0
votes
2
answers
85
views
Should a clickable card have a tooltip about what happen when clicked? (Desktop SaaS App)
Context: a SaaS application in which users manage their projects. They mostly need to keep the status of the project updated, see the project information, and write notes if something comes up. Mainly ...
- 3
0
votes
1
answer
129
views
Alternative to using cards or tables for displaying different data/info
The problem
Our product currently uses a lot of data tables to show information to our users. We also have a lot of metrics and numerical data that we also display that is often clickable that filters ...
- 1
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
0
votes
1
answer
104
views
How to present rooms in a grid style for booking
I am creating a booking style website where students can reserve classes/labs/gyms etc
I feel like my current grid style feels overwhelming. Does there exists a more user friendly way to display this ...
- 3
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
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
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
1
vote
1
answer
348
views
Components in graph based UI with more complex interactions
Something that I noticed has become a feature of complex no-code software applications is the use of graph-like interfaces with more complex interactions such as the Unreal Engine 5 user interface.
I ...
- 27.7k
0
votes
2
answers
96
views
how to make card with more detail [closed]
How can I display all the information on this blood donation request card without cluttering the card's visibility on Stack UX? Additionally, I have a long text that describes the user's blood need, ...
1
vote
2
answers
157
views
Big form with blocks within blocks within blocks: how to improve or avoid this?
Apologies if this has been posted before.
I'm doing a visual rework on an existing webapp that's essentially a big form with a bunch of form fields, that are divided into sections, subsections, and ...
- 13
1
vote
2
answers
303
views
Carousel with focusable items
I have a carousel with partial display of the items on the far left/right. Every item has a button to open additional information under the carousel (the item then becomes "active" with some ...
0
votes
1
answer
135
views
What should be the order of icons in an accordion?
In the interface I'm designing, I'm using several cards that work as accordions (they can expand/collapse). Each card has a title, and next to it a " plus " sign. One particular card also ...
- 149
0
votes
1
answer
48
views
Section of Cards with Go to page option
I am designing the section of cards to show the status in the dashboard screen. I am showing only 5 cards, then I would like to provide the link to go to another page to see complete list of statuses.
...
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
0
votes
1
answer
230
views
Visually distinguish cards in a list
I made an LMS webapp which, in the main page, shows a list of courses.
The page looks like this:
The goal of the app, from a graphical interface standpoint, is to keep an elegant material design look....
- 61
0
votes
1
answer
504
views
The Card Height Problem
You have a horizontal row of three cards on a page. There's an image, a header, descriptive text and a button.
How do you ensure all of the cards stay the same height if the content in each card isn't ...
- 1
0
votes
1
answer
659
views
Actions as icons on card
I'm looking for a way to properly display actions on my application's card without cluttering the interface too much, while still correctly emphasizing them.
My application allows teachers of a school ...
- 61
1
vote
3
answers
414
views
Presenting missing information on card
I have a multi-step form that requires filling in relevant details in each step. On each step we save the data. If a user leaves the form at any time, the draft will be saved and can be accessed from ...
- 146
2
votes
2
answers
818
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
0
votes
1
answer
666
views
How should I design this, not sure if it's a container or card
I'm currently in charge of the design system and we have this component which I'm not sure if I can consider it a card, or should I just use the general term 'container'. I tried googling and results ...
- 53
1
vote
1
answer
448
views
Form with multiple rows of selectable options displayed on material UI cards, need help with adjusting the design
I have a form that has around 3 rows with selectable cards (only about 3 to 4 options each row). We do not have a UI/UX designer and I want to adjust the UI design but do not have a good idea about ...
- 11
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
0
votes
2
answers
621
views
Horizontal scrolling or show more?
I'm working for a company and I have to make a section of a webpage that includes projects. They have 72 active projects and they want to show all of them in cards. The functionalities that include ...
2
votes
3
answers
648
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
1
answer
801
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
1
vote
1
answer
84
views
Scroll time on SaaS
As is the case with most SaaS, there is sometimes simply too much data to fit on one section of a page. On the desktop app, we use a standard table view of data. On the mobile app, we use cards in ...
- 25
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 ...
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
0
votes
3
answers
610
views
Benefits of displaying information in a grid of cards over a table list?
I can appreciate that using a grid of cards is useful when there are pictures or graphical information to display. However, are there any other pros/cons of using one over the other to display a large ...
- 33
1
vote
1
answer
85
views
Redesign of a resultpage card [closed]
I am wondering about a redesign I have been doing. It is about a resultpage in which we have home insurance cards.. the current setup was not flexible enough to show a longer text for the usps.
My ...
-1
votes
1
answer
56
views
is it better to keep the layout of the lists?
I have an application that manages several entities, each entity has a list page, each entity can have a child entity with its own list page.
Are you using different types of lists? table, cards, ...
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
1
vote
1
answer
86
views
How to decide what information should I place on the item card? [closed]
Imagine you have to design an app that will help users in ordering food from the restaurants. You make an order and go to "My orders" where you can see a list of your orders from different ...
- 11
1
vote
1
answer
155
views
What is the best way to combine a dismissible card with a collapsible panel?
I'm working on a checkout flow where a cart summary panel appears on the right hand side of the checkout form. We want the user to be able to remove a product, but due to legal and compliance reasons ...
- 61
0
votes
1
answer
81
views
Cross-platform mobile pattern for navigating among, editing, and creating cards
I'm a backend dev (mostly), very new to UX. I'm building a mobile-friendly Progressive Web App that allows users to view and edit cards with a few attributes (discussions: title, image, description, ...
- 469
2
votes
1
answer
540
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
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
0
votes
2
answers
87
views
Is there a name for a "Card with window/cutout" UI element
I have an app with a lot of card UI elements, they work great to organise data in categories. However, I am running into issues when I have a lot of data that I want to arrange in multiple columns. I ...
- 101
1
vote
1
answer
132
views
Display large chart inside a card in a Dashboard
I'm going to design a Dashboard, I know how to show the information but my client said to me that a cohort chart is going to have a lot of information. I wonder if it's ok to add to the card that ...
- 11
3
votes
1
answer
615
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
1
vote
0
answers
44
views
Layout for many independent navigation in a section of a webapp [closed]
There are many sub section in my project and I am not able to find right pattern for the layout the user navigates into the section from side navigation bar and then there are close to 25 sub sections....
- 590
1
vote
2
answers
311
views
What is the best practice to apply the card design in webpage? [closed]
I have a question in terms of the card design style as I was designing the website for a company.
Basically, I noticed that other company's websites apply card design on their website. Like to ...
- 56
1
vote
1
answer
78
views
How can we change Call to actions on a card without making user learning process harder and longer?
We are designing a new dashboard for our platform which user request on some service and our providers submit offers for user requests.
when a request submitted by a user, He should wait until service ...
1
vote
1
answer
358
views
Using cards as navigation to other cards
I am trying to become good at web design, but feel I am missing that 'visual eye' that so many of you have.
The general flow of what I'm trying to make is a top-level subject (ex. Math), will bring ...
- 11
1
vote
2
answers
177
views
Userflow for questions based on answers on inspection app
I'm working on a mobile application to help technician to make inspections. They have a lot of question for each task, each question is about an item inspection. When the answer is positive no ...
- 13
1
vote
1
answer
11k
views
Managing different sized contents in a card
How to manage different size of contents in a card, keeping the card size same?
- 111
1
vote
1
answer
111
views
Should allow upload file in the same page or a new page?
I am building a web site where students have to do their homework online.
I have a page that shows a list of cards , every card represent a homework.
On every homework the students have to upload ...
- 111