Qualité des widgets

Les widgets sont un composant essentiel pour personnaliser l'écran d'accueil d'un utilisateur. Souvent, les utilisateurs peuvent effectuer un parcours utilisateur critique pour une application d'un simple geste à l'aide de widgets ou obtenir un résumé rapide des mises à jour importantes. Les utilisateurs peuvent également personnaliser les widgets en fonction de leurs préférences.

Checklists de compatibilité des widgets

La qualité des widgets a un impact sur l'engagement utilisateur vis-à-vis du contenu et des fonctionnalités de votre application. Les checklists de compatibilité définissent des critères pour vous aider à évaluer la qualité de votre widget. Les niveaux sont les suivants :

Icône de mauvaise qualité de niveau 3

NIVEAU 3 : faible qualité

Ces widgets ne respectent pas les critères de qualité minimale et offrent une expérience utilisateur médiocre. Un widget est considéré comme de mauvaise qualité s'il ne répond pas aux critères standards de mise en page, de couleur, de découverte et de contenu.

Icône du niveau 2 Standard

NIVEAU 2 – Standard

Ces widgets sont utiles, utilisables et offrent une expérience de qualité.Pour être considéré comme standard, le widget doit répondre à tous les critères de mise en page, de couleur, de découverte et de contenu suivants.

Icône du niveau 1 (différencié)

NIVEAU 1 : différencié

Il s'agit de widgets exemplaires qui offrent des expériences de héros personnalisées et aident les utilisateurs à créer des écrans d'accueil uniques et productifs.


Icône de mauvaise qualité de niveau 3

NIVEAU 3

Caractéristiques d'un widget de mauvaise qualité

Si votre widget peut être décrit par l'un des éléments suivants, il est considéré comme de mauvaise qualité :

Catégorie ID Description
Mise en page WL-1

Lorsqu'un utilisateur place le widget sur la surface hôte, le widget ne remplit pas les limites de la grille hôte.

WL-1.1

Le widget ne touche pas au moins deux bords opposés de la grille. En d'autres termes, les widgets ne doivent pas tous être rectangulaires. Ils peuvent avoir des formes personnalisées, à condition que les bords de la forme touchent au moins deux bords de la grille.

Couleur WC-3

Le contraste des couleurs du texte et des boutons d'icône du widget est insuffisant pour répondre aux exigences d'accessibilité.

Discovery WD-4.2

Le nom du widget n'est pas inclus dans sa conception.

WD-4.3

Le widget n'a pas d'image d'aperçu.

Contenu WT-3

Le contenu du widget est systématiquement obsolète ou inopportun.

WT-3.1

Le widget ne se met pas à jour une fois que l'utilisateur a effectué une action à partir du widget.

WT-3.2

Le widget ne se met pas à jour une fois que l'utilisateur a effectué une action associée dans l'application.

WT-4

L'interface utilisateur du widget ne fonctionne pas ou le contenu est tronqué.

Icône du niveau 2 Standard

NIVEAU 2

Exigences concernant les widgets standards

Les widgets qui répondent à ce niveau de qualité de référence sont considérés comme standards, mais ne sont pas considérés comme des widgets de démonstration qui seront mis en avant ou recommandés.

Catégorie ID Description
Mise en page WL-1

Le widget s'aligne sur les autres éléments hôtes sur l'axe vertical ou horizontal et n'occupe pas d'espace supplémentaire.

WL-1.2

Toutes les formes doivent toucher au moins deux bords opposés des limites de la grille.

WL-4

Si un widget est redimensionnable, définissez une taille minimale et maximale. Réorganisez la mise en page pour afficher plus de contenu à mesure que le widget s'agrandit. Ne redimensionnez pas le texte et les icônes de manière linéaire.

WL-4.1

Si une taille de widget plus grande n'ajoute que de l'espace vide, définissez une largeur ou une hauteur maximale. Lorsqu'un widget plus grand affiche plus de contenu, comme une liste déroulante plus haute, autorisez le redimensionnement sans restriction.

WL-4.2

La taille minimale du widget doit être suffisante pour afficher un cas d'utilisation clair et respecter l'exigence de cible tactile de 48 x 48 dp. Le système peut adapter les cibles tactiles aux écrans d'ordinateur ou de voiture.

Discovery WD-4

Le widget doit avoir des aperçus précis dans le sélecteur de widgets (élément statique).

Contenu WT-1

Les états zéro et vide doivent s'adapter aux limites de widget plus grandes sans zones vides. Lorsqu'un utilisateur installe le widget avant de se connecter, celui-ci doit afficher un cas d'utilisation distinct ou un incitation à l'action.

WT-2

Le widget permet aux utilisateurs d'actualiser manuellement le contenu s'ils s'attendent à ce que les données soient actualisées plus fréquemment que l'UI.

Fournissez des cibles tactiles de 48 x 48 dp.
Créer des cibles tactiles trop petites.
Assurez-vous que le contraste des couleurs est suffisant.
Utiliser des couleurs dont le contraste est insuffisant
Figure 1  : Ne créez pas de widget avec un aperçu inexact.

Icône du niveau 1 (différencié)

NIVEAU 1

Exigences différenciées pour les widgets

Ces widgets sont compatibles avec les personnalisations premium de l'écran d'accueil. Ils seront recommandés aux utilisateurs et présentés aux développeurs comme une bonne pratique. Les widgets différenciés offrent des expériences de premier plan et sont exploités par Android pour inspirer et dynamiser l'écosystème. Ils répondent à tous les critères de mise en page, de couleur, de découverte et de contenu différenciés.

Catégorie ID Description
Mise en page WL-1

Le widget s'aligne sur les autres éléments hôtes sur l'axe vertical ou horizontal et n'occupe pas d'espace supplémentaire.

WL-1.1

Tous les widgets rectangulaires DOIVENT toucher les quatre bords de la grille. Tous les widgets de forme personnalisée DOIVENT toucher les quatre bords des limites d'une grille carrée. Si la taille est de 4x1 et qu'il contient une barre de recherche, il ne peut toucher que deux bords.

WL-2

Les utilisateurs peuvent redimensionner le widget en 2x1 et au moins deux de ces tailles : 1x1, 2x2, 4x2, 4x4.

WL-3

L'en-tête du widget est utilisé et appliqué de manière cohérente.

  • Nous vous recommandons d'utiliser un en-tête si :
    • Le widget contient du contenu à défilement.
    • Le contenu de l'en-tête fournit un contexte utile, comme le nom d'une liste.
  • L'utilisation d'un en-tête est facultative dans les cas suivants :
    • Le widget est à fond perdu, comme un widget photo.
    • Le nombre de places est limité.
    • Lorsque le contenu de l'en-tête est redondant.
  • Si vous utilisez un en-tête, assurez-vous que :
    • L'icône est toujours présente
    • Le titre s'affiche lorsque l'espace est suffisant
    • Les actions sont basées sur le contexte du widget.
WL-5

Les widgets de collection et de flux sont compatibles avec les conteneurs à défilement vertical. Dans des tailles plus grandes, comme 4x2 et 4x4, ces widgets affichent plus d'éléments et plus de détails par élément.

Couleur WC-1

Le widget est compatible avec les thèmes de couleurs basés sur le contexte d'un appareil ou d'une application.

WC-2

Le widget est compatible avec les palettes de thèmes clair et sombre.

Discovery WD-1

L'aperçu montre les proportions de la mise en page pour le facteur de forme cible et inclut le contenu utilisateur, applique un thème système ou les deux.

WD-4.4

Le widget comporte une description qui aide les utilisateurs à comprendre son utilité.

WD-4.5

Le nom du widget est descriptif et unique par rapport aux autres widgets de l'application.

Cohérence du système WS-2

Les widgets rectangulaires doivent utiliser le rayon d'angle fourni par le système (spécifique à l'OEM).

WS-3

Le widget utilise la spécification de l'état de chargement et affiche les erreurs directement dans l'UI du widget.

WS-4

Le widget utilise la configuration du système au lieu d'un point d'entrée de paramètres de widget personnalisé.

WS-5

Le widget utilise la transition de lancement du système lors de l'ouverture/la fermeture de l'application à partir du widget.

Faites en sorte que le widget s'étende jusqu'aux quatre bords de la grille.
Créez une taille personnalisée qui ne remplit pas les limites de la grille.
Fournissez un en-tête conforme aux spécifications du widget.
Utilisez des spécifications personnalisées pour la taille et les titres.
Incluez une description succincte et unique.
Fournissez une description générique.
Utilisez le rayon d'angle du système.
Définissez un rayon d'angle personnalisé.