Voici quelques layouts spécifiquement destinés aux écrans tactiles ou aux écrans de petite taille. Certains peuvent toutefois être déclinés sur grands écrans en adaptant leur ergonomie ou le contenu des mises en page ou des menus.
Sommaire
Les layouts basiques de l’écran tactile
Voici quelques mises en page couramment employées sur tablette et mobile.
Lire aussi :
1. Disposition empilée (stacked layout)
Exemple de stacked layout – source NYTimes
La mise en page empilée est une structure de base de l’UI design qui organise les éléments de manière séquentielle, soit verticalement, soit horizontalement, créant ainsi un flux linéaire. Cette disposition est plus adaptée aux contenus qui nécessitent une lecture séquentielle ou une exploration progressive, ce qui la rend adaptée aux écrans de smartphones et à leur ergonomie.
On l’utilise par exemple pour des listes de produits, de contacts, des fils d’actualités ou de discussion, des formulaires à étapes, des tutoriels étape par étape, etc. En fait, tout ce qui peut ou doit se dérouler suivant une chronologie.
La séquentialité du modèle en fait une structure intuitive pour les utilisateurs et flexible pour les designers puisqu’ils peuvent empiler des éléments de taille et de contenu variable (texte, images, graphiques).
Les propriétés flexbox et grid sont particulièrement utiles pour créer des mises en page empilées réactives en CSS et JavaScript peut être utilisé pour gérer les interactions plus complexes de ce layout.
Attention, les mises en page empilées sont efficaces uniquement si le contenu est bien structuré et conduit par des mécanismes de navigation clairs pour éviter de perdre l’utilisateur. L’UI doit prendre en compte l’espacement pour une bonne hiérarchie visuelle et éviter la surcharge qui risque de perdre l’utilisateur.
Le stacked layout se conjugue très bien avec des effets de parallaxe, d’Infinite scrolling et d’animations diverses.
2. Disposition basée sur des cartes (card-based layout)
Page sport du site de la BBC, un exemple de card-based layout – Capture d’écran du site de la BBC
La disposition basée sur des cartes propose une structure modulaire idéale pour présenter des informations de différentes natures. En effet, chaque carte est une entité distincte (un produit, un article, un événement), ce qui permet un agencement rapide et une fluidité pour l’utilisateur. Il est facile de rendre chaque carte attractive par des visuels et des titres accrocheurs et différenciateurs, de leur donner de la visibilité graphique. Chaque carte est cliquable ce qui fournit une action connue à l’utilisateur.
On rencontre le layout card-based sur les sites d’actualités, les plateformes de e-commerce, les réseaux sociaux et les applis de productivité. C’est donc une disposition à très large spectre et donc une disposition connue parce que très usuelle. Pour des applis de productivité et des sites d’actualités, l’option de thèmes personnalisable représente un plus indiscutable pour l’utilisation de ce layout.
L’implémentation passe par un CSS Grid pour des grilles responsives, par Flexbox pour l’alignement et la distribution des contenus à l’intérieur des cartes et par JavaScript pour les interactions et micro-interactions (clic, survol, animations, etc.). La scannabilité de longues pages est le principal avantage de cette disposition. L’utilisateur peut faire défiler des dizaines de cartes rapidement avant de cliquer sur ce qui l’intéresse. Pour garder cet avantage, les designers s’attacheront à construire une bonne hiérarchie visuelle globale (titre et image principale).
3. Disposition des boutons d’action flottants (floating action button — FAB)
FAB d’applis d’un Iphone OS
Les boutons d’action flottants (FAB) souvent colorés, placés en position fixe sur l’écran, généralement dans un coin, servent à mettre en avant l’action principale de l’application en offrant un accès rapide à la fonctionnalité principale de l’interface. Ils sont conçus pour encourager les utilisateurs à effectuer des actions spécifiques.
Les FAB sont un moyen efficace de mettre en avant l’action principale d’une application et donc, d’améliorer l’expérience utilisateur.
Les caractéristiques UI du FAB sont généralement : une position fixe sur la page, une importance de taille et de contraste de couleur et une icône différenciée. Une animation qui signale l’interactivité peut augmenter son importance. On les retrouve partout, dans les calendriers, les messageries, les applis de productivité (nouveau message, nouvel événement, nouvelle tâche, nouvelle note…) ; sur les sites de e-commerce, les FAB servent aux « achats rapides », à « ajouter au panier » ; dans la navigation d’un site, ils servent à indiquer « retour à la page d’accueil », « menu principal », ou à « rechercher ».
L’implémentation des FAB se fait par CSS pour positionner ou superposer le bouton par rapport aux autres éléments (propriétés position : fixed et z-index) et par JavaScript pour les clics et survol. Des bibliothèques de composants en proposent « prêt à l’emploi ».
Pour que l’UI d’un FAB fonctionne pleinement, c’est-à-dire pour pour qu’il apporte la fonctionnalité ou qu’il optimise la conversion, il doit être fixé à la place exacte, contextualisé par rapport à l’interface (retour au menu ou CTA proposent des actions très différentes). Il ne doit pas cacher ou polluer le contenu principal. Un feedback visuel, animation ou changement d’état doit indiquer à l’utilisateur que son action a été enregistrée. On peut utiliser des FAB extensibles qui se transforment en menu contextuel par un clic prolongé, des FAB persistants qui restent visibles à travers le changement de page ou le défilement de la page, ou encore des FAB animés pour des interactions avec les autres éléments.
Les layouts optimisés pour l’ergonomie tactile
Sans être totalement spécifiques aux petits écrans, ces layouts apparaissent rapidement comme plus pratiques à utiliser sur les écrans tactiles de mobiles et de tablettes.
4. Disposition hiérarchique (hierarchical layout)
Exemple de hierarchical layout – source Pinterest
Les dispositions hiérarchiques sont faites pour structurer une arborescence ce qui permet à l’utilisateur de naviguer facilement dans l’information tout en comprenant la structure globale de l’application.
Pour que l’arborescence fonctionne, il faut que les éléments soient agencés en niveaux hiérarchiques suivant un schéma parent-enfant. L’indentation, la taille des éléments, la couleur et la typographie créent la hiérarchie visuelle de cette mise en page.
L’avantage de ce layout est sa scannabilité puisque l’utilisateur interagit avec l’arborescence en développant ou en réduisant les branches suivant ses besoins.
Cette disposition est utile pour organiser les pages et les sections d’un site web, structurer des fichiers dans un système de fichiers, pour l’archivage notamment.
Sans être spécifiquement destinée aux petits écrans, ce layout se conjugue bien avec une navigation tactile.
L’imbrication des listes (ul, ol) peut être réalisée en HTML. Des propriétés CSS comme outline, padding, margin et font-size permettent de personnaliser l’apparence de l’arborescence et JavaScript pour créer le développement et la réduction des branches.
Pour une bonne UX, la hiérarchie doit être sans ambiguïté et être accessible à tous les utilisateurs, y compris ceux ayant des déficiences visuelles. Des techniques plus complexes permettent à l’utilisateur de réorganiser les éléments de la hiérarchie pour ses besoins. On pensera également, suivant le volume d’informations, à créer une case « rechercher » pour accéder directement à la bonne section.
5. Disposition dispersée ou libre (freeform layout)
Exemple de freeform layout pour tablette – source miro
Les dispositions dispersées ou libres permettent de placer les éléments de l’interface utilisateur de manière non linéaire. C’est donc le layout qui se situe à l’opposé des grilles.
Cette mise en page est particulièrement adaptée aux interfaces créatives, interfaces de carte mentale ou interfaces de création visuelle (comme les outils de design graphique) ; mais aussi aux dashboards dynamiques (par exemple : l’utilisateur organise des widgets librement). Les mises en page dispersées offrent une grande liberté, mais requièrent, en contrepartie, une attention particulière pour l’UX. Il faut donc trouver un équilibre entre une disposition libre et une structure claire pour que l’utilisateur puisse naviguer et comprendre l’information.
Les principes de la Gestalt (proximité, similarité, continuité) sont ici des aides non négligeables pour créer du sens et de l’ordre au sein d’une disposition apparemment chaotique.
La mise en service de ce layout est à faire prudemment, par itérations après des tests d’utilisateurs réels pour s’assurer que la disposition est intuitive et efficace. La liberté absolue étant difficile à trouver, quelques alignements seront souvent nécessaires.
Les techniques de positionnement absolu et relative en CSS, combinées avec JavaScript pour les interactions complexes, sont les outils à utiliser pour ce type de mise en page. Le recours aux bibliothèques JavaScript de drag-and-drop et de manipulation d’éléments DOM facilite la création de ce type d’interfaces.
6. Disposition en défilement infini (infinite scrolling)
Exemple de mise en page pour un dispositif de défilement infini — source Pinterest
La mise en page du défilement infini est une technique UI qui permet de charger du contenu à mesure que l’utilisateur fait défiler la page.
Cette approche, popularisée par les réseaux sociaux, remplace les techniques de pagination traditionnelle qui sont ainsi remplacées par un approvisionnement continu de contenu. Ce modèle a l’avantage certain d’engager l’utilisateur et de lui procurer une expérience fluide et enrichissante par la découverte de nouveaux contenus. Attention tout de même, cette approche est dénoncée par plusieurs pays et organismes comme étant addictive, notamment pour les jeunes utilisateurs et les utilisateurs en situation de faiblesse psychologique.
Techniquement, la mise en œuvre du défilement infini nécessite une bonne maîtrise de JavaScript pour détecter les événements de défilement, envoyer des requêtes au serveur afin de charger les données et de mettre à jour l’interface en dynamique. Les bibliothèques JavaScript Infinite Scroll ou Waypoints simplifient toutefois cette tâche.
Pourquoi et comment utiliser le défilement continu ?
Le défilement infini accroît l’engagement en poussant l’utilisateur à explorer plus de contenu. Cependant, son utilisation peut entraîner une fatigue et une difficulté à retrouver un contenu spécifique. Il est donc judicieux de combiner le défilement infini avec des mécanismes de navigation comme des filtres et des possibilités de recherche et, comme le font les sites d’informations, d’indiquer à l’utilisateur qu’il est arrivé à la fin de l’édition du jour ou des informations relatives au thème qu’il a demandé.
7. Disposition en écran partagé (split-screen layout)
Exemple de split-screen pour tablette, apps de productivité — source Apple
Cette mise en page présente simultanément plusieurs ensembles d’informations, ce qui augmente l’efficacité de la page. La division peut être verticale ou horizontale suivant l’inclinaison de l’écran ou les choix de navigation.
Cette disposition permet de comparer des données (documents, codes, images), d’éditer du texte tout en visualisant le résultat en temps réel, de travailler à plusieurs sur un même document au même moment ; ou encore de gérer plusieurs applications en même temps. Les zones sont flexibles en proportion et synchronisables avec différentes sources. Pour être pleinement efficace, le layout split-screen doit être responsive. C’est donc essentiellement une disposition destinée aux applis et plateformes de productivité et de collaboration.
Le développement d’un split-screen se fera avec CSS Grid, Flexbox et JavaScript pour les redimensionnements dynamiques. Pour l’UI et l’UX, les dispositions en split-screen améliorent la mémorisation de l’information puisque l’utilisateur choisit lui-même de visualiser des relations entre différents éléments dans le but de les comparer. Pour cette raison, l’utilisateur doit pouvoir personnaliser la disposition en fonction de ses besoins.
Quelques plus ! Le drag and drop pour redimensionner et déplacer les différentes zones de l’écran, ou un mode plein écran pour une des parties peuvent s’avérer déterminant dans l’utilisation de ce modèle. Cette fonctionnalité devient essentielle dans le cas de l’emploi de graphiques ou de schémas de grande taille pour les écrans de bureau. Ne jamais oublier que c’est un outil de productivité.
Ce qu’il faut retenir
Les layouts utilisés pour les écrans tactiles nécessitent une attention particulière pour le responsive et la définition, les écrans pouvant être de ratio et qualité très différents. Ce qui fait la spécificité des layouts pour ces écrans est la navigation tactile (toucher, double-toucher, balayage latéral, toucher maintenu, etc.) Ces mouvements permettent une liberté accrue pour jouer avec les applications, zoomer d’un geste est beaucoup plus efficace que d’utiliser un menu pour la même opération. Ces moyens doivent donc être les premiers facteurs à prendre en compte lors du choix de layouts pour mobiles.
Image à la UNE : Mobile layout — caméra apps concept — Dribbble