Gestes & Contrôles

Un aperçu de tous les gestes tactiles, actions de balayage et contrôles dans l’app – alignés avec les directives d’interface humaine Apple.


Principes fondamentaux

L’app suit les directives d’interface humaine d’Apple (HIG). Quiconque connaît les apps iOS reconnaîtra la plupart des gestes immédiatement. Ce chapitre explique les gestes les plus importants – en particulier les différences spécifiques à l’app.

Le principe le plus important : Les actions destructrices (supprimer) sont toujours à gauche, les actions non destructrices (éditer) à droite. C’est le standard iOS et prévient les suppressions accidentelles.


Vues et feuilles

L’app utilise deux types d’écrans :

Vue normale — avec flèche retour dans la barre de navigation
Fig. 62 — Vue normale — avec flèche retour dans la barre de navigation
Vue feuille — s'ouvre d'en bas, poignée de pilule en haut
Fig. 63 — Vue feuille — s'ouvre d'en bas, poignée de pilule en haut

Vue normale (navigation push) : Un nouvel écran glisse de la droite. Une flèche retour (←) apparaît en haut à gauche. Cette vue fait partie de la hiérarchie de navigation.

Feuille : Une feuille s’ouvre d’en bas. Elle a une petite poignée pilule (petite barre au centre supérieur) et superpose la vue précédente.


Fermer une feuille

Une feuille peut être fermée de trois façons :

Méthode Geste
Balayer vers le bas Place le doigt près du haut de la feuille, traîne vers le bas
Traîner la poignée pilule Traîne la petite barre au centre supérieur vers le bas
Bouton Annuler Appuie sur Annuler ou Fermer

💡 Le balayage vers le bas fonctionne toujours – même quand aucun bouton n’est visible.


Vue liste

Vue liste avec plusieurs entrées
Fig. 64 — Vue liste avec plusieurs entrées

Les listes affichent les entrées avec des lignes séparatrices. Chaque entrée peut être appuyée pour l’ouvrir ou l’éditer. Les entrées avec une icône ≡ de traîne (trois lignes à droite) peuvent être réorganisées en appuyant longtemps sur cette icône.

Voir les sections ci-dessous pour les actions de balayage dans les listes.


Tap (court)

Tap court sur tuile et entrée de liste
Fig. 65 — Tap court sur tuile et entrée de liste

Le geste le plus courant : un tap court déclenche l’action principale d’un élément.

Ce qui se passe
Tuile du tableau de bord Enregistrer l’événement (action principale)
Entrée de liste Ouvrir la configuration ou le détail
‹+› Plus Ajouter un nouvel élément
Terminé / Suivant / Enregistrer Confirmer l’action
Annuler / Retour Annuler, aucun changement

💡 Tous les boutons sont appuyables sur leur pleine largeur. Tu n’as pas besoin de viser avec précision l’icône ou le texte.


Long press (maintien)

Long press : la tuile du tableau de bord ouvre l'historique, l'entrée de liste active le tri
Fig. 66 — Long press : la tuile du tableau de bord ouvre l'historique, l'entrée de liste active le tri

Le long press active une action secondaire – mais cela signifie différentes choses selon le contexte :

Ce qui se passe
Tuile du tableau de bord Ouvrir et chercher l’historique des événements
Tuile « Avancé » dans le tableau de bord des paramètres Ouvre la vue de liste des paramètres avancés
Icône ‹≡› de traîne (3 lignes) dans les listes Relâche l’élément pour le tri

⚠️ Remarque : Le long press sur le tableau de bord et dans les configurations de liste signifient des choses différentes. C’est une contrainte au niveau du système – iOS offre seulement un nombre limité de gestes.

💡 Le relâchement du tri est confirmé par un signal visuel ET haptique (brève vibration).

Tableau de bord :         Long press → historique des événements
                          (Action principale : tap court → enregistrer l'événement)

Tableau de bord Paramètres : Long press « Avancé » → ouvre la vue de liste
                            (Appuie sur l'entrée → ouvre la feuille des paramètres)

Liste Paramètres :       Long press ≡ → commencer le tri
                          (Appuie sur l'entrée → ouvre la configuration)

Balayage : Actions de liste (gauche & droite)

Balayage gauche montre le bouton rouge supprimer, balayage droite montre le bouton bleu éditer
Fig. 67 — Balayage gauche montre le bouton rouge supprimer, balayage droite montre le bouton bleu éditer

Dans les listes, il y a deux directions de balayage avec des rôles clairement séparés :

Direction Couleur Signification Exemples
Droite à gauche 🔴 Rouge Destructive – irréversible Supprimer, retirer
Gauche à droite 🔵 Bleu Non-destructive – sûr Éditer, renommer

Ce motif est iOS standard selon HIG – Swipe Actions. La sémantique des couleurs est immédiatement comprise par les utilisateurs iOS : rouge = attention, bleu = sûr.


Supprimer avec confirmation (balayage gauche)

Boîte de dialogue de confirmation après balayage gauche sur un paramètre
Fig. 68 — Boîte de dialogue de confirmation après balayage gauche sur un paramètre

Quand tu balaye de droite à gauche et appuie sur « Supprimer », une boîte de dialogue de confirmation apparaît – pour tous les éléments qui seront supprimés définitivement :

Balaye de droite à gauche
→ Appuie sur le bouton rouge « Supprimer »
→ La boîte de dialogue de confirmation apparaît
→ Appuie sur « Supprimer » à nouveau (ou « Annuler »)

Ce processus en deux étapes prévient les suppressions accidentelles. Le motif suit les HIG d’Apple – Actions destructrices.

⚠️ Après la confirmation, l’action n’est pas réversible – pense toujours brièvement avant d’appuyer !


Éditer via balayage droite

Balayage droite montre le bouton bleu éditer sur une entrée de liste
Fig. 69 — Balayage droite montre le bouton bleu éditer sur une entrée de liste

Quand tu balaye de gauche à droite, le bouton « Éditer » apparaît en bleu. C’est le moyen le plus rapide d’ouvrir une entrée directement de la liste – sans avoir à l’appuyer.

💡 Le balayage droite n’est pas disponible partout dans l’app – uniquement là où une action d’édition rapide a du sens (par exemple paramètres, groupes, rapports).


Basculer entre les tableaux de bord

Balayage entre deux tableaux de bord – balayage gauche sur le tableau de bord
Fig. 70 — Balayage entre deux tableaux de bord – balayage gauche sur le tableau de bord

Sur le tableau de bord lui-même (pas dans une liste), le balayage signifie quelque chose de différent :

Geste Ce qui se passe
Gauche à droite Vue principale du tableau de bord Tableau de bord précédent
Droite à gauche Vue principale du tableau de bord Tableau de bord suivant

Le balayage du tableau de bord est séparé du balayage de liste. Le balayage dans une tuile ou une entrée de liste déclenche l’action de liste – le balayage sur le fond libre du tableau de bord bascule le tableau de bord.


Menu contextuel avec éditer, exporter et supprimer après long press
Fig. 71 — Menu contextuel avec éditer, exporter et supprimer après long press

Le long press d’une entrée de liste ouvre un menu contextuel avec toutes les actions disponibles en un coup d’œil. Le menu contextuel reflète les actions de balayage :

Contenu du menu contextuel (exemple : paramètre) :
  ✏️  Éditer      (= balayage droite)
  📤  Exporter    (menu contextuel seulement)
  🔔  Rappel  (menu contextuel seulement)
  ──────────────
  🗑️  Supprimer    (= balayage gauche, en rouge)

💡 Le menu contextuel est utile quand tu veux voir toutes les actions sans savoir s’il y a un balayage pour elles – tout en un coup d’œil, pas de devinette.

Selon les HIG – Context Menus, les actions destructrices dans les menus contextuels sont toujours rouges et placées à la fin de la liste.


Éléments de barre d’outils et navigation

Barre d'outils avec flèche retour, titre, symbole importer/exporter et plus
Fig. 72 — Barre d'outils avec flèche retour, titre, symbole importer/exporter et plus
Élément Symbole Signification
Naviguer vers l’arrière ← (haut gauche) Revenir à la page précédente
Importer/Exporter ↑↓ (haut droite) Importer / Exporter
Plus + (haut droite) Ajouter un nouvel élément
Ellipsis / Plus … (haut droite) Sous-menu avec plus d’actions
Scrollbar Barre mince (droite) La page a plus de contenu
Icône de traîne ≡ (3 lignes à droite) L’élément est triable

Tableau de bord : Deux gestes sur une tuile

Tap court enregistre l'événement, long press ouvre l'historique – sur la même tuile
Fig. 73 — Tap court enregistre l'événement, long press ouvre l'historique – sur la même tuile

Le tableau de bord a deux actions différentes pour la même tuile :

Tap court  → Enregistrer l'événement (action principale)
Long press → Ouvrir l'historique des événements + cherche (action secondaire)

C’est le geste le plus important spécifique à l’app. Il te permet à la fois d’entrer de nouvelles données et de chercher les entrées précédentes avec deux gestes simples – sans changer de vues.


Référence rapide : Les actions les plus importantes

Enregistrer l'événement :     Ouvre le tableau de bord → tap court sur la tuile
Ouvrir l'historique des événements : Tableau de bord → long press sur la tuile
Corriger l'événement :         Long press sur la tuile → sélectionne l'entrée → Éditer
Supprimer l'entrée :           Dans la liste, balaye de droite à gauche → Supprimer → Confirme
Éditer l'entrée :              Dans la liste, balaye de gauche à droite → Éditer
Menu contextuel sur l'entrée : Long press sur l'entrée de liste → choisis l'action
Basculer le tableau de bord :  Balaye sur le fond du tableau de bord (gauche/droite)
Fermer la feuille :            Balaye la feuille vers le bas, ou appuie Annuler/Fermer