Les widgets sont un élément essentiel pour personnaliser l'écran d'accueil d'un utilisateur. Ils peuvent souvent aider les utilisateurs à effectuer un parcours utilisateur essentiel pour une application en un seul geste ou à fournir un résumé rapide des données les plus importantes d'une application. Ils peuvent également être personnalisés en fonction des besoins de l'utilisateur et de ses préférences individuelles.
La qualité d'un widget peut avoir un impact sur l'engagement des utilisateurs avec le contenu et les fonctionnalités de votre application. Il existe trois niveaux principaux de qualité des widgets:
- Niveau 3: qualité faible – ne répondent pas au critère de qualité minimal et n'offrent pas une expérience utilisateur de qualité.
- Niveau 2 : norme de qualité : utile, utilisable et offrant une expérience de qualité.
- Niveau 1 : Différencié : widgets exemplaires offrant des expériences personnalisées et des héros, et aidant les utilisateurs à créer des écrans d'accueil uniques et productifs.
Niveau 3: basse qualité
Un widget est considéré comme de mauvaise qualité s'il ne respecte pas les critères standards de mise en page, de couleur, de découverte et de contenu. Pour en savoir plus sur la création d'un widget de haute qualité conforme aux bonnes pratiques, consultez les consignes suivantes.
Niveau 2 : qualité standard
Pour être considéré comme de bonne qualité, le widget doit répondre à tous les critères suivants concernant la mise en page, la couleur, la découverte et le contenu:
Mise en page
- Le widget doit remplir les limites définies par la grille du lanceur d'applications lorsqu'il est placé sur l'écran d'accueil. Le widget peut être redimensionné dans l'une des tailles suivantes : 2 x 2, 4 x 2 (cellules de la grille du lanceur d'applications).
Pour en savoir plus, consultez les consignes de dimensionnement.
- Le widget doit s'aligner correctement sur les autres éléments de l'écran d'accueil sur l'axe vertical ou horizontal, et ne pas occuper d'espace inutile.
- Le widget doit toucher au moins deux bords opposés de la grille. Autrement dit, les widgets n'ont pas besoin d'être rectangulaires. Ils peuvent avoir des formes personnalisées, à condition que les bords de la forme touchent au moins deux bords de la grille.
- Si les widgets sont redimensionnables, ils doivent avoir une taille minimale ou maximale appropriée, qui peut être définie avec
minWidth
,minHeight
,maxResizeWidth
etmaxResizeHeight
dans le fichier XML AppWidgetProviderInfo.- La taille maximale doit être définie si redimensionner le widget n'ajoute que de l'espace vide.
- La taille minimale doit être définie en fonction de la taille minimale de votre widget qui offre toujours de la valeur et répond aux exigences concernant les zones cibles tactiles (48 x 48).
Couleur
- Le texte et les boutons d'icône du widget doivent présenter des ratios de contraste suffisants pour répondre aux exigences d'accessibilité (exclut les miniatures et les images).
Découverte
Les widgets doivent comporter des aperçus précis dans le sélecteur de widgets. Cela peut être défini avec
previewImage
etpreviewLayout
dans le fichier XML AppWidgetProviderInfo ou avec les aperçus générés.- L'aperçu du widget est cohérent avec les fonctionnalités proposées lorsqu'il est ajouté à l'écran d'accueil.
Vidéo 1 : le widget présente un aperçu inexact.
Contenu
- Le contenu des widgets ne doit pas être obsolète ou inopportun de manière systématique.
- Le widget doit se mettre à jour une fois que l'utilisateur a effectué une action à partir de celui-ci.
- Le widget doit être mis à jour après que l'utilisateur a effectué une action associée dans l'application.
- Le widget doit permettre aux utilisateurs d'actualiser manuellement le contenu, si l'on s'attend à ce que les données soient actualisées plus fréquemment que l'UI.
- L'UI du widget doit être fonctionnelle ou le contenu doit être recadré.
- Les états nuls et vides du widget doivent être intentionnels et doivent afficher la valeur du widget ou fournir un appel à l'action lorsque le widget est installé, mais que l'utilisateur n'est pas encore connecté.
Niveau 1 - Différencié
Les meilleurs widgets répondent à tous les critères de niveau 2 et à tous les critères de mise en page, de couleur, de découverte et de cohérence du système suivants.
Mise en page
- Le widget remplit les limites et s'aligne correctement sur les autres éléments de l'écran d'accueil sur l'axe vertical ou horizontal, et n'occupe pas d'espace inutile.
- Toutes les formes DOIVENT toucher les quatre bords des limites de la grille.
Le widget est compatible avec une taille préférée
- Le widget peut être redimensionné dans au moins l'une des tailles suivantes : 2 x 2, 4 x 2
L'en-tête du widget est utilisé et appliqué de manière cohérente
- Nous vous recommandons d'utiliser un en-tête dans les cas suivants :
- Vous souhaitez fournir des liens profonds vers certaines fonctionnalités de l'application, comme la recherche.
- Vous souhaitez appliquer une icône de branding d'application qui sert également de lien cohérent vers l'application en cas de pression.
- Le widget contient du contenu à faire défiler (liste, grille, etc.)
- Le contenu de l'en-tête fournit un contexte utile (nom de la liste de tâches)
- L'en-tête est facultatif dans les cas suivants :
- Le widget est une image à fond perdu (Photos)
- L'espace est limité (< 2 lignes de haut)
- Lorsque le contenu de l'en-tête est redondant
- Si vous utilisez un en-tête, respectez nos spécifications :
- Icône, titre, actions.
- L'icône est toujours présente
- Le titre s'affiche lorsque l'espace disponible est suffisant
- Actions basées sur le contexte du widget.
- Hauteur : 48 dp, Rembourrage : 14 dp
- Icône, titre, actions.
- Nous vous recommandons d'utiliser un en-tête dans les cas suivants :
Couleur
- Le widget est compatible avec la palette de couleurs basée sur la thématisation du système, la couleur du contenu ou la couleur de la marque.
- Le widget est compatible avec les palettes Mode clair et sombre.
- La couleur dynamique est un exemple de thématisation du contexte de l'appareil.
- L'extraction de couleurs locales est un exemple de thématisation basée sur le contenu de l'application.
- La couleur sémantique est un exemple de thématisation basée sur le contenu de l'application.
Découverte
- L'aperçu inclut du contenu utilisateur ou applique le thème du système (API Generated Previews ou
previewLayout
dans le fichier XML AppWidgetProviderInfo).
- Le widget a un nom ou une description qui aide les utilisateurs à comprendre sa valeur.
- Le nom comporte moins de 50 caractères.
- Le nom et la description sont uniques au sein de l'application. Par exemple, l'application ne peut pas avoir plusieurs widgets portant le même nom.
Cohérence du système
- Les widgets rectangulaires doivent utiliser le rayon des coins fourni par le système (spécifique à l'OEM)
- Indique un état de chargement avec un indicateur de progression (dans un
initialLayout
avec une couleur thématique ou un équivalent de la marque).
- Utilise la configuration du système au lieu d'un point d'entrée de paramètres de widget personnalisé
- Utilise la transition de lancement du système lorsque vous accédez ou quittez une application pour un widget
Tenez compte des conseils fournis dans ce guide lorsque vous créez votre widget. Vous souhaitez offrir la meilleure qualité et une expérience utilisateur optimale. De nombreuses barres de qualité peuvent être atteintes avec les mises en page canoniques. Pour en savoir plus sur les barres de qualité, les concepteurs se reporteront aux modèles de widgets Android, et les développeurs à consulter les exemples de code de mise en page dans nos exemples de plate-forme et le guide du développeur pour les mises en page.