É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.
À 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.
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.
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.
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
Application iPad A. Affichage des photos B. Affichage des commentairesLa 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. |
Application du Windows Store
|
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.
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
Application iPad
|
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
Application iPad
|
Application du Windows Store
|
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.
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
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. |
Application du Windows Store
|
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.
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
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. |
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.
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
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
Application iPad
|
Application du Windows Store
|
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
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 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 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
Application du Windows Store
|
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
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
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 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 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. |