Informatique L'informatique pour les non-informaticiens C'est quoi une interface graphique ?

Introduction

Une interface graphique ou GUIGraphical User Interface (interface graphique utilisateur), est un ensemble d'éléments visuels qui sont présents pour fournir des informations à l'utilisateur ou pour lui permettre d'interagir avec l'ordinateur.

Quand tu viens de démarrer ton ordinateur, avant même de lancer un logiciel tu disposes d'une interface graphique. Il s'agit de l'environnement graphique de ton système d'exploitation. Il varie d'un OS à l'autre et il est souvent personnalisable. Les captures d'écran dans ce cours sont celles de mon ordinateur. Les éléments que je vais te présenter sont des éléments de base, ils sont présents dans tous les environnements graphiques : peu importe l'OS que tu utilises tu devrais les retrouver.

La barre des tâches


Elle se trouve la plupart du temps en bas ou en haut de l'écran. Elle est souvent divisées en trois parties. De gauche à droite :

  • La barre de lancement rapide contient le menu des applications ainsi que des raccourcis que l'utilisateur peut personnaliser
  • La liste des applications en cours d'exécution permet de passer d'une fenêtre à l'autre en cliquant dessus
  • La zone de notifications donne un accès instanté à certaines informations sur l'état de l'ordinateur : date/heure, volume sonore, avertissements/messages d'erreurs, charge système (occupation de la RAM et du processeur), état du réseau... Chacun peut choisir les informations auxquelles il veut accéder d'un simple coup d’œil.

Le bureau

Il s'agit de tout l'espace restant à l'écran. Tu peux le personnaliser avec un fond d'écran. Il est souvent utilisé pour y placer des raccourcis. Beaucoup de gens utilisent le bureau pour y stocker des fichiers. Alors, oui, c'est sûr, les fichiers sont facilement accessibles parce qu'en permanence à la vue de l'utilisateur mais c'est à mon avis une très mauvaise habitude pour au moins deux raisons :

  • avec le nombre croissant de fichiers ou dossiers que tu vas y stocker, ton bureau va très vite devenir un fouillis illisible, comme dans la vraie vie
  • si tu prends l'habitude de stocker des fichiers sur ton bureau, c'est que tu ne prends pas l'habitude de les ranger, de les structurer, ce qui sous-entend que sur le long terme ton disque dur va devenir un labyrinthe dans lequel tu vas te perdre en permanence (syndrôme typique connu sous le nom de : "mais si j'te jure, mon fichier je l'ai sauvegardé hier mais il a disparu depuis").

Si tes données ne sont ni rangées ni structurées, tu vas aussi avoir quelques problèmes le jour où tu voudras les sauvegarder :

Alors, attends. J'ai des photos ici et de la musique là. Ok, les documents administratifs, je crois qu'ils sont par là. Ha... y'en a encore ici.
Ha pis c'est vrai la dernière fois j'avais téléchargé les photos d'Alice, elles doivent être par là. Et toi, tu l'avais mis où le crack de Windows que Bob t'avais envoyé ?
Oh là là, c'est compliqué l'informatique !

Enfin tout ça c'est un autre problème : les cours d'hygiène informatique ça sera pour plus tard. Pour l'instant, continuons à faire le tour de notre GUI.

Le menu des applications

Dans ce menu, tu dois normalement trouver la liste de toutes les applications que tu as installées sur ton ordinateur. Il te permet aussi d’accéder à certains paramètres de configuration de ton système d'exploitation, de fermer/verrouiller ta session ou d'éteindre/redémarrer ton ordinateur :

Les fenêtres

On a vu dans le cours précédent que le système d'exploitation fournissait aux développeurs des outils pour intégrer facilement des éléments graphiques standards (boutons, cases à cochers...). C'est aussi un sous-ensemble du système d'exploitation, appelé le gestionnaire de fenêtres qui est en charge de dessiner les fenêtres des programmes. Eh oui, c'est de là que Windows tire son nom et son logo (window = fenêtre en français). Voyons de quels éléments standards est constituée une fenêtre :

La zone tout en haut s'appelle la barre de titre. Elle comporte... le titre de l'application. Elle permet de déplacer une fenêtre par glisser/déposerPour faire un glisser/déposer, il faut placer le pointeur de la souris sur la barre de titre, maintenir le bouton gauche de la souris enfoncé puis faire glisser le pointeur de la souris à l'endroit où l'on désire déposer la fenêtre.

Tout à gauche de la barre de titre se trouve une icône qui permet d'accéder à un menu pour gérer les fenêtres. Chez moi, ce menu ressemble à ça :

Tout à droite de la barre de titre se trouvent les boutons qui permettent de contrôler la fenêtre :

  • le premier bouton sert à réduire la fenêtre (la faire disparaître mais sans la fermer). Pour y accéder à nouveau tu pourras utiliser la barre des tâches
  • le deuxième bouton permet de mettre la fenêtre en plein écran. Une fois la fenêtre en plein écran, ce même bouton permet de quitter le plein écran. Pour basculer entre le mode plein écran ou fenêtré, il est aussi possible de double cliquer n'importe où dans la barre de titre
  • le troisième bouton sert à fermer la fenêtre

Juste en dessous de la barre de titre se trouve la barre de menus qui contient... les menus de l'application :

À droite de la fenêtre se trouve une barre de défilement. Elle est présente lorsqu'il y a trop de contenu pour qu'il puisse être affiché dans la fenêtre. Une barre de défilement peut également se trouver en bas de la fenêtre si elle n'est pas assez large par rapport au contenu :

Tout en bas de la fenêtre de trouve la barre d'état. Elle est là pour afficher des informations utiles à l'utilisateur :

Lorsqu'une fenêtre est redimensionnable (elle ne le sont pas toujours), tu peux la redimensionner en plaçant ton pointeur de souris sur un bord ou un angle de la fenêtre. Ton pointeur devrait changer d'apparence, il ne te reste plus qu'à faire un glisser/déposer pour redimensionner ta fenêtre comme tu le souhaites. Si une fenêtre est en plein écran, elle n'est pas redimensionnable, il faut d'abord quitter le plein écran. Fait tout de suite le test avec la fenêtre de ton navigateur ! Amuse-toi à la redimensionner, la mettre en plein écran, la réduire... Prends aussi le temps de chercher et de lire le contenu de la barre de menus et de la barre d'état.

Le système d'exploitation fournit différents types de fenêtres —adaptés à différents besoins— et les développeurs peuvent choisir de personnaliser certains éléments. Ne soit donc pas surpris si les fenêtres n'ont pas toujours exactement la même apparence.

Les éléments de saisie

Maintenant qu'on sait ce qu'est une fenêtre, on va voir ce qu'elle peut contenir. Pour permettre à l'utilisateur d'interagir avec une application, toute une collection d'éléments standards a été créée. Chaque élément est adapté à une situation et un besoin précis, prenons cinq minutes pour présenter les plus courants :

Les cases à cocher (check box) permettent à l'utilisateur de sélectionner une ou plusieurs réponses parmi un choix fixe :


Les boutons radio (radio button) permettent à l'utilisateur de sélectionner une réponse et une seule parmi un choix fixe :

Les curseurs (slider) permettent à l'utilisateur de choisir une valeur en faisant glisser un curseur sur un axe :

Les champs de saisie (text box) permettent de saisir du texte. Comment tu t'appelles ?

Les champs de saisie numériques (spin box) permettent de saisir un nombre ou d'utiliser les petits boutons qui sont à droite du champ de saisie pour en modifier la valeur. Combien font 5 + 3 ?

Les listes déroulantes (combo box) permettent de sélectionner un élément dans une liste. Une fois la liste déroulante active, tu peux sélectionner un élément avec la souris ou bien utiliser le clavier pour saisir les premières lettres de l'élément que tu veux. Sélectionne Singapour dans cette liste :

Les listes à sélection multiple permettent de sélectionner un ou plusieurs éléments dans une liste. Pour sélectionner plusieurs éléments, maintient la touche Ctrl enfoncée puis clique sur les éléments que tu veux. Si tu t'es trompé et que tu veux désélectionner un élément, clique à nouveau dessus, toujours en maintenant la touche Ctrl. Si tu veux sélectionner plusieurs éléments qui se suivent, sélectionne le premier élément puis, tout en maintenant la touche Maj enfoncée, clique sur le dernier élément que tu veux sélectionner. Tous les éléments qui se trouvent entre ces deux éléments seront alors automatiquement sélectionnés. À toi de jouer, sélectionne les pays du Canada à l'Espagne en seulement 2 clics :

Les boutons permettent de déclencher une action, d'ouvrir une boîte de dialogue, de valider un formulaire...

Quoi de mieux qu'un calendrier pour choisir une date ? Tu peux saisir directement la date de ton choix ou cliquer sur la petite icône sur la droite pour afficher un calendrier interactif :

Les sélectionneurs de couleurs (color picker) permettent... de sélectionner une couleur :

Sélectionner un fichier devient un jeu d'enfant avec une boîte de dialogue adaptée :

Conclusion

Et voilà, on a fait le tour des principaux éléments d'une interface graphique. Ça fait pas mal d'informations à retenir mais vu que quand tu utiliseras un PC tu vas en permanence rencontrer les éléments que je viens de te présenter, tu vas vite te familiariser avec tous ces concepts.