Applications sportives

Les applications sportives ont une influence sur les utilisateurs, que ce soit pour tenir les fervents supporters informés des dernières actualités sportives ou pour aider les athlètes à améliorer leurs performances sur le terrain. Les fonctionnalités Windows telles que les vignettes, le zoom sémantique ainsi que les contrats de recherche et de partage peuvent être particulièrement utiles lors de la conception d’une application qui s’adresse à des passionnés de sports. Cet article présente brièvement ces fonctionnalités avec une multitude d’exemples de la façon dont des applications sportives existantes les utilisent pour assurer des expériences utilisateur réussies. Il vous suffit de faire défiler pour trouver l’inspiration pour votre nouvelle application sportive.

Types d’applications sportives

Voici quelques types courants d’applications sportives :

	Actualités, informations et vidéos Ces applications proposent les dernières actualités sportives dans des articles, des vidéos et des diaporamas. Le contenu est régulièrement mis à jour et souvent disponible sur la toute première page de l’application. Par exemple, ouvrez l’application ESPN et vous êtes immédiatement plongé dans le contenu sportif le plus récent. Consultez ces applications sportives axées sur les actualités et disponibles à partir du Windows Store : ESPN, Sports Illustrated, NASCAR, Yahoo! Sports et THE Football App.
	Applications préférées des supporters Ces applications sont consacrées à créer l’engouement des supporters pour une équipe sportive en particulier. Elles offrent des informations, des photos et des vidéos sur une équipe spécifique. L’application Chicago Blackhawks en est un parfait exemple. Voici la page d’accueil de l’application qui vous rappelle le moment de grande fierté dans l’histoire des Blackhawks où ils ont gagné la Coupe Stanley. Seattle Sounders FC et AC Milan sont deux autres exemples d’applications préférées des supporters du Windows Store.
	Outils et utilitaires Ce type d’application sportive effectue des fonctions spécifiques comme la comparaison des statistiques des équipes, l’enseignement d’une technique sportive spécifique à un utilisateur ou l’autorisation pour des utilisateurs de participer à un championnat virtuel. Ces applications présentent souvent un modèle de navigation plus linéaire pour guider les utilisateurs au cours d’une tâche spécifique. Inspirez-vous des applications Decision Maker, Winchester Ballistics, One Basketball ou NFL Fantasy Football 2013 dans le Windows Store.

 

Susciter l’intérêt des utilisateurs avec des vignettes et des notifications

Windows 8.1 offre de nombreux moyens à votre application de susciter l’intérêt des utilisateurs, même quand elle n’est pas en cours d’exécution. Par exemple, les vignettes peuvent apporter des informations dynamiques en direct sur l’écran d’accueil. Une vignette dynamique peut afficher un flash info sur un nouveau choix pour l’équipe favorite de l’utilisateur ou indiquer les mises à jour des scores en direct. Votre application peut également fournir des notifications activées par l’utilisateur pour garantir qu’un supporter sportif ne manque jamais une partie.

Créez une vignette pour l’écran d’accueil qui représente clairement votre application. Dans cette capture d’écran, vous pouvez voir que les vignettes sont affichées dans quatre tailles différentes : petite, moyenne, large et grande. Les utilisateurs tendent à placer des vignettes bien conçues de manière évidente sur leur écran d’accueil, ce qui encourage une utilisation régulière. Les applications avec des vignettes moins attirantes peuvent ne pas recueillir d’emplacement sur l’écran d’accueil, ce qui les rend plus faciles à oublier. Ne sous-estimez pas l’influence d’une vignette attrayante.

Vignettes dynamiques : le monde du sport évolue à un rythme rapide : un jeu gagnant, une blessure qui met fin à une saison, ou un choix influent peuvent survenir en un clin d’œil. Avec une vignette dynamique, votre application sportive tient les supporters informés des derniers titres impliquant leurs équipes favorites, même quand votre application n’est pas en cours d’exécution. Envisagez d’afficher les actualités de dernière minute, les mises à jour des scores ou les rappels de jeux sur votre vignette dynamique. Voir Vignettes dynamiques pour une vue d’ensemble générale ou Guidelines for tiles and badges pour plus d’informations.

Une vignette dynamique est une partie essentielle de l’expérience d’application Bing Sports. Ici, la vignette dynamique de l’application partage un titre et une image sur l’écran d’accueil.

Vignettes secondaires : les supporters sportifs sont toujours à la recherche de moyens rapides de garder un œil sur leurs joueurs, équipes et championnats préférés. Aidez ces fervents supporters à accéder immédiatement au contenu qui les intéressent le plus avec une vignette secondaire. Si votre application sportive prend en charge les vignettes secondaires, un utilisateur peut épingler un raccourci vers un contenu spécifique de votre application directement à l’écran d’accueil. Vous voulez plus d’informations ? Voir Guidelines for secondary tiles ou, pour obtenir un résumé plus détaillé, Vue d’ensemble des vignettes secondaires.

Dans l’application ESPN, par exemple, un supporter des Blue Jays de Toronto peut épingler la page des statistiques de l’équipe à l’écran d’accueil. Comme ce contenu a été conçu pour être épinglable, le supporter peut cliquer sur l’icône de l’épingle à partir de la barre d’application inférieure (comme illustré dans la capture d’écran suivante).

Après avoir cliqué sur l’icône de l’épingle, l’utilisateur confirme qu’il veut épingler la vignette à l’écran d’accueil.

L’utilisateur appuie sur le bouton "Épingler à l’écran d’accueil" et une nouvelle vignette secondaire s’affiche sur l’écran d’accueil. Il déplace la nouvelle vignette près de ses autres applications sportives. Maintenant, son écran d’accueil comporte deux vignettes ESPN : une pour le contenu général et une nouvelle vignette secondaire qui lui permet d’accéder directement à la page de son équipe préférée.

Les vignettes secondaires ont permis à ce supporter des Blue Jays d’accéder aux statistiques qui l’intéressaient en un seul clic. Si vous disposez d’un contenu auquel les utilisateurs peuvent vouloir accéder directement, rendez-le épinglable !

Dimensionnement de vignette : les utilisateurs pouvant modifier la taille de votre vignette, assurez-vous que son aspect est convenable à toutes les tailles prises en charge par votre application. Personnalisez les images de vignette pour chaque taille de vignette. Cette vignette a été conçue différemment pour les tailles de vignette petite, moyenne et large.

Comme les applications du Windows Store peuvent être exécutées sur toutes sortes d’appareils, veillez à fournir des versions mises à l’échelle des images de vignette pour qu’elles aient une apparence nette avec les résolutions d’écran suivantes :

• 1.0 = 1024 x 768 pixels
• 1.4 = 1440 x 1080 pixels
• 1.8 = 1920 x 1440 pixels

Pour plus d’informations sur les tailles de vignette, voir Tailles des images de vignette et de toast. Vous voulez en savoir plus sur la mise à l’échelle ? Voir Guidelines for scaling to pixel density.

Notifications toast : les événements sportifs ont lieu à toutes les heures de la journée. Les vignettes dynamiques s’avèrent très utiles pour tenir les supporters informés des nouveaux développements sportifs à partir de l’écran d’accueil mais, si les utilisateurs souhaitent des alertes plus directes, votre application sportive peut fournir des notifications toast. Qu’un toast avertisse un utilisateur qu’une partie va commencer ou que son équipe préférée vient de gagner la Série mondiale, un utilisateur peut cliquer sur le toast pour ouvrir l’application et obtenir plus de détails.

Vous voulez en savoir plus sur les toasts? Voir Guidelines for toast notifications. Pour obtenir une description plus détaillée, voir Vue d’ensemble des notifications toast.

Cette image illustre une notification toast de l’application SportsCenter. Notez que les toasts s’affichent dans le coin supérieur droit de l’écran.

Afficher le contenu de manière créative avec le zoom sémantique

Les applications sportives comportent souvent un contenu de qualité important sur une seule page. Si une application couvre de nouvelles histoires sur un grand nombre de sports majeurs différents, la page d’accueil risque d’être surchargée. Le zoom sémantique représente une façon simple d’organiser les pages avec beaucoup de contenu. Cette fonctionnalité réduit le contenu en groupes logiques, ce qui donne aux utilisateurs une idée plus précise de tout le contenu disponible et une façon d’accéder au type de contenu spécifique qu’ils souhaitent.

L’application Sports Illustrated utilise le zoom sémantique pour mieux gérer son contenu. Quand l’application est ouverte pour la première fois, un utilisateur peut faire un panoramique vers la droite pour afficher tout le contenu de l’application. Voici une capture d’écran illustrant l’affichage par défaut.

Toutefois, le mouvement panoramique doit être important pour afficher tout le contenu disponible. Pour obtenir une vue d’ensemble du contenu disponible, l’utilisateur emploie le zoom sémantique. Quand l’utilisateur effectue un zoom par un mouvement tactile ou en appuyant sur "Ctrl" tout en tournant la roulette de la souris pour faire défiler, le contenu est organisé en différentes catégories avec des titres et des miniatures utiles.

L’utilisateur peut maintenant facilement parcourir le contenu et accéder à une section particulièrement intéressante. Voir Zoom sémantique pour obtenir d’autres exemples et Guidelines for semantic zoom pour des informations plus détaillées.

Immerger les supporters à l’aide du contrôle Hub

Le monde du sport n’est jamais à court d’actions intenses, de moments de triomphe ni de spectacles impressionnants. Le contrôle Hub place une image "Hero" au premier plan et au centre de votre application. Une image Hero est une image haute résolution de grande taille qui accueille les utilisateurs sur la page d’arrivée et les attire dans l’histoire de votre application.

Ici, l’application Chicago Blackhawks affiche le moment de la plus grande fierté de l’équipe dans son image Hero. C’est la première chose que les utilisateurs voient quand ils ouvrent l’application.

L’application Bing Sports affiche le dernier titre dans son image Hero. La photo capture l’attention d’un utilisateur et comporte une légende extraite de l’article.

Pour plus d’informations, voir Recommandations en matière de contrôle Hub.

Maximiser l’impact avec un contenu plein écran

Ce n’est pas parce qu’une grille est associée à la silhouette de l’application du Windows Store que tout le contenu de votre application doit tenir entre les marges. N’hésitez pas à pousser ou même dépasser les limites lors de la conception de votre application sportive. Voici un exemple de contenu qui traverse le quadrillage. Sur le côté gauche de l’application, le logo et le contenu tiennent entre les marges. Toutefois, l’image Hero s’étend du haut de l’écran jusqu’en bas pour maximiser l’impact visuel.

L’image suivante superpose les marges pour la silhouette de l’application du Windows Store sur la même image d’application. La majeure partie du contenu de l’application figure toujours dans la zone bleue limitée par les marges, mais l’image du joueur s’étend au-delà de la limite vers les bords de l’écran.

L’application Seattle Sounders a également un impact avec des graphiques qui s’étendent sur l’intégralité de l’écran. Les images percutantes en arrière-plan sont recouvertes par un contenu qui attire l’œil. Même la publicité au format de l’écran à l’extrémité droite est conçue pour cadrer avec l’expérience Sounders.

Chaque pixel de l’écran a un rôle à jouer dans la conception de votre application sportive.

Naviguer facilement à l’aide des barres d’application

Présentez le contenu au premier plan et au centre de votre application et empêchez les contrôles d’encombrer l’écran quand vous n’en avez pas besoin. Dans les applications du Windows Store, la barre de navigation (également appelée barre d’application supérieure) et la barre d’application inférieure sont cachées jusqu’à ce que l’utilisateur clique avec le bouton droit ou effectue un mouvement de balayage à partir du bord haut ou bas de l’écran. De nombreuses applications sportives utilisent la barre de navigation pour contenir des raccourcis vers différentes sections de l’application. Par exemple, la barre de navigation dans l’application THE Football App comporte des onglets pour les différents championnats de football dans le monde entier. Elle permet également à l’utilisateur d’accéder rapidement à la page d’accueil, aux actualités, aux vidéos et aux réseaux sociaux.

Outre les contrôles de navigation, l’application ESPN affiche les derniers résultats des matchs dans la barre de navigation. Un utilisateur peut passer d’une section de l’application à une autre, avoir un aperçu rapide des résultats des matchs en cours ou accéder au contenu d’une application spécifique au jeu plus détaillé, et tout cela à partir de la barre de navigation.

La barre d’application inférieure contient généralement des contrôles qui concernent l’affichage actuel. Par exemple, une page contenant un article sportif avec beaucoup de texte peut comporter un bouton pour modifier la taille du texte dans sa barre d’application inférieure. L’application Sports Illustrated permet aux utilisateurs de filtrer le contenu selon le championnat à partir de la barre d’application.

Simplifier les recherches

Il y a beaucoup de choses à découvrir sur le monde du sport. En activant les recherches dans l’application et en utilisant le contrat de recherche pour permettre les recherches dans votre application à partir de n’importe quel emplacement système, les utilisateurs peuvent obtenir les informations dont ils ont besoin au moment où ils en ont besoin.

Recherche dans l’application : ajoutez une zone de recherche à votre application pour permettre aux supporters sportifs d’accéder rapidement au contenu souhaité. S’il existe des pages dans votre application où les utilisateurs taperont uniquement des requêtes de recherche, vous pouvez activer la recherche lors de la saisie, qui inscrit automatiquement toute entrée de clavier en tant que requête de recherche. Pour plus d’informations sur les utilisations appropriées de la recherche lors de la saisie, voir Guidelines for search.

Pour obtenir un exemple de recherche dans une application sportive existante, examinez l’application Bing Sports. Si un utilisateur veut des informations sur un joueur particulier, il peut ouvrir l’application et commencer à taper le nom du joueur. Comme l’application Bing Sports active la recherche lors de la saisie sur sa page principale, la zone de recherche s’ouvre et inscrit l’entrée dès que l’utilisateur commence à taper.

L’application Bing Sports affine les suggestions des résultats de recherche à mesure que l’utilisateur tape.

En à peine huit frappes, un utilisateur obtient les informations dont il a besoin.

Contrat de recherche : rendez le contenu sportif de votre application disponible dans les recherches système en utilisant le contrat de recherche. Si votre application participe au contrat de recherche, les utilisateurs verront des résultats de recherche pertinents à partir de votre application s’ils utilisent l’icône Rechercher pour effectuer des recherches à partir de n’importe quel emplacement système. Vous ne connaissez pas bien les contrats ? Voir Icônes et contrats pour une vue d’ensemble générale ou Contrats et extensions d’application pour une description plus détaillée.

Partager l’amour des sports

Les sports tournent autour de communautés de personnes qui partagent l’amour du jeu, de l’équipe, et des expériences communes. Windows facilite le partage avec le contrat de partage. Quand vous faites de votre application une source de partage, un utilisateur peut partager le contenu de votre application à l’aide d’une autre application installée, telle que Twitter, Facebook ou la messagerie. Le partage non seulement satisfait vos utilisateurs, mais il promeut également de façon subtile votre application. Voir Icônes et contrats pour une vue d’ensemble générale des contrats disponibles pour les applications du Windows Store.

Si vous choisissez d’inscrire votre application comme source de partage, les utilisateurs peuvent utiliser l’icône Partager pour partager le contenu de votre application à tout moment. Par exemple, imaginons qu’une utilisatrice regarde des rediffusions de matchs sur l’application NFL Fantasy Football. Elle était justement en train de parler de ce jeu avec un ami l’après-midi précédente et décide de partager les images avec lui. Elle effectue un mouvement de balayage à partir du bord droit de l’écran pour afficher les icônes et sélectionne l’icône Partager.

NFL Fantasy Football fournit au système le contenu que l’utilisateur veut partager et Windows affiche une liste des applications installées sur le système de l’utilisateur qui peuvent gérer ce type de contenu de pages. Dans le cas présent, Twitter, la messagerie, Evernote Touch, Flipboard et plusieurs autres applications peuvent partager ce type de contenu. L’utilisatrice peut maintenant choisir la façon dont elle veut partager ces informations. Qu’elle choisisse le tweet, un lien dans un message électronique adressé à son ami ou le partage avec l’une des autres applications disponibles, elle n’aura jamais à quitter NFL Fantasy Football !

Vous pouvez personnaliser la façon dont votre application est représentée quand un utilisateur partage du contenu de celle-ci. Par exemple, vous pouvez fournir uniquement un lien vers le contenu partagé par défaut ou associer à ce lien le logo de votre application ou une miniature du contenu partagé.

Si vous voulez que votre application reçoive le contenu partagé par d’autres applications, faites de votre application sportive une cible de partage. Pour plus d’informations sur la façon de faire de votre application une source et/ou cible de partage, voir Guidelines for sharing content. Pour obtenir des exemples de code, voir Exemple de source de partage et Exemple de cible de partage.

Exploiter les réseaux sociaux : permettez aux utilisateurs de se tenir au courant des conversations sportives en incorporant les réseaux sociaux dans votre application. Que vous souhaitiez tirer parti de la puissance de Twitter ou synchroniser avec Facebook pour permettre aux utilisateurs de savoir ce que leurs amis disent sur les sujets sportifs, la présentation d’un contenu social de façon créative peut avoir un impact.

Cette application de divertissement de FX utilise une chronologie pour indiquer les tendances des réseaux sociaux. Les utilisateurs filtrent la chronologie par sujet (ici, par émission de télévision) et source de réseau social. L’application affiche ensuite les billets individuels ainsi qu’une chronologie de toutes les conversations concernant ce sujet.

Rendre les données interactives

Le monde du sport est rempli de statistiques qui ont une influence importante sur les expériences des supporters sportifs. Qu’un utilisateur veuille prendre une décision en connaissance de cause dans une négociation sportive imaginaire, se délecter des records de son équipe de hockey préférée ou comparer les points produits de deux frappeurs désignés dans la Ligue majeure de baseball, la mise à disposition de façons créatives de visualiser les données et d’interagir avec celles-ci peut distinguer votre application des autres.

L’application NFL Fantasy Football 2013 anime les statistiques de jeux avec des supports interactifs. L’application montre les scores des équipes imaginaires tracés au fil du temps et permet aux utilisateurs de cliquer sur des points particuliers du graphique pour voir des clips vidéo des matchs avec différents scores.

Rubriques associées

Vues d’ensemble et instructions

Découvrir les applications du Windows Store

Recommandations en matière d’expérience utilisateur pour les applications du Windows Store

Icônes et contrats

Contrats et extensions d’application

Recommandations en matière de contrôle Hub

Vignettes dynamiques

Recommandations en matière de vignettes et de badges

Vue d’ensemble des vignettes secondaires

Secondary tile guidelines

Vue d’ensemble des notifications toast

Recommandations en matière de notifications toast

Recommandations en matière de tailles de fenêtre

Recommandations en matière de mouvement panoramique

Zoom sémantique

Recommandations en matière de zoom sémantique

Recommandations en matière de barres d’application

Recommandations en matière de partage de contenu

Recommandations en matière de recherche

Exemples

Exemple de vignette dynamique

Exemple de mouvement panoramique (HTML)

Exemple de mouvement panoramique (XAML)

Exemple de barre de l’application (HTML)

Exemple de barre de l’application (XAML)

Exemple de source de partage

Exemple de cible de partage

Exemple de recherche

Exemple de zoom sémantique (C#/VB/C++)

Exemple de zoom sémantique (JavaScript)

Exemple de notification toast