{"id":6506,"date":"2017-10-11T09:41:15","date_gmt":"2017-10-11T07:41:15","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=6506"},"modified":"2019-03-25T10:12:53","modified_gmt":"2019-03-25T09:12:53","slug":"architecture-information-optimisation-mobile","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/architecture-information-optimisation-mobile\/","title":{"rendered":"Construire Une Architecture d’Information adapt\u00e9e au Mobile – ParisWeb 2017"},"content":{"rendered":"
J’ai donn\u00e9 samedi 7 octobre 2017\u00a0un atelier \u00e0 ParisWeb<\/a>\u00a0pour aider les concepteurs webs, UX, int\u00e9grateurs, etc. \u00e0 construire une architecture d’information adapt\u00e9e au mobile.<\/p>\n Voici la description de l’atelier :<\/p>\n Pensez-vous vraiment qu’une utilisatrice qui regarde une s\u00e9rie en ligne tout en cherchant les horaires d’ouverture de votre magasin sur son mobile a tout son temps et surtout toute sa capacit\u00e9 de concentration \u00e0 vous accorder ?<\/p>\n Dans un monde multit\u00e2che et multi-\u00e9crans, permettre d’acc\u00e9der facilement et rapidement aux informations essentielles d’une page devient crucial. Et lorsque l’on travaille sur des pages de plus en plus surcharg\u00e9es avec des contenus complexes, prioriser ses contenus est rarement facile.<\/p>\n Dans cet atelier, nous verrons diff\u00e9rentes m\u00e9thodes et exercices de conception qui vous permettront d’arriver \u00e0 construire plus facilement votre architecture d’information et prioriser les contenus en fonction des diff\u00e9rentes tailles de m\u00e9dias.<\/p><\/blockquote>\n L’atelier pratique \u00e9tait d\u00e9coup\u00e9 en plusieurs exercices pas \u00e0 pas pour optimiser une fiche produit responsive<\/a>. Je ne pensais vraiment pas avoir autant de monde et aurais souhait\u00e9\u00a0 faire plus de pratique et de mise en commun avec les participants que ce qui a \u00e9t\u00e9 possible. J’ai chang\u00e9 les exercices quand le staff m’a annonc\u00e9 qu’ils m’ont assign\u00e9 une salle de 90 personnes, le but \u00e9tait donc plus de pr\u00e9senter une m\u00e9thodologie applicable \u00e0 diff\u00e9rentes tailles de projet.<\/p>\n Dans la vraie vie loin des conf\u00e9rences, ces petits exercices sont des choses que l’on peut faire en atelier avec des d\u00e9cideurs, des clients, des utilisateurs.<\/p>\n J’ai donn\u00e9 plusieurs statistiques sur les comportements des utilisateurs mobiles durant l’atelier. De mani\u00e8re g\u00e9n\u00e9rale il faut retenir que nos utilisateurs sont de plus en plus mobile first<\/em>, souhaitent acc\u00e9der aux contenus selon leurs conditions, passent d’un appareil \u00e0 un autre.\u00a0Beaucoup d\u2019entreprises ; de Microsoft \u00e0 Financial, Retail, Quartz n\u2019ont trouv\u00e9 que peu de diff\u00e9rences entre le comportement des utilisatrices et utilisateurs sur mobile et sur desktop<\/b>.<\/p>\n <\/p>\n Au final, m\u00eame si les donn\u00e9es g\u00e9n\u00e9ralistes sont int\u00e9ressantes, rien ne vaudra vos propres recherches et donn\u00e9es sur vos utilisateurs et utilisatrices.\u00a0Interviews utilisateur, personas ou empathy maps, user journey maps, user flows, donn\u00e9es d\u2019Analytics, etc. sont vos meilleurs outils pour bien commencer un projet.<\/p>\n 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 \u00e0 retravailler en priorit\u00e9 sont souvent :<\/p>\n Pour chaque page choisie, l’\u00e9tape suivante est donc de\u00a0d\u00e9finir le ou les objectifs principaux de nos utilisatrices et utilisateurs.<\/p>\n <\/p>\n En atelier, cet exercice permet aux d\u00e9cideurs 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.<\/p>\n Une fois que vous aurez list\u00e9 les pages et d\u00e9fini les objectifs principaux de chacune d’elle il vous faudra, pour chacune, identifier et lister les diff\u00e9rents modules de contenus n\u00e9cessaires pour atteindre les objectifs fix\u00e9s de chaque page. Cet inventaire de contenu peut prendre plusieurs formes<\/p>\n <\/p>\n <\/p>\n <\/p>\n A ce stade l’ordre n’a que peu d’importance puisque nous allons classer les contenus dans l’\u00e9tape suivante.<\/p>\n C’est \u00e9galement le moment d’ajouter les fonctionnalit\u00e9s et contenus suppl\u00e9mentaires dans votre liste dans le cadre d’une refonte.<\/p>\n En atelier, cet exercice peut \u00eatre tr\u00e8s long voir compliqu\u00e9 pour des utilisateurs ou d\u00e9cideurs qui ne sont pas habitu\u00e9s \u00e0 devoir d\u00e9couper les sites en modules. Il vaut donc parfois mieux ne pas le faire avec les clients et le pr\u00e9parer en amont.\u00a0 Il est aussi possible de commencer par la version post-it avec laquelle les gens sont souvent plus \u00e0 l’aise et de passer ensuite sur une m\u00e9thode liste \/ tableau une fois que les personnes se sentent plus \u00e0 l’aise et en confiance.<\/p>\n Comme indiqu\u00e9 plus haut, l’\u00e9tape suivante est alors de\u00a0prioriser les modules les uns par rapport aux autres sur la page. Il s’agit ici de faire une priorisation de mani\u00e8re hi\u00e9rarchique ind\u00e9pendamment du visuel de la page, mais vous allez bien souvent vous rendre compte que cette hi\u00e9rarchie va fortement influencer la mise en page.<\/p>\n 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\u00e8s complexes, on peut commencer par trier les post-its en 3 cat\u00e9gories,\u00a0\u201cIndispensables\u201d, \u201cUtiles\u201d, \u201cNice to have<\/em>\u201d et ensuite prioriser les post-it \u00e0 l’int\u00e9rieur de ces cat\u00e9gories.<\/p>\n En atelier, cette partie tr\u00e8s fun et ludique permet souvent aux diff\u00e9rentes \u00e9quipes (marketing, technique, design, etc.) d’aligner leurs objectifs et de se mettre d’accord sur les contenus de la page.<\/p>\n <\/p>\n (Photo par Geoffrey Crofte)<\/em><\/p>\n Si vous avez opt\u00e9 pour ma m\u00e9thode liste \/ tableau, vous allez attribuer des chiffres \u00e0 chaque contenu pour pouvoir les prioriser les uns par rapport aux autres (voir l’exemple visuel dans les slides)<\/p>\n \u00c0 partir de votre colonne de Post-it\u00ae ou de votre liste de contenus class\u00e9s, vous avez plus ou moins d\u00e9j\u00e0 <\/span>la structure pour le mobile<\/span>. Construire un zoning ou wireframe de chor\u00e9graphie de contenu est donc \u00e0 ce stade grandement facilit\u00e9.<\/span><\/p>\n <\/p>\n Comme je le disais en atelier, ce n’est pas aux d\u00e9veloppeurs et int\u00e9grateurs de devoir prendre les d\u00e9cisions de contenus pour les diff\u00e9rentes tailles d’\u00e9cran. Fournir des maquettes du site dans 3 ou 4 tailles diff\u00e9rentes reste chronophage, un zoning ou simple wireframe papier peuvent souvent suffire.<\/p>\n <\/p>\n Les slides sont disponibles ici<\/a>\u00a0et ci-dessous :<\/p>\nL’atelier<\/h2>\n
R\u00e9sum\u00e9 de la m\u00e9thodologie pour hi\u00e9rarchiser des contenus pour le mobile<\/h2>\n
1. Conna\u00eetre et comprendre ses utilisatrices et utilisateurs<\/h3>\n
2.\u00a0D\u00e9finir des objectifs<\/h3>\n
\n
\n
3.\u00a0R\u00e9aliser un Inventaire de Contenus<\/h3>\n
\n
\n
\n
4.\u00a0Prioriser les contenus mobile first<\/em><\/h3>\n
5.\u00a0Sketching de chor\u00e9graphie de contenus<\/h3>\n
Les slides de l’atelier<\/h2>\n