Page 1

Documentations et livrables UX d’un projet interactif Ce document présente brièvement les définitions et les objectifs de chaque livrable principal possible d’un projet interactif. Il permet de valider et d’uniformiser le processus d’élaboration d’un projet. La communication entre les intervenants est donc facilitée. Inspiré du livre Communicating Design: Developing Web Site Documentation for Design and Planning de l’auteur Dan Brown. Les livrables permettent de:  Garder une vision constante  Responsabiliser chacun des intervenants dans le projet  Documenter les changements apportés aux documents tout au long du projet

Il existe 12 livrables de base. Ces livrables sont divisés en quatre types de documents :  Les documents décrivant les besoins usagers et les objectifs d’affaires qui s’y rattachent.  Les documents décrivant les stratégies d’affaires et les concepts d’expériences usagers  Les documents décrivant les éléments du design à produire  Les documents décrivant les éléments de production et développement

En début de projet, il est primordial d’établir avec le client et les intervenants clés du projet le niveau de détails de chaque livrable. Aucune surprise. Le budget, le temps alloué au projet et la qualité des livrables sera valider par tous les intervenants.

LES DOCUMENTS DÉCRIVANT LES BESOINS USAGERS ET LES OBJECTIFS D’AFFAIRES Types Description Notes Personae et modèles mentaux

Détails sur les audiences cibles, les besoins usagers, rapports de recherche sur les comportements attendus.

Plans de test d’utilisabilité

Grille d’analyse et critères pour mesurer le succès des tests d’utilisabilité qui pourrait être performés.

Rapports d’utilisabilité

Évaluation des rapports d’utilisabilité créés suite aux tests usagers qui ont été planifiés.

Par Emmanuelle | 2009.03.23 | v1.0

1


LES DOCUMENTS STRATÉGIQUES Types Description

Notes

Modèle conceptuel

Illustration des concepts expliquant la structure des processus applicatifs et la nature de leurs interactions avec les profils usagers.

Exemple existant (à modifier)

Inventaire des contenus

Il permet de visualiser la hiérarchie d'information et saisir les contenus existants et les contenus à développer.

Exemple existant (à modifier)

Cette liste indique entre autre : les sections, les hyperliens, les call-to-actions, les versions de contenu (anglais, français, etc.), les statuts des contenus (brouillon, en ligne, archive, etc.), etc. Daniel M Brown, architecte de l'information et UX designer, définie l’inventaire de contenu comme étant ''A list of all the information contained in a web site, along with data that describes the information from several points of view, like target audience or location. Also know as a content analysis audit.''

Analyses de la compétition

Communément appelé Benchmarking.

Exemple existant (à modifier)

Clarification des objectifs d’affaires et identification des fonctionnalités, de la structure, et des modèles de navigation.

Voir aussi: http://www.digitalweb.com/articles/competitive_ analysis_part_2/

Par Emmanuelle | 2009.03.23 | v1.0

2


LES DOCUMENTS VISUELS Types Description Carte du site

Représentation visuelle de la structure du site Web, de son contenu, de ses fonctionnalités et des interrelations entre les pages.

Notes Voir Raymond Chabot ou SSense.

Un des pionniers en architecture de l'information, Jesse James Garrett, définit la structure de navigation comme un '' development of application flows to facilitate user tasks, defining how the user interacts with site functionality.'' Diagrammes d’activités: - FlowCharts - Use Cases - StoryCards

Wireframes (Maquettes)

Identification des parcours et des contenus accessibles selon le profil usager, des différentes directions de navigation, des messages d’erreurs, de confirmations, etc. Bref, ces diagrammes détaillent les interactions entre les profils usagers et les systèmes applicatifs. Le wireframe présente de façon simplifiée l'emplacement et la structure des éléments visuels, de navigation et d'information de chaque interface. Aucune couleur, typographie, ou visuel sont utilisés à cette étape. Aussi, il est important d’identifier les gabarits type. Les wireframes sont produit avec des contenus de basse, de moyenne ou de haute fidélité. J.J. Garrett compare le wireframe à un squelette ou un gabarit regroupant différents systèmes de navigation ''each navigation systems are designed to convey a different view of the architecture; all the interface elements; and the information design that supports both of these, as well as the information design of the page itself.''

Design des interfaces

Exemple à réaliser

Communication des qualités graphiques (Look and Feel) et ergonomiques que devraient avoir certains des éléments composant la structure des pages. Sous-formes de notes additionnelles et d’illustrations normalement ajoutées aux wireframes et parfois en annexes.

Par Emmanuelle | 2009.03.23 | v1.0

WF basse fidélité : Exemple à réaliser WF moyenne fidélité : Raymond Chabot est construit en moyenne-haute fidélité : construit au pixel prêt, emplacement des éléments, rédaction des CTA et labelling conceptuel, etc. WF haute fidélité : Voir SSense – page Product Details ou page Checkout (Contenu et labelling réel, formulaire et champs réels, dimensions de la structure et des contenus sont réels, présentation des étapes des tâches et des interactions, construit au pixel prêt etc.)

Le projet Raymond Chabot présente des exemples fournis pour exprimer le comportement du menu de la navigation principale et le RSS (voir UXbooth). Aussi, il était nécessaire de présenter des exemples pour le forum en 2 colonnes + sujets contextuels

3


LES DOCUMENTS DE PRODUCTION Types Description

Notes

Prototype

Voir exemple Raymond Chabot

Le prototype présente les interactions et les comportements des éléments d'un wireframe qui ne peuvent être communiquées par écrit. Il permet de valider les choix de conception et de navigation, et de détecter les éléments manquants.

En cours de création, une librairie de patterns avec le logiciel Axure.

Selon le designer de l'expérience utilisateur Steve Psomas, le prototype ''can alleviate uncertainty about design intentions, clarify functionality, and reduce the need for documentation.'' Spécifications fonctionnelles

Ce document présente de manière organisé l’inventaire complet des interactions et des éléments utilisés pour produire les wireframes.

Axure génère des spécifications à partir des annotations écrites par le UX Designer dans le prototype Axure.

Crucial pour faciliter, planifier et gérer la production.

Par Emmanuelle | 2009.03.23 | v1.0

4


Presentation UX  

Lorem ipsum dolor sit amet

Advertisement
Read more
Read more
Similar to
Popular now
Just for you