How to convey "loading" along with an error message

Question

In an desktop application that simultaneously displays media from multiple sources (video-wall), how would you reflect to the user that a specific source is currently unavailable, assuming that the application keeps trying to renew the connection, every few seconds, indefinitely?

If we assume that each media is displayed in its own box or tile, do you think showing a progress-bar or spinner is appropriate along with an error message?

I thought about switching between an error message and spinner every time the application tries to reconnect, but I believe it will look irritating in case several media sources are disconnected at the same time.

Answer 1

You need to be delicate to solve this matter.

Basically what you are trying to do is to tell the users that particular content is not available at the moment due to connectivity problems, but it might become available in the future.

At the same time you don't want to distract them with spinners or changing messages so they could focus on the content/videos that are currently available.

So my approach would be to create a grayish (or whatever color works in your interface, but it has to be something non attention grabbing) overlay over the content that is not available, with perhaps an icon of a clock, say, like this one - http://fortawesome.github.io/Font-Awesome/icon/clock-o/ . Also in subtle color that is non attention grabbing.

Next, I would suggest to show textual explanation when the user moves the mouse over - Then you can display the message "Video not currently available... Reconnecting in 20 seconds..." etc.

This ensures that the user can enjoy the available content without severe visual disruptions and, at the same time, can find out what the situation is with other video when he wants it.

Update

If there are no interactivity possibilities, then, of course, this become way harder to solve in a non visually obtrusive manner.

What I can think of then, is grouping/sorting your videos. First you display the ones which are ready, then under a heading of "Loading..." you display the ones which are still in progress. Once a video loads it moves up to the list of already available videos.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

I would first define a threshold for loading time. Beyond x seconds, your app would display a error message/icon informing the user media cannot be loaded or timed out, but within x seconds, display the loading icon. I would prefer the loading wheel becasue it informs the user that media is loading without explicitly informing the user when it's going to load, something the loading progress bar indicates.

I thought about switching between an error message and spinner every time the application tries to reconnect...

This can be extremely annoying to the users for 2 reasons:

1. This solution is not constructive in suggesting steps the user can take to correct the problem.
2. Constant status change distract user from their main objective, which is to browse the medias.

To resolve this, one possible solution is to display the error message/icon when the loading time threshold has passed and offer user a "refresh" or "reload" icon/button in the box/tile so if user wish, they could try and reload the media.

Answer 3

Having multiple progress bars is probably quite annoying and too detailed. Using spinners is more easily digestible on a Pinterest-like video wall but could be annoying as well.

The ideal solution might be to only display to the user content that is playable immediately. Users will be happier if they first expect/see a small amount of content, then are given more later. This is a classic lesson from behavioral economics: people's satisfaction levels are shaped largely by the status quo they start with. (Citation)

In interfaces like YouTube, where it is not feasible to completely load a video along with pageload, so that the entire thing is ready to play, the solution is buffering. As soon as the user hits play, they can start to see the video, and buffering of the rest happens as they play.

A similar solution tailored to a wall of media might be to at first limit the number of items on the wall to what you know the user can start playing. Then, either present more through infinite scroll or having videos on the wall "bubble up" or otherwise animate in to place. This takes the user from a place where they have immediately playable access to a few videos, and then can find more. This leadins to a feeling of discovery and potentially endless content that is pleasurable, similar to how scrolling through a list of Facebook or Twitter updates is rewarding to users in a small way, even if they don't read everything.

Alternatively, if a user is supposed to have access to every video, but there is an error because of a dropped connection or otherwise unexpected state, just show an error message and let the user know that you'll keep trying to load it for them. Friendly copy like "Oops! Looks like we can't play this right now. Try again in a moment." might help, if you can reasonably suspect that the system will keep trying to renew the connection. Adding a small refresh function might help here too.

You mentioned "video wall" so I tailored my answer to that form of content. If your content is more like a dashboard of generated charts or something, then a progress bar or other method might be more appropriate.