Une Architecture d’Information
adaptée au Mobile.
ParisWeb 2017 — Stéphanie Walter
Slide 2
Slide 2 text
UI & UX designer.
Mobile enthusiast Pixel and CSS Lover.
à Luxembourg chez
www.stephaniewalter.fr @WalterStephanie
Illustration by Laurence V.
Slide 3
Slide 3 text
Connaître et comprendre ses
utilisatrices et utilisateurs
Slide 4
Slide 4 text
Un accès selon leurs conditions
Source : Mobile Behavior Report (2014)
Slide 5
Slide 5 text
Un besoin de fonctionnalités identiques
quelque soit l’appareil utilisé
Source : The New Multi-screen World: Understanding Cross-platform Consumer Behavior (2012)
Slide 6
Slide 6 text
“
“
Capital One a découvert que 96% de leurs
utilisatrices et utilisateurs abandonnent leur
site mobile dédié car il n’offre qu’une infime
partie des contenus proposés sur le desktop.
Responsive Web Design Podcast
Slide 7
Slide 7 text
“
“
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.
Karen Mcgrane – Going Responsive
Slide 8
Slide 8 text
Votre recherche, vos données
Obtenez des données sur VOS utilisatrices et utilisateurs
pour mieux pouvoir prioriser les contenus en fonction de
LEURS besoins :
• Interviews utilisateur;
• Personas ou empathy maps;
• User journey maps;
• User flows;
• Données d’Analytics;
• Etc.
Slide 9
Slide 9 text
Définir des objectifs
Slide 10
Slide 10 text
Vous ne pourrez PAS
vous occuper de
toutes les pages en
une seule fois, il va
falloir faire des
choix : don’t panic !
Slide 11
Slide 11 text
• Les plus longues
• Les plus complexes
• Celles à fort taux de
conversion actuel
• Celles dont tu veux augmenter
le taux de conversion
Définir les pages à
retravailler en priorité
Slide 12
Slide 12 text
Pour chaque page choisie, définir le
ou les objectifs principaux de nos
utilisatrices et utilisateurs.
Slide 13
Slide 13 text
http://inpx.it/parisweb2017
Slide 14
Slide 14 text
Définissez l’objectif principal de la
page produit.
Slide 15
Slide 15 text
Réaliser un Inventaire de
Contenus
Slide 16
Slide 16 text
Identifier et lister les différents modules
de contenus nécessaires pour atteindre
les objectifs fixés de chaque page.
Slide 17
Slide 17 text
Inventaire en
listes
(ou tableau)
Slide 18
Slide 18 text
Inventaire sur
screenshots
du site
Slide 19
Slide 19 text
Exemple de
découpe
modulaire
Karen Mcgrane – Going Responsive
Slide 20
Slide 20 text
Inventaire
sous forme de
Post-it®
Slide 21
Slide 21 text
C’est aussi le moment de jeter un oeil
aux contenus des concurrents (ou sites
du même domaine).
Slide 22
Slide 22 text
Listez les différents contenus
de la page produit :
un module de contenu par Post-it®
(on ne traitera pas la navigation et le pied de page)
Slide 23
Slide 23 text
Prioriser les contenus
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Décisions de module “Mobile First”
On part du plus petit dénominateur commun et on enrichit l’interface et le contenu au fur et à mesure.
Slide 26
Slide 26 text
L’étape suivante : prioriser les
modules les uns par rapport aux
autres sur la page.
Slide 27
Slide 27 text
La colonne de Post-it®
De haut en bas, du plus au moins important
Slide 28
Slide 28 text
Reprenez vos Post-it® et ordonnez-les sur
le mur en une colonne, du plus important
en haut au moins important en bas.
Slide 29
Slide 29 text
Plus « linéaire », moins flexible,
mais un peu plus rapide, elle
permet de comparer rapidement.
Priorisation en tableau
Slide 30
Slide 30 text
Sites complexes : prioriser une 1e fois en 3 sous groupes
“Indispensables”, “Utiles”, “Nice to have”
Slide 31
Slide 31 text
Design et hiérarchie d’éléments
Slide 32
Slide 32 text
Le manque de hiérarchie mène à la confusion
à gauche l’ancienne version avec les outils classés - à droite la nouvelle avec tous les outils au même niveau
Slide 33
Slide 33 text
Hiérarchisation visuelle des contenus
Couleur de l’élément ( de fond/ de texte)
Slide 34
Slide 34 text
Hiérarchisation visuelle des contenus
Taille de l’élément sur la page
Slide 35
Slide 35 text
Hiérarchisation visuelle des contenus
Emplacement de l’élément sur la page
Slide 36
Slide 36 text
Hiérarchisation visuelle des contenus
Gestion des blancs autour de l’élément
Slide 37
Slide 37 text
Hiérarchisation visuelle des contenus
Choix typographiques (graisse, taille, couleur)
Slide 38
Slide 38 text
Contenus à la demande
Les contenus qui ont une priorité plus faible sur mobile peuvent être chargés à la demande.
Slide 39
Slide 39 text
Affichage du module en fonction de la taille disponible
Des onglets sur grand écran peuvent par exemple devenir un accordéon sur petit écran.
Slide 40
Slide 40 text
Sketching de chorégraphie de
contenus
Slide 41
Slide 41 text
À partir de votre colonne de Post-it®,
vous avez plus ou moins déjà la
structure pour le mobile.
Slide 42
Slide 42 text
Chorégraphie de contenus - zoning rapide
Slide 43
Slide 43 text
Chorégraphie de contenu sur papier
Le papier reste un outil pratique et rapide pour communiquer la chorégraphie de
contenu à la personne en charge de l’intégration.
Slide 44
Slide 44 text
À partir de votre priorisation de
contenus, proposez un zoning
papier mobile puis écran de bureau.
Slide 45
Slide 45 text
En résumé
• Comprendre ses utilisateurs
• Décider des pages à traiter
• Définir le ou les objectifs de chaque page
• Réaliser un inventaire des contenus
• Prioriser les différents contenus dans une
optique “mobile first”
• Construisez vos zoning et wireframes multi
écran.
Slide 46
Slide 46 text
www.stephaniewalter.fr @WalterStephanie
Illustration by Laurence V.
Attribution-NonCommercial-NoDerivs 3.0 France (CC
BY-NC-ND 3.0 FR)