fbpx

Voilà maintenant plus d’un an que l’UX et l’UI occupe une majeur partie de mon quotidien et que mon background de développeur front-end me sert presque uniquement à communiquer mes recommandations de parcours et micro-interaction, et faire monter en compétences certaines équipes. Petite rétrospective avec cette liste d’outils qui m’ont servi pour certains ou que j’ai découvert pendant mes recherches pour d’autres.

Le however n’est pas de vous détailler l’interface et l’utilization que je fais de chaque outil, mais plutôt de vous les présenter rapidement afin que vous vous fassiez une idée de chaque service. Chaque outil peut-être utilisé différemment de l’utilisation que j’en ai personnellement. L’espace de commentaire est à votre disposition si vous avez des questions sur un outil ou un autre.

Idea et recherche

En part de recherche, vous avez plus que jamais besoin de mettre les idées à plat et faire collaborer plusieurs personnes de plusieurs domaines entre elles. Elles sont parfois même géographiquement éloignées, des outils collaboratifs en ligne sont donc des options parfaites pour vous faciliter la vie.

Wireflow est un outil de wireframing/prototyping collaborative Open Supply gratuit. Il regroupe un ensemble de fonctionnalités permettant à différents profil de collaborer sur un move.

Je n’ai jamais eu l’event de l’utiliser mais l’outil était dans ma liste des outils à tester un jour. Je vous laisser jouer avec.

Realtimeboard est un outil collaboratif payant, mais avec une model gratuite vous permettant tout de même 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ées en part de réflexion dans la conception d’un produit ou de fonctionnalités. Thoughts Map, Consumer Story Map, Kanban, Flowchart, and so on.

Pour l’utiliser régulièrement, cet outil est vraiment pratique pour exposer une réflexion auprès de décideur, faire collaborer des gens à distance sur une réflexion en cours, ou encore créer un moodboard pour collaborer avec un designer/DA.

Milanote ressemble un peu à l’outil Realtimeboard : il s’agit d’un canvas blanc sur lequel vous allez pouvoir agréger plusieurs sorts de contenu dans le however de créer un moodboard, écrire des notes ou des todo-list. Pratique pour organiser collaborativement les premières idées autour d’une answer, ou pour faire émerger des ideas.

Pour l’avoir utilisé, de simples glisser-déposer et quelques clics permettent de composer des moodboards collaboratifs vraiment pratiques pour idéer efficacement.

Part de décision

Lorsque vos phases de recherche ont abouti à quelque selected de convenable pour commencer à structurer des options potentielles, il est temps de vous projeter sur des parcours un peu plus précis.

Uxpressia vous permet de créer des personas, des Consumer Journey Maps et des Influence Maps en ligne sur des modèles préconçus laissant assez de liberté pour personnaliser l’ensemble des présentations. Visualisez, exportez et collaborez en ligne directement sur l’outil.

Je n’ai pas eu l’event de le tester en équipe mais les quelques fonctionnalités de base permettent de composer très rapidement des personas et Consumer Journey Maps.

Un peu comme Uxpressia, Smaply permet de dessiner le parcours de vos utilisateurs existants ou à venir suivant vos données ou vos résultats de recherche. Créez des personas et des Buyer Journey Maps et Stakeholder Maps pour maximiser la compréhension des utilisateurs et de leurs attentes à travers toute l’équipe.

Il s’agit d’un service payant que je n’ai pas eu l’event de tester. Mais vous avez 14 jours d’essais, n’hésitez pas à me faire vos retours sur les commentaires si jamais vous testez.

Une fois que la part de création est effectuée, vous allez vouloir tester assez rapidement vos théories et hypothèses grâce à des checks utilisateurs. Voici quelques outils qui peuvent vous y aider.

Lookback est un outil de take a look at utilisateur distant ou en présentiel. Il vous permet de filmer en simultané l’écran, les interactions de l’utilisateur ainsi que son visage pour recouper ses actions avec ses mimiques faciales. Le son également enregistré pour vous permettre de repasser les enregistrements des checks, revenir sur des factors précis de la vidéo et les annoter pour y revenir plus tard.

Très pratique même en physique, fonctionne sur cellular en screencasting du cellular ou en passant par un enregistrement by way of Quicktime d’un téléphone connecté par exemple, pour l’avoir déjà utilisé dans les deux conditions. L’interface est vraiment de qualité, je vous conseille vraiment cet outil (payant).

Evalyzer rejoint Lookback sur l’idée de proposer un moyen d’enregistrer vos checks utilisateurs en ligne et de les re-visionner plus tard. En plus de cela vous aurez la possibilité de préparer vos protocoles directement sur l’outil et partager un lien de take a look at distinctive sur différents média sociaux. Je doute de l’intéret de ce style de diffusion, mais il y a certainement des cas d’utilization que je n’ai pas encore eu l’event d’explorer.

Un système de statistique plus ou moins automatisé vous permet ensuite de générer un rapport de take a look at assez détaillé pour vous aider dans la prise de décision. Je n’ai pas eu l’event de tester l’outil automotive il n’est pas facile d’accès (il faut contacter le assist pour y avoir accès), mais il est ressorti lors de ma recherche d’outils. J’utilise personnellement Lookback. 🙂

Seem.in

Seem.in est un outil de dialogue entre personne un peu à la Skype mais utilisant une API HTML5 de P2P pour partager de la vidéo et son écran. Pour vulgariser il s’agit d’une model native de screensharing et partage de vidéo sur votre navigateur directement. Dans notre cas, il permet gratuitement de passer des interviews avec vos utilisateurs, voire partager l’écran pendant un take a look at.

Il existe une model desktop mais reste disponible sous forme d’purposes natives sous android et iOS. Son côté mild et gratuit pour 1 room et jusqu’à four utilisateurs simultanés rend la answer assez intéressante pour d’autres choses que des checks utilisateurs 🙂

Part de manufacturing & qualité

Une fois que tout votre produit est réfléchi, et même souvent pendant cette réflexion et après avoir posé les premières briques et testé vos idées, il vous faut documenter et regrouper la connaissance. Il faut également la maintenir à jour pour faciliter l’onboarding de nouvelles personnes dans vos équipes.

Marvel App

Marvel App permet de publier des vues (visuels graphiques) d’une utility ou d’un website net et de simuler la navigation sur ce website grâce à des liens créés by way of Sketch (fonction prototype native) ou by way of directement sur l’utility Marvel App. Les purposes natives android et iOS permet de charger les vues et la fonction de visualisation du prototype directement sur smartphone.

La fonction d’inspection du cod (Handoff) permet de transmettre des informations de types aux développeurs (CSS) tout en naviguant dans les vues.

Une fonction de design permet de designer en stay des prototypes simples, mais je ne l’ai jamais eu l’event de l’utiliser.

Enfin une vue « Userflows » permet de visualiser globalement le mapping d’un écran à un autre pour avoir une visualisation d’ensemble de votre processus ou vos écrans.

Invision App

Invision permet de visualiser en ligne un ensemble de vue que vous pouvez séquencer comme vous l’entendez depuis Sketch (grâce à un plugin) ou directement depuis Invision. Depuis maintenant quelques temps vous pouvez également créer tout un système de design ainsi qu’inspecter les éléments graphiques pour en extraire des bouts de codes pour les types graphiques. (CSS)

Invision suggest également un mode « Freehand » qui permet de collaborer sur un tableau blanc pour dessiner et échanger des idées. J’ai personnellement échangé Invision pour Marvel App du fait de la prise en cost native des prototypes de Sketch par Marvel.

Axure est un outil de prototyping très avancé, un peu vieillissant mais toujours dans l’écosystème et dont la nouvelle model va certainement apporter un peu de fraicheur : compatibilité Sketch, interface retravaillée, entre autres nouveautés.

Axure vous permet de composer des vues dynamiques et émuler le comportement d’un vrai website net pour tester les fonctionnalités et leur chorégraphie avant de les développer. Cela vous permet d’avoir un cycle de manufacturing et checks assez court docket.

En dehors de Axure, je vous aurais bien parlé de Atomic.io mais l’outil n’est plus disponible pour le second. À surveiller donc.

Nuclino est un outil permettant de faciliter la communication au sein d’une équipe en réunissant la connaissance en un seul level. Cette « data base » vous permet de centraliser la documentation et les choses à savoir lorsqu’il s’agit des méthodes ou des processus dans la boîte, ou encore de la gestion d’un shopper, du ton à utiliser, and so on.

Je ne sais même pas si ça vaut encore le coup de le présenter. Sketch est un outil de création de prototype, wireframe et design graphique d’interface plutôt avancé. Il permet de composer vos éléments, pages et vues sur le principe de l’Atomic Design notamment grâce aux symboles : des composants réutilisables, imbricables, flexibles et dont les occurrences sont personnalisables au cas par cas.

Les types de calque et de texte permettent aussi d’avoir une sorte de logique de types proche de CSS, mais sans l’héritage (hélas).

Le système de prototype et de miroir vous permette de simuler l’utilisation de l’interface directement sur votre terminal cellular. Sketch Cloud permet également de profiter du « mirroring » mais à distance. Gros avantage si vous utilisez Marvel App : le système de Prototype est appropriate nativement.

Analyse et amélioration proceed

C’est bien de mettre en manufacturing, mais c’est encore mieux de voir remark vos utilisateurs se servent de l’interface que vous leur mettez à disposition. Pour ça il faut analyser les changements que vous faites continuellement.

Hotjar est un outil assez puissant vous permettant plusieurs choses :

Globalement ces outils vous permettrons de comprendre le comportement de vos utilisateurs sur différents terminaux (prise en cost du responsive) avec des données qualitatives.

Ressources pour monter en compétences

Dans la liste des outils qui m’ont été utiles, il y a ceux qui m’ont permis de monter en compétence par moi-même.

Voilà, je ne vous partagerai pas encore mes méthodes parce qu’elles sont loin d’être suffisamment exercées, mais peut-être prochainement un bout du workflow que nous avons dans mon équipe actuelle.

N’hésitez pas à partager vos outils également 🙂

Partager la publication “Les outils pour UX/UI Designer”

This content material was initially printed here.

close

Join our fast growing Moroccan Moms Community

Categories: Decor

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.