logo IAFACTORY
booster de site
expertise UX
design UX
icone conception UX design

La conception pour les tablettes relève des techniques de conception UX design.
Découvrez des exemples illustrés et des ressources pour concevoir des sites pour tablette.

Concevoir pour les Ipad et les tablettes

Révisé en Mars 2024

Ergonomie tactile et tablette

conception de site pour les tablettes

Vous avez besoin de concevoir une interface utilisateur à destination d'une tablette numérique ?
Cet article vous donne quelques pistes pour la conception tactile sur un écran de tablette. Ces travaux relèvent du design de l'information, du design de l'interaction et de l'ergonomie des interfaces.

La conception d'interface (UI design pour user interface design) à destination des écrans implique une ergonomie tactile. Le design de l'information des appels au clic (call to action) et des liens doit mettre en scène des formats adaptés à la surface des doigts (standard, compter 1cm sur 1cm), en moyenne.

Le design et la présentation des éléments à l'écran nécessitent d'être minifiés, notamment du fait de la taille des écrans. L'ergonomie tactile proposée par les bornes grand public des supermarchés (peser les fruits et légumes, passer les produits en caisse) représente un usage intéressant à considérer dans le design de l'interface tactile. De grandes zones d'interactions, des interfaces simplifiées, une navigation élémentaire et sans surprise, un guidage puissant et des repères de localisation très marqués, sont autant de bonnes pratiques dans le design à destination d'une tablette digitale.

Une faible charge de travail est recommandée. D'une part, en raison des problématiques tactiles et du manque d'interaction optionnelle (pas de clic droit sur tablette, pas de souris pour manipuler précisément les composants d'interface). D'autre part, il est nécessaire de proposer des interfaces rationalisées en raison des limites techniques des tablettes (temps de réponse, charge de l'unité centrale)...

Performances des tablettes

Concevoir des interfaces à destination des tablettes implique donc la prise en compte des performances du terminal, notamment en matière de capacité de chargement (test de charge, test de performance). Faîtes le test et essayez de charger un site volumineux sur votre tablette... Quid du chargement des éléments ventilés à l'écran, par exemple pour des sites de presse en ligne non optimisés...

Les tablettes ont des capacités de calcul bien inférieures à nos ordinateurs. Les concepteurs ont tendance à négliger cet aspect dans l'élaboration de l'interface utilisateur. Or, c'est le principal problème que rencontrent les utilisateurs en situation d'utilisation : les sites sont trop lourds et embarquent trop d'éléments techniques peu ou pas adaptés à l'usage tactile (menu déroulant, javascript sophistiqués...).

La manipulation des éléments est alors complexifiée par les limites du processeur du terminal. Ne riez pas, c'est vrai ! Regardez comme un enfant peut faire planter votre tablette avec quelques fenêtres, et en deux tours de mains :). Même un Ipad ne résiste pas.
Bien sûr, dans la plupart des cas, la visualisation des fenêtres du navigateur restent mono-tâche : un site à la fois. Mais quand même, qui n'a pas hurlé devant la tablette qui rame... Ce n'est pas toujours du seul fait des limites du matériel, c'est aussi, et surtout, lié à un problème au moment du design : la situation d'utilisation n'a pas été considérée...
Le concepteur compose des interfaces riches : les pages proposent des vidéos, des javascript sophistiqués, des interactions AJAX avancées, de nombreux articles...

En effet, il faut bien prendre en compte que votre site internet, ou l'application tablette (ou une web app tablette - site web chargé dans une application tablette) devra partager les ressources limitées du terminal avec d'autres sites...
Pour reprendre le cas des bornes interactives, celles-ci sont généralement dédiées à un usage, ce qui est un facteur favorable en matière de performance ergonomique (rapidité de réalisation de la tâche, temps de réponse du matériel).
Ce n'est pas le cas de la tablette, et il faut le prendre en compte.

Interface tablette et responsive design

Beaucoup de concepteurs considèrent les interfaces adaptatives comme étant une solution efficace face aux problèmes ergonomiques et aux limites matérielles des tablettes.
Quels sont les faits ?
Les sites responsive web design sont souvent très lourds. L'adaptabilité de l'interface du dispositif digital implique beaucoup de développement. Il s'agit de spécifier les comportements de l'interface pour de nombreux cas de figure autour des breakpoints (points de rupture correspondant au basculement de la ventilation des éléments à l'écran) : cela se traduit quasi systématiquement par l'explosion des lignes de codes. Même un code minifié et un développeur de haut niveau rencontrera des difficultés à proposer un code factorisé capable d'adresser les défis de l'ergonomie mobile, de l'ergonomie web et de l'ergonomie des tablettes.
Quel est le problème alors ?

Une conception responsive exige de trouver un compromis de fonctionnement supporté par tous les types de terminaux. Ce compromis est souvent une compromission : compromission de l'expérience sur tablette... L'interaction doit être optimisée pour un contact direct (cas du tactile sur tablette, smartphone, borne) mais également pour une utilisation indirecte (manipulation avec la souris de l'ordinateur, avec un stylet...). Le concepteur doit donc proposer une ergonomie de compromis, qui n'est finalement jamais vraiment optimale sur chacun des supports.

Malgré le dogme du mobile first, c'est souvent la version de bureau - desktop qui est privilégiée comme expérience structurante au moment de la conception de l'interface. Le design de l'interaction, contrairement au design de l'information, n'est nullement flexible : les étapes d'un parcours utilisateur sont déterminées une fois pour toute. Certes les éléments ventilés à l'écran sont optimisés, mais ce n'est pas le cas des parcours, qui sont rigides... Ou alors, il s'agit d'un responsive design très avancés (server side) qui va de pair avec une usine à gaz sur le plan technique. Avis personnel. Mais vérifié dans les usages...

Il est vrai que les sites adaptatifs constituent une bonne réponse en matière de design. Il est intéressant, pour une entreprise comme pour ses clients, de bénéficier d'une expérience unifiée sur tous les points de contacts digitaux. Et donc, de pouvoir accéder à un site optimisé pour l'écran d'une tablette (ou d'un smartphone).
L'ennui, c'est que la tablette est un outil hybride qui est rarement au coeur des considérations du concepteur. Bien sûr, quelques tests seront réalisés, Oyé, on n'a pas oublié la tablette... Mais un concepteur de top niveau se concentre sur l'ordinateur et le mobile. C'est la réalité. La tablette passe aux oubliettes dans les considérations ergonomiques.

Pour la conception d'un support digital d'envergure fonctionnelle et éditoriale importantes, une version spécifique à destination des tablettes doit être envisagée. Au même titre qu'une version mobile. C'est un autre terminal, il présente des spécificités qui ne relèvent ni du smartphone, ni de l'ordinateur...
Le cas d'une version tablette spécifique concerne les sites ecommerce à fort trafic (quand 1% devient un enjeu économique certain dans le business model), les sites de presse en ligne, les services dématérialisés grand public, les palteformes multimédias et de formation.

Situation d'usage de la tablette numérique

Sans refaire l'histoire du pithécanthrope, la tablette pose toujours la question de l'usage :

  • En situation de mobilité, avec une clé 3G-4G, wifi pour présenter des choses.
  • Sur le canapé, devant la télé, dans un surf de procrastination.
  • Dans la bibliothèque pour lire, suivre une formation.
  • Dans le bureau, pour travailler, avec les limites que l'on connaît par rapport à l'ordinateur (ergonomie tactile vs. ergonomie de la souris...).
  • Avec les enfants, pour jouer.

Les usages de la tablette sont très diversifiés. Toute conception de support digital doit faire le point sur la situation d'usage.
Les usages s'apparentent-ils davantage à un contexte de détente et de récréation ou plutôt à ceux d'un environnement de travail ?

En bref, il peut être tout à fait judicieux de concevoir une expérience utilisateur spécifique à destination des tablettes bien au-delà des applications, pour un site web, un logiciel, un webservice...

Les acteurs de taille critique investissent massivement ces supports pour proposer des dispositifs spécifiques adaptés aux particularités des tablettes, en rupture avec l'approche responsive en vogue... Le responsive ne va pas résoudre tous nos problèmes d'interface, trop facile sinon !
Voilà pourquoi, certaines configurations et certains dispositifs digitaux exigent une phase de conception spécifique pour l'interface tablette.

Objectifs de la conception pour les tablettes

Concevoir des interfaces performantes sur tablette

L'objectif de la conception d'interface à destination des tablettes, c'est tout simplement de créer une expérience utilisateur optimale et au top dans un environnement tablette...

Concevoir une interface digitale pour une tablette, c'est :

  • Prendre en compte les limites matérielles de la tablette.
  • Spécifier le contexte d'utilisation (travail, jeu, loisir, etc.).
  • Proposer une ergonomie tactile spécifique.
  • Améliorer les parcours et le design de l'interaction.

La tablette est associée à un outil moins strict que l'ordinateur. On lui associe volontiers des caractéristiques de fun, de détente, de créativité, de loisir...
Concevoir à destination des tablettes implique ainsi des stratégies d'expérience privilégiant le confort de manipulation, le fun, la "gamification" des actions (récompenses, reward, progression).

Chaque entreprise est susceptible de proposer des dispositifs interactifs plus efficaces et mieux adaptés aux spécificités des tablettes. Il y a ainsi de multiples opportunités, au-delà des applications à destination des tablettes, pour créer des interfaces dédiées à ce support en environnement web. Le cas de la web app qui encapsule les contenus web dans l'application est un usage qui tend à se développer.

Une interface tablette dédiée donne de meilleures performances en matière de matériel (limite de la charge physique sur le processeur de la machine) et sur le plan de l'utilisation. L'expérience utilisateur est évidemment meilleure avec une interface spécifique adaptée au terminal d'utilisation. C'est tellement évident. Mais encore faut-il le dire, car ce n'est absolument pas la norme en vigueur...

La norme, c'est un anneau pour les gouverner tous : un site responsive et basta, le job est fait... Oui mais voilà, les sites responsive, c'est lourd, et ça fait cohabiter des logiques tactiles et non tactiles. Les parcours sont construits pour un support et adaptés aux autres. C'est du bricolage ;).

Exemples de conception web tablette

conception d'interface tablette conception d'interface tablette
ux tunnel commande Cdiscount
iafactory - Julien MUCKENSTURM
design interface tablette design interface
ux UIMM
iafactory - Julien MUCKENSTURM

Méthode de conception de site tablette

Comment savoir s'il faut créer un site tablette ?

Comme dans tout projet de conception de dispositif interactif, une phase d'analyse est réalisée pour faire le point sur les tenants et les aboutissants du projet. C'est un cycle classique dans les méthodes de design d'expérience utilisateur (UX design).
Ce temps d'avant-projet est consacré à la clarification des objectifs business, et au recueil des besoins utilisateurs, qui éclaircit les situations d'utilisation...

La phase d'analyse considère les utilisateurs, leurs usages, et le contexte d'utilisation. C'est le coeur de la démarche ergonomique.
A cela s'ajoute une étude rigoureuse des indicateurs de fréquentation lorsque le dispositif existe. Cette analyse webanalytic doit permettre de quantifier et qualifier le trafic issu des tablettes. Un travail poussé sur les pages consultées avec les Ipad, les Galaxy Tab, permet d'extraire les parties du dispositif les plus concernées, à première vue, par un usage tactile. Attention, un espace non consulté ne signifie pas qu'il n'est pas adapté à l'usage, et c'est là tout la subtilité du travail de l'analyste.

Au-delà des enjeux d'expérience utilisateur, il y a aussi les enjeux business : une faible amélioration en matière d'expérience peut représenter des gains importants sur le plan économique, d'autant plus pour des dispositifs à fort trafic.

Observez votre trafic, concentrez-vous sur les usages tablettes, considérez les enjeux économiques. Si vous êtes amenés à concevoir, étudier, conduire un projet de grande envergure, la question d'une interface dédiée aux tablettes est un enjeu fort de la stratégie digitale...
Non, la conception responsive adaptative n'est pas toujours la solution... On a vu qu'elle génère également des problèmes.

Conception d'interface pour les tablettes

Dans la phase de conception dédiée, il s'agit d'inclure toutes les spécificités de la conception à destination des tablettes pour créer des expériences utilisateurs au top :).

  • Ergonomie tactile.
  • Démarche adaptative : conception responsive pour l'écran en mode paysage vs. mode portrait !
  • Design d'information privilégiant des surfaces larges.
  • Mise à plat des formats d'interaction : conception gros doigt.
  • Stratégie de gamification : barème, badge, concours.
  • Utilisation limitée des ressources physiques du matériel : les médias consommateurs sont encapsulés dans des espaces spécifiques (vidéos).
  • Limitation des javascripts et des effets complexes.
  • Modération de la taille des pages : au-secours, mon Ipad rame !
  • Création de parcours diversifiés pour réaliser une même action.
  • Limiter les demandes de saisies : un clavier au numérique est fastidieux pour un utilisateur malhabile
  • Pas de comportement de surface de type rollover, limiter les menus déroulants...
  • Indicateur de progression précis, possibilité de différer les actions (sauvegarde).

Démarche pour concevoir une interface tablette

Tout simplement, concevoir une expérience adaptée au contexte d'utilisation en mode tablette :

  • Recherche utilisateur et clarification du contexte d'utilisation.
  • Approche persona et parcours utilisateur.
  • Axes de conception.
  • Architecture de l'information et design d'interaction du dispositif.
  • Wireframing, modélisation de tous les écrans dans un environnement tactile, avec projection en format portrait et paysage...

Travaux complémentaires à la conception pour les tablettes

Les travaux de conception d'interface débutent par une phase d'analyse : étude des usages digitaux pour comprendre le contexte d'utilisation et les stratégies d'usage. Analyse des besoins utilisateurs pour approfondir la connaissance des usagers.

Veillez à concevoir l'interface digitale pour votre projet de tablette en respectant les codes de la conception tactile. Qui dit conception fonctionnelle, dit également wireframing pour la modélisation détaillée de chaque écran.

Par extension, dans le cadre de la conception d'une interface à destination des tablettes, il faut toujours recourir à une touche de conception responsive car la tablette s'utilise autant en mode portrait qu'en mode paysage... S'il s'agit d'une APP tablette, on peut adapter l'approche de conception autour de la conception de logiciel (la conception d'une APP revenant à élaborer un mini logiciel, en quelques sortes).

Lorsque vous êtes amenés à designer une interface spécifique pour une tablette, la version mobile n'est jamais très loin : conception mobile. De même, les concepteurs sont de plus en plus confrontés à la conception d'interface à destination des objets connectés : conception pour les objets connectés.

Ressources pour concevoir un site tablette

APPROFONDIR
le design tactile

Livre : Design tactile
Design tactile
Plus de techniques de conception
ADAPTATION MULTI-ECRAN
Conception fonctionnelle des interfaces mobiles : web mobile, application mobile, logiciel mobile...
conception mobile
ADAPTATION MULTI-ECRAN
Conception responsive de dispositif pour une expérience de consultation "multi-écran" unifiée...
conception responsive
ADAPTATION MULTI-ECRAN
Conception d'objets et interfaces connectées : cockpit, tableau de bord, montre, écran de contrôle...
conception objet connecté
Prototypage
  • avec iafactory
  • prestation sur-mesure
  • livraison sous 25J