31

We have a requirement to have a table of data update in real-time. New records will get added over time, as well as amendments on a cell by cell basis.

However if a user changes the sort order, or changes the criteria for the table we no longer update the table.

What would be an elegant way of indicating to the user whether the table is updating live, or whether it is essentially offline and won't be updated any longer?

Has anybody seen any examples of solving this problem?

Improve this question
7
  • 15
    Why does changing the sort order or changing the criteria for the table make the real time update disabled?
    – SteveD
    Jan 3, 2017 at 16:31
  • 1
    Good question. It is a bit of a compromise, as the real time updates come in via one channel, whilst the advanced search and ordering are processed via Elasticsearch. When we receive the real time updates, we would have to calculate the sort order and whether the updated record is valid against all of the search criteria. We decided it was a fair compromise, to have real time updates only affecting the default view. Open to suggestions though...
    – Andrew Rimmer
    Jan 3, 2017 at 16:37
  • 4
    Have you asked your users what they expect?
    – SteveD
    Jan 3, 2017 at 16:44
  • 7
    Looking at this from the outside, I agree this sounds clumsy. Your technical compromise is also compromising the user experience.
    – SteveD
    Jan 3, 2017 at 16:59
  • 2
    The basic way I see this in real life is to have a UI element with a flashing red dot and the word 'Live' in it. Once they interact with the table, turn the light off and change the text to 'Click here to restart live feed'.
    – SGR
    Jan 4, 2017 at 9:21

10 Answers 10

Reset to default
9

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:

Automatic updates are disabled due to your search parameters. Click here to refresh

And you can also display a last updated at... additionally.

Improve this answer
1
  • Underrated answer, +1 - The most clear way of letting a user know exactly what is going on.
    – Yates
    Jan 5, 2017 at 13:38
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 table.
  • If the table is sorted clicking the button might show, or not, the new elements in the table.
    • If they didn't appear because they didn't belong to the sorting, a message explaining it might help the user understand why they don't show.
    • If you can't include the new elements in the sorting even if they would belong, then redirect the user to the default sort.
Improve this answer
9
  • 2
    I like this idea. You could also show a "X new items to display. Click here to show them." alert, so that the user knows when new data (matching their filter) is available.
    – XtraSimplicity
    Jan 3, 2017 at 19:47
  • 1
    @XtraSimplicity I agree. This would be a similar pattern to how Twitter handles new tweets and should be well understood by most users
    – justin
    Jan 3, 2017 at 22:11
  • 4
    I just remembered that this is also how SO works, when an answer is posted whilst you're adding an answer/comment etc. :)
    – XtraSimplicity
    Jan 4, 2017 at 5:36
  • 1
    And potentially you could side-step this message in the "unsorted/unfiltered" state and insert the new elements immediately.
    – TripeHound
    Jan 4, 2017 at 17:18
  • 2
    I like this option because it doesn't move any data without the user explicitly asking for the data to move. I hate sites that move things around on me.
    – SethWhite
    Jan 4, 2017 at 23:15
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 timestamp. The (2 mins ago) helps specially when the connection is bad. You can even turn the text red if the latency is above a threshold and was expected to be fast.

Patricio's idea of highlight the changes lines for a brief time is also great.

Improve this answer
1
  • 1
    I can imagine expanding it to say either ' - updating live' or ' - live updates paused due to filtering or sort', with a link to reset the filter/sort and return to live updates in second case. What I appreciate about Lucas' solution is that whether the table is updating or not is curently a hidden state, and he chose to expose it to user.
    – Tomáš Kafka
    Jan 4, 2017 at 16:56
4

Looking at this from the users perspective - if I can perform a re-sort and I can perform changes to the tables criteria, I might still expect the table to update live, and I certainly don't know about nor care about your technical architecture limitations.

If your users share this view then you might need to enhance your solution, because I doubt your users would appreciate seeing messaging that tells them the table is no longer updating live because they simply re-sorted the table e.g. you would definitely need to tell them when live updating is no longer working, and ideally you would need to explain why, as well as explain how to re-enable the live updating.

Improve this answer
3
  • 2
    It sounds like they would either have to reimplement or repurpose parts of Elasticsearch to process the updates. They could re-do the query, but Elasticsearch probably doesn't index the new data for a few seconds to a few minutes, which would make the updates less real-time. It sounds like an acceptable compromise. It's better to release working software than to agonize over getting everything 100% perfect.
    – Jehan
    Jan 3, 2017 at 19:29
  • @Jehan I guess it all depends on how serious they are about the user experience, i.e. if they look at this from top down (the customer expectation) or if they look at this from bottom up (the development time and cost). Obviously you always need to balance both, but great user experiences depend on the company's priorities.
    – SteveD
    Jan 4, 2017 at 10:15
  • It's plausible that the solution could take a long time to code. Depending on what their priorities are, that time may be better spent elsewhere. Prioritizing resources to produce the most useful product within the timeframe and budget IS "being serious about the user experience".
    – Jehan
    Jan 4, 2017 at 18:35
2

You can put the new elements of the table remarked with a different color.

The duration of the remarked elements could be of 5 seconds (if the update very fast). If the update is not fast, you can leave the last element remarked. Also, you can put the timestamp of the last update.

Improve this answer
2
  • 1
    Maybe I could have worded the question better. We already highlight what row or cells have been updated. The question is with regards to indicating to the user whether the table is updating in real-time, or whether due to custom criteria will not receive any updates (it is essentially offline).
    – Andrew Rimmer
    Jan 3, 2017 at 16:46
  • 1
    Color is a very bad conveyor of information
    – downrep_nation
    Jan 4, 2017 at 16:15
2

I'd use semaphore style icons and/or texts indicating as follows:

  1. Online, updating: Red light icon, text "Busy".
  2. Online, not updating (still allows further real-time updates): Green light icon, text "Idle" or "Ready".
  3. Offline (no more real-time updates): Gray/Off light icon, text "Offline".

Notice that using text might bring some extra work regarding i18n.

I've seen indicators like these in software like WinZip or HeidiSQL and they are very intuitive.

Improve this answer
1

A material-design sort of way would be this: yes, this

Improve this answer
0

I would like to see 2 "leds", one red and one green (for offline and online mode). And the one that is active will bright and the other one will be dark.

Or something like this?

Improve this answer
2
-1

I would use Facebook approach for informing the user about updating/loading data. You could use the placeholder bar in places where it is updating. This way even if individual fields are still updating or slower connection the user will more likely know about it.

Improve this answer
-1

Would it be feasible to update the whole table so that you can maintain search query, sort order, and even page number?

You can provide two options at the top of the page such as:

Automatic table refresh: On | Off

Refresh interval: Live | 1 minute | 2 minutes | 5 minutes | 10 minutes
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.