Sophia Antipolis, 20/02/2014 Powered by

Maquettes IHM : méthodes et outilsQu’en attendre et comment les utiliser à bon escient ?

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

Présenter pour

Evaluer

spécifier

la faisabilité

un concept un aspect un fonctionnement

brainstormer valider

l‘ergonomie le coût

Maquetter une interface…

20/02/2014 4

En moyen des supports rapides et faciles à réaliser

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 amont20/02/2014 6

Maquettes IHM : Quand ?

20/02/2014 7

Maquettage IHM

Avant qu’une seule ligne du code ne soit écrite !

Cycle en V

Maquettage IHM

Maquettage IHM

Maquettage IHM

A ne pas oublier avant de maquetter

20/02/2014 8

Infos sur utilisateurs

PersonasPour qui

Scénario/TâchePour faire quoi

ContexteQuand, où, comment

Infos sur marché

Benchmarking

User Testing Interaction

Maquettage

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

Niveaux de fidélité des maquettes

• 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

En théorie :

Niveaux de fidélité des maquettes

En réalité

20/02/2014 10

Sommes-nous devant une maquette de basse ou de moyenne fidélité ?

Niveaux de fidélité des maquettes

20/02/2014 11

Maquette de haute fidélité

Types de maquette

Fidélité visuelleBasse

In

tera

ctiv

ité

Statique

Dynamique

Moyenne Haute

On choisit la meilleure approche en fonction de

nos objectifs et du contexte de l’intervention !

20/02/2014 12

Outils ?

20/02/2014 13

• Tableau blanc• Papier/crayon• Mais aussi… une multitude d’outils informatiques

et bien d’autres…

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-mobilehttp://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)

20/02/2014 14

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.

Maquettes statiques – basse fidélité

20/02/2014 15

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 »

Maquettes interactives : conception IHM

20/02/2014 16

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

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

20/02/2014 18

• 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

Maquettes interactives : simulation détaillée

20/02/2014 19

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 !

chronophage = n’est pas rentable

On en fait TROP côtéGRAPHISME

On en fait TROP côtéCINEMATIQUE

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

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

Maquettes interactives/dynamiques (Axure)

SI

Maquettes interactives : ROI et danger