Consigli per seguire standard, convenzioni e linee guida di progettazione

  • Articolo

Si applica a questa raccomandazione della checklist di ottimizzazione dell'esperienza ben progettata: Power Platform

X0:02 Segui gli standard, le convenzioni e le linee guida stabiliti. Sfrutta i modelli di progettazione di uso comune. Mantieni la coerenza negli elementi di progettazione, nella terminologia e nelle interazioni nell'interfaccia. Utilizza modelli e standard coerenti per guidare gli utenti attraverso l'interfaccia e creare un'esperienza utente coerente.

Questa guida descrive i consigli per stabilire standard, convenzioni e procedure consigliate di progettazione per sviluppare interfacce utente che migliorino l'esperienza dell'utente e il successo complessivo dell'applicazione. La deviazione dagli standard dovrebbe essere attentamente considerata per evitare di influenzare negativamente l'esperienza dell'utente e l'usabilità dell'applicazione.

Strategie di progettazione chiave

Seguire gli standard di progettazione aiuta a ridurre lo sforzo decisionale nel processo di progettazione identificando gli aspetti importanti della progettazione. La comprensione degli standard dettaglia e ottimizza la capacità di un team di ottenere interfacce utente ben progettate. Questo approccio si traduce in cicli di sviluppo più rapidi, migliore usabilità e maggiore soddisfazione degli utenti, portando in definitiva a una maggiore produttività ed efficacia per i sistemi software interni.

Comprendere i principi di progettazione

La ricerca approfondita sulla cognizione umana informa la nostra comprensione del design visivo e dell’interazione con i prodotti digitali. Questa conoscenza è alla base di molte procedure consigliate e standard, che contribuiscono per circa l’80% al prodotto finale. I principi di progettazione possono colmare il restante 20% di divario creativo non coperto dagli standard. La familiarità con queste conoscenze migliora la comprensione da parte del team di sviluppo delle considerazioni di progettazione durante la pianificazione, riducendo la dipendenza o migliorando la collaborazione con le risorse di progettazione.

Segui modelli e metafore comuni

Modelli e metafore universali sono ampiamente riconosciuti e attesi nei prodotti digitali. L'incorporazione di questi modelli ove appropriato può semplificare l'onboarding degli utenti e l'utilizzo a lungo termine, riducendo i costi di formazione e supporto e potenzialmente diminuendo la necessità di aggiornamenti o riprogettazioni. Queste pratiche abbracciano vari aspetti della progettazione, tra cui la composizione del layout, la struttura di navigazione, la gerarchia delle informazioni e la progettazione dell'interazione.

Aderire alle metafore delle icone standard e ai colori semantici è fondamentale. Le icone dovrebbero utilizzare associazioni visive consolidate per trasmettere funzionalità in modo rapido ed efficace agli utenti. Allo stesso modo, i colori semantici, come il rosso per l'errore o il verde per il successo, forniscono un feedback visivo immediato che si allinea alle aspettative e ai modelli mentali degli utenti. Seguire queste convenzioni aiuta a ridurre il carico cognitivo e a migliorare l’usabilità favorendo un senso di familiarità e comfort.

Stabilire un sistema di progettazione

Un sistema di progettazione è una raccolta di blocchi funzionali riutilizzabili utilizzati per costruire un'interfaccia utente. Sono progettati specificamente per un'organizzazione in modo che ogni elemento sia in linea con gli standard stabiliti dal marchio. I quattro componenti chiave di un sistema di progettazione sono token di progettazione, componenti, librerie di modelli e linee guida.

I token di progettazione sono elementi visivi fondamentali di un'interfaccia utente e includono aspetti quali colore, tipografia e spaziatura. Sono espressi come variabili in un formato standard, facilitando la creazione e la manutenzione di un'applicazione utilizzando il sistema di progettazione. Indipendentemente dalla progettazione specifica, i token di progettazione semplificano la traduzione della progettazione in codice. Ad esempio, definendo un token denominato "colore primario" con un valore designato, gli sviluppatori possono integrare il design senza problemi. Invece di incorporare valori specifici direttamente nel codice, utilizzano questi token. I token di progettazione possono essere allineati con la guida di stile di un'organizzazione e gestiti centralmente per produrre token facili da usare.

Un componente rappresenta un'unità modulare discreta di un'interfaccia utente. Serve come elemento visivo per assemblare le interfacce delle app. I componenti ben progettati presentano due caratteristiche chiave: riutilizzabilità e modularità. Dovrebbero essere progettati per garantire che mantengano la coerenza visiva tra più applicazioni all'interno dell'ecosistema di un marchio, riducendo la necessità di ricreare ogni volta il design. Un singolo componente dovrebbe funzionare perfettamente in vari contesti.

Power Apps fornisce un set completo di componenti universali di base, come pulsante, menu a discesa e diversi componenti compositi, come la tabella moderna. Utilizza questi controlli il più possibile per le esigenze di base, quindi prendi in considerazione la creazione di componenti compositi laddove esistono lacune per modelli di interfaccia utente ripetibili.

I componenti compositi dovrebbero essere sufficientemente versatili da poter essere utilizzati così come sono o con leggere variazioni (tramite parametri) in diversi contesti dell'app, senza la necessità di modifiche. Alcuni esempi di componenti personalizzati includono:

  • Un'intestazione o un piè di pagina con il marchio dell'azienda
  • Un componente della pagina delle risorse delle dimensioni di uno schermo in cui gli utenti possono fornire feedback e ottenere assistenza IT
  • Contenuti universali come avvisi o collegamenti sul copyright

La libreria di modelli offre un set di modelli di progettazione predefiniti che i creatori possono utilizzare come puntare di partenza per realizzare interfacce utente. Questi modelli servono come soluzioni standardizzate alle sfide progettuali comuni. L'obiettivo principale di una raccolta di modelli è offrire una raccolta centralizzata di modelli ben realizzati, consentendo la creazione di interfacce utente coerenti ed efficaci. Le raccolte di modelli consentono agli sviluppatori di utilizzare un criteri specifico e seguire le linee guida stabilite per l'utilizzo, garantendo coerenza ed efficienza nella progettazione dell'interfaccia utente.

Le linee guida offrono regole e best practice ai team di progetto su come utilizzare efficacemente componenti e stili visivi. A differenza delle linee guida di stile, che si concentrano sull’estetica, le linee guida del sistema di progettazione definiscono il comportamento funzionale dei componenti e le aspettative di interazione dell’utente. Ad esempio, se un sistema di progettazione fornisce un set di token di progettazione per fare riferimento ai colori, le linee guida dovrebbero chiarire quando utilizzare questi colori e come gli sviluppatori possono accedere al colore corrispondente in Power Apps. Per i componenti, dovrebbe essere disponibile la documentazione sull'utilizzo corretto, sui parametri di input e output e sulle variazioni di stato che ci si possono aspettare dal componente.

Gli sforzi del sistema di progettazione centralizzato possono anche ospitare risorse multimediali universali come loghi aziendali e altre risorse di progettazione in un repository per consentire uno sviluppo rapido e diffuso.

MicrosoftFluent UI è un esempio di sistema di progettazione open source ampiamente adottato. Può essere un riferimento efficace per molte decisioni progettuali prese in Power Apps perché tutti i controlli moderni utilizzano i componenti del sistema di progettazione Fluent (2). I sistemi di progettazione come Fluent UI investono una quantità significativa di sforzi di ricerca e sviluppo nella creazione di componenti per garantire che soddisfino le esigenze degli utenti. Sono inoltre progettati in modo da poter essere onnipresenti e facilmente utilizzabili su vari prodotti e piattaforme digitali. Ogni componente ha linee guida specifiche per garantire che l'applicazione sia in linea con l'esperienza prevista. Sfrutta la Knowledge Base supportata dalla ricerca rivedendo le indicazioni su Fluent 2.

La condivisione per evitare implementazioni duplicate non solo aumenta l’efficienza della produzione, ma garantisce anche che le esperienze rimangano coerenti nel tempo. I contributi agli elementi condivisi aiutano a mantenere aggiornate le esperienze e riflettono le competenze di tutta l'organizzazione. Attualmente, la coerenza è una sfida poiché componenti, sistemi, processi e cultura spesso non sono condivisi, non promuovono la coerenza e rendono difficile il contributo.

Condurre revisioni del progetto

L'accesso alle risorse destinate a guidare la progettazione dell'esperienza utente è fondamentale per garantire che un'app soddisfi gli standard di interfaccia/esperienza utente stabiliti. I team centralizzati dovrebbero mirare a familiarizzare con gli standard di progettazione di base e le procedure migliori. Sebbene i progettisti siano generalmente ben informati sull'esperienza dell'utente, anche i project manager possono trarre vantaggio dall'apprendimento di queste competenze per contribuire in modo efficace al team.

Il modo più efficace per convalidare un'esperienza è provarla attivamente. Tuttavia, puoi anche leggere a livello di codice i metadati dell'app Power Apps. I metodi per eseguire questa operazione potrebbero includere la verifica che all'app sia applicato il tema corretto o la verifica se si fa riferimento ai valori dei token del tema nei controlli legacy.

Ad esempio, se elementi di testo specifici devono utilizzare determinati token di progettazione, il nome del componente di testo potrebbe corrispondere a un valore particolare e le proprietà del componente dovrebbero quindi corrispondere a un mapping di token di progettazione specifica.

Valuta il numero di elementi che rappresentano un tipo di componente specifico e soddisfano determinati criteri, rispetto a quelli che non lo fanno. Prendi ad esempio in considerazione i componenti di testo che hanno un nome errato o corretto ma che non seguono le linee guida sui valori delle proprietà. Per applicare il layout reattivo, alcuni contenitori di layout potrebbero essere mappati a convenzioni di denominazione e valori di proprietà specifici (come LayoutWrap).

Soddisfare gli standard di accessibilità per aumentare la base utenti

L'incorporazione di principi di progettazione inclusivi garantisce che i prodotti si rivolgano a un gruppo di destinatari diversificato, compresi individui di tutte le abilità. La progettazione inclusiva cerca di identificare potenziali ostacoli per gli utenti di tutte le abilità nella creazione di prodotti che risolvano le sfide prima dell’implementazione finale. È essenziale comprendere e discutere gli aspetti funzionali che potrebbero portare alla formazione di barriere all'interazione per poterle superare efficacemente.

Funzione Ambito
Cognizione La nostra capacità di ricevere, interpretare ed elaborare le informazioni è influenzata da molti fattori. Questi fattori includono attenzione, consapevolezza, concentrazione, memoria, giudizio, comprensione, risoluzione dei problemi e ragionamento. Le capacità cognitive di una persona possono influenzare il modo in cui apprende, sia che si tratti di imparare a utilizzare un nuovo dispositivo o di apprendere nuove informazioni in una classe. Molti aspetti della cognizione si influenzano a vicenda.
Mobilità La nostra anatomia e i nostri muscoli ci danno mobilità e fanno affidamento sui segnali cerebrali, che controllano i muscoli. La mobilità implica presa, capacità motorie, coordinazione, controllo (movimento volontario e involontario), velocità, tono muscolare, resistenza, postura e lesioni temporanee. La mobilità può essere influenzata da condizioni situazionali, temporanee, progressive o permanenti.
Vista La nostra capacità di vedere e comprendere le informazioni visive provenienti dal nostro ambiente guida il pensiero e il movimento. La vista è influenzata sia da fattori fisici che neurologici. Le limitazioni visive includono cecità, ipovisione (ipovedente), diminuzione dell'acuità visiva, perdita del campo visivo, daltonismo, fotofobia (sensibilità alla luce) e persino la luce solare intensa che influisce sulla leggibilità del testo su uno schermo.
Udito Anche la nostra capacità di ricevere e comprendere i suoni in un ambiente guida il pensiero e il movimento. I gradi di perdita dell’udito variano in un ampio spettro, portando a vari ostacoli all’uso quotidiano della tecnologia. Esempi temporanei o situazionali includono ambienti rumorosi o zone silenziose in cui la riproduzione del suono non è possibile.
Voce, parlato e comunicazione La nostra capacità di comunicare (verbalmente o non verbalmente) è essenziale per esprimere i nostri desideri e bisogni, formare relazioni, trasmettere informazioni agli altri e interagire con il nostro ambiente.
Sensazione e percezione La sensazione è la nostra capacità di rilevare sensi come il tatto o il posizionamento del nostro corpo. La percezione è il modo in cui il cervello elabora e comunica questi sensi. Le limitazioni delle sensazioni comprendono disturbi vestibolari, dolore cronico, integrità della pelle, sensibilità (ipersensibilità e iposensibilizzazione) e propriocezione.

Modalità di accesso ai contenuti

Gli utenti accedono ai contenuti digitali in vari modi. Oltre all'input del mouse e del puntatore, potrebbero anche utilizzare la tastiera e varie tecnologie assistive. Queste tecnologie includono lettori di schermo e braille, lenti di ingrandimento, didascalie, riconoscimento vocale e impostazioni ad alto contrasto, che adattano l'esperienza per soddisfare le esigenze dell'utente.

Strumenti assistivi

Gli strumenti di assistenza comuni sono descritti di seguito:

  • Tastiera. Le persone con disabilità visive interagiscono con siti Web e app utilizzando il software dell'utilità per la lettura dello schermo, che legge contenuti e controlli ad alta voce utilizzando la tecnologia di sintesi vocale. Poiché le persone non vedenti non possono vedere il puntatore sullo schermo, non possono utilizzare un mouse standard. La tastiera funziona come input alternativo all'interazione punta e fai clic. Oltre a supportare il set base di comandi da tastiera, le utilità per la lettura dello schermo forniscono anche un set complesso di comandi da tastiera. Questi comandi offrono agli utenti un potente set aggiuntivo di strumenti per interagire con le interfacce utente in modo più efficiente.
  • Utilità per la lettura dello schermo. Le utilità per la lettura dello schermo convertono il testo digitale in parlato sintetizzato e output braille. Consentono agli utenti di ascoltare i contenuti e navigare con la tastiera. Questa tecnologia consente alle persone non vedenti o ipovedenti di utilizzare la tecnologia informatica con lo stesso livello di indipendenza e privacy di qualsiasi altro utente. Le utilità per la lettura dello schermo vengono utilizzate anche da persone con disabilità cognitive o di apprendimento e da utenti che semplicemente preferiscono i contenuti audio rispetto al testo. Questi strumenti vanno oltre l'uso del Web, aiutando nella navigazione di documenti, fogli di calcolo e sistemi operativi.
  • Tatto. Gli obiettivi tattili sono in gran parte mirati alle persone con ritardi motori, che potrebbero avere problemi a toccare lo schermo. Più specificamente, il tocco è progettato per aiutare le persone a limitare la quantità di input spuri derivanti da tocchi non intenzionali (o non registrati).
  • Contenuto dinamico. I ruoli di riferimento, o etichette ARIA, offrono vantaggi immediati agli utenti delle utilità per la lettura dello schermo. Esistono otto ruoli, ciascuno dei quali rappresenta un blocco di contenuto che ricorre comunemente nelle pagine Web. Per utilizzarli, aggiungi l'attributo del ruolo pertinente a un contenitore adatto nel tuo codice HTML, consentendo agli utenti delle utilità per la lettura dello schermo di accedere rapidamente a quella sezione della pagina.

Stili visivi

Per creare prodotti inclusivi per utenti con diverse capacità visive, è essenziale considerare stili visivi come colore, contrasto e dimensione del testo. Ciò implica la garanzia di un contrasto adeguato tra il testo e il relativo sfondo, incluso il testo su immagini, icone e pulsanti, per migliorare la leggibilità per gli utenti con bassa sensibilità al contrasto o daltonici. Il contenuto con un contrasto ottimale migliora la leggibilità in varie condizioni di illuminazione, a vantaggio di tutti gli utenti.

Il testo standard deve mantenere un rapporto di contrasto di almeno 4,5:1 con lo sfondo. Per testo di grandi dimensioni, componenti interattivi e visualizzazioni di dati, è richiesto un rapporto di contrasto minimo di 3:1 con il colore di sfondo. Gli indicatori di stato dovrebbero utilizzare colori semantici, tipo e immagini in modo efficace per trasmettere informazioni, garantendo che il contenuto possa essere percepito da tutti gli utenti. Valuta la possibilità di supportare una tavolozza di colori ad alto contrasto, che normalizzi la tavolozza dei colori per visualizzare contenuti con un rapporto di contrasto di almeno 7:1, garantendo visibilità e chiarezza. L'offerta di una modalità scura può migliorare notevolmente la leggibilità e ridurre l'affaticamento degli occhi.

Tipografia

La tipografia gioca un ruolo cruciale nel garantire la leggibilità per utenti con esigenze diverse. Il testo deve essere sufficientemente grande e adeguatamente spaziato per soddisfare le diverse esigenze degli utenti. Gli utenti dovrebbero essere in grado di regolare impostazioni come l'orientamento e i livelli di zoom, con le applicazioni che adatteranno perfettamente il layout dei loro contenuti di conseguenza. Una tipografia ben impostata non solo aiuta la leggibilità, ma facilita anche l'orientamento e la navigazione della pagina, a vantaggio delle persone con problemi di vista, disabilità cognitive, daltonismo e coloro che fanno affidamento sulle utilità per la lettura dello schermo.

I titoli dovrebbero contenere testo grande o in grassetto per consentire una rapida scansione e comprensione, in particolare per gli utenti visivi. Gli elementi di intestazione applicati correttamente garantiscono una navigazione efficiente per tutti gli utenti. La larghezza e la spaziatura della linea influiscono in modo significativo sulla leggibilità; ad esempio, linee troppo larghe affaticano la vista mentre linee troppo corte interrompono il ritmo e la comprensione. Punta a una lunghezza della riga compresa tra 50 e 70 caratteri e un'altezza della riga compresa tra il 120% e il 145% della dimensione del carattere per migliorare la leggibilità.

Sui dispositivi mobili, il testo dovrebbe essere ridimensionabile fino al 200% senza compromettere contenuti o funzionalità. Questa flessibilità garantisce che gli utenti possano regolare la dimensione del testo in base alle proprie preferenze o esigenze, migliorando l'accessibilità complessiva. Inoltre, gli utenti dovrebbero avere la possibilità di ingrandire l'interfaccia, con layout di pagina progettati per ridisporre i contenuti senza interruzioni senza scorrimento orizzontale per livelli di zoom fino al 400%. La garanzia che i contenuti rimangano accessibili e leggibili, indipendentemente dalle dimensioni dello schermo del dispositivo, contribuisce a un'esperienza più intuitiva per tutti gli utenti.

Immagini, grafici e movimento

Immagini e grafica rendono i contenuti più piacevoli e più facili da comprendere per molte persone, e in particolare per quelle con disabilità cognitive e di apprendimento. Sebbene le immagini possano servire come spunti per le persone con disabilità visive, aiutandole a orientarsi all’interno del contenuto, un uso estensivo sui siti Web può creare importanti barriere per gli utenti.

Le pratiche accessibili relative ai contenuti multimediali avvantaggiano gli utenti delle utilità per la lettura dello schermo e che utilizzano il braille, gli utenti che navigano con le immagini disattivate per risparmiare larghezza di banda e i crawler dei motori di ricerca. Possono anche aiutare le persone con perdita dell’udito o disabilità cognitive.

Utilizza il testo alternativo (Alt) per rendere accessibile il contenuto visivo. Gli attributi Alt descrivono il contenuto visivo, ad esempio il testo visualizzato durante il download delle immagini. Adatta il testo alternativo al contesto dell'immagine. Sii conciso e informativo (usa da 150 a 250 caratteri). Ricordati di contrassegnare le immagini che duplicano il contenuto del testo come decorative.

Interazione

L'interazione è il luogo in cui l'accessibilità conta di più. Se un utente non riesce a navigare in un prodotto senza problemi e a completare le attività, il prodotto non è veramente accessibile. Le interazioni efficienti con tastiera e tocco assistono gli utenti delle utilità per la lettura dello schermo, lettori braille e coloro che navigano utilizzando una tastiera. Interazioni tipiche includono:

  • Navigazione. Gli utenti delle tecnologie assistive navigano in una pagina Web tramite tabulazione, ricerca e, nel caso delle utilità per la lettura dello schermo, utilizzando elenchi di intestazioni e collegamenti. Garantisci una navigazione efficiente tramite tastiera con punti di riferimento, intestazioni e collegamenti (come il passaggio diretto al contenuto principale).
  • Collegamenti ipertestuali. L'usabilità e l'accessibilità dei collegamenti ipertestuali possono essere migliorate rendendoli chiari, concisi e significativi fuori contesto. Applica un contrasto di colore sufficiente e differenzia visivamente dagli altri contenuti.
  • Tabelle. Affidarsi solo ai segnali visivi non è sufficiente per creare una tabella accessibile. Il markup strutturale consente alla tecnologia assistiva di riconoscere intestazioni e celle di dati.
  • Moduli. I campi di input, utilizzati per varie interazioni Web, spesso generano problemi di accessibilità per le persone che utilizzano utilità per la lettura dello schermo o tastiere.
  • Concentrarsi. La visibilità dello stato attivo aiuta gli utenti che si affidano alla tastiera per navigare nella pagina, indicando visivamente l'elemento con cui interagiscono successivamente. A volte è necessario spostare lo stato attivo in modo programmatico o limitarlo a un'area specifica per ottimizzare l'esperienza.
  • Cambiamenti di stato. Specifica il testo per eventuali modifiche di stato e annunci. La comunicazione degli stati di errore e l'instradamento degli utenti attraverso il ripristino degli errori (come informazioni mancanti o problemi di sistema) è fondamentale.

Facilitazione di Power Platform

I controlli moderni sono disponibili sia per le app canvas che le app basate su modello.

Le app canvas supportano temi moderni, consentendoti di implementare una palette di marchi coerente in tutti i controlli dell'app. Le app basate su modello supportano temi per modificare elementi di del marchio di base come i colori dell'intestazione dell'app, i collegamenti e alcune icone dei moduli.

I componenti riutilizzabili e compatibili con la soluzione sono disponibili in più forme per vari tipi di app. I componenti canvas personalizzati possono essere utilizzati nelle app canvas o nelle pagine personalizzate e sono realizzati utilizzando codice basso. Power Apps component framework può essere utilizzata per implementare i componenti di codice per app canvas, app basate su modello e Power Pages.

Le app canvas supportano proprietà accessibili che si associano a specifiche funzioni di tecnologia assistiva. Utilizza strumenti in studio per convalidare la conformità all'accessibilità.

Sebbene le app basate su modello siano accessibili senza configurazione, assicurati che tutte le risorse Web aggiunte all'app siano accessibili. Le esperienze canvas integrate, incluse le pagine personalizzate, devono essere configurate manualmente per soddisfare gli standard di accessibilità.

Le app basate su modello forniscono collegamenti da tastiera standard integrati per la navigazione tra moduli e visualizzazioni.

Le app canvas richiedono componenti di codice per abilitare i collegamenti da tastiera, che possono essere configurate utilizzando i collegamenti da tastiera del kit per autori.

Elenco di controllo Ottimizzazione dell'esperienza

Fai riferimento alla serie completa di elementi consigliati.

Checklist per l'ottimizzazione dell'esperienza