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.