Concept et recherche<\/h2>\n
En phase de recherche, vous avez plus que jamais besoin de mettre les id\u00e9es \u00e0 plat et faire collaborer plusieurs personnes de plusieurs domaines entre elles. Elles sont parfois m\u00eame g\u00e9ographiquement \u00e9loign\u00e9es, des outils collaboratifs en ligne sont donc des solutions parfaites pour vous faciliter la vie.<\/p>\n
Wireflow<\/h3>\n
Wireflow est un outil de wireframing\/prototyping collaborative Open Source gratuit. Il regroupe un ensemble de fonctionnalit\u00e9s permettant \u00e0 diff\u00e9rents profil de collaborer sur un flow.<\/p>\n Je n’ai jamais eu l’occasion de l’utiliser mais l’outil \u00e9tait dans ma liste des outils \u00e0 tester un jour. Je vous laisser jouer avec.<\/p>\n D\u00e9couvrir Wireflow<\/a><\/p>\n Realtimeboard est un outil collaboratif payant, mais avec une version gratuite vous permettant tout de m\u00eame de tester l’outil assez loin. Vous pouvez globalement faire un peu ce que vous voulez avec cet outil. Il permet notamment d’organiser vos id\u00e9es en phase de r\u00e9flexion dans la conception d’un produit ou de fonctionnalit\u00e9s. Mind Map, User Story Map, Kanban, Flowchart, etc.<\/p>\n Pour l’utiliser r\u00e9guli\u00e8rement, cet outil est vraiment pratique pour exposer une r\u00e9flexion aupr\u00e8s de d\u00e9cideur, faire collaborer des gens \u00e0 distance sur une r\u00e9flexion en cours, ou encore cr\u00e9er un moodboard pour collaborer avec un designer\/DA.<\/p>\n D\u00e9couvrir Realtimeboard<\/a><\/p>\n Milanote ressemble un peu \u00e0 l’outil Realtimeboard : il s’agit d’un canvas blanc sur lequel vous allez pouvoir agr\u00e9ger plusieurs types de contenu dans le but de cr\u00e9er un moodboard, \u00e9crire des notes ou des todo-list. Pratique pour organiser collaborativement les premi\u00e8res id\u00e9es autour d’une solution, ou pour faire \u00e9merger des concepts.<\/p>\n Pour l’avoir utilis\u00e9, de simples glisser-d\u00e9poser et quelques clics permettent de composer des moodboards collaboratifs vraiment pratiques pour id\u00e9er efficacement.<\/p>\n D\u00e9couvrir Milanote<\/a><\/p>\n Lorsque vos phases de recherche ont abouti \u00e0 quelque chose de convenable pour commencer \u00e0 structurer des solutions potentielles, il est temps de vous projeter sur des parcours un peu plus pr\u00e9cis.<\/p>\n Uxpressia vous permet de cr\u00e9er des personas, des User Journey Maps et des Impact Maps en ligne sur des mod\u00e8les pr\u00e9con\u00e7us laissant assez de libert\u00e9 pour personnaliser l’ensemble des pr\u00e9sentations. Visualisez, exportez et collaborez en ligne directement sur l’outil.<\/p>\n Je n’ai pas eu l’occasion de le tester en \u00e9quipe mais les quelques fonctionnalit\u00e9s de base permettent de composer tr\u00e8s rapidement des personas et User Journey Maps.<\/p>\n D\u00e9couvrir Uxpressia<\/a><\/p>\n Un peu comme Uxpressia, Smaply permet de dessiner le parcours de vos utilisateurs existants ou \u00e0 venir suivant vos donn\u00e9es ou vos r\u00e9sultats de recherche. Cr\u00e9ez des personas et des Customer Journey Maps et Stakeholder Maps pour maximiser la compr\u00e9hension des utilisateurs et de leurs attentes \u00e0 travers toute l’\u00e9quipe.<\/p>\n Il s’agit d’un service payant que je n’ai pas eu l’occasion de tester. Mais vous avez 14 jours d’essais, n’h\u00e9sitez pas \u00e0 me faire vos retours sur les commentaires si jamais vous testez.<\/p>\n D\u00e9couvrir Smaply<\/a><\/p>\n Une fois que la phase de cr\u00e9ation est effectu\u00e9e, vous allez vouloir tester assez rapidement vos th\u00e9ories et hypoth\u00e8ses gr\u00e2ce \u00e0 des tests utilisateurs. Voici quelques outils qui peuvent vous y aider.<\/p>\n Lookback est un outil de test utilisateur distant ou en pr\u00e9sentiel. Il vous permet de filmer en simultan\u00e9 l’\u00e9cran, les interactions de l’utilisateur ainsi que son visage pour recouper ses actions avec ses mimiques faciales. Le son \u00e9galement enregistr\u00e9 pour vous permettre de repasser les enregistrements des tests, revenir sur des points pr\u00e9cis de la vid\u00e9o et les annoter pour y revenir plus tard.<\/p>\n Tr\u00e8s pratique m\u00eame en physique, fonctionne sur mobile en screencasting du mobile ou en passant par un enregistrement via Quicktime d’un t\u00e9l\u00e9phone connect\u00e9 par exemple, pour l’avoir d\u00e9j\u00e0 utilis\u00e9 dans les deux situations. L’interface est vraiment de qualit\u00e9, je vous conseille vraiment cet outil (payant).<\/p>\n D\u00e9couvrir Lookback<\/a><\/p>\n Evalyzer rejoint Lookback sur l’id\u00e9e de proposer un moyen d’enregistrer vos tests utilisateurs en ligne et de les re-visionner plus tard. En plus de cela vous aurez la possibilit\u00e9 de pr\u00e9parer vos protocoles directement sur l’outil et partager un lien de test unique sur diff\u00e9rents m\u00e9dia sociaux. Je doute de l’int\u00e9ret de ce genre de diffusion, mais il y a certainement des cas d’usage que je n’ai pas encore eu l’occasion d’explorer.<\/p>\n Un syst\u00e8me de statistique plus ou moins automatis\u00e9 vous permet ensuite de g\u00e9n\u00e9rer un rapport de test assez d\u00e9taill\u00e9 pour vous aider dans la prise de d\u00e9cision. Je n’ai pas eu l’occasion de tester l’outil car il n’est pas facile d’acc\u00e8s (il faut contacter le support pour y avoir acc\u00e8s), mais il est ressorti lors de ma recherche d’outils. J’utilise personnellement Lookback<\/a>. \ud83d\ude42<\/p>\n D\u00e9couvrir Evalyzer<\/a><\/p>\n Appear.in est un outil de discussion entre personne un peu \u00e0 la Skype mais utilisant une API HTML5 de P2P pour partager de la vid\u00e9o et son \u00e9cran. Pour vulgariser il s’agit d’une version native de screensharing et partage de vid\u00e9o sur votre navigateur directement. Dans notre cas, il permet gratuitement de passer des interviews avec vos utilisateurs, voire partager l’\u00e9cran pendant un test.<\/p>\n Il existe une version desktop mais reste disponible sous forme d’applications natives sous android et iOS. Son c\u00f4t\u00e9 light et gratuit pour 1 room et jusqu’\u00e0 4 utilisateurs simultan\u00e9s rend la solution assez int\u00e9ressante pour d’autres choses que des tests utilisateurs \ud83d\ude42<\/p>\n D\u00e9couvrir Appear.in<\/a><\/p>\n Une fois que tout votre produit est r\u00e9fl\u00e9chi, et m\u00eame souvent pendant cette r\u00e9flexion et apr\u00e8s avoir pos\u00e9 les premi\u00e8res briques et test\u00e9 vos id\u00e9es, il vous faut documenter et regrouper la connaissance. Il faut \u00e9galement la maintenir \u00e0 jour pour faciliter l’onboarding de nouvelles personnes dans vos \u00e9quipes.<\/p>\n Marvel App permet de publier des vues (visuels graphiques) d’une application ou d’un site web et de simuler la navigation sur ce site gr\u00e2ce \u00e0 des liens cr\u00e9\u00e9s via Sketch<\/a> (fonction prototype native) ou via directement sur l’application Marvel App. Les applications natives android et iOS permet de charger les vues et la fonction de visualisation du prototype directement sur smartphone.<\/p>\n La fonction d’inspection du code (Handoff) permet de transmettre des informations de styles aux d\u00e9veloppeurs (CSS) tout en naviguant dans les vues.<\/p>\n Une fonction de design permet de designer en live des prototypes simples, mais je ne l’ai jamais eu l’occasion de l’utiliser.<\/p>\n Enfin une vue \u00ab\u00a0Userflows\u00a0\u00bb permet de visualiser globalement le mapping d’un \u00e9cran \u00e0 un autre pour avoir une visualisation d’ensemble de votre processus ou vos \u00e9crans.<\/p>\n D\u00e9couvrir MarvelApp<\/a><\/p>\n Invision permet de visualiser en ligne un ensemble de vue que vous pouvez s\u00e9quencer comme vous l’entendez depuis Sketch<\/a> (gr\u00e2ce \u00e0 un plugin) ou directement depuis Invision. Depuis maintenant quelques temps vous pouvez \u00e9galement cr\u00e9er tout un syst\u00e8me de design ainsi qu’inspecter les \u00e9l\u00e9ments graphiques pour en extraire des bouts de codes pour les styles graphiques. (CSS)<\/p>\n Invision propose \u00e9galement un mode \u00ab\u00a0Freehand<\/em>\u00a0\u00bb qui permet de collaborer sur un tableau blanc pour dessiner et \u00e9changer des id\u00e9es. J’ai personnellement \u00e9chang\u00e9 Invision pour Marvel App du fait de la prise en charge native des prototypes de Sketch par Marvel<\/a>.<\/p>\n D\u00e9couvrir Invision<\/a><\/p>\n Axure est un outil de prototyping tr\u00e8s avanc\u00e9, un peu vieillissant mais toujours dans l’\u00e9cosyst\u00e8me et dont la nouvelle version va certainement apporter un peu de fraicheur : compatibilit\u00e9 Sketch<\/a>, interface retravaill\u00e9e, entre autres nouveaut\u00e9s.<\/p>\n Axure vous permet de composer des vues dynamiques et \u00e9muler le comportement d’un vrai site web pour tester les fonctionnalit\u00e9s et leur chor\u00e9graphie avant de les d\u00e9velopper. Cela vous permet d’avoir un cycle de production et tests assez court.<\/p>\n En dehors de Axure, je vous aurais bien parl\u00e9 de Atomic.io<\/a> mais l’outil n’est plus disponible pour le moment. \u00c0 surveiller donc.<\/p>\n D\u00e9couvrir Axure<\/a><\/p>\n Nuclino est un outil permettant de faciliter la communication au sein d’une \u00e9quipe en r\u00e9unissant la connaissance en un seul point. Cette \u00ab\u00a0knowledge base\u00a0\u00bb vous permet de centraliser la documentation et les choses \u00e0 savoir lorsqu’il s’agit des m\u00e9thodes ou des processus dans la bo\u00eete, ou encore de la gestion d’un client, du ton \u00e0 utiliser, etc.<\/p>\n D\u00e9couvrir Nuclino<\/a><\/p>\n Je ne sais m\u00eame pas si \u00e7a vaut encore le coup de le pr\u00e9senter. Sketch est un outil de cr\u00e9ation de prototype, wireframe et design graphique d’interface plut\u00f4t avanc\u00e9. Il permet de composer vos \u00e9l\u00e9ments, pages et vues sur le principe de l’Atomic Design notamment gr\u00e2ce aux symboles : des composants r\u00e9utilisables, imbricables, flexibles et dont les occurrences sont personnalisables au cas par cas.<\/p>\n Les styles de calque et de texte permettent aussi d’avoir une sorte de logique de styles proche de CSS, mais sans l’h\u00e9ritage (h\u00e9las).<\/p>\n Le syst\u00e8me de prototype et de miroir vous permette de simuler l’utilisation de l’interface directement sur votre terminal mobile. Sketch Cloud permet \u00e9galement de profiter du \u00ab\u00a0mirroring\u00a0\u00bb mais \u00e0 distance. Gros avantage si vous utilisez Marvel App<\/a> : le syst\u00e8me de Prototype est compatible nativement.<\/p>\n D\u00e9couvrir Sketch<\/a><\/p>\n Principle est un outil pour Mac qui permet de simuler des interactions et animations pour vous aider \u00e0 vous projeter dans un fonctionnement ou un autre. Le syst\u00e8me de mirroring vous permet de passer votre prototype anim\u00e9 directement sur votre smartphone ou tablette.<\/p>\n L’outil permet aussi bien de valider une id\u00e9e que de transmettre \u00e0 un d\u00e9veloppeur l’interaction et l’animation attendue. En effet vous pouvez facilement r\u00e9gler chaque animation avec des effets de easing et un d\u00e9lai \u00e0 ma milliseconde pr\u00e8s. D\u00e9couvrir Principle<\/a><\/p>\n Flinto, encore un outil Mac-only, a exactement le m\u00eame but que Principle mais va beaucoup plus loin dans la prise en charge de mouvement, d’interaction et de gestion des changements d’\u00e9tat. Il est cependant un peu moins rapide \u00e0 prendre en main. D\u00e9couvrir Flinto<\/a><\/p>\n C’est bien de mettre en production, mais c’est encore mieux de voir comment vos utilisateurs se servent de l’interface que vous leur mettez \u00e0 disposition. Pour \u00e7a il faut analyser les changements que vous faites continuellement.<\/p>\n Hotjar est un outil assez puissant vous permettant plusieurs choses :<\/p>\n Globalement ces outils vous permettrons de comprendre le comportement de vos utilisateurs sur diff\u00e9rents terminaux (prise en charge du responsive) avec des donn\u00e9es qualitatives.<\/p>\n D\u00e9couvrir Hotjar<\/a><\/p>\n Dans la liste des outils qui m’ont \u00e9t\u00e9 utiles, il y a ceux qui m’ont permis de monter en comp\u00e9tence par moi-m\u00eame.<\/p>\n Voil\u00e0, je ne vous partagerai pas encore mes m\u00e9thodes parce qu’elles sont loin d’\u00eatre suffisamment exerc\u00e9es, mais peut-\u00eatre prochainement un bout du workflow que nous avons dans mon \u00e9quipe actuelle.<\/p>\n N’h\u00e9sitez pas \u00e0 partager vos outils \u00e9galement \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" Voil\u00e0 maintenant plus d’un an que l’UX et l’UI occupe une majeur partie de mon quotidien et que mon background de d\u00e9veloppeur front-end me sert presque uniquement \u00e0 communiquer mes recommandations de parcours et micro-interaction, et faire monter en comp\u00e9tences certaines \u00e9quipes. Petite r\u00e9trospective avec cette liste d’outils qui m’ont servi pour certains ou que […]<\/p>\n","protected":false},"author":4,"featured_media":6637,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[875,50],"tags":[770,771,82,554,578],"coauthors":[597],"class_list":["post-6463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-experience-utilisateur","category-ressources-telechargements","tag-methode","tag-outil","tag-recherche","tag-ui","tag-ux"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t![\"Wireflow\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/wireflow.png\")
<\/a><\/p>\n\n
Realtimeboard<\/h3>\n
![\"Realtimeboard\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/realtimeboard.jpg\")
<\/a><\/p>\nMilanote<\/h3>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/milanote.jpg\")
<\/a><\/p>\nPhase de d\u00e9cision<\/h2>\n
Uxpressia<\/h3>\n
![\"Uxpressia\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/uxpressia.jpg\")
<\/a><\/p>\nSmaply<\/h3>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/smaply.png\")
<\/a><\/p>\nPhase de test<\/h2>\n
Lookback<\/h3>\n
![\"\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/lookback.jpg\")
<\/a><\/p>\nEvalyzer<\/h3>\n
![\"Evalyzer\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/evalyzer.jpg\")
<\/a><\/p>\nAppear.in<\/h3>\n
![\"Appear.in\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/appear.in_.jpg\")
<\/a><\/p>\nPhase de production & qualit\u00e9<\/h2>\n
Marvel App<\/h3>\n
![\"MarvelApp\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/marvelapp.jpg\")
<\/a><\/p>\nInvision App<\/h3>\n
![\"Invision](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/invision.jpg\")
<\/a><\/p>\nAxure<\/h3>\n
![\"Axure\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/axure.jpg\")
<\/a><\/p>\nNuclino<\/h3>\n
![\"Nuclino\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2018\/12\/nuclino.jpg\")
<\/a><\/p>\n\n
Sketch<\/h3>\n
![\"Sketch](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/sketch.jpg\")
<\/a><\/p>\nPrinciple<\/h3>\n
![\"Principle\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/principle.png\")
<\/a><\/p>\n
\nUn des points forts de Principle est de pouvoir cr\u00e9er des mini interactions, comme des composants, que vous allez pouvoir r\u00e9utiliser \u00e0 plusieurs endroits dans un composant plus gros. Un peu comme le principe de symboles de Sketch<\/a>.<\/p>\nFlinto<\/h3>\n
![\"Flinto\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/Flinto.jpg\")
<\/a><\/p>\n
\nSi vous venez de Principle, vous allez devoir vous d\u00e9faire de quelques habitudes. Les deux ont leur fonctionnement et leurs particularit\u00e9s, Principle peut tr\u00e8s bien vous suffire pour de petites animations simples, Flinto vous servira pour des interactions beaucoup plus complexes je pense.<\/p>\nAnalyse et am\u00e9lioration continue<\/h2>\n
Hotjar<\/h3>\n
![\"Hotjar\"](\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/01\/hotjar.jpg\")
<\/a><\/p>\n\n
Ressources pour monter en comp\u00e9tences<\/h2>\n
\n