conseil en ergonomie
conseil en design UX
architecture de l'information
icone conception UX design

La conception UX mobile first se rattache aux techniques de conception UX design.
Découvrez des exemples illustrés et des ressources pour concevoir des dispositifs mobiles pour les smartphones.
Des modèles de conception d'interface mobile et une formation en ligne sont disponibles en accès payant.

Mobile first et conception d'interface

Révisé en Octobre 2020

Les enjeux UX de la conception mobile

conception mobile

La conception UX mobile first place l'expérience d'utilisation en situation de mobilité comme élément priortaire du processus de design. La conception mobile first consiste à inverser le process de conception traditionnel qui privilégie usuellement l'expérience d'utilisation en situation sédentaire, à travers l'utilisation d'un ordinateur. C'est tout l'usage des méthodes de design de l'industrie digitale qui est ainsi remis en cause à travers le prisme de conception mobile first.

Quelles sont les spécificités de la conception mobile ? Comment concevoir une bonne interface mobile ?
Quelles méthodes pour la conception mobile ?
Comment savoir si vous devez concevoir une version mobile spécifique ?
Dans cert article, nous allons parler des méthodes de conception d'interface mobile et de l'expérience utilisateur en situation de mobilité. Nous partageons également plusieurs années de conception autour des problématiques de conception mobile : les conseils et les informations que nous avançons ici sont issus de notre expérience terrain. Nous ne livrons pas de chiffres fantaisistes mais nous essayons de vous donner un cadre pour vous aider à concevoir de bons dispositifs mobile.
La conception mobile relève du design de l'information, du design de l'interaction, de l'architecture de l'information et de l'ergonomie des interfaces. L'ensemble des disciplines s'agencent dans la démarche UX design.

On parle beaucoup de conception multi-écrans et de projet responsive design, néanmoins, tous les projets ne se prêtent pas à une interface mutualisée sur plusieurs écrans... La question qui se pose est de savoir à quel moment faut-il opter pour la conception d'une interface mobile spécifique...

Les plateformes ecommerce de grande envergure, comme Amazon ou Cdiscount par exemple, proposent des expériences de consultation spécifiques sur mobile. C'est un indice à la lueur duquel on comprend que, sans version spécifique, les performances économiques d'un site web de grande envergure ne sont pas au rendez-vous sur terminal mobile...
Ce constat s'applique aussi aux logiciels d'entreprise, aux supports transactionnels. Les enjeux ne sont pas nécessairement économiques...

Conception Mobile first ?

Parmi les dogmes avec lesquels tout concepteur doit composer, il y a celui du Mobile first : commencer par la conception mobile d'abord, qui implique d'aller à l'essentiel. Et puis élargir l'expérience, l'enrichir, à la mesure de la dimension de l'écran, pourrait-on dire.

Le propos valait surtout pour insister sur l'importance de considérer le support mobile dans les problématiques de conception. Et c'est toujours très juste.
Néanmoins, comme disent les philosophes, quand le sage pointe la lune, l'idiot regarde le doigt. Mobile first n'est pas à prendre au sens stricto sensu. Car c'est une hérésie : au bûcher les idéologues :).
En effet, commencer systématiquement la conception d'un support digital ou d'un écosystème digital par la conception mobile est tout à fait idiot, à tous les niveaux. On peut très bien considérer l'ensemble des solutions pour les factoriser.

En sociologie, des débats existentiels sur ce type de question demeurent depuis plus de 100 ans : étudier en partant du groupe vers l'individu (démarche déductive) ou de l'individu vers le groupe (démarche inductive). Chaque école a ses militants.

Sur le plan de la conception, il est toujours intéressant de considérer tout le panoramique des choix pour envisager ceux qui seront les plus adéquats en situation de mobilité.

Interface mobile et référencement

Dans la lignée du trend mobile first, il faut souligner que, à tort ou à raison, les outils de recherches accordent une importance grandissante à l'ergonomie mobile d'un dispositif digital. Un support interactif inapte à une utilisation sur support mobile risque des pénalités préjudiciables dans le positionnement du site.

Compte tenu des enjeux SEO en matière de référencement, la conception d'une version mobile devient un enjeu majeur dans le positionnement d'un support interactif au sein des moteurs de recherche...

Site web mobile ou site web responsive ?

Un site web adaptatif permet d'être consulté sur tout type de terminaux, y compris en situation de mobilité. L'usage du smartphone et le design tactile ont pénétré toutes les sphères du marché. Les capacités des terminaux mobiles ont évolué pour offrir des modalités ergonomiques plus confortables pour consulter des sites web. Ce n'est pas parce que les smartphones sont plus puissants qu'ils sont de bons outils de travail... pour manipuler et explorer un site ecommerce adaptatif, par exemple...

Sur le plan ergonomique, il est très simple de tester l'efficacité d'un dispositif : il suffit d'un test de performance pour vérifier la capacité de l'interface à réaliser une tâche. Or, quels sont les faits ?
Un site web adaptatif consulté sur un ordinateur permet de réaliser une tâche 2 à 3 fois plus vite que sur un support mobile. C'est une moyenne, cela peut être plus.
Le dispositif digital aura beau être adaptatif, les manipulations sur support mobile resteront plus longues, mêmes pour les utilisateurs les plus aguerris. C'est une norme, mais bien entendu ce n'est pas toujours le cas. Certains utilisateurs présentent des aptitudes plus poussées dans la manipulation des terminaux mobiles, de mêmes qu'un site adaptatif peut présenter une ergonomie acceptable sur support mobile. La combinaison de ces 2 facteurs améliore le temps de réalisation d'une action dans les tests de performance d'une tâche mobile.

Sur le plan technique : un dispositif digital responsive est plus dense, tout simplement.
Quelle que soit la qualité de la conception et de la mise en oeuvre sur le plan technique, le design adaptatif doit adresser énormément de spécificités techniques.
Plus de lignes de codes. Plus de design. Plus de cas à traiter. Poids des images. Taille des pages. Chargements... Beaucoup de ces éléments peuvent certes être rationalisés : minifier le code, chargement progressif des éléments, détection intelligente du terminal, traitement des images et chargement à la volée.
Il existe un ensemble de bonnes pratiques sur les plans de la technologie qui permettent de réduire la problématique du poids et des chargements. Maintenant, il faut reconnaître que le parc de terminaux est si diversifié que l'optimisation technique relève clairement du défi.

Sur le plan de l'interface : les problématiques de l'envergure éditoriale et fonctionnelle, des parcours d'utilisation, de l'encombrement représentent de vrais problèmes dans la conception d'une interface adaptative. Si l'on reprend des dispositifs digitaux de taille critique, comme Amazon et Cdiscount, il apparaît évident qu'une version adaptative ne donnera pas de bons résultats sur support mobile. L'architecture de l'information est trop élargie, le design de l'interaction trop sophistiqué. Les redimensionnements et les meilleures techniques adaptatives ne permettront pas d'apporter une expérience d'utilisation optimale, sur support mobile.

Les cas où il faut concevoir un site mobile...

Vous devriez opter pour la création d'un site mobile si l'envergure fonctionnelle de votre dispositif digitale est dense. Plus il y a de gabarits types, plus le design d'interaction sera profond, plus les parcours seront allongés. Au-delà de 100 gabarits, il faut une version mobile, sur le plan du fonctionnement de l'interface et de l'efficacité des parcours.
Nous essayons de vous donner des ordres de grandeurs, mais la règle est bien plus simple dans les faits : plus votre dispositif digital est sophistiqué sur le plan fonctionnel, plus la probabilité de devoir le minifier augmente.

Vous devriez également choisir de concevoir une interface mobile si l'envergure éditoriale de votre site est importante. Qu'est-ce qu'une envergure éditoriale importante ?
Bonne question :).
Si votre architecture de l'information agrège plus de 1000 pages, vous pouvez commencer à réfléchir. Si votre dispositif digital compte plus de 10000 pages, c'est un fait, il faut une version mobile. Plus il y a de pages à agréger, plus le système d'architecture de l'information apparaîtra rigide dans un environnement adaptatif.

Vous gagneriez à créer une version mobile spécifique si vous proposez plus de 10 parcours centraux.
Qu'est-ce qu'un parcours central ?
Ce sont les scénarios stratégiques, les contrats d'utilisation principaux, que vous proposez aux utilisateurs finaux. Si vous proposez des parcours d'utilisation très diversifiés, un dispositif digital adaptatif sera inadapté pour les traiter de manière efficace sur toutes les versions responsive.
Là aussi, c'est un fait. Quels sont les sites qui proposent plus de 10 parcours centraux ?
Tous les dispositifs digitaux rattachés à un écosystème digital de grande envergure, les grandes plateformes ecommerce, les portails de presse de taille critique, etc.

Site web mobile ou application mobile ?

Opter entre un site mobile et un parc d'applications mobiles est une question complexe car il faut considérer les coûts de production, au-delà des questions d'usage.
A trancher de façon brute, toutes considérations en tête, opter pour le site web mobile.

Une application mobile permettra d'utiliser des interactions plus sophistiquées que celles proposées par une expérience à travers le navigateur.
Au sens pur et dur, à interface mobile identique, l'app mobile donne des résultats et des vitesses de réalisation d'une action plus rapide. Tels sont les faits sur le plan de l'usage. Pas de statistiques à communiquer. Vous pouvez faire les tests avec votre téléphone. Vous verrez. Les résultats sont évidents.

On considère que l'expérience d'utilisation est supérieure, sur le plan ergonomique, dans une application. Mais à périmètre fonctionnel et éditorial égal, il en coûtera plus cher de devoir maintenir un écosystème d'applications (apple, android...) que de produire une version mobile de qualité. Sur le plan de l'audience, un site web mobile a un taux de couverture plus élargit. Les applications exigent de passer par les plateformes de téléchargement. Si vous disposez déjà d'une application mobile, la portabilité vers un site web mobile est plus justifiée que le passage d'un site web vers une application. Tout est une question de stratégie.

Interface mobile et taux de conversion

Un site desktop adaptatif et un site web mobile spécifique donne de meilleurs résultats économiques qu'un site responsive seul.
Sans version mobile, des sites marchands ou transactionnels adaptatifs enregistreront des taux de conversion plus faibles. La réciproque est plus intéressante. Les marques des grandes enseignes nationales et internationales ont chacune compris que les versions mobiles spécifiques génèrent de très bonnes performances vs. un environnement web adaptatif trop complexe à tous les niveaux.

Conception mobile standardisée ou conception sur-mesure ?

Les résultats d'une conception sur-mesure sont toujours meilleurs que les résultats issus d'une plateforme CMS standardisée.

Si vous avez besoin de gagner du temps dans vos projets, IAFACTORY a modélisé une structure de site ecommerce efficace en environnement mobile, un processus de commande mobile performant, ainsi qu'une structure de dispositif éditorial mobile. Les wireframes sont téléchargeables et adaptables à votre projet.

Objectifs de la conception d'interface mobile

Améliorer l'usage et les performances

La conception d'interface mobile vise l'amélioration des performances pour un dispositif transactionnel et le perfectionnement de l'usage en situation de mobilité. Tels sont les objectifs qui doivent guider le travail d'un UX designer et d'un concepteur d'interface (UI designer) au moment de concevoir un support digital mobile.
Adapter l'expérience à l'usage mobile... ?
Oui mais voilà, le mobile n'est pas toujours utilisé en situation de mobilité (vous le savez hein ;).

L'architecture de l'information et l'envergure éditoriale sont adaptées de façon à être assimilables sur un écran de petite taille. De même, les parcours d'utilisation sont limités et réduits pour améliorer les performances en rapport aux tâches les plus importantes. La difficulté consiste à identifier la nature des tâches les plus importantes et à faire des choix entre ce qui sera accessible sur la version mobile, et ce qui ne le sera pas. Tout du moins, à présenter ce qui est prioritaire, de ce qui ne l'est pas, en situaiton de mobilité...

Au-delà des usages, une version mobile doit faire l'objet d'une optimisation technique pour proposer des temps de chargement réduits et répondre aux limites potentielles du réseau.

Identifier les spécificités de l'expérience mobile

Un travail de conception mobile, qu'il s'agisse de la création d'une interface mobile ou de l'adaptation d'un site web à un écran mobile, relève de la même approche.

Vous devez réussir à identifier les fonctions clés dont vos clients ont besoin en situation de mobilité.
Donner un accès exhaustif à l'envergure éditoriale et fonctionnelle d'un dispositif digital n'est pas une réponse de conception adaptée. Les tests de performance (trouver tel produit ou tel service sur le site mobile), le démontrent.
La conception mobile, plus que n'importe quelle autre démarche de conception, s'inscrit dans le trend LESS IS MORE.

La conception d'une expérience mobile appelle donc un travail de clarification des usages en situation de mobilité.
Au-delà des enjeux de façonnage, il faut réaliser des études... C'est ce que nous allons aborder dans la partie méthode...

Exemples de conception mobile

icone telecharger des modeles pour analyse UX
TÉLÉCHARGER
150 livrables projets !
Kit de livrables projet : 2,60€ le modèle

conception d'interface mobile conception UX mobile first
ux mobile Valeo
iafactory - Julien MUCKENSTURM
conception mobile conception mobile first et ux design
ux mobile Kraft
iafactory - Julien MUCKENSTURM

Méthode : concevoir pour le mobile

icone formation ux design en ligne
MAÎTRISER
les méthodes UX design
Formation UX en ligne : 18,00€ l'heure

Conception mobile et méthode UX

Un travail de conception mobile ne se résume pas à la conception de l'interface. La conception de l'interface mobile doit intervenir après une phase d'analyse.
Il s'agit d'appliquer les méthodes de conception centrée utilisateur pour déterminer les spécificités de l'expérience web mobile en situation d'utilisation.

Sur les plans de l'ergonomie mobile, du design de l'interaction, du design de l'information et de l'architecture de l'information, il n'y a pas de différence remarquable entre la conception d'un site mobile web et la conception d'une application mobile.
L'approche de conception d'interface est la même quel que soit l'environnent d'utilisation (application Iphone, application Android, site web mobile).

Conception mobile et analyse du contexte

Une bonne approche de la conception ux mobile est de débuter par une analyse de l'existant (lorsqu'un support mobile existe déjà). L'analyse de l'existant englobe les problématiques ergonomiques, fonctionnelles, éditoriales. Et surtout analytiques. En effet, l'étude des indicateurs de fréquentation peut vous fournir des datas importantes sur les scénarios d'usage les plus fréquents en situation de mobilité (top page, top requête...).
Une telle démarche doit considérer le bémol suivant : les données analytiques sont à rapporter aux principaux parcours mis en scène dans le support existant. Dans la navigation interne au site, ce sont naturellement les actions les plus valorisées qui apparaissent, généralement, le plus, dans les plateformes de suivi de l'audience...

Une confrontation des solutions de conception mobiles existantes (ou envisagées) à celles des concurrents est toujours riche d'enseignements. Faîtes un benchmark :).

Conception mobile et étude sur le terrain

Pour comprendre les besoins des utilisateurs finaux, ou les exigences de vos clients en situation de mobilité, il est pertinent de recourir aux techniques d'enquête.

  • Enquête d'usage.
  • Entretiens avec les utilisateurs.
  • Focus groupes.
  • Test de performance des parcours existants.

Il s'agit plus d'une démarche marketing que d'une approche de test au sens stricto-sensu. On cherche effectivement à comprendre les besoins dans une situation donnée, en l'occurrence la mobilité, le déplacement, ou simplement le besoin minimal (cas de la conception pour le téléphone dans le cabinet...). Les techniques d'investigation relatives aux méthodes sociologiques sont celles qui donnent les résultats les plus probants. C'est le matériel idéal pour concevoir une interface utilisateur de qualité. Néanmoins, rares sont les projets qui osent investir du temps en sociologie des usages. Le business et la sociologie ne font pas toujours bon ménage...

Conception fonctionnelle mobile

Ensuite, travaillez tous les aspects relatifs au périmètre fonctionnel et éditorial, pour d'une part, clarifier et rationaliser le fonctionnement du dispositif mobile sur le plan fonctionnel, et d'autre part, déterminer l'envergure et l'organisation éditoriale en matière de contenus.
Il s'agira de travailler les dimensions de l'architecture de l'information et du design d'interaction, pour ensuite aboutir à la conception fonctionnelle des écrans (wireframing et design de l'information).

Pour ces travaux, l'essentiel est de factoriser les solutions de conception mobile autour des cas d'usage les plus importants. Or, si vous n'êtes pas allés sur le terrain, vous aurez du mal à les connaître... PRIORISATION est le maître mot.

Certains dispositifs ne sont pas toujours simples à factoriser : pour un site ecommerce, par exemple, qui propose un référentiel produit de 100 000 références, comment factoriser ? Dans ce cas, on peut s'appuyer sur les achats les plus fréquents en situation de mobilité. Extraire les rayons les plus demandés et les prioriser dans le design de navigation. Proposer un moteur de recherche efficace pour explorer le reste du catalogue...

C'est un apprentissage progressif qui passe par l'étude des données d'utilisation, les enquêtes terrains, l'analyse des conversions.

Démarche pour concevoir un dispositif mobile

L'utilisation en situation de mobilité et les usages spécifiques aux terminaux mobiles peuvent justifier la création d'un objet digital dédié au support mobile : c'est le cas des applications mobiles, des logiciels pour les personnels itinérants, des services web à haute valeur ajoutée en situation de mobilité (autoroutes, voyage, hôtellerie, gastronomie...).

Pour ces projets, la conception doit considérer les spécificités de l'utilisation en situation de mobilité ainsi que les modalités de manipulation du terminal (tactile, guidé par la voix...), et proposer un modus operandi allant à l'essentiel, pour une expérience utilisateur optimale.

Des travaux en matière de conception mobile suivent souvent les étapes suivantes :

  • Analyse de la demande et/ou de l'existant.
  • Etude comparative de l'environnement concurrentiel.
  • Enquête terrain étude des usages en situation de mobilité.
  • Clarification du périmètre fonctionnel et éditorial (cadrage fonctionnel et éditorial).
  • Factorisation de l'architecture de l'information et du design d'interaction (arborescence, parcours).
  • Factorisation des parcours d'utilisation centraux.
  • modélisation des écrans du dispositif (wireframing, design de l'information).

Travaux complémentaires à la conception mobile

Pour bien saisir la spécificité des usages mobiles, une étude des usages digitaux est bienvenue.

Un projet mobile spécifique peut avoir vocation à être porté vers d'autres terminaux, auquel cas vous devriez élargir la démarche et les travaux vers une conception responsive pour une approche "multi-écrans", une conception web pour une consultation sédentaire, ou encore une adaptation spécifique à l'univers des tablettes via la conception de site pour tablette.

Naturellement, pour ces supports spécifiques, travaillez vos interfaces dans une logique de conception tactile.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources pour la conception mobile

APPROFONDIR
la conception mobile

Mobile first
mobile first

Aller plus loin pour dans la conception mobile

Formation vidéo à visionner :

Livrables à télécharger :

Wireframes à télécharger :

Articles du journal à méditer :

Études de cas à lire :

Travaux à visualiser :

Supports de cours (débutant) à étudier :

Flux 2.0 à explorer :

Compétences métier pour la conception mobile :

Fiche métier :

Livres à bouquiner :

Autres ressources sur le web :

  • Un logiciel pour concevoir rapidement : balsamiq
  • Un autre logiciel pour concevoir rapidement : mockingbird
  • Un logiciel complémentaire dédié au prototypage: axure
  • Un webservice pour transformer une page web en "wireframe" : wirify
  • Signalez nous des ressources autour de la conception mobile via les commentaires !
Plus de techniques de conception
ADAPTATION MULTI-ECRAN
Conception des interfaces tactiles pour une expérience utilisateur optimale en situation d'utilisation.
conception tactile
ADAPTATION MULTI-ECRAN
Conception des interfaces dédiées aux tablettes : web, applications et logiciels dédiés aux tablettes...
conception tablette
ADAPTATION MULTI-ECRAN
Conception responsive de dispositif pour une expérience de consultation "multi-écran" unifiée...
conception responsive
Prototype
  • réalisé par iafactory
  • livré sous 7J. ouvrés
  • à partir de 4200€ HT