Le début d'un bon design commence par le contenu. Pour tirer le meilleur parti d’une UX mobile stellaire, le contenu peut nécessiter quelques modifications et ajustements.
Mais par où commencez-vous? Comment adapter le contenu pour qu'il fonctionne de manière transparente sur les appareils mobiles? Cela commence par réfléchir à la façon dont les utilisateurs interagissent avec des écrans plus petits et à l'impact que cela aura sur ce qu'ils veulent lire (et combien!).
1. Une pensée par écran
Lorsque vous réduisez le contenu pour les appareils mobiles, essayez de planifier les éléments de manière qu’il y en ait un par écran. Même si les téléphones semblent à nouveau être de plus en plus grands, ne soyez pas tenté de stocker beaucoup d’informations à l’écran!
Une seule pensée par écran suffit. Pas plus et vous risquez de submerger l'utilisateur.
Les utilisateurs d'appareils mobiles ont tendance à être multi-utilisateurs. Ils consultent votre site Web tout en parlant à un ami tout en assistant à un match de baseball. En gardant le message et le contenu simple et direct, vous avez une meilleure chance qu'une seule pensée soit communiquée.
Mais à quoi ressemble une pensée? Il s’agit d’un bloc de texte, d’images et d’éléments d’action liés entre eux. Le groupe de contenu doit demander aux utilisateurs de faire un choix: voulez-vous le faire?
2. Prioriser la navigation
Il devrait y avoir une poignée de choses que les utilisateurs ont tendance à faire, ou que vous voulez qu'ils fassent, lorsqu'ils visitent la version mobile (responsive) de votre site Web. Assurez-vous que la navigation est facile à suivre et permet aux utilisateurs d'accéder rapidement à ces éléments.
Même si un menu de dix options de navigation avec plusieurs niveaux peut fonctionner sur votre site de bureau, les utilisateurs mobiles ont souvent plus de temps. Ils n'ont pas l'intention de fouiller le site avant d'avoir trouvé quelque chose.
La navigation doit être simple et rationalisée. Si vous ne savez pas par où commencer, jetez un coup d'œil à vos analyses d'utilisateurs mobiles. Quels sont les trois ou quatre pages les plus visitées? Ces pages correspondent-elles à vos attentes? Vous avez trouvé les éléments de navigation essentiels pour pouvoir ajuster le contenu mobile en conséquence.
3. Pensez comme un moteur de recherche
Ne jouez pas l'algorithme. Créez un contenu de qualité que les utilisateurs veulent lire. Que vous obteniez dix pages vues par jour, voire des millions, vous voulez penser comme un moteur de recherche lorsqu'il s'agit de contenu sur des appareils mobiles. Chaque mot, chaque image et chaque élément de contenu doit être rapide et interrogeable. Mais ne jouez pas l'algorithme. Créez un contenu de qualité que les utilisateurs veulent lire.
En ce qui concerne le mobile, cela pourrait signifier réduire certains éléments de contenu. Par exemple, choisissez plutôt la photo la plus importante au lieu de trois images sur la page d'accueil. N'alourdissez pas votre site mobile; la vitesse du Web et le Wi-Fi s'améliorent constamment, mais certains utilisateurs auront du mal à se connecter et votre site Web doit toujours être accessible.
Vous pouvez vérifier la vitesse des pages mobiles avec cet outil astucieux de Google, qui vous permet de tout optimiser.
4. Agrandissez le texte
Plus petite écrans ne devrait pas signifier plus petit texte. Vous devriez en fait augmenter la taille des points pour rendre le contenu plus facile à lire et à digérer. Jetez un coup d'œil à votre copie de corps et optez pour une taille permettant de 30 à 40 caractères par ligne. (Cela représente environ la moitié de ce qui est recommandé pour les écrans de bureau.)
Il existe également d'autres astuces pour rendre le texte plus lisible sur de petits écrans. Vous pouvez trouver ceux-ci dans un article précédent de Design Shack sur des astuces pour concevoir une meilleure typographie mobile.
5. Rédiger une microcopie utile
Une excellente microcopie - le texte à l'intérieur d'éléments tels que des boutons - peut faire ou défaire le motif. Microcopie peut ajouter de la personnalité et susciter la conception. Il transmet également de nombreuses informations et aide les utilisateurs à se repérer dans la conception.
Sur les appareils mobiles, en particulier, envisagez de faire une microcopie un peu plus grande que la normale et utilisez-la toujours sous forme de formulaire pour aider les utilisateurs à savoir exactement quoi faire.
Pensez aux problèmes courants que vous rencontrez lorsque vous payez pour quelque chose sur votre téléphone, par exemple. Le formulaire peut s'étendre sur plusieurs écrans ou parchemins. La microcopie de guidage peut faciliter beaucoup le remplissage du tout correctement la première fois. (Un élément clé dans la conversion des actions des utilisateurs mobiles.)
6. Supprimer les effets inutiles pour le mobile
Supprimez tout ce dont vous n’avez pas besoin pour les designs mobiles. Les animations en rotation et les fonctions de défilement de la parallaxe ont l’air époustouflant sur les sites Web de bureau, mais peuvent enrayer les versions pour mobiles. Supprimez tout ce dont vous n’avez pas besoin pour les designs mobiles. Vous voulez que tout soit chargé rapidement et de manière transparente; Les animations qui peuvent ou non fonctionner empêchent de se connecter immédiatement à un utilisateur.
Un autre effet que vous pouvez dépouiller? Effets de survol. Il n’existe pas d’état de survol pour les actions tactiles.
Rationalisez l'expérience de l'utilisateur mobile avec une fonctionnalité de prise en main facile à comprendre (pour remplacer le clic) qui offre un retour évident. Vous ne voulez pas que les utilisateurs se demandent si une action a eu lieu; ça devrait toujours être évident.
7. Adapter à l'échelle
Rien n'est plus frustrant que d'atterrir sur un site mobile réactif où tout est minuscule. L’intérêt de la conception mobile est de rendre le site Web plus accessible aux utilisateurs d’appareils plus petits. Vous devez adapter le contenu à cette échelle.
Parfois, adapter le contenu n’est qu’un réarrangement de pièces.
- Les boîtes alignées sur l'écran d'un ordinateur de bureau peuvent être empilées verticalement sur un périphérique mobile.
- Les photos sont recadrées plus carrées ou verticalement en fonction de l'orientation dominante de l'utilisation mobile (verticale).
- Le texte est édité et découpé par souci de concision.
- La navigation est réutilisée et placée dans un endroit différent.
- Les appels à l'action sont transformés en éléments plus gros, presque de la taille d'un écran.
- Tous les boutons et éléments tactiles sont placés dans des emplacements faciles à atteindre, en fonction de la façon dont les utilisateurs tiennent leur téléphone.
Conclusion
Êtes-vous prêt à repenser une partie du contenu de votre site Web? Si vous avez créé un site Web réactif et présumé que tout convertirait les utilisateurs mobiles, il est temps d'évaluer la partie mobile de la conception. Il y a des chances qu'il y ait de la place pour de petits changements de contenu qui peuvent réellement changer la façon dont les utilisateurs interagissent avec la conception.
C'est une partie vitale du processus de conception. Jetez un coup d'œil à vos analyses. Quel pourcentage de votre base d'utilisateurs accède à la conception sur un appareil mobile? Si vous ne modifiez pas leurs besoins, vous risquez d'aliéner une grande partie de votre base d'utilisateurs sans vouloir les offenser.