1

I'm laying out 5 buttons programmatically on the screen.

So for example, the screen is 1000px wide. I'm dividing 1000 by 5 and get 200px for a single button. Since this is for mobile devices, it can be of any size and I'm having a hard time determine how much padding should be used here from those 200px.

Note: I'm not considering tablets and landscape.

  • 1
    I don't feel as though the value for the padding size should be determined this way - spacing/margins/gutters/vertical-rhythm should be consistent throughout the UI. It's fine if you want the buttons to vary in size depending on the width, but I think the padding should be consistent, imo (i.e the padding size shouldn't be directly proportional to the screen width, even if the button width is) – ESR Jun 25 '18 at 3:12
  • @Akaki Gabisonia can you provide the button names? or one thing you could do is to maintain the same padding for all buttons – NB4 Jun 25 '18 at 5:23
  • @EdmundReed The thing I am concerend about is that originally this buttons are laid out differently. Originally they are 3x2 and much larger. so after transformation they are laid into one row and become smaller so that's why I'm thinking making different padding then original – Akaki Gabisonia Jun 25 '18 at 13:26
0

From my point of view there isn't a single correct answer for that problem. I would recommend to take a look at this Material design guide about Grid customization. There it's slightly described how space between elements affects UX. Long story short:

...The tighter spacing may suggest the images are closely related to one another, so that they are perceived as part of a collection...

...extra space helps each album to be perceived as an individual entity within a collection...

...Don’t make gutters too large, such as the same width as the columns. Too much space doesn’t leave enough room for content and prevents it from appearing unified...

0

A few years ago I read an article explaining the impact of space between physical buttons, found on things like keyboards. If the buttons were too close together people tend to make more mistakes. Making the buttons smaller and adding some space between them increased accuracy. If I remember correctly they suggested 10% of the button size as space between the buttons. I'm assuming that was relative to the height of the buttons. Some of the Apple keyboards have this, I think for that reason.

You could apply a similar principle to your buttons.

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.