Intermédiaire

UX Starter kit : la mobilité (article 2/2)

UtilisateurL’expérience utilisateur, ou UX, est la perception et le ressenti d’une personne lorsqu’elle utilise les produits qui l’entourent.

Dans l’article précédent, Simon LE STER expliquait, de façon générale, ce qu’est l’expérience utilisateur et son importance pour une satisfaction client optimale. Cet article s’inscrit dans la même démarche, pour vous montrer, à travers notre apprentissage du sujet, ce qui nous semble important.

Je vais donc traiter la partie “mobilité” de l’UX, incontournable avec l’explosion actuelle de ce secteur.

L’expérience utilisateur est mobile

L’apparition de l’UX mobile

L’expérience utilisateur n’est pas une notion nouvelle. Elle apparaît dans les années 2000, et marque l’évolution de la vente des produits ou logiciels en tant que services renouvelables par l’utilisateur et impose donc une nécessité de satisfaction.

Il est important de noter que l’évolution de l’UX coïncide avec l’évolution technologique du mobile, dont le tournant est l’apparition de l’iPhone en 2007. En effet, l’audience internet est passée en très peu de temps du PC au smartphone et autres objets mobiles connectés.

La différence avec “avant”

Avant l’arrivée des smartphones, l’expérience utilisateur s’appuyait plutôt sur l’utilisation d’ordinateurs avec des contenus non adaptables à différentes résolutions et la navigation avec une souris et un clavier physique.

La mobilité amène divers éléments, notamment des contraintes, qui différencient l’UX mobile d’une UX classique desktop :

  • avec la prise en compte de la taille de l’écran, le contenu d’un mobile doit être priorisé
  • de façon à capter l’utilisateur, le design doit être le plus simple possible
  • Le changement des interactions avec les interfaces tactiles et les gestes associés (tap vs clic)
  • les navigations sous différentes formes : Stack, hamburger menu…
  • la prise en compte des mouvements dans l’espace avec l’accéléromètre et la géolocalisation
  • De nouveaux paramètres limitants : batterie, réseau (2g/3g/4g), mémoire

Petit à petit, les éléments que l’on trouvait seulement sur mobile apparaissent également sur Desktop et en transforment l’UX.

La tendance de l’ux mobile de nos jours

Actuellement, la tendance de l’UX diverge selon l’OS du mobile utilisé. Les grands acteurs du marché poussent chacun vers une expérience unique afin de fidéliser leur client et se démarquer.

Apple, précurseur avec l’iPhone et iOS, préfère la transparence du détail appréciée par ses utilisateurs.

Google, avec Android, penche plutôt vers l’humanisation de l’interface. C’est à dire essayer d’établir une relation simple entre les hommes et la machine.

Microsoft, avec Windows Phone, adopte la carte de l’universalité et la convergence avec l’arrivée de W10.

Ces différentes approches sont issues du Flat Design et du Material Design. Le Flat Design est un design graphique minimaliste sans relief, qui a pour but d’améliorer la lisibilité. Le Material Design, quant à lui, est un ensemble de règles de design proposé par Google et basé sur 3 éléments principaux : le réalisme des ombres, l’interactivité et le mouvement.

Les enjeux d’une bonne UX sur mobile

Pour bien comprendre les enjeux d’une bonne UX mobile, il faut comprendre les nouveaux besoins de l’utilisateur. Il veut pouvoir naviguer sur son mobile au même titre que sur son ordinateur, c’est à dire de matière fluide, intuitive et naturelle, mais aussi passer d’un système à l’autre facilement.

Cela reste un défi constant à relever pour les développeurs, qui doivent retranscrire les besoins utilisateur sur des appareils toujours plus petits et plus limités, tout en préservant un maximum de fonctionnalités et de clarté.

Un exemple concret est celui de l’écriture d’un mail. Il doit être facile de commencer un mail sur son mobile avec un certain confort et pouvoir le terminer sur son ordinateur.

Il faut donc composer avec les contraintes du mobile afin de parvenir à une bonne UX et fournir un service se suffisant à lui-même. Ce service doit pouvoir se dispenser d’un support desktop ou alors lui être complémentaire.

Les grands principes

Il existe bon nombre de recommandations concernant l’UX Mobile, en voici un échantillon pour bien débuter.

Le Contenu

Certaines études montrent que l’œil de l’utilisateur est concentré en majorité sur 2/3 de l’écran, au centre et en haut. Il est donc important de prendre en compte cet aspect et mettre vos messages important dans cette zone.

Il ne faut pas oublier que l’écran est plus petit, et par conséquent privilégiez un contenu clair et concis.

Trouvez un bon compromis entre texte, images et vidéos, à savoir : des  images de tailles réduites, des titres courts et percutants, ainsi que du contenu multimédia intéressant.

Donnez le contrôle à l’utilisateur sur le contenu multimédia : évitez l’auto-lecture de vidéo ou bien donnez-lui la possibilité de passer ou d’arrêter.

Adoptez le principe KISS : Keep It Simple, Stupid.

Les Gestes

La gestuelle, permettant à l’utilisateur d’interagir avec son mobile, doit être la plus simple et la plus naturelle possible dans une application. Un mauvais usage peut avoir des impacts négatifs sur le ressenti de l’utilisateur. En effet, une application, aussi belle et simple soit-elle, devient obsolète si elle est inutilisable.

Pensez à la taille du doigt (44 pixels minimum pour un tap). Utilisez aussi les gestes à votre disposition, en gardant en tête qu’ils doivent être utiles et simplifier la navigation.

Gardez à l’esprit que la gestuelle est invisible pour l’utilisateur, et que c’est donc à vous de décider de lui indiquer les actions possiblesLimitez l’utilisation du clavier et essayez d’utiliser des claviers natifs autant que possible.

Pour aller plus loin, c’est par ici.

Navigation

Faites le bon choix parmi tous les modèles de navigation existants : utilisez celui qui donnera le plus de sens à votre application. Les principaux modèles sont les suivants :

La navigation dite “hiérarchique” est souvent utilisée pour organiser les applications avec une structure compliquée.
La navigation via un menu persistant est souvent utilisée pour les applications ayant un contenu dense (articles, images, vidéos, photos…). Cette navigation est plutôt orientée “magazine”.
La navigation dite “séquentielle” est un système de navigation standard plutôt linéaire.
La navigation “en étoile” dont le point central est un passage incontournable pour aller vers chaque écran. Il s’agit d’un système de navigation de base sur iPhone orienté multi-tâches.
La navigation sous forme de dashboard est un système beaucoup utilisé sur les sites web et de base sur Windows Phone et sa home page.
La navigation sous forme d’onglets est plutôt un style classique déjà utilisé sur les applications desktop avec un thème commun et une appréhension rapide.

Ces systèmes peuvent se combiner en fonction des besoins.

Pour aller plus loin, c’est par ici.

Prenez en compte le fait que l’utilisateur soit souvent interrompu durant sa navigation, ou encore le fait qu’il fasse plusieurs choses en même temps (musique, appels, sms…).

L’utilisateur est impatient, donc essayez de lui donner accès rapidement à l’information qu’il cherche, sans étape intermédiaire. Limitez le nombre d’options de menu accessibles – pas plus de six.

Design & Hiérarchie visuelle

Une bonne UX mobile dépend de l’OS utilisé et de ce que souhaite mettre en avant son promoteur. Les liens suivants permettent de s’imprégner de l’esprit de chaque OS :

Il y a tout de même des dénominateurs communs aux OS :

  • Le respect d’une charte graphique définie au préalable.
  • L’optimisation du temps de chargement autant que possible
  • La gestion dynamique des erreurs, notamment sur les formulaires.
  • Le fait de tester l’application sur les différents devices supportés (Tablettes, smartwatchs, smartphones, etc)

uxmobiledesktop

Il ne faut surtout pas tenter de reproduire le design d’un site web et également ne pas oublier le mode paysage.

Au même titre, le design sur une tablette ne doit pas être pensé comme celui d’un téléphone et encore moins d’un desktop. Chaque appareil a un contexte qui lui est propre.

Dans le design mobile, la hiérarchie visuelle est un concept important à prendre en compte. Il s’agit d’analyser comment les éléments sont liés ou sont affichés les uns par rapport aux autres (dessus-dessous par exemple). Cette hiérarchie doit tout faire pour guider l’utilisateur lors de son expérience. Elle est favorisée en prenant en compte tout d’abord le contraste, les couleurs (simples), la forme, la taille et l’espacement des éléments. Tout cela permet de bien différencier les éléments et les différentes sections et permet à  l’utilisateur de profiter de la qualité des écrans actuels.

Aide

Votre application doit-elle contenir une aide à l’utilisateur ? C’est à vous de décider. Par contre, il est indispensable de prévoir un moyen pour les utilisateurs de faire des retours sur leur expérience par le biais de commentaires, de notes ou un forum.

Si vous choisissez de mettre une aide, rendez-la facile d’accès.

Introduisez l’application avec un court tutoriel, des trucs et astuces ou encore des vidéos. Pour parfaire le tout, faites en sorte que ce tutoriel puisse être disponible à tout moment. Car, ne l’oublions pas, l’utilisateur est souvent une personne pressée de découvrir le service ou l’application et, par conséquent, ne sera pas forcément attentif à ces préliminaires.

Social

Intégrer les réseaux sociaux dans votre application, permet d’augmenter le rayonnement de celle-ci,  ainsi que son trafic. Bien entendu, cette partie est plutôt réservée au domaine du grand public à moins d’avoir un réseau social d’entreprise.

Proposez à l’utilisateur une authentification rapide via les réseaux sociaux les plus utilisés, ainsi que la possibilité de partager le contenu de votre application.

Animation

Pour rendre l’expérience utilisateur de votre application plus fun, plus intéressante et plus interactive, les animations sont un atout indéniable. Google l’a d’ailleurs très bien compris avec l’application du Material Design pour son OS.

Il est important d’avoir des animations subtiles et bien pensées plutôt qu’un ensemble d’animations mises bout à bout, juste pour le style.

Donner du sens à chaque animation est un principe-clé du Material Design ou encore du Motion Design pour offrir une expérience mobile réussie. Pour illustrer mes propos, voici un exemple simple d’animation qui donne du sens à l’application :

Le “Pull to refresh” sur iOS, dont Twitter détient le brevet. Ce qui est génial, c’est qu’il se situe “à la place” du contenu que l’on cherche à charger (tout en haut de la liste). C’est aussi pour ça qu’il a davantage de sens dans certains contextes (fil d’info) que dans d’autres (un dashboard par exemple).

Pour aller plus loin, c’est ici.

Peut-on mesurer l’UX mobile?

Cette question m’est apparue de façon inévitable dans la démarche de découverte de l’UX et la réponse est oui.

Cet aspect est sans aucun doute l’un des plus importants, car au-delà des règles pour mettre en place une bonne UX, il faut pouvoir avoir un retour sur le produit ou le service fourni. Il existe différentes unités de mesures de l’UX, qui peuvent être appliquées à tous les domaines.

Les méthodes quantitatives, optent plutôt pour une approche scientifique (statistiques, enquêtes, sondages…).

Les méthodes qualitatives permettent de recueillir un avis plus global. En général, la plupart des gens réalisent des interviews sur le terrain ou des tests utilisateurs afin de recueillir le ressenti. (Interviews, médias sociaux…)

Il existe des outils peu connus qui ont pour but de mesurer l’Expérience Utilisateur de manière globale et peuvent être appliqué au domaine de la mobilité, comme AttrakDiff et UX Score.

  • AttrakDiff est un questionnaire basé sur le modèle d’Hassenzahl (2003), qui propose une vision de l’UX mesurée sur deux dimensions : des qualités pragmatiques (manipulations) et des qualités hédonistiques (stimulation, identité, plaisir…). 
  • UX Score, de Gfk SirValUse (2014), vise à mesurer quelques facettes de l’UX : les qualités fonctionnelles, esthétiques et les qualités orientées utilisateurs/usages

Conclusion

Je vous propose de garder en mémoire dix commandements, un petit kit synthétique pour débutant.

  1. Aux nouveaux usages et nouvelles interfaces mobiles, tu t’adapteras.
  2. Le retour d’expérience utilisateur, tu favoriseras.
  3. De la hiérarchie dans la navigation, tu ne manqueras pas.
  4. Du contenu clair et utile, tu proposeras.
  5. Les interruptions, en compte tu prendras.
  6. Les animations et détails, tu n’oublieras pas.
  7. L’utilisateur, tu guideras.
  8. L’aspect social, tu ne négligeras pas.
  9. Pour un utilisateur content, la performance tu privilégieras.
  10. Les bonnes pratiques et ta propre expérience du monde réel, tu suivras.

 

Nombre de vue : 297

COMMENTAIRES 4 commentaires

  1. Richard dit :

    Super article, merci beaucoup Loic ! C’est un vrai guide de bonnes pratiques UX 🙂 Dans les DSI l’expérience utilisateur sur tous les types d’écrans est un besoin qui revient souvent. Est ce qu’il vrai de dire “j’utilise Bootstrap, donc je suis responsive, et donc multi-ecrans”?

  2. Loic THIMON dit :

    🙂 Merci Richard.
    Pour l’avoir fait, je pense qu’il faut nuancer les propos.
    L’utilisation de Bootstrap seul ne suffit pas. On peut dire cela mais à condition au minimum :
    – d’avoir conçu son application en mobile first
    – d’avoir tester et adapter son application sur des tailles différentes d’écrans (Smartphones, tablette, Desktop)
    – d’avoir aussi tester l’application en condition réelle afin de s’assurer que l’UX sur chaque device convient bien

  3. Hugo dit :

    Article intéréssant sur l’ergonomie mobile. Mais je rejoint Loic sur le fait que l’UX va au-delà d’un appareil est concerne l’ensemble des interface d’un service mais pas que, c’est aussi la continuité entre les interfaces et leurs homogénéité.
    Voir cette article sur l’UX multi-écran :
    http://www.ergonomie-interface.com/nouveau-innovant-prospectif/ux-multi-ecran-ecosysteme-d-appareil/

  4. Loic THIMON dit :

    Merci Hugo pour le lien. Bonne série d’articles

AJOUTER UN COMMENTAIRE