Construire des interfaces hommemachine LabVIEW toujours plus efficaces : commandes personnalisées, onglets, couleurs

Transcription

1

2 Construire des interfaces hommemachine LabVIEW toujours plus efficaces : commandes personnalisées, onglets, couleurs Nicolas MARQUET National Instruments, Ingénieur d applications

3 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

4 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

5 Les bon artistes empruntent les grands artistes volent. Pablo Picasso

6 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

7 Les trois commandements I. Pensez à l utilisateur II. N innovez pas III. Le minimalisme est de mise

8 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

9 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

10 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

11 Guider l utilisateur avec de la couleur L effet «boîte de céréales» : Quelles céréales attirent votre attention en premier?

12 Guider l utilisateur avec de la couleur

13 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?

14 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

15 Donner un rendu personnalisé à vos IHM

16 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

17 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

18 Fenêtre d édition de commande Face-avant normale Différences au niveau de l éditeur de commandes

19 Fenêtre d édition de commande Face-avant normale Différences au niveau de l éditeur de commandes

20 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

21 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

22 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

23 Composante d une commande (jauge) Index du tableau Zone de logement Aiguille, rampe et échelle Partie horscadre Cadre

24 Voir les composantes d une commande Voir les composantes d une commande en utilisant le menu : Fenêtre»Afficher la fenêtre des composantes

25 Personnaliser une commande jauge Ajouter une décoration et de la personnalisation à une commande jauge

26 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

27 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

28 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

29 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

30 Structure d une commandex Propriétés (optionnel) CommandeX Méthodes (optionnel) Fonctionnalités (nécessaire)

31 Propriété d une commandex Permet à l utilisateur de configurer par programmation la commandex au travers de nœuds de propriétés

32 Méthodes des commandex Permet à l utilisateur de jouer sur les fonctionnalités de la commande au travers des nœuds de méthode

33 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

34 Les données de la commandex Commande en définition de type Définit le type de données de la commandex

35 É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

36 La «façade» de la commandex Définit l apparence de la commandex Appliquée après les changements de propriété/méthodes

37 La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande

38 La «façade» de la commandex Aussi appelée quand : Des données sont écrites dans la commande L affichage doit être rafraîchi

39 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

40 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é

41 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

42 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

43 Créer une commandex Création d une commandex simple

44 Galerie d exemples Credit : Simon Hogg NI Community UI Interest Group

45 Galerie d exemples Credit: Simon Hogg NI Community UI Interest Group

46 Galerie d exemples Credit: Jonathan Cohn Bloomy Controls LabVIEW Example Code Contest 2010 UI Controls Category Winner

47 L importance du choix d affichage Le rapport signal à bruit de l IHM Quel slide est le plus efficace et pourquoi?

48 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

49 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

50 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

51 Personnaliser une commande onglet Déguiser une commande onglet grâce à la transparence ou aux images

52 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

53 Choix d option via faces-avant secondaires Afficher les faces-avant secondaires en fonction du choix de l utilisateur

54 Galeries d exemples Credit: Simon Hogg NI Community UI Interest Group

55 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

56 Écran de chargement Utiliser une structure Événement pour créer un écran de chargement

57 Galerie d exemples For Support, Please Visit: Sine Wave Tester Version: Author: Derrick Snyder Framework Credit: Mark Ridgley, Logic PD NI Developer Community

58 À 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

59 Apprenez et partagez decibel.ni.com/content/groups/ui

60 QUESTIONS?

61 Restez connecté(e) avant et après NIDays youtube.com/nifrance facebook.com/nifrance ni.com/rss/f twitter.com/nifrance ni.com/community