153
votes
Accepted
How to display duration (HH:MM) so it isn't confused with clock time
You are right to ask this question. It really depends on who your users are.
In labor-intensive environments, users are often very familiar with the HH:MM notation for duration, so it's OK to use ...
- 40.8k
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 ...
- 7,361
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,428
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
31
votes
What should the sequence be for Download and Delete buttons?
Placing those icons upfront will create confusion and users might take wrong action (clicking on unintended row) because of the repetition.
Think of using the vertical three dots approach and place ...
- 16.2k
31
votes
Grid/table with lots of buttons
There's a similar situation at the Youtube Studio Video Editor that can help you getting ideas, a mix of icons, drop down options menus and interactivity.
Each row has two icons: the select icon on ...
- 17.1k
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 ...
- 32.3k
28
votes
Accepted
How do you indicate that an item is not selectable?
Keeping the checkbox disabled should be alright, if you are concerned about it you can make use of tooltips to explain the user why it is not selectable when he hovers over the field.
Some thoughts ...
- 16.7k
27
votes
Accepted
In a large list, should the filter and search be combined or separated?
When users are filtering a data set (especially large sets), they expect the filter to do its job at all times: the promise of just showing me what fits a specific criteria that I've defined.
Keep ...
- 24.5k
26
votes
How to display duration (HH:MM) so it isn't confused with clock time
A plus sign is sometimes prefixed to the time format indicate offset. It can also imply duration. For example:
+4:00 +10:00 +4:00
+6:00 +0:00 +6:00
- 399
25
votes
Is right click on tables bad UX
I think it is a great idea to use right click to context menu. It is a norm in desktop application and I see no reason for it not to be the case in web interfaces. And many if not all tools from ...
- 1,628
24
votes
How to display duration (HH:MM) so it isn't confused with clock time
Another possibility would be to add a "prime" mark at the end, as is sometimes (often in race times) used. Minutes and seconds would look like 4′33″, so a single prime is minutes, so use 1:30′ for an ...
- 361
23
votes
To use or not to use "Zebra Stripes", or Alternating Row Colors for Tables
Don't. Don't use zebra stripes.
Let me quote Edward Tufte:
Again, this is a solved problem, with examples in Envisioning Information, chapter 3. Strips are merely bureaucratic or designer chartjunk; ...
- 357
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 ...
21
votes
Accepted
Multiple values in one cell in table
Maybe a traditional tabular layout is not right UI approach? You could consider variable height rows so that multiple values appear vertically in a cell, i.e.
- 8,894
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 ...
- 16.7k
21
votes
What should the sequence be for Download and Delete buttons?
I would recommend not to put them directly next to each other at all to prevent mistakes. Downloading and deleting are two very different actions, happening with different frequency. I would make the ...
- 1,642
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 ...
20
votes
Accepted
How do I make a large table from desktop/web look good on mobile?
The natural orientation of a smartphone is portrait, and the natural scroll direction is down, creating a view which is very narrow compared to its possible length. If your table doesn't fit, you ...
- 3,299
18
votes
How to display duration (HH:MM) so it isn't confused with clock time
You can also show the minutes with a smaller font.
On stopwatches, this is done for the seconds or milliseconds.
download bmml source – Wireframes created with Balsamiq Mockups
- 12.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)
--------------------------------------...
- 385
17
votes
Accepted
What should the sequence be for Download and Delete buttons?
There is no hard rule for this and it would be different in every case but I would recommend putting the task that you want your users to perform, or the task they they are likely to perform most, at ...
- 14.2k
16
votes
How to display duration (HH:MM) so it isn't confused with clock time
The international standard ISO 8601 would suggest P04:00 or P4H. Its part on periods, durations or time spans and repetitions, though, is hardly ever followed – and you aren’t using its date format in ...
- 2,500
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 ...
- 3,085
15
votes
How to style table headers?
Headers are essentially metadata and you need some way to indicate that they are separate from your content, but related to it.
I would recommend against lowercase and normal weight text as it will ...
- 8,868
15
votes
Accepted
How to style table headers?
1. Headers serve a different purpose from content
This seems like an obvious statement, but it animates the reason why table headers are emphasized (title case, bold, colored, underlined, etc).
While ...
- 40.8k
14
votes
How to display duration (HH:MM) so it isn't confused with clock time
You could use decimals. So for example:
90 minutes would be 1.5 hours instead of 1:30
3 hours and 45 minutes would be 3.75 instead of 3:45
This format is highly scannable and makes it easier to sum ...
- 157
13
votes
Accepted
When should an 'archived' or deleted row disappear from a table?
I would lean towards suggesting that it should remain until the user leaves the page, or refreshes. It feels like it doesn't detract by having it there after the user performs the 'archive' action.
I'...
- 179
13
votes
Is right click on tables bad UX
It would be good UX for a general UI, but it is bad UX on the web.
Your custom right click menu will block the regular one, what is against the principle of least surprise and possibly against what ...
- 368
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
Only top scored, non community-wiki answers of a minimum length are eligible