Découvrez 3 manières de créer vos prototypes

Dans un précédent article, nous avons évoqué la construction des wireframes et prototypes sur papier. Nous avions alors parlé des autres méthodes plus informatisées qui existaient.
Aujourd’hui notre agence web va vous exposer en détail les possibilités qui s’offrent à vous.
 
 
** Les logiciels de présentation **
 
Vous les connaissez tous ! Pour commencer il y a le traditionnel Power Point, logiciel de base qui a été utilisé pendant plus de 20 ans par des millions de salariés. Et pour les plus initiés, il y a également Keynote qui est une alternative plus moderne et de plus en plus populaire.
 
Ces logiciels, même s’ils ne sont pas prévus à la base pour le prototypage, présentent néanmoins quelques avantages :
 
-          Rapidité de prise en main: tout le monde a déjà utilisé ce type de logiciel. Il permet donc d’être très efficace pour établir des prototypes simples.
-          Rapidité d’apprentissage : Du fait de son utilisation quasi universelle, il n’est pas difficile de trouver de l’aide pour apprendre à utiliser des fonctionnalités plus avancées comme les animations, transitions, liaisons…
-          Bibliothèque disponible : Si vous utilisez Keynote, vous pouvez bénéficier de bibliothèques de wireframes simples comme Keynotopia afin de créer rapidement des prototypes et de les relier ensemble pour créer un prototype cliquable. Vous pouvez également utiliser des templates de base et réutiliser des diapositives ou des parties de diapositives comme vous le souhaitez.
-          Approche ergonomique : Cette approche vous force à penser à l’expérience utilisateur au-delà du simple visuel mais bien à travers un flux séquentiel : vous devez donc vous concentrer sur le chemin de pensée de l’utilisateur ce qui va vous conduire à un prototype plus ergonomique.
 
En revanche, comme nous le disions, le fait que ces logiciels ne soient pas dédiés à la conception de prototypes peut représenter quelques problèmes :
 
-          Bibliothèque limitée et obsolète: La bibliothèque d’éléments n’est pas toujours bien fournie ou mise à jour selon les actualités et les évolutions d’internet.
-          Collaboration limitée: La plupart des logiciels de présentation ne proposent pas de fonctionnalités collaboratives (partage, commentaires, versionning….).
-          Expérience utilisateur pensée de manière linéaire: Le flux utilisateur est très souvent pensé de manière linéaire, dans l’ordre des diapositives, alors que l’on sait que ce n’est pas toujours aussi simple et qu’une arborescence de site est souvent plus complexe. On peut prendre le risque de passer à côté de certains points importants.
-          Interactivité limitée : A part si vous maitrisez vraiment toutes les fonctionnalités des logiciels de présentation, vous ne pourrez pas avoir la précision que vous souhaitez dans l’interactivité de vos maquettes. De plus, si vous souhaitez obtenir un rendu un peu « poussé » cela risque de vous prendre beaucoup de temps.
 
 
** Le codage en HTML **
 
Il y a souvent une incertitude quant au fait d’utiliser le code HTML pour créer des prototypes : certains ne savent pas comment le faire efficacement et d’autres n’aiment tout simplement pas. Et effectivement on peut comprendre que cela puisse paraitre fastidieux lorsqu’on a eu l’habitude d’utiliser des logiciels plus amusants et intuitifs.
 
Malgré tout cette technique peut représenter quelques avantages :
 
-          Universalité : le code HTML est valable et lisible sur n’importe quel système. Vous n’avez pas besoin d’un logiciel en particulier pour le décrypter. C’est donc une solution accessible et lisible par tous.
-          Gratuité : à l’encontre d’autres logiciels ou outils qui sont souvent sous licence, l’HTML est libre d’utilisation.
-          Base technique pour le produit final : si vous créez votre prototype de façon optimale avec un code prêt pour la production, vous pourrez gagner du temps sur la phase de développement.
 
Bien évidemment, la vraie raison à prendre en compte pour savoir si oui ou non le codage de votre prototype peut être adapté est votre niveau de compétence : mieux vous maîtriser la technique plus rapidement vous irez et plus ce sera intéressant.
 
 
** Les logiciels de prototypage **
 
Ces logiciels représentent bien souvent un juste équilibre entre fonctionnalités et facilité d’utilisation. Tout le monde peut les utiliser : les débutants pour la facilité d’utilisation, les plus expérimentés pour la richesse fonctionnelle et les possibilités de rendus multiples.
 
Ces outils sont conçus spécialement pour faire des wireframes et des prototypes donc ils possèdent des avantages non négligeables :
 
-          Rapidité de conception: En seulement quelques clics vous pouvez créer, copier, produire de nombreuses interactions pour obtenir un prototype de qualité. Certaines personnes expérimentées trouvent même cela plus rapide que le prototypage sur papier.
-          Bibliothèques adaptées: Les bibliothèques d’éléments sont bien fournies et pensées pour ce type de travaux. Elles sont mises à jour régulièrement pour suivre les évolutions du web.
-          Expérience utilisateur facilitée : La plupart des outils vous permettent de générer un sitemap automatiquement et affichent l’ensemble de vos pages dans un bloc distinct afin que vous puissiez naviguer facilement de page en page.
-          Outil collaboratif: La collaboration est bien souvent possible sur ces logiciels. Des fonctionnalités de « commentaires », « archivage », « versionning » ou le partage de liens sont régulièrement proposées.
-          Présentation simplifiée: Vous pouvez exporter votre travail sous format PDF et certains logiciels proposent même de l’exporter vers un logiciel de présentation ou sous format HTML pour une vraie expérience web.
 
Néanmoins avant de vous décider pour cette solution, vous devez savoir que celle-ci peut représenter quelques inconvénients :
 
-          Manque de connaissance: comme toute chose dans la vie, si vous ne l’avez jamais utilisé vous devrez prévoir un petit temps de prise en main et d’adaptation.
-          Fonctionnalités et rendu limités : Contrairement au codage HTML ou vous pourrez recréer les conditions du « réel », ces logiciels de prototypage ne pourront pas toujours vous proposer une expérience optimale. Par exemple, si les fonctionnalités telles que le clic ou le hover sont bien présentes, vous ne pouvez recréer les conditions d’un accordéon ou d’un slider.
 
 
Mais alors quelle est la meilleure solution ? Et bien il n’y a pas de bonne réponse à cette question. La bonne réponse c’est celle qui vous conviendra le mieux. C’est à vous de voir selon les compétences et les appétences de votre équipe, selon vos objectifs de rendu, votre délai et le temps que vous souhaitez y consacrer.
Dans notre agence web, les équipes ont l’habitude de se réunir autour de prototypes papier pour coucher leurs premières idées. Ensuite elles utilisent un logiciel de prototypage pour formaliser les wireframes et les partager à l’ensemble des personnes concernées par le projet.