Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Prototypage IHM T. Colombi - LudoTIC Première partie Champ d’intervention de l’

Prototypage IHM T. Colombi - LudoTIC Première partie Champ d’intervention de l’ergonome : tâches de prototypage Objectif de l’ergonomie L’ergonomie rend les interfaces Homme-Machine : • plus efficaces • plus efficientes • plus satisfaisantes permet d’atteindre les objectifs fixés en un minimum de temps et avec un minimum d’effort, avec plaisir dans l’interaction Ergonomie = interfaces homme-machine facile à utiliser, adaptées à l’utilisateur final Le cycle en V Analyse des besoins et faisabilité Spécifications Conception architecturale Conception détaillée Codage Tests unitaires Tests d’intégration Tests de validation Déploiement Analyse des besoins utilisateurs Spécifications d’Utilisabilité Prototypage ergonomique Evaluation Experte Tests d’Utilisabilité Evaluation Experte Types d’intervention Intervention dans le processus complet : Conception Réalisation Validation Ergonomie de conception Intervention ponctuelle sur produit fini/béta version : Evaluation (par Test Utilisateur ou Évaluation Experte) Ergonomie de correction Ergonomie de conception : prototypage ergonomique Avantages :  Réduction du temps de dév jusqu’à 30% (ROI++) car dès le début les développeurs sont guidés par les ergonomes en ce qui concerne le développement de l’IHM, voire de l’architecture des contenus  Assurance d’une IHM qui respecte les principes d’ergonomie  Possibilité de cycles de tests utilisateurs  Support de travail collaboratif : validations à l’intérieur de l’équipe  Base pour la mise au point des spécifications IHM • à fournir aux développeurs (rédaction Word) • à fournir aux graphistes (visuels et contraintes de couleurs, police…) Inconvénients :  Prévoir budget  Prévoir du temps en amont du projet Les clé d’un prototype ergonomique Pour s’assurer que le prototype en cours de conception est ergonomique il faut le construire :  en respectant les principes de base d’ergonomie des IHM (organisation visuelle, lisibilité…)  en prenant en compte la logique métier des utilisateurs finaux (langage, besoins, enchaînements d’écrans…) Principes de base d’ergonomie des IHM 1. Feedback du système 2. Match avec les profils utilisateurs 3. Sensation de contrôle 4. Cohérence et standard 8. Flexibilité 9. Surcharge cognitive 10. User Experience 5. Gestion des erreurs 12. Aide et documentation 11. Dialogue Homme-Machine 6. Optimisation des performances 7. Mise en page 13. Collaboration Recueil d’infos sur la logique métier Plusieurs recueils de données peuvent être utiles et pertinents :  Analyse de la tâche (organisation et séquence des contenus)  Tri de cartes (architecture des contenus)  Entretiens/Focus groups (besoins, attentes, critiques de l’existant…)  Questionnaires  Autres sources d’infos : tickets SAV, remontées des commerciaux ou des formateurs… Enchainer écrans et fonctions : un exemple Enchainer écrans et fonctions : un exemple Application xxx – la vision « tâche utilisateur » Délivrer attestation Identification Entreprise/TI Plusieurs réponses 1 seule bonne réponse Choisir la bonne Rechercher attestations Générer attestation Consulter attestation Application xxx – la vision « tâche utilisateur » Poser opposition Identification Entreprise/TI Plusieurs réponses 1 seule bonne réponse Choisir la bonne Rechercher oppositions Poser opposition Consulter opposition Les IHM Recherche Résultats Détails attestations/oppositions IHM « avant » Zoning issu de l’analyse de la tâche ISO 13407  Méthodologie de conception et l'intégration de la démarche ergonomique dans le cycle de développement, actuellement intégrée dans la ISO 9241-210 ISO 13407 Points clé :  Une préoccupation amont des utilisateurs, de leurs tâches et de leur environnement  La participation active de ces utilisateurs  Une répartition appropriée des fonctions entre les utilisateurs et la technologie  L'itération des solutions de conception : spirale, démarche qui boucle et reboucle jusqu'à ce que le système satisfasse aux exigences définies au départ.  L'intervention d'une équipe de conception multi- disciplinaire. Ergonomie de correction : prototypage ergonomique Suite à un Test Utilisateur ou à une Évaluation Experte, il est possible d’illustrer les modifications/recommandations formulées par des maquettes ou prototypes Avantages :  Support « visuel » facilement compréhensible pour les développeurs Inconvénients :  Compétences sur outils de maquettage nécessaires « Prototype » dans l’usage des ergonomes Par abus de langage les ergonomes disent que, eux aussi, ils créent des prototypes :  au cours de la conception d’une IHM  pour illustrer les correction d’une IHM existante Or la définition « officielle » de ce terme n’est pas compatible avec cette vision des choses… Définition « officielle » maquette VS prototype Définition dans le domaine logiciel : Maquette effectue ses entrées-sorties sur des fichiers simulés (pas de calculs/requêtes à une réelle BD) tests rapides des fonctionnalités pour avoir l'avis des futurs utilisateurs fonctionne souvent sur un système différent de celui qui sera utilisé pour le produit final Prototype travaille sur les fichiers/système réels (c’est un Beta du vrai produit) il ne lui manque plus que les optimisations (assez souvent, la réécriture de tout ou partie du prototype en langage compilé) : il va évoluer naturellement vers le produit fini  L’Ergonome crée des maquettes et non pas des prototypes (car l’ergonome n’a pas un profil technique, pas censé faire du code) Prototypage horizontal Nielsen (1994) distingue 2 degrés de prototypage lHM selon le niveau d’interactivité : Prototype horizontal  Correspond à la partie graphique de l’interface  Présente l’agencement général et les éléments de l’interface (boutons, menus, champs de saisie, etc.)  Permet : • la confirmation des exigences de l’IHM (nombre de zones de contenu, positions…) par rapport à la globalité du produit • d’avoir une version de démonstration pour obtenir des retours des commanditaires du produit par rapport à leurs besoins initiaux • une première estimation du développement en termes de temps, de coût et de charge de travail Prototypage vertical Prototype vertical  Met en œuvre certaines fonctionnalités afin que l’utilisateur puisse dérouler un scénario complet d’utilisation (via une suite d’écrans ou des interactions réelles)  Permet : • d’avoir une idée concrète de la cinématique d’utilisation • le dimensionnement du système de données, les besoins d'interaction de l'interface • d’avoir plus de précisions sur la complexité des exigences par rapport aux fonctionnalités actuelles du produit (on va plus dans le détail) Fidélité visuelle des prototypes Low fidelity (Lo-Fi) ou bas niveau Première idée de l’organisation visuelle des contenu Medium fidelity (Mi-Fi) ou moyen niveau Prototypes informatiques respectant le zoning final (wireframes) Rudiments de visuel tel qu’images, couleurs… High fidelity (Hi-Fi) ou haut niveau Look&feel définitif, charte graphique finale Bas niveau : avantages et inconvénients Avantages :  la réalisation ne nécessite pas de compétences techniques (support facile à produire)  facile à modifier pendant un brainstorming (moins de contraintes « mentales » devant un dessin que devant une IHM)  permet de se concentrer sur le contenu et non pas sur le visuel Inconvénients :  non respect des contraintes visuelles (taille écran, polices…)  prévoir le temps dans le cycle de dév Le prototypage bas niveau Maquettes papier/tableau blanc : définir l’organisation visuelle Avantages :  en conception, la Mi-Fi permet de valider de façon précise les tailles des zones, des polices (wireframe)…  si la maquette est dynamique elle est utilisable pour des tests utilisateurs Inconvénients :  quelques compétences sur des outils de maquettage (mais… tout le monde utilise PowerPoint !)  savoir faire « la part des choses » car il manque le look&feel (on doit valider le fonctionnel, non pas l’esthétisme) Moyen niveau : avantages et inconvénients Le prototypage moyen niveau Le « zoning » des contenus Le prototypage moyen niveau Avantages :  Impression de voir « le produit fini »  Permet de valider les « petits détails » d’ordre graphique (design) Inconvénients :  Temps de réalisation  Danger de donner l’impression que c’est un produit fini et risque que votre interlocuteur prête plus d’attention à la valeur artistique qu’à l’optimisation ergonomique Haut niveau : avantages et inconvénients Le prototypage moyen niveau Le prototypage haut niveau Fidélité visuelle Types de prototype Basse Interactivité Statique Dynamique Moyenne Haute Le document « GUI specifications » Les visuels Lo-Fi, Mi-Fi, Hi-Fi ne sont pas suffisantes car :  les images ne se « auto-commentent » pas  il n’est pas possible de tout maquetter (trop de temps)  si on ne définit pas des « grands principes » on ne pourra pas intégrer correctement les évolutions futures Le document « GUI specifications » C’est le résumé de toute la démarche entreprise, il détaille :  l’aspect statique de chaque page-écran (zoning – maquette bas/moyen niveau)  les principes de fonctionnement (cinématique)  les principes de design et interaction (ex. taille min des polices, couleurs à utiliser…)  les visuels Hi-Fi (il devient un « StyleGuide ») Exemple 1 Exemple 2 Exemple 3 Deuxième partie Outils de prototypage Papier/crayon ou Tableau blanc effaçable Fidélité : * Interactivité : * Composants IHM : NON Prix : / Prise en main : facile Points forts : permet de commencer à réfléchir à plusieurs (brainstorming), notamment sur tableau blanc (grand, effaçable). Points faibles : très basse fidélité des images (pas de prise en compte de taille de police, taille/résolution écran…) Balsamiq Fidélité : * Interactivité : * Composants IHM : OUI Prix : 79€ Prise en main : facile Points forts : visuel « dessin à main libre », permet de se détacher des aspects de look&feel, uploads/Management/ prototypage-2013-pdf.pdf