Livelli di qualità dei widget

I widget sono un componente fondamentale per personalizzare la schermata Home di un utente. Spesso possono aiutare gli utenti a completare un percorso utente fondamentale per un'app con un solo tocco o fornire un riepilogo rapido dei dati più importanti di un'app. Possono anche essere personalizzati in base alle esigenze dell'utente e alle preferenze individuali.

La qualità di un widget può influire sul coinvolgimento degli utenti con i contenuti e le funzionalità della tua app. Ci sono tre livelli principali di qualità dei widget:

  • Livello 3: bassa qualità: non soddisfano la barra di qualità minima e non forniscono un'esperienza utente ottimale.
  • Livello 2: standard di qualità - è utile, utilizzabile e offre un'esperienza di qualità.
  • Livello 1: differenziati: sono widget esemplari che offrono esperienze hero personalizzate e aiutano gli utenti a creare home page uniche e produttive.

Livello 3: bassa qualità

Un widget è considerato di bassa qualità se non soddisfa i criteri standard relativi a layout, colore, scoperta e contenuti. Per ulteriori informazioni su come creare un widget di alta qualità e in linea con le best practice, consulta le seguenti linee guida.

Livello 2 - Standard di qualità

Per essere considerato di buona qualità, il widget soddisfa tutti i seguenti criteri di layout, colore, scoperta e contenuto:

Layout

  • Il widget deve compilare i limiti impostati dalla griglia del programma di avvio quando viene inserito nella schermata Home. Il widget può essere ridimensionato almeno a una delle seguenti dimensioni : 2 x 2, 4 x 2 (celle della griglia del programma di avvio). Per ulteriori informazioni, consulta Linee guida per le dimensioni.
    • Il widget deve essere allineato correttamente agli altri elementi della schermata Home sull'asse verticale o orizzontale e non deve occupare spazio non necessario.
    • Il widget deve toccare almeno due bordi opposti della griglia. In altre parole, i widget non devono essere rettangolari. Possono avere forme personalizzate, a condizione che i bordi della forma tocchino almeno due bordi della griglia.
  • Se sono ridimensionabili, i widget devono avere una dimensione minima o massima appropriata, che può essere impostata con minWidth, minHeight, maxResizeWidth e maxResizeHeight nel file AppWidgetProviderInfo XML
    • La dimensione massima deve essere impostata se la modifica delle dimensioni del widget aggiunge solo spazio vuoto.
    • La dimensione minima deve essere impostata in base a quella minima che il widget continua a offrire valore e soddisfa i requisiti del touch target (48 x 48).

Cosa fare

Fornisci touch target di 48 x 48 dp.

Cosa non fare

I touch target sono troppo piccoli.

Colore

  • I pulsanti di testo e icona dei widget devono avere rapporti di contrasto sufficienti per soddisfare i requisiti di accessibilità (sono escluse miniature e immagini).

Cosa fare

Assicurati un contrasto cromatico sufficiente.

Cosa non fare

Utilizza colori con contrasto insufficiente.

Scoperta

  • Il widget deve avere anteprime accurate nel selettore dei widget. Può essere impostato con previewImage e previewLayout nel XML AppWidgetProviderInfo o con Anteprime generate.

    • L'anteprima del widget ha un aspetto coerente con le funzionalità offerte una volta aggiunta alla schermata Home.
    Video 1: widget con anteprima imprecisa.

Contenuti

  • I contenuti del widget non devono essere costantemente obsoleti o non aggiornati.
    • Il widget deve aggiornarsi dopo che l'utente ha completato un'azione dal widget.
    • Il widget deve aggiornarsi dopo che l'utente ha completato un'azione correlata dall'interno dell'app
  • Il widget deve consentire agli utenti di aggiornare manualmente i contenuti, se si prevede che i dati vengano aggiornati più spesso rispetto alla UI.
  • L'UI del widget deve essere funzionante o i contenuti vengono ritagliati.
  • Gli stati zero e vuoti del widget devono essere intenzionali e devono mostrare il valore del widget o fornire un invito all'azione quando il widget è installato, ma l'utente non ha ancora eseguito l'accesso.
discovery_tier2
Figura 2. Widget con stato vuoto utile.
discovery_tier2
Figura 3. Widget con pulsante di aggiornamento.

Livello 1 - Differenziato

I migliori widget soddisfano tutti i criteri di livello 2 e tutti i seguenti criteri di layout, colore, individuazione e coerenza del sistema.

Layout

  • Il widget riempie i limiti e si allinea correttamente agli altri elementi della schermata Home sull'asse verticale o orizzontale e non occupa spazio non necessario.
    • Tutte le forme DEVONO toccare tutti e quattro i bordi dei limiti della griglia

Cosa fare

Il widget si espande su tutti e quattro i bordi dei limiti della griglia.

Cosa non fare

Crea una dimensione personalizzata che non riempia i limiti della griglia.

  • Il widget supporta una dimensione preferita

    • Il widget può essere ridimensionato in almeno una delle seguenti dimensioni : 2 x 2, 4 x 2

  • L'intestazione del widget viene utilizzata e applicata in modo coerente

    • Consigliamo di utilizzare l'intestazione se:
      • Vuoi fornire link diretti ad alcune funzioni dell'app, come la ricerca.
      • Vuoi applicare un'icona del branding dell'app che funge anche da link coerente all'app al tocco.
      • Il widget contiene contenuti scorrevoli (elenco, griglia e così via)
      • I contenuti dell'intestazione forniscono un contesto utile (nome dell'elenco di cose da fare)
    • L'intestazione è facoltativa quando:
      • Il widget è un'immagine al vivo (Foto)
      • Lo spazio è limitato (altezza inferiore a 2 righe)
      • Quando i contenuti dell'intestazione sono ridondanti.
    • Se utilizzi un'intestazione, rispetta le nostre specifiche:
      • Icona, Titolo, Azioni.
        • L'icona è sempre presente
        • Il titolo viene visualizzato quando lo spazio è sufficiente
        • Azioni basate sul contesto del widget.
      • Altezza 48 dp, spaziatura interna 14 dp

Cosa fare

Fornisci un'intestazione che soddisfi le specifiche del widget.

Cosa non fare

Utilizza specifiche personalizzate per dimensioni e titoli.

Colore

  • Il widget supporta la tavolozza dei colori in base ai temi di sistema, al colore dei contenuti o al colore del brand.
Widget che mostrano temi dinamici
Figura 4. Widget con colori dinamici dello sfondo e colori del tema brandizzati.

Scoperta

Widget con anteprime generiche e di contenuti degli utenti
Figura 5. Widget con contenuti di anteprima generici e contenuti di anteprima dei contenuti degli utenti.
  • Il widget ha un nome o una descrizione che aiuta gli utenti a comprendere il valore del widget.
    • Il nome deve contenere meno di 50 caratteri.
    • Il nome e la descrizione sono univoci all'interno dell'app. Ad esempio, l'app non può avere più widget con lo stesso nome.

Cosa fare

Includi una descrizione concisa e univoca.

Cosa non fare

Fornisci una descrizione generica.

Coerenza del sistema

  • I widget rettangolari devono utilizzare il raggio di curvatura degli angoli fornito dal sistema (specifico dell'OEM)

Cosa fare

Utilizza il raggio dei bordi del sistema.

Cosa non fare

Imposta il raggio dei bordi personalizzato.
Widget con stati di caricamento diversi
Figura 6. Widget con indicatore di caricamento e stato di caricamento personalizzato.
  • Utilizza la configurazione del sistema anziché un punto di contatto delle impostazioni del widget personalizzato
  • Utilizza la transizione di avvio del sistema quando si passa dall'app al widget e viceversa

Ricorda i suggerimenti offerti in questa guida durante la creazione del widget. Vuoi offrire la migliore qualità e un'esperienza utente eccezionale. È possibile ottenere molti livelli di qualità con i layout canonici. Per saperne di più sulle barre di qualità, i designer possono consultare i Modelli di widget Android, mentre gli sviluppatori possono consultare gli Esempi di codice di layout nei nostri Samples della piattaforma e la Guida per gli sviluppatori sui layout.