0

I am designing an interface for sending sms messages

One side is a form to enter data, and next there is a preview of a phone

The user can select to view the platform and also to choose if to see preview of lock-screen or messages app

I am not sure how to change the view:

  1. 2 segment bar [ios-android] [lock screen-messages app]
  2. Segment bar and a dropdown [ios-android] and view in home screen

Any other suggestions?

enter image description here

enter image description here

user110630
  • 61
  • 4
  • Where is this interface to be displayed? On a PC, TV, cell/mobile, car's dashboard, refrigerator, etc.? It may be my ignorance but 1) What's the preview of a phone good for? 2) What do you mean by platform (to view)? 3) What's the preview of the lock-screen good for? Do you have a sketch at hand? – Gerold Broser Mar 05 '23 at 22:55
  • It is a desktop web-app. The preview is for the user to see how the sms message in platform (iOS vs. Android). The iser may receive the message in the context of lock screen, and also via the message app (when clicking the notification) to see how it breaks down to different messages – user110630 Mar 06 '23 at 05:18

1 Answers1

1

2 segment bar (toggle switch) OR Segment bar and a dropdown

Let's look at the bigger picture...

Having two, mutually exclusive options which control do I use?

  • SELECT
  • RADIO BUTTON
  • TOGGLE SWITCH

SELECT: Multiple options, best for over 5 options. May be mutually exclusive or multiple selection.

RADIO BUTTON: 2 - 5, mutually exclusive options.

TOGGLE SWITCH: 2, mutually exclusive, binary options.

The question posed does not have more than five options in any case, so let's compare toggles and radios.

 

TOGGLE SWITCH

"Binary options" describe an ON or OFF state. When there is a single concept that may used or applied, or not, i.e., ON/OFF, ENABLED/DISABLED, ACTIVE/INACTIVE...

It is popular to use the toggle switch control to select between 2 mutually exclusive options but are not binary, such as ANDROID/IOS, APPROVE/REJECT...

In that case, one might use a toggle control:

toggle

However, determining the active state of the property is somewhat ambiguous—is the darker background selected, or is the lighter background select?? Adding multiple "active" cues will mitigate this problem.

 

RADIO BUTTON

A well established convention for mutually exclusive options, whether binary or non-binary, is the radio button:

radio

With radio buttons come decades of familiarity, and simple, clear "active" cues.

If one is concerned with radios looking "old-school" one can "modernize" them without loosing the tried and true cognitive recognition and interpretation:

modern radio

...from Awesome Custom Radio Buttons

bloodyKnuckles
  • 2,655
  • 10
  • 16