106
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 an action button which can push them in the right direction. A button with something like "Rephrase your search" might work in this case.
It doesn't make ...
102
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 done in more than one way).
A study was done in 2008 that looked at how effective zebra striping is on tables, and it drew some interesting conclusions.
The ...
42
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 there are no results is purely an artefact of a not so good UX.
Example :
40
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 lines up and what goes with what.
It is too easy for me to look at a column on one side of a row, then to look at what I think is the opposite side of the same ...
33
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 at Jason's excellent question.
And there are many excellent answers, but I smell a meta-topic that we all seem to skirt around yet I think is worth unpacking.
...
33
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 notification with an option or link for the user to go to the new item/user:
Your table would be shifted anyway, especially if the user is added in before the current ...
28
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 placing the buttons on the left side is somewhat counter-flow.
3 small action buttons on the right-hand side of each row
Pros:
Buttons are easily accessible. ...
27
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-headings so that they are obviously part of the expanded row rather looking like the start of a new table.
23
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 the button calls.
Second solution:
Why not trying pages instead of "load more" like gmail form Google.
Note:
The "load more" and "select all" functions as ...
21
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, here's some indented examples, for your consideration:
21
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 the table and in control of the table update.
If the table is not sorted then the "2 new elements, click to update" button will add those 2 elements to the ...
20
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 results that they weren't looking for. Sometimes this takes the form of guessing at other searches they might have meant, Other times it's just putting ...
19
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's context.
What I would advice in your case is what Google Material says not to do in this note:
Don't.
Do not combine text labels with icons. Use either ...
18
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)
-----------------------------------------------------
|. |. |. |.
-----------------------------------------------------
This helps a lot. Prints will have the ...
17
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 (where appropriate)
Align titles with data
Resize columns to data
14
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 rendered in a tabular form, I tend to highlight rows for the messages say that are unread, or say I've another table with tasks listed, so I highlight the tasks ...
13
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 of information will be relevant in some use-case.
Actually, we decided to do, what you(r boss) ruled out: Cutting the default number of visible columns to ...
13
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 card layout will help the user to read more easily.
Time spent on each record: It basically correlated with the data you are showing. If user spends time ...
13
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 isn't blindingly obvious in the way that check boxes are, although the row select interaction is easily learned.
Row select can have its challenging ...
12
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 you say the users are "power users"? Or they come from an average technical background? Maybe their skills are even weak?
3.The Usage / The Context
How often ...
12
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 on the edit icon itself:
I would recommend not using inline editing, since column widths can be small and not easy to edit. Use a pop-up/-over or modal or ...
11
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 information visible at a time, reducing scrolling or paging. Here’re some ways to do that:
Progressive disclosure. You’ve already done that by moving some fields to ...
10
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 value separated by x) then align by a separator.
CSS for this would be something like text-align: 'x' center;
(Reference: Web typography book)
10
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 table.
Here is how Airtable does filter for complex spreadsheets. Some visual design improvements could be done, though.
Here is another example, from Toggl. ...
10
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 goes back to the question whether sorting is a state or a noun.
9
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 repeated in each row.
One way to prevent repeating those common fields, and not change the table layout is to use a single field which represents several ...
9
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 displays.
If that table had alternating colors to beging with, there would be no need for highliting the row when hovering over it.
Above: Green bar continuous ...
9
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 screen. That way the space available for the expanded data was less limited and didn't cause as many visual issues, like pushing content off the screen or having ...
8
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. mouse wheel, smartphones, etc.) among other reasons.
Sorting Cards in a Grid
First of all, this is a great question so go ahead and vote it up now.
Laying ...
8
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 fact there's a variant that looks fancier for YouTube analytics, but is less obvious to users. There you simply see the tooltip on mouseover on the whole table ...
Only top voted, non community-wiki answers of a minimum length are eligible