Quelle est la différence entre le wireframing et le prototypage
Quelle est la différence entre le wireframing et le prototypage? Ai-je raison de penser que les prototypes doivent être interactifs et les wireframes doivent être statiques?
Je suis sûr que différentes personnes auront des points de vue différents sur la quantité ou le peu de filaires et de prototypes qui se chevauchent. Ce qui suit est la façon dont j'aborde les deux:
Si vous envisagez une application ou un site Web, et que vous regardez le niveau de la page par exemple, un filaire et un prototype sont superficiellement les mêmes choses, d'un point de vue physique. Ils peuvent tous deux être de faible ou haute fidélité, sur papier ou sur support numérique. Le filaire peut être un modèle pour de nombreuses pages ou une page ou un écran unique. C'est un schéma de page.
Une fois que vous regardez l'image plus grande et comment plusieurs écrans ou pages se connectent ensemble, et commencez à considérer la navigation entre eux et les aspects moins tangibles de la convivialité et de l'interaction, vous liez des wireframes (pluriel) ensemble pour faire un prototype. Le prototype est un système démontrable.
Le prototype peut toujours être une seule page ou un seul écran, mais il incarne davantage un sentiment d'engagement plutôt qu'une apparence visuelle.
Donc, à mon avis, où il diffère, c'est le état d'esprit avec lequel vous abordez les schémas:
Pensez-vous plus dans le sens de 'A quoi cela ressemble-t-il?' ou 'Quelles informations et fonctionnalités sont présentées?' (filaire).
Ou pensez-vous 'Comment puis-je interagir avec cela?' ou 'Comment sera-t-il utilisé?' (prototype).
Bien sûr, les prototypes font souvent référence à des produits physiques (là encore où l'utilisateur interagit avec le produit), tandis que les wireframes sont généralement destinés à une interaction basée sur l'écran, mais je suppose que la question est basée sur la différence relative aux sites Web et aux logiciels.
Wireframe - Fondamentalement, Skelton de l'interface, quelque chose que nous pouvons comparer avec notre BLUE PRINT Prototypage - Un mannequin pratique. combinaison de filaire, d'interaction, de scénarios, d'histoires
Un cadre métallique est utilisé pour capturer les exigences, partager des idées et commencer à définir les spécifications et la structure. Ils peuvent être limités à des diagrammes d'une seule page, ou plus couramment maintenant - un site complet. Ils s'apparentent à des plans. Ils peuvent être des diagrammes hors ligne ou plus souvent maintenant, créés dans un logiciel dédié à la trame métallique. Une armature filaire fait partie du processus de PLANIFICATION.
Un prototype fonctionne ou une version simulée de tout ou partie du site et est utilisé pour obtenir des commentaires - un prototype fait partie du processus de TEST. Ils peuvent être utilisés pour obtenir les premiers commentaires des clients ou des clients, pour tester les concepts d'interface et/ou ils peuvent être utilisés pour tester la capacité de la disposition planifiée à bien fonctionner de manière réactive. Il devient courant de combiner un processus de cadrage filaire avec un "prototypage rapide" des fonctionnalités clés et des mises en page réactives pour effectuer des tests précoces.
Juste ma vue bien sûr ...
Il y a beaucoup de chevauchements, de nombreuses applications de tramage faisant référence aux pages HTML qu'elles produisent en tant que `` prototypes '' et certaines agences utilisant les termes `` filaires '', `` schémas '' et `` prototypes '' de manière interchangeable. Il n'y a pas de règle stricte.
Le wireframing et le prototypage sont des outils exceptionnellement utiles et sous-utilisés dans le monde de la technologie. Les wireframes de sites Web et d'applications sont utiles pour déterminer la mise en page et l'aspect général de chaque écran ou page. Le prototypage est un outil efficace de validation et un moyen de tester votre entreprise de développement.
Wireframing
Le wireframing est probablement la plus reconnue de ces trois étapes de conception d'applications et de sites Web. Il s'agit essentiellement d'un prototype low-tech… extrêmement low-tech. Le wireframing est essentiellement un croquis de chaque page ou écran dans une application ou un site Web. Cela peut être fait sur quelque chose comme un tableau d'affichage, ou même simplement le dessiner sur un tableau blanc.
Nous pouvons également créer des wireframes numériques. Les wireframes numériques sont excellents car ils sont facilement modifiables et sont plus réalistes sur le produit final. L'objectif filaire est de décrire l'apparence de chaque écran de votre application - où vous commencez à créer des mises en page et décidez de la conception de votre application.
Une structure filaire facilement modifiable signifie que vous pouvez tester davantage de structures filaires et même effectuer des comparaisons côte à côte. Ainsi, un site Web filaire est un outil utile. Bien sûr, un site Web ou une application filaire devra intégrer le storyboard.
Un storyboard est essentiellement où vous prenez du recul par rapport à vos wireframes. Notre équipe de conception filaire utilise le storyboard pour voir à quoi ressemblera une application ou un site Web dans son ensemble. C'est ainsi que vous déterminez si le flux ou votre application est logique et propre; en gros, vous examinez la conception structurelle globale.
Prototypage
Le prototypage vous permet de valider votre idée. C’est essentiellement une preuve de concept:
- Votre idée fonctionne-t-elle comme prévu?
- Les principales fonctionnalités contribuent-elles à l'objectif général de l'application ou du site Web?
- Le flux du site Web a-t-il fonctionné comme prévu lors du storyboard?
- Est-ce que les problèmes (et oui il y en aura - assurez-vous que vous êtes prêt pour tous les obstacles qui peuvent survenir) sont insurmontables?
- Résout-il le problème dont vous avez besoin pour résoudre? Sinon, résout-il un autre problème vers lequel vous pouvez pivoter?
Un prototype est une étape essentielle du processus de développement d'applications. Au-delà de toutes les questions ci-dessus auxquelles il aide à répondre, il vous permet de faire des tests préliminaires. Si vous créez un site Web prototype, vous pouvez autoriser l'accès à un nombre limité de personnes sur votre marché cible.
Nous avons constaté que les tests précoces sont un excellent moyen de s'assurer que votre idée aide réellement votre marché cible. Plus souvent qu'autrement, nous avons vu d'autres sociétés de développement créer un site Web pour leurs clients qui a fière allure. Mais cela n'a été vérifié que par les designers - et non par les personnes qui l'ont conçu.
Une chose importante à retenir dans le développement d'applications et de sites Web (ou dans n'importe quelle entreprise, vraiment) est que vous essayez de les vendre à vous-même ou à des développeurs. Vous essayez de la vendre à votre marché cible - si vous voulez que votre application se développe, obtenir des tests précoces est inestimable; De plus, si vous le testez auprès d'adopteurs précoces, vous créez un buzz!
Si je comprends bien, le prototype concerne le comportement et la fonctionnalité, le filaire concerne la commande, le positionnement et le dimensionnement des éléments (boutons, formulaires, etc.).
Roger fait remarquer qu'il existe un état d'esprit différent avec lequel vous approchez un filaire ou un prototype.
Le prototype décrit un concept large et peut être utilisé pour décrire de nombreux artefacts entre les premiers croquis à basse fidélité et un produit final presque fini à haute fidélité. Un prototype n'a pas besoin d'être interactif, mais peut l'être. Un prototype n'a pas besoin d'être numérique, mais peut également l'être pour un produit physique. Dans un prototype, l'accent peut être mis sur toute combinaison de nombreuses propriétés différentes, y compris, mais sans s'y limiter, la forme, la fonction, le concept du produit, l'esthétique, les visuels, les matériaux. À mon avis, la principale valeur des prototypes est qu'ils aident à répondre aux questions (que va faire le produit? Cette idée que j'ai technologiquement possible? Cette disposition fait-elle passer le message?).
Un filaire est (juste) un artefact qui sert de description visuelle schématique de la disposition prévue.
À mon avis, un Wireframe est:
- Un dessin conceptuel de faible fidélité
- Utilisé pour explorer les options de disposition et de flux de tâches
- Une communication visuelle rapide et itérative pour explorer les options à l'aide de données générales
- Un outil de buy-in pour les parties prenantes (concepteurs, clients, développeurs sont tous d'accord avant de coder)
- Un ensemble annoté de chemins et de flux avec des points d'entrée, de sortie et d'interruption
- Peut être fonctionnel ou un storyboard général (Day in the Life)
Un Prototype est:
- Un ensemble de pages ou de composants fonctionnels haute fidélité
- Contient des composants de page détaillés pour le flux de tâches
- Est un scénario de tâche utilisateur spécifique ciblé et testable
- Contient la navigation et les interactions réelles pour un éventuel codage
En d'autres termes, ils sont différents dans leur forme et leur intention.
Convenez que la fidélité peut être un facteur de différenciation.
Si vos structures filaires incluent page après page des descriptions détaillées d'interaction image par image pour les composants individuels, vous êtes peut-être prêt pour le prototypage.
Si vous passez plus de temps à faire en sorte que votre logiciel de prototypage produise de superbes impressions que sur la modélisation des interactions, vous allez probablement être très bien avec le wireframng de ce projet particulier.
Mon équipe utilise actuellement Axure pour diviser la différence - des prototypes cliquables et interactifs qui peuvent également être imprimés et utilisés comme filaires. L'astuce consiste à capturer les informations nécessaires à chaque niveau de granularité dans le même artefact ...
Utilisation du monde physique, analogie avec la voiture
Wireframe = forme et forme de la voiture, pour visualiser quoi et où, maintenu statique dans la salle d'exposition
Prototype = une voiture qui peut être prise pour un essai routier; poste qu'il irait en production
Ma vision du Web/Développement d'applications:
Les wireframes sont des maquettes statiques utilisées pour présenter des éléments GUI pour différents types de page ou fonctions de page.
Les prototypes sont la contrepartie dynamique des wireframes. "Clics factices" utilisés pour présenter une architecture de navigation/fonctionnelle de sites Web/applications.
Ce sont des façons de décrire l'idéation d'interaction à différents niveaux de fidélité. En général, les wireframes ont tendance à pencher en basse fidélité et les prototypes en haute fidélité. Mais ce sont certainement des termes flous et dont la définition varie d'une équipe UX à une autre.
Ma réponse très rapide serait la fidélité. Filaire généralement plus faible fi, prototype plus haut. Bien qu'il y ait beaucoup plus: les wireframes tentent d'aborder les premiers éléments de conception fonctionnelle, les prototypes mettent en pratique certains des éléments des wireframes.
Vous pouvez esquisser quelque chose sur du papier et vous pouvez appeler cela un filaire ou un prototype. Mais la différence est ce que vous comprenez est un filaire et ce que vous avez en main est un prototype.
En bref, Wireframe avec Prototype ainsi que Mind and Brain.
Lorsque vous avez l'intention de concevoir une application mobile ou une application Web, vous aurez d'abord besoin d'un croquis de l'apparence de chaque page. Un concepteur peut définir le flux d'application et une première ébauche de conception uniquement sur la base de concepts commerciaux, avec une esquisse de leur apparence, des boutons qui y seront, des champs qui y seront, etc. destiné à.
Maquettes
Les maquettes sont des images plus vivantes. Ils sont visuellement plus attrayants, ont des couleurs, des polices, des thèmes, des boutons, un logo, etc. À ce stade, les étiquettes des champs, des notes, des types de police, du menu de navigation, etc. sont spécifiées dans la conception. Il s'agit d'une représentation exacte de l'apparence de l'application mobile ou des pages Web.
Les wireframes sont les meilleurs pour concentrer la discussion autour de la "forme" du design, alors que les prototypes sont les meilleurs pour focaliser la discussion sur la "fonction" du design. Bien sûr, compte tenu du chevauchement des différents outils et méthodologies, vous constaterez que les termes sont interchangeables, mais quel que soit le terme, vous devez comprendre ce que vous souhaitez présenter au public.
À mon avis, les wireframes semblent être un terme moins inclusif, généralement utilisé pour les artefacts et les actifs à faible fi et à faible technologie, tandis que les prototypes ont tendance à être plus interactifs et sophistiqués. Je suppose qu'il s'agit de choisir le meilleur outil pour le travail que vous souhaitez entreprendre.