L'UX pour le design web

Créer des prototypes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Lors de la conception web, créez des prototypes de structure et d'interface. Testez et évaluez leur fonctionnement.
06:08

Transcription

Pour pouvoir effectuer des tests aux différentes étapes de la gestion de notre projet de conception de site Web, il va bien falloir avoir des prototypes qui vont nous permettre avec des maquettes, avec des templates de proposer des solutions à des utilisateurs qui pourront tester ce que nous leur proposons, valider et entériner des solutions qui seront à même d'optimiser cette expérience utilisateur. Prototyper en fait est un système qui va permettre de modéliser dans un premier temps une structure. On va pouvoir pour ce faire travailler avec le tri de cartes qui permet de tester des contenus qui n'existent pas encore. On peut également modéliser des structures d'arborescence comme modéliser des structures de processus de parcours. Pour ce faire, on travaillera avec des maquettes, dites maquettes filaires, qui sont des maquettes qui ne sont pas graphiques, mais ne représentent que les structures. Et puis il va également falloir à un moment définir le graphisme, bien entendu, dans le respect de la charte qui a été établie par les services communication de l'entreprise, et pour ce faire, on mettra en place des maquettes graphiques. Et puis il va falloir également valider des parcours, c'est-à-dire valider des interactions, par exemple, des mises en panier, des validations de commandes ou des interactions de type discussions en ligne. Pour tester ces interactions, il va falloir comprendre où se trouvent les points de blocage. On ne pourra le faire qu'avec des maquettes qui sont réellement des maquettes fonctionnelles. On peut bien entendu utiliser des prototypes qui sont des prototypes dits de basse fidélité. Cela peut tout à fait fonctionner avec des prototypes de type papier que l'on va soumettre à des utilisateurs, mais il est quand même mieux de pouvoir à un moment donné, notamment lorsqu'il va s'agir de bien guider le développement, de bien indiquer avec quels mécanismes on va fonctionner, de pouvoir choisir sur quelles technologies on va s'appuyer, de mettre en place des maquettes fonctionnelles qui ne sont pas basse fidélité, mais haute-fidélité et totalement fonctionnelles, c'est-à-dire qui vont se comporter sur un écran d'ordinateur ou sur un périphérique mobile comme le fera le site ou l'application qui sera ensuite déployée. Il va s'agir dans un premier temps avec les maquettes filaires de contrôler la structure et de déterminer quelle va être la position des différents éléments en fonction, par exemple, des priorités. Pour créer ces maquettes filaires, vous allez pouvoir vous appuyer sur des outils comme Pencil Sketching, Prototyper free et Mockingbird. Il y en a bien d'autres, mais concentrons-nous pour l'instant sur ces trois outils et voyons ce qu'ils nous proposent. Pencil Project peut fonctionner à la fois sur Mac ou sur PC en tant que logiciel indépendant, mais il peut également fonctionner en tant qu'extension de Firefox. C'est un outil qui est totalement gratuit et que vous allez pouvoir télécharger sur la page de l'éditeur de ce logiciel. Justinmind propose un outil qui est intéressant, qui s'appelle Prototyper free. Vous allez pouvoir le télécharger et l'utiliser gratuitement. Il y a une version pro qui est payante, mais avec la version gratuite vous pourrez également fonctionner de façon tout à fait satisfaisante. Et enfin, vous pouvez travailler directement en ligne avec Mockingbird, un outil qui permet de positionner directement des éléments sur la page comme je suis en train de le faire actuellement de manière à créer des maquettes filaires qui vont pouvoir être soumises aux utilisateurs qui les testeront. Mockingbird fonctionne en ligne. Il s'agit d'un service dit SAS, Software As a Service, qui est payant et qui permet de pouvoir travailler en collaboratif, c'est-à-dire que d'autres membres de votre équipe pourront venir enrichir les différentes maquettes et les modifier en fonction de l'avancement du travail. Pour ce qui est des maquettes fonctionnelles, on va pouvoir travailler avec des outils comme Adobe Experience Design qui actuellement est en bêta version, qui est gratuit, ou Pixate studio qui est également gratuit, mais qui en ce moment est en train de passer sous l'égide de Google et que l'on peut encore télécharger, mais il n'est pas sûr que ce logiciel perdure. Avec Adobe Experience Design qui est très facile d'utilisation, vous allez pouvoir créer des maquettes et faire valider ces maquettes en les faisant consulter directement sur un périphérique mobile qui va être connecté à votre ordinateur, c'est-à-dire que l'utilisateur qui va tester votre dispositif pourra le faire directement sur un Smartphone ou sur une tablette. Pixate Studio fonctionne à peu près de la même façon. On peut encore le télécharger, soit pour Mac ou soit pour PC, et il est gratuit. Encore une fois, en ce qui concerne Pixate, nous avons des incertitudes sur son futur. Et puis, lorsque vous serez bien avancé dans votre projet, à un moment donné, vous aurez besoin, notamment si vous déployez vos sites en les basant sur des CMS, des systèmes de gestion de contenu comme WordPress, Joomla ou Drupal, vous pourrez accéder à des démonstrations en ligne des différents templates qui vous permettront de tester ces templates par rapport à vos utilisateurs. Vous pourrez donc choisir un template, l'installer sur une version qui peut être une version non encore en ligne d'un ordinateur et le faire tester par vos utilisateurs. Nous sommes ici, par exemple, sur la page de démonstration des différents templates qui sont proposés par une société qui est Gavick, et vous voyez que nous avons des templates sous Joomla, ici, des templates sous WordPress. Vous allez donc pouvoir utiliser ces différents templates de manière à tester vos interfaces graphiques. Le prototypage est un passage obligé du développement d'un projet Web. Il va donc falloir que vous étudiiez ces différents outils et que vous puissiez choisir ce qui correspond le mieux à votre mode de travail de manière à pouvoir proposer des tests à toutes les étapes de développement de votre site afin que les utilisateurs puissent vous renseigner sur la qualité de leur expérience.

L'UX pour le design web

Adoptez une méthode de conception web efficace. Optimisez la structure, les textes, l'accessibilité, les interactions avec l’utilisateur, ainsi que l'optimisation pour mobile.

1h42 (32 vidéos)
Attirer des internautes
ZANTAR2054
Vous avez fait un site web mais il n'attire pas grand monde? Voici des bons conseils pour capter les utilisateurs.
Merci Didier Mazier pour cette formation.
 
Spécial abonnés
Date de parution :6 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !