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 "en un coup d'œil" des données et des fonctionnalités les plus importantes d'une application, qui sont accessibles directement sur l'écran d'accueil de l'utilisateur. Les utilisateurs peuvent déplacer les widgets entre les panneaux de leur écran d'accueil et, si cette fonctionnalité est disponible, les redimensionner pour adapter la quantité d'informations du 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 View Remote et des mises en page XML, consultez Créer un widget simple. Pour créer un widget à l'aide d'API Kotlin et de style 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 appartiennent généralement à l'une des catégories suivantes :

Widgets d'information

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

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

Widgets de collection

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

Les widgets de collection sont généralement utilisés dans les cas d'utilisation suivants:

  • Parcourir la collection.
  • Ouvrir un élément de la collection dans sa vue détaillée dans l'application associée.
  • Interagir avec les é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 des lumières", affichant des boutons bascule intitulés "Chambre", "Cuisine" et "Salon", dont les deux premiers sont désactivés
Figure 4. Exemple de widget de commande.

L'objectif principal d'un widget de commande est d'afficher des 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 commande est un widget de contrôle de la maison qui permet aux utilisateurs d'allumer ou d'éteindre les lumières de la maison.

L'interaction avec un widget de commande peut ouvrir une vue détaillée associée dans l'application. Cela dépend si la fonction du widget de commande génère des données, comme dans le cas d'un widget de recherche.

Widgets hybrides

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

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

Lorsque vous planifiez votre widget, concevez votre widget en fonction 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 exécutent des actions dans l'application, ce qui permet aux utilisateurs de recevoir des réponses rapides et des expériences d'application interactives sur les surfaces de l'Assistant, comme Android et Android Auto. Pour en savoir plus sur le traitement des widgets pour l'Assistant, consultez la section Intégrer les actions dans les applications avec les widgets Android.

Limites des widgets

Bien que les widgets puissent être considérés comme des "mini-applications", certaines limites sont importantes à comprendre avant de concevoir votre widget.

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 disponibles dans un widget par rapport à une application en plein écran. Bien que les applications puissent permettre aux utilisateurs de naviguer horizontalement entre les écrans, ce geste est déjà utilisé sur l'écran d'accueil pour naviguer entre les écrans d'accueil.

Les seuls gestes disponibles pour les widgets sont le contact et le balayer verticalement.

Éléments

En raison des limites imposées aux gestes disponibles pour les widgets, certains composants de l'UI 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 plus d'informations sur les restrictions de mise en page, consultez les pages Créer la mise en page du widget et Fournir des mises en page de widgets flexibles.

Consignes de conception

Contenu du widget

Les widgets sont un excellent moyen d'attirer un utilisateur vers votre application en "publiant" de nouveaux contenus intéressants qui y sont disponibles.

Tout comme les teasers sur la première page d'un journal, les widgets consolident et concentrent les informations d'une application et fournissent un lien vers des détails plus riches dans l'application. On peut dire que le widget est le "snack" d'informations, tandis 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 purement informatif, envisagez de faire en sorte que votre widget fournisse 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 d'étendre la portée fonctionnelle de l'application à l'écran d'accueil.

Les liens de navigation sur les widgets sont les suivants :

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

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

Redimensionnement des widgets

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 passer en mode de redimensionnement. Les utilisateurs peuvent utiliser les poignées de glissement ou les coins du widget pour définir la taille de leur choix.

Le redimensionnement permet aux utilisateurs d'ajuster la hauteur et la largeur d'un widget dans les limites de la grille de placement de l'écran d'accueil. Vous pouvez choisir si votre widget est librement redimensionnable ou limité à des modifications de taille horizontale ou verticale. Vous n'avez pas besoin de prendre en charge le redimensionnement si votre widget est intrinsèquement de taille fixe.

Le fait de laisser les utilisateurs redimensionner les widgets présente des avantages importants:

  • Ils peuvent ajuster la quantité d'informations qu'ils souhaitent voir sur chaque widget.
  • Ils peuvent mieux influencer la mise en page des widgets et des raccourcis sur leurs panneaux d'accueil.

Planifiez une stratégie de redimensionnement pour votre widget en fonction du type de widget que vous créez. Les widgets de collection basés sur une liste ou une grille sont généralement simples, car redimensionner le widget permet d'agrandir ou de réduire la zone de défilement verticale. 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 ils ne sont pas à défilement et tout le contenu doit tenir dans une taille donnée. Vous devez ajuster dynamiquement 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, exposant ainsi des informations plus détaillées sur la météo à l'emplacement actuel à mesure que le widget se développe.

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


Exemple de widget météo de taille "moyenne" (5 x 2), incluant l'ensemble de l'interface utilisateur de la taille de grille 3 x 2, ainsi que le libellé "ciel partiellement nuageux" et les températures prévues de 16h à 19h
Figure 8 : Exemple de widget météo dans une grille de taille moyenne (5 x 2).


Exemple de widget météo de taille "grande" (5 x 4), incluant l'ensemble de l'interface utilisateur des tailles de 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 dans la grille 5x4 de taille "grande".

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

Considérations concernant la mise en page

Il est tentant de mettre en page vos widgets en fonction des dimensions de la grille d'emplacement d'un appareil avec lequel vous développez. Il peut s'agir d'une approximation initiale utile, mais gardez à l'esprit les points suivants:

  • Si vous planifiez votre stratégie de redimensionnement de widget sur des "buckets de taille" plutôt que sur des dimensions de grille variables, vous obtiendrez les résultats les plus fiables.
  • Le nombre, la taille et l'espacement des cellules peuvent varier considérablement d'un appareil à l'autre. Il est donc très important que votre widget soit flexible et puisse s'adapter à 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 précis et des mises en page plus flexibles. Par exemple :

Configuration du widget par les utilisateurs

Parfois, l'utilisateur doit configurer le widget pour qu'il puisse devenir utile. Pensez à un widget de messagerie dans lequel l'utilisateur doit sélectionner le dossier de messagerie avant que la boîte de réception ne puisse s'afficher, ou à un widget photo statique dans lequel l'utilisateur doit attribuer une photo de la galerie à afficher. Les widgets Android affichent leurs options de configuration juste après que l'utilisateur a placé le widget sur un écran d'accueil.

Checklist de conception de widgets

  • Concentrez-vous sur de petites portions d'informations visibles dans votre widget. Développez les informations de votre application.
  • Choisissez le type de widget adapté à votre objectif.
  • Planifiez la façon dont le contenu de votre widget s'adapte à 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 contracter.
  • Déterminez si votre widget nécessite une configuration supplémentaire.