User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am designing a responsive site that supports landscape orientation. My question is specific to button sizes.
Usually on portrait mode, buttons stretch across the screen. For bigger smartphones however, this stretching might not look aesthically pleasing. Should they be allowed to stretch or should they be their own breakpoint?
I was considering treating them as their own breakpoint and not stretching them. They would be treated similar to alignment in tablets. Any thoughts on handling this?
One solution would be to set a max-width on the content area. If your application is not designed to fully utilize the extra space in landscape mode it might be best to add extra padding or a max width to the content wrapper itself.
In addition you could also consider setting a max-width on the button for landscape mode if setting a max-width on the content wrapper is not an option.
I don't like stretching buttons either. I think this pattern is left over from the early days of trying to handle a new responsive territory.
Mobile is definitely starting to take over and is here to stay but it is still a relatively new space to design for so expect more changes going forward.
Any design you decide to go with will need to be tested with your mobile users because stretching buttons are certainly more noticeable compared to other options and you want your actions to still be discoverable.
I really like the Google approach to responsive material design which pins universal buttons to the corners that expand as needed to show the most desired actions close to your thumb...
As a general principle which can help find a solution to this sort of problem, allowing your content and interaction requirements to define when elements break, rather than arbitrary pixel counts or assumed devices is the best.
Applying that principle to this problem I would say that your buttons should have a size defined by two things:
So, your buttons need not stretch any further than to cover those two points and allowing them to stretch further is not adding anything else useful to the interface and is also detrimental if they become less aesthetically pleasing as a result.
Several factors will play a role in the decision.
From a usability standpoint, with regard to Fitts's Law, buttons should be reasonably large and at the edge of the screen to take advantage of the "infinite edge", the idea that a cursor cannot go beyond the bounds of the monitor. In a mobile setting, however, the cursor is your fingertip and moves through three dimensional space so this is less relevant. Properly responsive sites usually only have one dimension of scrolling however, so the underlying ideas of Fitts still holds. If you put a button at the bottom or the top of the screen, in a fixed overlay or in the scrollable portion, the bottom and the top are still the best place, and should at least accommodate a thumb.
From an aesthetic standpoint, you don't want giant buttons taking up the whole screen. With smaller screens its reasonable to have a button of focus stretch horizontally, but as screens increase in horizontal size, beyond a certain width just seems silly and disproportionate. But you still want access from the edge. Often, mobile interaction is carried out with one hand. If the button can't be reached in a one-handed grasp (it's too small and at the center of the screen), then you may frustrate the user.
So maybe proportionate padding is the answer? Padding increases with the size of the screen, but only to a point so the button is still thumb accessible, assuming this is an important button that the user will be seeking out.
(I've done things like this with javascript before, you just need to play around with the equation that determines and sets the padding from screen dimensions.)
Portrait mode: stretch buttons across screen to fit
Landscape: pick a side of the screen and make a menu that holds the buttons.
Bonus points if the menu is hide-able.
