0

I'm working on a project where we, amongst other views, have a grid displaying a list of units around the world and their last given status. Each unit can also have a live connection between itself, a central server and a webpage will display this.

Today, we're indicating that a unit has a live connection by displaying a little rss-icon as seen in this image (blue lamp saying "Running Outhole"): enter image description here

Whenever there's no connection, all we do is remove the rss-icon and slightly change the opacity of the blue lamp (Lamp also changes colors based on a state, regardless of its connection status). The text stays, indicating that whatever value it might have at the moment was the last known status. There's been some debate whether this is a sufficient way of telling the user that the unit is either connected or that the user is looking at historical data.

Ultimately, I guess my questions is whether this form of indicating a live or "not live" connection to the user is sufficient and clear enough?

Improve this question
1

2 Answers 2

Reset to default
3

I think the main thing to focus on is that live connection is not static (it's a flow of ddata), so it should not be presented in a form of static picture. Instead, you should use an animated icon, letting user know, that the connection status is constantly checked.

The icon animation should be minimal, especially if you have a dashboard with a lot of these e.g. you can blink the dot in the rss-like icon green twice every some seconds.

Regarding color coding, I would personally prefer using street lights colors - green for connection that is live, red for dead one and orange when connecting/trying to reconnect.

By the way, for reconnecting (which is also a process in time) you should also use animation. You can also consider short confirmation of the connection establishment in a form of displaying another information "Connected!" on the label for a while (exclamation mark communicates success in this case).

Here's my idea:

Connection status

Improve this answer
2
  • Thanks for your suggestions! I might not have been clear enough when explaining; the colors have nothing to do with the connection state. They represent events on the unit. I.e. Something is wrong, emergency stop (Typically colored red). So, the main focus here is the connection signal only. However, I like your ideas on the short animations in the different cases! :)
    – Nicklas Pouey-Winger
    Commented Feb 12, 2014 at 13:28
  • 1
    Have in mind you can still use the label colors for that - these are white in my example, I only focus on the color of the "orb" I used or any icon you use for that. You should just make sure the contrasts in each case will still keep both icon and its backround label easily legible.
    – Dominik Oslizlo
    Commented Feb 12, 2014 at 13:42
0

An app I built some years ago also had a list of units.

whether this form of indicating a live or "not live" connection to the user is sufficient and clear enough?

If it's intuitive for the user, then yes. So it depends on the user.

There I did several things to make it pretty but intuitive for different kinds of users, such as hands-on on-site technicians (see 1) or new users (see 2) or powerusers (see 3+4)

  1. Unit icon: indicate mode deployed or closed
  2. Unit subtext: says "Connected via XY" or "Not reachable".
  3. Globe on the right: shown if connectable via internet.
  4. Not shown here is a Wi-Fi icon next to the Globe if the unit is detected nearby and can be connected to directly if the user wants.

To connect, the user just taps. A menu with other operations is hidden (intentionally) behind a long-tap.

enter image description here

Improve this answer

Your Answer

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

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