Raccomandazioni per ottimizzare la percezione e l'estetica dell'utente
Si applica a questa raccomandazione della checklist di ottimizzazione dell'esperienza ben progettata: Power Platform
| X0:07 | Applica i principi della progettazione classica a elementi visivi come combinazioni di colori, tipografia e layout. Cerca di creare una gerarchia visiva mirata, equilibrata e intuitiva che guidi l'attenzione degli utenti verso elementi e azioni importanti. |
|---|
Questa guida descrive le raccomandazioni per modelli di progettazione visiva universali che influenzano la percezione dell'utente, che possono influenzare in modo significativo la soddisfazione e l'adozione di un'applicazione. Gli elementi visivi fungono da elementi fondamentali utilizzati per creare esperienze. L'applicazione di principi visivi in linea con il modo in cui gli esseri umani percepiscono ed elaborano naturalmente le informazioni fornisce metodi strutturati per aiutare a selezionare e organizzare gli elementi visivi per creare un'applicazione efficace e accattivante.
Strategie di progettazione chiave
Ricerche approfondite sulla percezione umana della progettazione visiva rivelano che gli utenti non vedono gli elementi visivi in modo isolato. Li percepiscono invece in relazione ad altri elementi e al contesto in cui compaiono. Queste relazioni influenzano la percezione dell'utente, attirando l'attenzione su aree specifiche, suscitando emozioni, favorendo la comprensione, migliorando l'estetica e rafforzando l'identità del marchio. Un'attenta selezione e disposizione degli elementi visivi può creare esperienze utente coinvolgenti, memorabili ed efficaci in sintonia con i destinatari.
Effetto estetica-usabilità
L'effetto estetica-usabilità si riferisce alla tendenza a considerare i prodotti attraenti come più utilizzabili. Gli utenti formano una prima opinione su un'applicazione in circa 50 millisecondi. Questa prima impressione è influenzata da vari fattori, tra cui struttura, colori, spaziatura, simmetria, quantità di testo e caratteri. Una prima impressione positiva può aumentare la soddisfazione complessiva dell’utente. La ricerca mostra che gli utenti sono più indulgenti nei confronti di piccoli problemi di usabilità quando trovano un'interfaccia visivamente accattivante. Inoltre, la qualità della progettazione può fungere da indicatore di credibilità.
Equilibrio e peso
L'equilibrio visivo rappresenta un senso di equilibrio e armonia nella percezione visiva. Aiuta gli utenti a elaborare e organizzare le informazioni visive in modo più efficiente riducendo lo sforzo cognitivo. Le composizioni equilibrate sono generalmente percepite come più piacevoli e più facili da comprendere, consentendo agli utenti di focalizzare l'attenzione in modo efficace e di navigare tra gli stimoli visivi con maggiore facilità. Questo aspetto cognitivo dell'equilibrio visivo sottolinea la sua importanza nel facilitare una comunicazione chiara e nel migliorare l'esperienza complessiva dell'utente.
Una composizione è equilibrata quando tutti gli elementi sono in equilibrio ottico. Spesso il posizionamento matematico richiede un aggiustamento. Alcuni degli elementi che influenzano il peso visivo sono dimensione, colore, densità, spazio bianco.
Misurare. Gli elementi più grandi tendono ad avere un peso visivo maggiore rispetto a quelli più piccoli. Per raggiungere l'equilibrio, gli elementi più grandi possono essere controbilanciati raggruppandoli con elementi più piccoli o regolandone la posizione all'interno del layout.
Colore. I colori brillanti o intensi possono attirare più attenzione e apparire più pesanti rispetto ai colori tenui o neutri. Il bilanciamento dei colori implica la loro distribuzione uniforme in tutta l'interfaccia o l'utilizzo di colori complementari per creare armonia visiva.
Densità. La densità degli elementi si riferisce a quanto sono fitti all’interno di un dato spazio. Il bilanciamento della densità implica garantire che gli elementi siano distribuiti uniformemente sull'interfaccia per evitare sovraffollamento o aree sparse.
Spazi vuoti. Noto anche come spazio negativo. Si riferisce alle aree vuote tra gli elementi. Lo spazio aiuta a creare un respiro visivo e può bilanciare la composizione evidenziando ed enfatizzando alcuni elementi.
Una composizione equilibrata è la somma delle forze visive tra gli elementi.
Bilanciare Chiudi è uno dei compiti più difficili, perché non può essere facilmente misurato.
Color
Tonalità, tinte, sfumature e toni possono trasmettere significato, evocare emozioni e creare fascino estetico. Il colore gioca un ruolo cruciale nel guidare l’attenzione dell’utente, stabilire la gerarchia, trasmettere informazioni e migliorare l’usabilità. Esistono diversi motivi per cui una progettazione attenta dei colori in un'interfaccia utente può influenzare gli utenti nel modo desiderato:
Attenzione e percezione. Alcuni colori attirano più l'attenzione di altri, consentendo ai designer di indirizzare l'attenzione di chi guarda su elementi specifici. Il contrasto cromatico può migliorare la leggibilità e distinguere tra diversi componenti, facilitando la rapida elaborazione delle informazioni.
Risposta emotiva. I colori presentano associazioni psicologiche che evocano emozioni e stati d'animo. I colori caldi come il rosso e l’arancione possono creare un senso di energia ed eccitazione, mentre i colori freddi come il blu e il verde possono evocare calma e tranquillità. Puoi suscitare le risposte desiderate per influenzare gli utenti verso l'esperienza prevista.
Identità aziendale. L'uso coerente del colore nei materiali di branding aiuta a stabilire una forte identità visiva e favorisce il riconoscimento del marchio. Gli utenti spesso associano colori specifici a marchi particolari e associano la loro esperienza alla fedeltà e alla fiducia del marchio.
Gerarchia visiva. Il colore può essere utilizzato per stabilire una gerarchia visiva e organizzare le informazioni. Assegna colori diversi ai vari elementi in base alla loro importanza o categoria per creare una gerarchia chiara e facilitare la navigazione e la comprensione.
Prossimità
Gli elementi posizionati più vicini sembrano più correlati. Quando disponi gli elementi, assicurati che ci sia una notevole differenza nella spaziatura tra gli elementi strettamente correlati e quelli che non lo sono.
Questo principio della Gestalt suggerisce che la distanza spaziale tra gli elementi visivi influenza il modo in cui vengono percepiti e organizzati mentalmente e sottolinea la sua importanza nel facilitare l'elaborazione e la comprensione efficienti degli stimoli visivi.
Raggruppa insieme elementi correlati che sono funzionalmente simili o appartengono alla stessa categoria gerarchica. Ad esempio, i pulsanti ce eseguono azioni o opzioni simili in un menu a discesa devono essere raggruppati vicini per indicarne l'associazione. In una barra di navigazione, le voci di menu ravvicinate suggeriscono un insieme di opzioni correlate, mentre uno spazio più ampio tra le categorie di menu le distingue visivamente. Gli elementi del modulo correlati devono essere raggruppati insieme (ad esempio, i campi indirizzo in una sezione chiamata "indirizzo").
Migliora la leggibilità nelle interfacce con molto testo regolando la spaziatura tra paragrafi, frasi e parole. Una spaziatura tra i paragrafi più ravvicinata indica una connessione logica o una continuazione del pensiero, mentre una spaziatura maggiore denota una transizione o un'interruzione del contenuto. Questa tecnica promuove una comprensione efficiente delle informazioni testuali.
Assicurati che ci sia una distinzione evidente nella spaziatura tra elementi correlati e non correlati per evitare confusione. Una rampa di spaziatura può aiutare a determinare in modo coerente la spaziatura appropriata necessaria in base alla dimensione dell'elemento.
Il cerchio sulla sinistra è più correlato al triangolo che all'altro cerchio.
La spaziatura tra i paragrafi è area di disposizione maggiore rispetto allo spazio tra le sezioni.
Continuità
Gli elementi disposti su una linea o su una curva sono percepiti come più correlati rispetto agli elementi che non si trovano su una linea o su una curva.
Disporre gli elementi dell'interfaccia, come menu di navigazione o passaggi di un processo, lungo una linea o una curva per implicare una sequenza o progressione. Questo layout aiuta gli utenti a percepire la relazione tra gli elementi e a comprendere il flusso logico di informazioni o azioni.
Posiziona elementi correlati, come caselle di controllo o opzioni radio, o elementi (punti elenco) in un elenco, lungo una linea per raggrupparli visivamente insieme. Questa disposizione suggerisce agli utenti che questi elementi condividono uno scopo comune o appartengono alla stessa categoria, facilitandone la navigazione e la comprensione. Se elementi dall'aspetto simile sono ulteriormente rientrati verso l'interno, la posizione dell'elemento è correlata a un posizionamento più basso nella gerarchia visiva.
Utilizza linee o curve per guidare l'attenzione degli utenti e creare percorsi visivi attraverso l'interfaccia. Ad esempio, una freccia può dirigere l'occhio dell'utente da una sezione di contenuto a un'altra lungo un determinato percorso, indicando una connessione o una progressione. Questa tecnica aiuta gli utenti a navigare nell'interfaccia in modo più intuitivo e incoraggia l'esplorazione.
Disponi gli elementi chiave dell'interfaccia, come i pulsanti di invito all'azione o informazioni importanti, lungo linee prominenti per attirare l'attenzione degli utenti e creare punti focali. Ad esempio, il modello Fluent MessageBar viene spesso visualizzato come un messaggio ben visibile ed equilibrato nell'area del contenuto, con il messaggio a sinistra che porta ai pulsanti di invito all'azione a destra. Questa strategia di layout evidenzia questi elementi e ne enfatizza il significato, aumentando la probabilità di interazione.
Per la nostra percezione le curve/linee sono più forti del colore.
Le procedure guidate sfruttano la continuità per mostrare agli utenti che i passaggi sono collegati, senza sommergerli con troppe informazioni.
Chiusura
Il cervello umano tende a vedere forme complete, riconoscendo un unico modello (familiare), rispetto ai singoli oggetti, anche quando mancano alcune informazioni.
Assicura la coerenza visiva negli elementi di progettazione (come forme, colori e dimensioni) per aiutare gli utenti ad apprendere i modelli che devono aspettarsi, anche se presentati in contesti diversi.
Utilizza icone o simboli semplici e familiari che consentano agli utenti di inserire le informazioni mancanti in base alle loro esperienze precedenti. Ad esempio, l'icona di una lente di ingrandimento è comunemente associata alla funzionalità di ricerca, anche senza testo di accompagnamento.
Presenta le informazioni gradualmente agli utenti (azione nota anche come divulgazione progressiva). Consenti agli utenti di inserire i dettagli mancanti mentre interagiscono con l'interfaccia, evitando così di sovraccaricarli con troppe informazioni e incoraggiando l'esplorazione.
Crea modelli visivi coerenti che incoraggiano gli utenti a percepire gli oggetti come entità intere. Ad esempio, raggruppare elementi correlati può aiutare gli utenti a comprenderne la relazione e lo scopo. Disponi visivamente gli elementi in modo coerente utilizzando i principi della Gestalt per indicare la segmentazione. Utilizza lo spazio in modo efficace per creare un senso di chiusura attorno agli elementi dell'interfaccia.
Utilizza animazioni e transizioni per guidare l'attenzione degli utenti e trasmettere i cambiamenti negli stati dell'interfaccia. Transizioni fluide tra diversi stati o schermate possono aiutare gli utenti a comprendere la relazione tra gli elementi e a integrare le informazioni mancanti. Numerosi controlli moderni disponibili in Power Apps visualizzano animazioni in modo intrinseco.
Un quadrato viene riconosciuto prima di quattro cerchi incompleti.
L'animazione da un scheda a una modale aiuta a colmare il divario tra i due e a metterli in relazione tra loro.
Punto focale
Un punto focale è un elemento di progettazione che attira immediatamente l'attenzione dello spettatore. Idealmente, una progettazione deve avere una sequenza di punti focali, tipicamente da uno a tre, disposti per guidare l'utente attraverso il contenuto in modo deliberato.
Progetta l'interfaccia con una chiara gerarchia di informazioni, in cui i contenuti o le azioni più importanti vengono enfatizzati come punti focali. Utilizza segnali visivi come dimensioni, colore, contrasto e posizionamento per far risaltare questi elementi. Presenta le informazioni in modo graduale, iniziando dai punti focali più importanti. Questa tecnica aiuta gli utenti a identificare rapidamente i contenuti o le azioni più pertinenti e li guida attraverso l'interfaccia in una sequenza logica.
Posiziona i pulsanti principali di invito all'azione ben in vista nell'interfaccia, rendendoli i punti focali più forti. Questi pulsanti devono essere visivamente distinti dagli altri elementi e posizionati strategicamente per guidare gli utenti alle azioni desiderate, come effettuare un acquisto o registrarsi. Un linguaggio di progettazione fluente consiglia di utilizzare il colore del tema del marchio per questi elementi.
Usa il contrasto in modo efficace per creare punti focali. Gli elementi che risaltano per differenze di colore, luminosità, dimensione o tipografia attirano naturalmente l'attenzione dell'utente. Il contrasto di superfici più luminose con testo più scuro o elementi del marchio crea un punto focale più prominente.
Utilizza gli spazi bianchi e negativi per evidenziare i punti focali creando una separazione visiva dagli elementi circostanti. Questa tecnica aiuta a prevenire le distrazioni e consente agli utenti di concentrarsi sui contenuti o sulle azioni più importanti. Gli elementi dell'interfaccia utente con maggiore spaziatura intorno attirano maggiormente l'attenzione e tendono ad essere percepiti come più importanti rispetto agli elementi con meno spazio.
Mantieni la coerenza nell'uso dei punti focali in tutta l'interfaccia per fornire un'esperienza utente coerente. Impostando uno schema di punti focali, guidi le aspettative degli utenti riguardo alla gerarchia che devono comprendere per navigare nell'interfaccia e li aiuti a trovare informazioni o azioni importanti in varie schermate o pagine.
Tieni presente che è importante mantenere l'equilibrio e non fornire agli utenti troppi punti focali concorrenti.
L'attenzione dell'utente viene innanzitutto attirata dal quadrato blu.
Elementi come gli inviti all'azione possono diventare punti focali per garantire che gli utenti li notino.
Somiglianza
Gli oggetti che appaiono simili sono spesso percepiti come un gruppo o uno schema, portando gli utenti a pensare che abbiano la stessa funzionalità.
Assicurati che gli elementi dell'interfaccia con funzioni simili abbiano stili visivi coerenti. Ad esempio, i pulsanti che eseguono azioni simili o con uguale peso devono avere lo stesso colore, forma e dimensione, in modo da segnalare agli utenti la loro funzionalità condivisa. Al contrario, assicurati che gli elementi che differiscono significativamente nella funzionalità siano chiaramente distinguibili. Entrambe le tecniche prevengono confusione e frustrazione stabilendo chiari segnali visivi.
Utilizza iconografia e simboli coerenti per rappresentare azioni o funzionalità simili in tutta l'interfaccia. Gli utenti tendono ad associare icone familiari a funzioni specifiche in base alle loro esperienze passate. Per soddisfare queste aspettative, utilizza metafore di icone universalmente riconosciute. Garantisci la coerenza nello stile delle icone utilizzando icone dello stesso tipo, come la libreria iconografica dell'interfaccia utente Fluent.
Utilizza codici colore per indicare somiglianze tra elementi o categorie. Ad esempio, l'utilizzo dello stesso colore per evidenziare elementi correlati in un elenco o il raggruppamento di punti dati simili in un grafico migliora la coerenza visiva e aiuta gli utenti a distinguere i modelli.
Mantieni l'uniformità nella tipografia e nello stile del testo per gli elementi che servono a scopi analoghi. Stili, dimensioni e formattazione coerenti dei caratteri contribuiscono a creare un linguaggio visivo coerente, facilitando il riconoscimento da parte degli utenti di contenuti o azioni correlate.
Fornisci feedback interattivo coerente per azioni simili nell'interfaccia. Che si tratti di passare il mouse su un pulsante o di fare clic su un collegamento, gli utenti devono aspettarsi risposte uniformi per rafforzare l'associazione tra somiglianza visiva ed equivalenza funzionale. Sebbene la piattaforma fornisca intrinsecamente la maggior parte dei comportamenti di interattività (come i valori di colore per lo stato al passaggio del mouse e con l'emento premuto), tieni presente questo principio di progettazione quando crei elementi di componenti da zero o implementi manualmente gli stati di feedback.
Assicurati che le somiglianze visive siano integrate da altri segnali, come etichette di testo o feedback audio, per soddisfare utenti con esigenze e preferenze diverse. La comunicazione efficace delle funzionalità attraverso molteplici modalità sensoriali migliora l'usabilità e l'inclusività.
Gli elementi sono raggruppati in base alla forma e al colore, non in base alla disposizione (colonne e righe).
Se un scheda su una dashboard si apre come pannello laterale, gli utenti si aspetteranno che tutti gli altri si aprano in questo modo.
Figura e sfondo
Le persone percepiscono istintivamente gli elementi come una "figura" (ciò che risalta in primo piano) o uno "sfondo" (ciò che si allontana sullo sfondo). Pertanto, il contesto influenza la percezione ed è fondamentale garantire una delineazione sufficiente per distinguere gli elementi importanti dallo sfondo. Lo spazio bianco (spazio negativo) aumenta la comprensione del contenuto.
Usa il contrasto in colore, dimensione o stile visivo per stabilire una chiara relazione figura-sfondo. Gli elementi importanti devono risaltare ben in vista sullo sfondo, in modo da renderli facilmente distinguibili e guidando efficacemente l'attenzione degli utenti. Le superfici con colori più chiari ed elementi visivi più contrastanti rispetto allo sfondo hanno maggiore risalto. Questo approccio riduce l'ingombro visivo e aiuta gli utenti a identificare le informazioni chiave. Fornisci un contrasto sufficiente tra gli elementi in primo piano e quelli sullo sfondo per migliorare la leggibilità per gli utenti con disabilità visive, migliorando la loro capacità di accedere e comprendere i contenuti.
Mantieni la coerenza nel posizionamento e nello stile degli elementi dell'interfaccia rafforza la relazione figura-sfondo e aiuta gli utenti a comprendere la struttura dell'interfaccia. L'uso coerente di modelli di progettazione e segnali visivi garantisce che gli utenti possano distinguere rapidamente tra elementi in primo piano e sullo sfondo su schermi e contesti diversi. Le incoerenze nella progettazione possono sconvolgere i modelli mentali degli utenti e ostacolare la loro capacità di navigare in modo efficiente nell'interfaccia.
Il basso contrasto e lo spazio negativo minimo contribuiscono a far percepire i rettangoli bianchi come parte dello sfondo.
Un'immagine laterale deve passare in secondo piano in modo che gli utenti possano concentrarsi sui contenuti importanti.
Raggruppamento
Gli elementi tendono ad essere percepiti come gruppi se condividono un'area con un confine chiaramente definito.
Raggruppa elementi correlati all'interno di contenitori visivi, come scatole, carte o bordi, aiuta gli utenti a percepirli come unità coese. Questo approccio organizza visivamente contenuti e funzionalità, facilitando l'identificazione e l'elaborazione delle informazioni. I raggruppamenti chiari aiutano a evitare un'interfaccia disordinata e a ridurre la confusione o l'inefficienza. Il raggruppamento è efficace anche quando la prossimità non è un'opzione; ad esempio, una barra dei messaggi che si estende su diversi controlli su uno schermo percepita come un'unità correlata a causa dei bordi e del colore di sfondo.
Mantenere uno stile visivo coerente per gli elementi raggruppati rafforza la loro connessione e migliora l'usabilità. L'utilizzo di colori, caratteri o icone simili per questi elementi sottolinea che appartengono alla stessa categoria o funzione. Le incoerenze nella presentazione visiva possono indebolire il raggruppamento percepito e indurre gli utenti a trascurare relazioni tra gli elementi o a interpretarne erroneamente il significato o lo scopo.
L'aggiunta di bordi attorno a un elemento o a un gruppo di elementi crea una separazione dagli elementi circostanti.
La suddivisione in sezioni del contenuto aiuta gli utenti a comprendere che l'argomento sta cambiando.
Segnali e disturbo
Segnali visivi come linee, contrasto e spaziatura vengono utilizzati per indicare agli utenti che qualcosa è importante. Tuttavia, troppi segnali, o segnali che evidenziano informazioni non importanti, diventano rapidamente disturbo.
Utilizza i principi del punto focale (come testo in grassetto, colori contrastanti o icone) per segnalare informazioni o azioni importanti agli utenti. Ad esempio, utilizza un colore brillante per i pulsanti o i titoli importanti per farli risaltare.
Sii selettivo su ciò che metti in evidenza per evitare di fornire troppe informazioni agli utenti. Segnala solo gli elementi veramente importanti per l'attività o l'obiettivo dell'utente. Troppi segnali possono creare confusione e rendere difficile per gli utenti stabilire le priorità. Identifica le informazioni più importanti per l'utente ed enfatizzale in modo appropriato. In genere, è consigliabile avere un solo pulsante di invito all'azione per pagina. Nei moduli, evidenzia i campi obbligatori per attirare l'attenzione dell'utente. Ciò impedisce agli utenti di perdersi in dettagli non necessari e li aiuta a concentrarsi su ciò che è essenziale.
Assicurati che i segnali seguano un linguaggio visivo coerente in tutta l'interfaccia. Ciò funge da linea guida che aiuta gli utenti a riconoscere i modelli e a comprendere intuitivamente il significato dei diversi segnali.
Adatta i segnali al contesto specifico e alle esigenze dell'utente. Ad esempio, se gli utenti stanno scansionando un'interfaccia che presenta determinate attività, segnalano chiaramente lo stato critico e gli elementi utilizzabili per attirare la loro attenzione. I segnali contestuali aiutano gli utenti a trovare rapidamente informazioni pertinenti senza essere distratti da dettagli non correlati.
I segnali aiutano gli utenti di guida attraverso i contenuti e trasmettono ciò che è importante.
Il rumore visivo crea confusione e ha l'effetto opposto dei segnali.
Facilitazione di Power Platform
Nelle app canvas, utilizza contenitori di layout per raggruppare elementi correlati. Idealmente dovresti organizzare tutti gli elementi della pagina in contenitori e i contenitori di layout possono anche separare in modo efficiente i contenitori secondari regolando la proprietà del divario.
Nei moduli delle app basate su modello, le sezioni possono essere utilizzate per raggruppare campi o elementi correlati.
Implementa la coerenza negli elementi visivi comuni con componenti personalizzati riutilizzabili.
Nelle app canvas, controlli moderni presentano una segnalazione integrata nella loro progettazione. Nello specifico, i controlli pulsante e notifica offrono varie opzioni nelle loro proprietà di stile, rendendoli segnali efficaci. Aderisci alle procedure consigliate per ciascun componente e applica la segnalazione in modo selettivo per garantire una comunicazione ottimale.
Informazioni correlate
- Principi di raggruppamento
- Psicologia della Gestalt
- Effetto estetico di usabilità
- Rampa di spaziatura del sistema di progettazione dell'interfaccia utente fluente
Elenco di controllo Ottimizzazione dell'esperienza
Fai riferimento alla serie completa di elementi consigliati.