8 façons d'optimiser votre site pour mobile
Lorsque le monde est passé des ordinateurs de bureau aux appareils mobiles, les concepteurs sont devenus encore plus concentrés sur les UX. Bien que l'interface utilisateur joue un rôle important dans la création de conceptions conviviales pour les mobiles, l'expérience utilisateur est devenue tout aussi importante, d'autant plus que nous disposons désormais de davantage de périphériques et que l'expérience utilisateur diffère selon le type d'appareil.
UX est quelque chose qui dépasse les limites du graphisme et de l'esthétique. Tout comme Rahul Varshney, le co-créateur de foster.fm , dit:
Une interface utilisateur sans UX est comme un peintre qui tape de la peinture sur la toile sans réfléchir.
Rahul avait raison avec cette analogie. Vous avez peut-être la version la plus attrayante, la plus conviviale, la plus unique et la plus fonctionnelle de votre site Web, mais si vous ne prenez pas en compte l'expérience mobile, vous ne faites que peindre sans réfléchir.
Alors, qu'est-ce qui distingue une bonne expérience mobile d'une mauvaise expérience? Il n'est pas trop difficile de séparer les composants clés qui constituent une conception hautement efficace, optimisée et axée sur l'utilisateur. Mais voici quelques bonnes pratiques qui devraient vous guider tout au long du processus:
1) Ne pas rejeter mobile-first
Si votre site Web est destiné aux UX mobiles, vous voudrez peut-être briser la tradition en suivant la stratégie «mobile first». Il n'y a pas de mal à adopter cette technique lorsque vous êtes certain que la plupart de vos utilisateurs accéderont à votre site Web via un appareil mobile. Tout comme vues de codemy suggère que la conception de sites Web mobiles n’est pas un créneau, il ya en fait «1,2 milliard d’utilisateurs du Web mobile dans le monde» et ce chiffre ne semble pas diminuer rapidement (il est probable qu’il augmentera dans un avenir proche). Cela peut être un peu difficile au début; mais si vous êtes prêt à mettre votre utilisateur en premier, cela vaut le coup.
Le simple fait que vous ayez pour objectif de concevoir un site Web simple, propre ou axé sur les mobiles ne signifie pas qu’il ne doit pas être sophistiqué. Karimrashid.com est un exemple parfait de la façon dont la simplicité et la sophistication peuvent être combinées pour créer un design propre et réactif, mais élégant.
2) Créer des dispositions fluides
Il y a tout simplement beaucoup trop de tailles d'écran possibles pour choisir celles que vous allez concevoir. Vous devrez créer une mise en page qui s'adapte aussi facilement que possible à tous. Heureusement, les dispositions fluides sont là pour sauver la journée!
Basé sur des pourcentages plutôt que sur des mesures précises comme les pixels, les mises en page fluides sont devenues la norme chez les professionnels du Web. Elles peuvent être délicates, mais s’assurer que le plus grand nombre de personnes possible puisse réellement utiliser votre site en vaut la peine.
3) viser la fonctionnalité
Qu'est-ce qu'une fonctionnalité? C'est ce que vous proposez à vos visiteurs pour faire avancer les choses et le faire rapidement. En fonction de la finalité de votre site Web, tous les outils, tels que les magasins les plus proches, la recherche de produits, les revues de produits ou les convertisseurs de devises, devraient aider les utilisateurs à exécuter leurs «fonctions» plus rapidement.
Purina , un fournisseur de nourriture pour animaux, est un exemple parfait de la façon de faciliter les «fonctions» sur une page Web. La page d'accueil comporte un champ de recherche où vous pouvez rechercher la chose que vous recherchez. Vous trouverez ci-dessous deux colonnes distinctes pour le type d'aliments pour animaux dans lequel elles se spécialisent. Il est facile de naviguer sur l'ensemble du site Web avec des colonnes, des boutons, des outils et des éléments de conception.
4) Identifiez vos utilisateurs
N'essayez pas de devenir un acteur de tous les métiers, car cela peut vous coûter un utilisateur typique, et personne ne le veut. D'abord, découvrez qui sont vos utilisateurs. Déterminez ensuite leur comportement de navigation Web typique. Une fois que c'est mis de côté, découvrez ce qui les motive. Les utilisateurs modernes sont de deux types principaux: ceux qui naviguent sans but en tête et ceux qui cherchent à effectuer une tâche. Chacun de ces groupes nécessiterait des "fonctions" différentes en fonction de leurs besoins.
Il n'est pas difficile de deviner la démographie des utilisateurs du site Web de The Body Shop, car elle laisse des indices sur toute la page. Étant donné que The Body Shop est fortement axé sur les «ingrédients naturels» et l’activisme social, les variations vertes monochromatiques, un slider d’ingrédients naturels, le choix «vert» des images, ainsi que des articles sur les métiers, les promesses et autres événements sociaux sont concept de design bien développé.
5) Toujours rechercher les bibliothèques et les directives du développeur
En fonction de la plate-forme que vous utiliserez, il est essentiel d’examiner attentivement les directives de l’interface utilisateur. Certaines plates-formes offrent plus de flexibilité que d'autres. Quel que soit le cas, certains éléments clés de la marque ou des "signatures" doivent rester.
Un développeur d’applications Apple devrait consulter Directives d'interface utilisateur iOS et suivre les normes Apple en matière de conception de bases, de stratégies de conception, d'éléments d'interface utilisateur, de conception d'icônes / images, etc. Le développeur Android doit tout apprendre sur les composants, le style, avec l'aide du Guide des développeurs Android .
6) Rendre tout le contenu disponible à tous les utilisateurs
Certains concepteurs, au lieu de faire fonctionner tout leur contenu dans des mises en page fluides, choisiront simplement d'en cacher une partie aux utilisateurs mobiles. Parfois, c'est parce que la mise en page est délicate, ou ils ont l'impression qu'il y a trop de contenu pour une mise en page mobile. C'est la mauvaise approche.
Donner aux utilisateurs une version «épurée» de votre site ou de votre application est non seulement injuste pour les utilisateurs mobiles, mais peut aussi se retourner contre vous et vous faire perdre des clients. Vous devrez peut-être simplifier la mise en page à l'extrême, déplacer du contenu vers d'autres écrans pour réduire l'encombrement, ou simplement essayer de mieux organiser tout cela. mais il doit être là .
Comparez la version de bureau du Site de la BBC à la version mobile. Bien qu'il soit plus simple qu'il ne l'était, il met toujours toutes sortes d'informations à l'écran. La version mobile, en revanche, supprime certaines des images (qui sont toujours disponibles dans les articles eux-mêmes), mais conserve tous les titres, simplifiant considérablement l'expérience sur un écran de la taille d'un téléphone.
7) Design pour le toucher
Il est également utile de garder à l’esprit le fait qu’un utilisateur utilisant un appareil mobile utilisera des doigts au lieu de pointeurs de souris conviviaux. Votre conception doit être facile à naviguer avec les doigts de toutes les tailles et de toutes les formes, sachant que tous les appareils mobiles sont désormais à écran tactile. Un utilisateur ne devrait pas avoir à pincer trop ou zoomer pour taper sur quelque chose ou remplir un formulaire ou taper sur un bouton. Les robinets imprécis sont également très courants sur les petits appareils, qui doivent être pris en compte dans la conception avec des entrées tactiles ou des gestes suffisamment importants pour accomplir le travail.
Voici un table tactile par Peter-Paul Koch cela pourrait aider. Notez que les événements tactiles (et autres actions) peuvent varier en fonction de la compatibilité du navigateur et du périphérique.
8) Utiliser des outils de compression
La quantité d’outils disponibles aujourd’hui pour rendre le travail d’un designer moins lourd est insondable. Vous trouverez des compresseurs de script tels que Compresseur HTML ou Gzip compression qui supprimera automatiquement les commentaires inutiles, les espaces blancs ou le code. Minifier CSS et Compresseur CSS et d'autres outils qui vous permettront de concaténer le code CSS et d'améliorer les performances. La compression d'image est également importante. certains qui réduiront la taille de vos fichiers .jpeg et .png tout en conservant la qualité intacte EWWW Image Optimizer , smush.it , optiPNG , et jpegtran .
Voici un exemple de conception de portefeuille très réactive par RyJohnson . Le site Web regorge d'images spectaculaires qui ne sont pas différentes de la version de bureau. Le secret du chargement rapide est sans aucun doute l'optimisation de l'image.
