{"id":19448,"date":"2017-12-13T18:33:20","date_gmt":"2017-12-13T17:33:20","guid":{"rendered":"https:\/\/www.service-public.pf\/sipf\/?p=19448"},"modified":"2017-12-13T21:21:27","modified_gmt":"2017-12-13T20:21:27","slug":"j6-parcours-utilisateur-pu","status":"publish","type":"post","link":"https:\/\/www.service-public.pf\/dsi\/2017\/12\/13\/j6-parcours-utilisateur-pu\/","title":{"rendered":"J6. Parcours utilisateur (PU)"},"content":{"rendered":"<p>Dernier jour avec Magali :<\/p>\n<p><strong>R\u00e9cap J5.:<\/strong> Apr\u00e8s avoir identifi\u00e9 une probl\u00e9matique et avoir fait une synth\u00e8se des besoins des personas (premier losange du double diamant), on r\u00e9-ouvre les options en g\u00e9n\u00e9rant des id\u00e9es (id\u00e9ation) qu&rsquo;on organise et structurons pour b\u00e2tir une strat\u00e9gie. On met au point une recommandation pertinente de contenu organis\u00e9 et structur\u00e9.<\/p>\n<p><strong>. On a utilis\u00e9 3 techniques :<br \/>\n<\/strong><\/p>\n<ul>\n<li>Brainstorm<\/li>\n<li>Mind mapping<\/li>\n<li>Tri de carte<\/li>\n<\/ul>\n<p>. On fait de l&rsquo;<strong>architecture de contenu<\/strong>, on d\u00e9finit les <strong>parcours utilisateurs<\/strong>, on d\u00e9duit l&rsquo;<strong>arborescence<\/strong> et les <strong>fonctionnalit\u00e9s<\/strong> (\u00e0 plusieurs). Cela constitue un d\u00e9but de navigation. On s&rsquo;inspire des opportunit\u00e9s de l&rsquo;experience mapping. Fin du r\u00e9cap.<\/p>\n<hr \/>\n<p><strong>. PARCOURS UTILISATEURS (PU)<\/strong> : Interaction de l&rsquo;utilisateur avec la r\u00e9ponse du syst\u00e8me. On dessine un story-board pour avoir une vision globale. On liste les actions chronologiquement.<\/p>\n<p><strong>. PU =<\/strong> User flow ou user journey : Que cherche \u00e0 accomplir l&rsquo;utilisateur ? R\u00e9pondre \u00e0 l&rsquo;attente concr\u00e8te de l&rsquo;user.<\/p>\n<p>.<strong> US :<\/strong> User stories: en tant que.., je vaux que&#8230;, afin que&#8230; Ingr\u00e9dient de la premi\u00e8re MVP<\/p>\n<p><strong>. IHM :<\/strong> Interaction homme\/machine &gt; R\u00e9fl\u00e9chir et mod\u00e9liser graphiquement l&rsquo;interface. C&rsquo;est un <strong>livrable<\/strong>.<\/p>\n<ul>\n<li>Qu&rsquo;est-ce que l&rsquo;utilisateur va faire ?<\/li>\n<li>Comment le syst\u00e8me va r\u00e9agir ?<\/li>\n<li>Quelle est la mission des personas ?<\/li>\n<li>Guidage par le feedback de l&rsquo;user<\/li>\n<\/ul>\n<blockquote><p><strong>&gt; \u00a0\u00bb Oui, le syst\u00e8me m&rsquo;a compris \u00ab\u00a0<\/strong><\/p><\/blockquote>\n<p><strong>. PU<\/strong> = s\u00e9quentiel, <strong>Flow chat<\/strong> = structurel<\/p>\n<p><strong>. Exemple :<\/strong> Je d\u00e9clare mon sinistre et je suis mon sinistre sont deux user stories<\/p>\n<p><strong>. Material design :<\/strong> materialzecss angular material &gt; Check that<\/p>\n<p><strong>. Faire monter en comp\u00e9tence l&rsquo;user &gt;\u00a0<\/strong>Improuvment (en marketing)<\/p>\n<p><strong>. Exercices :<\/strong><\/p>\n<ul>\n<li>6 to 1 : On fait 6 versions de l&rsquo;interface en 10&prime; et on en tire une bestof<\/li>\n<li>Crasy 8 : Idem avec 8. Pourquoi crasy ? \u00e7a rend fou&#8230;<\/li>\n<\/ul>\n<hr \/>\n<p><strong>. Kit UXD :<\/strong> Post-it, marqueurs, papier craft, paper board, gommettes, appareil photo num\u00e9rique.<\/p>\n<hr \/>\n<p><strong>. PROTOTYPAGE de l&rsquo;interface :<\/strong> Phase it\u00e9rative &gt; test &gt; fail &gt; fix &gt; test &#8230; Guerilla testing (\u00e0 l&rsquo;arrache : bonjour que pensez-vous de&#8230;). De la basse d\u00e9finition (BD), le gros grain \u00e0 la haute d\u00e9finition (HD), le grain fin, on va du <strong>papier<\/strong> au <strong>wire frame interactif<\/strong> au <strong>POC en ligne<\/strong>.<\/p>\n<p><strong>. Notions d&rsquo;ergonomie d&rsquo;interface : <\/strong>(d\u00e9velopp\u00e9es en J7) Les bonnes pratiques, les lois :<\/p>\n<ul>\n<li><strong>Th\u00e9orie de Gestalt :<\/strong> Mot allemand signifiant \u00ab\u00a0forme\u00a0\u00bb &gt; Psychologie de la forme. Trop d&rsquo;infos mal organis\u00e9es = co\u00fbt cognitif trop \u00e9lev\u00e9, on est perdu &gt; <strong>\u00ab\u00a0Le tout est sup\u00e9rieur \u00e0 la somme des parties\u00a0\u00bb<\/strong><\/li>\n<li><strong>Loi de proximit\u00e9 :<\/strong> Plus les \u00e9l\u00e9ments sont proches, plus on va les associer. En \u00e9loignant deux groupes on les structure.<\/li>\n<li><strong>Loi de similarit\u00e9 :<\/strong> Intuitive &gt; voir &gt; comprendre &gt; agir sans blocages. Regroupe par association de forme, couleur, taille.<\/li>\n<li><strong>Loi de Fits :<\/strong> Ergonome des tableaux de bords des cockpit d&rsquo;avion (1954) : Plus le bouton et gros et proche mieux il op\u00e8re. \u00ab\u00a0Une cible est d&rsquo;autant plus rapide \u00e0 atteindre qu&rsquo;elle est proche et grande\u00a0\u00bb. Exemple web : les CTA (call to action, boutons) sont proches des pouces sur mobile : en bas.<\/li>\n<li><strong>Affordance :<\/strong> (James Gibson, psychologue cognitif\/perception visuelle &#8211; 1970) Capacit\u00e9 d&rsquo;un objet \u00e0 sugg\u00e9rer son usage.<\/li>\n<li><strong>Loi de Hick :<\/strong> Le nombre magique de Miller &gt; Pas plus de 7 \u00e9l\u00e9ments restent en m\u00e9moire (5 \u00e0 9). En web &gt; ne pas sur-charger l&rsquo;interface.<\/li>\n<li><strong>Micro-interaction :<\/strong> Exemple &gt; Rafraichir = geste vers le bas, changer de page ou d&rsquo;app. &gt; swipe vers la gauche.<\/li>\n<li><strong>Check-list<\/strong> d&rsquo;un site web :\n<ul>\n<li>Aspect techniques<\/li>\n<li>Aspects fonctionnels<\/li>\n<li>Navigation<\/li>\n<\/ul>\n<\/li>\n<li><strong>Prototypage :<\/strong> Tester et mesurer ses id\u00e9es.<\/li>\n<li><strong>Validation :<\/strong> Avec tous les acteurs du d\u00e9but du projet.<\/li>\n<\/ul>\n<hr \/>\n<p><strong>Historique UX :<\/strong><\/p>\n<ul>\n<li>1980 : Design thinking<\/li>\n<li>1990 : UXD<\/li>\n<li>2001 : Manifeste agile<\/li>\n<li>2005 : Double diamant<\/li>\n<li>2011 : Lean Startup<\/li>\n<li>2016 : Design sprint &amp; Lean UX<\/li>\n<\/ul>\n<hr \/>\n<p>Http:\/\/designsprintkit.withgoogle.com\/methods<\/p>\n<hr \/>\n<p class=\"wpcf7-contact-form-not-found\"><strong>Erreur\u00a0:<\/strong> Formulaire de contact non trouv\u00e9\u00a0!<\/p>\n<p class=\"wpcf7-contact-form-not-found\"><strong>Erreur\u00a0:<\/strong> Formulaire de contact non trouv\u00e9\u00a0!<\/p>\n<p class=\"wpcf7-contact-form-not-found\"><strong>Erreur\u00a0:<\/strong> Formulaire de contact non trouv\u00e9\u00a0!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dernier jour avec Magali : R\u00e9cap J5.: Apr\u00e8s avoir identifi\u00e9 une probl\u00e9matique et avoir fait une synth\u00e8se des besoins des personas (premier losange du double diamant), on r\u00e9-ouvre les options en g\u00e9n\u00e9rant des id\u00e9es (id\u00e9ation) qu&rsquo;on organise et structurons pour b\u00e2tir une strat\u00e9gie. On met au point une recommandation pertinente de contenu organis\u00e9 et structur\u00e9. . On a utilis\u00e9 3 techniques : Brainstorm Mind mapping Tri de carte . On fait de l&rsquo;architecture de contenu, on d\u00e9finit les parcours utilisateurs, on d\u00e9duit l&rsquo;arborescence et les fonctionnalit\u00e9s (\u00e0 plusieurs). Cela constitue un d\u00e9but de navigation. On s&rsquo;inspire des opportunit\u00e9s de l&rsquo;experience mapping. Fin du r\u00e9cap. . PARCOURS UTILISATEURS (PU) : Interaction de l&rsquo;utilisateur avec la r\u00e9ponse du syst\u00e8me. On dessine un story-board pour avoir une vision globale. On liste les actions chronologiquement. . PU = User flow ou user journey : Que cherche \u00e0 accomplir l&rsquo;utilisateur ? R\u00e9pondre \u00e0 l&rsquo;attente concr\u00e8te de l&rsquo;user. . US : User  [&#8230;]<\/p>\n","protected":false},"author":228,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[163],"tags":[],"class_list":["post-19448","post","type-post","status-publish","format-standard","hentry","category-formation-uxd"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/posts\/19448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/users\/228"}],"replies":[{"embeddable":true,"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/comments?post=19448"}],"version-history":[{"count":0,"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/posts\/19448\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/media?parent=19448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/categories?post=19448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.service-public.pf\/dsi\/wp-json\/wp\/v2\/tags?post=19448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}