Comment définissez-vous les interactions dans une maquette?
Je suis à la fois programmeur et designer UX/UI. Quand je conçois des choses, je fais généralement des images statiques de ce à quoi ressemblera l'interface. Le problème est que la plupart des interfaces utilisateur ne sont pas statiques; ils changent et redimensionnent à partir de l'entrée utilisateur. Bien sûr, je sais exactement comment l'interface doit répondre à de telles entrées, mais pour les grands projets, le client et les autres programmeurs doivent pouvoir prendre mes maquettes et comprendre les interactions. Alors, comment montrez-vous dans une maquette comment votre conception interagit et répond à l'utilisateur?
La meilleure façon de décrire l'interaction est de la modéliser avec un prototype interactif.
Il existe différents outils de prototypage tels que Axure ou celui que nous développons, Artisanat . Quel que soit celui que vous utilisez, le fait est qu'ils vous permettent de montrer à votre client, à vos pairs, etc. ce qui se passe lorsque vous interagissez avec des éléments de la maquette. Cependant, vous obtiendrez de bien meilleurs résultats en utilisant un prototype pour montrer l'interactivité qu'avec une maquette cliquable. Il est possible de montrer les changements d'état de base avec des maquettes, et il y a une phase dans le processus de conception où cela peut être utile, mais il y a certaines choses qui sont difficiles à décrire avec des images statiques, telles que des animations (vitales dans certaines situations), la réactivité ( un élément clé de l'interactivité) et dans le cas des applications natives ou Web, la "sensation" d'utiliser cette plate-forme particulière.
7signals parle beaucoup de la façon dont ils sautent les wireframes et passent directement au HTML. J'ai écrit n article de blog il y a quelques mois à propos d'une conférence qu'ils ont donnée dans laquelle ils ont décrit leur processus.
Cependant, si vous souhaitez enrichir des maquettes statiques, la notation de croquis interactif de Jakub Linowski est un bon point de départ pour une manière de type UML pour décrire l'interaction:
Voir Avantages/inconvénients des maquettes PSD vs HTML pour une discussion similaire:
Si vous créez un site Web ou une application, les maquettes HTML sont de loin supérieures car vous concevez la maquette dans le format le plus proche possible du produit final. Cela vous permet de définir les attentes beaucoup plus facilement, vous contraint à ce qui est possible dans le produit final et offre une plus grande flexibilité.
Lorsqu'une maquette interactive n'est pas une option, essayez du texte. Vous pouvez ajouter des nombres qui pointent vers des parties de l'image statique ou filaire, puis fournir notes d'interaction pour chaque nombre.
Ci-dessus: un exemple de numéro de pointage.
Si vous n'avez pas la possibilité de quelque chose comme Axure (ou un autre outil de prototypage interactif ou même HTML ou Flash), je pense que votre meilleur pari est de câbler la vue "standard" ou "par défaut", puis d'afficher dans des fils supplémentaires le états alternatifs de modules particuliers.
D'après mon expérience, s'appuyer sur des annotations textuelles pour transmettre les modifications est généralement insuffisant - j'ai réalisé trop de projets où des structures filaires parfaitement annotées ont été mal comprises ou mal construites parce que les clients/développeurs/etc. manqué des détails textuels importants qui auraient été mieux capturés visuellement.
Je sais que celui-ci a six mois, mais comme personne ne l'a encore mentionné, je vais:
Bill Buxton a écrit un livre intitulé "Sketching User Experiences" qui traite du problème "sketching" du design d'interaction - comment pouvons-nous transmettre des concepts et des modèles d'interaction de manière exploratoire, c'est-à-dire rapidement et à faible coût, mais pas trop abstrait?