Principes de navigation

La navigation entre différents écrans et applications fait partie intégrante de l'expérience utilisateur. Les principes suivants définissent une référence pour une expérience utilisateur cohérente et intuitive entre les applications. Le composant Navigation est conçu pour implémenter ces principes par défaut. Ainsi, les utilisateurs peuvent appliquer les mêmes heuristiques et les mêmes schémas de navigation lorsqu'ils passent d'une application à une autre.

Destination de départ fixe

Chaque application que vous créez dispose d'une destination de départ fixe. Il s'agit du premier écran que l'utilisateur voit lorsqu'il lance votre application à partir du lanceur d'applications. Cette destination est également le dernier écran que l'utilisateur voit lorsqu'il revient au lanceur d'applications après avoir appuyé sur le bouton "Retour". Prenons l'exemple de l'application Sunflower.

Figure 1 : L'écran Liste est la destination de départ de l'application Sunflower.

Lorsque l'application Sunflower est lancée depuis le lanceur d'applications, le premier écran visible par un utilisateur est l'écran Liste, qui reprend la liste des plantes de son jardin. C'est également le dernier écran qu'il voit avant de quitter l'application. Si l'utilisateur appuie sur le bouton "Retour" de l'écran Liste, il revient au lanceur d'applications.

Lorsque vous lancez votre application pour la première fois, une nouvelle tâche est créée pour l'utilisateur, et l'application affiche sa destination de départ. Cela devient la destination de base de ce que l'on appelle la pile "Retour" et constitue la base de l'état de navigation de votre application. Le haut de la pile correspond à l'écran actuel, tandis que les destinations précédentes de la pile reprennent votre historique de navigation. La pile "Retour" contient toujours la destination de départ de l'application au bas de la pile.

Les opérations qui modifient la pile "Retour" opèrent toujours en haut de la pile, soit en envoyant une nouvelle destination vers le haut de la pile, soit en faisant sortir la première destination de la pile. Lorsque vous accédez à une destination, elle est placée sur la pile.

Le composant Navigation gère pour vous l'organisation de la pile "Retour", mais vous pouvez également choisir de gérer vous-même la pile "Retour".

Les boutons "Haut" et "Retour" sont identiques dans la tâche de votre application

Figure 2. Boutons "Haut" et "Retour"

Le bouton "Retour" apparaît dans la barre de navigation du système en bas de l'écran. Il permet de parcourir l'historique récent des écrans de l'utilisateur, dans l'ordre chronologique inverse. Lorsque vous appuyez sur le bouton "Retour", la destination actuelle s'affiche en haut de la pile "Retour", puis vous accédez à la destination précédente.

Le bouton "Haut" apparaît dans la barre d'application en haut de l'écran. Dans la tâche de votre application, les boutons "Haut" et "Retour" se comportent de la même manière.

Le bouton "Haut" ne quitte jamais votre application

Si un utilisateur se trouve à la destination de départ de l'application, le bouton "Haut" ne s'affiche pas, car il ne quitte jamais l'application. Le bouton "Retour", lui, s'affiche et quitte l'application.

Lorsque votre application est lancée à l'aide d'un lien profond sur la tâche d'une autre application, le bouton "Haut" permet aux utilisateurs de revenir à la tâche de votre application et à une pile "Retour" simulée et non à l'application ayant déclenché le lien profond. En revanche, le bouton "Retour" vous ramène à l'autre application.

Que vous utilisiez les liens profonds ou que vous accédiez manuellement à une destination spécifique, vous pouvez utiliser le bouton "Haut" pour revenir à la destination de départ depuis une destination.

Lorsqu'elle dispose d'un lien profond vers une destination dans la tâche de votre application, une pile "Retour" existante liée à la tâche de votre application est supprimée et remplacée par la pile "Retour" contenant le lien profond.

Pour reprendre l'exemple de l'application Sunflower, supposons qu'un utilisateur ait lancé l'application à partir de l'écran du lanceur d'applications et accédé à l'écran des informations détaillées d'une pomme. L'historique récent indique qu'une tâche existe, le premier écran affichant l'écran des informations détaillées de la pomme.

Figure 3. Navigation de l'utilisateur dans l'application Sunflower et la pile "Retour" qui en résulte

À ce stade, l'utilisateur peut appuyer sur le bouton Accueil pour mettre l'application en arrière-plan. Supposons maintenant que cette application dispose d'un lien profond qui permet aux utilisateurs de lancer l'application directement dans un écran d'informations détaillées concernant une plante spécifique avec son nom. En ouvrant l'application via ce lien profond, vous remplacez complètement la pile "Retour" existante de Sunflower illustrée dans la figure 3 par une nouvelle pile "Retour", comme l'illustre la figure 4 :

Figure 4. Un lien profond remplace la pile "Retour" existante pour l'application Sunflower.

Notez que la pile "Retour" de Sunflower est remplacée par une pile "Retour" synthétique avec, en haut, un écran d'informations détaillées concernant l'avocat. L'écran Mon jardin, qui est la destination de départ, a également été ajouté à la pile "Retour". La pile "Retour" initiale de Sunflower a disparu, ainsi que la trace indiquant que l'utilisateur se trouvait auparavant sur l'écran des informations détaillées d'une pomme. Tout ceci est important, car la pile "Retour" synthétique doit être réaliste. Elle doit correspondre à une pile "Retour" qui aurait pu être obtenue en parcourant naturellement l'application.

Pour répondre à ce besoin, la pile "Retour" synthétique créée est une pile simplifiée basée sur le NavGraph. Pour un NavGraph simple sans imbrication, il s'agira de la destination de départ et de la destination du lien profond. Pour des graphiques de navigation imbriqués plus complexes, la précédente pile "Retour" synthétique contient également les destinations de départ de tout graphique imbriqué qui est l'ancêtre de la destination du lien profond.

Le composant Navigation accepte les liens profonds et recrée une pile "Retour" réaliste lorsque vous créez un lien vers n'importe quelle destination de votre graphique de navigation.