Ceci est purement pour un site Web mobile qui doit avoir des onglets horizontaux.
La difficulté est qu'il pourrait y avoir 5-7 onglets, 5 étant plus susceptibles. Le texte de chaque onglet est long, ce qui peut entraîner une mauvaise visibilité des onglets.
J'ai du mal à penser à différentes façons et approches pour en faire une bonne expérience pour les utilisateurs mobiles.
Quelqu'un at-il des suggestions pour réaliser cette conception avec ces restrictions à l'esprit?
Il semble que cela puisse également s'appliquer à une navigation principale horizontale pour un site. Brad Frost a plusieurs options pour des systèmes de navigation réactifs , mais les deux suivants semblent les plus appropriés à ce que vous essayez d'accomplir à partir de ses options. Voici ces deux et une troisième approche:
Onglets déroulants
Un moyen populaire de résoudre ce problème consiste à passer des onglets à une liste déroulante .
Onglets empilés
Une autre approche serait de empiler les onglets .
Onglets déroulants
Une autre option qui apparaissait sur les interfaces mobiles est les onglets déroulants.
Je vais juste ajouter un autre exemple;)
Cette interaction est utilisée dans Rookie . J'ai pris le GIF de ce grand article sur les menus hamburger .
Voici un exemple ios de ce que @Matthew a suggéré comme onglets de défilement:
J'ajouterais également que vous pouvez le centrer et l'enrouler sur deux lignes (par exemple, trois éléments sur la ligne supérieure et deux ci-dessous). Vous devrez peut-être apporter de légères modifications à la conception, comme les faire apparaître plus comme des boutons et être facilement cliquables.