Donner forme : fabriquer un produit.
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Donner forme : fabriquer un produit.

on

  • 155 views

Démarche et outils.

Démarche et outils.
Intervention Design et méthodologie @hetic

Statistics

Views

Total Views
155
Views on SlideShare
155
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Donner forme : fabriquer un produit. Presentation Transcript

  • 1. Design. De l’idée au produit. Donner forme. HETIC #4 - Mars 2014
  • 2. Concevoir : utiliser une démarche.
  • 3. Chercher Comprendre Imaginer Réaliser Implémenter Optimiser
  • 4. une démarche organique…
  • 5. utilisateurs/ usagers CONCEPT/CREATIVITE environnement marque entreprise contenu interaction interface aspects visuels PROTOTYPE/TEST AMELIORATION/OPTIMISATION accompagnement événementévolution #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
  • 6. utilisateurs/ usagers CONCEPT/CREATIVITE environnement marque entreprise contenu interaction interface aspects visuels PROTOTYPE/TEST AMELIORATION/OPTIMISATION accompagnement événementévolution #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER #3 IMPLEMENTER/OPTIMISER
  • 7. Ecosystème utilisateur CONCEPT/CREATIVITE Ecosystème marché Ecosystème client Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST #1 ANALYSER/COMPRENDRE #2 IMAGINER/REALISER Les principes Design Concept/créativité Positionnement produit/service Valide Spécifie Ajuste
  • 8. Contenu Interaction Interface Identité Visuelle PROTOTYPE/TEST Accompagnement CommunicationEvolution #2 IMAGINER/REALISER #3 PLANIFIER/IMPLEMENTER esign vité ent ce Valider le produit Spécifier le produit Ajuster le produit
  • 9. #2 Imaginer Réaliser
  • 10. contenu interaction interface aspects visuels PROTOTYPE/TEST
  • 11. Taxonomie / Catégoriser http://www.headict.com/
  • 12. Structuration du contenu (zoning)
  • 13. Architecture de l’information ÉNONCER CATÉGORISER STRUCTURER
  • 14. contenu Vous travaillez sur un site de contenu spécialisé à destination du public et des collectivités locales. Comment structurez-vous cette information ? playground !
  • 15. S’INFORMER ÉCHANGER TROUVER UN EMPLOI L'actualité Droit des collectivités Emploi Carrière Accueil Emploi Réseaux professionnels Espace candidat Forums L'essentiel des 7 derniers jours Europe Régions France Dossiers d'actu Documents utiles Opinions Visualisation de donnéesConcours Rémunération Statut Dossiers emploi Guide des avantages sociaux Veille juridique Textes officiels Jurisprudence Réponses ministérielles Dossiers juridiques Fiches de droit pratique Actu juridique Espace candidat Inscription Inscription Mon CV Mes alertes e-mail & RSS Mes candidatures Mes offres mémorisées Les derniers messages Concours Statut Entraide Rechercher une offre Toutes les offres Accès candidat Accès recruteur Les recruteurs Ressources humaines Finances Technique Informatique Informatique Prévention-sécurité
  • 16. S’INFORMER L'actualité L'essentiel des 7 derniers jours France Régions Europe Dossiers d'actu Documents utiles Opinions Visualisation de données Droit des collectivités Veille juridique Textes officiels Jurisprudence Réponses ministérielles Dossiers juridiques Fiches de droit pratique Actu juridique Emploi Carrière Concours Rémunération Statut Dossiers emploi Guide des avantages sociaux
  • 17. ÉCHANGER Forums Les derniers messages Concours Statut Entraide Réseaux professionnels Ressources humaines Finances Technique Informatique Prévention-sécurité TROUVER UN EMPLOI Accueil Emploi Rechercher une offre Toutes les offres Accès candidat Accès recruteur Les recruteurs Espace candidat Inscription Mon CV Mes alertes e-mail & RSS Mes candidatures Mes offres mémorisées
  • 18. Contenu fonctionnel
  • 19. interaction interface
  • 20. Prototype papier
  • 21. Workflow/site map
  • 22. Flow Chart
  • 23. Tests 3 phases de test peuvent être définie pendant la phase de conception. #1 - un prototype “basse définition” (à l’état de croquis ou gabarits fonctionnels, pour illustrer les enchaînement d’écran) ! #2 - un prototype “haute définition” (avec des contenus réaliste, visuels, textuels...) ! #3 - une version Beta avant le lancement officiel (futur produit, qui permet de crééer une communauté autour du lancement)
  • 24. aspects visuels
  • 25. « La qualité esthétique signifie parler de nuances, quelquefois de fractions d’à peine un millimètre, de graduations très subtiles, ou de l’harmonie et de l’équilibre de plusieurs éléments visuels fonctionnant ensembles. » ! Dieter Rams
  • 26. La théorie du Gestalt La psychologie de la forme ou gestaltisme (de l'allemand, Gestaltpsychologie) est une théorie psychologique, philosophique et biologique, selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d'éléments.
  • 27. La théorie du Gestalt Loi de la proximité Regrouper les objets les plus proches des uns des autres
  • 28. La théorie du Gestalt Loi de similitude Quand la distance ne peux regrouper les objets il faut les distinguer par leur forme
  • 29. La théorie du Gestalt Loi de la cloture Notre perception remplit les vides des formes qui ne sont pas fermés
  • 30. La théorie du Gestalt Loi de la symétrie Notre esprit perçoit les objets comme étant symétriques et se construisant autour d’un point central. C’est à la fois plus facile et plus rassurant de pouvoir séparer visuellement plusieurs objets en un nombre égal d’éléments symétriques. Lorsque nous voyons deux éléments symétriques qui n’ont pas de lien entre eux, nous allons naturellement les associer pour composer une forme cohérente.
  • 31. Le nombre d’or a b a+b / a = a/b = 1,618…= Phi
  • 32. Le restangle d’or
  • 33. 593 px 367 px
  • 34. La règle du 1/3, 2/3
  • 35. Harmonie des couleurs
  • 36. Les grids systems
  • 37. 16 colonnes
  • 38. identité visuelle P A L I C O QUADRICHROMY CMYK .50 .0 .0 .90 EXADECIMAL #16303A QUADRICHROMY CMYK .79 .40 .34 .18 EXADECIMAL #347083 QUADRICHROMY CMYK .39 .8 .13 .0 EXADECIMAL #A7CDDB QUADRICHROMY CMYK .0 .36 .94 .0 EXADECIMAL #F8AF0D QUADRICHROMY CMYK .31 .20 .20 .2 EXADECIMAL #192D38 QUADRICHROMY CMYK .11 .6 .7 .0 EXADECIMAL #E8EAEB DIN Round Regular ABC DEFGH IJKLMNO PQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0 1 2 3 4 5 6 7 8 9 DIN Round Medium ABC DEFGH IJKLMNO PQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz 0 1 2 3 4 5 6 7 8 9 QUADRICHROMY CMYK .50 .0 .0 .90 EXADECIMAL #16303A QUADRICHROMY CMYK .79 .40 .34 .18 EXADECIMAL #347083 QUADRICHROMY CMYK .39 .8 .13 .0 EXADECIMAL #A7CDDB DI A D IJ PQ ab no 0 1
  • 39. typographie
  • 40. TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! ! ! TITRA ROSA ROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! TITRAROSAROSÆ Lorem Ipsum is simply dummy text of the printing and typesetting industry. ! Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ! !
  • 41. La typographie a ses propres règles d’usages.
  • 42. Le petit manuel de composition typographique
  • 43. iconographie
  • 44. http://www.responsiveicons.co.uk/
  • 45. maquettes graphiques
  • 46. mise en scène de contenu
  • 47. Implémenter / Optimiser
  • 48. accompagnement
  • 49. événements
  • 50. évolution
  • 51. évolution technologique rajouter plein de devices
  • 52. Official Vancouver 2010 Olympic par Get Elastic (Elastic Path) • Trop de bannières qui crée un désordre pour la lisibilité ! • La navigation n’est pas visible en dessous du fold et ne ressort pas assez ! • La taille des photos produit est trop petite et ne donne aucune indication sur les coloris optimisation
  • 53. Test A Test B
  • 54. ! • Réduire le nombre de zones commerciales pour accroître leur lisibilité ! • Présenter de façon plus visible et claire la navigation de second niveau ! • Donner des indications sur les alternatives de couleurs des produits ! • Augmenter la taille des photos dans la zone “Nouveautés”, “Les plus populaires”
  • 55. Sur 2053 transactions réalisées pendant 21 jours le test n’est pas significatif mais nous pouvons en sortir les points suivants qui permettent de dire que la version A est la meilleure : ! ! • La version A convertit à 3,14% de plus que la version originale ! • Réduction de 12,24% du taux de rebond ! • Une augmentation du taux de transformation global de 0,59% ! • La valeur moyenne des commandes est de 5,16% plus importante.
  • 56. Une méthodologie design, c’est un coût...
  • 57. Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL STEP 1 : Immersion & expérience shopping Objectifs ? Où ? Kick Off _Exprimer le pitch et les objectifs du projet _Rencontrer l’ensemble des personnes impliquées et préciser les rôles de chacun _ Apporter de la visibilité sur le déroulement du projet Edition atlas 0,5 0,5 0,5 0,5 0 € Interview des personnes impliqués dans le projet (produit, marketing, e-commerce…) _ Découvrir l’entreprise et comprendre ses spécificités _ Collection l'information stratégique (stratégie, positionnement, offre, organisation...) _ Collecter des informations métiers (ex produits, logistique, IT relation client, acquisition...) Edition atlas 1 3 1 2 0 € Benchmark Web / Mobile _commandes tests _pige web & mobile 0,5 4 1 0 € Définition de l'expérience shopping _définition de l’expérience shopping et des leviers de différenciation _Design principes _User research Edition atlas 4 10 2 3 0 € Architecture de l'information & merchandising _Définition précise du référentielle et des spécificités produits _Organisation des produits / contenus / fonctionnalités / services _Concept e-merchandising _Parcours de navigation Edition atlas 3 3 7 3 0 € Scope _Cadrer la v1 du projet _Apporter de la visibilité sur l’évolution du site et assurer son évolutivité _Anticiper les besoins de contenu et de développements techniques Edition atlas 0,5 2 2 0 € TOTAL Cadrage 0,00 € Directeur Design Designer UX Développer Front End Concepteur / Rédacteur Consultant Marketing Chef de projet TOTAL 1 100 € 750 € 750 € 650 € 700 € 750 € 750 € STEP 2 : Design / Intégration / Spec Quoi ? Où ? Identité _Workshop Plateforme de marque _Vocabulaire de forme illustrant les valeurs de marque _ Logo (3 propositions / 2 A/R) & Nom _ Charte identitaire / Brand book _ Papeterie non incluse Edition Atlas / Altima 4 15 10 2 0 € Descente produit & principe de navigation _ HomePage _ Page catégorie _ Fiche produit Edition Atlas / Altima 0,5 2,75 3,75 4,75 4,65 0 € Quizz & inscription _Quizz _Process d'inscription Edition Atlas / Altima 1 5,5 3,5 5,5 3,1 0 € Check Out _ Panier _ Process de commande (livraison / paiement) Edition Atlas / Altima 0,5 5,5 3,5 5,5 3 0 € Compte Client _ Mon compte _ Mes commandes _ Mes adresses _ Ma personnalisation Edition Atlas / Altima 0 4 3 4 2,2 0 € Formulaire de contat _Page Contact Edition Atlas / Altima 0 0,75 0,25 0,75 0,35 0 € Template style _templace reco style Edition Atlas / Altima 0,5 2 1,5 2 1,2 0 € Template Mail _Template mail confirmation de commande _Template Welcome pack (inscription à la newsletter / création de compte) _ Template mail Newsletter nouveau set Edition Atlas / Altima 0 2,25 0,75 2,25 1,05 0 € Le concept _ Template présentation du concept Edition Atlas / Altima 0,5 2,75 1,75 2,75 1,55 0 € Press _ Template vu dans la presse Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Egérie _ Présentation des égéries Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Testimoniaux _Testimoniaux clients Edition Atlas / Altima 0 1 0,75 1 0,55 0 € Templates pages institutionnelles _ FAQ _Mentions légales _Job _CGV _Services _A propos Edition Atlas / Altima 0 4,5 1,5 4,5 2,1 0 € Page Facebook _Custom e la page facebook Edition Atlas / Altima 0 1,75 1 1,75 0,9 0 € Charte graphique on-line _ Charte graphique Web Intéractive Edition Atlas / Altima 2 8 4 2 0 € TOTAL Cadrage 0,00 € TOTAL REFONTE 0,00 € Budget hors taxe & hors achats d'artsBudget hors taxe & hors achats d'arts Le rôle du chef de projet coordination globale Participation, suivi et encadrement des différentes phases Rédaction des spécifications fonctionnelles Recettage des livrables html
  • 58. contenu Réinventer Le Temps. Au travers d’un nouvel usage simple, d’une nouvelle lecture du temps, ou simplement une idée qui permet de gagner du temps, illustrer un concept de manière structurée et argumentée. playground !
  • 59. Application Par Ici la sortie
  • 60. Séquençage du film Matrix, chaque image est associé à une couleur du film pour au final en créer un barcode - moviebarcode.tumblr.com
  • 61. merci.