Le responsive design ne fait pas tout : 4 étapes pour concevoir un site adapté aux utilisateurs mobiles

Lorsque nous abordons le sujet du mobile avec des créateurs de sites web, nous entendons souvent des phrases comme : « Nous avons fait un site responsive, donc il est adapté aux utilisateurs mobiles ».

Si seulement c'était aussi simple que ça…

Les résultats obtenus avec le responsive design sont magnifiques, et c'est probablement le seul moyen pratique de s’adapter aux très nombreuses tailles et résolutions d'écran du monde mobile. Cependant, le responsive design est une technique, et non pas une solution.

Dire que le responsive design résout tous les problèmes rencontrés par vos utilisateurs mobiles, c'est comme dire que posséder un marteau vous permettra de construire une maison.

La plupart des discussions sur le responsive design concernent essentiellement la mise en œuvre de cette technique : le prototypage plutôt que l’utilisation de designs statiques, les stratégies de navigation, la forme des icônes, etc. En d'autres termes, nous nous concentrons sur la façon d'utiliser le marteau... Cet article, sur WebDesignXperts est un excellent exemple.

Mais il est plus important de parler de ce que nous sommes en train de construire avec ce marteau. Modifier le format d’un site qui au départ était prévu uniquement pour les ordinateurs, n’est pas suffisant pour obtenir un résultat entièrement fonctionnel avec des supports mobiles.

Les profils d’usages et les attentes des utilisateurs ne sont pas les mêmes dans le monde du mobile que dans le monde du desktop

Les utilisateurs de Smartphones ont tendance à envoyer des SMS toutes les 5 minutes, ils sont impatients et facilement distraits par ce qui se passe autour d'eux. Les tablettes sont souvent utilisées à la maison, lorsque que l'utilisateur est confortablement assis sur un fauteuil ou devant la télévision. Ce cadre est plus tranquille, mais il vous fait entrer en concurrence avec des émissions de télévision et des films conçus spécialement pour captiver toute l'attention du spectateur.

Un site Web conçu pour les ordinateurs portables ne couvrira pas nécessairement les besoins des utilisateurs d’appareils mobiles, même s’il a été reformaté dans cette optique. Vous devez comprendre comment les gens vont utiliser votre site sur leurs tablettes et leurs Smartphones, et apporter les modifications permettant de rendre ces usages possibles sur votre site. Plutôt que de reformater votre site, vous pourriez bien avoir besoin de repenser les fonctionnalités de base, de manière à offrir des expériences optimales quel que soit le support.

Quelques conseils sur la démarche à adopter

1. Créer des scénarios d’utilisation.

Quelles sont les tâches que vos utilisateurs tentent d’accomplir selon la catégorie de leur appareil mobile ? Quelles sont les plus importantes ? Ont-ils besoin de faire quelque chose avec leur mobile qu’il est impossible de faire avec un ordinateur fixe ? Y a-t-il des fonctionnalités propres aux appareils mobiles dont vous devriez tirer parti (géolocalisation par exemple) ?

2. Bien choisir les éléments à supprimer

Sur les sites web les plus réussis, tous les éléments de la page sont agencés harmonieusement, afin de créer une expérience utilisateur agréable. Le responsive design se base sur une suppression de certains de ces éléments, de manière à ce que le contenu puisse tenir sur un écran plus petit. Cette suppression peut perturber les utilisateurs qui ne trouveront pas toutes les fonctionnalités voulues. Pensez à la façon dont l'utilisateur va accomplir la prochaine tâche, et trouver les fonctionnalités qui ne sont plus visibles. Vous devrez peut-être inclure une rubrique d'aide, ou un menu qui n’était pas nécessaire sur la première version de votre site.

3. Bien réfléchir aux icônes et à la navigabilité du site

Certains sites mobiles ont des designs qui imitent l’aspect et certaines caractéristiques de navigation d’iOS et Android à la fois. A moins que vous ne soyez préparé à servir différentes versions pour chaque système d'exploitation, c'est une erreur de stratégie. Votre conception doit être neutre et facilement compréhensible par les utilisateurs de chaque plateforme. Par exemple, la conception d’icônes ayant des significations contradictoires sur les deux plateformes est à éviter. Pour éviter ce genre de problèmes, le mieux est de placer du texte sous les icônes.

4. Faire participer les utilisateurs dès le début du processus de conception.

Le passage des designs statiques aux wireframes et aux prototypes est une opportunité pour faire les premiers tests. Vous pouvez faire des tests utilisateurs sur les prototypes pour obtenir des retours assez tôt, lorsqu'il est encore simple de changer la navigation et les fonctionnalités du site. Validez les scénarios que vous avez créés dans la première étape. Cela peut vous économiser une grosse quantité de travail en fin de conception.

Source - Crédit photo : Luc Leguay