: How to balance a tab bar with an even number of elements, one of them being a call-to-action? I have to design a 4 item iOS tab bar. One of the items is a call-to-action button for creating

@Ravi4787994

From a visual point of view, a design doesn't have to be symmetrical to be balanced. Balance has to do with the weight of elements on both sides of an axis (or multiple quadrants). Check this other question for example. Elements with different sizes can still be balanced:



You can also have an even number of elements that have the same size, but use other techniques to emphasize the call to action (color, icon, text). As far as I'm concerned, it's 3rd party apps on the iPhone that use CTA with different sizes. iOS uses the same size for all buttons, right?

From an usability point of view, I'd say it's probably more difficult to tap something that is either surrounded by elements and without enough space between them, or in the end closest to the finger.

Vote Up Vote Down

@Phylliss782

Your example isn't balanced. Your primary action needs to be emphasized, as in the example. For the best UX, I would place it in the right corner so users aren't trying to tap across the other tabs, leading to possible accidental hits. You could give it 40% of your space and give the other three 20% to further support the hierarchy.

In iOS, it's common to place the primary action in middle because Apple's one hardware button format does the same. I don't have any hard research on hand, but as with most things it's less constrained on Android.

Vote Up Vote Down