Quel est le meilleur moyen de créer des prototypes d'applications interactives?

Question

La question doit être interprétée d'un point de vue général et ne pas viser uniquement les applications Web ou les applications de bureau.

Je cherchais un moyen simple de créer des prototypes interactifs pour des applications Web. J'aimerais utiliser une technique qui permet la création d'interface utilisateur simple, et en particulier la recréation et la modification d'interface utilisateur dans des itérations ultérieures. Remplir l'interface utilisateur avec des données de maquette devrait être très simple. La technique peut nécessiter une forme simple de programmation, par ex. spécifier un comportement de glisser-déposer de l'élément d'interface utilisateur A à l'élément d'interface utilisateur B.

Adobe Flex Builder est l’un des outils que j’utilise actuellement. Le concepteur d'interface graphique inclus est très bon et j'ai acquis quelques compétences avec AS3 jusqu'à présent. Le problème consiste à ajouter des données à l'interface utilisateur. Il en résulte toujours du code de programmation pour la vérification et l'analyse des structures d'arborescence XML, et principalement le débogage de cette section du prototype. Trop lourd!

PowerPoint est un autre outil que beaucoup de gens utilisent. Il s’agit d’un moyen très lourd de créer une interface graphique en traçant chaque partie d’une interaction dans une diapositive distincte. En aucune façon! Je serais beaucoup plus rapide avec les prototypes en papier. D'autres outils de dessin de forme libre (mieux!) Font également partie de cette catégorie (je suis un utilisateur d'inkscape heureux et lourd), mais Prototyping et Mockup ne sont évidemment pas leur objectif principal. La palette de stencil UI pour Viso le rend un peu meilleur que le concours de dessin.

Les principaux concurrents du prototypage rapide sont les suivants:

• iRise
• Axure
• Serena et autres?
• Viso
• Powerpoint, Illustrator, Inkscape ou tout autre outil de dessin au format libre
• prototypage de papier
• IDE avec de bons générateurs d'interface graphique (tels que Flex Builder Designer et Netbeans Matisse)

Mon avis est que les véritables concepteurs d’interface graphique constituent un bon point de départ. Quelles sont vos approches actuelles? Veuillez décrire ici votre processus, ainsi que les avantages et les inconvénients.

Answer 1

Les véritables constructeurs d’interface graphique sont:

• beaucoup plus lent
• Seuls les programmeurs peuvent les utiliser (essayez d'expliquer à l'analyste comment renseigner une table en VB)
• Ils ne vous permettent pas d'annoter vos maquettes à la volée
• Ne disposez pas de skins (noirs et blancs, par exemple) pour créer des écrans qui ne peuvent pas être confondus avec "presque terminé". application

Les outils de maquette spécialisés sont généralement:

• Axé sur la communication
• pouvez imprimer ou exporter vos maquettes (avec vos notes) au format PDF / HTML / Word, etc.
• Les meilleurs ont une variante de " écrans principaux " vous pouvez ainsi créer des centaines de maquettes à partir de quelques écrans principaux de l'application (vous obtenez rapidement beaucoup de maquettes lorsque vous essayez de discuter de scénarios réels avec votre client)
• Assez rapidement pour pouvoir créer un prototype en temps réel lors d'une réunion

Il y a près de dix ans, j'étais frustré par tout ce qui précède et j'ai créé mon propre outil: MockupScreens . Il est vite devenu très populaire: -)

Et voici la liste la plus complète d'outils spécialisés de ce type que je connaisse. La plupart d'entre elles sont gratuites: http://c2.com/cgi/wiki?GuiPrototypingTools

Answer 2

Prototypage rapide et sale du papier: PowerPoint (voir: Point de repère Boîte à outils de prototypage )

-Excellent pour assembler facilement des prototypes pouvant être présentés. La nature des diapositives peut également servir de substitut à une interaction fictive. L'inconvénient est le manque de standardisation. Pas pour des projets disciplinés.

Prototypage de papier discipliné: Visio

-Standardized et complet, mais plus lourd

Prototypage interactif: Visual Studio

-Très rapide construction d'interaction en utilisant le glisser-déposer et les événements. Peut être piloté par les données. Vous pouvez même construire un prototype de "base" en tant que kit de démarrage. Le seul inconvénient est la tentation de réellement en faire l'application de production. ;)

Answer 3

Il existe également un Balsamiq . J'aime bien ça, mais je me lasse généralement vite de ces choses-là. Je finis par utiliser le stylo et le papier ou le constructeur d'interface d'OS X, qui n'est pas plus difficile à utiliser que tous ces outils de prototypage.

Answer 4

Si vous parlez de maquettes ou de structures filaires (images statiques), Visio est un outil de choix.

La plupart des logiciels que vous avez mentionnés dépassent le niveau de l'utilisateur professionnel (c'est-à-dire que vous aurez besoin d'un spécialiste pour réaliser les maquettes, par opposition aux utilisateurs professionnels qui vous aident), ou ne sont pas créés à des fins de simulation. ups.

Si vous avez besoin d’un prototype dynamique, vous disposez de nombreuses options. Tout dépend du type de compétences disponible dans l’équipe. Par exemple, j'ai un gars très fort en HTML. Il serait beaucoup plus facile pour lui de créer une page HTML à partir de zéro dans le bloc-notes et d'essayer de faire la même chose avec Flash dans un outil WYSIWYG. Certaines autres personnes ont de bonnes compétences en Flash et pourraient les employer, etc.

Answer 5

Expression Blend ( http://www.microsoft.com/ expression / products / overview.aspx? key = blend ) peut être utilisé pour créer des maquettes rapides en XAML. Vous pouvez stocker les données de la maquette en tant que XML intégré dans le code XAML ou les convertir rapidement en application WPF / Silverlight et créer une logique métier de base derrière votre maquette à l'aide de Visual C # Express ( http://www.microsoft.com/express/vcsharp/ ) ou Visual Studio 2008.