Skip to main content

Questions tagged [cards]

A bounded, self-contained element within the UI that signifies a tightly related set of information and actions.

Filter by
Sorted by
Tagged with
0 votes
1 answer
77 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 ...
Genio's user avatar
  • 3
4 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 ...
Jacob's user avatar
  • 43
3 votes
2 answers
105 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 ...
Izquierdo's user avatar
  • 12.7k
2 votes
2 answers
97 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 ...
Niels Brinch's user avatar
1 vote
1 answer
202 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 ...
Michael Lai's user avatar
  • 27.3k
0 votes
2 answers
89 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, ...
Muhammadoufi's user avatar
1 vote
2 answers
114 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 ...
Eva's user avatar
  • 13
1 vote
2 answers
215 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 ...
ExecutionSommaire's user avatar
0 votes
1 answer
106 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 ...
Mourad's user avatar
  • 87
0 votes
1 answer
40 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. ...
Madhusree Chinnadurai's user avatar
2 votes
1 answer
60 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 ...
jmchauv's user avatar
  • 33
0 votes
1 answer
120 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....
Samuele B.'s user avatar
0 votes
1 answer
272 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 ...
mrg0000's user avatar
0 votes
1 answer
359 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 ...
Samuele B.'s user avatar
1 vote
3 answers
359 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 ...
Ismail Vittal's user avatar
2 votes
2 answers
583 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 ...
Samuele B.'s user avatar
0 votes
1 answer
509 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 ...
Cassie Ho's user avatar
1 vote
1 answer
389 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 ...
S. Sakamoto's user avatar
2 votes
1 answer
172 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 ...
Madian Malfi's user avatar
0 votes
2 answers
548 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 ...
Andre Mendoza's user avatar
2 votes
3 answers
399 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 ...
Amal K's user avatar
  • 123
2 votes
1 answer
561 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 ...
harshikerfuffle's user avatar
1 vote
1 answer
79 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 ...
David's user avatar
  • 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 ...
Sherif Waheed's user avatar
3 votes
4 answers
5k 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 ...
Okaa-Pi's user avatar
  • 33
0 votes
3 answers
503 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 ...
Jung's user avatar
  • 33
1 vote
1 answer
82 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 ...
Ahsan Hussain's user avatar
-1 votes
1 answer
54 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, ...
Emanuele Galeotti's user avatar
2 votes
1 answer
5k 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 ...
Dhiraj Pandagre's user avatar
1 vote
1 answer
80 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 ...
Antony's user avatar
  • 11
1 vote
1 answer
145 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 ...
dmcleod's user avatar
  • 51
0 votes
1 answer
73 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, ...
Dan Dascalescu's user avatar
2 votes
1 answer
445 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 ...
Mojimi's user avatar
  • 95
2 votes
3 answers
203 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; ...
Stéphane Klein's user avatar
0 votes
1 answer
61 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 ...
Toivo Säwén's user avatar
1 vote
1 answer
103 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 ...
Gisela Ale's user avatar
3 votes
1 answer
529 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 ...
dmcleod's user avatar
  • 51
1 vote
0 answers
39 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....
vaibhav Kothari's user avatar
1 vote
2 answers
197 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 ...
Yuliana Z.'s user avatar
1 vote
1 answer
72 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 ...
Hossein Malakalaie's user avatar
1 vote
1 answer
342 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 ...
user3277606's user avatar
1 vote
2 answers
173 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 ...
Woj's user avatar
  • 13
1 vote
1 answer
10k views

Managing different sized contents in a card

How to manage different size of contents in a card, keeping the card size same?
Jayadeep's user avatar
  • 111
1 vote
1 answer
96 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 ...
Sergio Romero's user avatar
1 vote
1 answer
404 views

How to display summary of user permissions from a data table into a row [closed]

I have a summary card for a web-based application which expands into an interactive table that consists of different users and permissions from Custom to Read, Write, Deploy, etc. There will be ...
telo78's user avatar
  • 11
0 votes
4 answers
753 views

How to utilise empty space in card list design?

My website's main page displays summaries of users' profiles. Each profile summary is encapsulated in a "card". Take a look at an example here (using dummy data). For reference, the card width is ...
turnip's user avatar
  • 103
2 votes
2 answers
993 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 ...
NB4's user avatar
  • 2,501
1 vote
2 answers
144 views

Adjusting information inside a card visually

Context Currently, I'm working on Product Listing page of a web-store. Products shown on the web-store can basically be rented out and we have defined rental prices for different time duration such ...
Sheraz's user avatar
  • 1,819
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 ...
krabinowitz's user avatar
10 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 "...
Conor's user avatar
  • 533