Meilleures pratiques pour les livrables de prototypes interactifs?
Je présente pour la première fois des prototypes Axure à un client. Bien qu'Axure offre des annotations et des spécifications très détaillées, je pense que c'est exagéré pour ce projet - une application de planification à usage interne. Le chef de projet est habitué aux flux Visio et aux compositions Photoshop mais est aussi désireux que moi d'élever le processus de conception/approbation. Je veux savoir quel niveau de détail est recommandé dans l'interface utilisateur, les annotations et les spécifications. Ma question n'est pas spécifique à Axure, mais c'est l'outil que j'utilise.
Révisé: je voudrais recentrer la question sur les livrables. Quels livrables sont importants pour le client et dans quelle mesure les développez-vous? Par exemple, les spécifications d'Axure pourraient être utiles à l'équipe de développement, mais pour le cycle d'approbation de la conception UX/UI, je ne pense pas qu'elles soient utiles.
La raison pour laquelle nous faisons des prototypes est de transmettre des idées/concepts/solutions qui ne peuvent pas être véhiculés en montrant des écrans statiques.
J'utilise toujours la règle selon laquelle chaque fois que vous voulez donner une idée ou une compréhension du flux dans votre application/service Web, vous devez faire des prototypes.
C'est avec les prototypes que vous pouvez simuler comment quelque chose pourrait ressembler.
Par exemple, si vous souhaitez afficher une fonctionnalité de recherche qui fonctionne comme Google suggère et votre client est peu susceptible de savoir ce que vous entendez juste par la référence. Faites ensuite un prototype pour le montrer.
Je crois que le flux de toute application est l'un des angles morts de l'UX normal. Une grande partie de ce qui fait une application est ce qui se passe entre les clics.
Pour les prototypes, je dirais que vous devez atteindre le niveau de détail où vous êtes en mesure d'expliquer et d'illustrer la fonctionnalité d'une manière facile à comprendre.
Cependant, il est également d'une importance majeure que personne ne pense que votre prototype est fini (ou presque fini) ) produit. Dans ce cas, vous courez le risque que votre client pense que vous pouvez livrer demain ... ou vous vous retrouverez coincé dans une discussion sur des détails mineurs (cosmétiques) - dans un prototype qui n'est pas nécessairement destiné à ressembler exactement à la le produit final, c'est-à-dire!
En général, un prototype ou une maquette inachevée/non polie invitera les utilisateurs à formuler des critiques et des solutions alternatives. Il peut faire voir aux utilisateurs les transformations potentielles de la pratique existante (Ehn et Kyng 1991, p. 652). De plus, il ne sera guère confondu avec un produit final (Ibid .; Beyer & Holtzblatt 1998, pp. 372-3). (C'est précisément pourquoi j'aime Balsamiq Mockups .)
Un prototype fonctionnel, d'autre part, permet aux utilisateurs d'acquérir une expérience pratique dans des situations d'utilisation concrètes (Bødker & Grønbæk 1991, p. 198).
Dans un prototype, il n'est pas question d'une tentative d'exhaustivité; sa fonction est d'éclairer des aspects spécifiques du système d'information. Un accent particulier sera mis sur les aspects pour lesquels l’incertitude est la plus grande. ... Des prototypes sont utilisés pour vérifier l'exactitude des hypothèses émises sur ces aspects. Contrairement aux systèmes de production, les prototypes sont généralement incomplets et ne sont pas destinés à fonctionner sans problème. (Vonk 1990, p. 20-1)
Références
Beyer, H. & K. Holtzblatt (1998). Conception contextuelle: définition de systèmes centrés sur le client. San Francisco, Californie: Morgan Kaufmann Publishers
Bødker, S. & K. Grønbæk (1991). "Design in Action: From Prototyping by Demonstration to Cooperative Prototyping", dans Kyng, M. & J. Greenbaum (Eds.), Design at Work (pp. 197-218). New Jersey: Lawrence Erlbaum Associates
Ehn, P. et M. Kyng (1991). "Ordinateurs en carton: se moquer ou se préparer à l'avenir", dans Wardrip-Fruin, N. & N. Montfort (éd.), The New Media Reader (pp. 651 -62). Cambridge, MA: Le MIT Appuyez sur
Vonk, R. (1990). Prototypage: l'utilisation efficace de la technologie CASE (pp. 20-33). Englewood Cliffs, NJ: Prentice Hall Inc.
La nature de vos livrables dépend honnêtement de la portée du projet, du travail que vous faites et du type de client avec lequel vous traitez. Le plus grand défi auquel vous devez faire face est déterminer ce que le client attend puis lui fournir cela (ou ajuster ses attentes si nécessaire).
Par exemple, un de mes collègues a récemment créé un prototype interactif pour un client du secteur de l'énergie en HTML, CSS et Javascript. L'interface utilisateur qui nécessitait une maquette (c'était une refonte) était si compliquée que la meilleure façon d'en parler avec le client était la très haute fidélité. Parce qu'il a pris le client par la main et l'a conduit à travers le processus d'itération sur le prototype, le client a également pu en apprendre beaucoup sur ce que leur interface utilisateur actuelle faisait mal, pourquoi nos améliorations étaient nécessaires et précieuses, et cela leur a donné bonne compréhension de la quantité de travail nécessaire pour recréer une interface utilisateur comme celle-ci. Le travail consistait simplement à livrer le prototype interactif - sur la base de ce travail, le client évaluerait leurs prochaines étapes. (Il suffit de dire que nous avons maintenant été contractés pour repenser et mettre en œuvre la prochaine version complète de l'application.)
Points clés à retenir de ce processus:
Faites correspondre la fidélité de votre prototype avec les attentes du client. Une bonne gestion de projet consiste à gérer les attentes, et ce n'est pas différent pour un projet de prototypage. Donc, déterminez ce que votre client doit voir, puis faites correspondre le type de prototype avec celui-ci pour mieux communiquer votre travail. Dans le prototypage interactif, j'interprète la "haute fidélité" comme signifiant aller au-delà des écrans gris et blancs et modéliser la couleur, la typographie, la taille, etc. aussi près que possible de l'application finale. La seule chose que nous avons laissée de côté dans le processus susmentionné a été l'application du style de la maison (par exemple, tout transformer en une horrible nuance de vert ;-))
Soyez aussi transparent que possible sur votre processus de conception. Comme plusieurs autres l'ont mentionné, un danger pendant le processus de prototypage est que le client commence à penser que le prototype est le même que le produit final. Dans l'exemple ci-dessus, mon collègue ne s'est pas concentré sur la maintenabilité de la base de code ou quelque chose comme ça - il l'a juste piraté ensemble pour le cas d'utilisation spécifique pour lequel il était en train de concevoir. Mais parce qu'il a bien communiqué son processus de conception avec le client, expliquant chaque étape de la façon dont se passait et soulignant le fait que rien de tout cela n'était final, le client a pu comprendre ce qu'il obtenait. C'est un piège important à éviter, mais une bonne gestion des attentes peut faire du très bon travail.
Documentez ce que vous faites et pourquoi. Un prototype interactif ne suffit pas. Vous devez le présenter de manière à ce que le client puisse comprendre - non seulement le propriétaire du produit avec lequel vous travaillez directement, mais toutes les parties prenantes la chaîne qui n'aura pas été impliquée dans le processus de conception. Mon collègue a créé un site Web miniature présentant les aspects des écrans sur lesquels il avait travaillé et a écrit un code simple pour mettre en évidence diverses parties du fonctionnement. Ces métadonnées étaient inestimables pour s'assurer que, comme le prototype livrable était distribué au sein de l'organisation une fois terminé, les fils n'étaient pas croisés ou confus.
Alors, quelles sont les meilleures pratiques pour les livrables prototypes interactifs? Honnêtement, il s'agit de bonne communication et gestion des attentes. Vous devez comprendre ce que le client attend de voir. Une fois que vous avez fait cela, la partie difficile est derrière vous - maintenant vous pouvez aller de l'avant et faire votre travail de conception!
PS. Pas pour brancher notre produit, mais mon collègue l'a utilisé pendant ce processus et de nombreux avantages de l'outil sont apparus. Par exemple, le fait que tous nos prototypes soient instantanément partageables en ligne en a fait un jeu d'enfant pour garder le client à jour sur les progrès et nous pourrions même guider le client à travers les choses par téléphone. C'était une grande amélioration par rapport aux anciennes situations où les clients devaient être dans nos bureaux ou ne pouvaient pas voir ce qui se passait.
J'ai essayé Axure et quelques autres outils pour fabriquer des prototypes et suis arrivé à la conclusion que les prototypes étaient une perte de temps totale avec un terrible retour sur investissement. Je suis retourné à une méthode beaucoup plus efficace, en utilisant PowerPoint pour créer des scénarios.
J'utilise le masque des diapositives pour coller un blanc vanille de mon application ... la peau comme fond d'écran. Ensuite, j'ai quelques contrôles enregistrés sur une dernière diapositive, comme des zones de liste déroulante et autres. Enfin, j'ai une image d'un curseur que j'anime pour montrer où l'utilisateur cliquerait.
Très rapide, très simple, tout le monde a la possibilité de l'ouvrir et de le modifier. Et surtout, il communique très clairement la vision du design.
J'espère que ça aide.
La réponse peut également dépendre du type de prototype que vous essayez de livrer. S'il ne s'agissait que d'une seule page Web (statique), il vous resterait de nombreuses options, par exemple des outils de conception tels que Photoshop ou Illustrator, et même des croquis dessinés à la main. Pour une histoire plus complète/complexe qui pourrait inclure des pages Web à plusieurs états, des flux d'utilisateurs et/ou une interface utilisateur personnalisée, j'utilise généralement une combinaison de Balsamiq , PowerPoint et Word.
- Balsamiq pour créer les maquettes.
- PowerPoint pour compiler les maquettes et/ou captures d'écran; et ajoutez des légendes pour ajouter les détails nécessaires. Ceci est particulièrement utile. lors de l'illustration du flux.
- Word (ou n'importe quel traitement de texte) pour documenter les décisions de fond et de conception les plus approfondies. D'après mon expérience de travail avec plusieurs personnes et designers de produits formidables, je trouve que c'est une bonne habitude à développer parce que nous ne pouvons souvent pas nous souvenir de ce que nous avions décidé en détail.
Je sais que la question était plutôt de trouver les outils efficaces mais, à mon humble avis, rien ne vaut la chance lorsque vous pouvez parler de vos décisions de conception en personne (ou, peut aussi être via des moyens virtuels).
"Quels livrables sont importants pour le client et dans quelle mesure les développez-vous?"
Un livrable qui communique pleinement l'interaction et l'intention de l'interface utilisateur est important. Vous le développez autant que nécessaire pour y parvenir. Les détails de cette réponse dépendent entièrement du projet et du client.
En passant, c'est ce que le développement Agile essaie d'aider. L'idée est que vous puissiez obtenir des livrables `` palpables '' plus rapidement pour que les ajustements inévitables se produisent plus tôt que tard.
J'utiliserais Balsamiq www.balsamiq.com ou Mockingbird gomockingbird.com pour un prototypage rapide. Si vous devez fournir un plan d'interaction plus détaillé, optez pour Axure.
J'ai obtenu de très bons résultats en combinant des conceptions artistiques (dans Photoshop) et Axure pour produire une démo très réaliste, pour vendre des idées de conception à des parties prenantes (plus expérimentées) qui n'ont pas la capacité/le désir d'interpréter les wireframes.
Comme d'autres l'ont indiqué, cela dépend de ce qui est examiné. Si comme des maquettes Balsamiq pour réduire la structure et l'interaction. L'imagerie Balsamiqs transmet bien ce qu'est la maquette (une structure proposée) et ce qu'elle n'est pas (une maquette de conception), et concentrons-nous sur la structure plutôt que sur la conception graphique. Ce n'est qu'après avoir terminé cette partie que je passe à la conception visuelle, et si la structure est déjà convenue, vous pouvez utiliser des fichiers plats pour les approbations de conception. Ce que vous voulez vraiment éviter, c'est d'entrer dans une discussion sur la bonne teinte de vert à utiliser lorsque vous n'avez pas encore décidé comment l'application devrait fonctionner.
Pour récapituler:
Meilleures pratiques pour les prototypes interactifs
- Afficher le flux entre les écrans
- Gardez l'interface utilisateur non raffinée pour définir les attentes que la demande n'est pas terminée et invitez les commentaires.
- Utilisez la méthodologie Agile et fournissez plusieurs itérations au client pour résoudre les problèmes de conception avant le début du codage
- Remplissez l'interface utilisateur et les annotations uniquement au niveau d'exhaustivité dont le client a besoin pour comprendre l'interaction; Le niveau d'exhaustivité variera selon le client
Ce sont mes principaux plats à emporter. Quelqu'un avec autre chose à ajouter?