maquettes ihm - présentation use age - 20-02-2014
Post on 18-Dec-2014
843 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related