Quando utilizzarlo

Potete utilizzare questo pattern quando volete mostrare agli utenti soltanto un task intermedio da compiere, per poi riportarlo all’interno del sistema.

Come questo pattern aiuta l’utente

Le modali aiutano gli utenti a focalizzarsi sul singolo Task da compiere. Normalmente le modali richiedono informazioni importanti senza le quali il sistema non può procedere.

Ad esempio quando si sta provando a salvare un documento ma non si è inserito il nome, o l’azione di delete non è reversible.

Se è vero che questo pattern aiuta gli utenti a focalizzarsi sul singolo task perché lo allontana da tutto il resto, se utilizzato spesso può frustrare fortemente l’utente.

Immaginate di dover guidare un’automobile:

  1. Provate ad aprire la portiera e il sistema vi chiede
    [sei sicuro di voler aprire l’automobile?]
  2. Volete metterla in moto
    [sei sicuro di voler accendere l’automobile?]
  3. Siete riusciti a partire ma nel momento in cui volete accendere il climatizzatore e siete concentrati sulla guida
    [sei sicuro di voler accendere il climatizzatore? a quanti gradi?]

Ecco tutte queste modali vi stanno soltanto frustrando mentre il vostro obiettivo è quello di fare un giro in macchina, andare al lavoro o raggiungere il luogo dove avete deciso di trascorrere le vostre vacanze.

Quindi utilizzate questo pattern solo se necessario e con molta parsimonia.

Elementi che compongono il pattern

Un pannello che si sovrappone alla pagina sulla quale si stava navigando che contiene soltanto le informazioni necessarie allo svolgimentoI del nuovo task.

La modale è un pattern di navigazione e come tale deve consentire agli utenti di comprendere come tornare alla condizione iniziale o alla successiva.

  • “Close” o “X” in alto a destra per chiudere
  • Titolo
  • Body
  • Input field se necessari
  • Bottoni con copy brevi che suggeriscono all’utente le azioni possibili, come ad esempio “non salvare” “salva”

Il modal panel pattern viene utilizzato in modi differenti, quello più comunemente utilizzato è un pannello sovrapposto alla pagina con un layer di fondo in trasparenza.

Ma capita che venga utilizzata una pagina con un url differente, come Netflix ad esempio. Anche in questo caso le caratteristiche vengono tutte mantenute. Titolo, body, input field, bottoni e il close o X (Escape Hatch) che nel caso Netflix viene sostituito dal logo, il quale da agli utenti la possibilità di tornare alla landing page.

Pattern correlati

Esempi

/C:/a394bd04122f79aa68a05eeeb604cdfa