Conception réactive : meilleures pratiques et considérations

Les sites Web réactifs sont des sites Web qui s'adaptent à toutes les tailles et résolutions d'écran, non seulement sur ordinateur, mais également sur mobile, tablette et parfois même sur la télévision.

Selon Statista, le trafic mobile était responsable de 52,64 % de tout le trafic mondial en 2017, ce qui signifie qu'un site Web mal optimisé pour les appareils mobiles perd environ la moitié de son trafic . D'ici la fin de 2018, on s'attend à ce que la part du trafic mondial pour les appareils mobiles atteigne 79 %, ce qui représente une augmentation exceptionnelle.

Les entreprises sans site Web mobile prennent du retard à un rythme alarmant, car 8 visiteurs sur 10 cesseront d'interagir avec un site Web qui ne s'affiche pas bien sur leur appareil. Il est beaucoup trop facile pour les utilisateurs d'appuyer sur le bouton de retour et d'essayer une entreprise concurrente à la place, et Google classe même les sites Web qui ne répondent pas plus bas dans leur recherche .

Vous pouvez passer le test adapté aux mobiles de Google ici.

Cela signifie-t-il que le mobile est plus important que le bureau ? Non. 83 % des mobinautes déclarent qu'ils devraient pouvoir poursuivre l'expérience sur ordinateur s'ils le souhaitent.

Jetez un œil à cette version d'eBay optimisée pour les mobiles par rapport à ce à quoi elle ressemblerait si elle n'était pas optimisée pour les mobiles. Envisageriez-vous même la version non optimisée ?

Afin de concevoir des sites Web qui peuvent rivaliser sur l'Internet d'aujourd'hui, les concepteurs de sites Web doivent être des experts en conception de sites Web réactifs (RWD). Par où commencer ?

Une approche mobile d'abord pour la conception Web réactive

La conception Web mobile d'abord signifie concevoir d'abord le site Web mobile et travailler jusqu'à la version de bureau. Il y a un certain nombre de raisons pour lesquelles cette approche fonctionne bien.

1. Les sites Web mobiles ont plus de problèmes d'utilisabilité (cela est principalement dû au manque d'espace sur l'écran), il est donc pratique et plus efficace de se concentrer principalement sur la conception mobile.
2. Il est plus facile de faire évoluer la version mobile que de réduire la version de bureau (encore une fois, en raison du manque d'espace sur les sites Web mobiles).
3. La conception Web axée sur le mobile aide à réévaluer ce qui est visuellement et fonctionnellement nécessaire.

Concevoir un site Web comme un site réactif axé sur les mobiles oblige les concepteurs à se poser un certain nombre de questions importantes, car il y a moins d'espace d'écran avec lequel travailler. Voici les questions qu'il faut se poser :

• Cette fonctionnalité/fonction est-elle vraiment nécessaire ?
• Comment pouvons-nous concevoir quelque chose de minimaliste pour le mobile d'abord qui évoluera ensuite bien pour les ordinateurs de bureau ?
• Cet effet visuel vaut-il le temps qu'il faut pour le charger sur mobile ?
• Quel est l'objectif principal et quels éléments visuels aident les utilisateurs à l'atteindre ?

Nous examinerons quelques exemples de conception de sites Web réactifs dans un instant. Pour l'instant, parlons des appareils, des tailles d'écran et des navigateurs Web pertinents aujourd'hui.

Quelles sont les résolutions d'écran pertinentes pour le Responsive Web Design ?

Voici les résolutions d'écran les plus courantes pour les utilisateurs de mobiles, de tablettes et d'ordinateurs de bureau dans le monde. Comme vous pouvez le constater, il existe une large gamme de résolutions, de sorte que ni les mobiles, ni les tablettes ni les ordinateurs de bureau ne dominent la part de marché en ce moment. Cela nous indique que les concepteurs devraient tous les prendre en compte lorsqu'ils envisagent une conception Web réactive.

• 360 x 640 (petit mobile) : 22,64 %
• 1366x768 (ordinateur portable moyen) : 11,98 %
• 1920 x 1080 (grand bureau) : 7,35 %
• 375 x 667 (mobile moyen) : 5 %
• 1440x900 (ordinateur de bureau moyen) : 3,17 %
• 720 x 1 280 (grand mobile) : 2,74 %

Tout comme pour la répartition des appareils, nous devons segmenter les données par emplacement pour correspondre aux données démographiques des utilisateurs (ou aux données démographiques anticipées des utilisateurs) de notre public cible. Cela vaut également la peine de répondre aux résolutions qui gagnent en popularité, car si certaines tailles d'écran ne sont actuellement pas si courantes, elles pourraient l'être à l'avenir. Cela aidera les concepteurs réactifs à créer une UX à l'épreuve du futur qui fonctionnera même lorsque la part de marché changera.

Par exemple, les résolutions 360x640 (qui correspondent principalement aux appareils Samsung utilisant Android) ont augmenté de 5,43 % au cours de la dernière année. Les concepteurs peuvent utiliser des informations précieuses comme celles-ci pour décider des principaux points d'arrêt réactifs avant de commencer la conception d'un site Web.

Quels navigateurs Web sont populaires aujourd'hui ?

La conception Web réactive consiste à offrir une expérience transparente sur n'importe quel appareil, et comme différents navigateurs Web affichent les pages Web de différentes manières, les sites Web doivent être testés pour s'assurer qu'ils sont compatibles avec une variété de navigateurs Web mobiles et de bureau.

Même si l'adaptation d'un site Web aux points d'arrêt réactifs corrects relève principalement de la responsabilité d'un développeur Web, c'est le concepteur Web qui décide exactement comment un site Web réactif s'adaptera aux différentes tailles d'écran afin de créer une expérience utilisateur optimale.

Voici une répartition mondiale de la part de marché des navigateurs Web pour les mobiles et les ordinateurs de bureau.

• Chrome : 55,04 %
• Safari : 14,86 %
• Navigateur UC : 8,69 %
• Firefox : 5,72 %
• Opéra : 4,03 %
• Internet Explorer : 3,35 %

La conception réactive ne consiste pas seulement à "faire en sorte que tout tienne", il s'agit également de s'adapter aux capacités du matériel de l'appareil et du navigateur Web ainsi qu'à la résolution de l'appareil. Un exemple de cela pourrait être que, alors que Google Chrome prend en charge la propriété CSS overscroll-behavior: (qui définit ce qui se passe lorsque l'utilisateur fait défiler trop fort vers le bord de la fenêtre d'affichage), elle n'est prise en charge dans aucun autre navigateur Web.

Meilleures pratiques de conception réactive

Éliminer les frottements

Comme mentionné précédemment, une approche mobile de la conception Web réactive aidera les concepteurs à évaluer ce qui est vraiment nécessaire pour que l'utilisateur atteigne son objectif principal.

Au fur et à mesure que nous évoluons vers la version tablette (et plus tard la version de bureau), nous pouvons alors commencer à réfléchir aux objectifs secondaires et aux micro-interactions, aux flux d'utilisateurs et aux CTA (appels à l'action) qui rendent ces objectifs d'utilisateur réalisables. Ce qui est plus important, c'est que nous nous concentrons d'abord sur les objectifs principaux de l'utilisateur et éliminons toute friction inutile qui n'aide ni les objectifs principaux ni les objectifs secondaires.

Un objectif principal pourrait être l'achat d'un produit, tandis que l'objectif secondaire pourrait être l'inscription à une newsletter (ce qui pourrait conduire à un achat plus tard).

Voici un excellent exemple d'élimination des frictions : étant donné que les interfaces utilisateur mobiles sont généralement plus difficiles à naviguer, il serait préférable de passer à une page de paiement pour les magasins de commerce électronique mobiles et d'activer uniquement le paiement en plusieurs étapes pour les magasins de commerce électronique de bureau.

Conception pour les pouces

La conception Web réactive est délicate dans le sens où les utilisateurs interagiront avec le site Web de bureau via des clics, mais la version mobile via des tapotements et des balayages. Il y a aussi des différences physiques. Les utilisateurs de bureau ont généralement leurs ordinateurs sur une surface, tandis que les utilisateurs mobiles tiennent leurs appareils dans leurs mains. Ces différences modifient considérablement la façon dont les concepteurs d'interfaces utilisateur mobiles conçoivent les cibles tactiles et d'autres éléments importants de l'interface utilisateur avec lesquels les utilisateurs interagissent.

Jetons un coup d'œil à quelques exemples :

• Les gens s'attendent généralement à ce que la navigation principale du bureau soit en haut ; cependant, sur mobile, il devrait être en bas. Les pouces n'atteignent pas le haut confortablement.
• Les autres éléments interactifs doivent également être faciles d'accès. Cela signifie les garder au centre de l'écran car il est plus difficile pour les pouces d'atteindre les côtés et les coins des écrans des appareils.
• Pour qu'ils puissent être exploités facilement, les liens importants et les CTA doivent avoir une hauteur d'au moins 44px (les cibles de tapotement plus petites sont mauvaises pour la convivialité).

Lecture recommandée : Le guide fondamental de l'utilisabilité mobile.

Tirez parti du matériel natif des appareils mobiles

Le matériel mobile (comme l'appareil photo de l'appareil ou les services GPS) n'est pas spécifiquement réservé aux applications natives, et comme mentionné précédemment, la conception Web réactive ne consiste pas seulement à «faire en sorte que tout s'adapte». Il s'agit également de s'adapter aux capacités de l'appareil. Dans le cas de la conception de sites Web mobiles, étant donné que les appareils mobiles disposent de caméras faciles à utiliser, certaines micro-interactions, telles que la saisie de données, sont en fait plus faciles sur des écrans plus petits tant que les sites Web tirent parti du matériel natif disponible.

Jetons un coup d'œil à quelques exemples :

• Numérisation de carte de crédit/rechargement (car les formulaires sont souvent délicats sur mobile)
• Partage de photos sur les réseaux sociaux, car le média est déjà sur votre appareil
• Authentification à deux facteurs (parce que vous êtes déjà sur votre appareil mobile)
• Vérification rapide des stocks/analyses (car les applications mobiles simplifient l'information)
• Effectuer une recherche sur le Web avec la voix (parce que les mains libres sont plus faciles que de taper)

Rendre les mises en page fluides/adaptatives par défaut

Tous les utilisateurs n'auront pas leur navigateur de bureau maximisé. Cela signifie que si les concepteurs doivent tenir compte des points d'arrêt réactifs des appareils que les utilisateurs utilisent aujourd'hui, ils doivent également tenir compte de ce qui se passe entre ces points d'arrêt.

Les points d'arrêt réactifs doivent être utilisés pour "redistribuer" la mise en page et le contenu sur un nouvel appareil, mais pour tenir compte de toutes les tailles intermédiaires (juste au cas où), les mises en page doivent être autrement fluides (c'est-à-dire qu'elles s'adaptent/s'étirent naturellement au fur et à mesure que le redimensionne le navigateur).

Gardez ces conseils à l'esprit lors de la conception de mises en page fluides/adaptatives :

• Les unités de pourcentage permettront aux éléments d'être fluides.
• La définition de largeurs minimales et maximales peut activer le scénario "mais n'allez pas plus petit/plus grand que cela".
• Les formats d'image SVG peuvent être redimensionnés sans perte de qualité et sont indépendants de la résolution (contrairement aux JPG et PNG, qui ne le sont pas).

N'oubliez pas l'orientation paysage

Nous avons parlé plus tôt de points d'arrêt réactifs spécifiques, mais nous devons également tenir compte du fait que ces fenêtres mobiles peuvent également être affichées en orientation paysage. Bien que la mise en œuvre d'une mise en page fluide rende techniquement le contenu adaptatif, la perte d'une bonne partie de la fenêtre d'affichage portrait peut être un obstacle à la convivialité et à l'accessibilité.

Les navigations sont généralement sûres (parfois elles sont meilleures, en fait, puisque les utilisateurs naviguent généralement en orientation paysage avec deux pouces), mais le défilement devient beaucoup plus difficile, ce qui est moins qu'optimal puisque l'utilisateur doit faire défiler davantage sur le paysage.

Les concepteurs peuvent également envisager de concevoir des points d'arrêt paysagers ; par exemple, les éléments en mosaïque qui s'empilent verticalement sur le mobile peuvent être affichés sous la forme d'un curseur avec des boutons de navigation gauche et droite, ce qui signifie que l'utilisateur n'a pas à faire défiler.

N'oubliez pas que la typographie peut aussi être réactive

Même si les concepteurs UX utilisent généralement des unités de pixels pour concevoir des sites Web, sur le Web réel, un point n'équivaut plus nécessairement à un pixel, car différents appareils ont des résolutions différentes. L'iPhone X, par exemple, a 458 PPI (pixels par pouce), donc là où la taille des pixels devient plus petite, nous sommes en mesure d'obtenir des graphismes plus nets dans le même espace physique (Apple appelle cette technologie "Retina", et Android l'appelle "HDPI").

Cela signifie qu'une taille de police de 16 pixels, par exemple, semblerait plus grande ou plus petite sur certains appareils en fonction de sa résolution. Les développeurs Web utilisent généralement les unités em pour définir les tailles de police, qui sont un type d'unité réactive où 1em est égal à 1 point.

Les outils de transfert de conception tels que Zeplin, Sympli, Marvel et InVision peuvent aider les concepteurs à collaborer avec les développeurs sur des questions qui relèvent d'une responsabilité commune. Alors que les concepteurs exécutent la conception et que les développeurs exécutent le code, dans son ensemble, le flux de travail de conception de produit est un travail d'équipe qui nécessite une communication solide.

Conseils et meilleures pratiques d'optimisation des performances de conception réactive

La conception Web réactive n'est pas seulement une question d'apparence, mais aussi de comment elle agit et se sent. Adapter les sites Web afin qu'ils se chargent plus rapidement sur l'appareil prévu est tout aussi important.

Lazy Load Images et vidéos non vitales

Les images et les vidéos constituent une grande partie de la taille totale de téléchargement d'un site Web, mais vous n'avez pas besoin de les charger toutes en même temps. Il existe deux scénarios dans lesquels le rendu des médias peut être retardé : le contenu sous la ligne de flottaison peut être chargé lorsque l'utilisateur fait défiler sous la ligne de flottaison, et les médias bloquant le rendu ne doivent être téléchargés qu'après le téléchargement de la mise en page et du contenu. Cette pratique est appelée chargement paresseux, où le chargement d'éléments lourds et non importants est retardé pour améliorer les performances de la page.

Chargement conditionnel

Certains éléments du site Web ne sont pas destinés aux utilisateurs mobiles, ou du moins ne valent pas la charge cognitive supplémentaire. Nous voulons que nos sites Web mobiles soient simples, il est donc logique de masquer des éléments dans certains scénarios. Cela étant dit, nous devons nous assurer que nous ne gaspillons pas les ressources du navigateur et la bande passante en chargeant ces éléments même lorsqu'ils sont masqués ; par conséquent, il est recommandé de n'inclure ces éléments que dans certaines conditions.

Encore une fois, un développeur peut y parvenir avec du code ; cependant, les concepteurs peuvent améliorer les performances des pages en communiquant les conditions de quand et où certains éléments doivent et ne doivent pas exister.

Images réactives

Comme mentionné précédemment, certains appareils affichent plus de pixels par pouce, ce qui peut rendre les images floues si elles ne sont pas exportées à la bonne résolution. Selon la résolution de l'appareil, certains nécessiteront des images de taille double (@2x), triple (@3x) et même quadruple (@4x). Les navigateurs Web prennent désormais en charge l'élément <picture> , qui choisit la bonne résolution d'image en fonction de l'appareil.

Les concepteurs qui créent des sites Web réactifs peuvent adapter les images au bon appareil en s'assurant d'exporter à toutes les résolutions utilisées sur les appareils d'aujourd'hui (si vous n'êtes pas sûr, demandez à votre développeur - la communication est essentielle en matière de conception Web réactive).

Conclusion

Le wireframing peut aider à aplanir les plis au début du processus de conception, et cela fonctionne bien lorsque vous adoptez une approche mobile d'abord pour la conception Web réactive. Peut-être y a-t-il un point d'arrêt réactif qui nécessite une attention supplémentaire, ou peut-être un concept qui n'est tout simplement pas efficace en termes de réactivité mobile. Il est préférable de trouver les bosses sur la route le plus tôt possible (c'est-à-dire avant d'ajouter une esthétique visuelle).

Les outils de conception modernes comme Adobe XD, Marvel et InVision permettent aux équipes de tester des prototypes sur de vrais appareils, de discuter des commentaires en contexte et de collaborer généralement en équipe jusqu'à ce que la mise en page fonctionne dans tous les scénarios.

L'utilisation d'un flux de travail UX allégé où la conception réactive est pilotée par des tests et des commentaires internes garantira que l'expérience utilisateur fonctionne de manière transparente sur toutes les plates-formes et résolutions d'écran avant d'être présentée à un utilisateur réel pour la première fois.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques