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
4answers
140 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 ...
1
vote
2answers
45 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 ...
0
votes
2answers
52 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 ...
23
votes
4answers
4k 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 ...
9
votes
3answers
2k 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 "...
0
votes
2answers
109 views

What is the best native iOS solution for a Radio Button with just two options?

The challenge I'm faced with is that I have a horizontally scrolling series of cards that have two common questions for each item, say, Did you perform activity x? and Did you perform activity y?, and ...
2
votes
3answers
229 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 ...
2
votes
1answer
121 views

Bulk-populate a grid and, cards UI

I'd like to enable user to bulk-populate the grid, in 2 columns. Each of the 2 columns has one the same answer. So I want the user to paste into the top body row (header is the title), and the UI auto-...
0
votes
2answers
245 views

Card Design - Layout

My mobile application has 6 cards. At any given time the user would view only one card. However, the user has an option to swipe left/right and view a different card. I am having a hard time deciding ...
0
votes
2answers
136 views

Accept/Reject CTA buttons on cards

I have to design a dashboard to help sellers to manage invoices addressed to them during the month. The invoices will arrive in "To do" tab. For each invoice we have two choices : "Accept" or "Reject" ...
0
votes
1answer
117 views

Conceptual Model of Contactless Cards

Contactless card is a card for limited value transactions that one doesn't need to add a PIN on a POS, just tap on it, that's why they are also known as "tap-and-go" cards. (More info) On my research,...
-1
votes
2answers
69 views

Too many cards in one list possible? [closed]

I want to setup an app with some cards. I want also to filter this cards. Do you think there is a limit of cards if I have the possibility to reach all cards fast via a e.g. timeline? So do you think ...
1
vote
3answers
138 views

On a card UI with less than usual text, should I leave the card size as is, or make the card smaller?

I'm making a timeline with multiple card UI elements, and I'm curious as to what I should do with the card size (in particular height) when the subheader text is only a single line long as opposed to ...
1
vote
4answers
175 views

Should icons always be the same color as the accompanying text?

I'm designing a timeline in which certain "event cards" are interactive while others are not. I'm running into a problem where the icons on the non-interactive cards look very dark, and therefore ...
1
vote
3answers
72 views

Will a user be able to identify the relative “meanings” of separate cards on a timeline if the icons are located opposite from the card's title?

I'm designing a vertical responsive timeline for a health-tech company, and the timeline is supposed to show different "events" throughout a patient's physical rehab program, each being represented by ...
0
votes
1answer
200 views

Can a card have lozenges? [closed]

Desktop app. Filters on top. Lozenges in filters. Search results display in cards. Now, can these cards have lozenges? No right? Cause I need to show which one of the filters each particular card ...
2
votes
1answer
156 views

Is a CardView-based UI the best approach to section rich content? [closed]

Im working on a "smart-home section" that is beeing redesigned at the momment and i'm not quite sure about the approach of our designers. My question is: Is a CardView based UI the best approach to a ...
2
votes
4answers
141 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 ...
15
votes
7answers
3k views

Representation of Timer in “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 ...
1
vote
2answers
241 views

Make Cards more clickable

I'm creating a flat-ish responsive website, which let's you vote 4 certain topics. I'm displaying songs (but it could be whatever) in a flexbox grid system with 4 different colours. Each song is ...
1
vote
2answers
213 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 ...
2
votes
2answers
128 views

Ways of organizing a lot of cards

For an intranet application we've developed a way for users to create dashboards. Each dashboard is named and then displayed as a card. In the beginning this was very easy to work with. Now we have ...
0
votes
1answer
85 views

What would I call this element? [closed]

I am trying to create a card that has a position absolute show more div option. I need it to not move any other elements and be responsive. I don't know how to do a search for it because I don't know ...
1
vote
0answers
44 views

Use of cards and tiles within the same mobile application

Can I use cards and tiles within the same application? There are two tabs: "Meetings" and "Activities". In "Meetings", all items will have the same elements, so I 'm using tiles. On the other hand, in ...
5
votes
3answers
797 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 ...
0
votes
2answers
110 views

Improving the UX of my “Hire Me” card [closed]

I've created a "Hire Me" card to display on my website and am looking for some feedback. Live Demo What I want to know: Is this a place where I can use a 'ghost button'? Is the font readable ...
2
votes
1answer
74 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 ...
2
votes
1answer
1k views

White colored card on top of a white background

I'm building an iOS only app that helps users understand their Twitter data. I'm not sure what is the best practice in terms of User Experience and User Exception. I'm using white pressable cards, ...
2
votes
1answer
213 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 ...
0
votes
2answers
138 views

How do you present countries on your name card except from using text?

I'm updating my company's name card, as we are expanding to other countries, we want to reflect those countries on our name card, but the problem I encounter is the map appeared very ugly, and we ...
1
vote
2answers
175 views

Ecommerce Mobile - List of products: should I show them in cards or divided by lines? [closed]

In a list of products one underneath the other, showing them in cards is the better solution? Imagine there are a lot of situations: a list with one specific category of items; a list with products ...
1
vote
2answers
248 views

Why are card layouts with dark background not frequent?

Most of the card layouts on popular sites or social media sites use white (or light) background and dark text. For example, Google plus, instagram, facebook, Pinterest, dribble, etc. Rarely (or less ...
5
votes
2answers
200 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 ...
2
votes
2answers
571 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, ...
3
votes
6answers
88 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 ...
2
votes
3answers
157 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 ...
0
votes
2answers
228 views

Should CTA be placed on all cards

I am working on a mobile app and i have designed cards. So user screen will have lot of cards and should i add Know more CTA on all cards. Will it not be annoying. Card action is - click on card to ...
1
vote
4answers
334 views

Too Many elements on a card(mobile) clickable

Is it recommended to use less clickable events on a card when you are designing for a mobile app. I am designing a card , and client requirements are most of the information has to be on card.and ...
2
votes
2answers
64 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 ...
1
vote
2answers
72 views

Test Formatting

I have a bit of a dilemma. I am designing a product that allows for authors to create tests through modular blocks, than publish those tests via ePub. The intent is to deliver the test to students/...
0
votes
2answers
321 views

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

We are building dashboard for C-level executives for our web app and currently debating on whether we should use cards or tiles in our dashboard. What would be a recommended option from either of ...
0
votes
1answer
104 views

How to display deals in an elegant, card-based way?

I'm working on an application with deals , and I wanna know how I can display current deals in an elegant way. My current ideas are: download bmml source – Wireframes created with Balsamiq ...
1
vote
2answers
687 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 ...
1
vote
2answers
118 views

How can I indicate that an area is swipable? [duplicate]

I have a mobile timeline with cards, each card can be swiped to the right to display interaction options. We feel that it's not evident to the user that there's anything there, the 3 dots we've added ...
0
votes
1answer
82 views

Actions position on cards

Is there a best practice or a guideline saying that actions on cards should be located on the bottom of the card for touchable screens ? Are there actions types that should be located on the top of ...
166
votes
13answers
19k 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 ...
0
votes
3answers
86 views

Does mixing actions in a card feed confuse users?

Imagine a card-style feed where users can only see one card at a time. Each card has at least two calls to action. Most cards are presented in a y/n format where swiping right means "yes" and swiping ...
3
votes
3answers
444 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 ...
0
votes
3answers
81 views

Show items added by user [duplicate]

I'm working on a Inventory System where users make orders using a form. The user will fill a couple of fields and then he will choose the products that he wants. I'm wondering on how to show the ...
1
vote
1answer
263 views

Card-based design for singular content

How can I create a card-based design for an Android app that displays questions, in a way that allows the user to focus on one question at a time—without making the cards or the screen look empty? ...