UI Design: Button Sizes and Spacing for Mobile
Jul 22, 2021
Does anyone out there have standards for button sizes and spacing for developing Storyline courses for use on mobile? Many of our users access our courses through their phones, so a few years ago we implemented these standards for minimum sizes and spacing between buttons:
Now that Storyline has increased the default resolution, we are looking at updating the numbers. We could just increase the px by 30%, but actually we got these numbers from a website for UI Design for Mobile... these px sizes were not developed for Storyline's original resolution, so it makes no sense to increase them based on the new resolution.
I think it makes more sense to look at Apple's requirements for app design and then convert it to a px size to use in Storyline. However, I am open to anyone else's suggestions! Please let me know of how you handle this issue.
2 Replies
Apple guidelines state 44x44 px but that is the minimum, in practice that is tiny and I would go larger.
Also the recommended spacing is 16px.
Really depends on resolution of the slide and the device resolution, without accounting for the scaling on the screen (unless you still use the classic player and have it fixed), and if you are on high density screens.
I think 30% increase would be good overall.
Thanks Phil! Maybe I will try converting that to an equivalent in Storyline's new default size and see how it operates. I wouldn't mind establishing a minimum and an ideal size, if the 44x44 is inconveniently small. Once I have done some testing, I will update this post for anyone interested.