Principle : Enfin un outil simple et intuitif pour prototyper
Principle est un outil simple et intuitif permettant de prototyper des interactions d’une application mobile ou d’un site…
Ce logiciel fut créé par Daniel Hooper, ancien designer et développeur chez Apple, suite au constat suivant: dans l‘univers de la création d’application mobile une simple image ne peut pas décrire une interaction. Le designer peine donc à s’expliquer avec le développeur et souvent, par manque de communication, le résultat escompter n’est pas atteint.
Contrairement à d’autres sites ou logiciels de prototypage, celui- ci a l’avantage d’être rapidement pris en main : une vingtaine de minutes suffisent pour comprendre les bases de ce logiciel.
Une interface minimaliste
Cette interface est composée de 4 parties :
- L’artboard qui est la principale zone de travail où l’on crée le prototype. Il est aussi possible de créer des formes, ajouter du texte et même d’importer des éléments graphiques issus de Sketch, logiciel de design très présent dans le monde de la conception UX/UI mobile.
- La barre d’outils composée de plusieurs options : a. Ajouter des éléments (rectangle, texte, artboard) b. Personnaliser les animations des éléments sur le scroll (Drivers) ou bien en fonction du temps (Animates) c. Gérer les éléments entre eux (Group, Superposition et Documentation du logiciel) d. Visualiser le prototype
- La fenêtre de prévisualisation permet de tester le prototype en cours de création. Chaque modification y est automatiquement mise à jour. Cela permet aussi de dupliquer le prototype sur un device iOS.
- Le volet latéral qui est séparé en 2 parties : a. La partie supérieure est utile pour modifier les propriétés des éléments sélectionnés dans l’artboard : changement de couleur, de taille de texte etc… b. La partie inférieure correspond à la liste d’artboards et d’éléments le composant. Si la suite Adobe ou Sketch vous sont familiers, l’interface de Principle ne devrait pas vous dépayser. Pour bien comprendre son principe voici quelques cas d’utilisations.
Comment ça fonctionne ? Exemple !
Sur un premier artboard, créons un cercle en haut à gauche. En le dupliquant et en déplacant le cercle plus bas sur l’artboard, il sera le deuxième état.
Pour passer du premier au deuxième état, nous allons devoir créer un événement d’interaction. Admettons qu’on le fasse au clic sur le cercle. Il faut alors indiquer à Principle “au clic sur le cercle, aller à l’état 2 ”.
Si les cercles des deux artboards portent le même nom dans la liste des calques, il va alors les comparer et constater qu’ils n’ont pas les mêmes propriétés (ici dans notre cas la position). Il va alors déplacer l’élément et gérer lui-même la transition entre les deux états.
Exemple de prototype : créons une galerie photo !
Choisissons d’abord une taille d’artboard correspondant à la résolution voulue : iPhone 6.
Notre premier état se nomme “1Galerie”, nous allons composer une galerie photo à l’aide de la barre d’outil. Dupliquons maintenant l’artboard pour créer le deuxième état que nous appellerons “2-Zoom”. Sur ce deuxième artboard, modifions la taille des vignettes et déplaçons les en dehors de l’écran pour qu’au clic sur la première vignette, elles prennent tout l’écran en poussant les autres.
Pour passer d’un artboard à l’autre, nous allons indiquer à Principle qu’il doit faire la transition avec l’artboard 2-Zoom au tap/clique sur la première vignette.
Pour finir, ajoutons un bouton fermer et créons l’événement inverse pour revenir à l’écran 1Galerie et voici le résultat :
Pour aller plus loin vous pouvez personnaliser les animations en utilisant le bouton Animate : celui-ci vous donne accès à une timeline où vous aller pouvoir gérer toutes les propriétés de vos éléments en fonction du temps. Le bouton drivers est un peu plus complexe et s’apparente à l’effet parallax. Il permet de gérer des propriétés d’éléments en fonction du taux de swype/scroll.
Autres exemples :
Globalement, Principles est très simple à utiliser et permet de rapidement montrer les interactions complexes à expliquer verbalement. Il peut réellement débloquer des situations difficiles comme la validation de micro-interactions ou d’enchaînement d’écrans.
Remarquez que cet article n’aurait jamais pu être aussi compréhensible sans ces animations ;)
Lien de téléchargement :
Quelques sources pour approfondir le sujet :
http://principleformac.com/docs.html
https://medium.com/swlh/principletheprototypingtoolyougottotry93ab743fe4ae
https://medium.com/swlh/designersguidetoprototypinginprinciple4664e9930bef
Article initialement écrit pour le blog de Napoléon Agency
