1

Scrollable Tab Bar...

scrolling tabs

...or 'More' button?

more button

Which is more user-friendly?

I am new to mobile design and don't have a device myself so I could not say which is more used.

I'm targeting Android, iOS, and Windows Phone. I will have 8-10 tabs at the most. I don't want to have a sidebar menu because of performance issues with my last build.

  • Second. Look at Facebook and Pocket for iPhone – Sashko Valyus Aug 6 '14 at 15:02
1

You should use a "more" button to provide additional menu options.

You should also really look at your navigation structure and figure out why you need so many options! 8-10 seems overly excessive.

Apple: The iOS Human Interface Guidelines call out a minimum button size of 44x44 pixels, which equates to roughly 7mm. Pushing a left/right button onto the menu would introduce a much smaller hit target, which would likely frustrate users (especially those with larger fingers).

enter image description here

iOS also makes a 5 tab limit recommendation in the Tab Bars section of the UI Elements section, and specifically calls for a "more" button:

enter image description here

Displays no more than five tabs at one time on iPhone (if there are more tabs, the tab bar displays four of them and adds the More tab, which reveals the additional tabs in a list)

Microsoft: goes into greater detail in the Design library for Windows Phone. . As described in the Interactions and usability with Windows Phone section: a 9mm square is the ideal touch target size; where smaller hit target heights are warranted, the minimum target size is 7mm; a minimum spacing of 2mm between elements.

enter image description here

The recommended touch target size is greater than or equal to 9 mm square. Use this for controls that support the majority of tasks.

If space is severely constrained, you can use a minimum touch target size of 7 mm, as long as the width is much larger.

Nine millimeters is a number determined by hundreds of hours of user testing, and represents the lowest average error rate (or the ratio of false taps to the total number of taps) for both discrete and serial tasks. A 9 mm minimum touch target size can limit error rate to as little as 1.6 percent.

The minimum touch target size is 7 mm. Use this for controls that are infrequently used or controls that are wide enough (greater than or equal to 15 mm), and only when too much height limits the design.

These target sizes would clearly be difficult to achieve with the small left/right buttons.

The Windows Phone App Bar (the bar at the bottom) actually supports scrolling out of the box. But the guidelines specifically call our limiting your buttons to 5 or less, to avoid scrolling:

Avoid using more than five menu items on an Application Bar because it will force the user to scroll.

Google: recommends similar sizing in the Android Design documentation. Touchable UI components are suggested to be laid out along 48dp units, as described in the Metrics and Grids section, which translate to a physical size of about 9mm (with some variability due to differences in screen density).

enter image description here

Again, we clearly see that hit size recommendations would call to avoid the left/right buttons in a menu.

While I did not find any specific recommendation for button counts the precedence for "more" is clearly established in several commonly used applications within the Android ecosphere. You can read more about the Action Bars and perhaps find a recommendation I did not.

  • Thanks for the response. I realized that Apple promotes the 'More' tab option. I was just making sure this was a solid multi-platform practice that Android and Windows users would be familiar with as well. As this will be deployed via Phonegap I'm using Ionic CSS for the tabs. – user3783608 Aug 6 '14 at 21:29
0

I would go for the scrolling tab bar, assuming you can swish left or right, with 10 items this would allow the user to access menu items more quickly than pressing right 3 times to get to the 10th item.

0

On Android the design guidelines specify a navigation drawer for your situation, if you use fragments instead of activities there will not be a performance issue. If you are really dead set against navigation drawer, then I would just go with the standard on iOS, which is no more than 5 tabs, with the fifth tab being a more tab if necessary. (I would use this iOS standard for both platforms).

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.