Jerry Cao d’UXPin explore différentes façon de construire un prototype digital et comment faire son choix parmi 3 méthodes.
Cet article est écrit par Jerry Cao de UXPin. Il est traduit et réarrangé par mes soins avec son aimable autorisation.
Demander : « Quelle est la meilleure façon de créer un prototype » est comme demander : « Quelle est la meilleure façon de créer un site web ». Il n’y a pas une « meilleure » façon.
Chaque prototype, comme chaque site web, possède ses propres styles, ses objectifs et stratégies. Ce qui fonctionne pour un CRM dans le cloud ne fonctionnera peut-être pas correctement pour un site e-commerce par exemple. Dans cet article nous allons explorer les méthodes de prototyping les plus communes : le logiciel de présentation (principalement pour les débutants), les prototypes codés (niveau intermédiaire et avancé) et les logiciels spécialisés dans le prototyping (pour tout niveau d’expertise).
1. Le logiciel de présentation (Keynote, PowerPoint…)
Pour les débutants, faites place à Power Point. Le célèbre outil de présentation est présent dans les bureaux depuis maintenant plus de deux décennies. Il existe bien évidement d’autres alternatives. Est-ce vraiment une bonne solution pour créer un prototype efficace ? Voyons quels sont les avantages et les inconvénients de ce type d’outil :
Les avantages :
- L’outil est accessible et utilisé par de nombreuses personnes, il peux donc être une bonne manière de créer un prototype simple.
- Si vous êtes déjà familier avec l’outil, il sera aisé pour vous d’apprendre à utiliser des fonctionnalités avancées comme les animations, les transitions et comment lier les slides pour simuler les interactions.
- Une bibliothèque d’éléments basiques. Grâce à des ressources comme Keynotopia, vous pouvez rapidement créer des wireframes et ensuite les lier pour simuler le comportement du site. Vous pouvez également réutiliser vos templates et slides lorsque vous en avez besoin.
- Un flow linéaire et naturel. Un diaporama est par nature un enchainement de slides, qui vous oblige à penser à l’expérience avant de penser « design ». Vous pouvez également imaginer lier les slides entre-elles pour sortir de cette progression linaire. La plupart des outils de wireframing et de prototyping peut encore être inadaptés pour visualiser les flux d’utilisateurs, mais UXPin, Flinto et Invision font un excellent travail de ce côté.
Les inconvénients :
- Dès que vous commencerez à créer des interactions poussées et des flux d’utilisateur complexes, vous arriverez vite aux limites du logiciel d’un logiciel de présentation.
- Manque d’éléments graphiques et d’une librairie riche. Il n’est pas facile de trouver le bon élément (si il est existe) au sein d’un logiciel de présentation.
- Une collaboration limitée. La plupart des logiciels de présentation n’offrent pas de système de collaboration (à part Google Presentation ou encore Visme). Même avec ce système, vous devrez faire des compromis, ce type de logiciel manque souvent de puissance pour manipuler des éléments graphiques, du texte, de la couleur etc. Si vous souhaitez collaborer sans compromis, utilisez un outil de prototyping dédié.
- Une arborescence et un flux utilisateur limité. Comme nous l’avons vu précédemment, il est possible de lier les slides entre elles pour casser le flux utilisateur purement linéaire. Mais il est pas facile de le mettre en place et de créer des plans de sites efficaces comme avec Axure ou UXPin.
- Une interactivité limitée. Les utilisateurs pleins de ressources peuvent aller bien loin avec Keynote ou Powerpoint. Mais une fois que vous testerez la gestion d’interactions avec des logiciels de prototyping, vous allez rapidement vous rendre compte à quel point ils sont plus adaptés pour ce genre de mission.
2. Le prototype codé en HTML
Le designer web qui ne maîtrise toujours pas les langages HTML / CSS commence à être une espèce en voie de disparition. En effet, la séparation entre le design et le code est de plus en plus étroite. De ce fait, savoir comment fonctionne réellement le web est obligatoire aujourd’hui pour être un bon designer.
Les avantages :
Coder directement son prototype en HTML / CSS comporte un avantage majeur : il vous permet d’avoir un rendu qui se rapproche fortement de la forme finale de votre produit. Cette manière de faire vous permet également de bénéficier d’autres avantages :
- Multi-plate-formes : les prototypes HTML fonctionnent sur n’importent quels systèmes d’exploitation. Un simple navigateur web suffit.
- Modulable : le HTML est basé sur des composants, qui peuvent vous aider à être plus productifs.
- Low-cost (mis à part le temps) : il existe des nombreux éditeurs HTML, mais sans connaissances vous allez mettre un certain temps à apprendre le langage.
- Pose les fondations techniques du projet : les éléments HTML que vous allez déployer pourront servir de base au développement futur du site.
Les prototypes codés comme on les appelle, peuvent être codés de différentes façon comme en HTML (ou même Python) selon vos préférences. Ash Maurya, fondateur et CEO de Spark59, suggère d’utiliser Ruby On Rails en raison de la facilité avec laquelle vous pouvez définir des espaces réservés pour chaque pages et les relier entre-elles pour la navigation. Cependant, le choix de code le plus populaire pour le prototyping est probablement encore HTML (codés directement en HTML).
Les inconvénients :
Bien évidement, le vrai choix d’utiliser ou non le code dépendra de votre niveau. Tous les designers ne possèdent pas les compétences pour coder rapidement, alors ne perdez pas d’énergie si vous n’êtes pas à l’aise avec la technologie. De plus, plonger directement dans le code risque d’inhiber votre créativité. Demandez-vous combien d’interactions vous pouvez créer en 30 minutes avec HTML par rapport à un outil de prototyping.
3. Le logiciel de prototyping et applications
Vous avez envie de plonger directement dans le concret pour modéliser une représentation réelle de votre idée ? Les logiciels de prototyping et des applications offrent un parfait équilibre entre fonctionnalités, facilité d’apprentissage et d’utilisation.
Les designers débutants et seniors utilisent des outils spécialisés comme ceux présentés ci-dessous. Chacun y trouve son compte : les débutants aiment la facilité d’utilisation et les seniors apprécient les contrôles conçus pour une bonne personnalisation.
Ces outils possèdent tous leurs avantages et leurs inconvénients, il est donc préférable de trouver celui qui correspondra à vos besoins. Pour commencer votre recherche, vous pouvez jeter un oeil à des outils comme UXPin, Invision, MockFlow,JustInMind, Axure, Omnigraffle, JustProto, Flinto, ou Marvel.
Les avantages :
Comme décrit dans le guide du Prototyping ces outils ont l’avantage d’être construits spécialement pour le wireframing et le prototyping. Une fois les fonctionnalités basiques bien maitrisées, il est beaucoup plus rapide de créer des prototype avec un logiciel du type qu’avec du papier.
- Rapidité : en utilisant régulièrement un outil de prototyping, vous pouvez rapidement créer, copier et produire des interactions avancées en quelques clics de souris.
- Librairie d’éléments : des outils comme Invision fonctionnent bien pour créer des prototypes clicables avec de multiples écrans et des interactions simples. Des outils spécialisés comme JustInMind, JustProto et UXPin fonctionnent avec des librairies et vous permettent donc de gagner un temps fou.
- Flux d’utilisateur avancé : le flow et les fonctionnalités sont les aspects les plus importants du prototyping. La plupart des outils et ressources sont fournis dans les logiciels. Vous pouvez créer des plans de site pendant que vous créez de nouveaux écrans.
- Outils de collaboration intégrés : premièrement, assurez-vous que l’outil que vous avez sélectionné possède un système basique de commentaire et de debug. Deuxièmement, l’outil doit vous permettre de partager vos prototypes sous forme de liens. Au final, un bon historique de révision et un stockage sur le cloud, vous permettra de gagner en efficacité.
- Gestion de la présentation : les logiciels permettent en général d’exporter vos prototypes en PDF. Des outils comme UXPin vous permettent même d’exporter les protoype en HTML.
Les inconvénients :
Les outils de prototyping demandent un peu de temps pour un prise en main optimales, mal l’effort en vaut la peine.
All prototyping tools require a little bit of time to become familiar, but they can be well worth the effort. Néanmoins, assurons-nous que vous considérez tous les aspects avant de décider. Voici quelques inconvénients potentiels …
- Manque de familiarité : comme presque tout dans la vie, si vous n’avez pas testé, vous allez devoir l’apprendre. Mais des outils comme InVision et UXPin sont connu pour leur rapide prise en main.
- Fidélité limité et fonctionnalités : exception faite de certains logiciel, la plupart des outils de prototyping n’offrent pas des résultat fidèles à la réalité. Par exemple, Invision est utilisé principalement pour créer des prototype clicable et est limité à deux interactions (hover et clic).
Pour aller plus loin :
Pour répondre à la question « quelle est la meilleure façon de créer un prototype ? « , nous répondrons : « Celle qui vous corresponds le mieux ». Pour vous aider à faire un choix, vous devez prendre en compte les spécificité du produit à sortir et de l’équipe de conception. Avec quelles plate-forme ou façon de travailler les concepteurs et développeurs sont les plus à l’aise ? Quels sont les objectifs et les délais du projet ? Savoir où vous allez est la partie la plus importante. Le choix de l’outil en découlera rapidement.
Pour des conseils plus pratiques, je vous conseille de lire l’e-book gratuit « Guide to Prototyping« .
