Quelle est une bonne alternative aux menus déroulants pour la navigation du site sur écran tactile / appareils mobiles?
Nous sommes en train de repenser notre site Web et l'un des objectifs de conception est de rendre le site plus convivial pour les mobiles/tablettes.
Notre site actuel est très grand et la navigation est quelque peu compliquée. À l'heure actuelle, notre navigation principale est divisée en 8 menus déroulants qui se développent lorsque la souris les survole. Chaque menu contient 5 à 10 éléments.
Lorsque nous remanierons le site, nous aurons probablement un nombre similaire d'éléments de navigation, bien qu'ils puissent être organisés différemment. Cependant, je ne pense pas qu'il serait souhaitable de conserver le format de navigation existant. Le "survol" peut être problématique sur les appareils à écran tactile, et la longue barre de navigation horizontale à partir de laquelle les menus déroulants devraient être très petits pour tenir horizontalement sur un écran de téléphone intelligent. D'un autre côté, une simple liste de liens ou de boutons est également indésirable car il y en aurait beaucoup trop sans moyen de les masquer ou de les développer/réduire.
Nous avons également l'intention d'utiliser une conception réactive (à l'aide de requêtes multimédia CSS) pour adapter notre site aux navigateurs de bureau et mobiles, donc une solution qui pourrait utiliser du code partagé pour les deux environnements est idéale. J'essaie d'éviter d'avoir des sites "de bureau" et "mobiles" séparés.
J'ai quelques idées sur la façon dont nous pouvons gérer cela, mais je ne suis pas sûr d'aimer mes idées. Donc ma question est quelle est une bonne alternative à l'écran tactile et mobile aux menus déroulants pour les sites à navigation compliquée? Des exemples de sites qui mettent bien en œuvre de telles méthodes de navigation seraient également très appréciés.
Dégradez gracieusement votre sous-navigation ou supprimez-la en réitérant son contenu sur les pages d'index.
C'est vrai. Regardez les preuves ci-dessous. Smashing Magazine et The Boston Globe sont deux excellents exemples de conception de sites Web réactifs. Ethan Marcotte lui-même a été impliqué dans la refonte du Boston Globe.
Smashing Magazine: Drop the Subnav
. Il est toujours réitéré en ligne sur la page, il est donc techniquement redondant. Pensez à déplacer vos sous-navigations vers vos pages d'index.
Facteur de forme du bureau
Facteur de forme de la tablette (ish)
Facteur de forme mobile
The Boston Globe: Dégradation de la sous-navigation
Notez que dans cet exemple, la navigation du Boston Globe passe d'une méga-sous-navigation robuste et impressionnante sur le bureau à une sous-navigation plus modérée sur le facteur de forme de la tablette. Notez également que cela va du survol (uniquement possible avec un pointeur de souris), au développement sur clic (nécessaire pour les appareils tactiles). La navigation s'effondre encore sur mobile.
Notez également que les éléments de la sous-navigation sont également présents en ligne sur la page d'index. Dans ce cas, News se décompose en Nation, Politique, etc. Vous pouvez les trouver dans la méga-sous-navigation ainsi que sur la page.
Facteur de forme du bureau
Facteur de forme de la tablette (ish)
Facteur de forme de la tablette (ish) (navigation étendue)
Facteur de forme mobile
