Comment créer des prototypes d'interface utilisateur lo-fi (non interactifs)?

Je travaille actuellement sur l'élaboration de quelques prototypes de base, en partie pour rassembler les exigences et en partie pour concevoir l'interface utilisateur finale.

En ce moment, j'essaie de construire l'écran en utilisant des notes Post-it, avec des notes jaunes pour les informations et roses pour les actions (boutons ou menus). L'idée étant que vous pouvez facilement déplacer, supprimer et ajouter des informations. Mais je suis sûr qu'il existe des méthodes plus efficaces.

Quelle est la méthode recommandée aux développeurs pour créer efficacement des prototypes d'interface utilisateur non interactifs?

Et pourquoi?

J'ai essayé des versions de stylo, de papier et de post-it et elles sont tombées comme un ballon en plomb (probablement mes compétences en dessin). En fin de compte, j'ai utilisé Balsamiq , qui jusqu'à présent est apprécié par la plupart des utilisateurs et ils l'obtiennent comme prototype. Hélas, certaines personnes ont encore des problèmes avec l'idée que l'on devrait d'abord se faire une idée de ce que l'application devrait faire via certains prototypes lo-fi et vraiment vouloir "voir quelque chose à l'écran" avant de s'engager sur quoi que ce soit.

Je préfère un tableau blanc.

Cela facilite le changement lorsque vous prenez des décisions sans redessiner le tout. Il est facile de partager avec d'autres développeurs (à proximité). Il est facile d'annoter en utilisant des notes autocollantes ou d'autres couleurs.

Les maquettes Balsamiq sont généralement le premier port d'escale, presque aussi rapide que d'utiliser un stylo et du papier et réutilisables.

De plus, vous pouvez ajouter un certain degré d'interactivité si vous le souhaitez, en reliant les pages entre elles par exemple.

http://balsamiq.com/

Le projet Pencil est un complément Firefox qui fait des maquettes simples et agréables.

Pencil fournit diverses collections de formes intégrées pour dessiner différents types d'interface utilisateur allant du bureau aux plates-formes mobiles. À partir de la version 2.0.2, Pencil est livré avec des pochoirs d'interface utilisateur Android et iOS préinstallés. Cela facilite encore plus le démarrage des applications de prototypage avec une installation simple.

Des fonctionnalités de dessin populaires sont également implémentées dans Pencil pour simplifier les opérations de dessin ...

J'utilise une combinaison de MS Paint et Visual Studio. J'utilise VS pour faire glisser / déposer tous les contrôles que je veux sur un formulaire, puis le capture d'écran dans MS Paint pour les réorganiser jusqu'à ce que j'aime son apparence.

De cette façon, je peux utiliser des outils simples, familiers, gratuits et toujours accessibles (pour moi) pour simuler mon interface utilisateur, et le client peut voir l'interface utilisateur telle qu'elle apparaîtra probablement une fois l'application terminée. De plus, souvent VS finit par contenir le début de mon projet pour moi.

Edit: la réponse de Toby m'a conduit à Balsamiq , et c'est maintenant mon principal outil de choix pour les maquettes d'interface utilisateur à présenter à d'autres personnes.

Je retire encore MSPaint ou un stylo / papier à l'occasion, mais ce n'est généralement que lorsque je dessine la conception de base de l'interface utilisateur pour ma propre référence, ou si je veux présenter au client deux options pour un écran complet (par exemple. " voulez les boutons ici ou ici? " )

Il semble que vous utilisiez de bonnes méthodes, mais vous rencontrez des difficultés à ce que les gens acceptent l'utilité du prototypage rapide. Tout le monde aime coder, mais si une demi-heure plus tard, ils se battent toujours avec JScrollBars et vous avez généré 12 maquettes, ils pourraient comprendre que la force de ces outils réside dans une itération rapide .

Cela dit, les différentes approches low-fi ont des atouts différents:

• Le prototypage de tableaux blancs est utile car tout le monde peut participer et il aide à fonder les idées, mais ce n'est qu'un outil de discussion. Vous voulez quelque chose un peu plus loin si vous voulez répéter sur un design, ne serait-ce que parce qu'il devient difficile d'effacer l'ancien marqueur. ;)

• Le prototypage papier est utile car les gens comprennent qu'il est impermanent et ouvert au changement, et vous pouvez répéter rapidement, et vous pouvez toujours obtenir de très bons résultats. Faites un test de convivialité avec certains utilisateurs sur un prototype papier et vous obtiendrez très rapidement d'excellents commentaires sur une conception, à un coût assez faible. Les gens s'engagent vraiment lorsqu'ils peuvent voir et sentir l'interface sur le papier.

• Balsamiq est un raccourci pour fabriquer rapidement des prototypes de papier réutilisables. J'imprime des captures d'écran et les utilise comme prototypes papier. Je l'utilise également lors de réunions pour aider à maquiller des idées telles que nous les avons - comme pour le prototypage de tableaux blancs. J'ai également utilisé Visio et OmniGraffle pour cela.

• Les prototypes de copier-coller sont bons pour itérer sur une conception existante - prenez une capture d'écran, coupez-la dans un éditeur d'images et mélangez-la avec de nouveaux contrôles (de Balsamiq ou ailleurs). Encore une fois, votre objectif est une itération rapide du prototype, pas quelque chose qui semble bon.

Je ne fais jamais de prototypage avec des utilisateurs. Je le fais avec l'équipe de conception, sur la base des données utilisateur dont nous disposons. Les utilisateurs ne sont pas des concepteurs ; si vous les traitez comme des designers, vous vous retrouvez avec de la sauce tomate liquide, du café amer (merci Malcolm Gladwell) et la voiture Homer. Rassemblez les commentaires des utilisateurs sur votre conception et utilisez-les pour affiner la conception avec l'équipe de conception.

Mes premières maquettes sont toujours des crayons et du papier ou un tableau blanc, mais une fois les bases clouées, je passe généralement au HTML. J'ai un tas d'images d'espace réservé qui disent simplement "En-tête", "Bannière", "Image", "Graphique" et autres. Quelques CSS simples pour disposer les choses un peu sainement et j'ai terminé. Un petit JS cloué sur un contrôle peut vous donner un semblant de fonctionnalité, et les gens semblent simplement "mieux".

Le seul problème avec cela est que je suis probablement le pire concepteur d'interface utilisateur vivant au monde, et je dois parfois rappeler aux gens que je ne fais que rassembler des exigences, ne pas leur montrer à quoi ressemblera la chose terminée. Je mets souvent le fond en rose ou quelque chose comme ça, donc chaque fois que quelqu'un demande "Est-ce que ça doit être rose?" Je peux contrer avec "Ceci est juste une maquette, la vraie chose sera différente" (ou "Vous devrez en discuter avec le designer").

J'utilise d'abord un stylo et du papier, puis après avoir dessiné l'interface utilisateur quelques fois rapidement, j'essaie de le faire en powerpoint 2 ou 3 fois. Avoir 5 ou 6 itérations avant d'entrer dans l'éditeur réel m'aide à réduire les interfaces utilisateur inutilisables (telles que la génération de contenu Y basé sur la zone de texte X lorsque l'utilisateur n'a même pas encore vu X). Je vois cela comme une chance de sortir immédiatement des stupides.

Stylo et papier / tableau blanc, et vous pouvez également utiliser Visio ou quelque chose de similaire (Visio est livré avec des modèles d'interface utilisateur pour les contrôles courants). Parfois, je prends des photos de l'interface utilisateur existante (similaire) que nous avons et je coupe et colle la nouvelle interface utilisateur à l'aide d'un programme de peinture comme Paint.NET.

J'ai fait plusieurs fois du prototypage rapide dans Delphi. Il permet de regrouper très rapidement une disposition d'écran, beaucoup plus rapidement qu'en powerpoint ou visio. L'exe résultant peut être joint à des e-mails sans nécessiter de dépendances. Étant donné que je l'utilise pour prototyper des applications Web, il n'y a aucun danger que les gens confondent le prototype avec une version à moitié terminée.

J'ai essayé de faire la même chose avec Sencha Ext Designer, mais le système de mise en page d'Ext JS est plus difficile à utiliser, et il m'a semblé plus contraignant que pratique de répéter rapidement les idées.

Je n'utilise pas toujours la même approche. Certaines des techniques que j'utilise sont (par ordre approximatif de fréquence):

• Tableau blanc (pour le prototypage interactif / discussion. Prenez une photo après!)

• Concepteur d'interface graphique de style RAD (Visual Studio, NetBeans, Delphi)

  • Soyez bon dans ce domaine, et cela peut en fait devenir l'un des moyens les plus rapides pour créer des prototypes d'une application "fenêtres, widgets et formulaires". Bonus: les prototypes peuvent finir par sembler très professionnels, selon la vitesse à laquelle vous les assemblez. Ils peuvent parfois même servir de point de lancement pour créer la vraie chose, une fois qu'un prototype est approuvé.
    
    

• Papier et stylo / crayon (généralement pour le remue-méninges)

• Fichiers HTML / CSS / JS statiques sur le disque

  • J'imagine qu'une application de conception WYSIWYG ne ferait pas de mal ici, mais je hack habituellement le HTML brut. Je n'en fais pas beaucoup de toute façon.
    
    

• Outils de dessin vectoriel - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Outils graphiques raster - Photoshop / Gimp

• Art ASCII ;-)