Conférence présentée lors du FLUPA UX-Day 2012 à Paris : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller (Valtech)

1. L’UX d’accord, mais que fait le storyboard ?
Par Ewane Prevotat-Deiller
FLUPA UX-Day 2012, Paris

2. 1. Introduction
2. Analyse de la demande
3. Reformulation : qu’est ce que l’UX?
4. Cas concrets
5. Conclusions

3. Introduction
L’UX d’accord
mais que fait le storyboard ?

4. 2. Analyse de la demande

5. Développeurs
C’est le déroulement de l’histoire pour une vidéo
ou une application avec plus ou moins de détails
en fonction de l’état d’avancement. A ne pas
confondre avec des spécifications ou la créa.
C’est à peu près comme dans le cinéma, ça sert à
définir les enchainements et les actions possibles
pour un site web.
Ça sert à raconter une histoire et à définir les
cinématiques d’écran.
Cinéma tique

6. Chef de projet
Ça sert simplement à représenter les
proportions, le placement des objets dans la page
de façon à avoir un truc harmonieux et pas oublier
les choses
C’est la représentation fonctionnelle des écrans et
la scénarisation des enchainements.
C’est ce qui permet de définir l’architecture de
l’information er les procédés d’interaction d’un
site internet
Fonctionnalité Interactions

7. SEO
C’est la représentation illustrée de la mécanique
de ton site internet. ça permet de connaitre la
succession des différentes étapes
C’est la première version. Ca permet de mettre à
plat l’idée que tu souhaites développer en amont
du design. Pour moi c’est du dessin le storyboard.
C’est ce qui permet de définir l’architecture de
l’information er les procédés d’interaction d’un
site internet
Illustration Architecture

8. Design
Déjà à identifier les différents types de pages à
réaliser, à voir une vue de chaque page
globalement. A définir les éléments dans chaque
bloc sur différents niveaux d’information.
Avoir tout le contenu, savoir comment il est
placé, avoir les interactions entre les pages. C’est
guider un peu la mise en page.
C’est ce qui permet de définir l’architecture de
l’information er les procédés d’interaction d’un
site internet
Contenus Interactions Zoning

9. Client
C’est la pré-version non technique
du site web avec les interactions et
l’ergonomie.
Site internet

10. 2. Analyse de la demande - Vu par

11. Header
Logo, nom de la société + baseline
Navigation principale
Accès panier avec affichage détaillé
au roll over
Push principal de la page. Misa à jour
hebdomadaire en fonction de l’actualité.
Retour d’expérience des acteurs.
Bloc SEO à vocation de réassurance.
Liste des acteurs et des partenaires.
Accès à la fiche détaillée avec
coordonnées et contact direct.
Zone évènementielle
Une barre d’onglet pour fournir un Service de sélection de date avec
accès direct aux offres spéciales rafraichissement de la liste des évènements
organisées par profil associés. Partage, intégration au
calendrier…

12. Le chef de projet
Le chef de projet

13. Le développeur
Développeur

14. Le consultant SEO
SEO

15. Le designer
Designer

16. Le client
SEO

17. 3. Reformulation L’UX
L’UX vu par …

18. Don Norman en 1995
I invented the term because I thought human interface and usability were
too narrow.
(…) Cover allaspects of the person’s experience with the system including
industrial design, graphics, the interface, the physical
interaction, and the manual.

19. Don Norman en 2010
The term has spread widely, so much so that it is
starting to lose it’s meaning…

20. Quelques définitions
http://www.allaboutux.org/ux-definitions

21. Une représentation
http://www.kickerstudio.com

22. Qui
Directeur artistique
UX designer
Expert IHM
UI designer
Experience designer
Chargé d’études UX
Web designer
Ergonome
UX expert Usability consultant
Designer
Interaction designer
Directeur création
Graphic designer
Cognitive consultant Infographiste
Visual designer
UX consultant
Concept designer
http://vitamintalent.com/

23. Rappel
L’objectif de l’ergonomie est l’adaptation des produits
et des systèmes aux caractéristiques physiologiques
et cognitives des utilisateurs (facteurs humains)

24. Rappel
Par principe, la création graphique n’a pas de
principes, elle n’a que des aspirations : inventer, ou à
défaut rendre visible, avec
l’image, l’harmonie, l’essentiel d’un ensemble
d’idées

25. 4. Cas concrets : du story au design
UN CRÉATIF
DA, GRAPHISTE, DC, DESIGNE
R, MOTION...
UN ERGONOME
ERGO, UX DESIGNER,

26. Types de storyboard
CDP SEO
FONCTIONNEL DÉTAILLÉ
Balsamiq
Powerpoint Omnigraffle
Justinmind
STORYBOARD
Pidoco
…
Axure
CLIENT Photoshop
DEV
DESIGN
INTERACTIF
http://www.cennydd.co.uk/2012/why-i-dont-
wireframe-much/

27. 4. Cas concret n 1

28. Le client et le storyboard
« C’est pas beau »

29. Le client et le design
« C’est pas ergonomique »

30. Analyse
 Le fond et la forme
 Expertise client
« j’ai un ipad »

31. 4. Cas concret n 2

32. L’ergonome et le storyboard

33. Le designer et le storyboard

34. Analyse
 Manque d’inspiration
 Idées créatives versus propositions fonctionnelles
« je n’y arrivais pas avec tes story »

35. 4. Cas concret n 3

36. Le storyboard au quotidien
 Difficulté à imaginer
« Ça fait pas fini »
« Beaucoup de texte »

37. 4. Cas concret n 4

38. L’équipe UX et le concept

39. L’équipe UX et le storyboard

40. L’équipe UX et le design

41. Analyse
 Travail en amont du binôme Ergo Design
 Validation facilitée par l’intégration du concept créa dans les
storyboards

42. 5. Conclusions

43. Analyse du besoin
Le but des storyboards
Objectifs du storyboard  Quel storyboard

44. Analyse du besoin
La méthodologie UX
Connaissance Utilisateurs Création Technique
Développeur
UX designer
Directeur artistique
Ergonome
Webdesigner
UX consultant
…

45. Analyse du besoin
La pédagogie
Accompagnement Client expert

46. Storyboard de la présentation
Recherche Chercher
QUE FAIT LE STORYBOARD
COMPANY BASELINE LOREM SIPUM DOLOR SIT AMET
Utilisateurs Objectifs Outils Ressources Conclusions
Tutorial Architecture de l'information Champ lexical
Ce storyboard illustre l'analyse et les conclusions qui viennent
d'être présentées. Il s'agit du storyboard d'un storyboard. Ses
enjeux, ses besoins, ses objectifs. Définitions de nos pairs
Ce stroyboard n'a aucune prétention graphique mais supporte le A quoi sert
concept créatif final en terme de structure et d'organisation. le storyboard Vision de nos pairs
En savoir plus
Qu'est ce Définitions
Le client L'utilisateur que l'UX Schéma
ATELIER ANALYSE & TESTS
• Lorem ipsum dolor sit • Lorem ipsum dolor sit Définir les objectifs
amet consectateur amet consectateur Conclusion
nonummy lorenzino.
Pédagogie
nonummy lorenzino.
• Interdum volgus videt, • Interdum volgus videt, Binôme et plus
est ubi peccat. est ubi peccat.
Ressources Objectifs Communication
CLIENT Architecture et Navigation et
Combien de jours ?
UTILISATEURS hiérarchisation des cinématique Chef de projet
informations a dit
ERGO DESIGN
J'ai fini les recos
DEV Interactions Wording, contenus Consultant SEO
a dit
SEO Mais je n'ai pas fait les story !
UX consultant
CHEF DE PROJET a dit
Fonctionnalités, Démo
Hum, tu pourras préciser le
+ TOUTES LES RESSOURCES spécifications fonctionnement exact des
Développeur blocs ? ça a l'air un peu
a dit complexe

47. Merci