La navigation via les écrans de smartphone ou de supports mobiles, comme les tablettes, nécessite une réflexion particulière quant à l’organisation et la présentation de vos pages internet.

On parle là de mobile design, et plus seulement de webdesign.

Voici donc 8 principes fondamentaux qui doivent vous guider pour toute action de mobile design.

1. Limitez votre barre de navigation

Plus l’écran est petit, plus l’espace utilisé coûte cher.

Si un menu large est bienvenu sur un ordinateur de bureau, il s’avèrera inutilement encombrant pour un smartphone. Ce n’est pas pour autant une raison pour se priver de menu.

L’option la plus populaire ces dernières années est la présentation en « hamburger »  : trois lignes apparaissent à l’écran, qui se déroulent ensuite sous forme de menu à la demande de l’utilisateur.

Vous pouvez bien sûr tenter d’autres méthodes mais prenez garde à ne pas trop dérouter les utilisateurs avec des modèles qu’ils ne décrypteront pas et qui ne leur permettront pas de retrouver votre menu.

2. Gardez les zones les plus importantes à portée de doigt

Comment utilisez-vous votre écran tactile  ? La plupart du temps, c’est le pouce qui sert à naviguer, à changer d’écran, à cliquer…

Et même si les écrans se sont élargis ces dernières années, les zones les plus utiles, celles avec lesquelles il reste le plus simple d’interagir, demeurent au centre du rectangle.

C’est là que vous placerez vos éléments les plus essentiels, ou les informations les plus pertinentes. Les bordures, les parties hautes et basses de l’écran, seront réservées à des outils moins importants pour vous (et pour vos clients).

3. Optimisez vos fichiers

Les internautes sont encore plus pressés sur smartphone que sur ordinateur. Améliorez leur expérience de navigation (et conservez leur attention) en construisant des pages qui se chargeront rapidement.

La taille des images a une incidence directe  : n’installez pas sur votre serveur des fichiers trop lourds. Ils n’ont pas besoin d’être d’aussi bonne qualité que pour une impression, par exemple.

Il existe des utilitaires qui optimisent automatiquement chaque fichier image pour les réduire pour une utilisation web  : utilisez-les  !

4. Un petit lien pour vous, une grande aide pour l’utilisateur

Il existe une astuce toute simple pour faciliter la vie des utilisateurs  : rendre votre numéro de téléphone cliquable.

Ainsi, depuis leur smartphone, ils n’ont plus besoin de tenter de copier-coller votre contact, ou de le retenir. Ils n’ont plus qu’à appuyer dessus pour vous joindre, comme ils le font déjà pour vous envoyer un mail.

De même, vous pouvez ajouter un lien Google Map sous votre adresse, pour guider plus rapidement les gens vers vous.

Ces petits services ne vous coûteront rien mais pourront vous rapporter gros  !

5. Pensez responsive

Ce n’est pas la première fois que ce sujet est évoqué ici  : aujourd’hui, un site web se doit d’être responsive.

Cela implique de réfléchir à l’ordre dans lequel seront présentés les différents éléments, au format des images pour qu’elles s’adaptent à la taille de l’écran, à la suppression de certains effets qui ne sont pas indispensables (notamment les vidéos ou le JavaScript).

Pensez systématiquement à l’utilisation sur mobile lorsque vous préparez votre site internet.

6. Oubliez les pop-ups

Les pop-ups sont souvent jugées indésirables sur internet. Elles deviennent très désagréables sur un smartphone. Au point que Google pénalise les sites qui les utilisent.

Vous êtes peut-être très attaché à ces petites fenêtres publicitaires qui s’ouvrent pour vendre vos produits, mais réfléchissez à d’autres techniques pour obtenir les mêmes résultats sur les mobiles.

Des bons call-to-action judicieusement insérés pourront bien être tout aussi efficaces  !

7. Utilisez des formulaires plus courts

Même si les claviers des smartphones se sont grandement améliorés ces dernières années, leur utilisation reste souvent hasardeuse.

Que celui qui ne s’est jamais battu avec la correction automatique me jette son téléphone  !

Par conséquent, quand vient l’heure de remplir un formulaire, certains utilisateurs peuvent hésiter. Surtout si ce formulaire comprend de nombreux champs.

Vous avez deux options  :

• Soit vous réduisez le formulaire à son strict minimum en retenant uniquement les informations qui vous sont réellement nécessaires ;
• Soit vous divisez le formulaire en plusieurs écrans, pour qu’il semble moins impressionnant. Dans ce cas, une petite astuce pour récupérer même les internautes qui se lassent  : demandez-leur leur email en premier. Vous pourrez ainsi toujours les relancer s’ils s’arrêtent en cours de route  !

8. Utilisez des blocs dépliables

Vous commencez à connaître la musique du mobile design  : après le menu accordéon, voici le contenu accordéon.

Le concept  : vous n’indiquez que les en-têtes de vos différentes parties à l’écran, en laissant le soin à l’utilisateur de « déplier » le contenu qui l’intéresse.

Il n’est ainsi pas obligé de faire défiler une longue page avant de pouvoir lire l’article qui le concerne. Et peut-être que de voir tous ces autres titres l’inspirera au passage…

Un internaute satisfait de son expérience sur votre site sera beaucoup plus enclin à faire appel à vous.

Une raison de plus, si vous en avez besoin, pour que sa visite se fasse dans les meilleures conditions possibles, quel que soit le chemin qu’il prend pour arriver jusqu’à vous  !

Rédigé par Mélanie De Coster