Étude de cas de conception : iPad vers application Windows Runtime

iOS est une plateforme populaire pour la création d’applications tactiles, amusantes et attrayantes. Avec l’introduction de Windows 8, les concepteurs et développeurs disposent désormais d’une nouvelle plateforme pour laisser libre cours à leur créativité.

Cette étude de cas a pour objectif d’aider les concepteurs et développeurs qui connaissent iOS à réinventer leurs applications en utilisant les principes de conception pour les applications du Windows Store. Nous expliquons comment traduire les principaux éléments de l’interface et des modèles d’expérience utilisateur des applications iPad pour les applications du Windows Store de Windows 8. Nous nous appuyons sur notre expérience de création d’une application identique pour l’iPad et pour Windows 8. Nous utilisons des scénarios de conception et de développement courants pour montrer comment tirer parti de la plateforme Windows 8 et intégrer les principes de conception pour les applications du Windows Store.

Pour en savoir plus sur les opportunités commerciales de Windows 8, voir Vente d’applications. Pour plus d’informations sur les fonctionnalités permettant de créer des applications du Windows Store, voir le Guide du produit Windows 8 pour développeurs.

Télécharger cet article : Pour télécharger cet article, voir Version hors connexion de cet article.

L’application

L’application que nous développons est un journal photo connecté où les utilisateurs peuvent afficher et gérer leurs photos et vidéos en ligne par le biais d’un affichage chronologique.

Application Photo journal Windows Store.

À l’origine, l’application a été créée pour l’iPad. L’image suivante montre l’anatomie de l’application iPad. Voyons maintenant comment chaque composant est converti dans le langage Microsoft.

Application Photo journal de l’iPad.

1. Disposition et navigation

2. Commandes et actions

3. Contrats : recherche, partage et autres

4. Commandes tactiles

5. Orientation et affichages

6. Notifications

Disposition et navigation

Priorité au contenu, non au chrome

L’application Photo journal doit avant tout se concentrer sur l’affichage des photos des utilisateurs et des activités sociales connexes. Lors de la création de l’application du Windows Store, notre premier souci a été de supprimer tous les éléments de l’interface utilisateur qui n’étaient pas directement liés à l’objectif principal de l’application. Il est par exemple possible de supprimer la barre de navigation supérieure, les contrôles de pagination et la barre de contrôles inférieure. Dans la section suivante, nous indiquons comment les utilisateurs peuvent, en cas de besoin, afficher le chrome à l’aide de la barre de l’application.

Éléments de l’interface utilisateur de l’application iPad. Éléments de l’interface utilisateur de l’application du Windows Store.

Application iPad

A. Barre de navigation supérieure B. Contenu de l’application C. Éléments de pagination D. Barre de contrôles inférieure

Application du Windows Store

B. Contenu de l’application et logo

 

Exemple : affichage chronologique sur l’écran d’accueil

Les applications affichent toutes deux des photos classées par mois sur leur écran d’accueil, mais la manière dont le mois est représenté est assez différente. Dans la version iPad de Photo journal, la page est optimisée pour afficher les douze mois de l’année, chacun d’eux étant représenté par l’image métaphorique d’une pile de photos. Lors de la conception de l’écran d’accueil de l’application du Windows Store, nous avons choisi d’afficher davantage d’images et de contenu social au premier niveau afin de présenter plus de contexte aux utilisateurs. Nous avons supprimé les bordures des images et utilisé des espaces blancs pour centrer l’attention visuelle sur les photos qui sont l’objet principal de l’application.

Affichage des mois dans l’application iPad. Affichage des mois dans l’application du Windows Store.

iPad : chaque mois est représenté par une pile de photos où seule la première photo est visible.

Application du Windows Store : chaque mois est représenté par plusieurs photos, avec leurs titres et le nombre de commentaires qui leur sont associés. Les utilisateurs peuvent voir sur l’écran d’accueil davantage de contenu explicite pour un mois.

 

Aplanir la hiérarchie de navigation

Nous avons utilisé le modèle de navigation hiérarchique dans la conception de l’application du Windows Store. Lors de la conception de l’application, nous avons aplani la hiérarchie de navigation de manière à rendre davantage de contenu accessible via l’écran Hub de l’application et à limiter la navigation.

Exemple : suppression de la barre de contrôles inférieure

États d’affichage dans l’application iPad.Affichage des commentaires dans l’application iPad.

Application iPad

A. Affichage des photos B. Affichage des commentaires

La barre de contrôle inférieure dotée de deux pivots (photos et commentaires) est affichée en permanence. Les utilisateurs peuvent voir un affichage ou l’autre.

États d’affichage dans l’application du Windows Store.

Application du Windows Store

  • Nous avons regroupé commentaires et photos dans un seul affichage afin d’éviter le recours à un élément d’interface utilisateur supplémentaire.
  • La conception Hub de l’écran d’accueil révèle le contenu le plus pertinent de chaque section.
  • Pour voir la liste complète de commentaires, les utilisateurs peuvent appuyer sur l’en-tête de groupe intitulé Commentaires récents.

 

Utiliser la manipulation directe pour naviguer

La manipulation directe permet aux utilisateurs d’interagir avec le contenu et de naviguer dans diverses zones de manière naturelle. Lors de la conception de notre application du Windows Store, nous avons utilisé la manipulation directe chaque fois que cela était possible, en recourant à des contrôles intégrés tels que le contrôle Zoom sémantique qui facilite la navigation des utilisateurs.

Navigation dans l’application iPad.

Navigation dans l’application iPad.

Navigation sur l’application du Windows Store.

Utilisation du zoom sémantique pour faire des sélections dans des groupes de données.

Application iPad

Sur l’écran d’accueil, appuyez sur le bouton Années de la barre de navigation supérieure pour afficher une fenêtre contextuelle et sélectionner une année.

Application du Windows Store

Sur l’écran d’accueil, faites un geste de pincement à l’aide de deux doigts pour faire un zoom arrière et voir tous les mois et années. Ainsi, les utilisateurs peuvent facilement accéder à n’importe quel mois d’une année. Ils peuvent également voir quel mois a des photos et quel mois n’en a pas (couleur rouge estompée). Ils peuvent naviguer uniquement en manipulant le contenu, sans utiliser le chrome et sans naviguer vers une autre page.

 

Pour vous aider à choisir le meilleur modèle de navigation pour votre application, voir Modèles de navigation.

Voir le Modèle de navigation plat en action dans le cadre de notre série Fonctionnalités d’application de A à Z.

Commandes et actions

Laisser les actions contextuelles de l’application dans la barre de l’application

Lors de la conception des actions et commandes contextuelles de l’application, nous avons à nouveau suivi le principe qui consiste à "privilégier le contenu plutôt que la forme" et avons fait en sorte que toutes les actions contextuelles soient accessibles via le contrôle de la barre de l’application. Les commandes fréquemment utilisées sont placées près des bords droit et gauche afin d’être facilement accessibles. Ainsi, la surface de l’application n’est pas encombrée de contrôles et quel que soit l’endroit où il se trouve, l’utilisateur peut balayer la barre de l’application depuis le haut ou le bas de l’écran pour voir les actions correspondantes. Toutes les applications du Windows Store peuvent utiliser la barre de l’application pour leurs commandes. Les utilisateurs étant familiarisés avec les interactions avec la barre de l’application, ce procédé améliore la convivialité de votre application et rend l’ensemble du système plus cohésif.

Exemple : suppression de photos

Suppression de photos dans l’application iPad. Suppression de photos dans l’application du Windows Store.

Application iPad

  • Lorsqu’un utilisateur entre le mode de sélection, les commandes de l’application se trouvent en haut de l’écran.

Application du Windows Store

A. La barre de l’application est masquée par défaut pour favoriser l’expérience immersive de l’utilisateur. Ce dernier peut effectuer un balayage vertical pour ouvrir la barre de l’application. B. Lorsqu’un utilisateur sélectionne des objets sur la page, les actions contextuelles correspondant aux éléments sélectionnés apparaissent sur la barre. Les actions changent en fonction des objets sélectionnés et de l’emplacement de l’utilisateur dans l’application. Les commandes globales sont généralement placées du côté droit de la barre de l’application. Les commandes contextuelles doivent être placées du côté gauche de cette même barre.

 

Contrats

Le contrat de recherche permet de centraliser les recherches.

Plutôt que de créer une interface d’entrée de recherche rattachée en permanence au Canvas de l’application, nous avons implémenté le contrat de recherche. L’utilisateur peut à tout moment appeler la fonction Rechercher via les icônes et les résultats peuvent être représentés dans l’application de la manière la mieux adaptée au contenu. L’utilisation du contrat de recherche permet à l’utilisateur d’appeler l’icône Rechercher depuis n’importe quel point du système pour rechercher du contenu dans les applications qui prennent en charge le contrat.

Exemple : recherche d’une photo dans l’application Photo journal

Recherche dans l’application iPad. Contrat de recherche dans l’application du Windows Store.

Application iPad

  • La fonction Rechercher est accessible dans l’application sur l’écran d’accueil.
  • Au moment où l’utilisateur commence à taper un terme de recherche, des résultats s’affichent et l’utilisateur peut en sélectionner un.

Application du Windows Store

  • L’utilisateur ouvre la barre des icônes et accède à l’icône Rechercher. L’application Photo journal est sélectionnée par défaut parce que c’est l’application dans laquelle se trouve l’utilisateur.
  • Dès que l’utilisateur commence à taper, l’application propose des suggestions de recherche dans le volet. L’utilisateur peut ainsi rapidement voir les termes qui généreront des résultats de recherche. Une fois sa demande soumise, l’utilisateur voit les résultats de la recherche et sélectionne le résultat souhaité.

 

Exemple : recherche d’une photo en dehors de l’application Photo journal (disponible uniquement dans les applications du Windows Store)

Cet exemple montre comment rechercher un terme dans plusieurs applications en choisissant une nouvelle application via le volet de recherche. Cette fonctionnalité permet aux utilisateurs de rechercher n’importe quel contenu, dans n’importe quelle application, à n’importe quel moment.

Recherche à l’extérieur de l’application Photo journal.

Application du Windows Store

Un utilisateur recherche le terme « Barcelone » dans l’application Tweet@Rama et souhaite voir des photos de Barcelone à l’aide de Photo journal. Photo journal est maintenant le fournisseur des résultats de recherche. L’application se lance automatiquement et affiche les résultats de la recherche. L’utilisateur n’a pas besoin de lancer l’application Photo journal avant d’effectuer la recherche.

 

Utiliser le contrat de partage pour atteindre davantage de destinations et de personnes

L’intégration des médias sociaux est une composante clé de la plupart des applications. Les concepteurs et développeurs des applications iPad choisissent d’abord les médias sociaux (tels que Twitter ou Facebook) pris en charge par l’application, puis ils doivent intégrer chacun de ces services individuellement, ou utiliser une des infrastructures disponibles. Lorsque les API de ces services de partage sont modifiées, les développeurs doivent mettre à jour leur code pour que les services de partage continuent à fonctionner.

Lorsque nous avons traduit les fonctions de partage dans l’application du Windows Store, nous avons utilisé le contrat de partage. Ce contrat simplifie la conception et le développement parce qu’il est inutile de se connecter à chaque service que l’utilisateur souhaite utiliser. En plus des réseaux sociaux, les utilisateurs peuvent également enregistrer leur contenu sur d’autres services, comme une application destinée à la prise de notes telle que Notespace ou EverNote. Avec une quantité de code réduite, votre application est reliée à toutes les applications du Windows Store qui ont implémenté le contrat de partage. Il n’est pas nécessaire de se soucier des modifications d’API des sites de réseaux sociaux ou des services Web externes. Quant à l’utilisateur, il peut toujours partager son contenu à partir d’un emplacement défini en accédant aux icônes et en ouvrant le volet Partager.

Exemple : partage d’une photo dans Photo journal avec une autre application

Partage d’une photo dans l’application iPad.

iPad

Pour partager une photo à partir de l’application Photo journal de l’iPad, l’utilisateur doit appuyer sur le bouton Action de la barre de navigation supérieure, puis choisir le partage sur Facebook. L’intégration à d’autres services de réseaux sociaux demandera un travail supplémentaire au développeur et nécessitera l’ajout de boutons Partager.

Processus de partage dans l’application du Windows Store.
Choix d’une cible de partage dans l’application du Windows Store

Application du Windows Store

  • Les utilisateurs peuvent toujours trouver les options de partage au même emplacement, quelle que soit l’application utilisée.
  • Toutes les applications installées qui ont été désignées comme cibles de partage apparaissent dans la liste des applications du volet Partager. Par exemple, Socialite, Tweet@Rama, Notespace, PaintPlay sont toutes des cibles de partage.
  • Les utilisateurs peuvent partager une variété de types de contenus. Ils peuvent par exemple partager des liens, des photos ou enregistrer des informations dans une application de prise de notes.
  • Les cibles de partage les plus utilisées sont affichées en haut de la liste pour permettre aux utilisateurs d’y accéder plus rapidement.

 

En plus d’être une source de partage, notre application Photo journal a également été conçue pour être une cible de partage. Les utilisateurs peuvent facilement partager les photos d’une autre application en les intégrant à leurs flux de photos dans Photo journal. Le contrat de partage permet également ce type de connexion. Pour plus d’informations sur les applications qui constituent de bonnes cibles de partage, voir Recommandations et liste de vérification sur le partage de contenu.

Exemple : partage de photos issues d’une autre application avec Photo journal – cible de partage (disponible uniquement dans les applications du Windows Store)

Dans cet exemple, un utilisateur regarde des photos d’un voyage au Mexique dans une autre application photo. Il souhaite partager les photos de l’album en les intégrant à sa propre collection dans Photo journal de manière à faciliter l’affichage chronologique des photos. Lorsqu’il ouvre le volet Partager, l’utilisateur voit que l’application Photo journal figure parmi les cibles de partage et il appelle le flux Partager.

Partages de photos d’une autre application avec Photo journal.

 

Utiliser un sélecteur de fichiers pour accéder aux fichiers à partir de plusieurs emplacements

Un sélecteur de fichiers est une boîte de dialogue plein écran qui permet aux utilisateurs d’accéder à des fichiers et dossiers situés sur l’ordinateur local, sur les périphériques de stockage connectés ou sur un groupe résidentiel. Il permet également d’accéder aux éléments des applications qui participent au contrat Sélecteur de fichiers.

Exemple : téléchargement d’une photo à partir du système de fichiers local

Accès à des photos à partir du système de fichiers et de sites de médias sociaux dans l’application iPad.

Application iPad

L’application iPad prend en charge l’accès à des photos de la bibliothèque de photos locale et à quelques services des réseaux sociaux.

Accès au contrôle de sélection de fichiers dans l’application du Windows Store.

Application du Windows Store

A. L’utilisateur appuie sur le bouton Télécharger de la barre de l’application et le contrôle de sélection de fichiers s’ouvre. Cette zone de l’interface utilisateur, qui a toujours le même aspect, apparaît chaque fois que l’utilisateur souhaite accéder à des fichiers. B. En appuyant sur l’en-tête Fichiers, l’utilisateur affiche un menu volant de tous les emplacements de fichiers disponibles et peut naviguer vers un dossier de fichiers. C. L’utilisateur sélectionne plusieurs photos dans le dossier et une liste de miniatures en bas à gauche affiche les photos sélectionnées.

 

Exemple : utilisation d’une photo issue de Photo journal dans une autre application (disponible uniquement dans les applications du Windows Store)

Nous tirons également partie d’une fonction exclusive des applications du Windows Store et ajoutons la possibilité de sélectionner des photos de Photo journal depuis une autre application. Ainsi, l’utilisateur n’a pas besoin de télécharger les photos de Photo journal vers le système de fichiers local et de les télécharger ensuite vers l’autre application. Photo journal implémentant le contrat Sélecteur de fichiers, le système le reconnaît comme emplacement de stockage de fichiers.

Utilisation d’un contenu Photo journal dans une autre application.

Application du Windows Store

L’utilisateur est sur un écran Paramètres du PC et appuie sur Parcourir pour personnaliser la photo de son compte. Photo journal implémentant le contrat Sélecteur de fichiers, l’utilisateur peut voir dans le répertoire de fichiers qu’il est possible d’accéder à l’application. L’utilisateur peut ensuite sélectionner une photo stockée dans sa collection Photo journal.

 

Commandes tactiles

Mouvement de balayage pour accéder aux commandes de l’application et du système

Avec Windows 8, l’utilisateur peut effectuer un mouvement de balayage à partir des bords de l’écran pour accéder aux commandes et naviguer parmi les applications.

  • Les commandes d’application sont affichées par un mouvement de balayage à partir du bas ou du haut de l’écran. La barre de l’application doit toujours être utilisée pour afficher les commandes de l’application.
  • Un mouvement de balayage à partir du bord droit de l’écran affiche les icônes qui contiennent les commandes système.
  • Un mouvement de balayage à partir du bord gauche affiche les applications précédemment utilisées.
  • Un mouvement de balayage du bord supérieur vers le bord inférieur de l’écran permet d’ancrer ou de fermer des applications.

Exemple : accès à la barre de l’application et aux icônes dans une application du Windows Store

Accès à la barre de l’application dans l’application du Windows Store. Accès aux icônes dans l’application du Windows Store.

Balayez l’écran à partir du bord inférieur ou supérieur pour accéder aux commandes de l’application.

Balayez l’écran à partir du bord droit pour afficher les icônes qui contiennent les commandes système Rechercher, Partager, Accueil, Périphériques et Paramètres.

 

Glisser transversal pour sélectionner des objets

Sous Windows 8, l’utilisateur peut faire glisser ses doigts sur une courte distance, dans un mouvement perpendiculaire au sens du panoramique, pour sélectionner un objet dans une liste ou une grille. Lorsque des objets sont sélectionnés, la barre de l’application apparaît et affiche automatiquement les commandes utiles.

Exemple : sélection de plusieurs photos à supprimer

Sélection de plusieurs photos dans l’application iPad. Sélection de plusieurs photos dans l’application du Windows Store.

Application iPad

  • L’utilisateur doit entrer un mode d’édition spécifique pour effectuer l’action de sélection et d’autres actions d’édition. L’action d’appuyer est en effet réservée aux actions principales telles que le lancement.
  • L’utilisateur quitte le mode d’édition lorsqu’il a terminé.

Application du Windows Store

  • L’utilisateur balaye l’objet à sélectionner et la barre de l’application s’affiche automatiquement avec les commandes contextuelles utilisables.
  • L’utilisateur peut exécuter sur un objet l’action d’appuyer et celle de sélectionner sans avoir à entrer dans un autre mode ou à le quitter.
  • Cette action étant réversible, la sélection est beaucoup plus efficace dans les applications Windows 8.

 

Pincer et étirer pour agrandir

Les mouvements de pincement et d’étirement sont souvent utilisés pour le redimensionnement, dans les applications iPad comme dans les applications du Windows Store ; dans Windows 8, ces mouvements permettent également d’accéder directement au début, à la fin ou à n’importe quel emplacement du contenu à l’aide du contrôle Zoom sémantique. Le zoom sémantique permet à l’utilisateur de faire un zoom arrière afin de voir les données dans leur groupe correspondant et procure un moyen de rapidement replonger à l’intérieur. Plutôt que de proposer une navigation parmi de longues listes de contenu, utilisez un zoom sémantique chaque fois que cela est possible pour ce type d’interaction. Bien entendu, lorsqu’un utilisateur affiche une photo en mode plein écran, les mouvements de pincement et d’étirement peuvent être utilisés pour faire des zooms optiques.

Exemple : zoom sémantique sur l’écran d’accueil et sur la page d’affichage d’un mois

Utilisation du zoom sémantique dans l’application du Windows Store.

Application du Windows Store

A. Un zoom sémantique de l’écran d’accueil permet aux utilisateurs de rapidement sélectionner un mois particulier dans n’importe quelle année. B. Un zoom sémantique sur la page d’affichage d’un mois permet aux utilisateurs d’accéder à un jour particulier et propose également une indication sur le nombre de photos disponibles pour cette année.

 

Orientation et taille d’écran

Concevoir une disposition adaptable

Une application iPad a une taille et une résolution d’écran fixes avec deux orientations à prendre en compte par les concepteurs. Windows 8 fonctionne sur des supports de forme variable, allant des tablettes portables aux grands ordinateurs de bureau. Il est ainsi possible d’utiliser plus d’espace à l’écran pour afficher davantage de contenus aux utilisateurs. Lors de la conception de l’application Photo journal, nous avons considéré l’apparence de l’application dans deux orientations, en prenant en compte diverses résolutions d’écran et tailles d’appareils. La disposition en grille facilite le redimensionnement de la conception des affichages portrait et des écrans haute résolution. Par exemple, il est possible d’afficher davantage de photos pour chaque mois lorsque l’espace vertical disponible est plus vaste.

Exemple : conception de l’écran d’accueil pour les orientations d’écran paysage et portrait, et pour les écrans larges (application du Windows Store uniquement)

Application iPad en mode paysage et en mode portrait.

Application iPad

Le même contenu est affiché en mode paysage et en mode portrait. L’apparence de l’affichage est modifiée en orientation portrait.

Application du Windows Store sous plusieurs modes d’affichage et résolutions.

Application du Windows Store

L’application affiche davantage de contenu dans chaque section de la page Hub en affichage portrait et sur les écrans plus grands, utilisant davantage d’espace. De la même manière que nous créons des images pour un écran iOS retina display, nous avons créé plusieurs images pour différents pourcentages de redimensionnement Windows : 100 %, 140 % et 180 %. Ces images sont chargées automatiquement sur des tablettes HD.

 

Utiliser des largeurs étroites pour impliquer vos utilisateurs

Windows 8 permet aux utilisateurs de travailler en multitâche en plaçant des applications côte à côte à l’écran. La conception de votre application pour des largeurs étroites permet d’accroître le temps d’affichage de l’application à l’écran et incite l’utilisateur à l’utiliser pendant plus longtemps. Il est facile pour l’utilisateur de modifier la taille de l’application en déplaçant le séparateur qui les divise. Il est donc important de préserver le contexte d’un redimensionnement à un autre. Nous ne voulons pas que l’utilisateur perde l’état de son application suite à un redimensionnement.

Pour plus d’informations sur le redimensionnement, voir Recommandations en matière de tailles de fenêtre et de mise à l’échelle à la taille des écrans et Recommandations en matière de redimensionnement des fenêtres vers des dispositions hautes et étroites.

Exemple : écran d’accueil avec une largeur étroite

L’application du Windows Store avec une largeur étroite

Application du Windows Store

  • Quand l’écran d’accueil est redimensionné à une largeur étroite, l’utilisateur peut toujours accéder au même contenu.
  • En affichage haut et étroit, l’utilisateur effectue un mouvement panoramique vertical pour obtenir davantage de contenu, car il est plus confortable de faire défiler du côté du bord le plus long. Cela est différent du mouvement panoramique horizontal en plein écran, qui est également optimisé pour le défilement le long du bord long.

 

Notifications

Utiliser des vignettes pour les mises à jour persistantes et dynamiques

iOS 5 a introduit un centre de notifications où les nouvelles notifications s’affichent rapidement en haut de l’écran. Les utilisateurs peuvent aussi afficher tous les messages du centre par un mouvement de balayage à partir du haut de l’écran. En outre, les icônes d’application contenues dans le Springboard iOS peuvent être dotées de badges pourvus de numéros indiquant que ce sont de nouveaux messages. Les vignettes de l’écran d’accueil de Windows 8 combinent les fonctionnalités des badges numériques des icônes d’application et celles du centre de notification de l’iPad. Les utilisateurs peuvent lancer des applications et lire des notifications à partir du même emplacement. En outre, contrairement aux notifications dans iOS dont le format est fixe, les vignettes des applications du Windows Store sont disponibles en trois tailles de carré et une taille large, et proposent aux concepteurs de choisir parmi une riche collection de modèles.

Exemple : notifications sur l’écran d’accueil

Notification Photo journal sur le Springboard de l’iPad. Vignette et notification Photo journal sur l’écran d’accueil.

iPad

A. Icône d’application avec badge numérique sur le Springboard de l’iPad.

B. Centre de notification avec notification Photo journal.

Windows 8

C. Vignette sur l’écran d’accueil avec badge numérique et notifications. De nombreux modèles de vignettes sont disponibles.

 

Utiliser des toasts pour les notifications temporaires et importantes

Vous pouvez utiliser des notifications toast pour notifier les utilisateurs des événements en temps réel. À la différence des mises à jour par vignette qui sont passives, les notifications toast des applications du Windows Store sont des mises à jour importantes qui interrompent les utilisateurs. Elles s’affichent en haut à droite de l’écran et peuvent apparaître n’importe où dans le système. Il est généralement préférable de demander à l’utilisateur son approbation pour recevoir des notifications, lors du premier lancement de l’application. Le cas échéant, il est possible d’afficher les notifications toast dans les vignettes tant qu’elles restent pertinentes. Les toasts sont semblables aux alertes iOS temporaires qui s’affichent sous forme de bannières en haut de l’écran. Mais les concepteurs peuvent choisir parmi une collection de modèles de toast pour rendre leurs notifications plus pertinentes.

Exemple : Photo journal notifie l’utilisateur de la réception d’un commentaire d’un membre de sa famille

Notification toast sur un écran d’accueil.

L’utilisateur est paramétré pour recevoir des notifications toast lorsqu’un membre de la famille a commenté des photos qui se trouvent dans l’application.

 

À propos des auteurs

Bart Claeys, Ratio Interactive.

Bart Claeys est responsable de la conception de l’expérience utilisateur à Ratio Interactive et il est spécialisé dans la conception d’interfaces et expériences utilisateur d’applications Web et mobiles. Il occupait auparavant le poste de directeur d’art interactif à Saatchi & Saatchi Bruxelles, où il a créé des campagnes interactives pour Toyota, Sony et plusieurs autres marques internationales. M. Claeys est détenteur d’un Master en développement de produits et a bénéficié d’une formation complémentaire en gestion de la marque. Il est le fondateur de Creativeskills.be, la principale plateforme de travail de l’industrie créative en Belgique. En 2006, Bart Claeys a gagné le prix « Vous êtes l’avenir de la Flandre » créé par le gouvernement flamand pour promouvoir l’entreprenariat.

Qixing Zheng, Microsoft Corporation.

Qixing Zheng est User Experience Program Manager chez Microsoft. Elle fait partie de l’équipe qui a créé l’interface utilisateur de Windows 8 et a fait découvrir le langage de conception Microsoft aux concepteurs. Sa passion est profondément ancrée dans le désir d’aider les autres à améliorer leurs conditions de vie quotidiennes grâce à la technologie. Avant d’intégrer l’équipe Windows, Qixing a travaillé comme premier conseil UX chez Microsoft Canada, où elle intervenait dans des universités, chez des designers et dans des entreprises au sujet de l’investissement de Microsoft dans UX. Elle a également participé à l’identification de héros de bande dessinée et à la collecte de témoignages auprès des dessinateurs.

 

Rubriques associées

Recréation de conceptions d’applications iOS dans Windows 8

Ressources pour les développeurs d’applications iOS