Panoramica dei widget delle app

I widget sono un aspetto essenziale della personalizzazione della schermata Home. Possono essere considerate come visualizzazioni "riassuntive" delle funzionalità e dei dati più importanti di un'app, accessibili direttamente dalla schermata Home dell'utente. Gli utenti possono spostare i widget nei riquadri della schermata Home e, se supportati, ridimensionarli per personalizzare la quantità di informazioni nel widget in base alle loro preferenze.

Questa documentazione illustra i diversi tipi di widget che puoi creare e i principi di progettazione da seguire. Per creare un widget dell'app usando le API Rimuovi View e i layout XML, consulta Creare un widget semplice. Per creare un widget utilizzando le API di stile Kotlin e Compose, consulta Jetpack Glance.

Tipi di widget

Quando pianifichi il widget, pensa al tipo di widget che vuoi creare. Generalmente i widget rientrano in una delle seguenti categorie:

Widget di informazioni

Esempio di widget meteo che mostra Tokyo con cielo prevalentemente nuvoloso con 14 gradi e temperatura prevista dalle 16:00 alle 19:00
Figura 1. Un widget di informazioni di un'app meteo.

I widget informativi in genere mostrano elementi informativi fondamentali e monitorano le modifiche nel tempo. Esempi di widget informazioni sono widget meteo, widget orologio o widget per il monitoraggio dei risultati sportivi. Quando si toccano i widget informazioni, in genere viene avviata l'app associata e si apre una visualizzazione dettagliata delle informazioni dei widget.

Widget raccolta

I widget di raccolta sono specializzati nella visualizzazione di più elementi dello stesso tipo, ad esempio una raccolta di immagini di un'app Galleria, una raccolta di articoli di un'app di notizie o una raccolta di email o messaggi di un'app di comunicazione. I widget delle raccolte possono scorrere in verticale.

I widget di raccolta sono generalmente incentrati sui seguenti casi d'uso:

  • Sfogliare la raccolta.
  • Apertura di un elemento della raccolta nella relativa visualizzazione dei dettagli nell'app associata.
  • Interazione con gli elementi, ad esempio contrassegnarli come completati, con il supporto dei pulsanti composti in Android 12 (livello API 31).

Controlla i widget

Un widget per un'app chiamata "Elenco luci", che mostra interruttori di attivazione/disattivazione con etichetta "Stanza da letto", "Cucina" e "Salotto", con i primi due interruttori disattivati
Figura 4. Esempio di un widget di controllo.

Lo scopo principale di un widget di controllo è mostrare le funzioni utilizzate di frequente in modo che l'utente possa attivarle dalla schermata Home senza dover aprire l'app. Puoi considerarle come telecomandi di un'app. Un esempio di widget di controllo è un widget per il controllo della casa che consente agli utenti di accendere o spegnere le luci in casa.

L'interazione con un widget di controllo potrebbe aprire una vista dettagliata associata nell'app. Ciò dipende dall'output dei dati da parte della funzione del widget di controllo, ad esempio nel caso di un widget di ricerca.

Widget ibridi

Un'app di musica generica che mostra i pulsanti "Non mi piace", Indietro, Riproduci/metti in pausa, Avanti e "Non mi piace". L'artista e la traccia sono indicati rispettivamente come "Artista" e "Musica di esempio".
Figura 5. Esempio di widget dell'app di musica.

Sebbene alcuni widget rappresentino uno dei tipi descritti nelle sezioni precedenti (informazioni, raccolta o controllo), molti widget sono ibridi che combinano elementi di tipi diversi. Ad esempio, un widget per il lettore musicale è principalmente un widget di controllo, ma mostra all'utente anche la traccia attualmente in riproduzione, come un widget di informazioni.

Quando pianifichi il widget, progetta il tuo widget in base a uno dei tipi di base e aggiungi elementi di altri tipi in base alle esigenze.

Integrare widget con l'Assistente Google

Qualsiasi tipo di widget può essere visualizzato dall'Assistente Google in risposta ai comandi vocali dell'utente. Puoi configurare i widget per completare le azioni app, consentendo agli utenti di ricevere risposte rapide ed esperienze interattive con le app su piattaforme come Android e Android Auto. Per maggiori dettagli sulla distribuzione dei widget per l'assistente, consulta Integrare le azioni app con i widget Android.

Limitazioni dei widget

Anche se i widget possono essere intesi come "mini app", esistono alcune limitazioni che è importante comprendere prima di progettare il widget.

Gesti

Poiché i widget sono presenti nella schermata Home, devono coesistere con la navigazione impostata da lì. Ciò limita il supporto dei gesti disponibile in un widget rispetto a un'app a schermo intero. Sebbene le app possano consentire agli utenti di spostarsi tra le schermate in orizzontale, questo gesto viene già eseguito nella schermata Home per navigare tra le schermate Home.

Gli unici gesti disponibili per i widget sono il touch e lo scorrimento verticale.

Elementi

Considerate le limitazioni relative ai gesti disponibili per i widget, alcuni componenti di base dell'interfaccia utente che si basano sui gesti limitati non sono disponibili per i widget. Per un elenco completo dei componenti di base supportati e ulteriori informazioni sulle limitazioni del layout, consulta Creare il layout dei widget e Fornire layout flessibili dei widget.

Linee guida per la progettazione

Contenuti del widget

I widget sono un ottimo modo per attirare un utente sulla tua app "pubblicizzando" contenuti nuovi e interessanti disponibili nella tua app.

Proprio come i teaser sulla prima pagina di un giornale, i widget consolidano e concentrano le informazioni di un'app e forniscono una connessione con i dettagli più ricchi all'interno dell'app. Potresti dire che il widget è lo "snack" informativo, mentre l'app è il "pasto". Assicuratevi che l'app mostri più dettagli su un'informazione rispetto a ciò che mostra il widget.

Oltre ai contenuti informativi puri, ti consigliamo di fare in modo che il widget fornisca link di navigazione alle aree utilizzate di frequente della tua app. In questo modo gli utenti possono completare le attività più rapidamente ed estendere la copertura funzionale dell'app alla schermata Home.

I link di navigazione nei widget sono validi:

  • Funzioni generative: sono le funzioni che consentono all'utente di creare nuovi contenuti per un'app, ad esempio la creazione di un nuovo documento o di un nuovo messaggio.

  • Aprire l'app al livello superiore: toccando un elemento informativo in genere l'utente viene indirizzato a una schermata dei dettagli di livello inferiore. Fornire l'accesso al livello superiore dell'applicazione offre una maggiore flessibilità di navigazione e può sostituire una scorciatoia dell'app dedicata che gli utenti altrimenti usano per accedere all'app dalla schermata Home. L'utilizzo dell'icona dell'applicazione per questa funzionalità può anche fornire al widget un'identità chiara se i dati visualizzati sono ambigui.

Ridimensionamento widget

Widget orologio Google standard
Figura 6. Widget dell'orologio Google standard.

Toccando e tenendo premuto un widget ridimensionabile, quindi rilasciandolo si attiva la modalità di ridimensionamento del widget. Gli utenti possono utilizzare i punti di manipolazione di trascinamento o gli angoli del widget per impostare le dimensioni preferite.

Il ridimensionamento consente agli utenti di regolare l'altezza e la larghezza di un widget all'interno dei vincoli della griglia di posizionamento della schermata Home. Puoi decidere se il widget può essere ridimensionabile liberamente o vincolato a modifiche delle dimensioni orizzontali o verticali. Non è necessario supportare il ridimensionamento se il widget ha dimensioni intrinsecamente fisse.

Consentire agli utenti di ridimensionare i widget offre importanti vantaggi:

  • Possono perfezionare la quantità di informazioni che vogliono vedere su ogni widget.
  • Possono influire meglio sul layout di widget e scorciatoie sui pannelli Home.

Pianifica una strategia di ridimensionamento per il widget in base al tipo di widget che stai creando. I widget di raccolta basati su elenchi o griglia sono in genere semplici, poiché il ridimensionamento del widget espande o contrae l'area di scorrimento verticale. Indipendentemente dalle dimensioni del widget, l'utente può comunque far scorrere tutti gli elementi informativi.

I widget di informazioni richiedono una pianificazione più pratica poiché non sono scorribili e tutti i contenuti devono rientrare in una determinata dimensione. Devi regolare dinamicamente i contenuti e il layout del widget in base alle dimensioni definite dall'utente tramite l'operazione di ridimensionamento.

Nell'esempio che segue, l'utente può ridimensionare un widget meteo in tre passaggi, mostrando informazioni più complete sul meteo nella posizione corrente man mano che il widget cresce.

Esempio di widget meteo nella dimensione più piccola della griglia 3x2, con un elenco di
            nome della località (Tokyo), temperatura (14°) e simbolo che indica
            tempo parzialmente nuvoloso
Figura 7. Esempio di widget meteo in una griglia "piccola" 3x2.


Esempio di widget meteo in formato "medio" 5 x 2 che include tutta l'interfaccia utente con la dimensione 3x2 della griglia più l'etichetta "per lo più nuvoloso" e le temperature previste dalle 16:00 alle 19:00
Figura 8. Esempio di widget meteo in una griglia "medium" 5x2.


Esempio di widget meteo in formato "large" 5 x 4 che include tutte le UI
            delle dimensioni a griglia 3x2 e 5x2, oltre a previsioni meteo
            da martedì a venerdì
Figura 9. Esempio di widget meteo nel formato "large" 5x4.

Per ogni dimensione del widget, determina quante informazioni dell'app vengono visualizzate. Per le dimensioni più piccole, concentrati sulle informazioni essenziali, quindi aggiungi informazioni contestuali man mano che il widget cresce orizzontalmente e verticalmente.

Considerazioni sul layout

Si è tentati di disporre i widget in base alle dimensioni della griglia di posizionamento di un dispositivo con cui sviluppi. Questa può essere un'approssimazione iniziale utile, ma tieni presente quanto segue:

  • La pianificazione della strategia di ridimensionamento del widget in "bucket di dimensioni" anziché in dimensioni della griglia variabili ti offre i risultati più affidabili.
  • Il numero, la dimensione e la spaziatura delle celle possono variare notevolmente da un dispositivo all'altro. Di conseguenza, è molto importante che il widget sia flessibile e possa ospitare più o meno spazio del previsto.
  • Quando l'utente ridimensiona un widget, il sistema risponde con un intervallo di dimensioni dp in cui il widget può essere ridisegnato automaticamente.
  • A partire da Android 12, puoi fornire attributi relativi alle dimensioni più perfezionati e layout più flessibili. Ad esempio:

Configurazione del widget da parte degli utenti

A volte, l'utente deve configurare il widget prima che possa tornare utile. Pensa a un widget email in cui l'utente deve selezionare la cartella della posta prima che possa essere visualizzata la posta in arrivo o a un widget di foto statico in cui l'utente deve assegnare un'immagine della galleria da visualizzare. I widget Android mostrano le scelte di configurazione subito dopo che l'utente rilascia il widget in una schermata Home.

Elenco di controllo per la progettazione di widget

  • Concentrati su piccole porzioni di informazioni visibili sul tuo widget. Espandi le informazioni nella tua app.
  • Scegli il tipo di widget adatto al tuo scopo.
  • Pianifica in che modo i contenuti del widget si adattano alle diverse dimensioni.
  • Rendi il layout del widget indipendente dall'orientamento e dal dispositivo assicurandoti che possa allungarsi e contrarsi.
  • Valuta se il widget necessita di una configurazione aggiuntiva.