Architettura degli schermi e navigazione nello sviluppo mobile: cos'è, tipi e come funziona

Cos'è l'architettura degli schermi e la navigazione

L'architettura degli schermi e la navigazione è la struttura portante di un'applicazione mobile che definisce le schermate disponibili e i modi per spostarsi tra di esse. Ogni schermata risolve un compito specifico: elenco prodotti, scheda prodotto, carrello o modulo di pagamento. Secondo Apple Human Interface Guidelines (2025), una navigazione ben progettata riduce il carico cognitivo dell'utente del 40%. Gli sviluppatori principianti dovrebbero iniziare con uno schema semplice di tre o cinque schermate.

Di cosa si compone l'architettura degli schermi

Qualsiasi architettura di schermi include tre elementi di base: schermate, transizioni e contenitori di navigazione. Le schermate mostrano il contenuto, le transizioni gestiscono le animazioni di cambio schermata e i contenitori memorizzano la cronologia degli spostamenti dell'utente. Su Android questo ruolo è svolto da FragmentManager, su iOS — da UINavigationController. Comprendere questi tre componenti è il primo passo verso la progettazione di un'interfaccia user-friendly.

Tipi principali di navigazione nelle app mobili

Nelle applicazioni mobili si distinguono quattro tipi principali di navigazione: a pila, modale, a schede e gestuale. Il modello a pila funziona come una pila di carte — ogni nuova schermata viene posizionata sopra e il pulsante "Indietro" rimuove la carta superiore. Secondo Nielsen Norman Group (2024), la navigazione a pila è il modello più prevedibile, compreso dal 94% degli utenti senza formazione. Iniziare con una pila è raccomandato perché è intuitivamente chiara per gli utenti di qualsiasi piattaforma.

Quando utilizzare le finestre modali

Le finestre modali sono schermate temporanee che richiedono un'azione prima di tornare al contenuto principale. Vengono utilizzate per un singolo compito: confermare un'azione, modulo di accesso o selezione di un'opzione. A differenza di una pila, una finestra modale non viene salvata nella cronologia di navigazione. Il tipo di navigazione viene scelto in base ai casi d'uso dell'applicazione.

Navigazione su iOS con UINavigationController

Su iOS, la navigazione è costruita attorno a UINavigationController — un controller che gestisce la pila di schermate. UINavigationController aggiunge automaticamente una barra di navigazione con titolo e pulsante "Indietro". Secondo Apple Developer Documentation (2025), l'85% delle app nell'App Store utilizza UINavigationController come modello di navigazione principale. Gli sviluppatori iOS principianti devono solo padroneggiare push e pop combinati con le basi del design UX/UI.

Come funziona la pila di schermate in iOS

Durante una transizione push, una nuova schermata viene inserita nella pila di navigazione e l'utente vede un'animazione di scorrimento da destra. Durante una transizione pop, la schermata corrente viene rimossa dalla pila e l'utente torna a quella precedente. UINavigationController memorizza riferimenti a tutte le schermate nella pila, consentendo all'utente di tornare indietro di diversi passi. In IT Sectr, utilizziamo questo approccio in tutti i progetti iOS per costruire scenari utente lineari.

Come funziona la navigazione su Android

Su Android, l'architettura degli schermi è implementata tramite Navigation Component — una libreria di Google per costruire la navigazione. Navigation Component utilizza un grafo di navigazione (nav graph), dove ogni schermata è un nodo e le transizioni sono archi tra di essi. Secondo Android Developers Guide (2025), Navigation Component riduce gli errori di navigazione del 60% rispetto a FragmentManager manuale. Si consiglia agli sviluppatori Android principianti di padroneggiare subito Navigation Component.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

// In nav_graph.xml:
<!-- 
  <fragment android:id="@+id/homeFragment"
    android:name=".HomeFragment" />
  <fragment android:id="@+id/detailFragment"
    android:name=".DetailFragment" />
  <action android:id="@+id/toDetail"
    app:destination="@id/detailFragment" />
-->

// Navigare al clic del pulsante:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager e il suo ruolo

Prima di Navigation Component, gli sviluppatori gestivano le transizioni tramite FragmentManager — una classe di sistema per sostituire i fragment. FragmentManager lavora con transazioni: replace, add, remove per cambiare i fragment sullo schermo. Tuttavia, richiede una gestione manuale della pila e degli stati, che spesso porta a errori. Google raccomanda ufficialmente Navigation Component come alternativa più sicura a FragmentManager manuale.

Errori comuni dei principianti nell'architettura degli schermi

Gli sviluppatori principianti commettono spesso errori tipici quando progettano l'architettura degli schermi. Il più comune è l'assenza di un centro di controllo unico della navigazione, quando le transizioni sono sparse in tutto il codice. Secondo l'analisi di Google Play Console (2025), le app con navigazione caotica hanno il 37% in più di segnalazioni di crash relative alle transizioni. Un router unico o un grafo di navigazione risolve questo problema.

Ignorare il pulsante "Indietro"

Molti principianti dimenticano di gestire il pulsante "Indietro" di sistema su Android o il gesto di scorrimento su iOS. Un ritorno non gestito porta al blocco dell'applicazione o all'uscita imprevista. Su Android, Navigation Component gestisce il pulsante "Indietro" automaticamente se il grafo di navigazione è configurato. Di seguito un esempio di gestione del pulsante "Indietro" con OnBackPressedDispatcher.

class MyFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val callback = OnBackPressedCallback(true) {
            if (isSheetExpanded) {
                collapseSheet()
                isEnabled = false
            } else {
                isEnabled = false
                requireActivity().onBackPressedDispatcher.onBackPressed()
            }
        }
        requireActivity().onBackPressedDispatcher.addCallback(
            viewLifecycleOwner, callback
        )
    }
}

Il codice verifica se il pannello Bottom Sheet è espanso: se sì — lo comprime, se no — passa l'evento al dispatcher di sistema. Questo è un modello standard per la gestione personalizzata di "indietro" in Android.