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

2 594 vues

Publié le

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.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 594
Sur SlideShare
0
Issues des intégrations
0
Intégrations
886
Actions
Partages
0
Téléchargements
37
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. Maquettes IHM : méthodes et outils Qu’en attendre et comment les utiliser à bon escient ? Sophia Antipolis, 20/02/2014 Powered by
  2. 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. 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. 4. Maquetter une interface… En moyen des supports rapides et faciles à réaliser 20/02/2014 4
  5. 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. 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. 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. 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. 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. 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. 11. Niveaux de fidélité des maquettes Maquette de haute fidélité 20/02/2014 11
  12. 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. 13. Outils ? • Tableau blanc • Papier/crayon • Mais aussi… une multitude d’outils informatiques 20/02/2014 et bien d’autres… 13
  14. 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. 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. 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. 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. 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. 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. 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

×