Caractéristiques des interfaces-usagers et des éléments graphiques du Panneau MG

Le but de cet article est d’expliquer les conventions utilisées pour les interfaces-usagers du Panneau MG de N0C, plus précisément :

• Les zones d’interfaces qui servent à la navigation et à l’information, de même que les zones de contenu.
• Les boîtes de dialogue.
• Les pictogrammes (éléments graphiques ou symboles) que l’on retrouve sur les icônes, boutons et curseurs.

La lecture de cet article vous permettra d’utiliser le Panneau MG plus intuitivement et vous gagnerez du temps. Vous n’aurez plus à constamment vous référer à la base de connaissances pour obtenir des renseignements généraux devenus évidents pour vous. En outre, des articles de la base de connaissance font référence au présent article lorsque c’est approprié, ce qui en allège le texte.

Le glossaire contient  des explications sur de multiples sujets et peut être consulté pour clarifier certains termes.

Prérequis

Saisissez dans votre navigateur web l’adresse suivante : https://mg.n0c.com/fr/.

Si vous n’êtes pas du tout familier avec N0C, nous vous encourageons avant tout à lire l’article Comment fonctionne le tableau de bord.

Description d’une interface typique du Panneau MG

Lorsque vous cliquez sur une fonctionnalité du Menu contextuel (N0C WP par exemple), vous ouvrirez une interface similaire à celle-ci :

Voyons en détail de quoi elle est composée.

	Nom	Utilisation	Commentaires
A	Menu contextuel	Liste d’options donnant accès aux interfaces de N0C.	Voir l’article l’article Comment fonctionne le tableau de bord pour les détails.
B	Nom de l’interface et nom de la section sélectionnée	Nom de l’interface et nom de la section sélectionnée pour interagir.	Précision : le nom qui apparaît à cet endroit ne doit pas nécessairement être le même que celui sélectionné dans le menu contextuel. Il arrive qu’une page contienne 2, 3 ou 4 sections distinctes. L’icône Voir la documentation donne accès à l’article de la base de connaissances traitant de l’interface affichée.
C	Descriptions de la section ou de l’outil de la page	Renseignements par rapport aux fonctionnalités de l’interface.
D	Zone de contenu principale de la section	Affiche l’information essentielle que l’usager est venu consulter dans la section, de même que les éléments de saisie et contrôles.	Voir « Types de zone de contenu principale« .
Da	Enregistrement	Dans une table de données, désigne un ensemble structuré de données qui se rapporte à une seule entité ou à un seul sujet.	Souvent appelé record, fiche ou ligne.
E	Commandes	Parfois, des commandes sont affichées dans la zone de contenu principale.	Dans l’exemple, on montre un curseur.
F	Icônes	Petite image ou pictogramme qui représente un fichier, un dossier ou une application.	Voir les « Symboles utilisés dans le Panneau MG« .
G	Bouton	Élément graphique sur lequel on clique pour déclencher une action immédiate.	Voir les « Symboles utilisés dans le Panneau MG« .
H	Champ de texte	Zone où l’utilisateur peut taper du texte au clavier.
I	Utilisateur actuel	Nom d’utilisateur associé au Projet Web.
J	Langue	Choix de la langue d’affichage du Panneau MG.	FR : français. EN : anglais (English).
K	Bouton de navigation	Permet à l’utilisateur de se déplacer ou d’accéder rapidement à d’autres pages lorsqu’il est impossible d’afficher tous les enregistrements à l’écran.
L	Infobulle	Petit message d’aide contextuelle qui apparaît à l’écran lorsque l’utilisateur place le curseur sur un élément graphique (comme une icône ou un bouton).

Types de zone de contenu principale

La zone de contenu principale, coeur de l’interface, contient, d’une part, l’affichage des informations consultées et, d’autre part, les éléments de saisie et contrôles :

Filtres de recherche

Voici un exemple typique d’une interface de saisie et contrôles avec des filtres de recherche (ici, des listes déroulantes et des champs textes) permettant de filtrer les données dans les tableaux ou les listes :

Onglets (tabs)

Les onglets organisent le contenu en vues distinctes, dont une seule peut être affichée à la fois. Le libellé de chaque onglet apparaît dans l’en-tête de l’onglet, et celui de l’onglet actif est mis en évidence par une barre colorée:

Différente d’un tableau ou d’une liste, cette interface permet de présenter une grande quantité d’informations pertinentes sur un même sujet sans avoir à créer une nouvelle page.

Cette bibliothèque développée par Google, très performante et largement utilisée, est la seule employée N0C : https://material.angular.dev/components/tabs/overview.

Libellé (label)

Un libellé (label en anglais) est une étiquette textuelle ou un petit composant visuel qui décrit à quoi sert un élément à l’écran :

Panneau d’extension (expansion panel)

Un panneau d’extension (ou extension panel en anglais) est un élément d’interface graphique rétractable ou dépliable qui permet d’afficher des informations ou des options supplémentaires sans encombrer l’écran principal:

Description des boîtes de dialogue

Une boîte de dialogue est une petite fenêtre secondaire qui s’affiche à l’écran. Il existe :

• des boîtes de dialogues interactives (qui permettent de faire des actions ou des choix); et
• des boîtes de dialogues qui apparaissent pour fournir une information (message ou instruction principale).

Boîtes de dialogue interactives

Voici une boîte de dialogue d’action et choix typique :

Boîtes de dialogues pour fournir une information

Ce type de boîte de dialogue vous fournit des messages ou des instructions principales. C’est essentiellement un texte explicatif ou une question posée à l’utilisateur (par exemple : «Voulez-vous enregistrer les modifications?»).

Nous en montrons ici quelques exemples.

	Messages/instructions	Exemples
Confirmation	Mécanisme de communication ou de validation qui permet soit de vérifier une intention avant une action critique, soit d’informer l’usager qu’une action a été complétée avec succès.
Boîte jaune	Une boîte jaune (souvent appelée yellow box ou encadré d’avertissement) désigne un élément visuel de notification ou d’alerte utilisé pour attirer l’attention de l’usager sur une information importante, mais non critique.
Boîte rouge	Une boîte rouge (ou un encadré rouge) désigne généralement un indicateur visuel d’erreur, d’alerte ou de sélection active signalant un problème nécessitant absolument l’attention de l’usager, souvent critique.
Informations	Ensemble des données, textes, messages et repères visuels affichés pour communiquer l’état d’un système et guider l’action de l’usager.	Exemples :

Indicateur de chargement (loader)

Le symbole de l’indicateur de chargement (loader) signifie que des données sont en cours de récupération auprès du serveur et que la page ou la section sera temporairement indisponible le temps que ces données soient disponibles:

Symboles utilisés dans le Panneau MG

Le nom et l’utilisation de chaque icône, bouton ou curseur dépend du contexte. Néanmoins, ces symboles correspondent d’habitude à un paradigme, de sorte que, à la manière d’un pictogramme placardé dans un aéroport, ils soient compris dans n’importe quelle langue. Après tout, comme le dit un adage bien connu, une image vaut mille mots.

Voici quelques symboles utilisés dans le Panneau MG. Si vous les connaissez, vous gagnerez beaucoup de temps dans l’opération de l’application.

Les symboles de Roundcube, SiteBuilder, PhpMyAdmin et PhpPgAdmin — des applications qui ne font pas partie de la suite d’outils conçus avec N0C — ne sont pas tous documentés dans cet article. On en parle plutôt dans les articles de la base de connaissances ou sur le Web.

Icônes	Noms	Fonctions	Exemples
	Plus de détails Afficher Voir	Sert à afficher, révéler ou rendre visible un contenu masqué.
	Masquer	Pour rendre un élément invisible sur l’écran sans pour autant le supprimer définitivement.
	Connexion au portail de messagerie	Processus consistant à ouvrir une session sur un compte de courriel directement à partir d’un navigateur Web.
	Journaux de la messagerie	Fichiers d’historique informatique enregistrant chronologiquement toutes les activités, les événements et les transactions liés à l’envoi, à la réception et au routage des courriels sur un serveur de messagerie. Email logs en anglais.
	Changer le mot de passe
	Complexité du mot de passe	Vert : confirme que le mot de passe est suffisamment complexe. Rouge : indique que le mot de passe ne rencontre pas les critères de complexité et qu’il faut en trouver un autre.
	Suspendre	Interrompre temporairement l’exécution d’un programme, d’un processus ou d’une application sans y mettre fin, tout en préservant son état actuel pour pouvoir la reprendre plus tard.
	Arrêter	Mettre fin de manière définitive à un processus ou interrompre immédiatement une tâche en cours.
	Supprimer	Retirer l’intégralité ou une partie des fichiers, des configurations et des composants d’un programme informatique afin qu’il ne soit plus exécutable sur le système.	Dans le gestionnaire de fichiers, supprimer un fichier ou un dossier préalablement sélectionné.
	Ajouter	Insérer de nouvelles informations dans une structure préexistante (comme un fichier, une liste, une variable ou une base de données).
	Connexion	Action de se connecter à un compte.
	Renommer	Modifier l’identifiant textuel d’un élément (fichier, dossier ou programme) dans le système tout en conservant le lien vers son contenu ou sa fonction originale.	Dans le gestionnaire de fichiers, donner un autre nom à un fichier ou un dossier préalablement sélectionné.
	Modifier Renommer	Action de changer, transformer ou mettre à jour des données, un fichier ou un code (par exemple, changer une valeur dans une base de données).	Modifier le quota.
	Éditer	Implique généralement d’ouvrir un contenu dans une interface ou un logiciel spécialisé (éditeur de texte ou éditeur de code) afin de le consulter, de l’ajuster ou de le réécrire avant de l’enregistrer. To edit dans le jargon informatique.	Éditer le fichier. Éditer l’URL. Dans le gestionnaire de fichiers, éditer un fichier texte sélectionné. Le code est alors affiché à l’écran et modifiable aisément.
	Dashboard	Interface graphique qui rassemble, organise et présente des données clés, des métriques et des indicateurs de performance (KPI) sous une forme visuelle et synthétique.	Le tableau de bord de SiteBuilder
	Pages	Document numérique consultable sur Internet via un navigateur.	Conception de pages du site web avec SiteBuilder.
	Blogue	Site web ou une section d’un site web où l’on publie régulièrement des articles courts, appelés billets, classés du plus récent au plus ancien.	Conception de blogues du site web avec SiteBuilder.
	Media	Ensemble des éléments informationnels manipulés par l’ordinateur, incluant le texte, l’image fixe ou animée, le son et la vidéo.	Médias dans SiteBuilder.
	Thèmes	Apparence graphique et présentation visuelle de l’interface d’un site web.	Thèmes que l’on peut choisir pour un site web conçu avec SiteBuilder.
	Menus	Élément d’interface graphique qui présente une liste d’options ou de commandes permettant à l’utilisateur de naviguer ou d’effectuer des actions.	Voir SiteBuilder.
	Bouton hamburger	Icône constituée de trois barres superposées évoquant la forme d’un hamburger, généralement située dans le coin supérieur d’une fenêtre et qui fait se développer un menu lorsqu’elle est activée.
	Sites	Ensemble de pages web et de ressources multimédias reliées entre elles par des hyperliens et accessibles via une adresse unique (l’URL).	Voir SiteBuilder.
	Générer	Produire, créer ou afficher automatiquement des éléments (du contenu, du trafic ou des données) à l’aide d’un système informatique ou d’un script.	Générer un mot de passe.
	Actualiser	Consiste à demander au navigateur de télécharger à nouveau la page depuis le serveur pour afficher sa version la plus récente.
	Redémarrer	Relancer ou réinitialiser un serveur, une application web ou un processus afin de vider la mémoire, appliquer des mises à jour ou corriger un dysfonctionnement technique.
	Copier	Action de sélectionner et d’enregistrer temporairement une partie d’un contenu (texte, image ou lien URL) dans la mémoire de l’appareil (le presse-papiers) pour pouvoir le reproduire ailleurs.	Dans le gestionnaire de fichiers, copier un fichier ou un dossier préalablement sélectionné. Copier la valeur.
	Cloner	Créer une copie identique d’un site existant, incluant son code, ses fichiers et sa base de données.
	Calendrier	Module cliquable (comme un sélecteur de date) qui permet à l’internaute de choisir un jour pour un rendez-vous, un événement ou une commande.
	Inactif	Présentement ni en train de fonctionner, ni en train d’interagir, ou qui a été abandonné.
	Actif	Présentement activé, opérationnel et prêt à être utilisée ou en cours d’exécution.
	Fonctionnel Réussi	Système, réseau ou service en bonne santé, c’est-à-dire pleinement opérationnel, sécurisé et performant.
	Valider	Processus qui consiste à vérifier et à s’assurer que les données, les programmes ou les transactions sont exacts, corrects et conformes à des critères prédéfinis avant d’être acceptés ou traités.
	Sélection multiple	Fonctionnalité qui permet à un utilisateur de choisir plusieurs options à la fois dans une même liste ou un même groupe de commandes, au lieu d’un seul choix.	Dans le gestionnaire de fichiers, sélectionner plusieurs fichiers et dossiers à la fois.
	Info	Renseignement, donnée ou contenu mis à la disposition des utilisateurs.	Dans le gestionnaire de fichiers, afficher des informations diverses sur le fichier ou le dossier sélectionné telles que le nom, la date de la dernière modification, le nombre de permissions, etc.
	Voir la base de connaissances	Lien direct à la base de connaissances.
	Voir la documentation	Lien ou consigne qui invite l’utilisateur à consulter un ensemble de ressources écrites pour comprendre comment utiliser un outil, une fonctionnalité ou un service.
	Détails	Page ou section spécifique qui fournit des informations complètes, approfondies et exhaustives sur un élément particulier (un produit, un service, un événement ou un enregistrement de données).
	Paramètres	Options de configuration d’un compte ou d’une page, ou des éléments techniques ajoutés à une adresse web pour transmettre des données.	Paramètres du compte de messagerie. Paramètres FTP. Paramètres du Gestionnaire de fichiers. Paramètres de SiteBuilder.
	Démarrer	Lancer, ouvrir ou mettre en marche un programme, une application ou un système.
	Vider la cache	Effacer les fichiers temporaires et les images miniatures enregistrés par votre ordinateur ou votre téléphone pour afficher rapidement le symbole visuel d’un fichier ou d’une application.
	Local	Signifie que le fichier ou le dossier est stocké physiquement sur le disque dur ou la mémoire interne de votre appareil (ordinateur, smartphone ou tablette).
	Mes fichiers	Raccourci vers l’application ou l’espace central qui regroupe, organise et permet de gérer tous les documents, images, vidéos et autres données stockés sur votre appareil.	Voir le gestionnaire de fichiers.
	Sortir	Quitter une application, fermer une session, ou revenir à l’écran précédent.
	Nouveau dossier	Sert à créer un répertoire vide pour organiser et stocker vos documents.	Voir le gestionnaire de fichiers.
	Nouveau fichier	Commande qui permet de créer instantanément un conteneur de données vide ou un document vierge dans le dossier où vous vous trouvez.	Voir le gestionnaire de fichiers.
	Changer le mode d’affichage	Permet de modifier la façon dont les dossiers et les fichiers sont présentés à l’écran en regroupant les fichiers et dossiers ensemble.	Dans le gestionnaire de fichiers, permet de sélectionner jusqu’à trois options d’affichage : – Liste des éléments un à la suite de l’autre, avec leur Nom, leur Taille et la date de la Dernière modification. – Regrouper les fichiers et dossiers ensemble avec des grandes icônes. – Regrouper les fichiers et dossiers ensemble avec des très grandes icônes.
	Déplacer	Changer l’emplacement d’un document ou d’un dossier pour le placer dans un autre répertoire, sans conserver de copie à l’endroit d’origine.	Dans le gestionnaire de fichiers, déplacer un fichier ou un dossier d’un dossier à un autre.
	Copier	Créer une copie conforme des données, du texte, des fichiers ou d’un document entier, tout en laissant la source originale totalement inchangée.
	Permissions	Règles de sécurité qui définissent qui a le droit de lire, de modifier ou d’exécuter cet élément.	Dans le gestionnaire de fichiers, ouvrir une fenêtre permettant de gérer les permissions d’accès aux fichiers et dossiers.
	Télécharger	Copier un fichier depuis un serveur distant (comme un espace cloud ou un site web) vers votre propre appareil.	Dans le gestionnaire de fichiers, télécharger des fichiers (download) de l’hébergement vers le poste local
	Installer	Sert à télécharger, configurer et intégrer un nouveau logiciel, une application ou une mise à jour sur votre appareil pour qu’il soit prêt à fonctionner.
	Importer	Sert à transférer des fichiers ou des données depuis une source externe (comme une clé USB, un autre dossier ou un appareil photo) vers l’emplacement actuel de votre appareil.	Dans le gestionnaire de fichiers, téléverser des fichiers (upload) du poste local vers l’hébergement.
	Créer une archive	Permet de regrouper un ou plusieurs fichiers et dossiers sélectionnés en un fichier unique compressé	Dans le gestionnaire de fichiers, compresser et archiver un fichier ou un dossier préalablement sélectionné.
	Extraire une archive	Décompresser et restituer les fichiers ou dossiers d’origine qui étaient regroupés et compressés dans un fichier unique.	Dans le gestionnaire de fichiers, décompresser un fichier archivé préalablement sélectionné.
	Activer/désactiver l’interface système shell	Sert à ouvrir ou fermer un terminal de commande (le shell) directement intégré au navigateur.	Dans le gestionnaire de fichiers, ouvrir le terminal, qui donne accès au serveur en ligne de commande.
	Enregistrer	Enregistrer, inscrire ou attribuer officiellement une donnée, un appareil ou un composant logiciel dans le répertoire, la base de données ou la structure de mémoire d’un système, afin que celui-ci puisse le reconnaître et interagir avec lui.
	Activer ou choisir (avec le crochet)	Déclencher, valider ou mettre en fonction un paramètre en déplaçant un bouton mobile le long d’une glissière numérique.
	Désactiver ou ne pas choisir (en gris)	Éteindre ou suspendre une fonction visuelle, un comportement ou un périphérique de pointage associé à l’indicateur à l’écran.	Voir le gestionnaire de fichiers.
	Accès à un outil supplémentaire	Ouvrir une nouvelle page et quitter N0C pour accéder à un outil supplémentaire, tel qu’une autre application.	L’usager sort de N0C, mais le tout s’affiche dans une nouvelle page; il ne sera pas déconnecté de N0C.