user interface - Prototypage d'une interface graphique avec un client

Translate

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

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 globale.

This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

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 poli ou un exemple pixel-parfait 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 HorrorDéveloppement logiciel UI-First

Cliquez sur "Regarder une vidéo!" lien àtwitter.compour voir une interprétation intéressante de l'idée deArtisanat commun.

La source
Translate

le"Aspect et toucher de la serviette"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?

La source
Rad
Translate

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

La source
Translate

Check-outBalsamiq

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

A une fonctionnalité complètedémovous pouvez essayer en ligne et en prime, vous pouvez envoyer votre XML à votre client et ils peuvent le modifier, jouer avec et vous l'envoyer par courrier électronique sans avoir à avoir une licence.

La source
Translate

Il y a un livre appeléPrototypage papierqui détaille le dessin au stylo et au papier et ce que vous pouvez en tirer. Je pense que cela présente de nombreux avantages, en particulier que vous pouvez, très tôt (et facilement), modifier ce que sera le résultat final sans trop d'efforts, puis repartir du bon pied.

La source
Translate

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

Bottom line: restez aussi simple que possible. Si c'est sur papier, il n'y a aucun moyen pour le client de le confondre avec un produit fonctionnel.

La source
Translate

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 remplirai généralement le dessin avec un stylo car le crayon a tendance à s'estomper.

Quand je construis le prototype numérique, je scanne le prototype dessiné à la main et je l'utilise comme modèle d'arrière-plan. Semble fonctionner plutôt bien pour moi.

La source
Translate

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

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

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

La source
Translate

FilaireSketcherest un outil qui permet de créer rapidement des wireframes, des maquettes et des prototypes pour les applications de bureau, Web et mobiles. Il vient à la fois comme unautonomeversion et en tant quebrancherpour les IDE Eclipse. Il présente des caractéristiques distinctives telles que des storyboards, des composants, des liens et des exportations PDF vectorielles. Parmi les IDE pris en charge, on trouve Aptana, Flash Builder, Zend Studio et Rational Application Developer.

Sample WireframeSketcher mockup
(la source:wireframesketcher.com)

La source
Translate

J'ai récemment utilisé une application Windows pour prototyper une application à 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 contrôles étaient affichés aux mots que j'avais utilisés (terminologie et trucs) et l'heure de la réunion s'est terminée avant même que nous puissions discuter de la fonctionnalité elle-même.

Cette discussion a traîné pendant 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 nous concentrer d'abord sur les fonctionnalités, puis nous pourrions passer à regarder et à ressentir aussi bien que problèmes de terminologie.

Depuis cette rencontre, je suis toujours terrifiée par les prototypes et les maquettes ... Peut-être aurais-je dû leur donner quelque chose de made in visio à la place.

La source
Aldrich Lee
Translate

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

La source
Jan
Translate

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

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

Fait des prototypes interactifs / étape par étape ou diaporama. Vous pouvez partager votre protoype avec n'importe qui de votre choix en envoyant simplement un lien.

Fonctionne pour nous ...

La source