Elementi consigliati per l'ottimizzazione del layout

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

Questa guida descrive gli elementi consigliati per progettare il layout dello schermo che siano facili da accedere e adattabili in modo fluido su vari dispositivi. Questo approccio garantisce agli utenti un'esperienza visiva coerente e ottimale indipendentemente dal dispositivo che utilizzano.

Definizioni

Strategie di progettazione chiave

I layout reattivi forniscono un'esperienza utente flessibile ed efficiente in diverse dimensioni di finestra. Si adattano ridimensionando il contenuto, riorganizzando gli elementi e visualizzando selettivamente testo e immagini. I layout responsabili soddisfano le esigenze degli utenti indipendentemente dalle dimensioni dello schermo.

Determinare un frame dell'app coerente

Il riquadro dell'applicazione è costituito da una serie di controlli costantemente disponibili su ogni schermata. Comprende tre componenti secondari principali: un'intestazione, uno spostamento e un'area del contenuto. Le app semplici hanno la flessibilità di utilizzare il componente intestazione, mentre le app più sofisticate spesso sfruttano la navigazione laterale per abilitare più pagine. I componenti secondari sono personalizzabili. Ad esempio, puoi incorporare una ricerca globale nell'intestazione o raggruppare elementi nella navigazione laterale per soddisfare i requisiti della tua app.

I tre componenti secondari principali del frame dell'app sono descritti come segue:

1. L'intestazione è un componente fondamentale progettato per far parte di ogni applicazione interna. È costituito da componenti secondari che offrono agli utenti l'accesso a funzioni a livello di sistema, li aiutano a orientarsi nell'interfaccia utente e forniscono coerenza tra le esperienze. Viene visualizzato nella parte superiore del frame dell'app e dovrebbe persistere in tutte le pagine dell'app. Facoltativamente può ospitare comandi globali, come ricerca, impostazioni, notifiche, feedback, profilo o guida. Dovrebbe essere sempre visualizzato il nome dell'app, che idealmente dovrebbe fungere anche da collegamento cliccabile alla home o alla pagina di destinazione. L'intestazione dovrebbe essere reattiva, con i comandi che si spostano nel controllo di overflow nelle finestre di dimensioni pari o inferiori a 600 pixel. Anche la larghezza di input della ricerca è reattiva a 1.023 pixel e inferiore.

2. La navigazione è un sistema di controlli che lavorano insieme per aiutare gli utenti a trovare informazioni e completare le attività. Aiuta gli utenti a passare da una sezione all'altra di un'applicazione. Gerarchicamente non è collegato a nessuna pagina o sezione, ma esiste sopra ogni altro contenuto. È sempre presente e può essere ridotto a icona in uno stato compresso (chiamato anche stato della barra di scorrimento) per liberare spazio aggiuntivo per il contenuto della pagina. Con finestre di dimensioni più piccole, può essere ridotto a icona in un menu a comparsa. Le forme di spostamento più comuni includono lo spostamento dall'alto e lo spostamento laterale (entrambi non devono essere utilizzati contemporaneamente).

3. L'area geografica del contenuto contiene il focus dello schermo. La dimensione della finestra del browser influenzano la cornice del contenuto e lo spazio disponibile nell'area del contenuto principale. Questo frame si adatta in base al punto di interruzione e al corrispondente comportamento reattivo di ciascun componente. Per altre informazioni, vedi Creare una matrice del punto di interruzione.

   L'area geografica del contenuto può facoltativamente contenere diverse aree geografiche secondarie disponibili per il posizionamento coerente degli elementi, ad esempio un'intestazione di pagina, riquadri laterali in linea o riquadri che si sovrappongono al contenuto.

L'adesione a un linguaggio di progettazione coerente (combinazioni di colori, tipografia e struttura del layout) aiuta gli utenti a identificare rapidamente e interagire con vari elementi senza confusione. Quanto più coerentemente viene utilizzato un modello di frame dell'app in tutte le applicazioni aziendali interne, tanto più forte diventa il ricordo o il modello mentale dell'utente. L’allineamento agli standard di settore o ai modelli di piattaforma comuni migliora ulteriormente questo effetto.

Una volta determinato il frame dell'app, il layout di ogni schermata risiede all'interno dell'area del contenuto del frame dell'app.

Utilizza attentamente l'area geografica dei contenuti

Gli utenti desiderano esperienze fluide in cui le informazioni siano facilmente accessibili, il testo sia facile da leggere e l'estetica migliori anziché ostacolare l'usabilità. Dai priorità alla visibilità iniziale delle informazioni chiave, garantisci la leggibilità tra le colonne e armonizza gli elementi di progettazione per un aspetto estetico.

Assicurati che le informazioni essenziali siano immediatamente visibili all'apertura dello schermo senza la necessità di scorrere. Dai la priorità alla visualizzazione di informazioni essenziali come opzioni di navigazione, contenuti cruciali ed elementi utilizzabili nella parte superiore dello schermo. Trovare l'equilibrio tra la visualizzazione di articoli sufficienti e la fornitura di informazioni dettagliate per ciascun articolo è una sfida costante. Al contrario, anche se può essere forte la tentazione di fornire tutte le informazioni possibili nella visione iniziale, troppe informazioni rischiano di sopraffare gli utenti e di diluire il significato degli elementi chiave. Prendi in considerazione l'utilizzo di riepiloghi o anteprime concise che offrano uno sguardo a contenuti più dettagliati, invogliando gli utenti ad approfondire. Le dashboard sono ottimizzate per servire a questo scopo e visualizzare grandi quantità di dati.

Integra più colonne, sezioni o raggruppamenti per organizzare logicamente i contenuti e massimizzare lo spazio. Prestare meticolosa attenzione alla larghezza delle colonne, assicurando che il testo rimanga leggibile senza sforzi eccessivi. Evita colonne troppo strette che costringono gli utenti a scorrere costantemente in orizzontale, interrompendo il flusso di interazione. Al contrario, colonne eccessivamente larghe possono impedire la leggibilità, richiedendo agli utenti di tracciare le linee su distanze estese. Cerca un equilibrio che consenta una lettura confortevole sfruttando in modo efficiente lo spazio disponibile.

Dimensiona e posiziona gli elementi visivi in ​​modo appropriato per creare un'interfaccia visivamente gradevole ed equilibrata. Allinea le didascalie alle immagini o ai titoli corrispondenti, mantieni una spaziatura coerente tra gli elementi e rispetta una gerarchia basata sulle esigenze degli utenti. Elimina ornamenti non necessarie e assegna i pixel con giudizio agli elementi che contano di più. Dai priorità ed enfatizza i contenuti e gli elementi della navigazione, in particolare sulle app o sulle home page ad alta intensità di navigazione, ed evita ornamenti superflui che compromettono l'usabilità.

Una griglia sottostante può essere utile per disporre gli elementi in modo coerente. Il comportamento della griglia scelto deve essere coerente in tutta l'area del contenuto di ogni schermata nell'app e può essere applicato anche a livello di componente (ad esempio schede o riquadri laterali). Il tipo più comune di layout della griglia utilizzato nelle applicazioni Web è la griglia a colonne. Per l'implementazione di schermate reattive è consigliabile un comportamento della griglia fluido (o allungato).

Utilizza layout e modelli di raggruppamento stabiliti

Utilizzare strutture e modalità comunemente riconosciute per organizzare contenuti ed elementi all'interno di un'interfaccia utente. Questi layout e modelli sono stati perfezionati e si sono dimostrati efficaci nel tempo, rendendoli familiari e intuitivi per gli utenti e facilitando anche l'implementazione di modelli adattivi. Una volta identificati gli scenari e gli elementi principali, associali a un layout stabilito che fornisca la migliore interazione. Dai priorità ai contenuti e alle funzionalità importanti per il completamento delle attività. Decidi quali elementi devono essere sempre visibili e accessibili sullo schermo e quali possono essere nascosti o accessibili tramite altri menu o azioni.

L'elenco seguente, sebbene non esaustivo, descrive i layout consolidati comunemente utilizzati per applicazioni aziendali o di produttività. Tutto può svolgersi all'interno dell'area del contenuto principale.

Schermata iniziale/schermata di destinazione

Funge da punto di ingresso a un'applicazione, fornendo agli utenti una panoramica delle offerte o delle funzionalità dell'app. In genere mira a catturare l'attenzione dei visitatori e incoraggia a intraprendere un'azione specifica, come completare un'attività per la prima volta o esplorare ulteriori contenuti. Spesso contiene immagini hero e opzioni di spostamento pulite.

È ideale per accogliere gli utenti, offrire un rapido accesso alle funzionalità principali, alle opzioni di spostamento o agli inviti all'azione e dare il tono all'esperienza dell'app. Dai priorità alla chiarezza, alla semplicità e alla navigazione intuitiva per guidare gli utenti in modo efficace.

Dashboard

Un hub centralizzato all'interno di un'applicazione che presenta agli utenti una panoramica completa di dati o informazioni rilevanti. Spesso è costituito da widget o moduli personalizzabili, che consentono agli utenti di monitorare metriche specifiche o eseguire azioni.

Le dashboard sono adatte per applicazioni con set di dati complessi o funzionalità sfaccettate, consentendo agli utenti di monitorare i progressi, analizzare le tendenze e prendere decisioni informate a colpo d'occhio. Sono particolarmente utili nelle piattaforme di analisi, negli strumenti di gestione dei progetti e nelle app di gestione finanziaria.

Modulo

Un layout strutturato che facilita l'immissione di dati da parte degli utenti, generalmente composto da campi per l'inserimento di vari tipi di informazioni come testo, numeri, date e selezioni. I moduli sono essenziali per raccogliere input dell'utente, elaborare transazioni e facilitare le interazioni all'interno delle applicazioni.

Sono comunemente utilizzati nei flussi di registrazione, nei processi di pagamento, nelle attività di immissione dei dati e in qualsiasi scenario che richieda input o feedback da parte dell'utente.

Vista entità/profilo

Presenta informazioni dettagliate su un'entità specifica, ad esempio un profilo utente, un elenco di prodotti o un elemento di contenuto. In genere include testo descrittivo, elementi multimediali e azioni o interazioni pertinenti.

Sono particolarmente adatti per mostrare informazioni dettagliate sugli elementi all'interno di un'applicazione. Forniscono agli utenti informazioni dettagliate approfondite, facilitano il processo decisionale e supportano il coinvolgimento con entità specifiche come i profili utente nelle app di social network o gli elenchi di prodotti nelle piattaforme di e-commerce.

Pagina Elenco

Visualizza una raccolta di elementi o entità in un formato strutturato, spesso presentato in un layout lineare o a griglia. In genere include brevi riepiloghi o anteprime di ciascun elemento, insieme a controlli di spostamento per esplorare o filtrare.

Le pagine di elenco sono efficaci per presentare grandi insiemi di contenuti o dati in un formato comprensibile, consentendo agli utenti di scansionare, cercare e navigare in modo efficiente. Ad esempio, se sono abilitate azioni su righe specifiche, il processo dovrebbe essere chiaro. Le pagine di elenco vengono comunemente utilizzate nei sistemi di gestione dei contenuti, negli elenchi di directory, nei risultati di ricerca e nei feed di notizie.

Mini recensione (schermo diviso)

Divide l'interfaccia in due sezioni distinte, con un elenco visualizzato sul lato sinistro e una vista elementi sul lato destro. L'elenco in genere contiene una raccolta di elementi, mentre la visualizzazione degli elementi fornisce informazioni dettagliate sull'elemento selezionato dall'elenco.

Questo layout è particolarmente efficace negli scenari in cui gli utenti devono sfogliare rapidamente un elenco di elementi e visualizzare contemporaneamente informazioni dettagliate su ciascun elemento, ad esempio quando eseguono operazioni in blocco. Cataloghi di prodotti, sistemi di gestione dei documenti, client di posta elettronica o di comunicazione e strumenti di gestione delle attività (ad esempio, visualizzatore di query di Azure Dev Ops) sono scenari che in genere si adattano a questo modello.

Procedura guidata

Guida gli utenti attraverso una serie di passaggi o attività sequenziali, in genere in modo lineare, per completare un processo complesso o raggiungere un obiettivo specifico. Spesso include indicatori di progresso, suggerimenti e controlli di convalida. Le procedure guidate sono utili per semplificare processi complessi, ridurre il sovraccarico cognitivo e guidare gli utenti attraverso attività o flussi di lavoro non familiari. Sono comunemente utilizzate nei flussi di onboarding, nei processi di configurazione, nei moduli in più passaggi e nelle interazioni basate su attività come la configurazione di impostazioni o transazioni complesse.

Procedi con la personalizzazione e la realizzazione del layout standard per adattarlo ai requisiti specifici. Questo processo potrebbe includere l'aggiunta o la rimozione di elementi, la regolazione delle dimensioni e del posizionamento degli elementi e l'applicazione dello stile per adattarlo all'identità del marchio o alle linee guida del design visivo. Sperimenta diverse configurazioni e variazioni del layout standard per trovare la disposizione più efficace per i contenuti e l'esperienza utente complessiva.

Progetta layout per tutti i dispositivi

I layout sono il culmine di regole definite e organizzazione intenzionale dei contenuti. Portare i tuoi contenuti in strutture ponderate è fondamentale, ma far sì che tutto fluisca insieme con una chiara gerarchia tra piattaforme e dimensioni dello schermo richiede una logica di scalabilità. Individualmente, la progettazione adattiva e quella reattiva possono affrontare questa sfida. In alcuni casi, un misto di progettazione adattiva e reattiva è la scelta giusta.

Il design reattivo utilizza un solo area di disposizione in cui il contenuto è fluido e può adattarsi alle diverse dimensioni del formato. Questa tecnica di progettazione utilizza le query multimediali per esaminare le caratteristiche di un determinato dispositivo e visualizzare il contenuto di conseguenza. La progettazione reattiva ti consente di creare una funzionalità una volta e di farla funzionare in modo efficace su tutte le dimensioni dello schermo.

Un layout adattivo cambia interamente in base al formato in cui viene presentato. La progettazione adattiva ha più dimensioni di layout fisse e fa sì che il browser carichi un determinato layout in base allo spazio disponibile. I siti Web realizzati con la progettazione adattiva utilizzano le media query per rilevare i punti di interruzione, in modo simile alla progettazione reattiva. Utilizzano inoltre markup aggiuntivo in base alle capacità del dispositivo. Questo processo è noto come "miglioramento progressivo".

Riposizionamento

Dopo il posizionamento degli elementi della pagina.

Mantieni i tuoi contenuti organizzati, leggibili e bilanciati ottimizzando la composizione all'aumentare delle dimensioni della finestra. Ad esempio, gli elementi impilati verticalmente su una finestra mobile possono essere riposizionati orizzontalmente su finestre più grandi. Questa modifica segue un ordine di lettura naturale da sinistra a destra, crea equilibrio nella progettazione e mantiene l'attenzione visiva sugli elementi chiave della pagina.

Ridimensiona

Regola le dimensioni e i margini degli elementi della pagina.

Ridimensiona gli elementi della pagina per ottimizzare l'esperienza utente, visualizzando più contenuti nella parte superiore della finestra e riducendo la necessità di scorrimento verticale. Regola i margini della pagina per aggiungere spazio bianco ed equilibrio al layout, consentendo al contenuto di respirare e migliorando l'attrattiva visiva del design. Ad esempio, un componente Hero potrebbe estendersi fino all'intera larghezza della finestra per mostrare una parte maggiore dell'immagine di sfondo. Il contenuto sotto l'immagine della foto potrebbe essere espanso ma utilizzare margini diversi per aggiungere varietà al layout e aiutare a definire la gerarchia visiva.

Nuovo flusso

Ottimizza il flusso degli elementi della pagina.

Nuovo flusso modifica gli elementi della pagina per garantire che siano visualizzati completamente, tenendo conto delle dimensioni e dell'orientamento della finestra riorganizzando il contenuto. Ad esempio, una singola colonna di contenuto in una finestra più piccola può essere ridisposta in una finestra più grande al fine di visualizzare due colonne di testo. Questa tecnica consente di visualizzare più contenuti "nella parte superiore della pagina".

Mostra/Nascondi

Ottimizza il contenuto per le dimensioni della finestra e il suo orientamento.

Mostra o nascondi gli elementi della pagina per ottimizzare il contenuto in base alle dimensioni della finestra e al suo orientamento. Questa tecnica reattiva adatta la quantità di informazioni al contesto di visualizzazione. Ad esempio, le categorie visualizzate su un piccolo schermo potrebbero visualizzare metadati limitati, come un'immagine, un titolo e un collegamento, in modo che altre informazioni siano rese visibili per aiutare l'utente a concentrarsi. Su uno schermo più grande, le categorie possono visualizzare metadati aggiuntivi come persona, data e breve descrizione, pur rimanendo all'interno del riquadro di visualizzazione.

Modificare l'architettura

Dividi o comprimi elementi e contenuti della pagina per mantenere l'attenzione su informazioni e azioni importanti.

Questo approccio è simile alla procedura di "divulgazione progressiva" nel progetto, ma per dimensioni e orientamenti diversi delle finestre. Ad esempio, l'espansione della finestra consente di visualizzare un elenco di elementi accanto ai dettagli. Questo collegamento visivo tra i contenuti consente agli utenti di selezionare facilmente un altro elemento. Su uno schermo più piccolo, l'attenzione rimane sulla visualizzazione delle informazioni chiave.

Creare una matrice di punti di interruzione

Una matrice di punti di interruzione funge da rappresentazione grafica che illustra i comportamenti reattivi o adattivi della progettazione di un'applicazione su diverse dimensioni e orientamenti dello schermo. In genere presenta una griglia strutturata o un layout che descrive in dettaglio la risposta del progetto ai vari punti di interruzione. Ogni segmento corrisponde a una larghezza dello schermo distinta, offrendo informazioni dettagliate sulla struttura, sul layout e sulla funzionalità della progettazione. Una matrice di punti di interruzione comprende considerazioni su larghezza dello schermo, orientamento del riquadro di visualizzazione, elementi di progettazione, struttura del layout, presentazione del contenuto, navigazione, contenuti multimediali e componenti interattivi, per illustrare come la progettazione di un sito Web o di un'app risponde alle diverse dimensioni e orientamenti dello schermo. Questo approccio non solo aiuta a finalizzare la progettazione di ciascuna schermata, ma semplifica anche l'implementazione quando le modifiche alle proprietà dei componenti chiave vengono tracciate esplicitamente e ben comunicate.

Facilitazione di Power Platform

I layout dei moduli dell'app basati su modello vengono configurati utilizzando Power Apps Studio. La progettazione moduli permette agli autori di aggiungere elementi in una struttura a griglia, che consente alle pagine del modulo di essere intrinsecamente reattive. Componenti personalizzati integrati come pagine personalizzate, componenti di canvas integrate e componenti di codice Power Apps Component Framework (PCF) devono integrare un comportamento reattivo nelle rispettive implementazioni. Ad esempio, le pagine personalizzate devono implementare un comportamento reattivo allo stesso modo di un'app canvas pura per funzionare correttamente.

Le app canvas richiedono una configurazione esplicita per ciascun componente per implementare un comportamento reattivo, consentendo un maggiore controllo sull'esperienza. Le dimensioni dello schermo sono determinate in base alla definizione dell'app, a cui è possibile fare riferimento per determinare la posizione, il comportamento, la visibilità e altre proprietà rilevanti.

Informazioni correlate

Fluente area di disposizione

Elenco di controllo Ottimizzazione dell'esperienza

Fai riferimento alla serie completa di elementi consigliati.