Construire des interfaces hommemachine LabVIEW toujours plus efficaces : commandes personnalisées, onglets, couleurs Nicolas MARQUET National Instruments, Ingénieur d applications
Avant de commencer Tous les goûts sont dans la nature : ce qui va suivre ne s applique pas forcement à vous Une connaissance du logiciel LabVIEW est requise pour suivre cette présentation Visitez (et rejoignez ) notre communauté sur les IHM pour trouver : Des démos et exemples Des utilisateurs passionnés par les IHM decibel.ni.com/content/groups/ui
Sommaire Quelques règles de base Donner à votre IHM un rendu personnalisé L organisation d IHM complexes Indiquer la progression des opérations lentes Conclusion
Les bon artistes empruntent les grands artistes volent. Pablo Picasso
Sources d inspiration Apple Microsoft Office Les applications de votre PC Les galeries d icônes Les tutoriaux sur le design web L équipe de design de votre entreprise La photographie, l art Les livres sur : La conception d interfaces utilisateur La conception d interaction avec l utilisateur L ergonomie La conception graphique La visualisation d informations
Les trois commandements I. Pensez à l utilisateur II. N innovez pas III. Le minimalisme est de mise
I. Pensez à l utilisateur En savent-ils autant que vous? (Jamais ) Comment vont-ils interagir avec l application? Pour quelles raisons utilisent-ils votre logiciel? Le logiciel (et l IHM) doivent les aider à remplir leurs objectifs
II. N innovez pas Utilisez des éléments familiers Ne changez pas les fonctionnalités attendues Polissez, ne réinventez pas Les commandes système reproduisent les commandes du système d exploitation et sont donc familières pour la plupart des utilisateurs
III. Le minimalisme est de mise Trop d attributs visuels d un coup est dérangeant Collez aux exigences Ne faites pas plus que le nécessaire Vous finirez plus vite Cela vous coûtera moins en maintenance Le point d intérêt doit toujours être sur ce qui est important Exemple : Guidez l utilisateur avec de la couleur
Guider l utilisateur avec de la couleur L effet «boîte de céréales» : Quelles céréales attirent votre attention en premier?
Guider l utilisateur avec de la couleur
Guider l utilisateur avec de la couleur L effet «boîte de céréales» : Quelles céréales attirent votre attention en premier? Pourquoi?
Il semblerait que la perfection soit atteinte non pas lorsqu il n y a plus rien à ajouter, mais quand il n y a plus rien à retirer. Antoine de Saint-Exupéry
Donner un rendu personnalisé à vos IHM
Techniques de personnalisation Face-avant, images et décorations Rendez les commandes par défaut transparents Ajoutez une image via le menu Éditer» Coller Commandes personnalisées Utilisées pour personnaliser la cosmétique des commandes ou indicateurs Accès par la face-avant, clic droit sur une commande, Avancé» Personnaliser CommandeX Utilisées pour personnaliser la fonction ou la cosmétique d une commande ou d un indicateur Accès par menu Fichier» Nouveau
Ajouter une image à la face-avant Aussi simple qu un copier-coller! Utilisez un éditeur d image pour effacer, ajouter la transparence Améliorez les commandes natives de LabVIEW Début : Clipart PowerPoint Fin : IHM LabVIEW personnalisée
Fenêtre d édition de commande Face-avant normale Différences au niveau de l éditeur de commandes
Fenêtre d édition de commande Face-avant normale Différences au niveau de l éditeur de commandes
Quand utiliser les commandes Afin de créer des commandes différentes, réutilisables Exemple : agrandir un bouton stop pour le rendre plus accessible Quand utiliser les définitions de type Afin de mettre à jour automatiquement les types de données dans les commandes personnalisées Exemple : réutiliser un enum dont les valeurs peuvent changer Quand utiliser les définitions de type strictes Afin de créer des commandes réutilisables qui sont des copies conformes Exemple : propager des changements de taille et de couleur sur une jauge
Mode édition vs. mode personnalisation Mode édition Changer la taille ou la couleur d une commande ou d un indicateur Accéder à un menu local (par un clic droit) Mode personnalisation Faire des changements extensibles aux commandes et indicateurs Changer des parties précises d une commande ou indicateur
Composante d une commande (glissière) Index du tableau Incrément de pixels Zone de logement Aiguilles, remplissage et échelle Décrément de pixels Cosmétique
Composante d une commande (jauge) Index du tableau Zone de logement Aiguille, rampe et échelle Partie horscadre Cadre
Voir les composantes d une commande Voir les composantes d une commande en utilisant le menu : Fenêtre»Afficher la fenêtre des composantes
Personnaliser une commande jauge Ajouter une décoration et de la personnalisation à une commande jauge
Quand utiliser une commandex Afin de créer des composants réutilisables avec un comportement dynamique Pour encapsuler des fonctionnnalités ou de la cosmetique améliorée Quand ne pas utiliser les commandex Afin de réaliser de simples changements cosmétiques Lorsque vous travaillez sur une application unique Utilisez les définitions de type strictes à la place quand... Vous n avez pas besoin d un comportement dynamique à l édition ou à l exécution
Un exemple de commandex Concevoir une commande thermomètre qui peut représenter un simple entier numérique en Celsius ou en Fahrenheit Discussion : Qu est-ce qui rend cette application adaptée à l utilisation des commandex? Remarque : cet exemple fait partie des exemples fournis avec LabVIEW
Exigence de l exemple de la commandex 1. Le thermomètre doit garder un suivi de l unité de température qu il utilise 2. Le thermomètre doit effectuer la conversion Celsius Fahrenheit 3. Le thermomètre doit représenter une seule valeur numérique et ressembler (visuellement) à un thermomètre
Utiliser des commandex Gérez les commandex au travers de la fenêtre de projet Les commandex apparaissent comme des terminaux classiques Vous commencez avec une structure vierge Terminal Icône Rappel Il est possible d allez très loin sans utiliser les commandex
Structure d une commandex Propriétés (optionnel) CommandeX Méthodes (optionnel) Fonctionnalités (nécessaire)
Propriété d une commandex Permet à l utilisateur de configurer par programmation la commandex au travers de nœuds de propriétés
Méthodes des commandex Permet à l utilisateur de jouer sur les fonctionnalités de la commande au travers des nœuds de méthode
Fonctionnalités de la commandex Composant nécessaire pour un fonctionnement correct Représenté par des VIs ou des commandes Quatre parties obligatoires : Données État Façade État initial D autres fonctions de base peuvent exister
Les données de la commandex Commande en définition de type Définit le type de données de la commandex
État de la commandex Commande en définition de type Spécifie les informations différentes des données qui affectent l apparence de la commande
La «façade» de la commandex Définit l apparence de la commandex Appliquée après les changements de propriété/méthodes
La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande
La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande L affichage doit être rafraîchi
La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande L affichage doit être rafraîchi Changement entre commande et indicateur
La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande L affichage doit être rafraîchi Changement entre commande et indicateur Le menu raccourci est activé
La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande L affichage doit être rafraîchi Changement entre commande et indicateur Le menu raccourci est activé Le menu court est choisi et plus encore
L état initial de la commandex Appelé lors de la première mise en place ou du placement en mémoire Initialise l état d affichage avant que celui-ci soit appelé Gère les versions de la commande
Créer une commandex Création d une commandex simple
Galerie d exemples Credit : Simon Hogg NI Community UI Interest Group
Galerie d exemples Credit: Simon Hogg NI Community UI Interest Group
Galerie d exemples Credit: Jonathan Cohn Bloomy Controls LabVIEW Example Code Contest 2010 UI Controls Category Winner
L importance du choix d affichage Le rapport signal à bruit de l IHM Quel slide est le plus efficace et pourquoi?
L organisation d IHM complexes Commande onglet À utiliser quand toutes les commandes ne doivent pas être visibles en même temps Limite le nombre d onglets que vous pouvez utiliser Charge toutes les commandes en mémoire Catégoriser et observer du contenu en utilisant les faces-avant secondaires À utiliser pour choisir de manière dynamique les commandes à afficher Aucune limite à l utilisation Vous contrôlez l utilisation mémoire de votre VI
Utiliser une commande onglet 1. Ajouter-en une à la face-avant 2. Personnalisez-la 3. Ajoutez des commandes Beaucoup plus flexible que ce que l on croit Onglets transparents Onglets verticaux Onglets avec images
Exemple d application basée onglets Utiliser LabVIEW afin d imiter NI DIAdem, le logiciel qui surpasse Excel pour le post-traitement de données
Personnaliser une commande onglet Déguiser une commande onglet grâce à la transparence ou aux images
Utiliser les faces-avant secondaires 1. Déterminez un haut niveau d intégration visuelle des VIs 2. Développez des sous-vis modulaires et adaptés en taille 3. Exécutez dynamiquement des sous-vis 4. Insérez dynamiquement des sous-vis dans les faces-avant secondaires
Choix d option via faces-avant secondaires Afficher les faces-avant secondaires en fonction du choix de l utilisateur
Galeries d exemples Credit: Simon Hogg NI Community UI Interest Group
Indiquer l avancement des opérations lentes Les écrans de chargement sont efficaces lorsque les applications ont un temps de chargement assez long Fournit de l information sur le support et le développement Curseurs «occupés» Barres de progression
Écran de chargement Utiliser une structure Événement pour créer un écran de chargement
Galerie d exemples For Support, Please Visit: http://www.ni.com/ Sine Wave Tester Version: 1.0.32 Author: Derrick Snyder Framework Credit: Mark Ridgley, Logic PD NI Developer Community
À retenir N innovez pas Le minimalisme est de mise Pensez à l utilisateur Personnalisez les commandes en utilisant l éditeur Encapsulez les fonctionnalités en utilisant les commandex Nettoyez votre face-avant avec les onglets et les faces-avant secondaires Déguisez les temps de chargement en utilisant les écrans de chargement
Apprenez et partagez decibel.ni.com/content/groups/ui
QUESTIONS?
Restez connecté(e) avant et après NIDays youtube.com/nifrance facebook.com/nifrance ni.com/rss/f twitter.com/nifrance ni.com/community