Pendant près d’une décennie, les concepteurs de sites Web se sont concentrés sur la transition des sites Web vers des conceptions plus réactives, mais beaucoup n’ont pas pris en compte l’augmentation rapide de la taille de l’écran. De 2007 à 2011, la taille de l’écran n’a changé que d’un demi-pouce, puis à la fin de 2011, la taille de l’écran a explosé. Au cours des 3 dernières années, la taille de l’écran moyen d’un smartphone a considérablement augmenté, passant d’une moyenne de 3,5″ à plus de 5″ en diagonale, le plus grand étant l’Asus FonePad 8 avec une taille d’écran de 8″. L’écran supplémentaire l’immobilier est une arme à double tranchant, car il y a plus de place pour afficher du contenu, mais aussi maintenant plus d’espace mort.
La taille compte : de la paume au pouce, la taille des smartphones
Lorsque Apple a lancé son iPhone d’origine et les modèles ultérieurs, y compris l’iPhone 5, leurs concepteurs ont délibérément choisi la taille de leur écran. Il a probablement été choisi pour une raison très simple – il était confortable[i]. Le pouce de l’utilisateur moyen peut facilement atteindre le coin d’un téléphone à la base de sa paume jusqu’au coin le plus éloigné d’un écran de 3,5 pouces. En traduction, une personne pourrait idéalement tenir un iPhone dans sa main droite et atteindre le coin supérieur gauche de l’écran sans forcer ni utiliser sa main gauche.
Alors que les fabricants de smartphones augmentent la taille moyenne de l’écran des smartphones, les consommateurs ne peuvent plus toucher confortablement plus de 10 % de leur écran d’une seule main, ce qui pose un problème pour les concepteurs de sites Web et les développeurs.
La zone morte : ce que les écrans plus grands signifient pour les expériences utilisateur
(Modèles Thumb Zone de Scott Hurff)
Des entreprises telles que Facebook et Microsoft ont déjà identifié le problème de l’espace mort de l’écran tel qu’il est représenté dans leurs applications. Pour Facebook, les fonctions couramment utilisées comme le fil d’actualité, les notifications, les messages et même la navigation principale apparaissent désormais en bas de l’écran sur les smartphones iPhone et Android. Microsoft, avec son Windows Phone, a fait quelque chose que la plupart des autres plates-formes ne font pas encore ; ils ont déplacé les commandes du navigateur vers le bas de l’écran plutôt que de les laisser en haut d’un site Web.
Ce qui m’amène à mon point ; nous savons déjà qu’une « bonne » conception Web réactive s’adapte à l’appareil qui visite le site Web, ne chargeant que le contenu et les ressources nécessaires à l’expérience optimale de cet appareil. Nous devons maintenant reconsidérer la façon dont nous concevons la navigation sur le site Web et ce qui a du sens pour nos utilisateurs. Les sites Web réactifs redimensionnent généralement l’en-tête du site Web et utilisent jQuery pour créer un menu de navigation spécialement dimensionné pour les téléphones mobiles. Compte tenu du fait que les deux types de navigation mobile les plus populaires sont les menus déroulants et hors canevas, cela pose un problème si nos pages cibles principales se trouvent dans l’espace mort, comme les pages de produits ou les fonctionnalités de la plate-forme. Par conséquent, lors de la planification de sites Web réactifs, nous devons tenir compte de la zone morte potentielle près des coins des smartphones et même des zones d’étirement ci-dessus.
5 conseils pour améliorer l’expérience utilisateur des sites Web réactifs
1. Placez les fonctions couramment utilisées dans des zones faciles d’accès
Cela signifie que la navigation et les appels à l’action doivent être éloignés des coins supérieur gauche et inférieur droit d’un écran. Utilisez plutôt ces zones douloureuses pour mettre le bouton de retour du panier ou le logo du site Web pour rentrer à la maison. Ce petit changement pourrait aider les taux de conversion en empêchant les utilisateurs de s’éloigner accidentellement des objectifs de votre site Web.
2. Au-dessus des étiquettes d’entrée par rapport aux étiquettes d’entrée en ligne
Une tendance croissante dans la conception de sites Web consiste à placer des étiquettes d’entrée dans les champs eux-mêmes. Cela maximise le contenu au-dessus de la ligne de flottaison, tout en fournissant un contexte aux utilisateurs. Ou le fait-il ? L’Institut Baymard a un point important que beaucoup d’entre nous négligent; lors de l’utilisation d’étiquettes en ligne, en particulier dans une longue liste de champs de formulaire, les utilisateurs peuvent perdre le contexte de ce qui était censé être entré. Par conséquent, si vous devez utiliser des champs en ligne, utilisez-les sur des formulaires simples comme les entrées d’e-mail et de mot de passe, mais sur les champs de paiement approfondis, il est plus sûr de donner aux utilisateurs plus de contexte pour les entrées avec au-dessus des étiquettes d’entrée[ii].
3. Aller au-delà du chargement conditionnel
Smashing Magazine l’explique le mieux : utiliser les requêtes @media et display:none; les déclarations ne font pas économiser de temps ni de bande passante à vos utilisateurs. Utilisez plutôt des bibliothèques JavaScript comme modernizr pour adapter les sites Web à l’appareil de l’utilisateur.[iii]
4. Lorsque quelqu’un veut acheter quelque chose sur votre site, n’affichez pas de navigation et de distractions inutiles
Sérieusement, je ne saurais trop insister là-dessus. Les paniers d’achat mobiles ont une énorme bataille en ce qui concerne les taux de conversion[iv]. Tout, des temps de chargement au prix, peut affecter la décision d’un utilisateur d’effectuer un achat. Par conséquent, créez votre panier d’achat mobile séparément de la conception du site Web si vous le devez. Supprimez toutes les distractions telles que les publicités, les autres produits et les liens vers les réseaux sociaux. Une fois que l’utilisateur est dans le panier, laissez-le simplement passer à la caisse sans le distraire inutilement.
5. Tester, optimiser, tester, optimiser et répéter
Portez une attention particulière à l’analyse de votre site Web et à la différence entre les utilisateurs de bureau et les utilisateurs de téléphones intelligents. Vous pouvez parfois choisir des modèles à explorer pour déterminer des moyens plus efficaces d’afficher du contenu ou des annonceurs. Lorsque cela est possible, testez A/B les conceptions de sites Web. Même si le réglage est petit, vous pourrez peut-être voir un changement notable dans le comportement des utilisateurs.
Conclusion : les grands écrans de smartphones cassent la conception Web réactive, mais nous pouvons y remédier.
Alors que ces écrans de 5″ et plus font des ravages sur les méthodes traditionnelles de conception de sites Web réactifs, les problèmes qu’ils causent sont assez faciles à surmonter. Concentrez-vous sur la priorisation du contenu pour un affichage et une navigation optimaux sur les téléphones des utilisateurs. Un site Web réactif mal conçu peut non seulement nuire l’expérience d’un utilisateur, mais aussi votre classement sur le placement dans les moteurs de recherche. Cela est particulièrement vrai avec la récente mise à jour d’avril de Google qui proposera des sites adaptés aux mobiles plus haut dans les classements de recherche effectués à partir d’appareils mobiles[v].
En conclusion, la conception pour l’utilisateur ne commence pas seulement par ce qui a l’air bien, mais c’est aussi une expérience formidable.
[i] http://www.businessinsider.com/why-iphone-5-has-4-inch-screen-2012-9
[ii] http://baymard.com/blog/mobile-forms-avoid-inline-labels
[iii] http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
[iv] http://seewhy.com/97-shopping-cart-abandonment-rate-mobile-devices-concern-you/
