Skip to main content
Share Your Experience: Take the 2024 Developer Survey
108 votes
Accepted

When your page has no results, what do you show?

For this situation you can use an empty state which can be just text or a graphic with text and an action button. Example of an empty state from Product Hunt: Good empty states will give the users ...
RobbyReindeer's user avatar
43 votes

When your page has no results, what do you show?

I would hide Showing "0 results from 0 results". Instead I would add in place a Blank State image with a button for the user to add data. ( If the user adds the data ). Displaying a pagination where ...
Chris's user avatar
  • 4,558
33 votes

Where should a newly added item go in table?

The system should add the newly added user to the corresponding page based on the sorting and jump from the current page to the page of the newly added user. a. for extra affirmation, popup a ...
aly.i.ux's user avatar
  • 1,143
32 votes

Grid/table with lots of buttons

There's a similar situation at the Youtube Studio Video Editor that can help you getting ideas, a mix of icons, drop down options menus and interactivity. Each row has two icons: the select icon on ...
Danielillo's user avatar
  • 19.1k
31 votes

What should the sequence be for Download and Delete buttons?

Placing those icons upfront will create confusion and users might take wrong action (clicking on unintended row) because of the repetition. Think of using the vertical three dots approach and place ...
Dipak's user avatar
  • 16.2k
28 votes
Accepted

How do you indicate that an item is not selectable?

Keeping the checkbox disabled should be alright, if you are concerned about it you can make use of tooltips to explain the user why it is not selectable when he hovers over the field. Some thoughts ...
Alvaro's user avatar
  • 16.8k
27 votes
Accepted

In a large list, should the filter and search be combined or separated?

When users are filtering a data set (especially large sets), they expect the filter to do its job at all times: the promise of just showing me what fits a specific criteria that I've defined. Keep ...
Mike M's user avatar
  • 24.7k
26 votes

Right way to show hours spent on project - with or without h:m

The suggested format of 8:30 can be confusing for durations, especially because it is also used for the start and end time. The h is not a common addition for that format and can confuse people as ...
jazZRo's user avatar
  • 11.9k
25 votes

To use or not to use "Zebra Stripes", or Alternating Row Colors for Tables

Don't. Don't use zebra stripes. Let me quote Edward Tufte: Again, this is a solved problem, with examples in Envisioning Information, chapter 3. Strips are merely bureaucratic or designer chartjunk; ...
Felipe Hoffa's user avatar
25 votes

Is right click on tables bad UX

I think it is a great idea to use right click to context menu. It is a norm in desktop application and I see no reason for it not to be the case in web interfaces. And many if not all tools from ...
Jurijs Kovzels's user avatar
23 votes
Accepted

How should "Select All" work in a "LOAD MORE" table?

I think of 2 possible solutions. First solution: The newly show entries are also selected. Since the user selected "SELECT ALL" it would be good to the program to... select all, since thats what ...
Gilberto De la Garza's user avatar
22 votes

How do you make it clear to the user when the data in a table is updating live (or not)?

You could include an update button that the user has to click. The button shows the number of new elements and live-updates that number. This way you can make the user aware of possible new rows in ...
Alvaro's user avatar
  • 16.8k
21 votes
Accepted

Multiple values in one cell in table

Maybe a traditional tabular layout is not right UI approach? You could consider variable height rows so that multiple values appear vertically in a cell, i.e.
SteveD's user avatar
  • 8,924
21 votes

What should the sequence be for Download and Delete buttons?

I would recommend not to put them directly next to each other at all to prevent mistakes. Downloading and deleting are two very different actions, happening with different frequency. I would make the ...
Bergi's user avatar
  • 1,646
20 votes

When your page has no results, what do you show?

For completeness, there's a canonical bad solution to this that is extremely common: quietly (maybe even silently) generalize the user's query until the set of results is non-empty, and show them ...
R.. GitHub STOP HELPING ICE's user avatar
20 votes
Accepted

How do I make a large table from desktop/web look good on mobile?

The natural orientation of a smartphone is portrait, and the natural scroll direction is down, creating a view which is very narrow compared to its possible length. If your table doesn't fit, you ...
Glorfindel's user avatar
  • 3,320
19 votes

How do you make it clear to the user when the data in a table is updating live (or not)?

To make my users aware of the data updates I usually put the last update date time on screen like that: updated at: 01/03/2017 19:24:55 (2 mins ago) --------------------------------------...
Lucas's user avatar
  • 395
17 votes
Accepted

What should the sequence be for Download and Delete buttons?

There is no hard rule for this and it would be different in every case but I would recommend putting the task that you want your users to perform, or the task they they are likely to perform most, at ...
Roux Martin's user avatar
  • 14.2k
16 votes

Tabular vs Card-based presentation, which is better for lots of data?

Adding to @DesignerAnalyst's answer. Here are some parameters you may want to consider before selecting the metaphor, Amount of data for each record: If the data includes text, images, actions then a ...
Harshal's user avatar
  • 3,115
15 votes

Right way to show hours spent on project - with or without h:m

I think this is going to be opinion-based no matter what, so here's my standard way of doing it: 1d 2h 3m 4s One day, two hours, three minutes, four seconds. Omit some components as appropriate for ...
Keiji's user avatar
  • 251
14 votes

Is right click on tables bad UX

It would be good UX for a general UI, but it is bad UX on the web. Your custom right click menu will block the regular one, what is against the principle of least surprise and possibly against what ...
allo's user avatar
  • 378
13 votes

Multiple values in one cell in table

You can try something like this, the most common and familiar with user way.
Fasih's user avatar
  • 864
13 votes
Accepted

When should an 'archived' or deleted row disappear from a table?

I would lean towards suggesting that it should remain until the user leaves the page, or refreshes. It feels like it doesn't detract by having it there after the user performs the 'archive' action. I'...
Rhys Merritt's user avatar
12 votes

What is the best practice for data table cell content alignment

If the column is a text, left-align it If the column is a number or number + unit, right-align it (like excel) If it's a multi-part value separated by a common separator (like 1024 x 768 is multi-part ...
Nitin Jadhav's user avatar
11 votes

What should the sequence be for Download and Delete buttons?

Make deletion possible only on a selection basis I would suggest adding a checkbox for each row and an Action Bar on the top with the Delete button. This makes deletion possible on a per-selection ...
Pabru's user avatar
  • 215
10 votes
Accepted

How do you make it clear to the user when the data in a table is updating live (or not)?

If you have a complex information for the user, in most cases the best solution is to simply spell it out. Display a gray information box directly above the table if the user is viewing search results:...
Falco's user avatar
  • 2,118
10 votes
Accepted

The first zebra striping should be dark or not

I've always gone with white first for a few reasons. It tends to stand out better against the typically darker header If there is only a single result it doesn't look "grayed out" and thus ...
scunliffe's user avatar
  • 3,712
10 votes

Best practices to allow user to hide/show columns in a data table

Consider placing table controls in close proximity from the data the user is viewing. In the example above, you're using a list builder. You say this is similar to an Excel table: do you have any CRUD ...
Mike M's user avatar
  • 24.7k
10 votes
Accepted

How to align prices in columns when both 2 digit and 4 digit variations of a price exist?

It seems to me that your first approach (decimal aligned) is pretty obviously much more readable. The amounts are much easier to perceive because of the same position of digits of the same ...
Justas Vilimas's user avatar
10 votes
Accepted

A table within a table - Table Inception

When I was on a team working on a similar issue in a data table, the option we ended up with was actually using an overlay (we called it a drawer) that was full height, on the right hand side of the ...
Warren Payne's user avatar

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