En l’espace de 3 ans, l’usage d’Internet sur ordinateur est passé de 90% à 60% ,alors qu’au contraire celui sur mobile a augmenté de 40%. Au vue de cette mode, il est prévu que l’utilisation d’Internet sur mobile dépasse celle sur ordinateur d’ici peu.
Par défaut, la plupart des designers utilisent la version desktop de leur site et la réduisent, la retaille pour la passer en version mobile et rendre leur site responsive. Cependant, cette solution n’est ni faite ni à faire. Plutôt que de simplement réduire votre site, il est beaucoup plus intéressant d’examiner l’importance de l’accès mobile pour votre client et ainsi de définir comment vous pourriez l’optimiser pour leur business.
Si les clients sont principalement des utilisateurs sur ordinateurs, par exemple sur un site permettant un accès à un outil pour une entreprise, il est quasi inutile de faire une version mobile. Mais au contraire, si le site présente une boutique en ligne ou bien si il donne des informations en fonction de l’endroit où l’utilisateur se trouve, alors il sera plus intéressant pour vous d’utiliser une approche mobile first.
Pour toucher le plus de monde possible dans le but de développer votre business, votre site se doit d’être accessible sur la plupart des plates-formes disponibles. Alors faîtes l’effort de définir votre stratégie web mobile.
Le problème est que le webdesign mobile n’en est encore qu’à ses débuts contrairement à celui sur ordinateur. Du coup, il existe beaucoup de variantes, de tailles, de couleurs…
Alors quels sont les bonnes pratiques à retenir pour faire un bon design mobile ?
Avoir du contenu clair et bien ciblé
Beaucoup de personnes utilisent leur mobile lorsqu’elles sont pressées, sur le point de partir… Combiné avec de petits écrans tactiles, elles n’ont pas le temps de chercher leur contenu et doivent avoir un accès direct à l’information.
Lorsque vous faîtes un design mobile, vous devez garder le désordre de côté et veiller à respecter les règles minimalistes. Globalement, chaque page, dont la page d’accueil ne devrait contenir qu’un seul point d’attention. Si votre page comprend des gestes typiques tels qu’un swipe ou un scroll, ne pensez pas que l’utilisateur saura directement quoi faire. Simplifiez lui la tâche. Explicitez toutes les petites fonctionnalités par des petites flèches ou des messages en hover.
Les utilisateurs mobile apprécient toujours les petites attentions qui rende leur expérience plus aisée et fluide.
Garder un menu et une navigation simple
Typiquement, sur un site ordinateur la barre de menu se trouve en haut de la page. Or, sur mobile, avec un écran de petite taille, cela nous fait perdre énormément de place. Pour résoudre à cela, vous pouvez créer un menu accordéon, une icône de menu en haut à droite ou gauche ou autre…
Autre chose qui ne fonctionne pas sur le mobile est les menus composés de sous menus. Il faut savoir garder les choses accessibles rapidement sur mobile. Un client n’a pas à chercher sur quatre niveau son information, il risque de partir après seulement le deuxième clic.
Sur le mobile, on s’attache tout d’abord à l’espace de l’écran. Gardez donc votre design minimal et restez concentré sur le message principal avec lequel vous voulez que votre utilisateur reparte.
Crée une mise en page fluide
Il existe beaucoup de mobiles différents, ce qui correspond à beaucoup de dimensions différentes. Cela peut être tentant de ne faire un design que sur 320 pixels de largeur (dimension de l’iPhone). Mais que cela vous plaise ou non 176, 240, 320, 360, 400-600 sont aussi toutes des largeurs couramment utilisées.
Gardez votre mise en page fluide et flexible va permettre d’assurer un affichage propre sur toutes les tailles différentes d’écran.
Faire un design tactile
Le temps durant lequel nous n’utilisions que le clavier et la souris pour naviguer sur un site web est révolu. Avec l’apparition des smartphones, est venu le temps de la navigation tactile. Réaliser un design tactile demande beaucoup plus de exactitude que le design pour ordinateur. En effet, à la place d’avoir un curseur bien précis, vous devez maintenant vous adapter à toutes formes et tailles de doigts qui ne vont pas interagir de la même manière avec l’écran.
Vous devez donc vous assurez que les éléments cliquables ou qui requièrent une action précise soient assez larges pour éviter de coïncider avec les autres éléments adjacents.
Mais cela ne s’appuie pas seulement sur les boutons. Il reste encore d’anciens mobiles qui utilisent des stylets ou bien encore des touches directionnelles. Il y a beaucoup de mobiles qui ne supportent pas encore javascript. Il y a des utilisateurs qui utilisent une souris sur leur tablette. Mais bien tous ces scénarios sont bien moins fréquents. Vérifiez donc par rapport à votre site l’importance de ces derniers et adaptez vous si besoin.
Garder des formes minimales
Les petits écrans tactiles et les plus petits encore claviers virtuels, dont les touches ne mesurent que 5mm x 5mm, ne sont clairement pas fait pour créer une expérience de saisie aisée. Gardez les formes simples et petites.
Par exemple, prévoyiez un formulaire spécial pour les mobiles. Réduisez le nombre de champs requis au minimum et si possible faîtes des champs pré-remplis. Pour les calendriers, utilisez un calendrier visuel plutôt que de faire remplir le champ manuel par l’utilisateur.
Si les formes sont plus longues que la taille de l’écran, il est important d’indiquer à l’utilisateur sa progression et plus important encore combien ils sont proches de la fin. Cela permettra de le motiver à remplir la tâche demandée.
Autre point sur les formulaire : le positionnement des labels. En effet, il a été prouvé que les utilisateurs remplissaient plus rapidement des formulaires lorsque les labels se trouvaient alignés en haut. Garder le label au dessus du champ permet de le laissez visible à n’importe quel moment. L’utilisateur peut se permettre de scanner les champs à remplir lorsqu’il scrolle sur la page.
Laisser tomber les images
La taille et la vitesse sont les deux performances mesurées les plus importantes pour un site mobile. N’utilisez pas des images pour créer des effets comme des ombres ou des dégradés. Apprenez plutôt les bases des possibilités en CSS et intégrez les dans vos design. Moins il y aura d’effets sur les images mieux ce sera. Même si certains effets de CSS3 ne seront pas disponibles sur certains anciens mobiles, cela n’est pas très grave. Votre site n’a pas besoin d’être parfait au pixel près sur tous les appareils.
Utilisez plutôt des typographies fantaisies plutôt que des images contenant du texte extravagant. Gardez le texte comme du texte. Laissez tomber les images inutiles pour avoir un site rapide au chargement.
Exploiter les particularités spécifiques au mobile
Les appareils mobiles possèdent beaucoup de spécificités que les ordinateurs ne possèdent pas comme le GPS, les capteurs de luminosité, les micros… Comprenez comment utiliser ses particularités pour créer une meilleure expérience mobile sur votre site. Ceci est la partie où vous réfléchissez pour sortir des idées reçues et trouvez de nouvelles manières de faire les choses plus simplement grâce à ce que vous proposent les fonctionnalités mobiles.
En appliquant toutes ses pratiques, vous devriez être capable de créer un design mobile permettant un bonne expérience utilisateur à vos clients. Ainsi, ils seront plus aptes à retourner sur votre site, à n’importe quel moment de la journée, même lors de leurs micro-moments de temps libre, ce qui n’est jamais négligable.
