Animazioni e transizioni

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 .

L'uso strategico di animazioni e transizioni può rendere il programma più facile da comprendere, sentirsi più liscia, più naturale e di qualità superiore, e essere più coinvolgente. Ma l'uso gratuito di animazioni e transizioni può rendere il vostro programma distratto e persino fastidioso.

Le animazioni danno l'aspetto del movimento o del cambiamento nel tempo. Usa l'animazione per fornire commenti e suggerimenti, visualizzare in anteprima l'effetto di un'azione, mostrare la relazione tra oggetti, attirare l'attenzione sulla modifica o spiegare visivamente un'attività.

Microsoft Windows usa un'animazione flash in background per fornire commenti e suggerimenti su cui è stato fatto clic sull'oggetto.

Le transizioni sono animazioni usate per mantenere gli utenti orientati durante le modifiche dello stato dell'interfaccia utente e le manipolazioni degli oggetti e rendere queste modifiche uniformi invece di jarring. Le transizioni buone si sentono naturali, spesso dando l'illusione che gli utenti interagiscono con oggetti reali.

I gadget desktop di Windows usano transizioni uniformi tra i relativi stati concisi e dettagli.

In genere, le migliori animazioni e transizioni vengono usate per comunicare con gli utenti non verbalmente e per apportare modifiche di stato più naturali e meno evidenti. Al contrario, il meno efficace è gratuito in quanto non comunicano nulla o attirano attenzione non necessaria. Le animazioni vengono usate meglio come forma secondaria di comunicazione. Devono comunicare informazioni utili, ma non critiche, e per essere accessibili, gli utenti devono essere in grado di determinare informazioni equivalenti tramite altri mezzi.

Nota: Linee guida relative alla personalizzazione del software , suonoe accessibilità sono presentati in articoli separati.

Si tratta dell'interfaccia utente corretta?

Per decidere, prendere in considerazione le domande seguenti.

Animazioni

Si applicano le condizioni seguenti?

• L'animazione comunica visivamente qualcosa di utile, ad esempio dando feedback, mostrando relazioni, cause ed effetti o attirando attenzione a cambiamenti importanti.
• La visualizzazione dell'animazione non è essenziale. È possibile ottenere informazioni equivalenti in un altro modo. Gli utenti potrebbero non trarre vantaggio dall'animazione se:
  • Hanno disattivato le animazioni.
  • La loro attenzione è altrove.
  • Sono ipovedenti.
  • L'animazione è nascosta da un'altra finestra.
  • L'animazione non viene riprodotta a causa di prestazioni di sistema insufficienti.
• L'animazione non influisce sulla produttività dell'utente. O:
  • Si verifica rapidamente (200 millisecondi o meno).
  • Non interferisce con l'interazione o può essere interrotto.
  • L'utente deve comunque attendere.
• L'animazione non influisce sul flusso dell'utente.
  • È al centro dell'attenzione dell'utente o attira l'attenzione su un elemento al di fuori del centro dell'attenzione che è importante o utile per completare un'attività.
  • È facilmente ignorabile, non distraendo o fastidioso.
  • Non diventa noioso. Gli utenti lo trovano ancora appropriato e piacevole anche dopo la visualizzazione ripetuta.

In tal caso, prendere in considerazione l'uso di un'animazione.

Transizioni

Uno stato di modifica di un oggetto o di una scena e tutte le condizioni precedenti per l'uso di animazioni e una delle condizioni seguenti si applicano?

• La modifica dello stato è concettualmente disorientante, confusa o altrimenti difficile da comprendere.
• La modifica dello stato è visivamente insodetta, manca di continuità o fluidità, o lampeggia; o appare innaturale, incompiuto o di scarsa qualità, soprattutto se coinvolge un'area grande schermo.
• L'uso di una transizione renderebbe più veloce la modifica dello stato.
• Il cambiamento di stato è degno di particolare attenzione dell'utente.

In tal caso, prendere in considerazione l'uso di una transizione.

Concetti di progettazione

Le animazioni e le transizioni sono un modo efficace per comunicare visivamente le informazioni che altrimenti richiedono testo da spiegare o che potrebbero non essere perse dagli utenti.

risposta errata:

risposta esatta:

L'uso di un'animazione comunica le stesse informazioni, ma in modo naturale e non invadente. Quale sarebbe meglio vedere mille volte?

Le animazioni e le transizioni non devono richiedere attenzione per avere successo. Infatti, vengono spesso usati per evitare di prestare attenzione ai meccanismi di programma che gli utenti non devono essere a conoscenza. Molte animazioni di successo sono così naturali che gli utenti non sono nemmeno consapevoli di loro; piuttosto gli utenti noterebbero solo la loro assenza. La frequenza di occorrenza aumenta la necessità di sottigliezza, quindi effetti di risparmio che richiedono attenzione per eventi poco frequenti che meritano davvero l'attenzione.

Transizione del menu Start che evita di richiamare l'attenzione.

Oltre a rendere il programma più facile da comprendere e sentire più liscia, animazioni e transizioni ben progettate sono un ottimo modo per aggiungere personalità, carattere e stile al programma. possono rendere l'esperienza utente più coinvolgente e coinvolgente offrendo un'atmosfera naturale e reale.

Windows 7 evidenzia i pulsanti della barra delle applicazioni al passaggio del mouse in base alla posizione corrente del mouse e al colore dell'icona del programma. Questo approccio è visivamente attraente, ma sottile, che trasmette una personalità umile.

Tuttavia, le animazioni e le transizioni sono più efficaci e benvenuti quando servono uno scopo chiaro. Devono essere usati per migliorare l'usabilità, la fluidità e il flusso, e la percezione della qualità, senza danneggiare significativamente le prestazioni.

Mentre alcuni tipi di animazioni vengono usati per attirare l'attenzione dell'utente, assicurarsi che l'attenzione sia ben meritata e degna di interrompere il training del pensiero dell'utente. L'occhio umano è sensibile al movimento, specialmente al movimento periferico. Può essere difficile per gli utenti concentrarsi quando è presente un pulsante della barra delle applicazioni lampeggiante o un'icona di area di notifica rotante. Evita di usare animazioni per interrompere o distrarre gli utenti o attirare l'attenzione sugli elementi che non giustificano l'attenzione dell'utente.

risposta errata:

I programmi non devono lampeggiare il pulsante della barra delle applicazioni, a meno che gli utenti non debbano eseguire immediatamente un'operazione importante. In questo caso, l'unica cosa che l'utente deve fare è attivare il programma.

Usa animazioni e transizioni perché il tuo programma ne ha bisogno, non solo perché puoi. E per l'accessibilità, non usare l'animazione come unico modo per trasmettere informazioni essenziali. Assicurarsi che gli utenti possano ottenere informazioni equivalenti in modo diverso.

Attributi di animazioni e transizioni valide

Buone animazioni e transizioni colpiscono il giusto equilibrio tra questi attributi:

• Sono chiaramente intenzionali. Buone animazioni sono lì perché devono essere, sia per comunicare informazioni, fare un'interazione reale, o attirare l'attenzione su qualcosa di degno di nota. E le animazioni intenzionali sono accurate; se un'animazione mostra che un'attività è in corso, è perché l'attività è in realtà in corso.

risposta errata:

In questo esempio, l'animazione mostra che viene caricata una batteria completamente carica.

• Sembra liscia e continua. Le animazioni valide rimuovono senza problemi le giunzioni tra le modifiche dello stato della scena o dell'elemento mostrando le relazioni e fornendo un senso di luogo e contesto. La continuità aiuta gli utenti a capire come sono arrivati e come tornare da dove provengono.

L'anteprima della finestra della barra delle applicazioni di Windows 7 consente la continuità man mano che l'utente passa da un programma a un altro.

• Sono realistici. Le animazioni valide simulano le proprietà fisiche e il comportamento di un oggetto reale. In questo modo gli utenti possono prevedere e comprendere i risultati delle interazioni. Non devi modellare esattamente il mondo reale, ma se usi animazioni realistiche, devi mantenerle coerenti con il mondo reale. Gli utenti non devono mai essere sorpresi o confusi dai risultati, soprattutto con le animazioni usate per la manipolazione diretta.

In questo esempio, l'animazione "spostarsi al di fuori del modo" usata dalla barra delle applicazioni di Windows 7 sembra più realistica di un punto di inserimento statico.

• Sono autentici. Anche gli oggetti non trovati nel mondo reale possono apparire naturali in base al comportamento reale di un oggetto diverso, ma correlato. Questa metafora funziona solo se la relazione comunica chiaramente lo scopo e il comportamento previsti.

In questo esempio, l'animazione "squeegee" della finestra usata da Windows 7 si sente autentica perché è coerente con il comportamento delle finestre di vetro nel mondo reale.

• Usare il mapping naturale. I mapping naturali sono fisici o culturali. Un mapping naturale basato sulla cultura, ad esempio, potrebbe iniziare dal fatto che nelle culture occidentali, le persone leggono da sinistra a destra. Di conseguenza, per esprimere una sequenza temporale di oggetti, l'oggetto centrale è corrente, gli oggetti a sinistra provengono dal passato e gli oggetti a destra sono in futuro. Andando avanti nel tempo è indicato dal movimento da sinistra a destra.

In questo esempio, il controllo Windows Media Player ha un mapping naturale perché la riproduzione sposta la posizione da sinistra a destra.

• Hanno personalità. Le animazioni ben scelte sono ottimi modi per aggiungere personalità, personaggio e stile al programma. Possono rendere l'esperienza utente più coinvolgente e coinvolgente. Mentre il tipo di animazione determina ciò che comunica, il modo specifico in cui viene eseguita l'animazione mostra la personalità del programma. Buone animazioni proiettano la personalità giusta per il vostro programma, sia serio o capriccioso, o da qualche parte in mezzo.

In questo esempio, l'uso di testo animato e prospettiva dinamica di Zune aiuta a modellare la sua personalità.

• Guarda e senti reattivo. Le animazioni valide non danneggiano la produttività dell'utente bloccando gli utenti da altre interazioni o forzando gli utenti a guardare. Non importa quanto siano naturali e coinvolgenti le animazioni del programma, nessuno vuole aspettarli esclusivamente. Le animazioni buone sembrano anche reattive senza essere sfumati avendo un avvio rapido con un atterraggio morbido. Le animazioni reattive traggono vantaggio anche dalla comunicazione rapida dello scopo. Gli utenti non dovrebbero dover guardare un'animazione per molto tempo solo per capire cosa sta facendo o quando viene fatto. Per la manipolazione diretta, le animazioni reattive sono essenziali per mantenere un'atmosfera reale diretta e coinvolgente. Per sentirsi diretti, i punti di contatto di un oggetto devono rimanere sotto il puntatore senza problemi durante la manipolazione. Qualsiasi ritardo, risposta tritata o perdita di contatto distrugge la percezione della manipolazione diretta.

In questo esempio, la transizione di panoramica tocco si sente reattiva mantenendo il punto di contatto sotto il dito dell'utente durante la manipolazione.

• Attirare il giusto livello di attenzione. Le animazioni buone sono di solito sottili e attirano solo l'attenzione necessaria per soddisfare il loro scopo. Di conseguenza, non sono distratti, fastidiosi, eccessivamente complessi, eccessivamente lunghi o ripetitivi. Non diventano noiosi dopo le visualizzazioni ripetute.

In questo esempio, Windows Search attira temporaneamente l'attenzione sulla corrispondenza delle parole di ricerca, quindi si dissolve.

• Guarda speciale solo se davvero speciale. La frequenza aumenta la necessità di sottigliezza, quindi le interazioni comuni necessitano di animazioni semplici che comunicano un'idea semplice in modo semplice. Riserva animazioni speciali e complesse per esperienze speciali e poco frequenti.

In questo esempio Windows usa un'animazione con attenzione all'avvio per rendere l'esperienza speciale, ma tale animazione sarebbe inappropriata altrove.

Si sa che si è ottenuto il giusto equilibrio quando l'esperienza complessiva sarebbe danneggiata se uno di questi attributi è stato rimosso.

Creazione di un vocabolario di animazione

Le buone animazioni riguardano una comunicazione visiva efficace e la coerenza è fondamentale per la loro efficacia. Se si usa una transizione specifica, ad esempio il push di una scena da destra a destra per passare alla scena successiva, questa deve essere l'unica transizione usata per tale scopo e tale transizione non deve essere usata per altri scopi. L'assegnazione di significati diversi alla stessa animazione danneggia la sua capacità di comunicare. Assegnando animazioni e transizioni specifiche a significati specifici, creerai un vocabolario di animazione.

Questo problema si applica alle animazioni e alle transizioni che hanno un significato, non a quelle generiche che gli utenti non hanno probabilità di assegnare significato a o a quelli il cui scopo è di non essere notabile. Ad esempio, animazioni come dissolvenze e effetti speciali come le dissolvenze non hanno un significato particolare, quindi possono essere usate liberamente.

Un buon vocabolario assegna animazioni che modellano il mondo reale di un oggetto, il comportamento fisico. Se devi assegnare un'animazione a un oggetto o a un'azione che non ha una controparte reale, scegli un'animazione che mostra il comportamento dell'oggetto in realtà.

Anche se il menu Start non è un oggetto reale, il suo effetto al passaggio del mouse si illumina come un oggetto reale potrebbe essere attivato.

Ogni animazione in un vocabolario deve essere chiaramente distinta. Le animazioni devono avere comportamenti simili solo se le azioni associate sono correlate in modo analogo. Ad esempio, le transizioni di spostamento suggeriscono la navigazione, in modo da poter usare transizioni di movimento da diverse direzioni per indicare diversi tipi di navigazione.

Si sa che le animazioni e le transizioni non comunicano bene quando gli utenti trovano i risultati confusi, sorprendenti o imprevisti. In genere, è meglio raggiungere un solo scopo ben oltre a più scopi non così bene.

Idealmente, il vocabolario di animazione dovrebbe essere completo in tutte le aree del programma che ne hanno bisogno. Se solo poche interazioni hanno animazioni naturali, che attirano l'attenzione su quelli che non lo fanno.

Per altre informazioni sul vocabolario di animazione di Windows, vedere la sezione modelli di utilizzo di di questo articolo.

Progettazione della personalità giusta

Mentre il tipo di animazione determina ciò che comunica, il modo specifico in cui viene eseguita l'animazione parla alla personalità del programma e rafforza il proprio marchio.

La personalità del programma deve riflettere la natura delle sue attività e la personalità dei suoi utenti, quindi non è una scelta arbitraria. Piuttosto, una personalità ben progettata dovrebbe sentirsi autentica; non cercare mai di forzarlo. La personalità deve stabilire una connessione emotiva all'utente. Alcuni fattori da considerare:

• attività : serio o divertente; facoltativo o obbligatorio.
• Conseguenze: Grave o Minore.
• costo : gratuito o acquistato; se acquistato, moderatamente costoso o costoso.
• Focus utente: gruppo relativamente ristretto di utenti di destinazione o destinatari generali.
• Ambiente utente: Professional, casual o home.
• Età utente: più giovane o più giovane.
• Frequenza di utilizzo: frequente o poco frequente.

La combinazione di questi fattori aiuta a determinare una personalità appropriata per il programma. Ecco alcune combinazioni adatte per i tipi comuni di programmi:

applicazioni di produttività

Naturalmente, le applicazioni di produttività devono concentrarsi sulla produttività. Anche se alcune esperienze speciali possono distinguersi, la maggior parte delle altre animazioni dovrebbe avere queste caratteristiche:

• Piccolo
• Naturale, realistico
• Sottile, sottomesso
• Veloce, efficiente
• Rilassato

utilità di

Le utilità vengono in genere usate brevemente, quindi l'uso dell'animazione può essere più aggressivo:

• Realistico, illustrativo, autoesplicativo
• Cassaforte
• Affascinante

Entertainment, giochi

Poiché l'obiettivo di questi programmi è coinvolgere e deliziare gli utenti, le animazioni e le transizioni possono essere molto più aggressive avendo queste caratteristiche:

• Grande (possibilmente diventando parte integrante dell'esperienza)
• Artificiale, surreale
• Impatto, vibrante
• Emotivo, giocoso, capriccioso
• Energico

Fare una connessione emotiva è così importante per i programmi di intrattenimento che è accettabile piegare alcune regole se in questo modo aiuta gli utenti a innamorarsi del programma. Ad esempio, è accettabile se un'animazione o una transizione diventa noiosa dopo il centesimo di tempo se la maggior parte degli utenti è improbabile usare il programma che spesso.

In genere, animazioni e transizioni piccole, naturali, subdued, efficienti, ma rilassate sono la scommessa più sicura. Le transizioni con queste caratteristiche in genere prendono il percorso più breve dall'inizio alla fine, iniziano rapidamente, terminano in modo flessibile e non superano i problemi. Inoltre, le transizioni ben progettate sono progettate per funzionare bene nell'intera gamma di distanze in cui verranno usate.

Prestazioni dell'animazione

Quando si progettano animazioni, assicurarsi che non influiscano sulla capacità degli utenti di usare il programma in modo efficiente. In genere, rendere le animazioni abbastanza lente per soddisfare il loro scopo, ma abbastanza veloce che non interferiscono con la velocità di risposta, la domanda troppo attenzione o diventa noioso.

risposta errata:

Anche se questa animazione di rotazione della pagina ha un aspetto coinvolgente e reale, riduce la produttività degli utenti richiedendo più tempo per girare le pagine.

Le transizioni brevi (200 millisecondi o meno) sono un caso speciale (soprattutto quando spesso lavorano fuori da un ritardo) perché gli utenti saranno consapevoli che devono attendere un secondo di divisione per loro. Gli utenti sono disposti ad attendere tali animazioni se:

• L'attesa percepita è estremamente breve (200 millisecondi o meno).
• La transizione rende l'interazione più liscia e naturale.
• La transizione rende l'interazione più reattiva.
• Qualsiasi ritardo consente di mantenere l'utente sotto controllo dell'interazione.

Gli utenti accetteranno un breve ritardo per l'animazione di riordinamento del pulsante della barra delle applicazioni perché è molto breve e rende l'interazione più naturale.

Esistono tre modi in cui le animazioni possono influire negativamente sulle prestazioni: velocità, velocità di risposta e percezione.

Per la velocità, alcune animazioni sono impiallacciature visive rispetto alle attività a elevato utilizzo di CPU, quindi l'ultima cosa da fare è rendere queste attività più lente con animazioni a elevato utilizzo di CPU. Le animazioni a elevato utilizzo di CPU ("animazioni pesanti") tendono a:

• Coinvolgere molti elementi che si spostano in modo indipendente.
• Gioca per una lunga durata o distanza.
• Coinvolgere una grande quantità di spazio sullo schermo.
• Sono matematicamente intensivi.

Animazioni con minore impatto sulle prestazioni:

• Coinvolgere un singolo oggetto.
• Gioca per una breve durata o distanza.
• Coinvolgere una piccola quantità di spazio sullo schermo.
• Non sono a elevato utilizzo matematico.

Per garantire prestazioni ottimali, è consigliabile usare animazioni pesanti solo per le attività che non richiedono un utilizzo elevato della CPU, mentre le animazioni di luce possono essere usate ovunque.

Per la velocità di risposta, la maggior parte delle animazioni e delle transizioni deve essere progettata in modo che gli utenti possano interagire durante l'esecuzione dell'animazione. A meno che un'animazione non faccia parte di un processo, renderla indipendente dall'interazione principale dell'utente e consentire agli utenti di interromperla.

Un'animazione potrebbe non influire negativamente sulle prestazioni di un'attività in realtà, ma gli utenti potrebbero avere la percezione che fa. Ad esempio, non usare un'animazione che appare pesante per un'attività lenta e a elevato utilizzo di CPU anche se non danneggia le prestazioni, perché gli utenti potrebbero concludere che l'animazione è il motivo per cui l'attività è lenta. Se qualcosa sembra lento, si sente lento, quindi è meglio usare animazioni che si sentono semplici, leggere e veloci. L'uso di animazioni con inizi snappy per le attività a elevato utilizzo di CPU aiuta.

rischioso:

Anche se l'animazione nella finestra di dialogo di copia file di Windows non danneggia le prestazioni di copia dei file, rischia di avere utenti che pensano che lo faccia.

anche rischioso:

In questo esempio, l'animazione di avanzamento dell'aspetto lento nella barra degli indirizzi di Esplora risorse di Windows rende alcune attività dolorosamente lente.

Le animazioni e le transizioni non hanno alcun valore se la loro qualità è così scarsa che rendono l'esperienza meno fluida e meno coinvolgente. Per mantenere la loro qualità, le animazioni devono essere progettate per degradare normalmente ogni volta che non sono disponibili risorse di sistema sufficienti. Le animazioni possono peggiorare con variazioni che richiedono meno risorse (ad esempio lunghezze più brevi o frequenze di fotogrammi inferiori) o persino non sono in esecuzione affatto. Indipendentemente dalle risorse disponibili, assicurarsi che le animazioni abbiano una qualità elevata e abbiano un aspetto simile alle animazioni anziché ai bug software.

Infine, se gli utenti credono che le animazioni e le transizioni del programma detraggono dalla produttività, c'è una buona probabilità che alcuni utenti vogliano disattivarli. Per supportare questa capacità, rispettare l'opzione per Disattiva tutte le animazioni non necessarie trovato in Windows Ease of Access Center.

Attirare il giusto livello di attenzione

Anche se solo alcuni tipi di animazioni e transizioni sono appositamente progettati per attirare l'attenzione dell'utente, devono essere progettati per attirare il giusto livello di attenzione per soddisfare bene lo scopo. Quali sono i diversi modi per attirare l'attenzione e come si sceglie quello giusto?

effetti animazione

Diversi effetti di animazione attirano diversi livelli di attenzione. L'elenco seguente riepiloga i metodi più comuni, a partire dal maggior numero di attenzione:

• Rapida lampeggiamento. Richiede attenzione immediata. Può interrompere la concentrazione degli utenti indipendentemente dal punto in cui si verifica il flashing.
• Moderare il flashing. Lo stesso, ma richiede meno attenzione con una frequenza inferiore.
• Rimbalzare. Evidente nella visione periferica e relativamente esigente in natura. È probabile che gli utenti notino, ma possono continuare a concentrarsi altrove solo se la durata è breve.
• Movimento. Evidente nella visione periferica, ma non esigente. Tuttavia, movimenti complessi o 3D attirano più attenzione rispetto ai movimenti semplici o 2D. È probabile che gli utenti notino, ma possono continuare a concentrarsi altrove.
• Pulsazione moderata. Evidente ma non distratto nella visione periferica. Gli utenti possono continuare a concentrarsi altrove. Può pulsare luminosità, colori e dimensioni.
• Pulsing lento/alone. Evidente ma sottile. Attira più attenzione di un effetto statico, ma gli utenti potrebbero non notare l'animazione a meno che non siano già alla ricerca.
• Sbiadire. Ancora meno evidente. Attira più attenzione di un effetto statico, ma gli utenti potrebbero non notare l'animazione a meno che non siano già alla ricerca.
• Evidenziazione/scintilla statica. Evidente se gli utenti scelgono di guardare, ma non richiede attenzione se è altrove.
• Ambiente/naturale. Intenzionalmente non evidente avendo un aspetto naturale e reale.

Per determinare l'approccio corretto per il programma o la funzionalità, valutare la correlazione tra questi fattori e gli scenari della funzionalità.

Si supponga, ad esempio, di progettare un programma di messaggi istantanei e che qualcuno abbia appena inviato all'utente un messaggio. Questo scenario richiede l'attenzione dell'utente, deve essere evidente ovunque e in genere l'utente vuole rispondere rapidamente. Questo scenario suggerisce che un'animazione flash moderata sarebbe una buona scelta. Si supponga invece di voler informare gli utenti del completamento di un processo di stampa. Gli utenti devono essere in grado di continuare a concentrarsi e lavorare in modo produttivo altrove ed è accettabile se gli utenti non si accorgono. Questo scenario suggerisce che la moderata a lenta pulsazione o l'alone sarebbe una buona scelta.

durata

La durata appropriata per un'animazione di recupero dell'attenzione dipende dallo scenario e dal tipo specifico di animazione usata. Maggiore è l'attenzione richiesta da un effetto di animazione, più breve dovrebbe essere la durata. Mentre effetti molto sottili che richiedono poca attenzione (come pulsing lento) possono essere riprodotti indefinito, l'attenzione effetti impegnativi dovrebbero essere riprodotti solo tra 1 e 3 secondi. Qualsiasi rischio più lungo rende l'animazione travolgente e fastidiosa.

In Windows 7 la barra delle applicazioni lampeggia solo per un secondo. Qualsiasi più sarebbe fastidioso.

decadimento dell'effetto

È consigliabile progettare animazioni con attenzione in base al presupposto che se gli utenti non rispondono subito, è perché sono impegnati a fare qualcos'altro e non vogliono essere interrotti. Quindi, il tuo obiettivo dovrebbe essere quello di attirare l'attenzione senza richiederlo.

Per ottenere il giusto equilibrio di attirare l'attenzione senza richiederlo, decadire l'intensità di un effetto nel tempo. Ad esempio, per attirare l'attenzione è possibile rendere l'effetto inizialmente forte, ma poi rallentare rapidamente l'effetto. In questo modo, la potenza attraente è principalmente determinata dall'effetto iniziale, ma l'impressione complessiva dell'utente è determinata principalmente dalla sua finitura.

In Windows 7, l'effetto flash della barra delle applicazioni rallenta alla fine.

Che ne dici di PowerPoint?

Le transizioni di Microsoft PowerPoint spesso violano intenzionalmente queste linee guida perché sono progettate per attirare l'attenzione sulle transizioni di diapositive e richiedono agli utenti di attendere loro. Inoltre, non hanno alcun significato particolare, quindi non comunicano nulla oltre al fatto che una diapositiva sta cambiando.

Le transizioni di tipo PowerPoint, se usate correttamente, hanno questi scopi:

• Interrompono presentazioni lunghe in blocchi più piccoli forzando il relatore a sospendere.
• Attirano l'attenzione del pubblico verso i cambiamenti nella presentazione, aiutando le persone a concentrarsi se le loro menti si sono chieste.
• Danno alla presentazione un ritmo in modo che non si senta monotono o travolgente.
• Il loro stile riflette la personalità del relatore o del materiale.

Anche se questi sono obiettivi importanti per una presentazione, tali transizioni potrebbero attirare l'attenzione inutile nell'interfaccia utente della maggior parte dei tipi di programmi, e sarebbe diventato noioso rapidamente.

Linea finale: Non usare transizioni di tipo PowerPoint come modello per il programma.

Se fai solo sei cose...

1. Usa animazioni e transizioni per semplificare la comprensione del programma e sentirti più fluida e più coinvolgente. Dovrebbero avere uno scopo chiaro. Non usare le animazioni solo perché puoi o per attirare l'attenzione non necessaria al tuo programma.
2. Definire un vocabolario di animazione e usarlo in modo coerente in tutto il programma. Usare il vocabolario di animazione di Windows 7 quando appropriato.
3. Usa le caratteristiche delle tue animazioni per dare alla tua personalità del programma e rafforzare il suo marchio.
4. Rendere la maggior parte delle animazioni semplici, brevi e sottili. Tenere presente che le animazioni non devono richiedere attenzione per avere successo. Se un'animazione è appropriata e naturale, gli utenti noteranno solo la sua assenza.
5. Rendere le animazioni veloci e reattive e dare loro una sensazione leggera. Indipendentemente dal modo in cui le animazioni sono coinvolgenti, nessuno vuole sentirsi come se li aspettassero. Progettare animazioni più pesanti per avere una normale riduzione delle prestazioni.
6. Progettare per l'esecuzione prolungata. Se un'animazione è fastidiosa, distraente o noiosa, riprogettarla o rimuoverla.

Modelli di utilizzo

Le animazioni hanno diversi modelli di utilizzo:

Uso	Descrizione
feedback al passaggio del mouse per mostrare dove si trova il punto di interazione.	Indica che il punto di interazione è attivo. il passaggio del mouse può essere visualizzato anche tramite un effetto statico. vocabolario di Windows: effetto di visualizzazione del passaggio del mouse (rettangolo di delimitazione, evidenziazione, ingrandimento) con effetto dissolvenza in/dissolvenza per uniformità. Nel lettore multimediale digitale Zune, l'album illustra l'evidenziazione e aggiunge i controlli di riproduzione al passaggio del mouse.
Fare clic su commenti e suggerimenti per mostrare che un oggetto selezionabile è reattivo e ha ricevuto un clic.	Indica che è stato fatto clic su un oggetto . vocabolario di Windows: sfondo dell'oggetto flash sull'evento click-down. per mostrare il contatto tocco, utilizzare un effetto increspature. Il tocco visualizza un'animazione a increspature in modo che l'utente sappia che l'interazione è stata riconosciuta.
feedback di selezione per mostrare che un oggetto è selezionato.	Indica che è selezionato un oggetto . la selezione può essere visualizzata anche tramite un effetto statico. vocabolario di windows: disegnare un rettangolo di selezione con effetto dissolvenza in/dissolvenza per uniformità. In Zune l'album copre il lampeggiamento su clic e quindi ottiene un rettangolo di selezione sulla selezione.
feedback sullo stato di avanzamento per indicare che viene eseguita un'attività.	Il feedback sullo stato di avanzamento indica che un'attività sta effettuando progressi, in genere con indicatori di attività, barre di stato o animazioni che illustrano l'attività. il feedback dello stato di avanzamento determinato mostra approssimativamente la quantità di attività eseguita e quanto rimane, mentre lo stato di avanzamento indeterminato indica solo che l'attività è in corso. vocabolario di Windows: indicatori di attività rotanti, barre di stato, sfondi di stato, animazioni di illustrazione. In questo esempio, Windows Live Messenger visualizza il feedback indeterminato sullo stato di avanzamento durante l'accesso.
attractor per mostrare che qualcosa richiede l'attenzione dell'utente.	Attirare il giusto livello di attenzione quando vengono creati oggetti significativi o richiedono attenzione (spesso a causa del cambiamento) o eventi importanti o urgenti si verificano. vedere attirare il giusto livello di attenzione per le tecniche di progettazione. vocabolario windows: lampeggiante, movimento, pulsante, splendente, scintillante. La barra degli strumenti di Windows Live si anima al primo aspetto per renderla evidente dove si trova.
Relazione per visualizzare la relazione tra oggetti o causalità negli effetti.	Mostra relazioni, soprattutto quando la relazione potrebbe non essere compresa o prevista, in modo che non distragga o confonda. vocabolario windows: morphing, trasporto, cambiamento fisico come capovolgimento, crescita da una fonte punto, compattazione a una destinazione punto. In questo esempio, l'animazione mostra la relazione tra l'impostazione gamma e il relativo effetto sullo schermo.
Illustrazione/Anteprima per spiegare visivamente un concetto, un'attività o l'effetto di un comando.	Un'animazione o un video che spiega un concetto o come funziona visivamente, per integrare o sostituire una spiegazione testuale. in questo modo gli utenti possono eseguire attività o scegliere comandi in modo efficiente e sicuro. In questo esempio, i comandi "show me" del pannello di input del Tablet PC usano illustrazioni per mostrare come correggere, eliminare, dividere e unire.

Le transizioni hanno diversi modelli di utilizzo:

Uso	Descrizione
aumento/compattazione/visualizzazione per modificare le dimensioni o lo stato di un oggetto in modo uniforme.	L'oggetto cambia tra gli stati, possibilmente durante lo spostamento. la transizione mantiene gli utenti orientati durante le modifiche. vocabolario di Windows: morph, modificare le dimensioni, le diapositive dell'oggetto in o fuori. In questo esempio, il Gadget meteo si trasforma dal suo stato conciso per visualizzare la relativa finestra di dialogo Opzioni.
visualizzazione/nascondi/modifica contenuto per mostrare, nascondere o modificare il contenuto senza problemi, in genere per la divulgazione progressiva.	Rimodellare l'interno della finestra per visualizzare più, meno o contenuto diverso. la transizione mantiene gli utenti orientati durante le modifiche. vocabolario di Windows: diapositive del riquadro in o in uscita. finestre a comparsa dissolvenza in entrata e in uscita. contenuto diverso dissolve o rotola. Il calcolatore di Windows ha una transizione uniforme tra le modalità di visualizzazione.
Mostra/Nascondi per mostrare o nascondere senza problemi i controlli o gli inviti al passaggio del mouse per semplificare l'aspetto visivo normale.	Visualizza i controlli quando gli utenti passano il puntatore su un'area dei comandi o visualizzano inviti quando gli utenti passano il puntatore su un controllo. passando il puntatore su queste aree indica che l'utente intende interagire. gli inviti possono nascondere se il puntatore diventa stazionario. In questo esempio, i controlli di Windows Media Player si dissolveno al passaggio del mouse quando sono in modalità schermo intero.
transizioni scena per rendere una transizione della scena senza problemi e senza problemi per evitare l'attenzione.	Le modifiche improvvise della scena possono essere insodsparibili, soprattutto per le aree dello schermo di grandi dimensioni, quindi usare le transizioni di scena per creare uniformità e continuità e per fornire contesto. le transizioni di scena sono progettate per essere naturali e low key, per evitare di richiamare attenzione al processo di transizione stesso. vocabolario di Windows: dissolvenza in/uscita; dissolvenza incrociata; scorrevole in/left, out/right, up, down; spinge e copre. In questo esempio, lo sfondo desktop di Windows si dissolve delicatamente tra le immagini per rendere la transizione liscia e controllata.
transizioni di scena speciali per attirare l'attenzione su una modifica della scena per renderla speciale o riorientare l'attenzione dell'utente.	Anche se la maggior parte delle transizioni di scena non deve richiamare attenzione al processo di transizione, alcuni sono progettati per interrompere il flusso e attirare l'attenzione per sottolineare che qualcosa di diverso sta per accadere. per attirare l'attenzione, le transizioni speciali della scena sono progettate per essere innaturali e avere un impatto visivo elevato. In questo esempio PowerPoint usa transizioni di attenzione per attirare il pubblico nella modifica.
manipolazioni dirette per mostrare l'effetto delle manipolazioni dirette ,ad esempio spostamento, scorrimento/panoramica, rotazione e zoom.	La transizione mostra l'effetto della manipolazione in tempo reale. l'effetto dovrebbe sentirsi liscio, continuo e coerente con il mondo reale. lo spostamento e la rotazione potrebbero non essere continui in alcune posizioni per indicare restrizioni o probabilmente scelte preferite. l'ingrandimento rende il contenuto più grande o più piccolo, modificando il livello di dettaglio di conseguenza. In questo esempio Magnifier esegue lo zoom uniforme tra i livelli.
manipolazioni dirette non corrette per indicare che è stata tentata una manipolazione diretta, ad esempio lo spostamento, lo scorrimento/panoramica, ma non è stato possibile eseguire questa operazione.	La transizione mostra il tentativo di manipolazione, ma ripristina lo stato originale. spesso l'effetto sembra che la manipolazione non possa essere eseguita a causa di alcune restrizioni fisiche reali. queste animazioni vengono usate invece di messaggi di errore basati su testo, che interromperebbero la sensazione reale della manipolazione. vocabolario di Windows: rimbalzo In questo esempio il documento rimbalza per indicare che l'utente ha raggiunto la fine.
ordina, filtra, riordina le transizioni per indicare che la presentazione o il contenuto di una raccolta di elementi è stato modificato.	La transizione mostra (o per modifiche complesse, suggerisce) l'effetto della modifica. rimossi in questo esempio la ricerca visiva Bing usa una transizione di filtro. In questo esempio Windows Media Center usa una transizione di riordinamento come esperienza speciale durante la riproduzione di un brano.
transizioni di prestazioni per rendere più veloce un'azione.	Sebbene qualsiasi transizione abbia il potenziale di rendere più veloce un'azione, lo scopo principale di queste transizioni è quello di migliorare la percezione delle prestazioni e della velocità di risposta. una buona tecnica consiste nel mostrare l'attività eseguita in passaggi intenzionali. al contrario, ritardare l'azione, eseguire il rendering dei risultati in modo afazard o usare un indicatore di attività si sente lento. vocabolario di Windows: eseguire un'azione in fasi, con transizioni uniformi tra le fasi. In questo esempio, un jump list della barra delle applicazioni visualizza immediatamente gli elementi standard e quindi scorre per visualizzare le destinazioni una volta che l'elenco è pronto. In questo modo si maschera il tempo necessario per compilare l'elenco. Al contrario, il ritardo della visualizzazione iniziale non risponde e la visualizzazione di un elenco incompleto o un feedback sullo stato risulterebbe molto più lento.
esperienze speciali per coinvolgere e deliziare gli utenti durante poco tempo, esperienze speciali importanti per il programma e avere l'attenzione completa dell'utente.	Sebbene qualsiasi transizione abbia il potenziale di essere un'esperienza speciale, queste transizioni sono meglio riservate per le esperienze poco frequenti che sono veramente speciali per il programma. le transizioni personalizzate vengono usate per dare un'impressione speciale. personalizzazione e personalità sono spesso elementi di design importanti. a differenza di altri modelli, esperienze speciali possono richiedere attenzione, essere pesanti e richiedere agli utenti di aspettare un momento. di conseguenza, queste transizioni si consumano rapidamente se sovrautilate perché l'esperienza non è più speciale. In questo esempio Windows Media Center visualizza un'animazione durante il caricamento per coinvolgere immediatamente gli utenti.

Istruzioni

Comunicazione efficace

• Definire e usare un vocabolario di animazione per garantire che le animazioni e le transizioni abbiano un significato coerente e usarlo in modo coerente in tutto il programma. La maggior parte dei vocabolari deve includere voci per l'aspetto e la scomparsa di oggetti e scena, navigazione, interazione di base (passaggio del mouse, selezione, clic), manipolazione e interazione degli oggetti (spostamento, rilascio, ridimensionamento, scorrimento, panoramica, zoom, rotazione, filtro) e attirare l'attenzione. Il significato coerente è fondamentale per una comunicazione efficace.

• Ogni volta che è pratico, usa il vocabolario di animazione di Windows. Anche se il programma può avere un pubblico diverso e diverse esigenze, spesso i vantaggi della coerenza e della familiarità superano i vantaggi di essere diversi. Se il vocabolario del programma deve essere diverso, usa gli stessi tipi di animazione di base di Windows, ma assegna loro la personalità giusta per il tuo programma.

• Non assegnare significati specifici alle animazioni generiche e alle transizioni in un vocabolario di animazione. Transizioni generiche come dissolvenze e effetti speciali come le dissolvenze non hanno alcun significato particolare (oltre apparire o scomparire), in modo che possano essere usati liberamente.

  risposta errata:

  

  In questo esempio, una dissolvenza incrociata viene usata in modo non corretto per passare all'elemento successivo. Poiché le dissolvenze incrociate non hanno un significato particolare, questa transizione non fornisce contesto.

• Rendere chiaramente distinte le voci del vocabolario. Le azioni correlate possono avere effetti simili (ad esempio, lo zoom avanti e lo zoom indietro dovrebbero avere transizioni inverse), ma le azioni non correlate dovrebbero avere effetti chiaramente distinti (ad esempio, lo zoom non deve mai essere confuso con la rotazione).

• Mantenere gli effetti reali realistici e coerenti. Se usi animazioni e transizioni realistiche, mantieni l'esperienza coerente con il mondo reale. Gli utenti non devono mai essere sorpresi, confusi o ingannati dai risultati. E per coerenza, non mescolare metafore.

• Assegnare animazioni inverse alle azioni. In questo modo si soddisfano le aspettative degli utenti e si semplifica il vocabolario. Ad esempio, se un riquadro viene visualizzato tramite scorrimento, rimuoverlo scorrendo non con un altro effetto.

• Rendere comprensibili le animazioni. Gli utenti devono essere in grado di comprendere rapidamente lo scopo di un'animazione. È possibile rendere un'animazione troppo piccola, troppo breve (meno di 50 millisecondi) o così sottile che gli utenti non siano in grado di comprendere il loro scopo. In questi casi, riprogettazione per rendere chiaro il significato o rimuovere.

  risposta errata:

  

  In questo esempio, l'effetto è così piccolo e sottile che pochi utenti possono comprendere il suo scopo. Meglio riprogettare o rimuovere.

Modelli

feedback al passaggio del mouse

• Per apparire reattivo, cercare di riprodurre l'animazione entro 50 millisecondi dall'ingresso o dall'uscita dallo stato del passaggio del mouse.
• Per apparire veloce, rendere la durata delle animazioni al passaggio del mouse inferiore a 50 millisecondi.
• Usa un effetto dissolvenza in uscita dal passaggio del mouse. In questo modo gli effetti del passaggio del mouse sono chiaramente distinti dal feedback di clic e selezione.

Fare clic su commenti e suggerimenti

• Per apparire reattivo, cercare di riprodurre l'animazione entro 50 millisecondi dall'evento click-down. Fare clic su eventi non sono necessari commenti e suggerimenti.
• Per apparire veloce, rendere la durata delle animazioni clic inferiore a 50 millisecondi.
• Usa un flash di sfondo o un effetto lampeggia. In questo modo gli effetti di clic sono chiaramente distinti dal passaggio del mouse e dal feedback di selezione. Poiché facendo clic è necessario passare il puntatore del mouse, fare clic sul feedback senza problemi per il passaggio del mouse.

feedback di selezione

• Per apparire reattivo, cercare di riprodurre l'animazione entro 50 millisecondi di selezione o deselezionazione.
• Per apparire veloce, rendere la durata delle animazioni di selezione inferiore a 50 millisecondi.
• Usa un effetto di dissolvenza in dissolvenza/dissolvenza del rettangolo di selezione. In questo modo la selezione è chiaramente distinta dal passaggio del mouse e dal feedback dei clic.

feedback sullo stato di avanzamento

• Usare un indicatore di attività quando un'azione non può essere eseguita entro un secondo. In questo modo viene indicato che il comando è stato ricevuto.
• Usare un indicatore di stato quando un'attività richiederà più di cinque secondi. Per altre linee guida, vedere indicatore di stato.
• Usa animazioni di feedback sullo stato di avanzamento che consentono agli utenti di visualizzare l'effetto delle attività a esecuzione prolungata. Evitare animazioni di feedback sullo stato non necessarie se un'animazione non comunica nulla di utile, usare invece un indicatore di stato.
• Hanno stati di completamento e di errore chiaramente identificabili. Gli utenti devono essere in grado di determinare rapidamente questi stati finali.
• Interrompere la visualizzazione dello stato di avanzamento quando l'attività sottostante non sta effettuando progressi. Gli utenti devono essere in grado di determinare se lo stato di avanzamento non viene eseguito e reagire di conseguenza.

attrattori

• Utilizzare gli attrattori con moderazione. A meno che le informazioni non siano urgenti, critiche o altrimenti che influiscano sul comportamento immediato dell'utente, in genere è preferibile modificare lo stato inconspiabilmente e consentire agli utenti di individuare autonomamente la modifica. Risolvere le distrazioni, non individuabilità.

  

  In questo esempio, l'icona dell'area di notifica della rete wireless usa un'animazione per problemi critici, ma consente agli utenti di individuare i segnali deboli autonomamente.

• Scegli un'animazione che attira il livello di attenzione corretto. Le animazioni di attrazione dovrebbero attirare abbastanza attenzione a se stessi per soddisfare il loro scopo, ma non più. Se l'utente deve agire immediatamente, scegliere un effetto che richiede attenzione indipendentemente dal punto in cui l'utente sta cercando. Per altre situazioni, fare riferimento al attirare il giusto livello di attenzione sezione per ottenere la giusta combinazione di attenzione, notabilità e urgenza.

  risposta errata:

  

  Gli assistenti di Microsoft Office hanno attirato l'attenzione non necessaria a se stessi.

• Se l'utente non risponde, non ripetere l'animazione o usare animazioni continue. Si supponga invece che l'utente abbia scelto di non agire ora, ma potrebbe agire in un secondo momento. Le animazioni continue rendono difficile per gli utenti concentrarsi su qualsiasi altra cosa.

animazioni di relazione

• Usare le animazioni delle relazioni per mostrare da dove provengono gli oggetti o dove sono stati.
• Le animazioni di relazione devono iniziare o terminare con l'oggetto selezionato. Non mostrare relazioni tra oggetti con cui l'utente non interagisce attualmente. Se gli utenti notano affatto, ciò che noteranno è la distrazione.

illustrazioni/anteprime

• Usare le anteprime per visualizzare l'effetto di un comando senza che gli utenti lo eseguano prima. Usando le anteprime utili, è possibile migliorare l'efficienza e la facilità di apprendimento del programma e ridurre la necessità di versioni di valutazione ed errori.
• Usare illustrazioni e anteprime che hanno un'interpretazione chiara. Hanno poco valore se confondono.
• Riprodurre una sola illustrazione alla volta per evitare di sovraccaricare gli utenti. Se sono possibili più illustrazioni simultanee, usare il passaggio del mouse o un pulsante di riproduzione per consentire agli utenti di indicare il proprio interesse.
• Riprodurre automaticamente un'illustrazione se è lo scopo principale della finestra o della pagina. In caso contrario, se è facoltativo, consentire agli utenti di riprodurlo quando sono pronti.
• Riprodurre animazioni alla velocità ottimale: non così veloce da comprendere, ma non così lento da guardare.

di aumento/compattazione degli oggetti

• Non ritaglia il contenuto durante un ridimensionamento. Espandere i contenitori prima di aggiungere contenuto. Rimuovere il contenuto prima di ridurre i contenitori.

  risposta errata:

  

  In questo esempio il contenuto viene ritagliato durante un ridimensionamento.

visualizzazione/nascondi/modifica contenuto

• Visualizzare informazioni importanti in modo statico. Gli utenti non devono accedere a informazioni importanti attraverso la divulgazione progressiva.

Mostra/Nascondi

• Visualizza controlli importanti quando l'utente posiziona il puntatore ovunque all'interno della finestra o del riquadro oppure, se a schermo intero, sullo spostamento del mouse. Gli utenti non devono cercare questi controlli, quindi rendono certa la loro individuazione.

  

  In questo esempio Windows Media Center visualizza i relativi controlli ogni volta che il puntatore si trova sulla finestra.

• Visualizzare controlli secondari o inviti di controllo quando l'utente posiziona il puntatore nei comandi o nelle vicinanze. Per facilitare l'individuazione, rendere la posizione ovvia e la destinazione di grandi dimensioni.

  

  In questo esempio, Windows Live Messenger visualizza un comando secondario quando il puntatore si trova vicino all'angolo superiore destro.

transizioni scena

• Rendere coerenti le transizioni della scena fisica con il mapping naturale. Le persone leggono da sinistra a destra nelle impostazioni cultura occidentali e i diagrammi gerarchici passano dall'alto verso il basso. Di conseguenza, l'avanzamento nel tempo è indicato dal movimento da sinistra a destra. Le transizioni di scena fisica seguenti hanno un mapping naturale:

  Transizione	Significato
  Da sinistra	Tornare indietro nel flusso di attività
  Da destra	Spostarsi avanti nel flusso di attività
  Dall'alto	Spostare verso l'alto la gerarchia delle attività
  Dal basso	Spostare verso il basso la gerarchia delle attività

• Se il programma riproduce audio, le transizioni della scena di progettazione e le transizioni audio. Ad esempio, se una scena si dissolve gradualmente, qualsiasi suono dovrebbe dissolversi gradualmente. Non rovinare le transizioni visive senza problemi con transizioni sonore improvvise. Per altre linee guida audio, vedere Sound.

manipolazioni dirette

• Quando si usano movimenti fisici nell'interazione (ad esempio la creazione di pacchetti), progettare l'animazione per sentirsi come una risposta naturale al movimento. Collegare la causa di interazione con l'effetto di transizione. Dare le caratteristiche fisiche reali dell'animazione, ad esempio accelerazione, decelerazione, slancio, resistenza, peso, rimbalzo e rotazione.
• Per mantenere una sensazione diretta, mantenere i punti di contatto di un oggetto sotto il puntatore senza problemi durante l'interazione. Qualsiasi ritardo, risposta tritata o perdita di contatto distrugge la percezione della manipolazione diretta. Gli oggetti non devono mai scomparire durante la manipolazione.

transizioni di ordinamento, filtro o riordinamento

• Per modifiche semplici, visualizzare l'intera transizione. Gli utenti potranno seguire facilmente l'intera transizione. Le modifiche semplici comportano quattro elementi o meno.
• Per i cambiamenti complessi, enfatizzare la fine del movimento mentre rallenta e lasciare che l'occhio riempia il resto. In questo modo il movimento si sente molto più reattivo e ordinato.

transizioni di prestazioni

• Prendere in considerazione l'esecuzione di transizioni lente in due o tre fasi per renderle più veloci e immediatamente interattive. Utilizzare l'ordine di composizione seguente quando appropriato:
  • Cornice esterna
  • Sfondo
  • Contenuto iniziale (se necessario usando una rappresentazione temporanea)
  • Controlli primari (in modo che gli utenti possano interagire immediatamente)
  • Controlli secondari e tutti gli elementi rimanenti dell'interfaccia utente
  • Contenuto finale (se è stata usata una rappresentazione temporanea) Usare transizioni come dissolvenze e diapositive per rendere la composizione uniforme, ordinata e perfezionata.

Quando si scorre nella visualizzazione "Bird's eye", Le mappe Bing visualizzano uno sfondo temporaneo della griglia. In questo modo gli utenti possono continuare a scorrere immediatamente, prima che venga eseguito il rendering del contenuto finale.

animazioni speciali

• Riconsiderare le schermate iniziali animate (nonché le schermate iniziali statiche). Spesso le schermate iniziali attirano semplicemente l'attenzione sul tempo necessario per caricare un programma e consumano rapidamente il loro benvenuto. Sebbene le schermate iniziali siano accettabili se vengono visualizzate solo quando l'interazione dell'utente non è possibile, ogni volta che è pratica un'alternativa migliore consiste nel progettare il programma in modo che gli utenti possano interagire immediatamente, anche mentre è ancora in fase di caricamento.
• Specificare un comando Skip Introduction se una schermata iniziale animata richiede più di tre secondi. Se si fa clic in un punto qualsiasi della schermata iniziale, è consigliabile ignorarlo. In alternativa, usare una versione breve dell'animazione dopo un periodo iniziale.

Prestazione

• Non fare in modo che gli utenti attendino le animazioni e le transizioni del programma. Usa brevi animazioni e transizioni (meno di 200 millisecondi) quando pratico. Usa animazioni più veloci (100 millisecondi) per operazioni più frequenti. Progettare animazioni più lunghe (più di un secondo in genere il feedback dello stato, l'illustrazione e i modelli di esperienza speciali) in modo che gli utenti possano continuare a lavorare durante l'esecuzione.

• Progettare animazioni a esecuzione prolungata per rendere chiaro agli utenti che possono interagire durante l'esecuzione dell'animazione. Gli utenti non tenterà di continuare a lavorare se gli indizi visivi suggeriscono che non possono.

  

  In questo esempio di Windows Internet Explorer, la barra di stato a chiave bassa nella barra di stato suggerisce che gli utenti non devono attendere il completamento prima di poter interagire.

• Usa animazioni leggere per le attività a elevato utilizzo di CPU. In questo modo si ottiene la potenza di elaborazione completa per l'attività. Inoltre, gli utenti non percepiscono che l'animazione leggera è il motivo per cui l'attività è a elevato utilizzo di CPU.

• Non visualizzare un indicatore di attività durante un'animazione o una transizione. In questo modo distrugge l'effetto. Progettare animazioni e transizioni in modo che siano in grado di iniziare subito.

• Progettare animazioni per degradare normalmente ogni volta che sono presenti risorse di sistema insufficienti. Le animazioni possono peggiorare con variazioni che richiedono meno risorse (ad esempio lunghezze più brevi o frequenze di fotogrammi inferiori) o persino non sono in esecuzione affatto. Indipendentemente dalle risorse disponibili, assicurarsi che le animazioni abbiano una qualità elevata e abbiano un aspetto simile alle animazioni anziché ai bug software.

  risposta errata:

  

  In questo esempio viene usata la transizione di ripristino della finestra anche se non sono disponibili risorse di sistema sufficienti per riprodurla correttamente. Di conseguenza, il frame bloccato sembra essere un bug. Se le risorse non sono disponibili, è preferibile visualizzare solo la finestra senza una transizione.

Caratteristiche dell'animazione

Le animazioni e le transizioni ben progettate hanno in genere queste caratteristiche:

• Breve durata. La maggior parte delle animazioni deve essere compresa tra 100 e 300 millisecondi, preferibilmente 1/6 secondo (167 millisecondi) o 1/4 secondi (250 millisecondi). (Esperienze speciali e feedback sullo stato di avanzamento possono essere più lunghi). Usa tempi di animazione più veloci per operazioni più frequenti. In genere, le animazioni più lunghe richiedono più tempo per il completamento, richiedono più tempo per comprendere e sentirsi lenti.

• Reattività. Le animazioni devono iniziare entro 50 millisecondi dall'evento di avvio o dall'azione dell'utente. I tempi di inizio più lunghi non rispondono.

• Accelerazione/decelerazione. Per apparire naturale, la maggior parte degli effetti di animazione deve accelerare quando si avvia e si decelera quando si arresta. Per avere un aspetto reattivo, progettare animazioni con avvio rapido. Per apparire controllate, progettare animazioni per avere atterraggi soft alla fine. Anche se questo vale per gli effetti di movimento, si applica anche a qualsiasi effetto che suggerisce il movimento, ad esempio zoom e persino dissolvenze.

  

  La maggior parte delle animazioni dovrebbe avere avvio rapido e terminazioni soft per avere un aspetto reattivo, ma controllato.

• Movimento. Le animazioni che ritraggono il movimento in particolare devono accelerare e decelerare, quindi non usare il movimento lineare a meno che la durata dell'animazione non sia molto breve. I movimenti dovrebbero prendere il percorso dei brevi dall'inizio alla fine, senza superare i problemi. Il percorso di movimento completo non è sempre obbligatorio. Quando appropriato, enfatizzare la fine del movimento mentre rallenta e lasciare che l'occhio riempia il resto. In questo modo il movimento si sente molto più reattivo e ordinato. Quando si anima il movimento di più oggetti contemporaneamente, dare loro percorsi leggermente diversi con tempi leggermente diversi per sentirsi più naturali.

• Frequenza dei fotogrammi. La maggior parte delle animazioni deve usare una frequenza di fotogrammi di 20 fotogrammi al secondo. Se l'animazione è per un'esperienza speciale o è correlata allo scopo principale del programma, prendere in considerazione l'uso di una frequenza superiore di 24 30 fotogrammi al secondo per migliorare la fluidità e il realismo.

• Scala. Progettare animazioni per funzionare bene nell'intera gamma di utilizzi previsti. Ad esempio, le transizioni di pagina devono essere progettate per funzionare per tutte le dimensioni della pagina.

• Personalità. Progetta animazioni per sentirsi naturali, subduzioni ed efficienti piuttosto che artificiali, stravaganti o lente.

Testo animato

• Anche se è possibile visualizzare testo usando una transizione, non animare continuamente il testo. il testo animato è spesso distratto e più difficile da leggere rispetto al testo statico. eccezioni :
  • Puoi animare il testo in situazioni in cui è tradizionalmente animato e fornisci un'alternativa accessibile.
  • È possibile animare il testo se lo scopo del testo è principalmente decorativo.

In questo esempio Zune anima il testo, ma il suo scopo è principalmente decorativo. Non esiste un problema se gli utenti non leggono attentamente il testo.

Riduzione del consumo di energia

• Progettare le animazioni per ridurre il consumo di energia. Se progettate correttamente, le animazioni non dovrebbero aumentare significativamente il consumo di energia. Per ridurre il consumo di energia:
  • Arresta l'animazione quando la visualizzazione è disattivata. Lo schermo può essere spento allo scopo di risparmiare energia.
  • Non usare animazioni a esecuzione prolungata che non sono avviate dall'utente. Le animazioni che usano timer periodici ad alta risoluzione riducono l'efficienza del risparmio energia del processore. Assicurarsi inoltre di disabilitare tutti i timer periodici ad alta risoluzione al termine delle animazioni.
  • Sospendi tutte le animazioni quando il sistema diventa inattiva. Il periodo di inattività dell'utente per diventare inattivo è determinato da Opzioni di risparmio energia nel Pannello di controllo.

Accessibilità

• Non usare l'animazione come unico modo per trasmettere informazioni essenziali. Le animazioni devono comunicare informazioni utili ma non critiche, perché non sono accessibili agli utenti con problemi visivi.

• Assicurarsi che le informazioni equivalenti siano disponibili tramite altri mezzi, ad esempio:

  • Per ispezione. Gli utenti possono determinare informazioni equivalenti esaminando lo schermo o gli oggetti coinvolti nell'animazione.
  • Con un'interazione semplice. Gli utenti possono determinare informazioni equivalenti passando il puntatore del mouse, facendo clic o facendo doppio clic.

  

  La home page di Bing ha un'animazione iniziale che rivela diversi punti caldi. Gli utenti possono anche visualizzare i punti caldi spostando il cursore vicino.

  Si noti che "informazioni equivalenti" non significa informazioni identiche. Le informazioni potrebbero essere in un formato diverso o richiedere una deduzione semplice.

• Se appropriato, impostare lo stato attivo sull'input sull'oggetto modificato durante una transizione. In questo modo, le tecnologie di assistive technology possono rilevare la posizione in cui si è verificata la modifica. Ma non modificare lo stato attivo dell'input quando l'utente usa la tastiera.

• Non usare animazioni o transizioni che lampeggiano o ridimensionano rapidamente gli oggetti. Lampeggiamento e cambiamenti rapidi dello schermo possono causare problemi per le persone con problemi di crisi e altri disturbi neurologici.

• Consenti agli utenti di disattivare le animazioni e le transizioni del programma. Per supportare questa capacità, rispettare l'opzione Disattiva tutte le animazioni non necessarie nel Centro accessibilità in Windows.

  Developers: È possibile determinare se le animazioni sono abilitate usando l'API SystemParametersInfo.

• Attività di progettazione presupponendo che gli utenti disattivano le animazioni del programma. Assicurarsi che questa operazione non interrompa significativamente il flusso di attività.

Per altre linee guida sull'accessibilità, vedere Accessibility.

Documentazione

• Evitare di fare riferimento alle animazioni quando possibile. In alternativa, fare riferimento all'oggetto animato e, se necessario, al tipo di animazione.
• Non fare riferimento alle transizioni, tranne nella documentazione tecnica. In alternativa, fare riferimento all'oggetto nello stato finale o iniziale.
• Se l'utente avvia in modo esplicito un'animazione, usa la riproduzione del verbo; in caso contrario, usare il verbo per la documentazione tecnica.

Esempi:

• Si sa che un elemento ha bisogno di attenzione quando l'icona inizia a rimbalzare.
• In primo luogo, selezionare le foto che si desidera stampare (si noti che le foto sono ingrandite al momento della selezione).
• Usare una transizione a dissolvenza incrociata per modificare facilmente lo stato di un oggetto.