Présentation modale dans le développement mobile : qu’est-ce que c’est, types d’écrans

Qu’est-ce que la présentation modale ?

Présentation modale est un motif de navigation où un nouvel écran apparaît au-dessus de l’écran actuel, bloquant temporairement l’interaction avec le contenu parent. L’utilisateur doit explicitement terminer la tâche modale (annuler, enregistrer, fermer) pour revenir à l’état précédent.

La modalité résout une tâche cognitive : elle concentre l’attention de l’utilisateur sur une seule action sans distraction du reste de l’interface. C’est crucial pour les formulaires d’inscription, les dialogues de confirmation, la sélection de fichiers et l’autorisation via des services tiers. Les Human Interface Guidelines d’Apple recommandent d’utiliser la modalité uniquement pour les tâches qui nécessitent une complétion avant de continuer.

Contrairement aux fenêtres modales web, la présentation modale mobile peut être en plein écran (occupant tout l’écran) ou partielle (Page Sheet, Bottom Sheet). Le choix du type dépend du contexte de la tâche et des conventions de la plateforme. iOS tend vers Page Sheet pour la plupart des scénarios, laissant Full Screen pour les lecteurs vidéo et les éditeurs photo.

En quoi la présentation modale diffère-t-elle de Push ?

Push Presentation (navigation par pile) ajoute un écran à la pile de navigation et affiche automatiquement un bouton de retour. L’utilisateur peut revenir à l’écran précédent à tout moment. La présentation modale, au contraire, nécessite une complétion explicite : le bouton de retour est soit absent, soit ferme la fenêtre modale au lieu de revenir à l’écran précédent.

Les principales différences entre présentation modale et push : Présentation modale bloque la navigation arrière sans perte de données, nécessite une action pour fermer (Save, Cancel, Done) et représente généralement une tâche séparée. Push Presentation préserve la hiérarchie de navigation, ajoute automatiquement un bouton de retour et convient à la visualisation séquentielle de contenu.

En pratique, le choix entre Modal et Push dépend du contexte. Il est recommandé d’utiliser la modalité pour les tâches que l’utilisateur doit terminer avant de continuer, et Push pour l’exploration séquentielle de contenu. Mélanger les motifs sur le même écran entraîne de la confusion et dégrade l’expérience utilisateur.

Présentation modale sous iOS : UIKit et SwiftUI

iOS propose plusieurs styles de présentation modale via l’énumération UIModalPresentationStyle. UIKit prend en charge .fullScreen (plein écran), .pageSheet (carte avec marge supérieure), .formSheet (fenêtre centrée sur iPad) et .automatic (le système choisit selon le contexte). Depuis iOS 13, le style par défaut est .automatic, qui sélectionne .pageSheet pour iPhone.

UIViewController.present

La méthode de base UIKit pour la présentation modale est present(_:animated:completion:). Le contrôleur appelant la méthode devient presentingViewController, et le nouveau devient presentedViewController. La fermeture s’effectue via dismiss(animated:completion:). SwiftUI fournit le modificateur .sheet pour un comportement similaire.

SwiftUI .sheet

L’approche déclarative de SwiftUI utilise les modificateurs .sheet et .fullScreenCover. Le premier crée un Page Sheet, le second une présentation modale en plein écran. Tous deux acceptent un binding sur un Bool ou un objet identifiable qui contrôle la visibilité de la fenêtre modale. La fermeture se produit lorsque le binding est défini sur false ou lors de l’appel à dismiss depuis l’environnement.

struct ContentView: View {
    @State private var showModal = false

    var body: some View {
        Button("Ouvrir le formulaire") {
            showModal = true
        }
        .sheet(isPresented: $showModal) {
            RegistrationForm()
        }
    }
}

struct RegistrationForm: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        Button("Enregistrer") { dismiss() }
    }
}

Présentation modale sous Android : Fragment et Compose

Android n’a pas d’API unique pour la présentation modale comme iOS. Au lieu de cela, la plateforme propose plusieurs mécanismes : DialogFragment pour les fenêtres de dialogue, BottomSheetDialogFragment pour les panneaux inférieurs et Activity avec les indicateurs NEW_TASK et CLEAR_TOP pour les écrans modaux. Jetpack Compose a introduit un composant Dialog unifié pour tous les types de fenêtres modales.

DialogFragment

DialogFragment est la classe de base pour les fenêtres modales dans le SDK Android. Elle gère le cycle de vie du dialogue, gère la rotation de l’écran et sauvegarde l’état. Le fragment s’affiche au-dessus de l’Activity sans bloquer la pile de navigation. La fermeture s’effectue via dismiss() ou en touchant en dehors de la zone de dialogue si setCancelable(true).

Feuille inférieure modale

BottomSheetDialogFragment affiche une fenêtre modale sous forme de panneau s’élevant depuis le bas. Ce motif est populaire dans Material Design pour la sélection d’options, le partage et les actions rapides. Le BottomSheet peut être de hauteur fixe ou extensible (hauteur d’aperçu + hauteur totale). Dans Compose, ModalBottomSheet de la bibliothèque Material3 est utilisé.

@Composable
fun ModalScreen(onDismiss: () -> Unit) {
    Dialog(onDismissRequest = onDismiss) {
        Card(
            modifier = Modifier.padding(16.dp)
        ) {
            Column {
                Text("Formulaire modal", style = MaterialTheme.typography.headlineSmall)
                Button(onClick = onDismiss) {
                    Text("Fermer")
                }
            }
        }
    }
}

Meilleures pratiques de présentation modale

Les fenêtres modales sont un outil UX puissant, mais leur utilisation excessive dégrade l’expérience utilisateur. Apple HIG et Google Material Design s’accordent sur les recommandations : la modalité doit être utilisée pour des tâches ciblées et ne pas dépasser 20 % du total des actions de navigation.

Quand utiliser la présentation modale

Les fenêtres modales conviennent aux scénarios suivants : saisie de données (formulaires d’inscription, profils), confirmation (suppression, envoi), sélection (sélecteur de date, gestionnaire de fichiers) et autorisation (OAuth, Firebase Auth). Si la tâche prend moins de 30 secondes et nécessite un blocage de contexte, choisissez la modalité.

Éviter

N’utilisez pas la présentation modale pour : la visualisation séquentielle de contenu (utilisez Push), l’affichage d’erreurs (utilisez Toast ou Snackbar), les publicités et offres promotionnelles sans demande explicite de l’utilisateur. Material Design recommande d’éviter les fenêtres modales imbriquées — cela désoriente l’utilisateur et perturbe la hiérarchie de navigation.

Pour les fenêtres modales avec champs de texte, assurez-vous de gérer la perte de focus du clavier. Lorsque le clavier apparaît, la fenêtre modale doit se déplacer vers le haut pour que l’utilisateur puisse voir le texte saisi. UIKeyboardWillShowNotification dans iOS et adjustResize dans Android résolvent cette tâche.

Exemples de code en Swift et Kotlin

Voyons l’implémentation de la présentation modale sur les deux plateformes. L’exemple Swift montre la configuration de UIModalPresentationStyle.pageSheet avec un délégué pour gérer la fermeture. L’exemple Kotlin montre DialogFragment avec une mise en page personnalisée et la conservation de l’état.

let modalVC = ModalViewController()
modalVC.modalPresentationStyle = .pageSheet

if let sheet = modalVC.sheetPresentationController {
    sheet.detents = [.medium(), .large()]
    sheet.prefersGrabberVisible = true
}

modalVC.presentationController?.delegate = self
present(modalVC, animated: true)

// MARK: - UIAdaptivePresentationControllerDelegate
extension ViewController: UIAdaptivePresentationControllerDelegate {
    func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
        print("Modal fermé")
    }
}

class ModalDialogFragment : DialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_modal, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        view.findViewById<Button>(R.id.closeButton).setOnClickListener {
            dismiss()
        }
    }
}