3

I'm creating a section in an app that includes a toggle switch. Initially, I used the same name as the section for the toggle label, but I started wondering if that might be too repetitive for the user.

I noticed that in some cases, like on Xiaomi WiFi configurations, the Wi-Fi toggle only displays the word "Wi-Fi" as the label, and for the title of the section too. Although I started questioning myself why it's not used Wi-Fi in the title and "Enable Wi-Fi" as the label of toggle switch.

In other sections, like Bluetooth the title and toggle label are also the same.

Given these variations, I would like to know what would be the best practice for naming toggle labels. Would it be more appropriate to use only the section name, as I did initially, or perhaps to use something like "Enable [function name]" or "Show [function]"?

Thank you in advance for your help and suggestions.

Xiaomi Wifi Toggle Switch

Toggle switch for enabling function in

3 Answers 3

2

perhaps to use something like "Enable [function name]" or "Show [function]"?

The one you arrived to is the correct answer.

The Xiaomi screen fails to adhere to basic UX and UI principles and doesn't make much sense. When designing a UI, you're creating a dialogue with the user where the UI guides them through a flow. The Xiaomi UI, on the other hand, is like a dialogue with a poorly designed bot. Labeling a section as "Wi-Fi" should imply actions related to Wi-Fi, rather than repeating the title of the section which is already understood by the user

2
  • Thank you so much! Your explanation made a lot of sense to me. Sometimes, when I research existing references in the market, I end up even more confused about whether I made the right decision. But clearly, your answer has helped me. I really appreciate it! May 5, 2023 at 11:52
  • if this or anotehr answer is teh correct one, please mark it as correct so the question is closed and doesn't reappear every day
    – Devin
    May 5, 2023 at 19:02
1

From my point of view there are two questions

  • how to handle title and label (with same name)?
  • how to label toggle switches?

How to label toggle switches? The toggle switch is the representation of a physical switch. The function of a switch is to turn something on or off. This is quite clear to the user. Therefor I would only label it to tell the user what is turned on or off – in your case this would be 'Wi-Fi'. If you use a verb it might sometimes be confusing because this suggests an action. But the action is different depending on the actual status (enable WiFi when it is off and disable WiFi when it is on). In this case it is also unclear if the 'enable' or 'disable' label represent the action when the user clicks on the switch or if it is the status of the switch.

How to handle title and label of toggle? What I see often and I find it very clear is that the title is the title and the label of the switch at the same time. This way you would get rid of the duplication of the label. Another solution would be to change the title in something like 'Wi-Fi settings'.

0

Lose the title - it's not adding any value. 'Wi-fi' as the legend for the toggle switch is fine, but make it so that enabling / disabling the switch shows / hides (or disables) the associated controls.

The toggle switch combines a visual indication of state with the legend describing what it does, so 'Enable wi-fi' or 'Disable wi-fi' is unnecessary repetition.

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.