Premiers pas avec la version pour ordinateur

L'expérience sur ordinateur est adaptative dès le départ, et prend en charge différentes tailles sur les écrans connectés ou dans les fenêtres. Prenez en charge toute la gamme d'appareils Android en créant une UI adaptative. Les mises en page adaptatives sont essentielles pour les expériences sur ordinateur, car elles permettent aux utilisateurs de redimensionner facilement les fenêtres de leurs applications.

Pour préparer votre application à une expérience sur ordinateur, commencez par adapter son UI, puis passez à la conception de l'interaction avec la densité et la saisie. Pour en savoir plus, consultez Mises en page adaptatives. Pour vous entraîner avec un atelier de conception, consultez l'atelier de conception adaptative.

Penser en termes de volets

Adoptez une approche basée sur les volets pour la mise en page en utilisant le regroupement et le confinement. Le contenu peut être organisé à l'aide de conteneurs visuels ou par regroupement implicite avec des espaces négatifs. Ces volets offrent de la flexibilité, car ils peuvent être développés, réduits, masqués, déplacés ou affichés sous forme de pop-ups. La conception avec des volets simplifie la création d'expériences cohérentes sur différents appareils mobiles et peut être intégrée aux grilles actuelles pour rationaliser les alignements de mise en page complexes.

Nombre d'utilisateurs

Bien que les grands écrans offrent plus d'espace pour le contenu, il faut tenir compte de l'espace supplémentaire et des facteurs ergonomiques tels que la distance de visionnage. La typographie doit être légèrement agrandie pour le confort des utilisateurs qui peuvent être plus éloignés ou taper sur un clavier.

Les éléments et la typographie de l'UI sont mis à l'échelle sur les écrans étendus et connectés, et peuvent avoir des échelles différentes en raison des résolutions d'écran.

Utilisez une ou deux étapes supplémentaires dans vos conceptions de typographie existantes, ou envisagez d'implémenter une typographie spécialisée conçue pour les ordinateurs et les écrans plus grands. Vous pouvez apporter des ajustements subjectifs à vos conceptions pour leur donner un aspect plus éditorial.

L'image est également mise à l'échelle et s'étend sur tout l'écran. L'utilisateur peut ainsi voir la plante plus en détail, mais l'espace n'est pas utilisé efficacement. Gardez cela à l'esprit lorsque vous structurez les éléments de l'UI.

Contenu et éléments de l'UI

Maintenant que le contenu est regroupé et mis à l'échelle, l'UI de certains contenus peut également se déplacer ou se mettre à jour pour mieux s'adapter aux points d'arrêt.

Dans chaque volet de contenu, déterminez si et comment il s'adaptera. Examinez le contenu lui-même. Si une ligne de liste devient une carte, le contenu perd-il en efficacité d'interaction et en lisibilité ? Les composants peuvent se comporter différemment à différents points d'arrêt. Vous pouvez adapter leur largeur ou leur visibilité, ou même changer de composant.

Déterminez la largeur maximale de chaque élément d'interface utilisateur et du contenu dans un volet. Les éléments d'interface utilisateur ne doivent pas s'étirer sur toute la largeur ni se déformer. Définissez les marges intérieures et extérieures maximales dans les volets. Le texte doit être facile à lire en limitant la longueur des lignes. Limitez les textes courts à environ 60 caractères, tandis que les contenus longs peuvent être plus longs.

Utilisez la divulgation progressive concertée. Plus de contenu peut-il s'afficher lorsque l'utilisateur augmente la taille de la fenêtre ? Déterminez si le contenu supplémentaire augmente la productivité en réduisant le nombre de clics ou s'il crée de la confusion.

La mise en page du contenu de chaque volet peut changer, en fonction du contenu, en se réorganisant dans différentes colonnes et structures de grille. Par exemple, une grille verticale avec un carrousel peut devenir une grille masonry avec un carrousel de fonctionnalités. Envisagez le changement vertical pour les éléments et combinez-le avec les contraintes et les changements de présentation. Vous ne souhaitez peut-être pas déplacer les composants de cette manière, en fonction de la consommation de contenu.

Envisagez de laisser l'utilisateur ajuster la mise en page selon ses préférences pour une lisibilité et une productivité maximales.

Navigation

Après avoir adapté le contenu et les éléments d'interface utilisateur, déterminez comment les volets de contenu interagissent entre eux et avec la hiérarchie de navigation. Au lieu d'appuyer pour accéder au contenu détaillé, vous pouvez utiliser l'espace d'écran supplémentaire pour afficher les détails et le contenu associé les uns à côté des autres.

• Si une barre de navigation est utilisée, la barre inférieure doit se transformer en rail de navigation sur le côté de l'écran pour une meilleure ergonomie. Ne pas étirer une barre de navigation inférieure.
• Pour la navigation secondaire, comme les onglets, pensez à les fixer à une largeur maximale pour faciliter la navigation avec précision.
• Les barres d'application peuvent également être fixées à leur volet de contenu correspondant, mais veillez à ne pas confondre la hiérarchie de navigation.

Densité

L'expérience sur ordinateur peut modifier à la fois la densité d'interaction et la densité visuelle en raison de la précision de la saisie et de la taille de l'écran.

• Vous pouvez augmenter la densité des éléments visuels, tels que les données de tableau, sans submerger l'utilisateur par rapport à une mise en page compacte pour téléphone. Considérez que la densité du contenu est facultative et autorisez toujours la mise à l'échelle du texte dans la mise en page. Ne définissez pas de taille de type fixe.
• Les composants doivent avoir une cible de clic plus précise. Les cibles de clic intrinsèques autour des composants peuvent entraîner des clics incorrects.

Entrées

Des entrées supplémentaires signifient des schémas d'interaction supplémentaires pour vos utilisateurs.

Lorsqu'un utilisateur dispose d'une souris et d'un clavier, votre application doit tenir compte de l'état de survol et de la sélection.

• Ajoutez des états de pointage pour les entrées de pointeur, telles que la souris et le stylet.
• Capturez les états de focus des éléments lorsque les utilisateurs naviguent à l'aide de la touche de tabulation pour l'accessibilité.
• Tenez compte des états du curseur, car il peut également aider à communiquer l'interaction et l'état de l'application à l'utilisateur.

Des états supplémentaires peuvent améliorer l'efficacité.

• La fonctionnalité de clic droit peut inclure des menus contextuels pour accéder rapidement aux fonctionnalités.
• Les info-bulles au survol peuvent aider les utilisateurs à s'intégrer.
• Les raccourcis clavier aident les utilisateurs expérimentés à améliorer leur productivité.