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,321
102
votes
Is there a better way than zebra stripes
It depends on your definition of "better", but whether you define user performance or user preference as your metric, there are studies that objectively measure zebra striping (which can be ...
- 12.1k
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,308
40
votes
Accepted
In a static data table, should rows be highlighted on hover?
Yes. Just yes.
Though I do UX work, I am speaking as a user on this one. As a user, I very much want you to help me easily follow a row of data from end to end. I want to easily be able to see what ...
- 575
33
votes
How To Display Too Much Data
what data does the user actually need to see?
If only we could get a straight answer to that. Instead of "it depends".
I keep on running into this problem, and every time I Google I end up back here ...
- 670
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
29
votes
Accepted
Table with actions per row
3 small action buttons on the left-hand side of each row
With a LTR languages, one can assume users will first inspect the row (starting from the left) and only then decide to take action.
So ...
- 32.1k
27
votes
Accepted
Need a better layout, so that blank space can be utilized
Maybe try having the scoring information appear as a sub-heading under the student's row when you expand it? Something like this.
You'll want to be careful to stylistically de-empasize the sub-...
- 396
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
Need a better layout, so that blank space can be utilized
Tweaking Jim's answer...
...adding a bit more distinction. Boxing in the child table, vertical lines separating columns, instead of horizontal as in the parent table.
.
Inspired by Tonny's comment, ...
- 693
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.7k
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 ...
19
votes
Accepted
Icons in table head - good practices
In this question you can see several answers about when to use text vs icons.
I would go for all text as icons are not always understandable by everyone in the same way and some of them depend on the ...
- 16.7k
18
votes
What is the best practice for data table cell content alignment
Darkhorse Analytics has one of the easiest to understand explanations for improving tables
The points relevant to alignment of table data are:
Left align text (where appropriate)
Right align numbers ...
- 25.6k
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
14
votes
Is there a better way than zebra stripes
It depends
As a web developer, I decide according to the data a particular table holds. Now why do I decide according to the data the element holds?
Say for example I am having a list of messages ...
- 326
13
votes
How To Display Too Much Data
I'm a bit surprised, that none has suggested the Master-Detail pattern yet.
We have exactly the same problem in several of our own products: Too many columns to fit on a screen, however, every piece ...
- 397
13
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,045
13
votes
Accepted
Should we use check boxes or not and select rows on click
This is an affordance question :-)
The great thing about check boxes is everybody knows what they are, and what you need to do to interact with them.
Row select is not so well known and it certainly ...
- 8,853
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
12
votes
Icons in table head - good practices
I would take into consideration 3 factors:
1. The Icons
How Obvious are the icons? Are they commonly known and used for a single purpose? or you are developing your own icons?
2. The Users
Would ...
- 2,435
12
votes
Accepted
Editable table in material design
If you like to keep the table clean, show only the edit icon on the hovered cell:
You can specify which cells are editable by showing the icon or not.
Keep text selectable:
And add a click handler ...
- 10.5k
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 ...
- 36.3k
10
votes
Material Design data table filtering
If you need complex filter consider creating a separate section. Perhaps a "actions" section on top of the table where users can not just filter but perform other actions to interact or modify the ...
- 271
10
votes
Where should a newly added item go in table?
Another option that is quite common (e.g. Windows Explorer) is to add the user at the current position ignoring the sort position. This avoids the UI jumping around when new items are inserted.
This ...
- 201
9
votes
Need a better layout, so that blank space can be utilized
A little bit cleaner and following @Bergi and @CoDEmanX suggestions.
Original:
When you expand a row, what you have is:
As the ID, First Name and Last Name is common to all the subjects the info is ...
- 16.7k
9
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:...
- 2,020
9
votes
In a static data table, should rows be highlighted on hover?
TL;DR
No, alternate row colors instead.
Long answer:
Alternating row colors (usually white and light green) to make it easier to read lines in wide reports have been used way before computer ...
- 203
9
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 ...
- 396
8
votes
Accepted
Design pattern for sorting / ordering items in card view
When sorting anything either a Vertical or Horizontal list of items is preferred. (but not both)
A vertical list is my personal preference as many devices are built to easily scroll up and down (i.e. ...
- 15.8k
Only top scored, non community-wiki answers of a minimum length are eligible