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 ...
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,548
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 ...
Aaron's user avatar
  • 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 ...
aly.i.ux's user avatar
  • 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-...
Jim's user avatar
  • 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 ...
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

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, ...
bloodyKnuckles's user avatar
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
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 ...
Alvaro's user avatar
  • 16.8k
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
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,105
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 ...
SteveD's user avatar
  • 8,914
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
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 ...
UX Labs's user avatar
  • 2,455
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 ...
jazZRo's user avatar
  • 11.8k
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 ...
Michael Zuschlag's user avatar
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 ...
Matt Costa's user avatar
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

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

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
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 ...
Voo's user avatar
  • 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 ...
Alvaro's user avatar
  • 16.8k
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 ...
scunliffe's user avatar
  • 3,712
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 ...
Daniel Slowacek's user avatar
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 ...
DesignerAnalyst's user avatar
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'...
pingDino's user avatar
  • 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 ...
Mike M's user avatar
  • 24.7k
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 ...
Tulains Córdova's user avatar
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 ...
xul's user avatar
  • 2,676

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