Question

Lors du prototypage de la fonctionnalité initiale de l'interface graphique avec un client, est-il préférable d'utiliser un dessin au stylo/papier ou de simuler quelque chose à l'aide d'un outil et de lui montrer cela ?

L'argument contre une conception générée par un outil est que le client peut parfois se concentrer sur les spécificités de bas niveau de la maquette plutôt que d'adopter une vue fonctionnelle de niveau supérieur de l'interface graphique dans son ensemble.

Était-ce utile?

La solution

Commencez toujours par des maquettes en papier ou en papier.Vous ne voulez pas tomber dans le piège de donner une impression d’exhaustivité lorsque le back-end est complètement creux.

Un prototype soigné ou un exemple au pixel près met trop l'accent sur la conception.Avec un croquis évident, vous avez une meilleure chance de discuter des fonctionnalités et du contenu souhaités plutôt que des couleurs, des photos et d'autres questions stylistiques.Il y aura du temps pour cette discussion plus tard dans le projet.

Jeff discute du prototypage papier dans son article Coding Horror Développement de logiciels UI-First

Cliquez sur le bouton "Regarder une vidéo!" lien à twitter.com pour voir une version intéressante de l'idée de Artisanat commun.

Autres conseils

Le "Aspect et toucher des serviettes" pour Java, c'est vraiment cool pour le prototypage.Une application réelle, fonctionnelle et cliquable qui semble avoir été dessinée sur une serviette.Regardez cette capture d'écran :

Napkin Look and Feel

Sérieusement, c'est pas cool ?

Je vous suggère de vous asseoir avec votre client et d'utiliser un outil comme Écrans de maquette et développer l'interface utilisateur de manière interactive.Un avantage par rapport à Napkin LAF est qu'il ne nécessite pas de codage, ni même d'outils de développement d'aucune sorte.

Vérifier Balsamique

Il affiche très bien la vue de la serviette "CECI N'EST PAS UNE APPLICATION FONCTIONNELLE" et est facile à utiliser.

A une fonctionnalité complète démo vous pouvez essayer en ligne et, en prime, vous pouvez envoyer votre XML par e-mail à votre client et il peut le modifier, jouer avec et vous le renvoyer par e-mail sans avoir besoin de licence.

Il existe un livre intitulé Prototypage papier qui détaille le dessin au stylo et sur papier et ce que vous pouvez en tirer.Je pense que cela présente de nombreux avantages, notamment le fait que l'on peut, très tôt (et facilement), modifier le résultat final sans trop d'effort, puis repartir du bon pied.

Une version papier de base est la voie à suivre pour une première maquette.D'après mon expérience, si vous réalisez une « vraie » maquette, même si vous expliquez au client qu'il s'agit d'une maquette non fonctionnelle, il est confus lorsque les choses ne fonctionnent pas.

Conclusion :gardez-le aussi simple que possible.Si c'est sur papier, le client ne peut en aucun cas le confondre avec un produit fonctionnel.

Pour le premier brouillon, je préfère utiliser du papier millimétré (le truc avec une grille imprimée dessus) et un crayon.Le papier millimétré est idéal pour aider à maintenir les proportions.Une fois que le client et moi sommes parvenus à une conclusion, je remplis généralement le dessin avec un stylo, car le crayon a tendance à s'estomper.

Lorsque je commencerai à construire le prototype numérique, je numériserai celui dessiné à la main et l'utiliserai comme modèle d'arrière-plan.Il semble que cela fonctionne plutôt bien pour moi.

Je pense qu'il est préférable de commencer par du papier/des tableaux blancs/des murs blancs.

Une fois que vous avez la structure de base, vous pouvez la déplacer vers Visio avec les pochoirs filaires

Ou vous pouvez utiliser Denim (Un outil informel pour la conception de sites Web et d'interfaces utilisateur à un stade précoce) avec une tablette PC ou des tablettes Wacom pour concevoir l'interface graphique et l'exécuter sous forme de site Web HTML.

FilaireSketcher est un outil qui permet de créer rapidement des wireframes, des maquettes et des prototypes pour les applications de bureau, Web et mobiles.Il s'agit à la fois d'un autonome version et en tant que brancher pour les IDE Eclipse.Il possède des fonctionnalités distinctives telles que des storyboards, des composants, des liens et l'exportation de PDF vectoriels.Parmi les IDE pris en charge figurent Aptana, Flash Builder, Zend Studio et Rational Application Developer.

Sample WireframeSketcher mockup
(source: wireframesketcher.com)

J'ai récemment utilisé une application Windows pour prototyper une application auprès d'un client (l'interface finale doit être intégrée dans un site Web).

Au début, les gens pensaient que ce serait la dernière version et ils ont commencé à faire de très vives critiques de la façon dont les commandes étaient affichées aux mots que j'avais utilisés (terminologie et autres) et le temps de réunion s'est terminé avant même que nous puissions discuter de la fonctionnalité elle-même.

Cette discussion a duré des jours et des jours jusqu'à ce que je leur dise que, étant une simulation (et non une application finale), toutes les contributions sont les bienvenues, mais nous devions d'abord nous concentrer sur les fonctionnalités, puis nous pourrions passer à l'apparence et à la convivialité. problèmes de terminologie.

Depuis cette rencontre, j'ai toujours peur des prototypes et des maquettes...Peut-être que j'aurais simplement dû leur donner quelque chose réalisé en visio à la place.

Vous pouvez essayer AvantUI, il permet le prototypage avec différents styles, de plus, il peut créer un prototype interactif et l'exécuter dans un navigateur.

Pour un outil basé sur un navigateur sans installation, vous pouvez essayer brouillon

C'est gratuit - et si vous avez un compte Gmail - aucune inscription n'est nécessaire.

Crée des prototypes interactifs/étape par étape ou diaporama.Vous pouvez partager votre prototype avec toute personne de votre choix en envoyant simplement un lien.

Ça marche pour nous...

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top