Slide 1

Slide 1 text

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)