Introduction

• Pourquoi faire une maquette IHM ?
• Coûts et bénéfices.
• Quand faire une maquette IHM ?
• Les principes de "design centré utilisateur" : rappels.
• Utiliser une maquette pour des tests utilisateurs : l'approche AgileUX.
• Exemples de projets.

Les outils existants : panorama (Balsamiq, Visio, Axure, InVision...)

• Le maquettage vertical et le maquettage horizontal.
• Basse, moyenne et haute fidélité des maquettes.
• Différence entre maquettes et prototypes.
• Les outils du marché, gratuits et payants : avantages et inconvénients. Quel choix faire ?

Démonstration
Exemples de réalisations mises en œuvre avec différents outils.

Structurer les contenus

• Concevoir la structure du produit et l'architecture de l'information.
• Les flux de navigation.
• Valider une structure de contenus avec les utilisateurs finaux : le tri de cartes.
• Outils de mind mapping : XMind et les autres.

Exercice
Utilisation de XMind, outil de mind mapping, pour structurer les éléments de l'interface.

Créer une interface avec Axure : des bases aux comportements dynamiques

• Axure RP Pro : un outil puissant et complet.
• Créer des pages statiques. Widgets, masters, liens.
• Importer des bibliothèques (icônes, polices...) et gérer le style des pages.
• Widgets et masters.
• Créer des interfaces Responsive pour tablettes et smartphones.
• Créer des interactions.
• Les comportements dynamiques (panels dynamiques, événements, variables).

Exercice
Mise en œuvre de maquettes variées avec Axure.

Ecrire des spécifications d'interface homme-machine

• Pourquoi écrire des spécifications IHM ? Temps nécessaire et bénéfices.
• Générer des spécifications IHM avec Axure : un document exploitable ?
• Bonnes pratiques dans Axure afin d'optimiser les spécifications générées par l'outil.
• Charte ergonomique et charte graphique : complémentarités et différences.
• Exemples de réalisations.

Exercice
Exporter et compléter des spécifications IHM.