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 ...
- 7,423
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,578
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
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 ...
- 16.9k
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,673
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.9k
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)
--------------------------------------...
- 395
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,465
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
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,138
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 ...
- 12.1k
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
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 ...
- 25k
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 ...
- 436
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.9k
9
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,722
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
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 ...
- 25k
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
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,701
6
votes
How to create a custom textbox with a label and value
I find the approach you present quite clear. I would simply organise the values without adding oblique lines and use some opacity to differentiate the elements.
In the image one of the fields is ...
- 16.9k
6
votes
Accepted
Table headers: uppercase or lowercase, left or center aligned, top or bottom?
Alignment can depend on the data you're displaying, and what you want the user to quickly grasp.
uppercase or lowercase?
Miles Tinker's research work (32 years of research!) looked at legibility of ...
- 25k
6
votes
Accepted
How to best present multiple statuses in a table?
Here are some suggestions that could improve this design:
1- Make the color labels the same width!
This will make it visually more appealing as alignment makes it easier to scan over the page, also ...
- 1,665
6
votes
Accessibility of tables without borders
Does it fail any WCAG criteria?
I don't think it would be a violation of any WCAG rules (surprisingly, I did run through them all in my head trying to think if one applied), but that doesn't mean you ...
- 2,608
6
votes
Accessibility of tables without borders
Borders are only one way of showing that tables are "tables".
Shading
Another way, which I often use, is shading. This is quite common for rows - either two alternate background colors (one ...
6
votes
How to display status for On, Off, Faulty
As it is correlated with the function status: ON / OFF, it's a good choice to show both statuses close to each other as they both indicate the need for action.
But other than that, you should asses ...
- 4,578
Only top scored, non community-wiki answers of a minimum length are eligible