• Save
FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller
Upcoming SlideShare
Loading in...5
×
 

FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller

on

  • 1,669 views

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)

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)

Statistics

Views

Total Views
1,669
Views on SlideShare
1,662
Embed Views
7

Actions

Likes
3
Downloads
0
Comments
0

2 Embeds 7

http://www.linkedin.com 6
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller FLUPA UX-Day 2012 : L’UX, d’accord, mais que fait le storyboard ? par Ewane Prevotat-Deiller Presentation Transcript

  • L’UX d’accord, mais que fait le storyboard ? Par Ewane Prevotat-Deiller FLUPA UX-Day 2012, Paris
  • 1. Introduction2. Analyse de la demande3. Reformulation : qu’est ce que l’UX?4. Cas concrets5. Conclusions
  • IntroductionL’UX d’accord mais que fait le storyboard ?
  • 2. Analyse de la demande
  • 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
  • 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
  • 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
  • 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
  • Client C’est la pré-version non technique du site web avec les interactions et l’ergonomie. Site internet
  • 2. Analyse de la demande - Vu par
  • 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ènementielleUne barre d’onglet pour fournir un Service de sélection de date avecaccès direct aux offres spéciales rafraichissement de la liste des évènementsorganisées par profil associés. Partage, intégration au calendrier…
  • Le chef de projet Le chef de projet
  • Le développeur Développeur
  • Le consultant SEO SEO
  • Le designer Designer
  • Le client SEO
  • 3. Reformulation L’UX L’UX vu par …
  • 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.
  • Don Norman en 2010 The term has spread widely, so much so that it is starting to lose it’s meaning…
  • Quelques définitionshttp://www.allaboutux.org/ux-definitions
  • Une représentationhttp://www.kickerstudio.com
  • 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 designerhttp://vitamintalent.com/
  • 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)
  • 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
  • 4. Cas concrets : du story au design UN CRÉATIF DA, GRAPHISTE, DC, DESIGNE R, MOTION... UN ERGONOME ERGO, UX DESIGNER,
  • Types de storyboard CDP SEO FONCTIONNEL DÉTAILLÉ Balsamiq Powerpoint Omnigraffle Justinmind STORYBOARD Pidoco … Axure CLIENT Photoshop DEV DESIGN INTERACTIFhttp://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
  • 4. Cas concret n 1
  • Le client et le storyboard« C’est pas beau »
  • Le client et le design« C’est pas ergonomique »
  • Analyse Le fond et la forme Expertise client « j’ai un ipad »
  • 4. Cas concret n 2
  • L’ergonome et le storyboard
  • Le designer et le storyboard
  • Analyse Manque d’inspiration Idées créatives versus propositions fonctionnelles « je n’y arrivais pas avec tes story »
  • 4. Cas concret n 3
  • Le storyboard au quotidien  Difficulté à imaginer « Ça fait pas fini » « Beaucoup de texte »
  • 4. Cas concret n 4
  • L’équipe UX et le concept
  • L’équipe UX et le storyboard
  • L’équipe UX et le design
  • Analyse Travail en amont du binôme Ergo Design Validation facilitée par l’intégration du concept créa dans les storyboards
  • 5. Conclusions
  • Analyse du besoin Le but des storyboards Objectifs du storyboard  Quel storyboard
  • Analyse du besoin La méthodologie UX Connaissance Utilisateurs Création Technique Développeur UX designer Directeur artistique Ergonome Webdesigner UX consultant …
  • Analyse du besoin La pédagogie Accompagnement Client expert
  • 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 linformation Champ lexical Ce storyboard illustre lanalyse et les conclusions qui viennent dêtre présentées. Il sagit du storyboard dun storyboard. Ses enjeux, ses besoins, ses objectifs. Définitions de nos pairs Ce stroyboard na aucune prétention graphique mais supporte le A quoi sert concept créatif final en terme de structure et dorganisation. le storyboard Vision de nos pairs En savoir plus Quest ce Définitions Le client Lutilisateur que lUX 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 Jai fini les recos DEV Interactions Wording, contenus Consultant SEO a dit SEO Mais je nai 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 lair un peu a dit complexe
  • Merci