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

La conception responsive UX design fait partie des techniques de conception UX design.
Découvrez des exemples et des ressources pour concevoir des sites web responsive design.
Des modèles de conception d'interface adaptative et une formation online sont disponibles en accès payant.

Conception responsive UX et interface adaptative

Révisé en Mars 2021

Enjeux du design adaptatif

conception responsive ux design

La conception responsive UX design consiste à établir des principes d'interfaces adaptatives répondant aux attentes prioritaires des utilisateurs et des clients finaux.
La prise en compte de l'expérience d'utilisation est, dans le cadre du design adaptatif, une composante critique du travail de conception. Le concepteur (architecte de l'information, ux designer) privilégiera des scénarios d'utilisation simplifiés afin que l'interface soit optimisée pour tous les points de contact web (site mobile sur smartphone, version spécifique adaptée pour les tablettes, version desktop pour l'expérience d'utilisation sur ordinateurs...). La conception UX design responsive pose d'importantes contraintes aux concepteurs dans la mesure où l'architecture de l'information et le design d'information doivent s'adapter à une multitude de terminaux numériques...

Comment concevoir un dispositif adaptatif ?
Comment faire pour choisir les points de rupture de l'écran ?
Quelles sont les spécificités de la conception responsive ?
Cet article traite de méthodes en matière de responsive web design. Ces travaux sont rattachés au design de l'information, au design de l'interaction, à l'architecture de l'information et à l'ergonomie des interfaces.

La conception adaptative vise à adapter la présentation des informations en fonction de la taille de l'écran utilisé par le visiteur. Il s'agit de proposer un design unique et flexible permettant de répondre aux spécificités de chaque terminal : écran panoramique, ordinateur de bureau (desktop), ordi portable, tablette, tableau de bord, smartphone... Du point de vue du récepteur, en principe, l'expérience est homogène quel que soit le support de consultation utilisé.

Pour l'émetteur, la conception responsive permet de rationaliser le parc d'objets digitaux : en effet, une bonne conception adaptative permet de s'affranchir de la création d'un site spécifique pour chaque device - terminal (un site pour les tablettes, un site pour les mobiles, un site pour les ordinateurs de bureau - desktop et portables). Le design responsive offre l'avantage de gérer une source unique de diffusion du contenu à destination de différents points de contacts. C'est un atout non négligeable en matière de stratégie éditoriale.

Les enjeux de la conception responsive sont donc ergonomiques et économiques. Des sites plus flexibles qui épousent efficacement les différents supports de consultation, avec de meilleures expériences utilisateur à la clé. Et des gains en matière de coût de maintenance du parc d'objets digitaux. L'approche du design adaptatif présente néanmoins quelques limites...

Les limites de la conception responsive

D'abord, le design adaptatif présente des limites fonctionnelles et ergonomiques : il n'est pas possible d'adapter le design d'un dispositif à chaque contexte d'utilisation.
Il existe des dizaines de milliers d'ordinateurs et d'écrans en circulation : les dimensions sont différentes, les navigateurs utilisés sont hétérogènes, les versions des systèmes d'exploitation et des navigateurs sont très disparates... Il en va de même pour les tablettes, les smartphones, et tous les dispositifs connectés au web proposant une interaction par l'écran... Le croisement de ces variables peut révéler une fragmentation considérable des supports de consultation...

Il est donc impossible d'adapter la conception aux spécificités du contexte d'utilisation de chaque utilisateur. Face à ce constat, le travail du concepteur d'interface et de l'UX designer consiste à identifier les cas d'utilisation les plus significatifs. Le design sera adapté pour répondre aux cas les plus fréquents. Il ne faut surtout pas vouloir couvrir tous les cas. En effet, une conception adaptative cherchant à couvrir tous les cas de figure va se traduire par un degré de complexité contre-productif.

Nous en arrivons au deuxième point : la technique.
La conception adaptative se traduit par plus de lignes de codes : détecter l'écran de l'utilisateur, afficher les informations pour chaque contexte, charger des données spécifiques pour chaque type de terminal... Bien sûr, tous les développeurs front-end cherchent à factoriser et minifier leur code.
Néanmoins, entre les media-queries, les scripts de chargement des données à la volée, les multiples allers-retours avec le serveur, et un nombre considérable de paramètres à gérer (images, css, etc.), la tâche peut devenir lourde pour un dispositif de taille critique. Les enjeux de la conception d'un site de quelques pages ne sont pas les mêmes pour des supports digitaux de milliers de pages...

Sur le plan ergonomique, enfin, l'expérience utilisateur peut souffrir de l'adaptabilité de l'interface : une interface parfaitement adaptée pour explorer un site ecommerce sur un écran d'ordinateur, peut ne pas l'être sur support mobile. Prenez le cas d'un site comme Amazon... La densité d'informations, de visuels, de produits est inconcevable en matière de poids pour un terminal mobile...
Un design adaptatif très sophistiqué n'est pas forcément suffisant pour proposer des modalités d'utilisation efficaces sur tous les supports. En effet, le design adaptatif résout les problématiques liées à la visualisation de l'information (ventilation des éléments à l'écran), mais ne s'intéresse que partiellement aux problèmes du design de l'interaction (parcours)...

Définir les points de rupture

Les points de ruptures, breakpoint, sont les repères qui marquent le basculement de l'interface : on définit le comportement adaptatif d'une interface en spécifiant les cas dans lesquels celle-ci devra être ajustée.
L'usage traditionnel considère 3 breakpoints sur la base desquels il conviendra d'adapter l'interface utilisateur : l'ordinateur desktop, la tablette, le mobile. C'est un standard très inexact car le parc d'ordinateurs, de tablettes et de smartphone est ultra-fragmenté sur le plan des résolutions d'écran. Ainsi, on élargit généralement le nombre de points de ruptures pour flexibiliser l'interface autant que le dimensionnement du projet le permet (qualités, coûts, délais).
Le principe consiste ainsi, pour chacun de ces devices, à établir une zone de largeur dans laquelle il s'agira de faire figurer les informations à l'écran.

Dans un projet responsive, il y a au moins 2 points de rupture, c'est le minimum : en effet, pour être adaptative, l'interface doit au moins présenter 2 visages différents... C'est évidemment totalement insuffisant pour répondre à la multiplicité des scénarios de consultation. Dans ce cas l'interface reste très rigide, c'est à dire pas ou peu flexible au contexte d'utilisation, donc pas vraiment adaptative...
A l'inverse, une interface reposant sur 10 points de rupture va poser de graves difficultés sur les plans du design et de la technique : l'interface sera hyper flexible (trop), très adaptative, mais il y aura énormément de règles à définir pour régir le positionnement de chacun des éléments à l'écran...

Les propriétés des feuilles de style (CSS), au travers des media queries, offrent notamment la possibilité de paramétrer les zones de largeur de l'interface : max-width (largeur maximale), min-width (largeur minimale). Ces 2 propriétés sont relativement importantes dans la conception adaptative, car elles permettent au concepteur de calibrer l'interface dans un repère déterminé : entre 1000 pixels de largeur et 1200 pixels de largeur, l'interface utilisateur prend telle forme...

Pour une plage de largeur définie, l'interface est fixe ou élastique, ou les deux (ce qui est rare), au choix du concepteur.
Ainsi dans les grands principes, si l'interface est fixe, les éléments figurant à l'écran ne bougent pas dans la zone de largeur du breakpoint. On garde un très bon contrôle sur le design, mais c'est un peu rigide... Le site IAFACTORY repose sur un design fixe autour de 4 breakpoint.
Si l'interface est élastique, l'interface utilisateur va coller aux limites horizontales de l'interface et suivre le redimensionnement de la fenêtre. On est très flexible mais on a beaucoup moins de contrôle sur le design. Par ailleurs, dans le cas des écrans larges (supérieurs à 2000 pixels horizontaux), l'équilibre général de l'interface est menacé. Et le passage de la souris d'une zone à l'autre relève du lancer de javelot : gros efforts :).

Le choix d'un design fixe ou d'un design liquide est une décision délicate et nécessite toujours la consultation des développeurs front-end.

La difficulté de l'exercice réside donc dans le fait d'arriver à trouver un équilibre entre flexibilité et faisabilité : c'est à dire, une interface suffisamment flexible pour épouser différents contexte de consultation, sans induire une complexité technique et graphico-fonctionnelle qui nuiraient aux critères de coûts et de qualité du projet. Vaste débat, grande question...

Combien de breakpoint ?

C'est volontairement que nous restons vagues sur les chiffres : en effet, la bonne pratique en matière de calibrage de l'interface consiste à étudier les données fournies par les indicateurs de fréquentation du site, quand le site existe... Les données statistiques fournissent une partie des informations nécessaires à la prise de décision :

  • Terminal utilisé pour consulter le site.
  • Modèle du terminal de consultation pour le cas des tablettes et des smartphones.
  • Navigateurs utilisés.
  • Résolution de l'écran.

NOTE :
la résolution de l'écran du terminal d'utilisation ne signifie pas que l'utilisateur consulte votre site dans cette configuration. Méfiez-vous des données supérieures à 1024 pixels de largeur et recouper bien tout ce qui ressort du trafic issu des ordinateurs : en effet, la plupart des utilisateurs ont plusieurs fenêtres actives au moment de consulter votre site. Il se peut que la fenêtre du navigateur soit redimensionnée... Plus qu'une probabilité, c'est même une règle. Surtout pour les utilisateurs du MAC...

Les différents types de terminaux utilisés permettent d'établir la part du trafic qui revient à chaque device. On pourra ainsi arbitrer l'importance d'établir plusieurs breakpoint pour chaque type de terminal en fonction de la diversité du parc de consultation et des résolutions d'écrans.

La conception adaptative est très liée à la notion de la taille de l'écran. L'étude poussée des résolutions d'écrans offre une vision panoramique du champ des possibles en matière d'étalon de conception. L'étalon de conception est un standard, un calibre, un archétype sur lequel le concepteur va s'appuyer dans la conception de l'interface.
Pour dire les choses autrement, l'étalon de conception est la résolution cible servant de base au design d'interaction. Chaque fois que l'on va bâtir un écran, on considère d'abord l'étalon de conception. Il faut bien le choisir, c'est une décision hautement stratégique.

En règle générale, on part sur 3 à 7 breakpoints :

  • Desktop - ordinateur : 1 à 3 breakpoint
  • Tablette : 1 à 2 breakpoint
  • Smartphone : 1 à 2 breakpoint
  • Cas spécifique : + 1 breakpoint par interface embarquée très importante dans le modèle économique (voiture, terminal hybride)...

Voici les points de rupture du site IAFACTORY, qui propose une interface adaptative oscillant entre 299 pixels et 1899 pixels. Ces éléments pourront notamment aider les concepteurs qui partent ex-nihilo. Bien sûr, tout dépend de l'audience visée, de l'expérience utilisateur que l'on souhaite proposée, et du temps (coûts) que l'on est prêt à investir dans ce domaine.
5 points de rupture sur le site IAFACTORY :

  • Entre 1600 et 1900 pixels : très grands écrans d'ordinateur type 23 - 27 pouces. L'interface est pensée pour s'ajuster aux résolutions supérieures au FULL HD. Breakpoint unique sur la page d'accueil.
    Note : pratique pas idéale d'avoir un breakpoint sur une seule page...
  • Entre 1200 et 1600 pixels : écrans de taille moyenne. L'interface est ajustée pour un écran FULL HD.
  • Entre 900 et 1200 pixels : des écrans de type tablette en mode horizontal.
  • Entre 600 et 900 pixels : des écrans de type tablette en mode vertical, et des grands écrans de smartphone.
  • Inférieur à 600 pixels : une interface minifiée figée à 300 pixels de largeur pour les mobiles et les petits écrans.
  • En dessous de 300 pixels : le site n'est pas adapté (cas marginaux de l'audience iafactory).

NOTE : sur le site IAFACTORY, on compte 2500 configurations d'écrans différents, sur une période de 6 mois...

On peut aller plus ou moins loin en matière de responsive webdesign. La définition des points de rupture est une décision stratégique de conception qui a des impacts en matière d'expérience utilisateur, et évidemment sur le plan de la production...

Conception responsive et mobile first...

Luke Wroblewski a posé les bases de la philosophie mobile first en considérant que l'expérience mobile devait être la cible des travaux de conception. Il s'agissait surtout de valoriser l'importance de l'ergonomie mobile à une époque où les enjeux de la conception mobile étaient encore balbutiants. Les choses ont changé, et l'ergonomie mobile est aujourd'hui une composante inévitable de toute stratégie digitale. Le concept mobile first reste néanmoins relié à un ensemble de considérations fantaisistes dans lesquelles toute stratégie de conception devrait d'abord s'attacher à la version mobile... C'est sans le moindre doute, la plus grande erreur de conception, que de créer un écosytème digital en partant de la version minifée... C'est une vision naïve et idéologique qui n'embrasse absolument pas les enjeux stratégiques du digital dans une entreprise.

S'il est vrai qu'il n'est pas approprié de considérer une stratégie digitale sous l'angle unique du mobile (dans 90% des cas et hors start-up), il n'en reste pas moins que le concept du mobile first soulève une question intéressante dans la conception adaptative d'un support digital...
Faut-il mieux bâtir l'étalon de conception sur la base de la version ordinateur, d'une version intermédiaire, ou d'une version plutôt mobile?
Autrement dit, est-il préférable de concevoir l'interface en se rapportant à la plus petite résolution ou à la plus grande résolution ?

C'est une question clé que de choisir l'étalon de conception : en effet, le design d'interaction, les parcours centraux et l'architecture de l'information générale du dispositif ne peuvent pas faire l'objet d'adaptation.La structure du fonctionnement n'est pas adaptative, ou alors dans une mesure vraiment très faible. Un processus de commande ecommerce repose par exemple sur une séquence, de même que l'exploration d'un catalogue de produits. La logique de conception sera différente si le concepteur bâtit l'interface sur une structure desktop vs. mobile.

Cette problématique fondamentale de la structure du fonctionnement explique pourquoi certains acteurs de taille critique sont obligés de créer une version mobile spécifique (voir une version tablette spécifique !). C'est le cas notamment des sites ecommerce de grande envergure fonctionnelle et commerciale, des sites de presse en ligne de grande envergure éditoriale, ou encore des écosystèmes digitaux de taille critique...
On atteint dans ces dispositifs, des volumes d'informations si important à agréger, qu'il n'est pas économiquement viable d'opter pour une conception adaptative multiécrans. Une conception responsive pour un dispositif ecommerce de taille critique est trop lourde à tous les points de vue pour être en mesure d'assurer des performances équivalentes entre les grandes résolutions d'écrans et les petites résolutions d'écrans. Les usages sont trop différents.
Enfin, lorsque les chiffres d'affaires journaliers portent sur des centaines de millierss d'euros, de faibles pourcentages ont des conséquences monumentales considérées à l'année. Concept des intérêts composés...

Conception adaptative et design d'information

La conception responsive est d'abord une histoire de design de l'information. Le concepteur cherche à équilibrer la ventilation des éléments à l'écran. Hiérarchisation, positionnement, encombrement, nombre d'informations, composants d'interface.
La question se pose, d'une part, pour chaque gabarit du dispositif digital, d'autre part, pour chacun des points de rupture retenu... Pour un site multiécrans (desktop, tablette, smartphone) avec 3 breakpoints et 15 gabarits de fonctionnement, il y a ainsi 45 projections différentes des informations... Certains sites de taille critique reposent sur une structure fonctionnelle supérieure à 100 gabarits. Et il peut y avoir près de 10 points de rupture. Imaginez les points de contrôle en matière de design de l'information...
Il est tentant de considérer que le développement front-end pourra résoudre l'affichage des éléments à l'écran de façon automatisée ou fluide. Mais c'est une erreur... Il y a trop de cas particuliers pour établir des règles automatisées infaillibles.

Pour le concepteur, le design adaptatif implique d'avoir une vision d'ensemble du fonctionnement. En effet, les composants d'interface ainsi que les médias figurant à l'écran devront trouvés des modalités d'affichage satisfaisantes pour tous les points de rupture.
C'est tout le savoir-faire du concepteur de l'interface (UI designer) que d'être capable d'anticiper les différents cas de figure en matière d'affichage. Le designer de l'interface doit ainsi avoir une excellente vision fonctionnelle du projet pour proposer des solutions de visualisation efficaces dans un environnement adaptatif. Il en va des modalités de filtre pour un site ecommerce, de l'affichage des listes d'article pour un site de presse, etc.

Même un concepteur confirmé éprouvera des difficultés à représenter toutes les variables d'affichage des informations à l'écran dans un dispositif digital. C'est un travail qui appelle une grande rigueur et d'importantes capacités de projection.

Conception adaptative et design d'interaction

Le design d'interaction constitue le problème majeur du design adaptatif. Ainsi, si on peut effectivement charger un ensemble de données en fonction de la résolution d'un écran pour en modifier l'affichage, il n'en va pas de même pour la structure des parcours.

Le fonctionnement d'un dispositif digital n'est pas, ou peu flexible, sur le plan de la structure. Bien sûr, un design de l'interaction évolué permet à un utilisateur de réaliser une même action par différents moyens. Un design d'interaction sophistiqué prévoit effectivement différentes modalités d'exploration d'un dispositif digital. Néanmoins, les parcours d'utilisation sont construits sur la base d'un fonctionnement. Or le fonctionnement considère le déplacement au sein d'un ensemble de pages, lorsque le design adaptatif se concentre à modifier l'apparence voir le fonctionnement d'une seule page. Autrement dit, dans la mécanique de fonctionnement, le design adaptatif est inefficace, ou peu opérant. Les parcours ne sont pas vraiment adaptables. Tout au plus peut-on proposer de valoriser les parcours les plus efficaces sur tel ou tel device. Mais la structure fonctionnelle, de même que l'architecture de l'information ne voient pas leur organisation modifiées.

On en revient à la question de l'étalon de conception :
quel est le canevas le plus approprié pour bâtir le coeur de l'expérience utilisateur sur un support digital ?
La version la plus complexe est celle qui permet de créer la structure la plus évoluée sur le plan du design de l'interaction. Il nous apparaît plus judicieux de travailler sur la base de la version desktop pour dresser l'envergure fonctionnelle, éditoriale, visuelle du dispositif. Ensuite, la projection de la version minifée sur support mobile doit permettre d'établir une sorte de pont qui peut constituer le bon compromis en matière de fonctionnement. Si aucun compromis n'est satisfaisant, il faut recourir à une version spécifique (une version spécifique pour le mobile, une version particulière pour les ordinateurs).

Objectifs de la conception responsive web

Epouser le contexte de consultation

La conception responsive a pour principal objectif de rendre un site utilisable quel que soit le support utilisé pour le consulter.
Une interface adaptative est bienvenue pour les dispositifs digitaux modérés : moins de 50 gabarits, moins de 1000 pages, référentiel produit inférieur à 5000 références.

Pour des supports interactifs dont les envergures fonctionnelles et éditoriales sont très importantes, le responsive web design n'est pas recommandé. Trop de lignes de codes et surtout trop de différences dans les parcours entre une version mobile et une version desktop. Une mobylette n'est pas un camion. Un site mobile n'est pas un ordinateur...

Pour les projets de taille critique, on veillera à créer une version mobile spécifique, et peut-être même une version spécifique pour les tablettes si le médium est un outil important pour le public cible.
Pour un dispositif de taille critique, on utilisera les principes du design adaptatif pour ajuster l'interface et le design de l'information sur un type de support : les breakpoints concernent alors des ajustements marginaux de l'information sur des résolutions similaires.

Rationaliser les interfaces

Une conception responsive avec un site maître, des points de ruptures et une ventilation dynamique des éléments à l'écran, ça complique pas mal le travail de design d'information :).
Ainsi, un design adaptatif relève toujours d'une approche de conception rationalisée. Voici les principaux objectifs poursuivis par une conception adaptative :

  • Rationalisation du parc d'objets digitaux.
  • Mutualisation des services, des fonctionnalités et des contenus.
  • Economies d'échelles : investissement plus lourd au départ, mais moins coûteux que de créer puis de maintenir X objets digitaux.
  • Uniformisation de l'expérience utilisateur à l'échelle du parc d'objets digitaux.

En bref, l'approche de conception responsive web en ux design est intéressante pour sa couverture d'une partie des problématiques multi-écrans.
Le design responsive introduit son lot de complexité sur les plans techniques, fonctionnels et graphiques. Et oui, bien que des prototypes existent, nos confrères architectes du réel n'ont pas encore à composer massivement avec les murs flexibles et amovibles...
Besoin d'une inception ?...
Si vous avez jetez un oeil à la vidéo, c'est un peu ça la conception responsive...

Exemples de conception responsive web

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

analyse des résolutions d'écrans analyse des résolutions d'écrans
ux design mobile Cdiscount
iafactory - Julien MUCKENSTURM
conception responsive : data conception responsive : data
ux design mobile Cdiscount
iafactory - Julien MUCKENSTURM
responsive design breakpoint responsive design breakpoint
ux design mobile Cdiscount
iafactory - Julien MUCKENSTURM
conception mobile responsive conception mobile responsive
ux responsive ERDF espace client
iafactory - Julien MUCKENSTURM
conception web responsive conception responsive UX design
ux responsive ERDF espace client
iafactory - Julien MUCKENSTURM
conception adaptative conception adaptative
ux responsive Cdiscount checkout
iafactory - Julien MUCKENSTURM
conception adaptative conception adaptative mobile
ux responsive Cdiscount checkout
iafactory - Julien MUCKENSTURM
exemple de conception responsive exemple de conception responsive
ux responsive Cdiscount fiche produit
iafactory - Julien MUCKENSTURM
conception responsive conception responsive
ux responsive Cdiscount fiche produit
iafactory - Julien MUCKENSTURM

Méthode pour concevoir en responsive

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

Conception responsive : Mobile first ou mobile last ?

Par où commencer la conception responsive :
mobile first ou mobile last ?
D'abord l'interface bureau ou d'abord l'interface mobile ?

Il y a des débats dogmatiques et existentiels sur la question. Ils sont inutiles. On conçoit une expérience et on l'adapte. Point barre. Peu importe le point de départ.
Les questions fondamentales en conception adaptative sont celles qui concernent le design de l'interaction et les parcours d'utilisation. Existe-t-il des solutions de conception susceptibles de fournir des réponses aussi efficaces avec le pouce sur le mobile qu'avec la main sur la souris ?

Votre approche en matière de conception, qu'elle soit responsive ou non, consiste à proposer des interfaces élégantes, performantes et plutôt faciles à appréhender côté utilisateur.

On ne se pose la question de savoir s'il faut systématiquement initier le projet par la version mobile ou la version desktop. D'abord parce que l'économie réelle et l'ère du temps réel ne permettent pas toujours de faire ce choix. Ensuite, parce qu'il n'est pas toujours judicieux de modéliser la plus petite interface pour commencer à concevoir...

En sociologie, le débat fait rage depuis plus de 100 ans : holisme (le tout, la vue globale, la déduction) vs. individualisme méthodologique (l'individu, la partie, l'induction), partir du tout, ou de la partie ?

Chez IAFACTORY, nous préférons considérer le mobile en dernier, "mobile last", parce que nous raisonnons davantage dans une logique d'ensemble, du tout vers la partie, de la complexité vers la déconstruction du complexe.
Il nous semble plus judicieux de poser les bases du tout, de déployer la voile des possibilités pour appréhender le projet dans son acception la plus large. Sur cette base, on peut mesurer l'intérêt des parcours sur mobile : sont-ils trop longs, trop alambiqués, trop techniques pour une manipulation tactile sur smartphone ?

Retenez que la conception responsive web est avant tout une démarche de conception qui vise à adapter les solutions de conception au terminal de consultation.
Vous pouvez concevoir votre projet responsive en partant du terminal de votre choix (en choisissant l'étalon de conception le plus pertinent)...
Le plus important est de considérer les différents devices pour être sûr qu'un choix opéré sur mobile sera aussi intéressant en version desktop, et inversement, un choix sur desktop sera efficace sur mobile.

La phase d'analyse

Une phase de conception est toujours réalisée après un temps d'avant-projet ou de cadrage. La conception responsive n'échappe pas à la règle.

Veillez à réaliser des études en amont sur les usages de votre audience : condition d'utilisation, situation d'utilisation, besoins, attentes.

La phase d'analyse sert à rassembler les informations clés du projet pour aider les équipes de conception à trouver les bonnes solutions de conception, notamment en matière de parcours d'utilisation, une clé du design d'interaction dans un environnement responsive.

Etudier les indicateurs de fréquentation

L'analyse des datas s'inscrit dans le temps de la phase d'analyse pour faire le point sur les indicateurs webanalytiques du dispositif, quand il existe.

S'il s'agit d'une création de dispositif digital, essayez de déterminer les équipements types de vos profils d'utilisateurs, mais aussi leurs usages... Comme dans tout projet digital, une phase d'analyse doit déterminer l'audience ciblée (utilisateurs ciblés, types d'équipements, usages, scénarios stratégiques). Une veille sur les résolutions d'écrans vous aidera à récupérer des données chiffrées.

Pour les dispositifs existants, intéressez-vous aux données webanalytics :

  • Ordinateur : MAC, PC, AUTRE... ? Pour les Macs, et pour Windows dans une moindre mesure, n'oubliez pas que les fenêtres du navigateur sont rarement calibrées à 100% de l'écran...
  • Quelle est la part du trafic mobile ?
  • Quelle est la part des tablettes ?
  • Combien d'utilisateurs consultent le site avec un ordinateur ?
  • Existe-t-il d'autres terminaux significatifs ?
  • Quels sont les navigateurs utilisés ?
  • Et surtout, quelles sont les résolutions d'écran ?

Analysez précisément toutes les données des résolutions d'écran. Essayez d'établir les pourcentages en croisant les données, pour faire ressortir la part des utilisateurs que vous toucheriez en ciblant une résolution en particulier...
Concrètement, cela va permettre d'identifier les résolutions les plus significatives dans votre trafic : vous pourrez alors considérer quelle est la résolution la plus appropriée pour le mobile, pour une tablette, pour un ordinateur. On cherche ici à établir l'étalon de conception pour chaque device. Comme nous l'expliquions, il est tout à fait possible de créer des points intermédiaires d'adaptation de l'écran, pour chaque type de device.

Sur le plan de la méthode, il est intéressant de considérer la largeur d'écran. Voici les données que vous devez réussir à extraire :

  • sur 100% d'utilisateurs, 99,5% ont un écran de taille supérieur à 300 pixels.
  • Sur 100% de mon audience, je suis en mesure de toucher 43% des usagers avec une résolution de 1400 pixels.
  • Au-delà de 1900 pixels de largeur, il n'y a que 1,4% d'utilisateurs.

Les ordres de grandeur doivent être considérés en valeur et en volume. En effet, 1,4% d'utilisateur ayant une résolution supérieure à 1900 pixels peut représenter 100 000 personnes pour un site à très fort trafic. Un utilisateur avec un grand écran, c'est comme un conducteur avec une grosse voiture :)...

L'idée générale est d'établir les étalons de conception sur des bases tangibles. Pour vous aider, vous pouvez jeter un oeil à la capture sur les résolutions d'écran dans les exemples de conception adaptative.

C'est dans cette étape que vous fixez les points de rupture du dispositif : 3, 4, 5, 6... Il est important de déterminer si le design sera liquid (élastique) ou plutôt statique c'est à dire fixe pour chaque breakpoint (comme le site IAFACTORY par exemple).

Concevoir le design de l'interaction

La section méthode décrit les techniques de conception de façon détaillée. Il n'est pas question de tout reprendre ici. En résumé vous pouvez procéder comme suit :

  • Lister toutes les fonctions du site : inventaire fonctionnel et liste des gabarits.
  • Déterminer la cartographie du fonctionnement : arborescence fonctionnelle.
  • Modéliser les principaux parcours d'utilisation : scénario stratégique, parcours utilisateur.

Vous gagnez également avoir une excellente vision de l'envergure éditoriale du dispositif :

  • Segmentation des contenus et arborescence.
  • Volume générale des informations, nombre de pages.
  • Type de médias...

En travaillant le design de l'interaction, vous devez bien penser au fait qu'une action réalisée sur ordinateur desktop sera également réalisée sur support mobile, dans un environnement responsive.

Ainsi, chaque choix de conception adaptative requiert une projection et une anticipation du fonctionnement sur les différents points devices identifiés. Vous retiendrez des parcours permettant d'être efficaces en environnement adaptatif et au travers d'interactions tactiles.

Concevoir des écrans adaptatifs

Sur la base de la liste des gabarits, vous allez poser les principes de conception généraux du dispositif digital :

  • Zoning macro transversal.
  • Zoning macro contextuel (processus de commande, descente catalogue).
  • Déclinaisons des zoning généraux pour chaque point de rupture.

Pour chaque zone fonctionnelle, il faudra ensuite détailler le design de l'information de chacun des écrans :

  • Wireframing de l'écran pour l'étalon de conception le plus structurant - le breakpoint le plus important (mobile, ou desktop, ou autre).
  • Projection adaptative de l'écran sur tous les points de rupture.
  • Déclinaison du fonctionnement de tout le dispositif.

Note :
Attention ! 4 breakpoint pour 50 gabarits donnent 200 écrans à concevoir (puis à produire, puis à tester, puis à maintenir !). Rationnalisez le fonctionnement pour éviter une phase de production dantesque.

Démarche pour concevoir un dispositif responsive

Dans la conception d'un dispositif responsive web, il y a quelques étapes incontournables qui peuvent servir de checkpoint dans votre projet. Au moment de concevoir votre site responsive, voici un fil rouge à garder en tête :

  • analyse des dispositifs existants lorsqu'ils existent,
  • études des données analytiques et des statistiques de fréquentation,
  • identification des points de ruptures (breakpoint),
  • détermination des étalons de conception (aspect de l'interface souhaité pour tout ou partie des points de ruptures identifiés),
  • architecture de l'information et principes de navigation flexibles,
  • élaboration de zoning et de grille modulaire,
  • modélisation des écrans structurants du projet pour tout ou partie des points de ruptures,
  • commentaires et spécifications des règles d'affichage,
  • prototype fonctionnel,
  • déclinaison de la conception fonctionnelle en mode responsive.

Autant le dire, la conception d'un dispositif digital de taille critique en mode responsive n'est pas une mince affaire en conception, chaque projet amène son lot de défis.

Travaux complémentaires à la conception d'un site responsive

Il n'est pas rare qu'une conception de site responsive web débouche sur une conception de site mobile, ou inversement qu'une conception de site mobile s'élargisse en un site responsive. De même, si les enjeux du projet sont très importants, on réalise parfois une conception de site tablette spécifique. Les enjeux tiennent souvent aux aspects de chargement, du poids des pages. S'il y a énormément de choses spécifiques pour l'usage en situation de mobilité, alors pourquoi pas... Le plus souvent, la réalité, c'est que la conception responsive est centrée sur la version web "bureau / desktop" et qu'elle embarque tout un lot de choses monstrueuses sur le plan du code et du poids... A ce stade du monde, chaque modèle peut selon les cas, être viable économiquement.

Tout cela doit être étudié sur la base de données chiffrée pour faire les meilleurs arbitrages. Un bon outil d'aide à la décision consiste à analyser les données webanalytiques au travers d'une analyse des performances web...
Par extension, c'est un travail qui relève d'une approche plus générale d'analyse de data.

auteur Julien Muckensturm iafactory
linked in julien muckensturm

Ressources pour la conception responsive

APPROFONDIR
le responsive design

Livre : Responsive web design
Responsive web design

Aller plus loin sur la conception responsive

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 responsive :

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 sympas autour de la conception responsive web en utilisant les commentaires !
Plus de techniques de conception
ADAPTATION MULTI-ECRAN
Conception fonctionnelle des interfaces mobiles : web mobile, application mobile, logiciel mobile...
conception mobile
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 fonctionnelle de sites web : e-commerce, corporate, transactionnel, portail...
conception web
Wireframes
  • réalisé par iafactory
  • livré sous 6J. ouvrés
  • à partir de 3600€ HT