Une meilleure alternative? éclatant

À chaque fois que vous entendez parler de «navigation mobile», quelle est la première chose qui vous vient à l’esprit? Je suppose que ce serait le menu coulissant hamburger. Ce modèle de conception est utilisé depuis les premiers jours de conception dynamique, et bien que beaucoup de choses aient changé depuis, ce modèle en particulier n’a pas changé. Pourquoi?

Comment avons-nous commencé à utiliser la navigation du haut avec le menu hamburger? Y a-t-il une meilleure alternative? Dans cet article, je vais essayer d’explorer ces questions.

Histoire de la navigation supérieure et du Hamburger

Les premières icônes du menu hamburger ont commencé à apparaître dans les années 80. Il a été conçu par Norm Cox pour Xerox Star – la première interface utilisateur graphique au monde. Il a également conçu l'icône de document pour la même interface. Ce morceau d'histoire a été découvert par Geof Allday (qui a effectivement envoyé un courrier électronique à Norm Cox). Vous pouvez lire l'intégralité de la réponse par courriel en cliquant ici . Plus tard, il a été vu sur Windows 1 &
et DOS .

La navigation mobile actuelle – telle que nous la connaissons – a été popularisée par le livre "Responsive Web Design" d'Ethan Marcotte en 2011. Depuis lors, la navigation de pointe et le hamburger sont devenus la norme de l'industrie. .

La taille de l'écran du téléphone mobile a doublé en 10 ans

Depuis l'iPhone d'origine, les ventes pour mobiles ont augmenté année après année . 2019 est la première année où le marché a atteint le point de saturation et les ventes ont commencé à diminuer. Mais cela ne signifie pas que les gens n'utilisent pas de téléphones. D'ici 2020, nous passerons 80% de notre temps sur Internet sur les téléphones mobiles, rapporte Quartz et Ciodive . Comparez cela à 2010. Un quart seulement des utilisateurs d'Internet utilisaient le téléphone.

Avec l'augmentation des ventes de téléphones, la taille de l'écran a également plus que doublé. La taille moyenne de l'écran des smartphones est passée de 3,2 pouces à 5,5 pouces. En 2017, les fabricants d'appareils ont commencé à adopter le format d'image 18: 9 plus grand avec des écrans 18: 9 de 5,7 pouces et 6 pouces. Nous commençons maintenant à voir les écrans 18: 9 de 6 pouces devenir la nouvelle norme dans les segments phares ainsi que dans les segments de prix moyens, car ils ont une surface d'écran supérieure à celle des écrans 16: 9 de 5,5 pouces, XDA Rapports -Developers.

Toutefois, je dirais qu’avec la taille croissante des téléphones, la cartographie a légèrement évolué:

Lorsque les téléphones étaient petits, la plupart des zones étaient facilement accessibles. À mesure que nos écrans grandissaient, la partie supérieure devenait pratiquement impossible à toucher sans régler votre téléphone. Dans l'exemple ci-dessus, nous pouvons voir où se trouve l'écran le plus cher en immobilier. Pourtant, il est souvent négligé sur les pages Web. Comment pouvons-nous résoudre ce problème?

Configuration de navigation inférieure

De temps à autre, une configuration de navigation inférieure apparaît sur le Web. L’idée elle-même est assez simple: déplacez la barre de navigation plus bas .

Le fait de positionner la barre de navigation en bas facilite la tâche des utilisateurs qui cliquent sur l'icône du menu, tandis que les éléments secondaires peuvent être déplacés vers le haut. Fondamentalement, vous changez simplement l'ordre. Les applications mobiles utilisent cette logique avec le motif de la barre de prise. L’idée n’est pas nouvelle en soi, mais elle n’est toujours pas aussi populaire dans la conception Web que dans la conception d’applications.

Ce n’est pas une solution infaillible, car elle soulève quelques questions critiques, mais c’est une alternative valable. Voyons quelques-unes des questions qui pourraient se poser.

Éléments principaux et secondaires

Le haut de l’écran devenant difficile à atteindre, il est préférable de placer les éléments principaux du menu plus près du bas. Mais qu'en est-il des autres choses tout aussi importantes?

Je propose deux idées pour résoudre ce problème:

1. Placer la barre de recherche ou tout élément non principal vers le haut;
2. Les boutons CTA doivent rester au même niveau. en bas à côté des éléments de menu car il s'agit d'un élément essentiel de la navigation.

Certains sites Web offrent de nombreux menus, sous-menus et autres. Naturellement, le défilement sera impliqué. Fonctionnement de la rotation des éléments principaux / secondaires dans ce scénario?

Définir le menu principal et les éléments secondaires (lien de menu, logo, entrée de recherche) ont été corrigés tout en laissant défiler la liste de menus. Ainsi, vos utilisateurs pourront accéder aux éléments essentiels dont ils ont besoin.

Où placez-vous le logo?

Vous craignez peut-être l’emplacement du logo. Il y a deux façons de s'y prendre:

• Placer le logo en bas peut être un peu gênant, cependant, le pouce ne l'obstruera probablement pas. Cela peut être omis, cependant, car nous avons tendance à numériser de haut en bas.
• Une option plus raisonnable est de conserver le logo en haut de la page, mais de ne pas le réparer. Faites-en une partie du contenu pour qu'il disparaisse au fur et à mesure que vous faites défiler. De cette façon, les gens pourront toujours le voir parfaitement.

Comme vous pouvez le constater, j'ai utilisé le libellé de menu dans la structure filaire. Kevin Robinson avait découvert que apposer une étiquette à côté de l'icône augmentait de 75% l'engagement. :

Description du fonctionnement avec le guidon

Certains systèmes d'exploitation et navigateurs ont tendance à utiliser la partie inférieure de l'écran pour leurs propres besoins. Le guidon iOS peut gêner la navigation par le bas. Assurez-vous que la navigation est suffisamment spacieuse pour accueillir la zone de sécurité iOS.

Si vous placez le logo à plat dans Au centre, le lien pourrait entrer en conflit avec la fonctionnalité du guidon.

Les utilisateurs vont-ils s’adapter à ce modèle ou le trouver désorienté?

Tandis que j’écrivais cet article, je me suis demandé si cela se transformerait en une nouvelle conception ou en une simple. amélioration de la convivialité pour les utilisateurs naviguant sur votre site Web. Après tout, selon la loi de Jakob les utilisateurs passent le plus clair de leur temps sur d’autres sites. Cela signifie que les utilisateurs préfèrent que votre site fonctionne de la même manière que tous les autres sites auxquels ils sont déjà habitués.

En guise de contre-argument à la loi de Jakob, je voudrais proposer la loi de Fitts . Il fait valoir que le temps nécessaire pour acquérir une cible est fonction de la distance et de la taille de la cible. Fondamentalement, plus la cible est petite et éloignée, plus le coût de l'interaction est élevé. NN / g a une merveilleuse vidéo qui explique cela plus en détail:

«Une icône de menu pour hamburger inférieur aura un coût d’interaction beaucoup plus faible que l’icône de menu supérieur car elle est plus proche. En plaçant le menu CTA près du pouce, nous permettons à l’utilisateur d’atteindre son objectif final plus rapidement. Les utilisateurs trouveraient-ils la fonctionnalité désorientante si elle réduisait leurs coûts d'interaction? Probablement pas. "

Comment va-t-il s'intégrer au motif de la barre de frappe?

Un motif de barre de frappe répertorie trois à cinq actions de premier niveau les plus courantes lorsque vous cliquez sur une seule ligne. Vous l'avez peut-être vu dans des applications populaires et sur certains sites Web: