Recently, I've observed that most buttons are positioned towards the right-side of screens. And thus, sparked a question about positioning toggle buttons and checkboxes. Would love to hear your thoughts or experiences in designing interfaces for these buttons.

More specifically,

1) Should toggle buttons be placed on the left or right side of the screen? And why so?

2) Should checkbox be placed on the left or right side of the screen? And why so?

enter image description here

Thanks in advance for the input (:

  • can you show a mock up? What are you trying to do? What kind of app is this? – Mike M Nov 28 '17 at 4:03
  • Mock up added to illustrate. I am trying to find out how the positioning of these buttons would affect users. Mainly for toggle buttons, as most of these buttons had been observed to be placed on the right side. These buttons would be used for registration pages of a gaming app. Thanks for replying @MikeM ! Appreciate this a lot – user52504 Nov 28 '17 at 6:22

Its really vary upon different languages like LTR and RTL format Two kind of writing and reading format used : LTR(Left to Right) and RTL(right to left). Urdu/Arabic and Hebrew letter are RTL apart form that worlds all languages are going under LRT.

These above things are may change due to following situations. The concern things is about Cognitive Science and our mind set .whatever may be language (LTR or RTL), we first reads the information then after reading the info we takes action. you can see the example bellow two same page but in different language (English and Hebrew)

enter image description here

So basically as per my Vision, for LTR languages toggle should be on right and for RTL toggle should be on Left

  • Thanks for the feedback and the fine illustration of the info shared. I, too, feel that information should be provided for users before an action so as to allow them to make informed decisions. Would love to hear from you about checkbox placements instead too as most of the designs are observed to have checkboxes on the left side. – user52504 Nov 29 '17 at 3:53

I would put the toggle buttons and checkboxes on the right side of the screen, as we normally read from left to right, so we would see the feature name first, then we will see whether the feature we just read is on or off. This feels smoother than first seeing an on/off state without knowing what is actually on or off.

  • Thanks for the feedback ! But yes, it makes perfect sense for the user experience (or reading experience) to be smoother if the design aligns with the way the users are conditioned to. – user52504 Nov 29 '17 at 3:54

Toggle button positioning depend on the way you handling other form elements if you keeping labels on left side and input element on right side then your toggle button will follow same rule

checkbox will come always on left side.

  • Interestingly, is there a reason for your statement that "Checkbox will come always on left side"? – user52504 Nov 29 '17 at 3:56
  • @user52504 One reason that I think most check boxes are placed on the left side is that since most text is left aligned, the check boxes will be right next to the item it's for, so you can clearly see what you are checking. – Prime_Aqasix Nov 29 '17 at 4:54

I would keep the clickable areas as right ended as possible if the majority of my users are right handed users, may it be RtL or LtR language.

In my experience, forms in mobile are being filled by cookie data most of the times and users are spending limited time in correcting or editing that data.

There is a good possibility of user dropping out when form filling feels like an effort or if the user had to use both hands, especially if the user was on the move.

Always, keep form filling minimal, use minimal fields, use as much auto filling as possible, try to keep all buttons to right (as majority users are right handed - atleast in my case).

  • Great explanation and reminder on how forms should be designed for users along. Thank you so much ! – user52504 Nov 29 '17 at 3:55

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.