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
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…
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…
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/
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