Présentation des widgets d'application

Les widgets sont un aspect essentiel de la personnalisation de l'écran d'accueil. Vous pouvez les considérer comme des vues "instantanées" des données et des fonctionnalités les plus importantes d'une application, accessibles directement sur l'écran d'accueil de l'utilisateur. Les utilisateurs peuvent déplacer des widgets sur les panneaux de leur écran d'accueil et, si cela est possible, les redimensionner pour adapter la quantité d'informations dans le widget à leurs préférences.

Cette documentation présente les différents types de widgets que vous pouvez créer et les principes de conception à suivre. Pour créer un widget d'application à l'aide des API Delete View et des mises en page XML, consultez Créer un widget simple. Pour créer un widget à l'aide des API de style Kotlin et Compose, consultez Jetpack Glance.

Types de widgets

Lorsque vous planifiez votre widget, réfléchissez au type de widget que vous souhaitez créer. Les widgets entrent généralement dans l'une des catégories suivantes:

Widgets d'informations

Exemple de widget météo affichant la ville de Tokyo avec un ciel principalement nuageux, avec une température de 14 degrés et la température prévue de 16h à 19h
Figure 1. Widget d'informations d'une application météo

Les widgets d'informations affichent généralement des éléments d'information essentiels et suivent l'évolution de ces informations au fil du temps. Les widgets météo, les widgets d'horloge ou les widgets de suivi de résultats sportifs sont des exemples de widgets d'information. Appuyer sur un widget d'informations lance généralement l'application associée et ouvre une vue détaillée des informations du widget.

Widgets des collections

Les widgets de collection sont spécialisés dans l'affichage de plusieurs éléments du même type, tels qu'une collection d'images d'une application de galerie, une collection d'articles d'une application d'actualités ou une collection d'e-mails ou de messages d'une application de communication. Les widgets de collection peuvent défiler verticalement.

Les widgets de collection se concentrent généralement sur les cas d'utilisation suivants:

  • Parcourir la collection.
  • Ouverture d'un élément de la collection dans sa vue détaillée dans l'application associée.
  • Interagir avec des éléments, par exemple les marquer comme terminés, avec prise en charge des boutons composés dans Android 12 (niveau d'API 31)

Contrôler les widgets

Widget d'une application appelée "Liste d'éclairage", affichant des interrupteurs libellés "Chambre", "Cuisine" et "Salon", avec les deux premiers interrupteurs désactivés.
Figure 4. Exemple de widget de commande

L'objectif principal d'un widget de commande est d'afficher les fonctions fréquemment utilisées afin que l'utilisateur puisse les déclencher depuis l'écran d'accueil sans avoir à ouvrir l'application. Vous pouvez les considérer comme des télécommandes pour une application. Un exemple de widget de contrôle est un widget de contrôle de la maison qui permet aux utilisateurs d'allumer ou d'éteindre les lumières de la maison.

Interagir avec un widget de commande peut ouvrir une vue détaillée associée dans l'application. Cela varie selon que la fonction du widget de commande génère des données, comme dans le cas d'un widget Recherche.

Widgets hybrides

Application de musique générale affichant les boutons "Je n'aime pas", "Retour", "Lecture/Pause", "Suivant" et "J'aime". L'artiste et le titre sont listés respectivement dans les catégories "Artiste" et "Exemple de musique".
Figure 5 : Exemple de widget d'application musicale

Bien que certains widgets représentent l'un des types décrits dans les sections précédentes (informations, collection ou contrôle), de nombreux widgets sont des hybrides qui combinent des éléments de types différents. Par exemple, un widget de lecteur de musique est avant tout un widget de commande, mais il indique également à l'utilisateur le titre en cours de lecture, comme un widget d'informations.

Lorsque vous planifiez votre widget, concevez autour de l'un des types de base et ajoutez des éléments d'autres types si nécessaire.

Intégrer des widgets à l'Assistant Google

L'Assistant Google peut afficher n'importe quel type de widget en réponse aux commandes vocales de l'utilisateur. Vous pouvez configurer vos widgets pour qu'ils traitent les actions dans les applications, ce qui permet aux utilisateurs de recevoir des réponses rapides et des expériences interactives dans les applications sur des surfaces de l'Assistant telles qu'Android et Android Auto. Pour en savoir plus sur le traitement des widgets pour l'Assistant, consultez Intégrer les actions dans les applications avec les widgets Android.

Limites des widgets

Bien que les widgets puissent être interprétés comme des "mini-applications", il existe certaines limites qu'il est important de comprendre avant de les concevoir.

Gestes

Étant donné que les widgets se trouvent sur l'écran d'accueil, ils doivent coexister avec la navigation qui y est établie. Cela limite la prise en charge des gestes dans un widget par rapport à une application plein écran. Bien que les applications puissent permettre aux utilisateurs de naviguer horizontalement, ce geste est déjà effectué sur l'écran d'accueil afin de naviguer entre les écrans d'accueil.

Les seuls gestes disponibles pour les widgets sont le tactile et le balayage vertical.

Éléments

Compte tenu des limites liées aux gestes disponibles pour les widgets, certains composants de base de l'interface utilisateur qui reposent sur des gestes restreints ne sont pas disponibles pour les widgets. Pour obtenir la liste complète des composants de base compatibles et en savoir plus sur les restrictions de mise en page, consultez Créer la mise en page de widget et Fournir des mises en page de widget flexibles.

Consignes de conception

Contenu du widget

Les widgets sont un excellent moyen d'attirer un utilisateur vers votre application en faisant la promotion d'un contenu nouveau et intéressant disponible dans votre application.

Tout comme les bandes-annonces en première page d'un journal, les widgets consolident et regroupent les informations d'une application et fournissent un lien avec des détails plus détaillés dans l'application. Vous pouvez dire que le widget correspond à l'information "en-cas" alors que l'application est le "repas". Assurez-vous que votre application affiche plus de détails sur un élément d'information que ce que le widget affiche.

En plus du contenu informatif uniquement, vous pouvez demander à votre widget de fournir des liens de navigation vers les zones fréquemment utilisées de votre application. Cela permet aux utilisateurs d'effectuer des tâches plus rapidement et étend la portée fonctionnelle de l'application à l'écran d'accueil.

Voici les bons candidats pour les liens de navigation dans les widgets:

  • Fonctions génératives:il s'agit des fonctions qui permettent à l'utilisateur de créer du contenu pour une application, par exemple un document ou un message.

  • Ouvrez l'application au premier niveau:appuyer sur un élément d'information redirige généralement l'utilisateur vers un écran détaillé de niveau inférieur. Donner accès au niveau supérieur de votre application offre plus de flexibilité de navigation et peut remplacer un raccourci d'application dédié que les utilisateurs utilisent autrement pour accéder à l'application depuis l'écran d'accueil. L'utilisation de l'icône d'application pour cette fonctionnalité peut également fournir à votre widget une identité claire si les données que vous affichez sont ambiguës.

Redimensionnement du widget

Widget Horloge Google standard
Figure 6 : Widget Horloge Google standard.

Appuyez de manière prolongée sur un widget redimensionnable, puis relâchez-le pour le faire passer en mode de redimensionnement. Les utilisateurs peuvent définir la taille souhaitée à l'aide des poignées de déplacement ou des coins du widget.

Le redimensionnement permet aux utilisateurs d'ajuster la hauteur et la largeur d'un widget dans les limites de la grille de positionnement de l'écran d'accueil. Vous pouvez décider si votre widget peut être redimensionné librement ou soumis à des changements de taille à l'horizontale ou à la verticale. Vous n'avez pas besoin de permettre le redimensionnement si la taille de votre widget est intrinsèquement fixe.

Permettre aux utilisateurs de redimensionner les widgets présente des avantages importants:

  • Ils peuvent choisir la quantité d'informations qu'ils souhaitent voir sur chaque widget.
  • Ils peuvent mieux influencer la disposition des widgets et des raccourcis dans leurs panneaux d'accueil.

Planifiez une stratégie de redimensionnement de votre widget en fonction du type de widget que vous créez. Les widgets de collection basés sur des listes ou des grilles sont généralement simples, car leur redimensionnement développe ou réduit la zone de défilement vertical. Quelle que soit la taille du widget, l'utilisateur peut toujours faire défiler tous les éléments d'information pour les afficher.

Les widgets d'informations nécessitent une planification plus pratique, car il n'est pas possible de les faire défiler, et tout le contenu doit s'adapter à une taille donnée. Vous devez ajuster de manière dynamique le contenu et la mise en page de votre widget à la taille définie par l'utilisateur via l'opération de redimensionnement.

Dans l'exemple qui suit, l'utilisateur peut redimensionner un widget météo en trois étapes, ce qui permet d'afficher des informations plus détaillées sur la météo du lieu actuel à mesure que le widget s'agrandit.

Exemple de widget météo dans la plus petite taille de grille 3x2, avec le nom du lieu (Tokyo), la température (14°) et le symbole indiquant un temps partiellement nuageux
Figure 7 : Exemple de widget météo dans une grille 3x2 de taille "petite"


Exemple de widget météo au format "moyenne" de 5 x 2, incluant l'ensemble de l'interface utilisateur de la grille 3 x 2, l'étiquette "assez nuageux" et la prévision des températures de 16h à 19h
Figure 8 : Exemple de widget météo dans une grille de 5x2 de taille moyenne


Exemple de widget météo au format "grand" de 5 x 4, incluant toutes les interfaces des grilles 3 x 2 et 5 x 2, ainsi qu'une prévision météo du mardi au vendredi
Figure 9. Exemple de widget météo en "grand" quadrillage 5x4.

Pour chaque taille de widget, déterminez la quantité d'informations de votre application qui s'affichent. Pour les tailles plus petites, concentrez-vous sur les informations essentielles, puis ajoutez des informations contextuelles à mesure que le widget s'agrandit horizontalement et verticalement.

Remarques concernant la mise en page

Il est tentant de disposer vos widgets en fonction des dimensions de la grille de placement d'un appareil avec lequel vous développez. Cette estimation initiale peut être utile, mais gardez à l'esprit les points suivants:

  • Pour obtenir les résultats les plus fiables, planifiez votre stratégie de redimensionnement des widgets sur des "buckets de taille" plutôt que sur des dimensions variables de grille.
  • Le nombre, la taille et l'espacement des cellules peuvent varier considérablement d'un appareil à l'autre. Par conséquent, il est très important que votre widget soit flexible et puisse accueillir plus ou moins d'espace que prévu.
  • Lorsque l'utilisateur redimensionne un widget, le système répond avec une plage de tailles dp dans laquelle votre widget peut se redessiner.
  • À partir d'Android 12, vous pouvez fournir des attributs de taille plus affinés et des mises en page plus flexibles. Par exemple :

Configuration des widgets par les utilisateurs

Parfois, l'utilisateur doit configurer le widget avant qu'il ne soit utile. Pensez à un widget d'e-mail dans lequel l'utilisateur doit sélectionner le dossier de messagerie avant que la boîte de réception puisse être affichée ou à un widget de photo statique où l'utilisateur doit attribuer une image de la galerie à afficher. Les widgets Android affichent leurs choix de configuration juste après que l'utilisateur les dépose sur un écran d'accueil.

Liste de contrôle pour la conception de widgets

  • Concentrez-vous sur de petites parties des informations lisibles en un coup d'œil sur votre widget. Développez les informations de votre application.
  • Choisissez le type de widget adapté à vos besoins.
  • Planifiez l'adaptation du contenu de votre widget aux différentes tailles.
  • Faites en sorte que la mise en page de votre widget soit indépendante de l'orientation et de l'appareil en vous assurant qu'elle peut s'étirer et se réduire.
  • Déterminez si votre widget nécessite une configuration supplémentaire.