Sublimez le design de votre app iPad

Bonjour, je m’appelle René Lee et je suis designer au sein de l’équipe Apple Design. Aujourd’hui, je suis ravi de vous présenter les nouveautés sur iPad qui permettront d’améliorer le design de votre app. L’iPad est avant tout une question de simplicité. Et c’est sur cette base solide que repose iPadOS 26. Le multitâche est facile grâce à un nouveau geste qui redimensionne aisément n’importe quelle fenêtre.

Dans la barre d’outils, vous trouverez les nouvelles commandes de fenêtre qui s’agrandissent pour afficher leurs fonctionnalités.

Le nouveau pointeur est plus précis et plus réactif. Et enfin, il y a la nouvelle barre de menus, que vous pouvez enrichir avec tout ce qui rend votre app unique et performante.

Grâce à ces nouvelles fonctionnalités, vous disposez de tous les éléments essentiels pour améliorer votre app iPad. Au cours de cette session, je vous guiderai pas à pas tout au long de ce parcours, en commençant par la navigation de votre app. Ensuite, nous verrons comment Windows fonctionne avec le multitâche sur iPad. Puis, je présenterai le nouveau pointeur de l’iPad et les mises à jour de son effet de survol.

Enfin, nous terminerons cette session avec la nouvelle barre de menus sur iPad. Commençons par : la navigation. Pour améliorer votre app iPad, il est indispensable de choisir son modèle de navigation. La première option dont vous disposez est une barre latérale. La barre latérale est idéale pour les apps comportant de nombreuses sous-vues ou du contenu imbriqué comme Mail.

Observons comment fonctionne la barre latérale de Mail : Mail utilise la barre latérale pour répertorier toutes les boîtes aux lettres et plusieurs comptes, exposant ainsi sa hiérarchie de contenu au niveau général. Mail sur iPad est plus rapide parce que sa barre latérale aplanit sa navigation. Prenons un autre exemple : Musique. Au lieu de boîtes aux lettres, l’app Musique dispose d’un ensemble d’onglets, d’une bibliothèque et de listes de lecture. Donc, dans Musique, ces destinations sont placées à l’intérieur de la barre latérale, ce qui rend la navigation très rapide.

La barre latérale de Musique présente un bouton supplémentaire qui ressemble à une barre d’onglets. Dès que vous la touchez, la barre latérale se transforme en douceur... en une barre d’onglets.

Une barre d’onglets est un modèle de navigation plus compact et plus flexible. Elle est en effet bien plus petite qu’une barre latérale. Votre app peut afficher beaucoup plus de contenu qu’auparavant, ce qui la rend plus immersive. La transformation d’une barre d’onglets en barre latérale se fait aussi en toute transparence. La fluidité de la barre d’onglets permet aux utilisateurs de choisir la navigation qu’ils préfèrent.

Si vous n’êtes toujours pas sûr de la navigation la mieux adaptée à votre app, commencez par une barre d’onglets.

Une barre d’onglets peut facilement se transformer en barre latérale pour aider votre app à évoluer au fil du temps. Voyons ensuite comment chaque navigation s’adapte à des tailles plus petites. Lorsque l’iPad est tourné en mode portrait, une barre latérale peut réagir en se transformant à nouveau en barre d’onglets. Du point de vue de la disposition, le changement d’orientation signifie simplement que votre app doit s’adapter à un changement de largeur. Lorsque la navigation est adaptative, votre app peut s’adapter à n’importe quelle largeur.

Vous pouvez également étendre cette adaptabilité aux fenêtres flottantes, car elles se traduisent également par une largeur plus petite. Si vous utilisez une barre d’onglets, vous pourrez vous adapter aisément à n’importe quelle dimension.

Les apps qui n’utilisent pas de barre d’onglets peuvent également adapter leur navigation en réduisant leurs colonnes.

Lorsque vous vous adaptez aux changements de taille, assurez-vous que tout changement de disposition est non destructif. Le redimensionnement d’une app ne doit pas modifier définitivement sa disposition. Revenez à l’état de départ chaque fois que possible.

Ensuite, étendez votre contenu autour de la navigation.

Les utilisateurs s’intéressent à votre app pour son contenu. Utilisez donc autant l’écran que possible pour créer l’expérience la plus immersive possible. Vous pouvez commencer par dessiner du contenu sous la barre d’outils à l’aide du nouvel effet de bord de défilement. L’extension du contenu est particulièrement intéressante pour les fenêtres flottantes qui sont plus petites qu’une app en plein écran.

Vous pouvez également étendre le contenu sous la barre latérale. Lorsque le contenu s’étend au-delà de ses limites comme ici, vous pouvez même dire quelle ligne a défilé, et de combien. Pour résumer la navigation : Choisissez la navigation qui correspond le mieux au contenu.

Envisagez de commencer par une barre d’onglets. Adaptez votre navigation à des tailles plus petites.

Enfin, étendez votre contenu autour de la navigation.

Ensuite, passons aux fenêtres. Sous iPadOS 26, le nouveau système de fenêtres est à la fois plus simple et plus puissant. Chaque app prenant en charge le mode multitâche affiche désormais une poignée dans le coin inférieur droit.

Faites glisser cela pour redimensionner l’app dans une fenêtre qui flotte au-dessus de votre fond d’écran.

En haut à gauche de chaque fenêtre, vous trouverez les nouvelles commandes de fenêtre. Elles s’agrandissent si vous les touchez, pour afficher leur fonctionnalité. Touchez de façon prolongée pour les étendre davantage et afficher un ensemble de raccourcis capables de créer rapidement différentes dispositions de fenêtre. Les commandes de fenêtre offrent de nombreuses fonctionnalités et sont au cœur de la gestion du multitâche sur l’iPad. Examinons un peu plus en détail comment elles apparaissent sur chaque fenêtre. Les commandes de fenêtre apparaîtront sur le bord avant de votre barre d’outils. Toutes les commandes existantes se déplaceront vers la droite pour faire de la place et éviter l’encombrement.

Pour les apps qui n’ont pas été mises à jour vers iPad OS26, le système augmentera la zone de sécurité au-dessus de la barre d’outils et placera les commandes de fenêtre sur son bord avant.

Notez que ce placement au-dessus de la barre d’outils n’existe que pour des raisons de compatibilité.

Étant donné qu’il crée une zone de sécurité permanente directement au-dessus de votre barre d’outils, l’utilisation de cet emplacement n’est pas optimale pour maximiser le contenu de votre app. Vous devez plutôt enrouler votre barre d’outils autour des commandes de fenêtre pour qu’elle s’aligne. Lorsque vous enroulez votre barre d’outils autour de l’emplacement où les commandes de fenêtre apparaissent, cela peut éviter d’utiliser une zone de sécurité.

L’espace supplémentaire que vous récupérez peut ensuite servir à afficher plus de contenu sans augmenter la taille de la fenêtre.

Ensuite, il y a un changement important dans la manière dont votre app doit gérer l’ouverture de nouveaux documents. Si vous ouvrez un document, son app par défaut s’ouvre au-dessus et dans sa fenêtre. On peut supposer que l’état actuel de l’app a une certaine valeur jusqu’à ce que celle-ci soit masquée ou fermée intentionnellement. Mais que se passe-t-il si vous souhaitez ouvrir un deuxième document ?

Avant l’apparition des flux de travail multitâches, si une app était sollicitée pour ouvrir un autre document, elle ouvrait le fichier dans sa seule et unique fenêtre, effaçant tout contexte précédent au cours du processus. Ce type de comportement « Ouvrir à l’emplacement » n’est plus recommandé pour les apps qui participent au mode multitâche. À l’avenir, votre app devrait créer une nouvelle fenêtre pour chaque document. Lorsque le multitâche est activé, votre app devrait ouvrir chaque document dans sa propre fenêtre. Ce comportement additif est plus utile, car les fenêtres restent ouvertes tant qu’elles ne sont pas fermées. Cependant, ce comportement ne risque-t-il pas d’entraîner une accumulation de fenêtres et de rendre difficile la recherche de ma fenêtre ? Avec le nouveau comportement de fenêtre additif, vous pouvez vite accumuler beaucoup de fenêtres au fil du temps.

Pour vous aider à trouver votre fenêtre, une nouvelle section dans le menu de l’app contient une liste de toutes vos fenêtres ouvertes. Cependant, cette liste n’est pas très utile si les noms de fenêtres ne sont pas descriptifs. Il est donc important que vous donniez des noms descriptifs aux fenêtres de votre app.

Nommez chaque fenêtre avec une chaîne unique, par exemple le titre du document. Si votre app fournit un nom descriptif pour chaque fenêtre, il sera beaucoup plus facile de trouver une fenêtre spécifique.

Pour conclure cette section : Enroulez votre barre d’outils autour des commandes de fenêtre.

Créez une fenêtre pour chaque document. Enfin, attribuez aux fenêtres de votre app des noms descriptifs. Ensuite, découvrons les changements apportés au pointeur sur iPad.

Tout sur l’iPad a été conçu pour être tactile. Le pointeur d’origine était donc de forme circulaire, afin de se rapprocher le plus possible de votre doigt, tant en termes de taille que de précision. Toutefois, le pointeur est en fait capable d’être beaucoup plus précis que votre doigt. Ainsi, dans iPad OS26, le pointeur adopte une nouvelle forme qui lui permet de révéler tout son potentiel. Le nouveau pointeur semble plus précis et plus réactif, car il suit toujours vos mouvements à la perfection. En plus de sa nouvelle forme, le pointeur présente également des modifications dans son comportement lorsqu’il survole les boutons et les commandes. Le nouvel effet de mise en surbrillance est un plateau Liquid Glass qui apparaît directement au-dessus des boutons sur lesquels vous passez le pointeur.

Flottant au-dessus des commandes Liquid Glass, la mise en surbrillance se courbe et réfracte les éléments sous-jacents pour indiquer quel bouton est actuellement sélectionné. Lorsque vous survolez un contrôle Liquid Glass comportant plusieurs boutons, un effet de surbrillance apparaît pour indiquer le bouton sur lequel vous êtes sur le point d’appuyer avec votre pointeur.

Lorsque vous vous déplacez dans la zone, la surbrillance suit rapidement votre pointeur, chaque fois que sa cible change. Le nouvel effet de surbrillance remplace l’effet de survol d’origine à l’endroit où le pointeur se transformait en surbrillance.

Le nouveau pointeur ne sera plus attiré vers aucune cible et ne rebondira plus, mais suivra toujours directement votre saisie.

Veillez à tester votre app avec le nouveau pointeur pour identifier les résultats inattendus. N’hésitez pas à revenir dans cette section pour consulter des informations et obtenir des conseils à mesure que vous affinez et perfectionnez l’interaction de votre pointeur. Enfin, jetons un coup d’œil à la barre des menus sur iPad. La barre de menus a toujours fait partie intégrante de macOS et partage bon nombre de ses principes fondamentaux avec celle de l’iPad. Donc, dans cette section, nous nous concentrerons sur ce qui distingue la barre de menus sur iPad. Sur iPad, vous pouvez faire apparaître la barre des menus en déplaçant votre pointeur vers le bord supérieur. Vous pouvez également balayer vers le bas avec votre doigt. Dans chaque barre de menus, vous trouverez le menu de l’app, suivi des menus par défaut fournis par le système et des menus personnalisés fournis par l’app. Désormais, chaque app sur iPad aura sa propre barre de menus. Commençons donc par quelques conseils pour concevoir une excellente barre de menus. Tout d’abord, organisez vos éléments de menu.

Je vais vous expliquer le processus d’organisation d’un menu personnalisé. À titre d’exemple, nous utiliserons le menu « Message » ici dans « Mail ». La première chose à faire est de remplir le menu avec toutes les actions qui se rapportent à son nom. Vous devez classer ces actions selon leur fréquence d’utilisation et non par ordre alphabétique. Il est également recommandé de regrouper les actions connexes dans leurs propres sections afin de mieux les distinguer. Si le menu commence à devenir trop long, vous pouvez déplacer les actions secondaires dans un sous-menu. Ensuite, attribuez à chaque élément un symbole, qui correspondra idéalement à la façon dont ils apparaissent dans votre app. Enfin, attribuez des raccourcis clavier aux actions les plus courantes. Il en résulte un menu personnalisé bien organisé qui contient des commandes individuelles, et fournit également une carte mentale que les utilisateurs peuvent mémoriser afin de mieux comprendre votre app. Ensuite, remplissez le menu « Affichage ».

L’un des menus fournis par le système est le menu « Affichage ». Toutefois, c’est à votre app de l’enrichir d’actions utiles. Si votre app est organisée par onglets, vous pouvez les inclure dans le menu Affichage.

Ajoutez vos onglets en tant qu’éléments dans le menu d’affichage et attribuez-leur des raccourcis clavier afin d’accélérer le passage d’un onglet à l’autre dans votre app.

Vous disposez maintenant d’un menu d’affichage entièrement fonctionnel. Une bascule de navigation est un autre élément utile. Tout bouton qui permet d’afficher ou de masquer la barre latérale est un excellent ajout au menu d’affichage. L’ajout d’un bouton bascule dans la barre latérale permet aux utilisateurs d’afficher ou de masquer rapidement leur navigation.

La prochaine chose à garder à l’esprit est de ne jamais masquer de menus ou d’éléments en fonction du contexte de votre app. À mesure que les utilisateurs utilisent votre app, son contexte évolue constamment. Ainsi, lorsque vous ouvrez un menu, certains éléments peuvent apparaître grisés, car on ne peut pas les utiliser. Ceci est tout à fait normal. Les éléments du menu doivent toujours rester au même endroit, même lorsqu’ils sont inactifs. Ils deviennent entièrement opaques lorsqu’ils sont disponibles et grisés lorsqu’ils ne le sont pas. Vous vous demandez peut-être pourquoi les actions inactives ne sont pas simplement masquées pour gagner de l’espace.

Il n’est pas recommandé de masquer des éléments de menu, car cela peut désorienter les utilisateurs. Lorsque le contenu d’un menu change constamment, les utilisateurs doivent le parcourir entièrement chaque fois qu’ils l’ouvrent, car ils ne peuvent plus se fier à leur mémoire spatiale. Assurez-vous que le contenu de votre menu reste statique, afin que la barre de menus soit prévisible et facilite la découverte de nouvelles fonctionnalités à chaque visite. Enfin, selon le contexte, il se peut qu’aucun élément du menu ne soit actif.

Même dans ce cas, évitez de masquer des menus dans leur intégralité. La barre de menus devient imprévisible lorsque des menus entiers disparaissent de manière intermittente.

Veuillez vous assurer que les menus et leur contenu restent inchangés afin que les utilisateurs bénéficient toujours de l’expérience à laquelle ils s’attendent.

Récapitulons ce que nous avons appris au sujet de la barre de menus : Organisez vos éléments de menu. Remplissez le menu d’affichage avec des onglets et un bouton d’activation/désactivation de la barre latérale. Évitez de masquer les menus et les éléments de menu. Gardez ces directives à l’esprit lorsque vous concevez la barre de menus de votre app pour obtenir des résultats optimaux. Et voilà, nous avons abordé tous les sujets que j’avais prévus pour aujourd’hui. J’ai examiné comment la navigation fluide et le multitâche additif rendent vos apps iPad plus performantes que jamais. J’ai également expliqué comment le nouveau pointeur permet une saisie précise et comment la barre de menus aide à organiser les actions de votre app, les rendant ainsi plus faciles à trouver. Si vous souhaitez en savoir plus sur le nouveau système de conception, je vous recommande de consulter ces autres sessions.

Lorsque vous commencerez à intégrer ces éléments constitutifs dans vos apps, je suis sûr qu’ils apporteront une valeur ajoutée qui dépassera la somme de leurs parties. Je suis convaincu que vous utiliserez ce que vous avez appris aujourd’hui pour transformer et améliorer l’expérience de votre app iPad. Merci de votre attention !