Do you have an alternative for the segmented controls in iOS? We'll need 4 tabs, medium to big size words, no icons.

You can see an example (not real words) in the image below. It's too tight we need a clean solution. I have one already.

Example enter image description here

Alternative

enter image description here

  • On your alternative option: If you're looking at discoverability and usability on mobile, than those small little dots aren't the best solution to go for. They hide what the other options are, they indicate that there is some kind of horizontal scrollable content and the hitboxes are often smaller than 40-44px (iOS guidelines) – Rick P Aug 9 at 9:55
  • Can you expand on "It's too tight we need a clean solution" as I don't know what you mean by this? Personally, I can't really see anything wrong with the "Abracadabra..." example you've given. – TripeHound Aug 9 at 9:58
  • The words are really big. Zuteilungen, Performance, Positionen, Transaktionen – Giu Vicente Aug 10 at 10:16

I'm not too sure what your context is and how important it is to switch easily between the tabs and what the relation is between them, but you have a few alternatives:

Dropdown

  • Fits all the options in there easily
  • All the options are hidden though and thus not visible at a glance (discoverability)
  • But users are accustomed to the interaction pattern of a dropdown menu

Horizontal tabs

  • Tab menu items that are horizontally scrollable
  • Some options will be hidden as they're off screen and hard to discover
  • It's a less well-established pattern for users and thus has lower discoverability

Vertical tabs

  • Tabs are placed vertically above each other
  • Shows all the options at once
  • Takes up a lot of vertical real estate

Add subnavigation page inbetween

  • Add an inbetween page that shows the tabs as menu options / links
  • Add hierarchy between the pages and back-button to the inbetween page with all the menu options
  • Often used to display a sidebar-menu on mobile e.g. Account/profile-page with all the links to settings, notifications etc.

Consider using synonyms or other words. For example the German word for performance, leistung, is already a few letters shorter. And you could drop the plurals. You can also opt to write words across two lines so you get talles but narrower tabs; squarish buttons are actually easier to press than narrow ones. If a combination of the above fixes the situation, perfect.

  Trans-  |    Zu-    | Leistung |  Posten
  aktion  | teilung |                 |         

If you still can't fit all tabs horizontally or the above solution is rejected for some reason (writers, brand guidelines etc), then you should go for one of 3 solutions depending on the amount of listed items.

few items: horizontally scrolling tabs Scrolling tabs for 4 or 5 items of this size means users can access most tabs with 1 interaction, but if you have 8 or so items, people might have to scroll twice and then tap. If you have a clear priority for one or two items, put those first; it's better for discoverability and it saves clicks. But for the later tabs it gives worse discoverability and speed.

many options: traditional menu Using an expanding menu means you always have 1 'wasted' intereraction to open up the menu, but when it is opened you have about 10~15 options available with the 2nd interaction. And of course you can make this a verticaly scrolling list for even more options but that's far outside the scope of your question. Users should be quite familiar with the general concept of a menu, and you don't risk people overlooking the last tab because they are new to scrolling tabs.

medium options - tabs and menu The final possibility is a bit of a mix. Use 2 or 3 tabs for items with high priority and use a 3rd or 4th button to open a menu. This strikes a balance between speed of access and discoverability. It's also a bit better for clients that aren't very tech savvy because a button is more traditional than a scrolling bar of tabs. The only thing to take in to account is that you need to have a certain amount of items in the menu. Even if you can fit [transaktion|zuteilung|performance|more…] on screen I would instead put only [transaktion|zuteilung|more…] because it will really annoy people that they have to open a menu just to expand 1 button. Ideally you'd have 3 or 4 options in the menu.

There's a few factors to take in to account; discoverability, complexity, current paradigms, amount of required steps, user psychology... so it's hard to say which optiom works best without knowing more about the project, metrics, and customers. But I think the last option is the most safe option; more traditional interaction method, and room for a few more items in the list for future developments.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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