« Prototypage » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 21 : Ligne 21 :
[[Fichier:Iterative-design-process.png|centré|sans_cadre|703x703px|Processus de conception itératif (Blog [https://www.justinmind.com justinmind.com])<ref>https://www.justinmind.com/customers/iterative-design-process-at-tokbox/ </ref>]]
[[Fichier:Iterative-design-process.png|centré|sans_cadre|703x703px|Processus de conception itératif (Blog [https://www.justinmind.com justinmind.com])<ref>https://www.justinmind.com/customers/iterative-design-process-at-tokbox/ </ref>]]


=Typologie=
=Typologie & dimensions=


* Fidélité (low fidelity vs high fidelity)
Le niveau de prototypage varie selon plusieurs dimensions. En fonction des objectifs qu'on poursuit, de l'étape dans laquelle on se situe au sein processus de conception, on peut "crayonner" une interface, créer un prototype interactif, et ceci de manière plus ou moins aboutie en termes d'interface graphique et de fonctionnalités.
 
==Niveau de fidélité==
** Low Fidelity (skecthes, wireframes) : papier/crayon ou digitale, rapide, permet de hierarchiser les idees et d’avoir une esquisse de l’interface envisagée
** Low Fidelity (skecthes, wireframes) : papier/crayon ou digitale, rapide, permet de hierarchiser les idees et d’avoir une esquisse de l’interface envisagée
** High Fidelity (mockups, prototypes) :  
** High Fidelity (mockups, prototypes) :  


* Interactivité (static vs interactive)
==Niveau d'interactivité==
** Static
** Static
** Interactive
** Interactive
==Niveau d'aboutissement==


[[Fichier:Types-of-prototyping.png|centré|sans_cadre|703x703px|Différents types de prototypage selon la fidélité du prototype et son niveau de fonctionnalité (Blog [https://www.steveforbes.com.au/blog])<ref>https://www.steveforbes.com.au/blog/2018/12/4/getting-started-with-prototyping/ </ref>]]
[[Fichier:Types-of-prototyping.png|centré|sans_cadre|703x703px|Différents types de prototypage selon la fidélité du prototype et son niveau de fonctionnalité (Blog [https://www.steveforbes.com.au/blog])<ref>https://www.steveforbes.com.au/blog/2018/12/4/getting-started-with-prototyping/ </ref>]]

Version du 8 juin 2022 à 20:16


Définition

Au sein d’une démarche de conception, le prototypage est l’étape durant laquelle on crée « un modèle original qui possède toutes les qualités techniques et toutes les caractéristiques de fonctionnement d'un nouveau produit. (...) », mais il s'agit aussi parfois d'un exemplaire incomplet (et non définitif) de ce que pourra être un produit (éventuellement de type logiciel, ou de type « service ») ou un objet matériel final. (Wikipedia)

Dans la conception centrée sur l’utilisateur (ou orientée utilisateur), souvent traduite par la notion de “design UX” (conception de l’expérience utilisateur), le prototypage est l’étape qui intervient après l’analyse de la demande du commanditaire et des besoins des utilisateurs finaux, et permet à ces derniers de tester, avant développement, un produit similaire au projet à développer afin d’obtenir des informations sur leur expérience du système conçu et de valider les choix de conception et/ou de proposer des remédiations pour le projet final. Dans le design UX, le prototypage consiste donc à créer un (ou plusieurs) produit, partiel ou complet, dont l’interface et le comportement sont plus ou moins fidèles au système final actuellement envisagé, plus ou moins interactifs, en utilisant des outils différents selon le degré d’achèvement du projet et l’objectif visé. Inscrit dans une démarche de conception itérative et souvent collaborative, dédié à la prise en compte des usages, le prototypage permet de faire évoluer rapidement et à moindre coût la conception du produit final.

Objectifs

Le prototypage poursuit plusieurs objectifs :

  • Visualiser l’interface et simuler le comportement des fonctionnalités
  • Communiquer, partager un même langage avec les parties prenantes (équipe de conception, développeurs, commanditaires)
  • Stimuler la production d’idées
  • Économiser du temps et de l’argent (vs. passer des mois à développer un produit non adapté aux utilisateurs)
  • Permettre aux utilisateurs cibles de visualiser et de tester le comportement du prototype

En fonction de leurs retours, il permet de valider les choix de conception et de servir de base pour le développement du produit final pour les programmateurs, mais aussi de proposer des alternatives qui pourront à leur tour être soumises à l’expérience des utilisateurs. Il s’agit donc d’un cycle qui se poursuit jusqu’à ce que la performance ou la qualité du design du prototype soient atteints.

Processus de conception itératif (Blog justinmind.com)[1]

Typologie & dimensions

Le niveau de prototypage varie selon plusieurs dimensions. En fonction des objectifs qu'on poursuit, de l'étape dans laquelle on se situe au sein processus de conception, on peut "crayonner" une interface, créer un prototype interactif, et ceci de manière plus ou moins aboutie en termes d'interface graphique et de fonctionnalités.

Niveau de fidélité

    • Low Fidelity (skecthes, wireframes) : papier/crayon ou digitale, rapide, permet de hierarchiser les idees et d’avoir une esquisse de l’interface envisagée
    • High Fidelity (mockups, prototypes) :

Niveau d'interactivité

    • Static
    • Interactive

Niveau d'aboutissement

Différents types de prototypage selon la fidélité du prototype et son niveau de fonctionnalité (Blog [1])[2]

Outils

  • Sketch
  • Balsamiq
  • Figma
  • Axure
  • Adobe XD
  • InVision
  • Marvel
  • Framer
  • ProtoPie
  • Proto.io
  • Fluid UI
  • Origami

Utilisation

  • Recherche / tests utilisateurs

(v. image Maze)

  • Communication commanditaire, hiérarchie, clients…
  • Base de dév