Creazione di moduli dinamici con l’editor universale - Guida completa
Il panorama web moderno richiede moduli che funzionino perfettamente in uno spettro sempre più ampio di dispositivi e dimensioni dello schermo. Che sia su un grande monitor desktop o sul piccolo display dello smartphone, gli utenti si aspettano esperienze coerenti e intuitive a prescindere dal dispositivo utilizzato. La creazione di moduli dinamici non è più un optional: è un requisito fondamentale per offrire esperienze digitali professionali, accessibili e ottimizzate per la conversione.
L’editor universale fornisce strumenti e metodologie completi per lo sviluppo di moduli dinamici che si adattano in modo intelligente a schermi di varie dimensioni, a diversi metodi di input e al contesto dell'utente. Questa guida illustra le basi tecniche, le strategie di implementazione e le tecniche di ottimizzazione necessarie per creare moduli che offrono prestazioni eccezionali su tutti i dispositivi, mantenendo al contempo l’usabilità, l’accessibilità e l’impatto visivo.
La creazione di moduli reattivi prevede due attività principali:
- Test del comportamento responsive: visualizza in anteprima e testa i moduli su schermi di varie dimensioni utilizzando emulatori di dispositivi.
- Progettazione responsive: seleziona e implementa modelli di layout che si adattano perfettamente a dispositivi diversi.
In questa guida, impererai a:
- Testare moduli su desktop, tablet e dispositivi mobili
- Selezionare i modelli di layout appropriati per il contenuto
- Applicare le best practice per la progettazione reattiva
- Risolvere i problemi comuni relativi ai moduli reattivi
- Ottimizzare i moduli per le prestazioni dei dispositivi mobili
Parte 1: test dei moduli su più dispositivi
Il test dei moduli su dispositivi diversi consente di identificare e risolvere i problemi reattivi prima che gli utenti li riscontrino. L’editor universale fornisce una modalità emulatore per simulare varie dimensioni e orientamenti dello schermo.
Come testare i moduli
Passaggio 1: aprire l’emulatore del dispositivo
- Apri il modulo nell’editor universale
- Fai clic sull’
- Viene visualizzato il menu del selettore del dispositivo.
Passaggio 2: selezionare un dispositivo per il test
- Desktop (larghezza 1200px+): visualizzazione predefinita di modifica
- Tablet (larghezza 768px-1199px): test su schermo medio
- Dispositivi mobili (larghezza 320px-767px): test su schermo piccolo
- Personalizzato: specifica dimensioni esatte per dispositivi specifici
Passaggio 3: testare gli orientamenti del dispositivo
Utilizza l’icona Rotatore schermo per testare entrambe le modalità:
- Modalità verticale: orientamento standard per dispositivi mobili
- Modalità orizzontale: visualizzazione con tablet o telefono ruotato
Risultati dei test sui dispositivi
Ogni tipo di dispositivo rivela comportamenti reattivi univoci:
Esempi visivi per dispositivo
Vista desktop (1200px+):
Layout a larghezza intera con campi modulo affiancati.
Vista tablet (768px-1199px):
Layout a larghezza media con spaziatura dei componenti regolata.
Vista mobile (320px-767px):
Layout a colonna singola con componenti sovrapposti.
Vista dispositivo personalizzata:
Dimensioni specificate dall’utente per il test di destinazione.
Flusso di lavoro di test
Per i nuovi moduli:
- Genera nella vista desktop: inizia con la funzionalità completa.
- Test su tablet: verifica gli adattamenti per gli schermi medi.
- Convalida su dispositivi mobili: garantisci l’usabilità su schermi piccoli.
- Correggi i problemi reattivi: regola i layout in base alle esigenze.
- Ripeti il test su tutti i dispositivi: conferma le correzioni in tutte le dimensioni.
Per i moduli esistenti:
- Controllo rapido per dispositivi mobili: il modulo funziona sui telefoni?
- Identifica le aree problematiche: rileva problemi di layout e usabilità.
- Test sistematici: testa accuratamente le dimensioni di ogni dispositivo.
- Problemi del documento: tieni traccia di ciò che deve essere risolto.
- Correzioni di implementazione: affronta i problemi in modo metodico.
Parte 2: selezione di modelli di layout reattivi
I modelli di layout determinano il modo in cui il contenuto del modulo si adatta alle diverse dimensioni dello schermo. Il modello giusto migliora sia l’esperienza utente che le prestazioni dei dispositivi mobili.
Panoramica sui modelli di layout
Guida rapida alle decisioni
Usa il layout pannello quando:
- Il contenuto è diviso in categorie distinte
- Gli utenti hanno bisogno visualizzare più sezioni contemporaneamente
- Il contenuto è relativamente semplice
Usa il layout procedura guidata quando:
- Il modulo comprende più passaggi logici
- Vuoi ridurre il carico cognitivo
- Il pubblico principale è composto da utenti di dispositivi mobili
Usa il layout pannello a soffietto quando:
- Il modulo contiene contenuto facoltativo o secondario
- Il risparmio di spazio è importante
- Il contenuto può essere raggruppato logicamente
Layout pannello
Il layout pannello organizza il contenuto correlato in sezioni visivamente distinte, consentendo agli utenti di visualizzare più sezioni contemporaneamente. Questo layout è ideale per i moduli con informazioni suddivise in categorie che traggono vantaggio dalla presentazione affiancata su schermi di grandi dimensioni.
Comportamento dinamico
- Desktop (1200 px e oltre): i pannelli vengono visualizzati affiancati o in una griglia per garantire la massima visibilità.
- Tablet (768 px - 1199 px): i pannelli vengono impilati verticalmente con una distanza adeguata per garantire la massima chiarezza.
- Dispositivi mobili (320 px - 767 px): i pannelli vengono presentati in un layout a singola colonna, con una netta separazione tra le sezioni per semplificarne l'esplorazione.
Modalità di implementazione
- Aggiungi il componente Pannello al modulo.
- Raggruppa i campi correlati all’interno di ogni pannello per mantenere un’organizzazione logica.
- Assegna intestazioni chiare e descrittive a ogni sezione del pannello.
- Assicurati che tra i pannelli sia presente spazio sufficiente a impedire disordine visivo.
Best practice
- Limita il numero di pannelli a 3 o 4 sul desktop per evitare di confondere gli utenti.
- Utilizza titoli concisi e descrittivi per ogni pannello, in modo da facilitare la comprensione dell'utente.
- Organizza i campi all’interno dei pannelli in modo logico per ridurre al minimo il carico cognitivo.
- Testa l'esplorazione del pannello su dispositivi touch per garantirne l'usabilità su tutte le piattaforme.
Casi d’uso comuni
- Domanda di lavoro: sezioni per informazioni personali, istruzione, esperienze e referenze.
- Registrazione prodotto: pannelli per detagli di base, specifiche tecniche e informazioni sulla garanzia.
- Moduli sondaggio: raggruppamenti per dati demografici, preferenze, feedback e informazioni di contatto.
Layout procedura guidata
Il layout procedura guidata conduce gli utenti attraverso un processo in più fasi, presentando una sezione alla volta. Questo layout è particolarmente efficace per i moduli complessi, in quanto riduce il carico cognitivo e aumenta i tassi di completamento suddividendo il processo in passaggi gestibili.
Comportamento dinamico
- Tutti i dispositivi: mantiene l'attenzione concentrata su un unico passaggio, ottimale per gli utenti di dispositivi mobili.
- Contenuto in passaggi: ogni passaggio si adatta in modo dinamico, impilando i campi o disponendoli affiancati, in base alle dimensioni dello schermo.
- Esplorazione: presenta pulsanti touch-screen con spazio adeguato per una facile interazione.
- Indicatore di avanzamento: le barre di avanzamento o gli indicatori di passaggio vengono adattati alle dimensioni dei dispositivi, fornendo un feedback chiaro sullo stato di completamento.
Modalità di implementazione
- Inserire il componente Procedura guidata nel modulo.
- Dividi il modulo in passaggi logici, idealmente tra 3 e 7, per mantenere ogni passaggio mirato e gestibile.
- Aggiungi indicatori di progresso per aiutare gli utenti a capire a che punto sono nel processo.
- Fornisci controlli di navigazione chiari, come i pulsanti Avanti, Indietro e Salva.
Suggerimenti di ottimizzazione per dispositivi mobili
- Utilizza campi touch di grandi dimensioni (altezza minima 44 px) per i controlli di navigazione, in modo da migliorarne l’accessibilità.
- Assicurarsi che gli indicatori dei passaggi siano visibili e leggibili su schermi di piccole dimensioni.
- Limita il numero di campi per ogni passaggio, in modo da ridurre al minimo le esigenze di scorrimento e favorire la concentrazione.
- Abilita la funzionalità di salvataggio automatico per evitare la perdita di dati se gli utenti abbandonano il modulo.
Best practice
- Progetta i passaggi in modo da seguire una progressione logica, in cui ogni passaggio si basa su quello precedente.
- Utilizza titoli chiari e descrittivi per ogni passaggio, in modo da definire le aspettative dell’utente.
- Convalida l'input dell'utente ad ogni passaggio per individuare tempestivamente eventuali errori e ridurre la frustrazione.
- Consenti agli utenti di tornare indietro per rivedere o modificare le informazioni precedenti senza perdere dati.
Casi d’uso comuni
- Richieste di risarcimento assicurativo: passaggi per i dettagli dell'incidente, l'invio delle prove, le informazioni personali e la revisione.
- Configurazione di account: fasi per l'inserimento di informazioni di base, preferenze, impostazioni di protezione e conferma.
- Processo di ordinazione: passaggi per la selezione del prodotto, le informazioni di spedizione, i dettagli del pagamento e il riepilogo dell'ordine.
Layout pannello a soffietto
Il layout pannello a soffietto fa risparmiare spazio, consentendo di organizzare i contenuti in sezioni comprimibili ed è ideale per le informazioni facoltative o secondarie. Questo layout è particolarmente efficace per i moduli con contenuti che possono essere raggruppati logicamente e che non devono essere visualizzati contemporaneamente.
Comportamento dinamico
- Prestazioni su dispositivi mobili: viene espansa solo la sezione pertinente, riducendo la necessità di scorrere e migliorando i tempi di caricamento.
- Intestazioni ottimizzate per il tocco: le intestazioni di sezione sono facili da toccare ed espandere, e supportano i movimenti naturali sui dispositivi mobili.
- Animazioni fluide: le sezioni di espansione e compressione forniscono un feedback visivo per le interazioni dell’utente.
- Efficienza dello spazio: le sezioni compresse riducono al minimo lo spazio verticale, semplificando la navigazione del modulo su tutti i dispositivi.
Come implementarlo
- Aggiungi il componente pannello a soffietto al modulo.
- Raggruppa contenuti facoltativi o secondari correlati all’interno di ogni sezione del pannello a soffietto.
- Utilizza intestazioni chiare e descrittive per ogni sezione per aiutare gli utenti a comprendere quali informazioni vi sono contenute.
- Imposta come predefinito lo stato “aperto” o “chiuso” per ogni sezione in base alla rilevanza e alle esigenze dell’utente.
Vantaggi dei dispositivi mobili
- Riduce lo scorrimento comprimendo le sezioni inutilizzate, consentendo agli utenti di concentrarsi su una sezione alla volta.
- L’interazione predisposta per il touch supporta i gesti di espansione/compressione naturali.
- Caricamento più rapido, in quanto è visibile solo il contenuto attivo.
- Maggiore attenzione: gli utenti visualizzano solo le informazioni necessarie in un dato momento.
Best practice
- Utilizza intestazioni di sezione chiare in modo che gli utenti sappiano cosa aspettarsi prima di espanderla.
- Raggruppa in modo logico i contenuti correlati all’interno di ogni sezione per facilitarne la comprensione.
- Imposta le sezioni importanti in modo che inizino espanse se è richiesto un intervento immediato.
- Fornisci brevi anteprime di sezioni o riepiloghi per aiutare gli utenti a decidere quali sezioni espandere.
Casi d’uso comuni
- Configurazione prodotto: sezioni per opzioni di base, impostazioni avanzate, accessori e supporto.
- Domande frequenti sui moduli: raggruppamenti per domande relative a account, fatturazione, tecniche e generali.
- Impostazioni moduli: sezioni per le opzioni privacy, notifiche, aspetto e avanzate.
Parte 3: best practice per la progettazione reattiva
Best practice per tipo di dispositivo
Layout e interazione:
- Utilizza un layout a colonna singola per tutto il contenuto del modulo per massimizzare la leggibilità e la facilità d’uso.
- Assicurati che tutti i pulsanti e gli elementi interattivi abbiano un’altezza di almeno 44 px per un’interazione touch affidabile.
- Fornisci una navigazione semplice e chiara con pulsanti “Indietro” e “Avanti” visibili.
- Riduci al minimo la necessità di scorrere all’interno di ogni sezione suddividendo i moduli lunghi.
- Focalizza automaticamente il primo campo di input per richiedere la tastiera del dispositivo mobile.
Linee guida per i campi:
- I campi di testo devono coprire l’intera larghezza dello schermo con una spaziatura sufficiente per l’input touch.
- Utilizza elementi nativi a discesa e selezionali per un’usabilità ottimale del dispositivo mobile.
- Implementa selettori di date nativi per un’esperienza coerente con il dispositivo mobile.
- Applica alle aree di caricamento dei file etichette grandi e chiare per un facile accesso.
Layout e usabilità:
- Utilizza layout a due colonne per i campi correlati per sfruttare il maggior spazio disponibile sullo schermo.
- Verifica l’aspetto e l’usabilità del modulo sia in orientamento verticale che orizzontale.
- Progetta per l’input touch e con il mouse, garantendo un facile accesso a tutti i controlli.
- Aumenta le dimensioni dell’area del contenuto mantenendo una chiara gerarchia visiva e leggibilità.
Funzioni e layout avanzati:
- Utilizza layout a più colonne per utilizzare in modo efficiente lo spazio orizzontale e ridurre lo scorrimento verticale.
- Fornisci scelte rapide da tastiera per azioni frequenti a supporto degli utenti esperti.
- Implementa stati di passaggio del mouse e feedback visivi per gli elementi interattivi.
- Offri la convalida avanzata con messaggi di errore chiari e dettagliati per i moduli complessi.
Configurare layout personalizzati con punti di interruzione query di file multimediali
Quando crei layout personalizzati per i componenti in Moduli adattivi utilizzando Editor universale, devi definire il comportamento dinamico utilizzando Punti di interruzione per query di file multimediali CSS. In questo modo il rendering dei moduli è corretto su dispositivi e dimensioni di schermo diversi.
Punti di interruzione consigliati (In base ai componenti core di AEM)
min-width: 1200pxmin-width: 768px and max-width: 1199pxmax-width: 767pxPunti chiave
- Utilizza questi punti di interruzione per controllare come i componenti si ridimensionano, sovrappongono o nascondono su dispositivi diversi.
- Segui le linee guida di progettazione dinamica della tua organizzazione per un’esperienza utente coerente.
- Testa i layout su più dispositivi e orientamenti per garantire usabilità e accessibilità.
/* Example: Stack form fields on smaller screens */
@media (max-width: 767px) {
.custom-form-container {
display: flex;
flex-direction: column;
}
}
Risoluzione di problemi
Problemi di layout
Cause possibili:
- Elementi a larghezza fissa che non si adattano a schermi più piccoli
- CSS per desktop che sostituisce gli stili dei dispositivi mobili
- Immagini o contenuti che fuoriescono dai loro contenitori
Come risolvere il problema:
- Assicurati che tutte le immagini e i contenitori utilizzino dimensioni relative o basate su percentuali.
- Inizia con un approccio CSS mobile-first e sovrapponi i miglioramenti per schermi più grandi.
- Testa i moduli utilizzando sia emulatori di dispositivi che dispositivi reali.
- Evita dimensioni fisse; utilizza layout flessibili.
Cause possibili:
- Pulsanti o collegamenti di dimensioni inferiori a 44px per 44px
- Elementi interattivi troppo vicini tra loro
- CSS personalizzato che riduce le dimensioni predefinite delle destinazioni touch
Come risolvere il problema:
- Assicurati che ogni elemento interattivo sia di almeno 44px per 44px.
- Aggiungi una spaziatura adeguata tra pulsanti, collegamenti e altri controlli.
- Testa con dispositivi touch reali, non solo con un mouse.
- Espandi le aree di destinazione touch in base alle esigenze di accessibilità.
Cause possibili:
- Testo lungo o etichette che non vanno a capo
- Contenitori con larghezze fisse
- Immagini che non sono scalabili in modo dinamico
Come risolvere il problema:
- Abilita la disposizione del testo per tutte le etichette e i contenuti.
- Utilizza immagini reattive scalabili con il contenitore.
- Progetta layout flessibili che si adattano alle diverse lunghezze dei contenuti.
- Esegui test con contenuti brevi e lunghi per garantire l’adattabilità.
Problemi relativi alle prestazioni
Cause possibili:
- Immagini grandi e non ottimizzate
- JavaScript pesanti o eccessivi
- Troppi campi modulo caricati contemporaneamente
Come risolvere il problema:
- Ottimizza le immagini per dispositivi mobili e utilizza i formati di file appropriati.
- Differisci o carica lentamente i contenuti non critici.
- Riduci al minimo l’utilizzo di script e widget di terze parti.
- Semplifica i campi modulo per caricare solo ciò che è necessario.
Problemi di test e convalida
Cause possibili:
- Differenze nei motori di rendering del browser
- Interazione touch non accuratamente simulata con il mouse
- Discrepanze nella velocità della rete
Come risolvere il problema:
- Esegui sempre il test su dispositivi reali oltre agli emulatori.
- Utilizza più browser e dispositivi per test completi.
- Simula varie velocità di rete per identificare i colli di bottiglia delle prestazioni.
- Raccogli feedback da utenti reali nel pubblico di destinazione.
Metriche di successo per moduli dinamici
Esperienza utente:
- Tasso di completamento del modulo: esegui l'85% o più sui dispositivi mobili.
- Tempo di completamento: gli utenti mobile devono completare i moduli entro il 20% dei tempi di completamento del desktop.
- Frequenza errori: mantieni gli errori di convalida al di sotto del 5%.
- Punti di abbandono: identifica e indirizza i passaggi in cui gli utenti si ritirano.
Prestazioni tecniche:
- Tempo di caricamento pagina: meno di 3 secondi con una connessione 3G.
- Core Web Vitals: soddisfare o superare le soglie consigliate di Google.
- Accessibilità: raggiungere la conformità WCAG 2.1 AA.
- Compatibilità browser: garantire oltre il 98% di funzionalità in tutti i principali browser.
Elenco di controllo pre-pubblicazione:
- Esegui il test del modulo su dispositivi mobili effettivi (non solo emulatori).
- Assicurarti che tutte le destinazioni touch siano almeno 44px x 44px.
- Verifica la leggibilità del testo a tutte le dimensioni di schermo supportate.
- La convalida del modulo di conferma funziona in modo coerente su dispositivi e browser.
- Assicurati che il tempo di caricamento del dispositivo mobile sia inferiore a 3 secondi.
- Verifica che tutti gli elementi interattivi siano accessibili tramite la tastiera e le utilità di lettura.
- Testa l’invio del modulo su tutti i dispositivi supportati.
Passaggi successivi
Azioni immediate:
- Controlla i moduli correnti: testa i moduli esistenti utilizzando l’emulatore di dispositivi.
- Identifica risultati positivi: risolvi prima i problemi evidenti relativi all’usabilità dei dispositivi mobili.
- Assegna priorità ai moduli a traffico elevato: concentrati sui moduli con l’impatto maggiore sugli utenti.
- Implementa un approccio mobile-first: inizia con la progettazione dello schermo più piccolo.
Ottimizzazione avanzata:
- Monitoraggio delle prestazioni: configura l’analisi per tenere traccia delle metriche dei moduli.
- Test A/B: sperimenta layout e approcci diversi.
- Raccolta feedback degli utenti: raccogli informazioni dagli utenti reali.
- Miglioramento continuo: rivedi e ottimizza regolarmente i moduli.