SlideShare une entreprise Scribd logo
Maquettes IHM : méthodes et outils
Qu’en attendre et comment les utiliser à bon escient ?

Sophia Antipolis, 20/02/2014

Powered by
Qui est Use Age ?

Use Age regroupe des ergonomes experts en
Interaction Homme-Machine et des personnes
intéressées par l’ergonomie, souhaitant :
• développer cette expertise,
• favoriser les échanges entre les différentes
formes de pratiques,
par l’organisation de différentes manifestations …
dont le World Usability Day depuis 2005
Maquetter une interface signifie…

Formaliser
un concept

un aspect un fonctionnement

Présenter pour
brainstormer

spécifier

valider

Evaluer
l‘ergonomie

la faisabilité

le coût
Maquetter une interface…
En moyen des supports rapides et faciles à réaliser

20/02/2014

4
Maquette ou Prototype ?
Prototype
• Est conçu sur la plateforme réelle et peut être connecté à des
données fictives ou réelles
• Souvent une Beta du produit final

Maquette
• Réalisée sur un système différent de celui qui sera utilisé pour le
produit final
• Pas de connexion à des bases de données
 Si on n’est pas censés faire du code réutilisable on fait des maquettes
et non pas des prototypes
20/02/2014

5
Maquettes IHM : Pourquoi ?
Les bénéfices :
 Permet de collaborer autour de la solution : validations à l’intérieur de

l’équipe ou avec le commanditaire

 Permet de réaliser plusieurs cycles de tests utilisateurs et donc d’assurer
une bonne user experience
 Peut servir de base pour la mise au point des spécifications IHM
• à fournir aux développeurs
• à fournir aux graphistes (visuels et contraintes de couleurs, police…)
 Permet de réduire le temps de développement jusqu’à 30% (ROI++)

Mais il faut Prévoir du budget et du temps en amont
20/02/2014

6
Maquettes IHM : Quand ?
Avant qu’une seule ligne du code ne soit écrite !
Cycle en V
Maquettage
IHM
Maquettage
IHM
Maquettage
IHM

Maquettage
IHM

20/02/2014

7
A ne pas oublier avant de maquetter
Pour qui

Infos sur
marché

Pour faire quoi

Scénario/Tâche

Quand, où, comment

Infos sur
utilisateurs

Personas

Contexte

Benchmarking

Maquettage
User Testing

Interaction

et… construire notre maquette en respectant les principes de
base d’ergonomie des IHM (organisation visuelle, lisibilité…)
20/02/2014

8
Niveaux de fidélité des maquettes
En théorie :
• Basse définition (Lo-Fi) ou bas niveau
– Première idée de l’organisation visuelle des contenus

• Moyenne définition (Mi-Fi) ou moyen niveau
– Prototypes informatiques respectant le zoning final (wireframes)
– Rudiments de visuel tels qu’images, couleurs…

• Haute définition (Hi-Fi) ou haut niveau
– Look&feel définitif, charte graphique finale

20/02/2014

9
Niveaux de fidélité des maquettes
En réalité
Sommes-nous devant une maquette de basse ou de moyenne fidélité ?

20/02/2014

10
Niveaux de fidélité des maquettes
Maquette de haute fidélité

20/02/2014

11
Types de maquette
On choisit la meilleure approche en fonction de

Dynamique

Interactivité

nos objectifs et du contexte de l’intervention !

Statique

Fidélité visuelle
Basse
20/02/2014

Moyenne

Haute
12
Outils ?
• Tableau blanc
• Papier/crayon
• Mais aussi… une multitude d’outils informatiques

20/02/2014

et bien d’autres…

13
Outils ?
• Des tas de sites pour vous aider à choisir :
http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools
http://www.newsphil-blog.com/une-selection-de-21-outils-de-prototypage-de-web-et-mobile
http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/

• Un Consensus autour de 3 outils :
- Balsamiq (rapide)
- Axure (puissant)
- Photoshop (charte graphique)
• Mais aussi Power Point (avec une librairie de composants)
Mais ce qui compte est de choisir un outil adapté
à vos besoins en fonction de vos types de projets,
clients , processus de développement, etc.
20/02/2014

14
Maquettes statiques – basse fidélité
Un atelier pratique pour aborder la notion
et la réalisation de maquettes « basse
fidélité » … Comment concrétiser une
idée, se poser les bonnes questions
Expérimenter l’intérêt (mais aussi la
difficulté) de réaliser des maquettes
rapides en vue de (re)présenter une
solution mobile ou web.
Prêt pour votre mission ?
Avec papier, crayon, ciseau, colle et des
modèles « Balsamiq »
20/02/2014

15
Maquettes interactives : conception IHM
1. Maquettes interactives au service de la démarche de
conception « centrée utilisateur » :
• Formaliser : haut degré de réalisme dans la simulation de
l’enchainement des écrans et de la cinématique en général

• Présenter : permet aux acteurs impliqués de plus facilement se
projeter dans le fonctionnement du futur produit
• Evaluer : la « mise en situation » est très réaliste lors des tests
utilisateurs

20/02/2014

16
Conseils pour une maquette interactive efficace
• Pas de design (strict minimum de graphismes)

• Cohérence des données  pour permettre aux
utilisateurs et aux fonctionnels de se focaliser sur la
séquence d’action et non pas juger la pertinence des
données présentées à l’écran
• Ne pas vouloir exagérer au niveau du réalisme de la
cinématique car :
- Si on promet « trop » il suffit qu’un petit détail ne colle pas
pour que l’interlocuteur soit déçu  vous allez vouloir
améliorer encore  plus de temps  la démarche n’est pas
rentable
Maquette pour un test utilisateur

• Idée de faire des simulateurs de
crédit « en mieux »
• Contraintes du client : pouvoir
avoir tous les éléments sur le
même écran

 Des mini-tests utilisateurs pour
s’assurer de l’intuitivité de la
solution proposée

20/02/2014

18
Maquettes interactives : simulation détaillée
2. Démarche de simulation détaillée du
fonctionnement du futur produit :
• Peut servir de spécifications aux développeurs
• Peut être réalisée pour une démo (selon le besoin
du commanditaire)
ATTENTION : à ne pas confondre avec la démarche
précédente car celle-ci est réellement et
obligatoirement chronophage !

20/02/2014

19
Maquettes interactives : ROI et danger
Maquettes interactives/dynamiques (Axure)

chronophage = n’est pas rentable
SI
On en fait TROP côté
GRAPHISME

On en fait TROP côté
exhaustivité des données

On en fait TROP côté
CINEMATIQUE

 Trouver le juste milieu sur tous ces aspects permet
de rendre le maquettage IHM réellement utile et
rentable, en adéquation avec ses objectifs

Contenu connexe

Tendances

Développement Web - Module 1 - Introduction
Développement Web - Module 1 - IntroductionDéveloppement Web - Module 1 - Introduction
Développement Web - Module 1 - IntroductionMohammed Amine Mostefai
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Introduction a la SOA
Introduction a la SOAIntroduction a la SOA
Introduction a la SOA
Tugdual Grall
 
Rapport de fin formation
Rapport de fin formationRapport de fin formation
Rapport de fin formation
Ahmam Abderrahmane
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Ayoub Mkharbach
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
Architectures 3-tiers (Web)
Architectures 3-tiers (Web)Architectures 3-tiers (Web)
Architectures 3-tiers (Web)
Heithem Abbes
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
les style d'architecture
les style d'architecture les style d'architecture
les style d'architecture
Mouna Maazoun
 
Automatisme cours 1
Automatisme cours 1Automatisme cours 1
Automatisme cours 1
xwmker
 
Project equivalent to two classes presentation(présentation de projet P2M)
Project equivalent to two classes presentation(présentation de projet P2M)Project equivalent to two classes presentation(présentation de projet P2M)
Project equivalent to two classes presentation(présentation de projet P2M)
oxygen999
 
Power Bi, le tour complet 2017
Power Bi, le tour complet 2017 Power Bi, le tour complet 2017
Power Bi, le tour complet 2017
Isabelle Van Campenhoudt
 
Modele-elearning
Modele-elearningModele-elearning
Modele-elearning
Boughanmi Sobhi IHBOS
 
Architectures orientés services (SOA)
Architectures orientés services (SOA)Architectures orientés services (SOA)
Architectures orientés services (SOA)
Heithem Abbes
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
webreaker
 
hydraulique-industriel
hydraulique-industrielhydraulique-industriel
hydraulique-industriel
FabioSanders
 
Bus de médiation de services: modèle de corrélation d’événements à base de rè...
Bus de médiation de services: modèle de corrélation d’événements à base de rè...Bus de médiation de services: modèle de corrélation d’événements à base de rè...
Bus de médiation de services: modèle de corrélation d’événements à base de rè...
Hamid Barakat
 
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Symphorien Niyonzima
 
La spécification des besoins
La spécification des besoinsLa spécification des besoins
La spécification des besoinsIsmahen Traya
 
Présentation PFE - MarouaBouhachem VersionFinale
Présentation PFE - MarouaBouhachem VersionFinalePrésentation PFE - MarouaBouhachem VersionFinale
Présentation PFE - MarouaBouhachem VersionFinaleMaroua Bouhachem
 

Tendances (20)

Développement Web - Module 1 - Introduction
Développement Web - Module 1 - IntroductionDéveloppement Web - Module 1 - Introduction
Développement Web - Module 1 - Introduction
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Introduction a la SOA
Introduction a la SOAIntroduction a la SOA
Introduction a la SOA
 
Rapport de fin formation
Rapport de fin formationRapport de fin formation
Rapport de fin formation
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Architectures 3-tiers (Web)
Architectures 3-tiers (Web)Architectures 3-tiers (Web)
Architectures 3-tiers (Web)
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
les style d'architecture
les style d'architecture les style d'architecture
les style d'architecture
 
Automatisme cours 1
Automatisme cours 1Automatisme cours 1
Automatisme cours 1
 
Project equivalent to two classes presentation(présentation de projet P2M)
Project equivalent to two classes presentation(présentation de projet P2M)Project equivalent to two classes presentation(présentation de projet P2M)
Project equivalent to two classes presentation(présentation de projet P2M)
 
Power Bi, le tour complet 2017
Power Bi, le tour complet 2017 Power Bi, le tour complet 2017
Power Bi, le tour complet 2017
 
Modele-elearning
Modele-elearningModele-elearning
Modele-elearning
 
Architectures orientés services (SOA)
Architectures orientés services (SOA)Architectures orientés services (SOA)
Architectures orientés services (SOA)
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
 
hydraulique-industriel
hydraulique-industrielhydraulique-industriel
hydraulique-industriel
 
Bus de médiation de services: modèle de corrélation d’événements à base de rè...
Bus de médiation de services: modèle de corrélation d’événements à base de rè...Bus de médiation de services: modèle de corrélation d’événements à base de rè...
Bus de médiation de services: modèle de corrélation d’événements à base de rè...
 
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
 
La spécification des besoins
La spécification des besoinsLa spécification des besoins
La spécification des besoins
 
Présentation PFE - MarouaBouhachem VersionFinale
Présentation PFE - MarouaBouhachem VersionFinalePrésentation PFE - MarouaBouhachem VersionFinale
Présentation PFE - MarouaBouhachem VersionFinale
 

En vedette

CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateursCocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads France
 
Prototypes & test
Prototypes & testPrototypes & test
Prototypes & test
Antonio Bustamante Delon
 
50 ideas for Kev
50 ideas for Kev 50 ideas for Kev
50 ideas for Kev
Martín Hoare
 
User centered problem solving
User centered problem solvingUser centered problem solving
User centered problem solving
Martín Hoare
 
Protype and test
Protype and testProtype and test
Protype and test
girish raghavan
 
Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014
Badreddine Naouar
 
Stocks - Biloba
Stocks - BilobaStocks - Biloba
Stocks - Biloba
Lokoa
 
Why Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design ThinkingWhy Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design Thinking
GENinnovate
 
Protype and test
Protype and testProtype and test
Protype and testroystonf
 
TWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypesTWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypes
Valeria Gasik
 
Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16
Optimizze
 
20080429 Epaper Update Lite
20080429 Epaper Update Lite20080429 Epaper Update Lite
20080429 Epaper Update Lite
Vincent Peyrègne
 
Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!
Martín Hoare
 
Maquettes & Prototypes
Maquettes & PrototypesMaquettes & Prototypes
Maquettes & Prototypes
Agustin Carballa Figueiras
 
Première étude sur le testing en France
Première étude sur le testing en FrancePremière étude sur le testing en France
Première étude sur le testing en France
Romain Creteur
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device Prototypes
Doug Gapinski
 
Tests Dinterface SWT
Tests Dinterface SWTTests Dinterface SWT
Tests Dinterface SWT
Eric Le Merdy
 
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliserWireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
nathalieberger
 
Lessons learned from testing prototypes in real life
Lessons learned from testing prototypes in real lifeLessons learned from testing prototypes in real life
Lessons learned from testing prototypes in real life
Tilen Travnik
 
Prototyping in SL by Cooper Macbeth
Prototyping in SL by Cooper MacbethPrototyping in SL by Cooper Macbeth
Prototyping in SL by Cooper Macbeth
Dream Realizations
 

En vedette (20)

CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateursCocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
 
Prototypes & test
Prototypes & testPrototypes & test
Prototypes & test
 
50 ideas for Kev
50 ideas for Kev 50 ideas for Kev
50 ideas for Kev
 
User centered problem solving
User centered problem solvingUser centered problem solving
User centered problem solving
 
Protype and test
Protype and testProtype and test
Protype and test
 
Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014
 
Stocks - Biloba
Stocks - BilobaStocks - Biloba
Stocks - Biloba
 
Why Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design ThinkingWhy Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design Thinking
 
Protype and test
Protype and testProtype and test
Protype and test
 
TWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypesTWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypes
 
Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16
 
20080429 Epaper Update Lite
20080429 Epaper Update Lite20080429 Epaper Update Lite
20080429 Epaper Update Lite
 
Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!
 
Maquettes & Prototypes
Maquettes & PrototypesMaquettes & Prototypes
Maquettes & Prototypes
 
Première étude sur le testing en France
Première étude sur le testing en FrancePremière étude sur le testing en France
Première étude sur le testing en France
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device Prototypes
 
Tests Dinterface SWT
Tests Dinterface SWTTests Dinterface SWT
Tests Dinterface SWT
 
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliserWireframes et prototypes - Pourquoi, quand et comment les utiliser
Wireframes et prototypes - Pourquoi, quand et comment les utiliser
 
Lessons learned from testing prototypes in real life
Lessons learned from testing prototypes in real lifeLessons learned from testing prototypes in real life
Lessons learned from testing prototypes in real life
 
Prototyping in SL by Cooper Macbeth
Prototyping in SL by Cooper MacbethPrototyping in SL by Cooper Macbeth
Prototyping in SL by Cooper Macbeth
 

Similaire à Maquettes IHM - Présentation USE AGE - 20-02-2014

Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
La FeWeb
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
Catherine Verfaillie
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
NiceToMeetYou
 
test
testtest
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
Eric DI POL
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
Hugues Randriatsoa
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
Laurent Barbat
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
StrasWeb
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
Synerg'hetic
 
Fake it ('till you make it)
Fake it ('till you make it)Fake it ('till you make it)
Fake it ('till you make it)
Rémi Delhaye
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
Olivier Lorrain
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
Marc Wabnitz
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
Laurent Barbat
 
Moteur de Recommandation
Moteur de RecommandationMoteur de Recommandation
Moteur de Recommandation
Soft Computing
 
Bon App - Création collaborative de maquettes efficaces
Bon App -  Création collaborative de maquettes efficacesBon App -  Création collaborative de maquettes efficaces
Bon App - Création collaborative de maquettes efficaces
Cédric Leblond
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
PMI-Montréal
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
Anne-Marie Pinna-Dery
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
Newflux UX/UI News
 

Similaire à Maquettes IHM - Présentation USE AGE - 20-02-2014 (20)

Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
 
Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !Le Rapid Prototyping, ça marche !
Le Rapid Prototyping, ça marche !
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
test
testtest
test
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
 
Présentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitalePrésentation Bertin Ergonomie - Transformation digitale
Présentation Bertin Ergonomie - Transformation digitale
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Fake it ('till you make it)
Fake it ('till you make it)Fake it ('till you make it)
Fake it ('till you make it)
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
bb-d_ERGO-UX
bb-d_ERGO-UXbb-d_ERGO-UX
bb-d_ERGO-UX
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 
Moteur de Recommandation
Moteur de RecommandationMoteur de Recommandation
Moteur de Recommandation
 
Bon App - Création collaborative de maquettes efficaces
Bon App -  Création collaborative de maquettes efficacesBon App -  Création collaborative de maquettes efficaces
Bon App - Création collaborative de maquettes efficaces
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
 
Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3Introduction module IHM Polytech Sophia Dept Info SI3
Introduction module IHM Polytech Sophia Dept Info SI3
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 

Plus de Use Age

WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
Use Age
 
WUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthique
WUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthiqueWUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthique
WUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthique
Use Age
 
WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...
WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...
WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...
Use Age
 
Retour d’experience – Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...
Retour d’experience –  Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...Retour d’experience –  Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...
Retour d’experience – Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...
Use Age
 
Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...
Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...
Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...
Use Age
 
7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...
7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...
7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...
Use Age
 
6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age
6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age
6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age
Use Age
 
5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age
5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age
5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age
Use Age
 
4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age
4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age
4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age
Use Age
 
3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...
3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...
3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...
Use Age
 
2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...
2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...
2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...
Use Age
 
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
Use Age
 
0 - Intro - wud2014 Use-Age
0 - Intro - wud2014 Use-Age0 - Intro - wud2014 Use-Age
0 - Intro - wud2014 Use-Age
Use Age
 
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Use Age
 
Use Age - WUD 2011 - 03 - mEducator - Pascal Staccini
Use Age - WUD 2011 - 03 - mEducator - Pascal StacciniUse Age - WUD 2011 - 03 - mEducator - Pascal Staccini
Use Age - WUD 2011 - 03 - mEducator - Pascal Staccini
Use Age
 
Use Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte Trousse
Use Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte TrousseUse Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte Trousse
Use Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte Trousse
Use Age
 
Use Age - WUD 2011 - 04 - Technologies Enseignement - Christophe Bansart
Use Age - WUD 2011 - 04 - Technologies Enseignement - Christophe BansartUse Age - WUD 2011 - 04 - Technologies Enseignement - Christophe Bansart
Use Age - WUD 2011 - 04 - Technologies Enseignement - Christophe Bansart
Use Age
 
Use Age - WUD 2011 - 01 - Villes Intelligentes - Pascale Xelot
Use Age - WUD 2011 - 01 - Villes Intelligentes - Pascale XelotUse Age - WUD 2011 - 01 - Villes Intelligentes - Pascale Xelot
Use Age - WUD 2011 - 01 - Villes Intelligentes - Pascale Xelot
Use Age
 
Use Age - WUD 2011 - 00 - Introduction - Sophie de Bonis
Use Age - WUD 2011 - 00 - Introduction - Sophie de BonisUse Age - WUD 2011 - 00 - Introduction - Sophie de Bonis
Use Age - WUD 2011 - 00 - Introduction - Sophie de Bonis
Use Age
 
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
Use Age
 

Plus de Use Age (20)

WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
WUD 2018 - Sophie de bonis - UX for Good or Evil (introduction)
 
WUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthique
WUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthiqueWUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthique
WUD 2018 - Catherine Bellino - Primum Non Nocere, UX et éthique
 
WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...
WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...
WUD 2018 - Teresa Colombi - Panem et Circenses, la gamification pour le meill...
 
Retour d’experience – Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...
Retour d’experience –  Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...Retour d’experience –  Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...
Retour d’experience – Mylene Leitzelman, Co­fondatrice de Mnemotix - WUD2015...
 
Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...
Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...
Le Laboratoire de la Mobilité Inclusive – Pierre Taillant, Ingénieur économis...
 
7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...
7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...
7 - Du digital au réel, comment mesurer l’engagement du consommateur avec l’e...
 
6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age
6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age
6 - le projet Recycloud par Gilles Orazi - WUD2014 Use-Age
 
5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age
5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age
5 - L’engagement, talon d’achille des MOOCs? par Mia Oguchi - WUD2014 Use-Age
 
4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age
4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age
4 - « Long tail » contre « crowdsourcing » par Marc Augier - WUD2014 Use-Age
 
3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...
3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...
3 - Les dispositifs de suppléance perceptive : quels principes pour quelles i...
 
2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...
2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...
2 - The Role of Signaling Identity in the Adoption of Personal Technologies p...
 
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
1 - Le Design Thinking à IBM par Sandra Belfils, User Research et Sophie De B...
 
0 - Intro - wud2014 Use-Age
0 - Intro - wud2014 Use-Age0 - Intro - wud2014 Use-Age
0 - Intro - wud2014 Use-Age
 
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
Petit Déj' "Ergonomie et SEO" organisé par Use Age le 26 Septembre 2013
 
Use Age - WUD 2011 - 03 - mEducator - Pascal Staccini
Use Age - WUD 2011 - 03 - mEducator - Pascal StacciniUse Age - WUD 2011 - 03 - mEducator - Pascal Staccini
Use Age - WUD 2011 - 03 - mEducator - Pascal Staccini
 
Use Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte Trousse
Use Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte TrousseUse Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte Trousse
Use Age - WUD 2011 - 02 - Projet Ecoffices - Carole Goffart et Brigitte Trousse
 
Use Age - WUD 2011 - 04 - Technologies Enseignement - Christophe Bansart
Use Age - WUD 2011 - 04 - Technologies Enseignement - Christophe BansartUse Age - WUD 2011 - 04 - Technologies Enseignement - Christophe Bansart
Use Age - WUD 2011 - 04 - Technologies Enseignement - Christophe Bansart
 
Use Age - WUD 2011 - 01 - Villes Intelligentes - Pascale Xelot
Use Age - WUD 2011 - 01 - Villes Intelligentes - Pascale XelotUse Age - WUD 2011 - 01 - Villes Intelligentes - Pascale Xelot
Use Age - WUD 2011 - 01 - Villes Intelligentes - Pascale Xelot
 
Use Age - WUD 2011 - 00 - Introduction - Sophie de Bonis
Use Age - WUD 2011 - 00 - Introduction - Sophie de BonisUse Age - WUD 2011 - 00 - Introduction - Sophie de Bonis
Use Age - WUD 2011 - 00 - Introduction - Sophie de Bonis
 
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
Use Age - WUD 2011 - 05 - Serious Games - Teresa Colombi
 

Maquettes IHM - Présentation USE AGE - 20-02-2014

  • 1. Maquettes IHM : méthodes et outils Qu’en attendre et comment les utiliser à bon escient ? Sophia Antipolis, 20/02/2014 Powered by
  • 2. Qui est Use Age ? Use Age regroupe des ergonomes experts en Interaction Homme-Machine et des personnes intéressées par l’ergonomie, souhaitant : • développer cette expertise, • favoriser les échanges entre les différentes formes de pratiques, par l’organisation de différentes manifestations … dont le World Usability Day depuis 2005
  • 3. Maquetter une interface signifie… Formaliser un concept un aspect un fonctionnement Présenter pour brainstormer spécifier valider Evaluer l‘ergonomie la faisabilité le coût
  • 4. Maquetter une interface… En moyen des supports rapides et faciles à réaliser 20/02/2014 4
  • 5. Maquette ou Prototype ? Prototype • Est conçu sur la plateforme réelle et peut être connecté à des données fictives ou réelles • Souvent une Beta du produit final Maquette • Réalisée sur un système différent de celui qui sera utilisé pour le produit final • Pas de connexion à des bases de données  Si on n’est pas censés faire du code réutilisable on fait des maquettes et non pas des prototypes 20/02/2014 5
  • 6. Maquettes IHM : Pourquoi ? Les bénéfices :  Permet de collaborer autour de la solution : validations à l’intérieur de l’équipe ou avec le commanditaire  Permet de réaliser plusieurs cycles de tests utilisateurs et donc d’assurer une bonne user experience  Peut servir de base pour la mise au point des spécifications IHM • à fournir aux développeurs • à fournir aux graphistes (visuels et contraintes de couleurs, police…)  Permet de réduire le temps de développement jusqu’à 30% (ROI++) Mais il faut Prévoir du budget et du temps en amont 20/02/2014 6
  • 7. Maquettes IHM : Quand ? Avant qu’une seule ligne du code ne soit écrite ! Cycle en V Maquettage IHM Maquettage IHM Maquettage IHM Maquettage IHM 20/02/2014 7
  • 8. A ne pas oublier avant de maquetter Pour qui Infos sur marché Pour faire quoi Scénario/Tâche Quand, où, comment Infos sur utilisateurs Personas Contexte Benchmarking Maquettage User Testing Interaction et… construire notre maquette en respectant les principes de base d’ergonomie des IHM (organisation visuelle, lisibilité…) 20/02/2014 8
  • 9. Niveaux de fidélité des maquettes En théorie : • Basse définition (Lo-Fi) ou bas niveau – Première idée de l’organisation visuelle des contenus • Moyenne définition (Mi-Fi) ou moyen niveau – Prototypes informatiques respectant le zoning final (wireframes) – Rudiments de visuel tels qu’images, couleurs… • Haute définition (Hi-Fi) ou haut niveau – Look&feel définitif, charte graphique finale 20/02/2014 9
  • 10. Niveaux de fidélité des maquettes En réalité Sommes-nous devant une maquette de basse ou de moyenne fidélité ? 20/02/2014 10
  • 11. Niveaux de fidélité des maquettes Maquette de haute fidélité 20/02/2014 11
  • 12. Types de maquette On choisit la meilleure approche en fonction de Dynamique Interactivité nos objectifs et du contexte de l’intervention ! Statique Fidélité visuelle Basse 20/02/2014 Moyenne Haute 12
  • 13. Outils ? • Tableau blanc • Papier/crayon • Mais aussi… une multitude d’outils informatiques 20/02/2014 et bien d’autres… 13
  • 14. Outils ? • Des tas de sites pour vous aider à choisir : http://socialcompare.com/fr/comparison/mockup-wireframing-design-tools http://www.newsphil-blog.com/une-selection-de-21-outils-de-prototypage-de-web-et-mobile http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/ • Un Consensus autour de 3 outils : - Balsamiq (rapide) - Axure (puissant) - Photoshop (charte graphique) • Mais aussi Power Point (avec une librairie de composants) Mais ce qui compte est de choisir un outil adapté à vos besoins en fonction de vos types de projets, clients , processus de développement, etc. 20/02/2014 14
  • 15. Maquettes statiques – basse fidélité Un atelier pratique pour aborder la notion et la réalisation de maquettes « basse fidélité » … Comment concrétiser une idée, se poser les bonnes questions Expérimenter l’intérêt (mais aussi la difficulté) de réaliser des maquettes rapides en vue de (re)présenter une solution mobile ou web. Prêt pour votre mission ? Avec papier, crayon, ciseau, colle et des modèles « Balsamiq » 20/02/2014 15
  • 16. Maquettes interactives : conception IHM 1. Maquettes interactives au service de la démarche de conception « centrée utilisateur » : • Formaliser : haut degré de réalisme dans la simulation de l’enchainement des écrans et de la cinématique en général • Présenter : permet aux acteurs impliqués de plus facilement se projeter dans le fonctionnement du futur produit • Evaluer : la « mise en situation » est très réaliste lors des tests utilisateurs 20/02/2014 16
  • 17. Conseils pour une maquette interactive efficace • Pas de design (strict minimum de graphismes) • Cohérence des données  pour permettre aux utilisateurs et aux fonctionnels de se focaliser sur la séquence d’action et non pas juger la pertinence des données présentées à l’écran • Ne pas vouloir exagérer au niveau du réalisme de la cinématique car : - Si on promet « trop » il suffit qu’un petit détail ne colle pas pour que l’interlocuteur soit déçu  vous allez vouloir améliorer encore  plus de temps  la démarche n’est pas rentable
  • 18. Maquette pour un test utilisateur • Idée de faire des simulateurs de crédit « en mieux » • Contraintes du client : pouvoir avoir tous les éléments sur le même écran  Des mini-tests utilisateurs pour s’assurer de l’intuitivité de la solution proposée 20/02/2014 18
  • 19. Maquettes interactives : simulation détaillée 2. Démarche de simulation détaillée du fonctionnement du futur produit : • Peut servir de spécifications aux développeurs • Peut être réalisée pour une démo (selon le besoin du commanditaire) ATTENTION : à ne pas confondre avec la démarche précédente car celle-ci est réellement et obligatoirement chronophage ! 20/02/2014 19
  • 20. Maquettes interactives : ROI et danger Maquettes interactives/dynamiques (Axure) chronophage = n’est pas rentable SI On en fait TROP côté GRAPHISME On en fait TROP côté exhaustivité des données On en fait TROP côté CINEMATIQUE  Trouver le juste milieu sur tous ces aspects permet de rendre le maquettage IHM réellement utile et rentable, en adéquation avec ses objectifs