Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
add comment

2 Answers

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.

share|improve this answer
    
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 May 13 '13 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. –  plainclothes May 13 '13 at 21:51
    
Speaking of UX, you might try your question on UX.SE. –  plainclothes May 13 '13 at 21:52
    
@plainclothes I agree. Go Android :) –  Yisela May 13 '13 at 21:52
add comment

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.

share|improve this answer
    
How is the example not balanced? I may have misunderstood something. –  Johannes May 13 '13 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. –  plainclothes May 13 '13 at 21:13
    
Thanks for the explanation, I had mixed up the jargon in my head! –  Johannes May 14 '13 at 15:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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