0

I have to design a 4 item iOS tab bar. One of the items is a call-to-action button for creating content. Typically, apps have 5 items, so it is natural to place the call-to-action in the middle for balance. This is an example:

enter image description here

How would you maintain balance with an even number of items?

2 Answers 2

4

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:

enter image description here

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.

4
  • I never really put any thought into it, but are there apps out there that allow left/right handed configuration? Perhaps that is something to consider if this is a crucial design element
    – JohnB
    Commented May 13, 2013 at 21:21
  • It should be noted that iOS is not a perfect UX case study. Not that you can't follow their lead based on shear number of users, but it has plenty of form over function flaws. Commented May 13, 2013 at 21:51
  • Speaking of UX, you might try your question on UX.SE. Commented May 13, 2013 at 21:52
  • @plainclothes I agree. Go Android :)
    – Yisela
    Commented May 13, 2013 at 21:52
1

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.

3
  • How is the example not balanced? I may have misunderstood something.
    – Hanna
    Commented May 13, 2013 at 21:08
  • In the sense that the items are not balanced in their weighting: The center item is dominant. Perhaps you meant symmetrical. You can't have one in four items emphasized and maintain a symmetrical layout. That's not a bad thing. Commented May 13, 2013 at 21:13
  • Thanks for the explanation, I had mixed up the jargon in my head!
    – Hanna
    Commented May 14, 2013 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.