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
42
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 ...
- 595
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
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, ...
- 2,615
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
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.8k
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
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
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,904
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,445
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 ...
- 11.4k
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
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
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 ...
- 416
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.8k
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,088
8
votes
Accepted
How to add contextual help for tables
Why do you think that adding a question mark icon/button displaying a tooltip on mouseover would look messy? That's exactly how Google Analytics does it and I think it's very straight forward.
In ...
- 601
8
votes
Tabular vs Card-based presentation, which is better for lots of data?
Quantity alone cannot determine the decision. The decision of tabular Vs card format depends also from the use cases, the purpose of the site and the type of data. I outline below advantages and ...
- 7,781
8
votes
Accepted
Trouble creating surveys with iOS elements
I guess it depends who is filling up that survey. If I was designing it for some enterprise solution or for beta testers of my app, I would make it condense and simple without focus on UI/UX, but if I'...
- 250
8
votes
Accepted
Most readable way to display key value pairs
Option A (right aligned keys and left aligned values) makes the most sense in most situations (as always there may be some cases eg RTL languages where you need to adjust)
Depending on the data you ...
- 3,702
8
votes
In a static data table, should rows be highlighted on hover?
Material Design is a framework with guidelines (it's comprehensive but a starting point): Test with users to determine what's best for them.
Have you also considered striped rows (zebra stripes) if ...
- 24.6k
8
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 ...
- 201
8
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 ...
- 24.6k
8
votes
Accepted
How would I go about making these arrows more intuitive and informative?
Standard way to symbolize trend / number change in this kind of chart is with red and green color, for negative and positive. You can place some small arrow next or in the box, as additional visual ...
- 2,666
Only top scored, non community-wiki answers of a minimum length are eligible