1

Let me start by saying that I am a software developer, not a ui/ux designer at all, but in my company I need to cover this role too.

I am developing a desktop software that manages some particular hardware devices.
It is possible to connect these devices to the PC and to start a "real-time connection" with the instrument. While this connection is alive, more functionalities are available.

The main buttons of my software have icons, and the icon for the "Connect" button is a red circle, which (in my mind) reminds of the "REC" button of cameras:

Connect button

Then, on my main window I need to show somehow that a real-time connection is alive. And I did it by placing a blinking red circle in my window corner:

Connection alive

One of the beta tester (one out of a dozen, more or less), however, reported that

The connect button is always red! So I think there is something wrong with my connection

My question is: since only one beta tester reported that interpretation, should I ignore that or my icon is really wrong? If so, what can I do to improve it?

Edit: I know that red has a precise meaning, but in this case it mimics an existing item, i.e. the REC button on cameras and recorders.
Plus, in this case, wouldn't a plain white circle be meaningless or meadleading?

  • When these devices are "connected" is any recording taking place? – Adriano May 10 at 2:51
  • @Adriano not exactly. The PC shows a dashboard with some charts containing data collected from the instrument. And the PC can send some command to control the instrument. Do you have an idea for a more suitable icon? – farfetched May 10 at 6:28
2

I think in your case, and since you are dealing with instruments you must be aware of something:

1- Dealing with instruments consume lots of colors in the system, and I know the need for using the red color. So I think for disconnection it's better to avoid the confusion and use the light gray. It gives the impression of a Disabled Connection.

In general, the red color reports an error or a problem happened. so using the red for disconnection is overwhelming for the user. For this reason, disconnection is a user-driven action which can be represented by gray color. Some people use red color but in systems which not heavily using red color.

2- I think using words are very important which support icons. and in your system, I feel the need for using words are very important. it helps the action to be noticeable and using the word "Connected!" or "Not Connected" is usable and easy to see and recognize. GOOGLE nowadays are moving to implement words instead of icons to make actions clear for the users.

In the attached image I used two samples: Either using cable icon to represent connectivity or using known abstract icons like dots and green tick.

enter image description here

  • 2
    Icons that don't stand are their own are superfluous. (Option2 is far superior. "Option1" shouldn't even be considered an option.) – 習約塔 May 12 at 21:12
  • 1
    I ended up using the words "Connected" and "Not connected" together with the icons. Thank you for your suggestion! – farfetched May 14 at 14:12
  • Perfect! Actually using explicit words is a need for complicated systems. The user can't tolerate too much complication even for simple straight action like connection icon. Best of luck. – Khalil Hanna May 14 at 14:19
0

Red is a color used for warning and displaying errors. Think of red lights, red stop signs and stuff like that.

I think your icon should only be red when something is wrong with the connection, of course a red circle is not enough, you should also provide the current state of the connection "Connection lost", "Connected" etc.

If you want to rely on colors, use green for a working connection and use red for a non working connection/errors.

My question is: since only one beta tester reported that interpretation, should I ignore that or my icon is really wrong?

If you only have 1 tester that means that this one tester makes up 100% of your testing group which means right now 100% of the people that tested your application say that they think your icon looks like an error.

If you aren't sure (which i wouldn't with only one tester), test your application with more people.

I think you can come up with a better icon than a plain circle which provides absolutely nothing for users. Bonus points if you use an icon has two states, one for connected and one for disconnected.

-> if your application is made to record stuff like a screen then you can ignore this because your icon would be really fitting.

  • Hi, thank you for your answer. Only one tester out of a dozen reported that problem, but I don't know if maybe they're the only one who have noticed that! My question was more of a general one. Of course I know the meaning of red icons, but in this particular case it mimics an existing thing, which is the REC button (which used to be a red circle). – farfetched May 8 at 15:21
  • Alright then you can take that hypothesis (Red icon makes users think something is wrong) and test it in an isolated environment, for example you could specifically ask users what they think that icon is displaying, a positive state, a negative state, a neutral state.. just an example but i think you get what i mean. – Pectoralis Major May 8 at 15:24
  • @farfetched Why do you wish to preserve an analogy that clearly does not apply (nothing is being "recorded"). I might not say anything during testing if the equipment appeared to work, but I'd be thinking the developers are idiots (or color blind). Just change the color to green when connection is successful. – 習約塔 May 12 at 1:14
0

I have another question that would help to clarify your case.

  1. Is this button an action-based button?
    Are asking the users if they want the app to perform the "connect" action?
  2. Or it's more of a status flag, that shows the current status of the apparatus?

If your case falls under the no. 2 option, I was thinking to show the status with an icon that might be more broadly understood, as following.

enter image description here

Do you reckon that would help?

  • Why are the cables still shown disconnected in the connected icon? – 習約塔 May 11 at 23:30
  • To allow for recognisability. If you show an icon with the cables connected then the icon won't be recognisable as easily. – Adriano May 11 at 23:58
  • Are you sure it doesn't mean "It is now safe to disconnect"? There are existing icons that properly show cables connected and disconnected. – 習約塔 May 12 at 1:09
  • I see your point, I'll make sure to delete my answer in a bit. – Adriano May 12 at 1:18
  • You could just fix the icons. – 習約塔 May 12 at 1:19
0

If your application is not recording anything, it's not appropriate to use a red circle to represent recording. Rather than attempt to justify preserving an analogy that does not apply, just change the color to green when connection is successful.

As Pectoralis Major mentions, red indicates warnings and errors. Consider preexisting software and hardware. It is very common to use green to represent success and red to represent problems, such as disconnection. Take a look at the router you are currently using to connect to the internet. There's a good chance it uses green to indicate a successful connection.

When you do testing with such a small number of users, you should take all problem reports seriously. The point of initial testing with small numbers of users is to find problems, not confirm success. Consider if you were testing a new drug on a dozen people and one of them dies. It would be ludicrous to ignore the problem because less than 10% of the subjects experienced it. (Side note: Phase 1 drug trials are for safety, not efficacy.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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