107
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 ...
- 7,371
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 ...
- 4,518
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 ...
- 1,143
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 ...
- 16.2k
31
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 ...
- 18.3k
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 ...
- 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 ...
- 24.6k
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 ...
- 11.4k
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 ...
- 1,628
24
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; ...
- 367
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 ...
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.
- 8,904
21
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 ...
- 16.8k
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 ...
- 1,644
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 ...
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 ...
- 3,310
18
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)
--------------------------------------...
- 385
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 ...
- 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 ...
- 3,095
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 ...
- 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 ...
- 378
13
votes
Multiple values in one cell in table
You can try something like this, the most common and familiar with user way.
- 854
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'...
- 179
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 ...
- 399
11
votes
What some alternative ways to present tabular data instead of the standard table in the UI?
Have you considered using cards to display your data? They're becoming very common with Google's Material Design and can be quite appealing to the eye if styled correctly.
Ofcourse placing too much ...
- 111
11
votes
How do you keep your data tables simple?
Minimizing Table Real Estate
You say you want to “simplify” the tables, but it sounds like what you’re really after is reducing the space they require. That can help the user by making more ...
- 37.7k
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 ...
- 215
10
votes
Accepted
Should searching a table include hidden columns?
Avoiding the dilemma
There's a possible solution without falling into this dilemma:
Give users the choice, just by adding a checkbox below the search/filter input which specifies "Search in ...
- 10.5k
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 ...
- 3,702
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 ...
- 116
Only top scored, non community-wiki answers of a minimum length are eligible