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 ...
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 study ...
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.
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 ...
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 ...
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.
Left align is basically the default for Left to Right languages just because all content will line up; this is a powerful tool for readability. Generally stick with left aligning unless there's good reason not to.
The exception, as you notice, is numbers. Here's a little blurb by Christian Heilmann:
I chatted quickly with Luke Wroblewski about it (one ...
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.
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
Buttons are easily accessible. ...
I think of 2 possible solutions.
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.
Why not trying pages instead of "load more" like gmail form Google.
The "load more" and "select all" functions as ...
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:
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 ...
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 ...
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:
Do not combine text labels with icons. ...
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 ...
Background color is convention. This (hidden) rule will be learned by user soon. But I also recommend to show tooltip when user tries to edit (clicks) read-only cell. Such explicit message prevents guessing or abusing on imaginary non-working functionality.
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
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 ...
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 ...
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 ...
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 ...
I guess it depends on what you want to do with it, and how often you imagine it would be used.
Solution 1: Badges
One way would be to add a badge-like indicator to the sorting:
download bmml source – Wireframes created with Balsamiq Mockups
You will need to consider not only the display, but the actual interaction for manipulating it. How do you ...
Users will notice.
Interfaces that display the same information in different ways increases the cognitive load placed upon the user which makes the experience inefficient.
download bmml source – Wireframes created with Balsamiq Mockups
Allowing the user's eye to track vertically along a continuous line is a visual guide you provide which tells them ...
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 ...
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.
As @DA01 pointed, there should be some visual difference to perceive statistics data better.
It could be something like pictured. The advantage is you didn't break the table structure, no additional columns needed.
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 ...
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 ...
A little bit cleaner and following @Bergi and @CoDEmanX suggestions.
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 ...
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)