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 ...
user avatar
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 ...
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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-...
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 ...
user avatar
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, ...
user avatar
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 ...
user avatar
  • 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 ...
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 ...
user avatar
  • 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 ...
user avatar
  • 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) --------------------------------------...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
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 ...
user avatar
  • 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 ...
user avatar
  • 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 ...
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 ...
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 ...
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 ...
user avatar
  • 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:...
user avatar
  • 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 ...
user avatar
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 ...
user avatar
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. ...
user avatar
  • 15.8k

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