Quels outils de prototypage?
Cela est fortement lié à la question suivante:
Cependant, je ne voulais pas limiter les suggestions aux outils "basés sur le Web", j'ai trouvé et utilisé les outils suivants pour le prototypage, le wireframing et les maquettes dans le passé avec un certain succès:
- Balsamiq
- SketchFlow (partie de Expression Blend)
Je suis également conscient que certains concepteurs choisissent d'utiliser des applications graphiques telles que Photoshop et Illustrator pour la tâche.
Il s'agit d'une question sur le Wiki de la communauté, postez-la avec vos pensées, essayez de la conserver dans un seul paquet par réponse afin que nous puissions avoir une idée de ce que la communauté pense de ces outils.
Il est important pour moi de conserver mon prototypage dans au moins deux threads, et trois si j'essaie de comprendre les interactions détaillées avec l'animation.
Thread 1: Flux, fonction, formulaire et données
- Commencer sur papier (généralement une session de conception de tableau blanc avec d'autres). Concentrez-vous sur le flux d'écran, puis sur les fonctions principales et les dispositions potentielles d'écrans particulièrement importants. Essayez au moins deux idées différentes.
- Niveau de fidélité supérieur à Balsamiq. Ajoutez des détails fonctionnels, ajustez la disposition, ajoutez des données concrètes et significatives à l'écran (dans le contexte d'un scénario démontrable).
- Créez un prototype de workflow en enchaînant un scénario étape par étape, un chemin unique avec des écrans et des interactions attendues spécifiques pour passer à l'écran suivant. J'ai tendance à utiliser PowerPoint, en mettant toutes les maquettes d'écran en séquence. Ce prototype vous permet d'obtenir des retours précoces avec de vrais utilisateurs par parcours pluralistes , qui sont très efficaces pour affiner les concepts, les workflows, les exigences fonctionnelles, la terminologie, etc.
- Itérer tôt, souvent et rapidement.
Sujet 2: programme visuel et style
- En utilisant certaines des maquettes clés du fil 1, visualisez-les (sous forme de compositions) en détail au niveau des pixels à l'aide de Photoshop ou d'un autre mécanisme similaire. Explorez la couleur, les proportions, les métaphores visuelles, la typographie, etc. Générez au moins 3 idées.
- Obtenez des commentaires à ce sujet indépendamment des prototypes de workflow. Utilisez les tests de préférence, les tests AB, les critiques, charettes , etc.
- Itérer et affiner.
Sujet 3: Interaction et animation détaillées
- En se concentrant sur une seule interaction ou séquence d'animation détaillée, piratez un prototype fonctionnel dans les outils qui vous conviennent le mieux: HTML/CSS/JS, Flash, langages de programmation de niveau inférieur, cadres/bibliothèques de composants d'interface utilisateur, etc. Au moins deux interactions alternatives .
- Exécutez un petit nombre de courts tests d'utilisabilité, y compris la collecte des données de synchronisation. Faites des tests comparatifs. Comptez les frappes/les clics de souris/les gestes.
- Itérer et affiner.
En résumé, construisez des types spécifiques de prototypes à des fins spécifiques ... pour répondre à des questions spécifiques. Aucun type ne fonctionne pour toutes les situations. Gardez les préoccupations esthétiques hors de la boucle de rétroaction du flux de travail/fonction. Utilisez des méthodes appropriées et efficaces pour les différents types de questions. "Ne traversez pas les ruisseaux."
J'ai constaté que presque toutes les améliorations de conception fondamentales proviennent du fil 1 et du fil 2, mais le fil 3 est nécessaire si vous allez au-delà des contrôles standard ou si votre domaine est nouveau/complexe/spécifique (par exemple, interactions gestuelles, modèle multidimensionnel manipulation, contrôles personnalisés pour un nouveau système d'exploitation sophistiqué, optimisation des performances humaines dans une certaine dimension).
Pencil est un bon outil pour créer des maquettes d'interface utilisateur. Il est disponible en module complémentaire Firefox ou application autonome .
Il a un avantage sur certains des autres outils mentionnés car il est gratuit et open source.
J'ai lu il y a quelque temps un article très intéressant qui s'appelait "Esquisser ou ne pas esquisser" - vous devriez y jeter un coup d'œil: question d'esquisse Chaque fois que la créativité est nécessaire, vous ne devriez pas limiter vos pensées avec des outils tu utilises. Mon choix personnel pour les nettoyages ultérieurs est un outil proche de la zone avec laquelle je manipule. Pour HTML/CSS, je commence généralement par des mises en page simples et j'augmente le détail étape par étape. La même chose pourrait également s'avérer utile pour d'autres domaines. Prototypage de bas en haut. Je n'ai donc pas d'outil particulier à recommander ... ça dépend.
Je n'ai donc pas d'outil particulier à recommander ... ça dépend .
J'utilise personnellement Balsamiq pour les premières révisions, puis je passe directement à un prototype HTML utilisant un framework CSS comme Blueprint .
Il est intéressant de noter que Adobe Fireworks a obtenu peu d'amour sur ce site.
Entre autres choses, j'ai apprécié
- Construire dans différents états
- Pages maîtres
- Les objets HTML, comme les liens et les icônes, peuvent recevoir un balisage qui sera exporté (liens internes et externes, métadonnées, tout ça)
- Exporte des mises en page conformes aux normes CSS avec des feuilles de style réelles
- Intégration native Illustrator et Photoshop pour les logos, etc.
J'aime Balsamiq pour avoir présenté une IA à un client, puis Fireworks pour un prototype navigable une fois qu'un concepteur a collaboré. Le travail effectué dans Fireworks s'exporte assez facilement en HTML et CSS qui se traduisent assez facilement en un site statique complet ou en pages/thèmes de modèle pour un site dynamique.
Je vais dire que le papier est le meilleur outil prototype. Oui, c'est évident, mais c'est mieux que de commencer l'électronique.
- Le papier indique au client qu'il s'agit d'une idée, l'une des nombreuses possibles.
- Le papier ne laisse pas le client se laisser prendre dans les polices, les couleurs, les formes ou les images. Il y a une raison pour laquelle balsamiq a choisi des filaires de style croquis.
- Les révisions sont rapides
- Il est facile d'obtenir leur écriture réelle dessus et cela ne les intimide pas de dessiner dessus.
- Vous pouvez le numériser ou le télécopier si vous en avez besoin pour passer à l'électronique.
Je suis un grand fan des prototypes fonctionnels html après, mais le papier abaisse la barrière au brainstorming et tests rapides de l'interface utilisateur du couloir.
Il est facile de guider quelqu'un à travers un croquis papier:
"Where do you click if that transaction was a mistake?"
"Great now what do you do to find out which kitten has the highest durability?"
Si vous ne commencez pas avec des croquis et obtenez une validation utilisateur, vous sautez le pistolet et il ne devient plus coûteux de défaire et d'itérer plus tard.
Je préfère faire des maquettes d'interface utilisateur Web en HTML/CSS.
Le prototypage fonctionnel est une bien meilleure solution car les utilisateurs obtiennent une expérience réelle plutôt qu'une expérience non dimensionnelle (en vous regardant Photoshop).
Les prototypes fonctionnels ne sont pas des travaux jetables.
Il est beaucoup plus rapide d'itérer sur un prototype fonctionnel pendant une boucle de rétroaction
J'utilise Axure .
Bien que assez cher (près de 600 $ par licence), il offre une flexibilité incroyable et vous permet de personnaliser presque tout.
Être en mesure d'utiliser vos propres contrôles (ou maquettes), maîtres, etc. est impératif lors de la création d'une application plutôt que d'un site Web.
Le papier et le HTML sont les meilleurs.
Croquis rapides sur papier. Ensuite, construisez la vraie chose en HTML. StaticMatic texte du lien est idéal pour le prototypage.
Dans le passé, j'utilisais Axure, mais le wireframing est une perte de temps.
J'aurais également voté pour Axure. Notre bureau utilise ses outils collaboratifs pour répartir les responsabilités entre nos IA et nos graphistes.
Bien qu'il ne s'agisse pas d'Omnigraffle, les options de wireframing sont plus que suffisantes. Le logiciel a de grandes fonctionnalités de maître, nous pouvons donc augmenter la fidélité d'un prototype assez rapidement.
Et comme Dan l'a dit, il est entièrement personnalisable et crée des documents de spécifications professionnelles.
r.
Adobe InDesign. Cela peut sembler un peu étrange mais il y a des fonctionnalités que j'aime:
- Interface de style Adobe. Si vous avez travaillé avec Photoshop ou d'autres produits Adobe, il serait très facile de passer à InDesign
- des outils puissants pour travailler avec la typographie, les tableaux, les styles, les grilles, etc.
- en fait, vous pouvez créer non seulement un filaire mais aussi une conception graphique
- vous pouvez exporter des wireframes sous forme de PDF cliquables
Je suis d'accord avec certaines des réponses ci-dessus, mais je voudrais ajouter quelques informations supplémentaires et un conseil. Je commence presque chaque projet avec le tableau blanc, des stylos de différentes couleurs et aussi quelques post-it. Le moyen le plus simple de communiquer des idées et d'obtenir des commentaires rapides. Selon le type de projet, j'essaie ensuite d'esquisser les organigrammes principaux avec un programme appelé yEd . C'est un moyen simple pour moi de structurer les idées. Si j'ai un mac à proximité, je choisirais OmniGraffle (un programme exceptionnel pour plus qu'un organigramme).
Je continue à faire des prototypes dans Balsamiq , Sketch flow et Illustrator pour obtenir différents types de prototypes low-fi et hi-fi.
En ce qui concerne ces informations, j'ai trouvé approprié d'avoir une boîte à outils riche à choisir. Il est important pour moi de pouvoir adopter différentes approches selon le type de projet.
J'appuie la motion de Daniel Bleisteiner: "Cela dépend".
Pour 90% des projets, pensez à mon vote pour le papier. La justification du papier abonde sur ce fil, donc je ne réitérerai pas.
Le design n'est jamais le même parmi les projets, et certainement pas parmi les clients. (Je parle de design dans le sens le plus vague, c'est-à-dire design, développement, prototypage, wireframing - soyons honnêtes, ils fusionnent tous progressivement.)
Ainsi, pour les 10% restants des projets, l'outil de prototypage dépendra du projet. Si cela nécessite une collaboration à distance, Axure peut être le meilleur. Si cela nécessite de travailler avec l'équipe interne d'un client qui utilise principalement Adobe, Fireworks peut être le meilleur. Il existe de nombreux outils. Malheureusement, par définition, les outils ne peuvent pas s'adapter aussi rapidement que les problèmes qu'ils sont conçus pour résoudre; par conséquent, beaucoup de ces produits semblent très similaires, mais pas tout à fait identiques. Et c'est à nous d'évaluer ce qui convient le mieux à l'emploi.
Réflexion supplémentaire: l'iPad commence à aider à brouiller les frontières entre la collaboration client en personne et la surveillance client en personne. Omnigraffle, SketchBook, TouchDraw, Draft et d'autres applications iPad ouvrent la voie à une expérience de collaboration améliorée. (Je parle d'amélioration comme de travailler vers l'objectif ultime de faire en sorte qu'un client se sente aussi à l'aise de dessiner sur un iPad que sur papier, l'avantage étant que le client pourrait utiliser un prototype fonctionnel au lieu d'une page statique. le but ultime est juste mon avis.)
Je suis ces étapes ...
1. Prototypage. J'utilise Balsamiq Mockups parce que c'est facile. Le but du prototypage est de comprendre la disposition de base des choses. C'est l'étape où vous effectuez des changements radicaux. Heureusement, Balsamiq ne prétend pas être ce qu'il n'est pas et reste extrêmement facile à utiliser. C'est plus rapide pour moi d'utiliser Balsamiq que de le dessiner. Et cela présente l'avantage de pouvoir faire glisser des éléments sur l'écran plutôt que de les effacer et de les redessiner.
2. Finaliser la conception. J'utilise Photoshop et parfois un petit Illustrator pour cela afin que je puisse perfectionner les graphiques avant d'écrire n'importe quel code.
Il est plus difficile d'apporter des modifications radicales à votre conception dans Photoshop car nous avons tendance à nous laisser emporter par la perfection des pixels. Et c'est encore plus difficile une fois qu'il est dans votre application. C'est donc la raison de ma progression, et pourquoi je commence avec l'outil le plus simple possible ... Balsamiq.
Je suis un carnet de croquis/crayon d'abord et Balsamiq - deuxième sorte de gars. Ensuite, Photoshop pour étoffer les détails jusqu'à ce qu'il y en ait assez pour passer au HTML et au CSS.
Balsamiq. C'est bon aussi pour les logiciels de bureau, et c'est très facile à apprendre.
Cela vaut également la peine de vérifier gomockingbird qui vient de sortir de la version bêta
L'agence interactive de ma femme a réussi avec:
Rapide pour commencer et une quantité raisonnable de commandes et d'écrans intégrés pour les prototypes et les wireframes.
La question mentionne la nécessité d'un outil de prototypage, mais pas la façon dont votre prototype doit être réaliste. Pour un prototype de type filaire sommaire, je suis d'accord avec la plupart des commentaires ici que le stylo/papier, Balsamiq ou même Visio sont de bons outils. Cependant, lorsque vous avez besoin d'un prototype d'aspect plus réaliste, cela ne suffira pas et je suggérerais de regarder des modèles comme Axure ou Adobe Fireworks/Catalyst (iRise est bien trop cher) et même s'il a ses problèmes, je choisirais Axure .
J'utilise également le crayon, bien qu'il présente quelques inconvénients:
- pas de traitement des données de table: si vous voulez filaire une table, vous êtes perdu.
- aucun WordWrap dans les zones de texte. Lorsque j'essaie de placer du lorem ipsum, je dois faire l'emballage moi-même. Ça craint.
cependant, j'aime beaucoup cet outil.
Parfois j'utilise cet outil http://www.hotgloo.com/
Étant donné que votre question portait spécifiquement sur le prototypage, je suppose que vous effectuez toutes les étapes que vous jugez nécessaires avant le prototypage, telles que l'esquisse, etc.
Si votre produit sera livré via le Web, créez vos prototypes en utilisant le Web (HTML, CSS, JS). En fin de compte, c'est plus rapide, moins cher et plus précis que tout ce que vous pourriez utiliser. J'ai trouvé que des outils comme Axure sont parfaits pour les choses simples, mais nécessitent ensuite une courbe d'apprentissage abrupte pour faire quelque chose de modérément complexe. À ce stade, vous passez du temps à apprendre un outil propriétaire alors que vous pourriez apprendre des normes Web qui vous seront plus bénéfiques à long terme.
Si vous êtes préoccupé par le fait qu'un client pense que c'est "fait", vous pouvez laisser de côté le style jusqu'à la fin, mais j'ai trouvé que plus votre prototype était "réel", plus il était facile à évaluer.
Cela dépend vraiment de ce qu'est le projet.
Si le site Web que vous prototypez ne sera que quelques pages avec du contenu statique, l'utilisation d'un éditeur graphique comme Photoshop ou Fireworks conviendra probablement. Le conseil de garder les éléments de conception hors du prototypage "à tout prix" peut ne pas être approprié ici.
Cependant, à l'autre bout du spectre où vous créez une grande application avec de nombreux cas d'utilisation, je recommanderais quelque chose de plus semblable à la réponse de Jim Jarrett. J'ajouterais que les applications à grande échelle sont (ou du moins devraient être) un processus itératif: vous prototyperez pour la phase I, puis prototomerez à nouveau pour une version de phase II, etc. Chacune de ces phases de prototypage peut nécessiter différents niveaux de détail . Vous pouvez finir par vouloir travailler à partir de la construction/prototype de la phase actuelle, ou il peut être temps de revenir aux premiers principes et de recommencer à zéro.
Axure est un excellent outil de wireframing/prototypage/spécification. Il vous permet de vous concentrer sur ce que vous créez et rend les choses telles que les annotations, les notes, les interactions, très faciles à spécifier.
Le plus est que lorsque vous spécifiez des interactions, lorsque vous générez des prototypes à partir de vos wireframes, ces interactions se traduisent en de véritables widgets fonctionnels. (Axure génère des prototypes HTML)
Vous pouvez également prendre une conception d'écran (en JPEG par exemple) importer l'image, activer des zones de l'image à l'aide de l'outil "image map" et vous disposez alors effectivement d'un prototype plus fidèle!
Axure vous permet également de créer des actions basées sur des variables (vous pouvez les définir ou les lire). Il y a aussi le concept d'obtenir un widget pour générer un événement, vous pouvez avoir un autre widget écouter l'événement et ensuite ce widget peut répondre d'une manière ou d'une autre.
Je peux continuer encore et encore ... L'inconvénient est le coût ~ 550 $, mais le gain de temps en vaut vraiment la peine. Leur support client, par e-mail, est excellent; ils me reviennent généralement en quelques heures ... parfois immédiatement.
J'ai trouvé Mockingbird correct pour les wireframes simples. Cela ne me fera pas quitter omnigraffle de sitôt mais c'est assez bon pour un outil basé sur le Web: http://gomockingbird.com/
Jetez un œil à App Sketcher (actuellement sur la version candidate) pour voir si cela correspond à vos besoins. Il s'agit d'un outil de prototypage HTML rapide pour la création de prototypes filaires et d'applications Web interactives. Il utilise un navigateur WebKit intégré comme surface de conception où vous pouvez ajouter des composants HTML, des composants d'interface utilisateur jQuery, des widgets Web (tels que Google Maps et lecteur YouTube) et les styliser avec le thème jQuery et les propriétés CSS. Des actions simples peuvent également être définies. Les utilisateurs peuvent exécuter/tester le prototype dans leur navigateur par défaut et exporter la source HTML/CSS/JavaScript une fois qu'ils sont satisfaits de la conception. Cet outil est davantage orienté vers l'expérience comme Axure mais met l'accent sur la "conception dans le navigateur pour fonctionner dans le navigateur" car il garantit que les maquettes/filaires sont réalisables en phase de développement avec les technologies Web.
Je suis le développeur de cette application. Désolé pour cette auto-promotion éhontée. Néanmoins, je pense que cela peut être un bon outil de prototypage HTML et mérite le détour.