Comment dois-je créer lo-fi (non interactifs) prototypes de l'interface utilisateur?

softwareengineering.stackexchange https://softwareengineering.stackexchange.com/questions/8560

  •  16-10-2019
  •  | 
  •  

Question

Je travaille actuellement à jeter ensemble quelques prototypes de base, en partie pour recueillir les exigences et en partie à la conception de l'interface utilisateur final.

En ce moment je suis en train la construction de l'écran à l'aide Post-it note, avec des notes jaunes d'information et de rose pour les actions (boutons ou menus). L'idée étant que vous pouvez facilement déplacer, supprimer et ajouter de l'information. Mais je suis sûr qu'il ya des méthodes plus efficaces sur le marché.

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

Et pourquoi?

J'ai essayé un certain stylo, du papier et Post-it versions et ils sont allés vers le bas comme un ballon de plomb (probablement mes compétences de dessin). En fin de compte je Balsamiq , qui jusqu'ici est aimé par la plupart des utilisateurs et ils obtiennent est un prototype. Hélas, certaines personnes ont encore des problèmes avec l'idée que la première devrait avoir une idée de ce que l'application devrait faire via des prototypes lo-fi et vraiment envie de « voir quelque chose sur l'écran » avant de vous engager à quoi que ce soit.

Était-ce utile?

La solution

Je préfère un tableau blanc.

Il est facile de changer comme vous prenez des décisions sans redessiner l'ensemble. Il est facile de partager avec d'autres développeurs (à proximité). Il est facile d'annoter en utilisant les notes adhésives ou d'autres couleurs.

Autres conseils

Balsamiq sont généralement mockups le premier port d'escale, presque aussi rapide que l'aide d'un stylo et du papier et réutilisable.

De plus, vous pouvez ajouter un certain degré d'interactivité si vous le souhaitez, lier les pages ensemble par exemple.

http://balsamiq.com/

Le projet Crayon est un Addin Firefox qui fait agréable et simples mockups.

Crayon propose plusieurs haut-formes collection pour dessiner différents types d'interface utilisateur allant de bureau aux plates-formes mobiles. A partir de 2.0.2, crayon est livré avec des pochoirs UI Android et iOS pré-installé. Cela rend encore plus facile de démarrer des applications avec une prototypage installation simple.

caractéristiques de dessin populaires sont également mis en œuvre au crayon pour simplifier les opérations de dessin ...

J'utilise une combinaison de MS Paint et Visual Studio. J'utilise VS à glisser / déposer tous les contrôles que je veux sur un formulaire, puis capture d'écran dans MS Paint pour les réorganiser jusqu'à ce que je comme la façon dont il a l'air.

De cette façon, je peux utiliser simple, familier, libre, et des outils toujours accessibles (pour moi) de se moquer mon interface utilisateur, et le client peut voir l'interface utilisateur car il sera probablement une fois l'application terminée. De plus, souvent VS finit contenant le début de mon projet pour moi.

Modifier réponse Toby me conduire à )

On dirait que vous utilisez les bonnes méthodes, mais vous êtes en cours d'exécution dans la résistance ayant les gens acceptent l'utilité de prototypage rapide. Tout le monde aime le code, mais si une demi-heure, ils sont toujours se battre avec JScrollBars et que vous avez généré 12 mockups, ils pourraient comprendre que la force de ces outils est en itération rapide .

Cela étant dit, les différentes approches à faible fi ont des forces différentes:

  • Whiteboard prototypage est utile parce que tout le monde peut participer et il aide les idées au sol, mais il est seulement un outil de discussion. Vous voulez quelque chose un peu plus loin si vous allez itérer sur une conception, si seulement parce qu'il devient difficile d'effacer vieux marqueur. ;)

  • Papier prototypage est utile parce que les gens comprennent qu'il est impermanent et ouvert au changement, et vous pouvez itérer rapidement, et vous pouvez toujours obtenir de très bons résultats. Faites un test d'utilisation avec certains utilisateurs sur un prototype de papier et vous pouvez obtenir d'excellents commentaires sur une conception très rapidement, à très faible coût. Les gens sont vraiment engagés quand ils peuvent voir et sentir l'interface sur le papier.

  • Balsamiq est un raccourci pour faire rapidement des prototypes de papier qui sont réutilisables. J'imprimer des captures d'écran et de les utiliser comme des prototypes de papier. Je l'utilise aussi pendant réunions à l'aide de maquettes des idées que nous les avons - semblable au prototypage tableau blanc. Je l'ai aussi utilisé Visio et OmniGraffle pour cela.

  • Couper et coller des prototypes sont bonnes pour itérer sur une conception existante - prendre une capture d'écran, hacher dans un éditeur d'image, et mélanger et assortir avec de nouvelles commandes (de Balsamiq ou ailleurs). Encore une fois votre objectif est itération rapide du prototype, pas quelque chose qui ressemble bien.

Je ne fais jamais le prototypage avec les utilisateurs. Je le fais avec l'équipe de conception, sur la base des données de l'utilisateur que nous avons. Les utilisateurs ne sont pas les concepteurs ; si vous les traitez en tant que concepteurs, vous vous retrouvez avec une sauce tomate liquide, café amer (merci Malcolm Gladwell), et la voiture d'Homer. Recueillir les commentaires des utilisateurs à votre conception et de l'utiliser pour affiner la conception avec l'équipe de conception.

Ma première maquettes sont toujours un crayon et du papier ou un tableau blanc, mais une fois que les bases sont clouées je propose habituellement au format HTML. J'ai un tas d'images d'espace réservé qui disent simplement « En-tête », « bannière », « Image », « graphique » et autres. Certains CSS simples pour la pose des choses un peu sanely et je suis fait. Un peu JS plaquées sur un contrôle peut vous donner un semblant de fonctionnalité, et les gens semblent juste pour « obtenir » mieux.

Le seul problème est que je suis probablement le pire concepteur d'interface utilisateur de vie du monde, et parfois de rappeler aux gens que je suis juste la collecte des exigences, et non pas leur montrer ce que la chose terminée ressemblera. Je mets souvent l'arrière-plan rose ou quelque chose, alors chaque fois que quelqu'un demande: « Est-il d'être rose? » Je peux contrer avec « Ceci est juste une maquette, la vraie chose va être différent » (ou « Vous devrez en discuter avec le concepteur »).

J'utilise un stylo et du papier, puis après avoir dessiné l'interface utilisateur quelques fois rapides, je tente de le faire dans powerpoint 2 ou 3 fois. Ayant 5 ou 6 itérations avant d'entrer dans l'éditeur réelle me permet de réduire les UIs impraticables (tels que la génération de contenu Y basé sur X lorsque l'textbox utilisateur n'a pas encore vu X). Je le vois comme une chance de sortir les stupids tout de suite.

Pen & papier / tableau blanc, et vous pouvez également utiliser Visio ou quelque chose de similaire (Visio propose des modèles de l'interface utilisateur pour les contrôles communs). Parfois, je prends des coups de l'interface utilisateur existante (similaire) que nous avons et couper et coller des la nouvelle interface utilisateur sur l'aide d'un programme de peinture comme Paint.NET.

Je l'ai fait le prototypage rapide de Delphi à plusieurs reprises. Il est facile de jeter très rapidement une mise en page de l'écran, beaucoup plus rapide que dans powerpoint ou visio. L'exe résultant peut être attaché à des e-mails sans nécessiter de dépendances. Depuis que je l'utilise pour prototyper des applications web, il n'y a aucun danger de confondre les gens avec le prototype d'une version à mi-fini.

J'ai essayé de faire la même chose avec Sencha Ext Designer, mais le système de mise en page de Ext JS est plus difficile à utiliser, et il se sentait comme un fardeau plus lourd qu'une commodité aux idées Iterate rapidement.

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

  • Tableau blanc (pour le prototypage de manière interactive / discuter. Prenez une photo après!)

  • concepteur GUI RAD de style (Visual Studio, NetBeans, Delphi)

    • faites bien cela, et il peut effectivement devenir l'un des moyens les plus rapides pour créer des prototypes d'une application « fenêtres, des widgets et des formes ». Bonus: les prototypes peuvent finir par vraiment très professionnel, selon la rapidité avec laquelle vous jetez ensemble. Ils peuvent parfois même servir de point de départ pour créer la vraie chose, une fois un prototype est approuvé.

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

  • statique des fichiers HTML / CSS / JS sur le disque

    • J'imagine une application de conception WYSIWYG ne serait pas mal, mais je habituellement juste pirater sur le HTML brut. Je ne fais pas beaucoup de ceux-ci, de toute façon.

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

  • outils graphiques Raster - Photoshop / Gimp

  • art ASCII; -)

scroll top