Contraintes de conception de l'expérience utilisateur mobile, meilleures pratiques et collaboration avec les développeurs

Nous pouvons obtenir de meilleures expériences utilisateur en suivant les meilleures pratiques de conception UX mobile, en comprenant les contraintes et en facilitant une relation de travail solide avec les développeurs.

Qu'est-ce que la conception UX mobile ?

Un article récent sur TechCrunch a souligné que le commerce électronique mobile représentait près d'un tiers de toutes les ventes en ligne pendant la période des vacances de Thanksgiving en 2018, et Digital Trends a rapporté en 2017 que 5 milliards de personnes dans le monde ont désormais un appareil mobile. Google a également annoncé que l'indexation mobile d'abord est désormais utilisée pour plus de la moitié des pages Web dans ses résultats de recherche.

Les gens dépendent chaque jour des appareils mobiles pour les communications, le commerce électronique, la consommation de contenu, le travail, les opérations bancaires, les directions et, de plus en plus, comme seul appareil informatique. De plus, ils utilisent une variété d'appareils tels que les téléphones portables, les montres intelligentes, les tablettes, les phablets, les appareils portables et les ordinateurs portables hybrides.

La conception de l'expérience utilisateur mobile (UX) fait référence à la conception d'expériences positives lors de l'utilisation d'appareils mobiles et de dispositifs portables, et d'applications ou de services exécutés sur ces appareils… La conception UX mobile se concentre fortement sur l'efficacité et la découvrabilité. - Fondation de conception d'interaction

Pour les concepteurs UX, ces tendances des appareils mobiles représentent à la fois des défis et des opportunités. D'une part, nous devons tenir compte de la variété des dispositifs et des façons dont ils sont utilisés. D'autre part, cela ouvre un tout nouvel ensemble de domaines d'intérêt dans la conception UX, ce qui signifie créer des expériences positives pour une toute nouvelle génération d'utilisateurs.

Meilleures pratiques pour la conception d'UX mobiles

La conception UX mobile est délicate. Comme indiqué précédemment, il y a tellement de choses que nous devons prendre en compte, y compris la liste croissante d'appareils mobiles, la façon dont les gens interagissent avec eux et le fait que les gens veulent des expériences cohérentes et agréables sur tous les types d'appareils.

Les 25 astuces de conception d'expérience utilisateur mobile de Google

En 2015, Google a publié 25 meilleures pratiques de conception d'UX mobiles basées sur des recherches internes. Ces conseils ont été récemment mis à jour pour les mettre à jour. L'auteur inclut également un PDF téléchargeable des 25 conseils qu'il est agréable de garder à portée de main pour tout projet UX mobile.

Directives d'interface humaine d'Apple

Une autre excellente ressource à garder à portée de main est les directives d'interface humaine d'Apple pour la conception mobile. Ils sont faciles à lire avec une belle mise en page et parsemés de meilleures pratiques, de conseils et des principes de conception d'Apple. Pour les concepteurs UX mobiles, ces directives sont une excellente ressource pour offrir des expériences utilisateur de haute qualité.

Meilleures pratiques UX mobiles supplémentaires

Voici quelques bonnes pratiques de conception UX mobiles qui ne sont peut-être pas aussi connues que celles de Google, mais qui sont tout aussi importantes à prendre en compte par les concepteurs mobiles.

• Recherche UX . À un certain moment, nous pouvons nous sentir enclins à nous lancer directement dans des maquettes ou des prototypes, cependant, faire d'abord une recherche UX appropriée est quelque chose qui ne peut être sous-estimé. Rappelez-vous toujours que "vous n'êtes pas votre utilisateur" et qu'une expérience utilisateur positive repose sur une recherche UX approfondie dans tous les cas. Voici le guide complet d'Adobe sur les méthodes de recherche UX pour plus de références.
• Encombrement . Nous avons tous connu l'anxiété d'un bureau encombré - imaginez-le sur un appareil mobile ! Chaque bouton, image, élément de contenu ajouté, etc. rend les choses encore plus compliquées. C'est une bonne idée de se débarrasser de tout ce qui n'est pas absolument nécessaire dans une interface utilisateur mobile. Un bon conseil est de rechercher le minimalisme, mais pas au péril d'une bonne convivialité. Cela peut souvent être réalisé en donnant la priorité à une action principale sur chaque écran.
• Prioriser . Il y a une tendance à essayer d'ajouter autant de fonctionnalités que possible. Nous pensons que laisser quelque chose de côté créera en quelque sorte moins d'expérience pour les utilisateurs. Au contraire, concentrez-vous sur les fonctionnalités en fonction des objectifs principaux et affinez la conception en analysant les fonctionnalités les plus utilisées, puis efforcez-vous de rendre ces fonctionnalités à la fois intuitives et agréables.
• Touchez Cibles . Les utilisateurs peuvent se mettre en colère physiquement et commencer à frapper leurs appareils mobiles lorsqu'ils tapent sur quelque chose et qu'il ne répond pas. Une étude réalisée au MIT a révélé qu'ils tapaient sur quelque chose qui avait une cible tactile trop petite. Une bonne pratique consiste à créer des commandes, des boutons, des liens, etc. (tout ce qui est une cible tactile) d'au moins 7 à 10 mm, ce qui correspond à la largeur moyenne du bout des doigts. C'est également une bonne idée de s'assurer qu'il y a suffisamment d'espace entre ces éléments d'interface utilisateur.
• Texte lisible . Étant donné qu'une grande partie de ce que font les utilisateurs est basée sur la consommation de contenu, afin de fournir une expérience cohérente sur tous les types d'appareils mobiles, assurez-vous de choisir des polices de caractères qui fonctionnent bien dans plusieurs tailles et poids. Des tailles de police d'au moins 11 points sont recommandées afin de réduire la fatigue oculaire. Des polices de caractères propres et faciles à lire telles que Roboto et Noto de Google ou la nouvelle police San Francisco d'Apple sont d'excellents choix à explorer.
• Commentaires sur l'interface utilisateur . Des applications bien conçues nous tiennent informés lorsque nous interagissons avec elles. Le manque de bons commentaires peut dérouter les utilisateurs et les amener à se demander si quelque chose s'est produit, se produit ou pourquoi cela s'est produit / ne s'est pas produit. Une bonne pratique consiste à utiliser différentes formes de retour (son, haptique, visualisations), en fonction de l'élément de l'interface utilisateur ou de l'état actuel de l'application.
• Accessibilité . C'est probablement l'un des aspects les plus négligés de la conception de l'expérience utilisateur et en particulier de la conception UX mobile. 15% de la population mondiale souffre d'une forme de handicap. Les directives pour l'accessibilité du contenu Web sont une ressource disponible gratuitement, et pour les concepteurs numériques, c'est un "must have" dans leur boîte à outils.

Contraintes de conception de l'UX mobile

L'objectif de la plupart des concepteurs UX est de fournir des expériences agréables et de proposer de superbes conceptions qui permettent à la fois de découvrir (quelles actions sont possibles) et de comprendre (comment le produit est-il censé être utilisé). Avec le mobile, cependant, certaines contraintes sont introduites en raison de la taille, de la portabilité et des environnements dans lesquels ces appareils sont utilisés.

Contraintes de stockage

Lorsqu'ils traitent avec des applications mobiles natives, les concepteurs doivent tenir compte du fait que certains utilisateurs peuvent avoir des contraintes de stockage.

Une application mobile, par opposition à une application Web, utilise le stockage directement sur l'appareil mobile. Cela a un impact sur la conception de l'UX mobile car cela introduit des limitations potentielles sur la qualité de la vidéo, de l'audio et des images pouvant être utilisées.

Pour les applications natives, nous voulons des conceptions UX mobiles qui tiennent compte des contraintes de stockage. Lorsqu'un utilisateur rencontre une limite de stockage, il doit prendre des décisions difficiles sur ce qu'il faut conserver et ce qu'il faut supprimer. Cela crée une mauvaise expérience utilisateur lorsque nous obligeons les utilisateurs à faire ces choix.

Écrans et commandes

Une autre contrainte à laquelle nous sommes confrontés avec la conception UX mobile est la taille de l'écran et les commandes de nos appareils mobiles.

Les écrans mobiles sont plus petits : la lecture à travers un judas augmente la charge cognitive et la rend environ deux fois plus difficile à comprendre. - Jakob Nielsen, consultant en ergonomie Web.

La meilleure façon de gérer les écrans et les commandes est d'éliminer autant que possible les frictions. Restructurez les informations, faites attention aux zones du pouce, diminuez les clics (en particulier avec le commerce électronique) et faites attention au processus de connexion qui peut souvent être frustrant.

Environnement

Avec les appareils mobiles, il y a des facteurs environnementaux à prendre en compte pour la conception UX. Les utilisateurs sont susceptibles de se déconnecter beaucoup plus fréquemment, et ces situations doivent être prises en compte dans l'expérience utilisateur globale. Comment les ramener là où ils étaient ? Comment s'assurer qu'ils n'ont pas à tout recommencer avec ce qu'ils faisaient?

Un autre facteur environnemental est les distractions. Lorsque nous utilisons nos téléphones portables ou nos tablettes, nous sommes souvent dans un environnement bruyant ou encombré qui rend la concentration difficile. Comment pouvons-nous garantir une bonne expérience utilisateur lorsque des distractions se disputent l'attention d'un utilisateur ? Existe-t-il des moyens d'enregistrer des états et de permettre à nos utilisateurs d'enregistrer également des états ?

Petit écran, guichet unique

Une autre contrainte à laquelle les concepteurs sont confrontés avec la conception UX mobile est la taille limitée de l'écran. Pour cette raison, les utilisateurs ne peuvent voir qu'une seule fenêtre à la fois, ce qui limite considérablement l'expérience utilisateur.

Des efforts sont déployés pour essayer de s'adapter au "multi-écran" et au "multi-tâches", mais ceux-ci ne sont pas encore la norme et s'accompagnent de leurs propres contraintes.

La clé d'une meilleure UX mobile avec cette contrainte de fenêtre unique est que la conception doit être autosuffisante. Tout ce qui doit être fait par l'utilisateur doit être réalisable dans un seul écran ou une seule fenêtre, c'est-à-dire qu'il ne doit pas avoir à quitter l'application pour trouver des informations, etc.

Lorsque les utilisateurs doivent quitter des applications ou ouvrir de nouveaux écrans, cela ajoute à la charge cognitive globale et cela signifie que les choses deviennent trop complexes et frustrantes.

Comment les gens tiennent les appareils mobiles

Il y a une dernière contrainte à connaître : Tenir nos gadgets. Comment les gens les tiennent-ils et qu'est-ce que cela signifie pour la conception UX mobile ?

Selon les recherches de Steven Hoober et décrites dans Design for Fingers, Touch, and People, Part 2, il a été découvert que les gens interagissent différemment avec leurs appareils selon la façon dont ils les tiennent, ce qui a par la suite un impact sur la conception UX mobile.

Les gens tiennent leurs appareils mobiles de multiples façons et changent de position tout le temps. Cela a un impact sur le(s) doigt(s) qu'ils utilisent et sur la façon dont ils interagissent avec une interface utilisateur mobile (voir ci-dessous). Il s'avère que les utilisateurs préfèrent le centre de l'écran et n'aiment pas cliquer sur des éléments trop proches des bords.

Voici quelques conseils UX mobiles supplémentaires issus des recherches de Steven :

• Conception pour chaque utilisateur et chaque type et taille d'appareil mobile
• Conception pour toutes les différentes façons dont les gens travaillent avec leurs appareils
• Considérez que les utilisateurs préfèrent toucher le centre de leur écran dans la plupart des cas
• Placez les actions clés dans la moitié médiane aux deux tiers de l'écran
• Assurez-vous que les doigts et les pouces ne masquent pas le contenu
• Les éléments sélectionnables doivent être suffisamment grands pour être tapotés confortablement

Travailler avec les développeurs

Que vous travailliez dans un environnement UX agile/lean ou non, ce sont les développeurs qui doivent interpréter et mettre en œuvre les conceptions qui ont été si soigneusement conçues. C'est une bonne idée d'établir dès le début des meilleures pratiques éprouvées avec les développeurs pour s'assurer que les conceptions sont implémentées comme prévu. Voici quelques suggestions et conseils.

Maquettes

Lors de la préparation et de la remise des maquettes, essayez de garder des noms de fichiers simples, cohérents et descriptifs. Cela vous fera gagner beaucoup de temps dans les allers-retours. C'est aussi une bonne idée de finaliser toutes les maquettes avant de les partager avec les développeurs afin qu'ils ne reçoivent qu'une seule version de chaque écran. Une autre astuce pour gagner du temps consiste à tester toutes les interactions avec les prototypes afin qu'ils fonctionnent et soient fonctionnels. De bons outils pour partager des mockups : InVision et Marvel .

Spécifications fonctionnelles

La plupart du travail effectué en tant que concepteurs UX implique les développeurs dès le début du projet, et un excellent moyen de faciliter une compréhension continue du processus de conception et de créer une meilleure ligne de communication est de créer et d'utiliser un document de spécification fonctionnelle ou un "Func". -spéc.

Le document Func-Spec est similaire à un plan que les architectes créent, sauf qu'il est partagé avec les développeurs tout au long du projet de conception et leur permet de comprendre comment une application ou un site Web fonctionnera (par rapport à quoi ressemblera l'interface utilisateur).

Un bon exemple de Func-Spec fonctionnel est illustré ci-dessous :

Copie

Il y a généralement beaucoup de copie qui vit en dehors d'une maquette qui doit être communiquée aux développeurs. Voici une idée qu'ils apprécieront certainement :

Comme vu ci-dessus, le contexte aide le développeur à comprendre quand le message doit apparaître ou disparaître. Il devrait permettre au développeur de savoir ce qui se passe afin qu'il n'ait pas à deviner. Le message est la copie réelle qui apparaîtra. Utilisez la copie réelle et non du charabia (c'est-à-dire, lorem ipsum). Les développeurs ne veulent pas être des rédacteurs et nous voulons rendre les choses aussi fluides que possible pour eux.

Caractéristiques

C'est l'une des parties les plus importantes de la communication des conceptions avec les développeurs. C'est là que des outils comme Zeplin et Inspect d'InVision brillent vraiment parce qu'ils se chargent de communiquer des spécifications telles que les mesures, les guides de style, les polices, le flux d'expérience utilisateur et le fonctionnement de chaque élément de la conception.

Communication IRL (dans la vraie vie)

Les designers adorent leurs outils. À tel point qu'il peut être très facile d'oublier de décrocher le téléphone, de démarrer un appel vidéo ou de se rendre chez les développeurs et de parler. Beaucoup de temps a été gagné en rencontrant simplement les développeurs après avoir remis une partie d'une conception, car toutes les questions ou nuances peuvent être discutées sur place. Ceci est souvent oublié, mais si cela fait partie du processus de transfert normal, tout le monde appréciera le temps que cela fait gagner.

Tout lier ensemble

Le mobile ne va pas disparaître. En 2016, le nombre d'utilisateurs accédant au Web sur un appareil mobile a dépassé pour la première fois l'utilisation d'un ordinateur de bureau. Pour les concepteurs UX, l'adoption croissante du mobile et la prolifération de divers types d'appareils rendront la conception de l'expérience utilisateur encore plus difficile.

Pour ces raisons, adhérer à un ensemble de meilleures pratiques, comprendre les contraintes introduites par le mobile et assurer une relation de travail fluide avec les développeurs seront des facteurs clés pour réaliser des conceptions qui créent des expériences humaines positives.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Les principes de conception et leur importance
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Explorer les principes de conception de la Gestalt
• Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
• Les 10 livrables UX utilisés par les meilleurs designers