Meilleures pratiques pour la navigation sur le Web mobile
La façon dont les gens accèdent à l’information en ligne évolue. Google rapporte que d'ici l'année prochaine (2013), plus de la moitié des visites sur les sites Web proviendront d'appareils mobiles plutôt que de bureaux ou d'ordinateurs portables.
Non seulement le moyen d’accéder au Web évolue, mais les besoins de la plupart des utilisateurs mobiles qui se connectent en ligne avec leur smartphone ou leur appareil portable changent également; devenir plus concentré et orienté vers les tâches.
Les propriétaires de smartphones d'aujourd'hui utilisent leurs téléphones pour effectuer des tâches spécifiques telles que la vérification de l'emplacement des destinations, les horaires de transport en commun et les soldes bancaires. Alors que la navigation sur Internet sur les appareils portables se produit (en particulier lorsque vous êtes dans de longues files d'attente ou que vous attendez un bus), de nombreuses personnes préfèrent surfer sur Internet depuis le confort de leur domicile ou de leur bureau.
L'espace d'écran est limité sur les appareils portables, et les utilisateurs mobiles sont occupés, souvent multi-tâches, lorsqu'ils recherchent des informations en ligne avec un pouce ou un doigt.
Pour ces raisons, la navigation sur les sites mobiles est encore plus cruciale que la navigation sur un site Web traditionnel. Comprendre les questions et les besoins du visiteur typique du site, les limites de leur appareil et ce qui les frustrera est crucial pour une conception de navigation efficace sur un site mobile.
Que demandent les utilisateurs mobiles lorsqu'ils se connectent?
Compuware L'étude de 2011 Ce que les utilisateurs recherchent de Mobile a constaté que 95% des utilisateurs recherchaient des informations locales avec leurs smartphones ou leurs appareils portables. Il serait donc judicieux pour les entreprises de briques et de mortier de mettre en évidence leur navigation sur leur site, leurs horaires et leurs coordonnées sur les sites mobiles.
Mettez-vous dans la peau de l'utilisateur typique du site. Jetez un oeil à l'analyse du trafic mobile. Choisissez les trois ou quatre premières catégories que les utilisateurs recherchent et sélectionnez les noms de catégories correspondant aux recherches les plus courantes.
S'il s'agit d'un site mobile pour une entreprise de briques et de mortier, affichez un bouton de localisation et des informations de contact bien en vue.
Vous pouvez toujours ajouter un lien pour "visiter notre site Web" et les personnes réellement intéressées peuvent regarder une version plus élaborée du site mobile dans le confort de leur bureau ou à la maison avec leur ordinateur portable.
7 Pour tous les hommes connaissent leurs utilisateurs.
Concevoir pour un environnement différent
Outre les paramètres et les distractions de l'environnement externe, les concepteurs Web doivent également évaluer les périphériques eux-mêmes lors de la conception des éléments de navigation.
Un architecte ne préconiserait pas exactement la même conception de bâtiment pour le milieu de la ville, le désert ou la forêt, un bon concepteur Web considère les opportunités et les limites de l'environnement mobile pour créer la navigation la plus utilisable pour la mobilité.
Le problème, bien sûr, est que le concepteur ne sait pas quel appareil l’utilisateur final visite lorsqu’il visite le site, une situation qui peut être résolue à l’aide d’outils de conception réactifs tels que les requêtes CSS pour résoudre les problèmes de contenu adaptable. Qu'il s'agisse de concevoir un site mobile flambant neuf en utilisant la conception adaptative ou d'adapter un site existant pour le mobile, certaines bonnes pratiques restent valables pour la navigation.
Menus de navigation pour le petit écran
Les concepteurs Web savent que les utilisateurs mobiles se comportent différemment lorsqu’ils accèdent au Web sur leurs smartphones et leurs ordinateurs de poche par rapport à leurs ordinateurs de bureau ou portables. Trouver un espace pour la navigation sur un petit écran peut être difficile, mais avec un peu de soin, la conception de la navigation mobile est réalisable.
Avec seulement quatre boutons de navigation et le numéro de réservation gratuit bien en vue, le site mobile de Loews Hotels est convivial et facile à naviguer.
Meilleure pratique 1: réduire le nombre de boutons de menu
Cela peut être difficile lors de la conception d'une version compatible avec les mobiles d'un site Web existant, en particulier de celle qui comporte de nombreux liens dans la conception de bureau. Limitez vos boutons de navigation principaux à cinq ou moins, en ajoutant des menus imbriqués si nécessaire.
Meilleure pratique 2: réduire le nombre de prises
Gardez le nombre d'actions à effectuer sur un appareil mobile au minimum. Moins il y a de clics et de clics pour trouver ce que l'utilisateur recherche le mieux. C'est trop facile de se tromper. Toujours inclure un bouton facile à retrouver: vous ne voulez plus frustrer l'utilisateur.
Meilleure pratique 3: navigation par défilement
Gardez les éléments de navigation les plus importants au sommet. Les appareils mobiles ont des tailles d’écran différentes, alors réfléchissez bien à l’importance de chaque catégorie car ceux qui sont plus bas dans la liste peuvent nécessiter un défilement sur les smartphones avec moins d’espace.
Meilleure pratique 4: boutons empilables
Les utilisateurs mobiles voient votre site en mode portrait plutôt que paysage, comme ils le font sur un ordinateur de bureau. Adaptez votre navigation au Web mobile en le présentant verticalement. Lisez au lieu de traverser. Cela fonctionne mieux pour les sites ne comportant pas plus de cinq catégories dans le menu, et lorsqu'il est peu probable que d'autres catégories soient ajoutées.
Meilleure pratique 5: menu imbriqué
Parfois connue sous le nom de navigation réductible, cette option est idéale pour les sites nécessitant un contenu à l’écran ainsi qu’un menu, et ceux qui s’attendent à ajouter des catégories et des éléments de menu.
Optimisation de la navigation de mobilité pour écran tactile et petits boutons
Les écrans tactiles et les petits boutons signifient de nouvelles considérations pour les concepteurs Web. Les utilisateurs mobiles n'ont pas le luxe d'une souris cliquable pour identifier un petit bouton ou lien de menu. Ils sont à la merci de leurs doigts et de leurs pouces, ce qui signifie qu'ils pointent vers des zones de l'écran avec beaucoup moins de précision que s'ils utilisaient une souris, et peuvent être facilement frustrés si leur tapotement ne produit pas de résultats immédiats.
Les concepteurs Web peuvent faciliter la navigation pour les utilisateurs mobiles en ajoutant plus d'espace autour des liens de menu ou en remplaçant les liens par des boutons pour les catégories de menus.
En agrandissant, il est plus facile de trouver rapidement une zone et de cliquer dessus avec un petit bouton de téléphone ou de la toucher avec un doigt ou un pouce. Comme le doigt moyen nécessite une zone cliquable d'au moins 44 pixels x 44 pixels, les boutons et les zones de navigation peuvent masquer le reste du contenu à l'écran. Cependant, cela peut convenir à l'objectif du site Web et de l'utilisateur, en particulier si le contenu de la page d'accueil est secondaire par rapport aux principaux éléments du menu.
Idéalement, la conception devrait permettre à l’utilisateur de l’écran tactile d’augmenter la taille du bouton de navigation si nécessaire.
Conseils pour l'optimisation
- Définissez le menu en haut ou en bas de l'écran, en fonction de l'objectif principal des utilisateurs du site. S'ils recherchent du contenu et sont susceptibles de défiler, mettre le menu en bas leur donne un autre endroit où aller sur votre site plutôt que de quitter le site pour un moteur de recherche ou un site concurrent.
- Masquer partiellement le menu pour adapter d'autres contenus à l'écran, en révélant le menu complet lorsque les utilisateurs tapent dessus. Cela permet de garder le menu au centre sans effacer le contenu utile.
- Placez un lien Menu en haut de l'écran et ajoutez un bouton de navigation en bas.
- Grand et mince peut être idéal pour les mannequins, mais dans le Web mobile, la navigation courte et large est magnifique. Une navigation courte et large vous aide également lorsque vous avez des titres de catégories plus longs - le texte s'adapte mieux.
- Réduisez la hauteur des images d'en-tête ou remplacez-les par un logo plus petit pour augmenter l'espace de navigation.
- Conservez une cohérence entre les problèmes de marque et de conception en prêtant attention à la typographie, à la couleur et au style des boutons de navigation, au lieu d'utiliser un espace précieux avec des images et des graphiques volumineux.
- Raccourcissez le texte, en particulier sur les boutons de menu et les titres de catégorie. Dans certains cas, cela est extrêmement difficile et un menu empilable avec de la place pour plus de texte sur chaque ligne est une alternative préférable.
- Simplifiez autant que possible. Supprimez autant de pages que possible de la page d'accueil pour ne vous concentrer que sur les quelques articles les plus recherchés par les utilisateurs.
Navigation mobile no-nos
Les utilisateurs mobiles sont occupés, distraits et en déplacement. Ils ne veulent pas de choix dans le choix des boutons et vous ne voulez pas qu’ils soient frustrés et quittent le site en raison de la paralysie des analyses.
Ne leur donne pas beaucoup de choix.
Évitez le défilement horizontal et le vol stationnaire! Les menus de curseur peuvent également être frustrants pour les utilisateurs mobiles. Dans votre quête de simplification et de rationalisation de la navigation, ne pensez pas que vous devez être ennuyeux. La navigation créative n'est pas une mauvaise chose, mais elle doit être intuitive. L'utilisateur devrait pouvoir voir facilement où aller pour trouver rapidement les informations qu'il souhaite.
Conclusion
La nouveauté relative des appareils mobiles en tant que méthode d'accès au Web signifie que la navigation mobile évolue constamment au fur et à mesure que des conceptions différentes sont essayées, modifiées ou rejetées.
Ce qui fonctionne pour un ensemble d'utilisateurs sur un site peut être un désastre avec un site différent, car les informations recherchées par l'utilisateur sont complètement différentes. En outre, le même utilisateur aborde différents sites avec des objectifs différents: un utilisateur mobile qui consulte un site Web d'actualités sur son téléphone souhaite très probablement faire les manchettes et non les informations de contact; c'est précisément ce qu'elle veut quand elle visite le site mobile pour son dentiste ou son coiffeur.
Bien que les éléments de navigation pour un site Web mobile puissent différer d'un site Web traditionnel, l'objectif est le même: les visiteurs Web ont une question lorsqu'ils se connectent. Ou est le magasin? Que se passe-t-il dans le monde? Quel est le solde de mon compte bancaire? Une excellente navigation amène les utilisateurs aux réponses rapidement et simplement.
Répondre à leurs besoins immédiats et ils reviendront, augmentant le trafic vers le site Web, rendant vos clients heureux et conduisant à des références et à une activité de conception de sites Web mobiles pour vous.
Quelles approches de la navigation mobile préférez-vous en tant que concepteur? Que diriez-vous en tant qu'utilisateur? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image internet mobile via Shutterstock.