Le storyframe, raconter une histoire avant de passer au design
Étiquettes : accessibilité, check-lists, comportements, expérience utilisateur, gestion de projet, principes fonctionnels, webdesign
Le storyframe avant le wireframe, une technique gain de temps pour concevoir des interfaces UX intuitives et raconter une histoire à vos utilisateurs. On essaie ?
La navigation à travers une interface bien conçue, c’est comme profiter de la lecture d’une excellente histoire. Alors, avis aux concepteurs web et designers UX ! Avant de passer aux wireframes, incorporez des techniques de scénarisation et de storytelling dans votre processus de création. Vous vous posez déjà la question du logiciel graphique à utiliser ? Un simple éditeur texte suffit pour concevoir vos storyframes !
Le storyframe : l’interface est une histoire
Avant de foncer tête baissée dans le wireframing (et passer du temps à déplacer des boîtes grises et des blocs de texte à l’écran), ou même d’esquisser des choses sur papier, le concept du storyframe est de penser en amont la construction du récit de l’interface. Cette technique est particulièrement appropriée pour des pages de destination type landing pages, mais aussi des pages d’accueil et d’orientation.
En fait, tout dispositif qui nécessite la mise en place et le récit d’une histoire unifiée et cohérente. Après tout, comme le rappelle très justement Fabricio Teixeira, éditeur sur uxdesign.cc, qui nous inspire cet article : les interfaces sont des histoires. Et chaque concepteur web, un conteur.
Mais comment ça marche, alors, le storyframe ? Tout commence avec une simple question. Comment expliquer à un ami (ou à sa grand-mère ?), le produit ou le service que j’essaie de communiquer ? L’objectif est de transmettre le message de manière rapide, digeste et humaine. Pensez votre storyframe comme un script, en mettant l’accent sur la hiérarchie et la structure de la page plutôt que sur la mise en page ou la copie finale.
4 règles d’or pour créer des storyframes facilement
- Jetez tout sur le papier.
Honnêtement, la première étape est une décharge rapide du cerveau sur une page blanche. L’exercice d’écrire tout ce que vous pouvez dire sur ce produit ou ce service peut vous aider à organiser vos pensées, avant de commencer à prioriser les points les plus importants. Pensez à chaque paragraphe en tant que module, et chaque phrase comme un élément que vous ajouterez éventuellement à votre conception graphique. Comptez 15 minutes et une demi-tasse de café. - Écrémez et simplifiez .
Une fois que vous avez agrégé votre matière brute dans un document, il est temps de réduire le volume et la longueur de votre histoire. Prenez du recul et une grande respiration, puis sabrez en fonction de ce que votre utilisateur a vraiment besoin de savoir. Quel est leur niveau de maturité avec le produit ou service ? Quels sont leurs points de douleur et leurs problèmes ? - Jouez avec plusieurs histoires.
Une fois que vous avez un premier brouillon, créez plusieurs variantes de votre document et commencez à jouer avec la hiérarchie de l’information. Quelles versions sont-elles les plus naturelles pour un être humain ? - Faites circuler autour de vous.
Il est maintenant temps de recueillir les impressions, commentaires et contributions du reste de l’équipe de conception. Une fois que toutes les parties prenantes sont d’accord sur l’histoire et son agencement, tout le reste ne sera qu’une affaire d’esthétique et d’habillage visuel.
Au final, grâce au storyframe, vous pouvez prendre des décisions assez importantes sur la stratégie, le flux et le récit, sans vous égarer ou perdre du temps dans des outils de conception. Malin, non ?
Et vous, vous avez déjà pratiqué ce type de réflexion et de scénarisation au moment de concevoir une interface ? Envie d’essayer ? D’autres astuces ? Parlons-en !
