2.3 Créer des interfaces utilisateur interactives
Une interface utilisateur interactive bien conçue est essentielle à la convivialité et à l'efficacité d'une application de base de données FileMaker. Dans ce tutoriel, nous nous concentrerons sur la manière de créer des éléments interactifs tels que des éléments de navigation (menus et boutons), des boîtes de dialogue personnalisées et des fenêtres pop-up afin d'améliorer l'expérience utilisateur dans votre base de données. En outre, nous aborderons quelques conseils éprouvés pour améliorer la convivialité de vos interfaces utilisateur.
Table des matières
- 2.3 Créer des interfaces utilisateur interactives
- Création d'éléments de navigation (menus, boutons)
- Menu et navigation personnalisés dans gFM-Business
- Dialogues et popovers personnalisés
- Conseils pour améliorer la convivialité
- gFM-Business Open Source FileMaker Basis-ERLe logiciel pour un cours accéléré
- Foire aux questions sur les interfaces utilisateur interactives
Avant de commencer à créer des éléments de navigation, il est important de réfléchir à la manière dont les utilisateurs vont naviguer dans votre application. Réfléchissez aux mises en page ou aux fonctions qui sont fréquemment utilisées et à la manière de les rendre aussi faciles d'accès que possible.
- Menu de navigation principal: Réfléchissez à l'utilité d'un menu de navigation central, visible sur chaque page. Ce menu pourrait contenir des liens vers les principales sections de l'application, telles que "Accueil", "Clients", "Commandes" et "Rapports".
- Navigation contextuellePensez à ajouter des éléments de navigation contextuels qui changent en fonction du modèle ou des données actuelles. Par exemple, vous pourriez ajouter des boutons qui n'apparaissent que lorsque certaines conditions sont remplies, comme l'affichage d'un bouton "Modifier" uniquement pour les enregistrements existants.
Étape 2 : Créer des boutons
Les boutons sont un élément essentiel de toute interface utilisateur et permettent aux utilisateurs d'effectuer certaines actions, telles que l'ouverture d'un autre modèle, l'exécution d'un script ou l'enregistrement de données.
- Ajouter un bouton: Passez en mode mise en page et sélectionnez le Outil de touche dans la barre d'outils supérieure. Cliquez dans la zone de mise en page pour ajouter un bouton.
- Étiqueter le boutonDonnez au bouton un libellé clair et compréhensible, par exemple "Enregistrer", "Supprimer" ou "Suivant". Le libellé doit être court et explicite.
- Attribuer une action: dans la boîte de dialogue de la touche sous Action vous pouvez attribuer une action spécifique au bouton, comme l'exécution d'un script, le passage à une autre mise en page ou l'exécution d'une fonction définie par l'utilisateur. Ces actions sont exécutées lorsque l'utilisateur clique sur le bouton.
- Style des boutons: utilisez l'inspecteur pour personnaliser l'apparence du bouton. Vous pouvez modifier les couleurs, les polices et les bordures afin d'intégrer le bouton à l'aspect général de la mise en page.
Étape 3 : Créer des menus
Les menus offrent un moyen structuré et facilement accessible de proposer différentes options ou fonctionnalités aux utilisateurs.
- Créer un menu déroulantSélectionnez le champ souhaité avec la souris et passez au dernier onglet dans l'inspecteur. Dans la zone "Style de contrôle", utilisez le Menu déroulant ou Liste déroulante pour créer un menu. Sous "Valeurs de", sélectionnez une liste de valeurs à afficher pour la sélection.
- Définir les points de menuDéfinissez les éléments de menu sous forme de liste de valeurs dans [Fichier/fichier > Définir > Listes de valeurs]. Une liste de valeurs peut contenir des valeurs statiques ou des valeurs provenant de champs ou de champs liés. gFM-Business utilise souvent des listes de valeurs dynamiques avec la fonction "MagicValueList". Dans ce cas, "MagicValueList" est indiqué comme liste de valeurs et un déclencheur de script est attribué au champ (lors de l'entrée), qui crée la liste de valeurs de manière dynamique avec la fonction [MagicValueList]. Une liste de valeurs affectée de cette manière ne doit pas être prédéfinie comme liste de valeurs dans FileMaker.
- Attribuer des actions de menuChaque élément de menu peut déclencher une action, comme les boutons. Utilisez les déclencheurs de script pour indiquer si quelque chose doit se produire lorsqu'un utilisateur sélectionne un élément de menu.
Après avoir créé vos éléments de navigation, testez la navigation du point de vue de l'utilisateur. Vérifiez que tous les liens et boutons fonctionnent correctement et que la navigation est intuitive et fluide.
Les éléments de menu de la navigation et du menu principal dans le logiciel ERP gFM-Business ne doivent pas être adaptés individuellement sur les maquettes, mais sont prédéfinis dans le module de développement "Administration" sous les onglets [Navigation] et [Menu principal]. Pour le développeur, cela présente l'avantage que tous les éléments de navigation sont identiques sur tous les masques et peuvent être facilement repris d'une mise en page existante. La version professionnelle supporte en outre les menus principaux et les navigations en plusieurs langues.
Dialogues et popovers personnalisés
Les boîtes de dialogue personnalisées et les popovers sont des éléments interactifs qui affichent des informations supplémentaires ou demandent des saisies à l'utilisateur sans quitter la mise en page actuelle.
Étape 1 : Créer des boîtes de dialogue personnalisées
Les boîtes de dialogue personnalisées sont des fenêtres contextuelles que vous pouvez utiliser pour afficher des messages à l'utilisateur ou pour demander des saisies.
- Créer un script: Pour afficher une boîte de dialogue personnalisée, vous devez créer un script. Allez dans le menu sous [Scripts] dans l'espace de travail des scripts (Cmd/Ctrl+Shift+S) et cliquez sur Nouveau script.
- Définir des dialogues: Utilisez la commande Afficher sa propre boîte de dialogue dans le script pour créer le dialogue. Vous pouvez définir un titre, un message texte et jusqu'à trois boutons.
- Ajouter des champs de saisieVous pouvez ajouter jusqu'à trois champs de saisie dans lesquels les utilisateurs peuvent saisir des données. Ces champs peuvent être utilisés pour saisir des valeurs qui seront ensuite traitées dans le script.
- Actions basées sur les entrées de l'utilisateur: utiliser des instructions conditionnelles (if statements) dans le script pour effectuer différentes actions basées sur les entrées de l'utilisateur ou sur le bouton sélectionné.
Étape 2 : Créer des popovers
Les popovers sont de petites fenêtres qui apparaissent lorsque l'utilisateur clique sur un élément et qui affichent des informations supplémentaires ou des champs de saisie. Ils sont particulièrement utiles pour rendre les interfaces utilisateur complexes plus claires.
- Ajouter un popoverDans la barre d'outils supérieure, sélectionnez l'option "Bouton popover" dans l'outil Bouton et cliquez dans la mise en page pour ajouter un bouton popover. Un bouton popover ressemble à un bouton normal, mais il ouvre une fenêtre popover lorsqu'on clique dessus.
- Concevoir des contenus popoverDès que vous avez créé le bouton popover, un double-clic ouvre l'éditeur de popover. Ici, vous pouvez ajouter des champs, du texte, des boutons et d'autres objets, exactement comme dans une mise en page normale.
- Ajouter des interactions: utilisez des scripts ou des actions directes pour contrôler l'interactivité du popover. Vous pouvez par exemple décider que certains champs du popover doivent être validés avant que l'utilisateur ne puisse enregistrer les modifications.
- Tester: Testez le popover en mode défilement pour vous assurer qu'il s'affiche correctement et effectue les actions souhaitées.
Conseils pour améliorer la convivialité
Étape 1 : maintenir la cohérence
Une interface utilisateur cohérente est plus facile à apprendre et à utiliser. Utilisez des couleurs, des polices et des styles uniformes sur l'ensemble des mises en page. Assurez-vous que les éléments de navigation tels que les boutons et les menus apparaissent aux mêmes endroits et fonctionnent de la même manière.
Les utilisateurs doivent toujours savoir où ils se trouvent et comment accéder aux fonctions souhaitées. Utilisez des étiquettes claires et concises pour les boutons et les menus. Faites en sorte que le chemin vers les fonctions les plus importantes ne soit jamais à plus de deux ou trois clics.
Étape 3 : Réactions et confirmations
Donnez toujours aux utilisateurs un feedback sur leurs actions. Par exemple, affichez un message de confirmation lorsque des données ont été enregistrées ou un avertissement avant que des données importantes ne soient supprimées. Cela permet d'éviter les erreurs et d'accroître la confiance des utilisateurs dans l'application.
Étape 4 : Prévention et traitement des erreurs
Concevez votre interface utilisateur de manière à ce que les utilisateurs ne puissent effectuer que des saisies valides. Utilisez des menus déroulants, des cases à cocher et d'autres choix prédéfinis pour minimiser la saisie d'erreurs. Si une erreur se produit, affichez des messages d'erreur clairs et proposez des solutions.
Étape 5 : Tester avec des utilisateurs réels
Il est important de tester votre interface utilisateur avec de vrais utilisateurs afin de vous assurer qu'elle est intuitive et efficace. Recueillez les commentaires et procédez aux ajustements nécessaires pour améliorer en permanence l'expérience utilisateur.
gFM-Business Open Source FileMaker ERP de base
Le logiciel du cours accéléré
Télécharger gratuitement
Foire aux questions sur les interfaces utilisateur interactives
- Comment créer des éléments de navigation dans FileMaker pour guider mes utilisateurs dans l'application ?
- Vous pouvez créer des éléments de navigation en ajoutant des boutons et des barres de boutons en mode mise en page. Ceux-ci permettent aux utilisateurs de passer facilement d'un modèle ou d'une fonction à l'autre. Vous pouvez associer des boutons à des scripts qui guident l'utilisateur vers un autre modèle, filtrent les enregistrements ou effectuent une action spécifique. La barre de boutons est particulièrement utile pour créer une navigation cohérente en haut ou sur le côté du modèle.
- Comment insérer un popover dans mon interface utilisateur ?
- Un popover est un objet de mise en page qui affiche des informations ou des options supplémentaires lorsque l'utilisateur clique sur un bouton. Pour créer un popover, sélectionnez l'option "Bouton popover" dans la barre d'outils en mode mise en page. Placez le bouton sur votre mise en page et vous pourrez ajouter du contenu comme des rubriques, du texte ou d'autres boutons dans la fenêtre popover. Les popovers sont parfaits pour les informations contextuelles ou pour fournir des options avancées sans faire sortir l'utilisateur de la mise en page actuelle.
- Comment créer des boîtes de dialogue interactives dans FileMaker ?
- Les boîtes de dialogue sont utiles pour afficher des informations importantes aux utilisateurs ou pour leur demander de saisir des données. Vous pouvez créer une boîte de dialogue personnalisée à l'aide d'un script. Dans l'éditeur de script, vous sélectionnez la fonction "Afficher une boîte de dialogue personnalisée" et vous pouvez ajouter jusqu'à trois champs de saisie ainsi que des boutons tels que "OK" et "Annuler". Cela convient bien pour confirmer les décisions de l'utilisateur ou pour collecter des données supplémentaires avant d'effectuer une action.
- Comment créer des flux de travail interactifs à l'aide de boutons ?
- Les boutons sont un élément central des interfaces utilisateur interactives. Vous pouvez ajouter des boutons et leur attribuer des scripts qui effectuent des actions spécifiques, telles que la création d'un nouvel enregistrement, la suppression d'un enregistrement ou la navigation vers un modèle spécifique. En ajoutant des conditions dans les scripts, vous pouvez contrôler les boutons de manière dynamique, en fonction du rôle de l'utilisateur ou du statut d'un enregistrement.
- Comment utiliser les contrôles d'onglets pour garder une vue d'ensemble dans des mises en page complexes ?
- Les contrôles d'onglets sont un excellent moyen d'organiser les données dans des zones de type onglet et d'aider les utilisateurs à passer d'une section à l'autre d'une mise en page sans avoir à recharger toute la page. Vous pouvez ajouter un contrôle d'onglet en mode mise en page et créer des onglets qui affichent chacun un contenu ou des données différentes. Cela facilite la navigation dans des mises en page complexes en affichant des informations connexes dans une structure claire et organisée.
- Comment puis-je améliorer la convivialité de mes mises en page ?
- Pour améliorer l'expérience utilisateur, assurez-vous que les mises en page sont claires et intuitives. Utilisez de grands boutons bien visibles, des étiquettes claires et des couleurs contrastées pour les éléments importants. Réduisez les informations superflues et concentrez-vous sur la mise à disposition de l'utilisateur des fonctions les plus importantes. Des infobulles (textes d'aide) peuvent également être utiles pour fournir des informations supplémentaires aux utilisateurs lorsqu'ils passent la souris sur un objet.
- Comment puis-je m'assurer que mon interface utilisateur interactive fonctionne bien sur différents appareils ?
- FileMaker prend en charge la conception responsive, de sorte que les modèles s'affichent bien sur différents appareils, tels que les ordinateurs de bureau, les tablettes et les smartphones. Dans l'Inspecteur, utilisez les fonctions d'ancrage pour définir la manière dont les objets s'adaptent à la taille de la fenêtre. Pour les appareils mobiles, assurez-vous que les boutons sont suffisamment grands et faciles à utiliser. Créez des mises en page optimisées pour les appareils mobiles avec une navigation simplifiée et une taille de police adaptée.
- Comment mettre en place une mise en forme conditionnelle pour fournir des indications visuelles aux utilisateurs ?
- La mise en forme conditionnelle vous permet de mettre en évidence visuellement des champs ou des objets en fonction de certains critères. Par exemple, vous pouvez afficher automatiquement dans une couleur différente les enregistrements qui ont un certain statut. En mode Modèle, vous pouvez sélectionner un objet et définir des règles dans l'Inspecteur sous "Mise en forme conditionnelle" pour modifier dynamiquement son apparence. Cela aide les utilisateurs à identifier immédiatement les informations importantes.
- Comment puis-je utiliser les infobulles pour améliorer mon interface utilisateur ?
- Les infobulles sont de petites fenêtres d'information qui apparaissent lorsqu'un utilisateur passe la souris sur un objet. Dans FileMaker, vous pouvez ajouter des infobulles à n'importe quelle rubrique, bouton ou autre objet afin de fournir des informations ou des instructions supplémentaires. Dans l'Inspecteur, vous pouvez définir une info-bulle pour l'objet sélectionné dans le premier onglet Position, sous Info-bulle. Les infobulles sont utiles pour aider les utilisateurs sans qu'ils aient à quitter la mise en page ou à ouvrir des boîtes de dialogue supplémentaires.
- Comment optimiser l'interface utilisateur pour des interactions rapides ?
- Pour permettre une interaction rapide, il faut éviter les clics redondants et rendre les actions importantes facilement accessibles. Les boutons doivent être placés à proximité des informations pertinentes et être suffisamment grands pour pouvoir être cliqués facilement. Les raccourcis et les combinaisons de touches peuvent également améliorer l'efficacité. Vous pouvez définir des raccourcis clavier dans les scripts afin de rendre les actions fréquentes plus rapidement accessibles, par exemple pour enregistrer un enregistrement ou effectuer une recherche.
- Comment créer des tableaux de bord interactifs dans FileMaker ?
- Les tableaux de bord offrent un aperçu visuel des données et des indicateurs clés de performance importants. Vous pouvez créer des tableaux de bord en utilisant des graphiques, des champs de résumé et des boutons. Les graphiques peuvent être générés à partir de vos données pour représenter visuellement les tendances et les indicateurs. Des boutons et des popovers peuvent être intégrés dans le tableau de bord pour permettre une navigation interactive de l'utilisateur, par exemple pour filtrer les données ou afficher des informations détaillées.
- Comment puis-je intégrer des contenus dynamiques dans mon interface utilisateur ?
- Le contenu dynamique peut être intégré à l'aide de champs de calcul, d'une visibilité conditionnelle et de scripts. Vous pouvez par exemple utiliser des champs de calcul pour afficher des valeurs dynamiques qui changent en fonction de la saisie de l'utilisateur. La visibilité conditionnelle vous permet d'afficher ou de masquer des objets de modèle en fonction de la situation actuelle, par exemple le statut d'un enregistrement. Les scripts permettent de dynamiser davantage l'interface utilisateur en réagissant à certaines actions de l'utilisateur.
