10 façons d'améliorer l'expérience utilisateur mobile

10 façons d'améliorer l'expérience utilisateur mobile

Avez-vous un site Web mobile? Est-il réactif ou avez-vous utilisé un plugin pour le rendre beau? Convertit-il? Avec l'utilisation d'Internet partout, l'expérience utilisateur de votre site Web mobile (ou UX mobile) devrait recevoir autant d'attention que l'expérience utilisateur de votre site Web de bureau.

Avant de plonger, si vous souhaitez en savoir plus sur l'expérience utilisateur (UX) et d'autres compétences SEO essentielles, vous devriez consulter notre formation SEO complète! Je vous parle simplement du référencement: il vous permet de savoir comment mettre ces compétences en pratique!

Dans cet article, j'aimerais partager 10 choses incontournables concernant Expérience utilisateur (UX) votre site Web mobile. Permettez-moi de faire une différenciation pour commencer. Bien que toutes les choses mentionnées dans cet article s'appliquent également aux tablettes et aux phablets (regardez cela, je déteste le mot), j'ai pensé à mon iPhone lorsque j'écris cet article.

1. Utilisez une conception basée sur les tâches

Concevez votre site Web mobile et sa structure en pensant à l'utilisateur. Il ou elle utilise un téléphone portable. Il / elle est probablement en route vers quoi que ce soit et doit vérifier quelque chose sur votre site Web. Qu'est-ce que ça pourrait être? Réfléchissez un instant aux activités des visiteurs sur votre site Web (consultez Google Analytics, faites preuve de bon sens à propos de votre entreprise ou testez-le ). Décidez des principales tâches pour votre site Web mobile. Et optimisez l'expérience utilisateur mobile pour vous assurer que ceux-ci sont accessibles le plus facilement possible.

David Allfr vous l'a déjà dit. Vous devez faire avancer les choses. Si quelqu'un trouve votre site Web et commence à le parcourir, assurez-vous qu'il peut facilement trouver et compléter ce qu'il voulait faire. Sur leur téléphone portable, il y a probablement beaucoup d'applications qu'ils ont l'habitude d'utiliser. Être en déplacement garantit que la durée d'attention est inférieure à la normale. Les distractions sont partout, pas seulement au téléphone. Concevez votre UX mobile pour vous assurer qu'ils font avancer les choses, avant de passer à d'autres applications à la place.

2. Ajouter un menu collant avec une option de recherche

10 façons d'améliorer l'expérience utilisateur mobile

L'un des principaux éléments de l'UX mobile pour moi est la recherche. Je veux que mon option de recherche soit toujours disponible lors du défilement d'une page, lorsque vous cliquez sur une autre. Le fait est que bien que nous nous efforcions de présenter le site Web le plus simple possible comme mentionné dans la section ci-dessus, il y aura toujours des éléments qui ne rentreront pas aussi facilement. Pour tout ce contenu, j'aimerais pouvoir utiliser une option de recherche mobile.

Si vous êtes un courtier immobilier ou vendez des vêtements en ligne, cette option de recherche pourrait tout aussi bien être l'élément le plus important sur votre page d'accueil mobile. Veuillez afficher cette option de recherche dans la zone de contenu dans ce cas, et la rendre disponible via le menu collant sur d'autres pages.

Une dernière chose à propos de l'expérience utilisateur mobile liée à la recherche: l'option n'est que la première étape. Assurez-vous également que vos pages de résultats de recherche internes sont géniales. L'image de droite est un bel exemple de l'opposé. Ceux-ci doivent être commandés en fonction de leur pertinence, par exemple, sur ordinateur de bureau et sur mobile. Mais ce qui ressort le plus, c'est l'absence de séparation des résultats. Assurez-vous que les résultats individuels peuvent être distingués.

3. Aucun séparateur nécessaire

Après la capture d'écran ci-dessus et ce manque de séparation;cela ne signifie pas que je souhaite que vous utilisiez toutes sortes de séparateurs sur votre site Web pour mobile. Les séparateurs prennent de la place, ce qui pourrait avoir une influence négative sur l'UX mobile. Pensez à des façons de styliser les éléments, afin qu'ils ressemblent tous à des sections distinctes, sans la nécessité d'un séparateur. Utilisez des bordures, des espaces blancs, des titres. Il y a beaucoup de choses qui peuvent être faites pour améliorer cette UX mobile sans ajouter d'éléments de ligne qui prennent juste de la place.

Peut-être que des recommandations comme celle-ci sont toutes un peu plus basées sur l'interface utilisateur (UI). Mais je pense que l'interface utilisateur est peut-être encore plus importante pour UX mobile que pour UX sur un site Web de bureau. Après toutes les histoires sur thumb stretch , il semble logique de mettre l'accent sur l'interface utilisateur. Et juste après cela, il faut se rendre compte qu'avec toutes les différentes tailles d'écran, peut-être que la seule interface utilisateur parfaite pour mobile n'existe pas.

4. Utilisez des formulaires courts

Comme sur votre site Web pour ordinateur, votre site mobile pourrait ou devrait viser la conversion. Acheter des produits ou obtenir un devis pour vos services. S'abonner à votre newsletter ou simplement remplir un formulaire de contact sont toutes des actions qui nécessitent une intervention de l'utilisateur. Sur un téléphone mobile, des formulaires de six pages ruinent l'UX mobile. Si je me souviens encore de votre site Web lorsque je suis de retour au bureau pour travailler sur mon ordinateur de bureau, je pourrais le remplir ( pourrait - c'est un formulaire de six pages!).

Pour une UX mobile optimale, vous souhaitez que les formulaires soient aussi courts que possible. Supprimez toutes les choses que vous souhaitez demander mais dont vous n'avez pas besoin. Bulletin? Juste l'adresse e-mail (avec un champ de saisie type = email). Citation? Nom et adresse e-mail. Boutique? Adresse de livraison adresse de facturation Adresse. Ou au moins une option pour copier l'adresse de livraison à l'adresse de facturation.

5. Diminuez-le

Votre site de bureau semble probablement fantastique à l'aidetoutes les couleurs arc-en-ciel qui étaient disponibles, mais sur votre site Web mobile, l'effet sera négatif. Il y aura moins de concentration. Votre site Web ne doit pas être uniquement en noir et blanc, mais un joli fond blanc, des lettres noires et une ou peut-être deux couleurs de support suffisent pour une meilleure expérience utilisateur mobile.

J'ai trouvé une lecture intéressante sur arrière-plans flous dans les applications: Élégance et raffinement des interfaces mobiles basées sur des arrière-plans flous . Je ne pense pas que nous y soyons encore, mais cela pourrait également fournir de belles options visuelles pour certains sites Web. Dans cette phrase, l'accent est mis sur certain.

6. Zones de frappe des boutons

10 façons d'améliorer l'expérience utilisateur mobile

C'est tellement évident, mais toujours pas commun. Les sites Web mobiles sont généralement parcourus avec un pouce. Google Insights vérifie cela sous Cibles de l'onglet Taille de manière appropriée . Et nous devons également pouvoir cliquer sur les éléments avec ce pouce.

Dans l'article Designing for Mobile Part 3: Visual design , Elaine McVicar ajoute des chiffres à cela:

Idéalement , les boutons doivent être compris entre 44 pixels et 57 pixels sur un écran standard et 88 pixels à 114 pixels sur un écran haute densité (rétine). Cela permet à suffisamment de zone pour que le bout du doigt moyen puisse facilement activer un bouton.

Il y a une chose qui est étroitement liée aux zones touchées par les boutons; les éléments tactiles peuvent être trop proches. C'est ennuyeux de cliquer sur un lien et de se retrouver ailleurs, simplement parce que le lien à côté est trop proche du lien que vous vouliez. Il se trouve également dans Google Page Speed ​​Insights, comme les zones d'accès aux boutons. Cet outil n'est pas le Saint Graal de l'expérience utilisateur mobile, mais si Google peut le tester aussi facilement, pourquoi ne pas le garder à l'esprit lors de la conception de votre site Web mobile, en particulier lors de la conception d'éléments comme un menu mobile ou des liens de pied de page.

7. N'utilisez pas trop de tailles de police

À vrai dire: j'ai presque oublié celle-ci. La taille de la police est vraiment importante pour l'UX mobile. Vous ne pouvez pas simplement utiliser toutes les tailles de police de bureau sur votre site Web mobile également. Il y a deux raisons à cela:

  1. La taille de l'écran du mobile. Vous ne voulez pas que le titre remplisse l'écran; vous voulez vous assurer que l'article commence dans la première vue de la page. Vous ne voulez pas non plus que la police de base (comme votre police de paragraphe) soit trop petite pour être lue sans avoir à pincer et à zoomer.
  2. Vous créerez un gâchis lorsque vous utiliserez plus de trois tailles de police. Les différences de taille seront beaucoup plus visibles. C’est pourquoi je limiterais le nombre de tailles de police à deux, voire trois.

8. Optimiser pour la vitesse

Un autre facteur important pour le bon niveau d'UX mobile est la vitesse. Il existe plusieurs outils pour vérifier la vitesse du site . La plupart du temps, il existe deux principaux domaines d'amélioration. Le premier nous semble toujours évident: l'optimisation d'image. Le simple fait de cacher du contenu est une solution de conception paresseuse . Mais je suis également coupable de cacher des images par exemple, parfois, pour les empêcher de se charger. Vous devez au moins réduire la taille de l'image en utilisant PunyPNG ou JpegMini . En plus de cela, vous devez combiner et réduire les fichiers CSS et JavaScript qui sont chargés. Moins il y a de connexions au serveur à établir, plus votre site Web sera rapide et meilleure sera l'expérience utilisateur mobile.

Cependant, il existe un autre facteur. La vitesse mobile dépend également de la vitesse de votre connexion Internet. Le wifi n'est pas tout autour de nous; la 4G non plus. Parpersonnellement, cela dépend de ma connexion Internet du type de sites Web que je visite. Pinterest sur un réseau de transporteur ne donne généralement pas l'expérience utilisateur souhaitée. Bien que leur recherche ne soit pas correcte, Wikipedia fonctionne bien sur des réseaux comme celui-ci. En fin de compte, la vitesse de connexion n'est pas un facteur pour lequel vous pouvez facilement concevoir votre UX mobile.

9. Basculer vers un site de bureau et vice-versa

Peu importe la qualité de la conception de votre UX mobile, j'aime quand un site Web permet également de basculer vers le site de bureau et vice-versa. Les phablets (il y a encore ce mot) comme l'iPhone 6 Plus permettent facilement les sites de bureau, mais il pourrait être plus pratique d'afficher le site mobile à la place. Certains sites mobiles peuvent manquer de certaines sections auxquelles vous êtes habitué sur la version de bureau du site: une option pour changer vous aidera.

Une alternative est de concevoir une multitude de largeurs de navigateur pour servir les visiteurs de toutes sortes d'appareils comme nous l'avons fait pour yoast.com. Le fait est que le nombre d'appareils mobiles augmente rapidement, tout comme la variation de la largeur du navigateur. Il semble beaucoup de travail de concevoir et de repenser encore et encore toutes les largeurs.

10. Testez à nouveau votre UX mobile. Et encore.

Récemment, nous avons constaté que l'une des pages de notre site Web ne fonctionnait pas comme prévu sur un téléphone mobile. Nous avons constaté que lorsque vous cliquez dessus depuis notre newsletter sur un téléphone mobile, donc pas exprès.

Lorsque vous proposez un site Web réactif à vos visiteurs, vous devez vous assurer que chaque changement sur votre site de bureau est également testé sur la version mobile de votre site. C'est la seule façon de vous assurer que votre site Web mobile est toujours à jour.

Donc, en conclusion, l'expérience utilisateur mobile représente beaucoup de choses. Dans cet article, nous avons discuté de ces 10 façons d'améliorer votre UX mobile:

  1. Utilisez une conception basée sur les tâches
  2. Fournissez un menu collant avec une option de recherche
  3. Pas besoin d'ajouter des séparateurs lorsque les sections sont claires pour commencer
  4. Faites des formulaires aussi courts que possible
  5. N'ajoutez pas trop de couleursdans votre conception
  6. Assurez-vous que les boutons et les liens peuvent être cliqués
  7. N'allez pas trop loin avec les variations de taille de police
  8. Rendez votre site Web aussi rapide que possible
  9. Ajoutez une option pour passer au site de bureau
  10. Testez toutes les modifications apportées à votre site Web sur les appareils mobiles

Dans l'attente de vos conseils!

Ce ne sont que 10 choses que je pense que vous devriez prendre en considération lors de l'optimisation de votre UX mobile. Je suis sûr que vous pouvez en proposer plus, et j'attends vos réflexions sur le sujet avec impatience: quelles autres choses pensez-vous qu'un site Web mobile devrait prendre en compte?

En savoir plus: SEO mobile: le guide ultime

facebook twitter reddit blogger pinterest tumblr mix