Construire Une Architecture d’Information adaptée au Mobile – ParisWeb 2017

J’ai donné samedi 7 octobre 2017 un atelier à ParisWeb pour aider les concepteurs webs, UX, intégrateurs, etc. à construire une architecture d’information adaptée au mobile.

L’atelier

Voici la description de l’atelier :

Pensez-vous vraiment qu’une utilisatrice qui regarde une série en ligne tout en cherchant les horaires d’ouverture de votre magasin sur son mobile a tout son temps et surtout toute sa capacité de concentration à vous accorder ?

Dans un monde multitâche et multi-écrans, permettre d’accéder facilement et rapidement aux informations essentielles d’une page devient crucial. Et lorsque l’on travaille sur des pages de plus en plus surchargées avec des contenus complexes, prioriser ses contenus est rarement facile.

Dans cet atelier, nous verrons différentes méthodes et exercices de conception qui vous permettront d’arriver à construire plus facilement votre architecture d’information et prioriser les contenus en fonction des différentes tailles de médias.

L’atelier pratique était découpé en plusieurs exercices pas à pas pour optimiser une fiche produit responsive. Je ne pensais vraiment pas avoir autant de monde et aurais souhaité  faire plus de pratique et de mise en commun avec les participants que ce qui a été possible. J’ai changé les exercices quand le staff m’a annoncé qu’ils m’ont assigné une salle de 90 personnes, le but était donc plus de présenter une méthodologie applicable à différentes tailles de projet.

Dans la vraie vie loin des conférences, ces petits exercices sont des choses que l’on peut faire en atelier avec des décideurs, des clients, des utilisateurs.

Résumé de la méthodologie pour hiérarchiser des contenus pour le mobile

1. Connaître et comprendre ses utilisatrices et utilisateurs

J’ai donné plusieurs statistiques sur les comportements des utilisateurs mobiles durant l’atelier. De manière générale il faut retenir que nos utilisateurs sont de plus en plus mobile first, souhaitent accéder aux contenus selon leurs conditions, passent d’un appareil à un autre. Beaucoup d’entreprises ; de Microsoft à Financial, Retail, Quartz n’ont trouvé que peu de différences entre le comportement des utilisatrices et utilisateurs sur mobile et sur desktop.

Au final, même si les données généralistes sont intéressantes, rien ne vaudra vos propres recherches et données sur vos utilisateurs et utilisatrices. Interviews utilisateur, personas ou empathy maps, user journey maps, user flows, données d’Analytics, etc. sont vos meilleurs outils pour bien commencer un projet.

2. Définir des objectifs

Vous ne pourrez PAS vous occuper de toutes les pages en une seule fois, il va falloir faire des choix : ne paniquez pas ! Les pages à retravailler en priorité sont souvent :

• • Les plus longues
  • Les plus complexes
  • Celles à fort taux de conversion actuel
  • Celles dont tu veux augmenter le taux de conversion

Pour chaque page choisie, l’étape suivante est donc de définir le ou les objectifs principaux de nos utilisatrices et utilisateurs.

En atelier, cet exercice permet aux décideurs d’aligner leurs objectifs pour les pages. Parfois c’est un exercice bien plus difficile qu’il n’y parait qui peut prendre pas mal de temps.

3. Réaliser un Inventaire de Contenus

Une fois que vous aurez listé les pages et défini les objectifs principaux de chacune d’elle il vous faudra, pour chacune, identifier et lister les différents modules de contenus nécessaires pour atteindre les objectifs fixés de chaque page. Cet inventaire de contenu peut prendre plusieurs formes

• Inventaire en listes  (ou tableau) : sous forme de document texte, listez les contenus du site

• Découpe modulaire sur screenshot : on imprime le site, on définit des modules sur la feuille imprimée en entourant les différents contenus

• Inventaire sous forme de Post-it® : il s’agit de lister les différents contenus de la page, un contenu par post-it.

A ce stade l’ordre n’a que peu d’importance puisque nous allons classer les contenus dans l’étape suivante.

C’est également le moment d’ajouter les fonctionnalités et contenus supplémentaires dans votre liste dans le cadre d’une refonte.

En atelier, cet exercice peut être très long voir compliqué pour des utilisateurs ou décideurs qui ne sont pas habitués à devoir découper les sites en modules. Il vaut donc parfois mieux ne pas le faire avec les clients et le préparer en amont.  Il est aussi possible de commencer par la version post-it avec laquelle les gens sont souvent plus à l’aise et de passer ensuite sur une méthode liste / tableau une fois que les personnes se sentent plus à l’aise et en confiance.

4. Prioriser les contenus mobile first

Comme indiqué plus haut, l’étape suivante est alors de prioriser les modules les uns par rapport aux autres sur la page. Il s’agit ici de faire une priorisation de manière hiérarchique indépendamment du visuel de la page, mais vous allez bien souvent vous rendre compte que cette hiérarchie va fortement influencer la mise en page.

Si vous avez fait votre inventaire sur des post-its, reprenez-les et ordonnez-les sur le mur en une colonne, du plus important en haut au moins important en bas. Pour des sites très complexes, on peut commencer par trier les post-its en 3 catégories, “Indispensables”, “Utiles”, “Nice to have” et ensuite prioriser les post-it à l’intérieur de ces catégories.

En atelier, cette partie très fun et ludique permet souvent aux différentes équipes (marketing, technique, design, etc.) d’aligner leurs objectifs et de se mettre d’accord sur les contenus de la page.

(Photo par Geoffrey Crofte)

Si vous avez opté pour ma méthode liste / tableau, vous allez attribuer des chiffres à chaque contenu pour pouvoir les prioriser les uns par rapport aux autres (voir l’exemple visuel dans les slides)

5. Sketching de chorégraphie de contenus

À partir de votre colonne de Post-it® ou de votre liste de contenus classés, vous avez plus ou moins déjà la structure pour le mobile. Construire un zoning ou wireframe de chorégraphie de contenu est donc à ce stade grandement facilité.

Comme je le disais en atelier, ce n’est pas aux développeurs et intégrateurs de devoir prendre les décisions de contenus pour les différentes tailles d’écran. Fournir des maquettes du site dans 3 ou 4 tailles différentes reste chronophage, un zoning ou simple wireframe papier peuvent souvent suffire.

Les slides de l’atelier

Les slides sont disponibles ici et ci-dessous :

En conclusion

Je fais souvent ce genre d’exercices avec des décideurs, des utilisateurs ou avec d’autres designers et intégrateurs de l’équipe pour nous permettre de prendre les bonnes décisions en terme de mise en page. Dans le cadre d’un atelier UX, il  fonctionne bien avec 6 à 8 personnes maximum, au delà ça devient difficile à gérer.

Et encore une fois, un gros merci à toutes les participantes et participants de mon atelier samedi :)

** merci Geoffrey pour la relecture et le coup de main durant l’atelier **