Méthodologie de Design UX...2018/01/04 · Inventaire des contenus : poser à plat l’ensemble des contenus du site • Optimisation SEO, mots-clés : améliorer le référencement

2017Gobelins, l'Ecole de l'image

Magali DULOT

Formatrice et Consultanteen Expériences Digitales

Méthodologie de Design UXPhase d’organisation

Les étapes du projet UX

Immersion

1

Idéation

2

Organisation

3 4

Production

La stratégie de contenu

- 3 Méthodologie de Design UX - Organisation Magali DULOTConsultante et formatrice en UX design

Découverte

Analyse de l’existantAUDIT

2

Expression du besoinCADRAGE

1

Construire l’interface Itération et feedback Fonctionnelles et graphiquesPROTOTYPAGE TESTS UTILISATEURS SPÉCIFICATIONS

4 5 6

Développement Livraison

Design thinking Design doing

Phasededéfinition:

▼ Fixe le périmètre du projet : fonctionnalités, contenu

• Inventaire des contenus : poser à plat l’ensemble des contenus du site

• Optimisation SEO, mots-clés : améliorer le référencement du site

• Arborescence : présentation graphique de l’organisation de l’information du site

• Mise au point de la navigation principale et de ses fonctionnalités majeures en fonction des Personas

• Inventaire des parcours utilisateurs : - Concrétiser les besoins des Personas sous forme de parcours - Établir la liste des actions que les visiteurs veulent accomplir sur le site - Permettre d’orienter la conception du site

• Inventaire des gabarits et fonctionnalités : - Permet de détailler de manière précise l’intégralité de éléments nécessaires à la fabrication du site

Atelier client de restitution pour validation• Présentation de l’arborescence• Présentation des parcours

utilisateurs• Présentation du menu

Livrables• Arborescence• Parcours utilsateurs• Menu

Définition

3

Structurer le contenu

ARCHITECTURE DE L’INFORMATION

Stratégie de contenu

Organisation



➜➜ Pour définir une stratégie de contenus…



➜➜ L’inventaire des contenus constitue la base de tout travail d’architecture de l’information et de toute stratégie éditoriale.

➜■ Travail fastidieux mais indispensable !

➜■ Constiste à lister tous les contenus en ligne et hors ligne d’une entreprise, à les quantifier et à les qualifier.

➜■ Document central qui fournit une vision exhaustive des «pièces du puzzle»

➜■ L’architecte de l’information s’appuiera sur cette liste des contenus pour dresser l’arborescence



➜➜ Ce qu’on entend par « contenus ».

Les différents types de contenu à regrouper en dossiers : document excel

➜■ Texte

➜■ Vidéo

➜■ Son

➜■ Image

➜■ Modules interactifs

➜■ Documents à télécharger

➜■ Etc...



Formaliser les idées obtenues



La structuration permet de passer d’un ensemble de groupes à un ensemble de groupes hiérarchisés et ordonnés




➜■ Formaliser et organiser les idées retenues afin de proposer des axes d’amélioration du site

➜■ Identifier les problèmes à résoudre qui doivent être communiqués clairement au client




➜➜ L’étape de formalisation sert à élaborer des ébauches de réponses aux problèmes :

➜■ Le contenu

➜■ La structuration

➜■ Les parcours utilisateurs


- 12Méthodologie de Design UX - Organisation Magali DULOTConsultante et formatrice en UX design

➜➜ Le contenu : comment l’appréhender ?

➜■ C’est ce qui motive la visite dès le départ mais ne bénéficie pas toujoursde l’attention qu’il mérite (≠ les fonctionnalités ou le design)

➜■ Ce n’est pas que le texte mais aussi les images, les videos, les sons,les données, les données générées par l’utilisateur «User Generated Content»(commentaires, notes, ...)

➜■ Penser l’information comme une tâche : l’information doit être orientée pour l’action



➜➜ Le contenu : comment l’appréhender ?

➜■ Favoriser l’interactivité et l’interopérabilité :

• Capacité que possède un produit ou un système, à fonctionner avecd’autres produits ou systèmes existants ou futurs et ce sans restrictiond’accès ou de mise en œuvre.



➜➜Le contenu : du fond vers la forme...

➜■ Anticiper les actions de l’utilisateur : qu’est-ce qu’il va en faire ?

➜■ Définir la stratégie de contenu et sa fonction : étape essentielle

• A quoi sert le contenu ?• Qu’est-ce que les utilisateurs vont en faire ?• Quelle est sa fonction ?



➜➜Le contenu : du fond vers la forme...

➜■ De ces fonctions vont découler de façon logique toutes lescaractéristiques de formes : durée, cadrage, hiérarchie, mots-clés,clés de tri pour filtrer les résultats...

➜■ L’usage du contenu guide le design d’interaction : outils de partage,exports, téléchargements, liens hypertexte, ...



Technique du Tri de Carte

Brainstorming contenu puis séance collective de tri de cartes, afin d’établir une ébauche d’arborescence du projet

jeudi 21 novembre 13



Un tri de carte c’est quoi ?ou «Card sorting»

➜■ Session durant laquelle les participants doivent organiseret regrouper des cartes représentatives d’un ensemblede contenus.

➜■ Utilisé pour comprendre le schéma mental des utilisateurset leurs associations de pensée

➜■ Bénéfique pour architecturer l’information




➜■ Révèle naturellement la façon dont les utilisateurs regroupentinstinctivement les choses : comprendre leur logique

➜■ Permet de prendre des décisions sur les systèmes denavigation, les relations hiérarchiques et sémantiquesentre les différents contenus

➜■ Se fonde sur le fait que nous avons tous en tête des catégoriesprésupposées pour organiser, trier et classer des objets




➜■ Exemple : si l’on demande à quelqu’un où ranger un peigne dansune maison, il indiquera certainement la salle de bain.

➜■ Si c’est si évident, pourquoi on fait cet exercice ?

• Tout le monde ne résonne pas forcément de la même manière (exemple : onrange tous notre ordinateur différemment...)

• Ou on peut trouver le peigne rangé dans le salon....



La structuration : l’architecture de l’information



L’architecturede l’information



L’architecture de l’information c’est quoi ?

➜■ Définition : la structure d’organisation relative à un système decontenu. On parle d’architecture de l’information par analogieavec l’architecture physique des bâtiments que nousconstruisons dans le monde réel.

➜■ La différence réside essentiellement dans le type de matière quidéfinit le produit final et dans les méthodes employées pourréfléchir et dessiner l’architecture.



L’architecture de l’information c’est quoi ?

➜■ Représente les fondations de l’interface.

➜■ Si elle est bien pensée, c’est elle qui permettra à l’utilisateurde se repérer et de naviguer facilement dans un site, de lamême manière que les indicateurs physiques permettent de serepérer et de se déplacer efficacement dans les espaces réels.



➜■ Nécessite de définir des référents pour que l’utilisateur puissese repérer dans l’interface : savoir où il est, où il peut aller, ...

• ➜Ces référents peuvent être comparés aux repères dans les espacesphysiques :➜• Un item d'un menu principal joue le même rôle qu'un panneau

d'affichage dans un espace public.• Sur le web, le menu permet d'atteindre une page contenant une information

précise. Dans la réalité, les panneaux permettent de trouver l'endroit désiré.

➜➜ En général, les codes les plus efficaces sont les motset les pictogrammes.



➜➜La structuration : le début de l’arborescence

➜■ Dégager une vue d’ensemble plus hiérarchisée : mettre en valeurcertains contenus, effectuer des connexions pertinentes entre les éléments

➜■ Classiquement, la page d’accueil comporte un menu qui permetd’accéder aux pages de sections

➜■ Pages de sections mènent aux pages de contenu

➜■ Section = page servant de sous-sommaire ou «Landing page»ou page d’arrivée qui ont un rôle important dans le référencement



Structure arborescente classique d’un site web




➜■ Section = intitulés fédérateurs dans la barre de navigation

➜■ Clic sur l’intitulé =

• Apparition de sous-menu (liste des pages) OU

• Mène directement à la 1ère page de section



Structure arborescente avec des intitulés fédérateurs

Intitulé Intitulé Intitulé




➜■ Structure en général pyramidale avec au minimum 3 niveaux :

• Page d’accueil : niveau 0• Sections : niveau 1• Pages de contenu : niveau 2• Etc....




➜■ Prendre en compte les catégories mentales des utilisateurs

• Les 1er niveaux de l’arborescence = catégories mentales des internautesrévélées lors de la séance du tri de carte

• Exclusifs : 1 contenu = 1 seule section

• Univoques : facilement compréhensifs et prévisibles

• Signalétiques : barre de navigation = panneau de direction sur la route

➜➜ Simplicité - logique - concision




➜■ Représenter visuellement l’arborescence pour identifierses faiblesses

• Juger son équilibre : simplifier les clés d’entrée (pas plus de 7 en général)

• Possibilité d’avoir plusieurs hypothèses : formaliser diverses options et lestester dans la phase suivante pour voir quelle est la plus efficace

• Règles : les parcours doivent être simples et rapides, avoir des retours clairspour ne pas perdre ou gêner l’utilisateur



Les parcours utilisateurs



➜➜ Les parcours utilisateurs consistent à établir la liste des actionsque les visiteurs veulent accomplir sur une interface.

➜■ Permettent d’orienter la conception du site vers des attentes concrètesafin d’y répondre de manière pertinente.

➜■ Que cherche à accomplir le visiteur ?

➜■ Exemples d’objectifs précis :

• Consulter les offres d’emploi,• Localiser des magasins implantés dans la région,• Acheter un produit,• S'abonner à une newsletter,• ....



➜➜Les parcours utilisateurs : flux ou «flow charts»

➜■ Diagrammes de flux : symbolisent de manière schématiquel’interaction entre les utilisateurs et le système

➜■ Permet de définir le comportement du système : validation,affichage de messages, envoi d’e-mail ou de SMS, ...

➜■ Exemples : tunnels d’achats, virements bancaires (les systèmes de sécurité imposent plusieurs niveaux de validation)



➜➜Les parcours utilisateurs : flux ou «flow charts»

➜■ Parcours linéaire : LIVRABLE• Constituent une étape de validation, peuvent être facturables,

base de travail pour le reste de l’équipe• Rôle d’un livrable : communiquer clairement une étape d’avancement auprès

du client et de l’équipe interne

➜■ Représenter les résultats sous forme visuelle :• Plan de construction ou maquette d’architecte• Séries de croquis détaillés des interfaces (applications mobiles)• Schéma de service (tunnel d’achat, ...)



➜■ Que doit-on voir dans un parcours utilisateur ?• Tracer le parcours réel, pas à pas, de votre persona en train de réaliser

une action : consultation d’info, téélchargement d’un doc, ...• Ne décrire que les actions les plus fréquentes sur le site (missions des

personas)• Formaliser les étapes : décomposer chaque action les unes après les autres

en une suite logique• 2 niveaux de détail : le parcours utilisateur + les flux d’interaction entre le

site et l’internaute• Parcours utilisateur représente la navigation sous forme d’étapes

successives, ponctuée de descriptions des flux d’interaction• Flux d’interaction : échanges entre le site et l’internaute si besoin de réponse

du système



Reprendre les objectifs des persona



Détailler leurs parcours concrets sur l’interface

Atelier collaboratif

Réaliser le parcours utilisateur de votre persona en reprenant tous ses besoins au préalable

Exercice