Recommandations en matière de contrôles Hub dans les applications du Windows Phone Store

Article
04/07/2015

Parties du contrôle Hub (en-tête du Hub, en-tête de section du Hub, etc.)

Description

Le contrôle Hub (sur le téléphone, destiné à être utilisé en mode portrait uniquement) affiche une série de sections qui peuvent faire l’objet d’un mouvement panoramique latéral. Il représente le conteneur plein écran et le modèle de navigation associés à une application.

Les expériences liées au Hub (anciennement panoramique) constituent un élément à part entière de l’apparence native de Windows Phone. À la différence d’une application conçue pour contenir à l’intérieur des limites de l’écran du téléphone, une application Hub offre un moyen unique d’afficher des contrôles, des données et des services à l’aide d’un canevas large et virtuel qui s’étend horizontalement au-delà des limites de l’écran. Sur Windows Phone, ces affichages naturellement dynamiques utilisent du contenu et des animations dont les différentes couches défilent de manière fluide à différentes vitesses, à l’image des effets de parallaxe.

Les sections d’une application Hub constituent le point de départ d’expériences plus détaillées. Vous devez avoir pour objectif de proposer aux utilisateurs une présentation riche sur le plan visuel.

Exemples

Application Windows Phone : contrôle Hub

L’interface utilisateur se compose de couches, qui se déplacent indépendamment les unes des autres : une couleur ou image d’arrière-plan, un en-tête du Hub, des en-têtes de section du Hub et des sections du Hub.

Si une image d’arrière-plan est définie, elle représente la couche la plus profonde et a pour vocation de procurer au Hub l’apparence d’un magazine enrichi. Généralement utilisée comme image pleine page, l’image d’arrière-plan est potentiellement la partie la plus visuelle de l’application.

L’en-tête du Hub identifie l’application, et il doit être visible quelle que soit la manière dont l’utilisateur entre dans l’application.

Les sections du Hub de l’application Hub contiennent les autres contrôles et contenu. Les sections se déplacent à la même vitesse que le panoramique tactile ou les raccourcis. Un en-tête de section du Hub est facultatif pour toute section du Hub.

Les miniatures peuvent être un élément important, car elles permettent d’établir un lien avec du contenu ou des données multimédias disponibles dans d’autres pages.

Contrôle Hub avec miniatures

Utilisation

En fonction des exigences de l’application, vous pouvez ajouter plusieurs sections du Hub au contrôle Hub, ayant chacune un objectif fonctionnel distinct. Par exemple, une section peut contenir une série de liens et de contrôles, tandis qu’une autre sert de référentiel pour les images miniatures. L’utilisateur peut faire défiler ces sections latéralement en utilisant les mouvements pris en charge dans le contrôle Hub.

Recommandations en matière de conception

Le comportement et le rendu du contrôle Hub sont pris en charge uniquement en mode portrait.
Vous pouvez définir un thème pour un contrôle Hub, remplacer les couleurs par défaut, etc.
Utilisez l’effet de boucle du contrôle Hub de Windows Phone pour passer de la première à la dernière section et vice versa. Aucun renvoi à la ligne n’est effectué pour un hub qui contient 1 ou 2 sections. Un renvoi à la ligne est effectué pour un hub qui contient 3 sections ou plus.
Sur Windows Phone, si vous utilisez une barre d’application dans votre Hub, définissez le mode de celle-ci sur minimized. Ce mode est spécifiquement conçu pour optimiser l’espace de l’écran dans une page Hub. Pour plus d’informations, voir Barre d’application pour Windows Phone.
Pendant le lancement de votre contrôle Hub, affichez une barre de progression dans la barre d’état système ou un indicateur plein écran de chargement en cours.
Affichez une barre de progression dans la barre d’état système quand une section d’un contrôle Hub fait l’objet d’une mise à jour ou d’une actualisation sans pour autant bloquer l’interaction avec l’utilisateur.
Pendant la première visite, il est nécessaire que l’en-tête du Hub soit correctement aligné sur la gauche de la première section affichée. Il n’existe pas de recommandation standard qui détermine quelle est la section qui est la section par défaut ; celle-ci dépend du contenu présenté.
Pour les visites suivantes du même contrôle Hub, redirigez l’utilisateur vers la dernière section à laquelle il avait accédé.
Ne créez pas plus de cinq sections dans un contrôle Hub. Cela est important pour des raisons de performance et également pour limiter le nombre de zones que l’utilisateur doit parcourir. Utilisez moins de sections quand le contenu est plus complexe. N’encombrez pas l’utilisateur avec de nombreuses sections. Avec simplement quatre ou cinq sections, il peut facilement se repérer.
N’utilisez pas de contrôle Pivot dans un contrôle Hub ou vice versa. Vous pouvez toutefois lier un élément d’une section du Hub à une autre page contenant un contrôle Pivot.
N’utilisez pas de contrôles pouvant faire l’objet d’un défilement dans un contrôle Hub. Par exemple, placer un contrôle de carte dans une section du Hub peut rendre difficile l’utilisation du contrôle Hub. L’entrée par mouvement devient confuse. Par exemple, si vous essayez de déplacer un curseur vers la gauche alors que vous vous trouvez dans une section d’un contrôle Hub, il est difficile de savoir si vous souhaitez faire défiler la section ou déplacer le curseur. Pour un contrôle qui nécessite une entrée par mouvement, la solution consiste à placer le contrôle dans sa propre page et à naviguer vers celle-ci. Vous pouvez placer un contrôle sans entrée par mouvement dans une section du Hub, par exemple une carte. Vous pouvez alors superposer un bouton qui active la carte. Appuyer sur le bouton permettrait d’atteindre une autre page ne contenant que la carte. L’utilisateur pourrait ensuite appuyer sur le bouton Précédent pour revenir à la section du Hub.
Pour savoir plus précisément dans quelles situations il convient d’utiliser un contrôle Hub ou un contrôle Pivot, consultez les rubriques suivantes :

En-têtes du Hub :

Utilisez du texte brut ou des images, comme un logo. Vous pouvez également utiliser plusieurs éléments, comme un logo et du texte (ou d’autres éléments d’interface utilisateur).
Veillez à ce que la police ou la couleur de l’image de l’en-tête fassent ressortir celui-ci clairement de la totalité de l’image d’arrière-plan (car les deux se déplacent indépendamment). Utilisez des polices et des styles système, sauf si vous devez procurer une expérience personnalisée spécifique qui repose sur une police, une taille ou une couleur différente.
Évitez d’animer l’en-tête ou de modifier sa taille dynamiquement.
Dans un souci de cohérence, faites en sorte que l’en-tête rappelle la vignette de lancement disponible dans l’écran d’accueil.
Quand vous définissez la disposition de votre contrôle Hub et que vous concevez les en-têtes, évitez les problèmes d’occlusion liés à la barre d’état système ou à d’autres éléments.

En-têtes de section du Hub :

Utilisez du texte brut ou des images, comme un logo. Vous pouvez également utiliser plusieurs éléments, comme un logo et du texte (ou d’autres éléments d’interface utilisateur).
Veillez à ce que la police ou la couleur de l’image de l’en-tête fassent ressortir celui-ci clairement de la totalité de l’image d’arrière-plan (car les deux se déplacent indépendamment). Utilisez des polices et des styles système, sauf si vous devez procurer une expérience personnalisée spécifique qui repose sur une police, une taille ou une couleur différente.
Évitez d’animer l’en-tête ou de modifier sa taille dynamiquement.

Sections du Hub :

Préservez la beauté de l’expérience procurée par le contrôle Hub en choisissant avec attention le texte et les images qui composent les sections pour que le Hub ne devienne pas encombrant et occupé.
Prenez en compte l’orientation si vous utilisez le défilement vertical. Le défilement vertical dans une section du Hub n’est opportun que si la largeur de la section est supérieure à la largeur de l’écran.
Pensez à masquer les sections du Hub tant qu’elles ne comportent pas de contenu à afficher.

Image d’arrière-plan

Un arrière-plan sombre, doux et faiblement contrasté est idéal. Couleur unique ou dégradé.
Une photo subtile et discrète dans l’arrière-plan peut rendre un contrôle Hub visuellement attrayant. Toutefois, les photos riches en couleurs vives doivent être évitées, car elles peuvent nuire à la lisibilité des sections. Une technique pratique consiste à utiliser un filtre noir ou blanc semi-transparent (comme un rectangle) au-dessus de la photo. Vous pouvez effectuer cette opération dans un éditeur d’image bitmap, puis aplatir l’image.
Une image d’arrière-plan doit couvrir la totalité du contrôle Hub. Cela signifie que ses proportions doivent correspondre à celles du contrôle Hub et que sa taille doit prendre en compte la résolution d’appareil la plus courante, la résolution d’appareil la plus grande et les performances. Privilégiez le format JPEG, pour que les fichiers conservent une taille réduite.
Vous pouvez passer d’une image d’arrière-plan à une autre, même quand votre application est en cours d’exécution, mais une seule image à la fois peut être affichée.

Miniatures

Privilégiez une image recadrée mettant en valeur un sujet identifiable à une image entière réduite. Si l’image n’est pas identifiable sans texte, vous pouvez utiliser jusqu’à deux lignes de texte pour identifier le contenu.