Petit Déj' Maquettes IHM organisé par Use Age le 20 Février 2014 à Sophia Antipolis : "Maquettes IHM : outils et méthodes". Présentation de Leonid Synyukov - Introduction par Sophie de Bonis.

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