Palloncini

Nota

Questa guida di progettazione è stata creata per Windows 7 e non è stata aggiornata per le versioni più recenti di Windows. Gran parte delle linee guida si applica ancora in linea di principio, ma la presentazione e gli esempi non riflettono le linee guida di progettazione correnti.

Un fumetto è una piccola finestra popup che informa gli utenti di un problema non critico o di una condizione speciale in un controllo.

Screenshot che mostra un fumetto che indica che il blocco maiuscole è attivo.

Un palloncino tipico.

I palloncini hanno un'icona, un titolo e un testo del corpo, tutti facoltativi. A differenza delle descrizioni comando e delle descrizioni comandi, anche i balloon hanno una coda che ne identifica l'origine. In genere l'origine è un controllo in tal caso, viene definito controllo proprietario.

Anche se i palloncini informano gli utenti di problemi non critici, non impediscono problemi anche se il controllo proprietario potrebbe. Eventuali problemi non gestiti devono essere gestiti dall'interfaccia utente del proprietario quando gli utenti tentano di eseguire il commit nell'azione.

Le aree vengono in genere usate con caselle di testo o controlli che usano caselle di testo per modificare i valori, ad esempio caselle combinate, visualizzazioni elenco e visualizzazioni albero. Altri tipi di controlli sono sufficientemente limitati e non hanno bisogno di ulteriori palloncini di feedback. Inoltre, se si verifica un problema con altri tipi di controlli, spesso comporta incoerenze tra più controlli una situazione per cui i palloncini non sono adatti. Solo i controlli di immissione di testo non sono vincolati e un'origine comune di errori a singolo punto.

Una notifica è un tipo specifico di fumetto visualizzato da un'icona dell'area di notifica.

Nota: le linee guida relative a notifiche, descrizioni comando e suggerimenti e messaggi di errore vengono presentate in articoli separati.

Questo è il controllo giusto?

Per decidere, considerare queste domande:

  • Le informazioni descrivono un problema o una condizione speciale? In caso contrario, usare un altro controllo. Non usare le aree per visualizzare informazioni supplementari per un controllo; prendere in considerazione l'uso di testo statico, suggerimenti, divulgazione progressiva o prompt.
  • Il problema o la condizione speciale può essere rilevata immediatamente all'input o quando il controllo proprietario perde lo stato attivo dell'input? In caso contrario, usare un messaggio di errore visualizzato in una finestra di dialogo o in una finestra di messaggio dell'attività.
  • Per i problemi, il problema è critico? In tal caso, usare un messaggio di errore visualizzato in una finestra di dialogo o in una finestra di messaggio dell'attività. Tali messaggi di errore richiedono l'interazione (adatta per gli errori critici), mentre i palloncini non lo fanno.
  • Per condizioni speciali, la condizione è valida ma probabilmente non intenzionale? In tal caso, i palloncini sono appropriati. Per le condizioni non valide, è preferibile prevenirle in primo luogo. Per le condizioni probabilmente previste, non è necessario eseguire alcuna operazione.
  • Il problema o la condizione speciale può essere espressa concisamente? In caso contrario, usare un altro controllo. I palloncini non possono avere spiegazioni dettagliate o fornire informazioni supplementari.
  • Le informazioni descrivono il controllo attualmente al passaggio del mouse? In tal caso, usare invece una mancia, a meno che gli utenti non debbano interagire con il messaggio.
  • Le informazioni sono correlate all'attività corrente dell'utente? In caso contrario, è consigliabile usare una notifica o una finestra di dialogo. È probabile che gli utenti si affacciano sui palloncini all'esterno dell'attività corrente e, per impostazione predefinita, i palloncini si verifichino dopo 10 secondi.
  • Le informazioni provengono da una singola origine specifica? Se un problema o una condizione contiene più origini o nessuna origine specifica, usare invece un messaggio sul posto o una finestra di dialogo.

Scorretto: screenshot di un fumetto: accesso non riuscito

In questo esempio, il problema potrebbe essere con il nome utente o la password, ma segnalando visivamente il problema con un fumetto suggerisce che solo la password è il problema. Di conseguenza, il feedback dall'immissione di un nome utente non corretto è fuorviante.

Le aree sono un'alternativa alle descrizioni info, alle finestre di dialogo e ai messaggi sul posto. A differenza delle descrizioni comando e delle descrizioni comandi:

  • I palloncini possono essere visualizzati indipendentemente dalla posizione corrente del puntatore, quindi hanno una coda che indica la loro origine.
  • I balloon hanno un titolo, un testo del corpo e un'icona.
  • I palloncini possono essere interattivi, mentre è impossibile fare clic su una mancia.

A differenza delle finestre di dialogo modali:

  • I palloncini non rubano lo stato attivo dell'input o richiedono l'interazione.
  • I balloon identificano una singola origine specifica. I dialoghi modali possono avere più origini o nessuna origine specifica.

A differenza dei messaggi sul posto:

  • I palloncini sono più evidenti.
  • I palloncini non richiedono lo spazio disponibile sullo schermo o il layout dinamico necessario per visualizzare i messaggi sul posto.
  • I palloncini si rimuovono automaticamente dopo un timeout.

Modelli di utilizzo

I palloncini hanno questi modelli di utilizzo:

Utilizzo Esempio
Problema di input Un problema di input utente non critico proveniente da un singolo controllo proprietario, in genere una casella di testo.
l'uso di palloncini per i messaggi di errore non ruba lo stato attivo dell'input, ma è ancora molto evidente se il controllo proprietario ha lo stato attivo per l'input. per risolvere il problema, l'utente potrebbe dover modificare o immettere nuovamente l'input; ma se il controllo proprietario ignora l'input non corretto, l'utente potrebbe non dover apportare alcuna modifica. poiché il problema non è critico, non è necessaria alcuna icona di errore.
Screenshot che mostra un fumetto che indica un carattere non corretto.
Area usata per segnalare un problema di input dell'utente non critico.
Condizione speciale Il controllo proprietario è in uno stato che influisce sull'input. Questo stato è probabilmente imprevisto e l'utente potrebbe non rendersi conto che l'input è interessato.
utilizzare i palloncini per evitare frustrazioni avvisando gli utenti di condizioni speciali non appena si verificano (ad esempio, superando le dimensioni massime di input o impostando il blocco dei limiti per errore). è importante fornire un feedback di questo tipo senza rubare lo stato attivo dell'input o forzare l'interazione perché queste condizioni potrebbero essere intenzionali. questi palloncini sono particolarmente importanti per le caselle password e pin, dove gli utenti stanno altrimenti lavorando con feedback minimo. queste aree hanno un'icona di avviso.
Screenshot che mostra i palloncini che indicano che il blocco maiuscole è attivo e viene immesso un carattere non corretto.
Area utilizzata per segnalare una condizione speciale.

Linee guida

Quando visualizzare

  • Visualizzare il fumetto non appena viene rilevato il problema o la condizione speciale, anche se ripetutamente, senza alcun ritardo notevole.
    • Per problemi che interessano singoli caratteri o la dimensione massima di input, visualizzare immediatamente il fumetto all'input.
    • Per problemi che interessano il valore di input (inclusa la richiesta di un valore non vuoto), visualizzare l'area quando il controllo proprietario perde lo stato attivo dell'input. In caso contrario, la visualizzazione di palloncini mentre gli utenti stanno immettendo un input potenzialmente valido può essere distratto e fastidioso.
  • Visualizza un solo fumetto alla volta. La visualizzazione di più palloncini può essere travolgente. Se un singolo evento genera più problemi, presentare tutti i problemi contemporaneamente o segnalare solo il problema più importante.

Scorretto: screenshot di due palloncini che puntano a una casella

In questo esempio due problemi vengono presentati erroneamente contemporaneamente.

Durata della visualizzazione

  • Rimuovere un fumetto quando:
    • Il problema viene risolto o viene rimossa una condizione speciale.
    • L'utente immette dati validi (per problemi di input).
    • Timeout del palloncino. Per impostazione predefinita, i balloon si rimuovono dopo 10 secondi, anche se gli utenti possono modificarli modificando il parametro di sistema SPI_MESSAGEDURATION.
  • Rimuovere il timeout se gli utenti non possono continuare finché il problema non viene risolto. Sviluppatori: in Win32 è possibile impostare l'ora di visualizzazione con il messaggio TTM_SETDELAYTIME.

Come visualizzare

  • Visualizzare le aree sotto il controllo proprietario. In questo modo gli utenti possono visualizzare il contesto, incluso il controllo proprietario e la relativa etichetta. Microsoft Windows regola automaticamente le posizioni dei palloncini in modo che siano completamente sullo schermo. Il comportamento predefinito consiste nel visualizzare un fumetto sopra il relativo controllo proprietario, come fatto con le notifiche.

Corretto: screenshot di un fumetto visualizzato sotto il relativo controllo

Scorretto: screenshot di un fumetto visualizzato sopra il relativo controllo

Nell'esempio errato, il fumetto viene visualizzato in modo imbarazzante sopra il controllo proprietario.

Caselle di testo Password e PIN

  • Usare un fumetto per indicare che il blocco maiuscole è attivo, usando il testo nell'esempio seguente:

screenshot di un palloncino che indica che il blocco delle estremità è attivo

In questo esempio, un fumetto indica che Il blocco maiuscole è attivo in una casella di testo PIN.

  • Usare un fumetto per indicare quando gli utenti tentano di superare le dimensioni massime di input. Raggiungere le dimensioni massime di input è molto meno ovvio nelle caselle di testo password e PIN rispetto alle normali caselle di testo.

screenshot di un fumetto che indica i limiti del codice di aggiunta

In questo esempio, un fumetto indica che l'utente sta tentando di superare le dimensioni massime di input.

  • Usare un fumetto per indicare quando gli utenti inserisce caratteri non corretti. Tuttavia, è meglio non avere tali restrizioni perché riducono la sicurezza della password o del PIN. Per evitare la divulgazione di informazioni, il fumetto deve menzionare solo i fatti documentati relativi a password o PIN validi.

screenshot di un fumetto che indica un input non corretto

In questo esempio, un fumetto indica che il PIN richiede numeri.

Altre caselle di testo

  • Prendere in considerazione l'uso di un fumetto per indicare quando gli utenti tentano di superare le dimensioni massime di input per le caselle di testo critiche e brevi destinate agli utenti principianti. Gli esempi includono nomi utente e nomi di account. Le caselle di testo vengono visualizzate quando gli utenti tentano di superare il valore massimo di input, ma gli utenti principianti potrebbero non comprendere il significato del segnale acustico.

screenshot di un fumetto che indica i limiti dei caratteri

In questo esempio, un fumetto indica che l'utente ha tentato di superare le dimensioni massime di input.

Interazione

  • Quando gli utenti fa clic su un fumetto, basta chiudere il fumetto senza visualizzare altre interfacce utente o avere un altro effetto collaterale. A differenza delle notifiche, i palloncini non dovrebbero avere pulsanti di chiusura.

Icone

  • Scegliere l'icona in base al modello di utilizzo:

    Modello Icon
    Problema di input Nessuna icona. L'uso di un'icona di errore è coerente con le linee guida per il tono di Windows.
    Condizione speciale Icona di avviso standard 16x16 pixel.

Accessibilità

Se usato correttamente, i palloncini migliorano l'accessibilità. Per rendere accessibili i palloncini:

  • Visualizza solo i palloncini correlati all'attività corrente dell'utente.
  • Mantieni conciso il testo del fumetto. In questo modo il testo del fumetto risulta più facile da leggere per gli utenti con ipovedenti e riduce al minimo l'interruzione durante la lettura da parte delle utilità per la lettura dello schermo.
  • Riprodurre il fumetto ogni volta che si ripete il problema o la condizione.

Text

Testo del titolo

  • Usare il testo del titolo che riepiloga brevemente il problema di input o la condizione speciale in una lingua chiara, semplice, concisa e specifica. Gli utenti devono essere in grado di comprendere lo scopo del fumetto rapidamente e con un minimo sforzo.
  • Usare frammenti di testo o frasi complete senza punteggiatura finale.
  • Usare l'iniziale maiuscola solo per la prima parola. Per altre info, vedi il glossario.
  • Usare non più di 48 caratteri (in inglese) per supportare la localizzazione. Il titolo ha una lunghezza massima di 63 caratteri e deve essere in grado di espandersi di almeno il 30% per supportare la localizzazione.

Corpo del testo

  • Usare la prima frase del testo del corpo per indicare il problema o la condizione in modo chiaramente rilevante per l'utente. Non ripetere le informazioni nel titolo. Omettere questo se non c'è altro da aggiungere.
  • Usare la seconda frase per indicare le operazioni che l'utente può eseguire per risolvere il problema o ripristinare lo stato. In conformità alle linee guida relative allo stile e al tono , non è necessario usare la parola Please in questa istruzione. Inserire due interruzioni di riga tra la prima e la seconda frase.

screenshot di un fumetto con titolo e testo del corpo

In questo esempio viene illustrato il layout di testo del fumetto standard.

  • Spiegare come risolvere il problema o ripristinare lo stato anche se questa spiegazione è ovvia, ma omettere la ridondanza tra l'istruzione del problema e la relativa risoluzione. Eccezioni:
    • Omettere la risoluzione se non può essere espressa in modo conciso o senza ridondanza significativa.
    • Omettere la risoluzione se non c'è nulla che l'utente faccia, ad esempio quando i caratteri non corretti vengono ignorati.
  • Usare frasi complete con punteggiatura finale.
  • Usare la maiuscola in stile frase.
  • Usare non più di 200 caratteri (in inglese) per supportare la localizzazione. Il testo del corpo ha una lunghezza massima di 255 caratteri e deve essere in grado di espandersi di almeno il 30% per supportare la localizzazione.

Documentazione

Quando si fa riferimento a palloncini:

  • Usare il testo del titolo esatto, inclusa la relativa maiuscola.
  • Fare riferimento al componente come fumetto, non come notifica o avviso.
  • Quando possibile, formattare il testo del titolo usando il testo in grassetto. In caso contrario, inserire il titolo tra virgolette solo se necessario per evitare confusione.