Warning: include_once(/homepages/10/d325205465/htdocs/wp-content/plugins/Akismet3/Akismet3.php) [function.include-once]: failed to open stream: Permission denied in /homepages/10/d325205465/htdocs/wp-settings.php on line 215

Warning: include_once() [function.include]: Failed opening '/homepages/10/d325205465/htdocs/wp-content/plugins/Akismet3/Akismet3.php' for inclusion (include_path='.:/usr/lib/php5.2') in /homepages/10/d325205465/htdocs/wp-settings.php on line 215
Prototype
Prototype

Prototype

Le digital modifie de jour en jour les métiers de la création graphique, autrefois limités au spectre du beau et de l’esthétique. L’interactivité et son lien profond avec le fonctionnel est venue bouleverser un milieu souvent statique et fait émerger de nouveaux profils, tel que designer d’interface, UX designer ou encore ergonome digital ; tous n’ayant qu’un seul but en tête : proposer aux internautes une expérience enrichie et une utilisation optimale du produit réalisé. Pour répondre à leurs exigences en apparence évidentes, une solution s’impose : l’utilisation de prototypes.

Qu’est-ce qu’un prototype ?

Présent dans le design industriel depuis longtemps, le prototype s’invite depuis quelques temps dans l’univers du digital. Celui-ci permet de réaliser rapidement un premier produit à moindre coup et de l’installer face à un utilisateur qui mettra en lumière ses éventuels défauts d’usage. Car c’est ici que tout se joue, un site, une application mobile, une interface applicative suit bien trop souvent le processus classique de la production graphique, wireframes figés, maquettes figées, commentaires figés !

Quand l’utiliser ?

Le prototype peut être utilisé tout au long du processus de création et évitera de nombreux écueils à celui qui tente d’aller trop loin sans faire face à l’interactivité. Il n’est en effet  pas nécessaire d’intégrer la totalité d’une maquette pour tester un comportement. Il est également possible de réaliser un prototype à partir d’un simple Wireframe. Un comportement responsive, le déploiement d’une navigation, une animation de transition ou un parcours utilisateurs sont autant de pièce d’un puzzle prêt à être assemblé. Un seul objectif à atteindre : le retour d’expérience.

Le prototype est également un bon moyen de communication au sein des agences digitales parfois prises au piège dans des process, où chefs de projets, designers et intégrateurs travaillent les uns à la suite des autres sans suffisamment échanger pour le bien du projet. Grâce au prototype, plus interactif et plus proche du rendu final, le designer a beaucoup plus de facilité à expliquer ses partis pris aux autres équipes qui pourront également apporter leurs améliorations avant la présentation au client ou la mise en place d’un test utilisateur.

Comment le réaliser ?

La création d’un prototype ne nécessite pas forcément l’utilisation d’un logiciel très complexe, ni l’intervention d’un intégrateur. La complexité du prototype ou sa nature définiront son utilisation mais il est possible de réaliser de bons tests d’interactivité uniquement avec l’aide de PowerPoint (si, si c’est possible). Le plus important est de pouvoir insérer des zones cliquables et  passer simplement d’un état à un autre. Vous ne savez pas comment le réaliser ? Voici une sélection de logiciels pour vous aider (la liste est loin d’être exhaustive !).

Flash

Vous le pensiez mort et enterré ? Perdu au fond d’une oubliette ? Ou encore réservé à la création de bannière ? Non bien sûr… Flash s’il n’est pas lu par tous les terminaux, permet de réaliser rapidement des prototypes efficaces. Il ne s’agit évidemment pas de développer trop de fonctionnalités mais il permet avec quelques connaissances (à la portée de beaucoup de créatifs et pas uniquement nés au début des années 80) de simuler un effet de transition, une animation de rollover ou encore montrer à l’intégrateur le déploiement d’un menu.

Edge reflow /  Macaw

Vous souhaitez montrer un comportement responsive, indiquer la transition à effectuer entre la tablette et le mobile… Edge Reflow est fait pour vous ! Reflow fait partie des petits derniers de la suite Adobe Creative Cloud et semble plutôt prometteur. Un peu léger si l’on souhaite l’utiliser pour monter intégralement son site, il est plutôt pratique pour prototyper l’idée d’une page responsive.

Trop d’Adobe ? Allez faire un tour du côté de Macaw. Spécialement conçu pour les webdesigners sans trop de connaissance en intégration HTML, c’est une très bonne alternative au logiciel de la suite Adobe (meilleur ? C’est possible…) A tester assurément !

Muse

Petit frère (ou sœur) de Reflow, Muse permet de réaliser des effets de parallaxe assez intéressants. Le parallaxe est un des effets complexes à présenter au format JPG. Grâce à Muse et en relativement peu de temps, car lui non plus ne nécessite pas de code HTML, vous pourrez montrer le projet imaginé (durée, fondu…) directement avec les vrais animations.

screen_muse

Edge Animate

Là encore, on détourne l’utilisation du logiciel à des fins différentes. Edge Animate est le digne successeur de Flash. La différence : orienté vers une technologie HTML/CSS et du javascript. Différence de taille puisque le résultat est supporté par la plupart des devices et navigateurs (suivant les fonctionnalités choisies).

Atomic

Application gratuite online (pour l’instant), Atomic est dédié au prototype. Très simple d’utilisation, vous avez à disposition les outils classiques du webdesigner : insertion texte, images, formes simples et bien entendu l’interactivité ! Avec un découpage bien pensé, vous passez d’une page à une autre et simulez de nombreux comportements. Transitions, ouverture d’un menu, un vrai jeu d’enfant.

Le prototype est désormais une étape nécessaire à intégrer à vos projets. Même s’il nécessite un léger investissement supplémentaire, dû au temps passé pour sa création, il permet surtout d’économiser beaucoup de temps de modification. Le prototype surpasse donc toutes les explications et anticipations (« Les gens ne vont pas comprendre ») car il met les individus face à une utilisation proche du comportement final et vous offre une vraie réponse sur les changements à apporter à vos maquettes.

 

Pro-Kiabi