Responsive design : 8 grands principes pour des interfaces réussies

Quoi de plus agaçant que de cliquer sur le bouton d’à côté ? Lorsque l’interface est affichée sur mobile, il est important de prévoir des éléments interactifs suffisamment grands et avec suffisamment d’espace entre eux, pour les rendre faciles d’utilisation. Cela profite à tous les utilisateurs, mais est particulièrement utile aux personnes ayant une déficience motrice.
Une taille minimum de 48px est recommandée, pour toute action, quelque soit de devices.
Si l’icône se doit d’être plus petite, on prévoit une zone de sécurité, afin que la zone cliquables atteigne le minimum de 48px.
‍
Sur mobile et tablettes, les boutons sont également plus gros, avec d'avantage d'espace pour faciliter l'utilisation tactile.

Certaines zones de nos appareils sont difficilement atteignables, en particulier lors d'un usage à une seule main.
‍

‍

La zone jaune ne doit pas être évitée à tout prix, mais en responsive design, l'emplacement des éléments et des actions doit être réfléchi. Les zones difficiles d'accès ne doivent pas comporter d'actions importantes.

Il faut aussi prendre en compte que sur certains appareils, des zones sont consacrées à des comportements spécifiques, nuisant toute autre intéraction que l'on pourrait ajouter à cet endroit. On retrouve par exemple les coins des écrans sur certains ordinateurs, le bord des écrans consacrés au swipe sur mobile ou tablette.

‍

Quelles typographies ?

À l’impression, la serif est largement encouragée au détriment des “typographies bâton”. Elle vise a guider l’oeil horizontalement grâce aux empattements.

À l’écran, les contraintes ne sont pas les mêmes. Les écrans sont faits de pixels carrés, donc la typographie serif ( possédant + de courbes que la sans-serif ) à tendance à « baver » sur des écrans à faible résolution. L’oeil se fatigue davantage.

Encore une fois il n’y a pas de règle précise, cependant si votre contenu mise uniquement sur le texte il est préférable d’utiliser une sans serif.

‍

Quelles tailles en responsive design?

"Un écran de téléphone c'est petit, donc la taille des caractères sont plus petits. Logique !".
Ben non.. Justement.
Pour que le contenu soit lisible et manipulable sur une surface réduite, il faut que la taille soit ajustée en conséquence.
(On revient aussi sur le sujet de l’interface finger-friendly. Imaginez-vous sélectionner un lien à 8px. C’est la galère…)
L’utilisateur est davantage exigeant sur mobile, du fait des éléments dérangeants ou changeant : luminosité, traces de doigts, rayures, reflets,…‍

‍

La première erreur à éviter est de conserver la taille des typographies utilisées sur desktop.
Même si le contenu s’adapte bien, il est préférable d’augmenter légèrement le texte courant sur mobile.
L'idéal est une typographie qui respecte au minimum 16px.
‍

Pour bien concevoir, il est d'usage d'utiliser l'uniter "rem" pour vos développements.
C'est une unité définie en amont (ex : 1rem = 16px / 2rem = 32px), et qui peut être ajustée à vos breakpoints.

Pour un exemple concret, vous pouvez aller consulter nos travaux sur l'application de Carrefour.

Les icônes sont un sujet assez sensible en UI (User Interface), pourtant elles ne veulent pas souvent dire grand chose hormis pour son concepteur.
Certaines icônes sont devenues universelles avec le temps (accueil, recherche, impression, téléchargement, notification, compte…). 
D'autres sont loin d'être affordantes, ou peuvent-être liées à plusieurs usages.

Sur desktop elles peuvent être accompagné d'indications présentes au survol.
Mais sur mobile, le survol des éléments n'existe pas.
Il convient donc d'accompagner les icones d'un libellé, clair et explicite, écrit en toute lettre.

‍

‍

La variété des tailles des écrans continue d'augmenter, rendant le travail de conception délicat, pour les designers comme pour les développeurs.
Pour être certains que votre écran s'adapte en toute circonstance, pensez aux grilles de conception, conçues en colonnes.
Il est préconisé d'utiliser des grilles de 12 colonnes sur desktop et tablettes et de 4 sur mobile.

Des breakpoints sont aussi à définir pour ajuster votre contenu aux différents usages de mobilités, ainsi que des règles d'espacements pour rendre le contenu agréable à consulter.
Définir une largeur maximal, des marges, des gouttières pour chaque breakpoints est nécessaire.

Ci dessous, les breakpoints utilisés lors de la refonte de Radio France.

‍

L’utilisation du cut-off design est une excellente manière d’inviter l’utilisateur à découvrir les contenus et à l’inciter à naviguer.
L'avantage ? Il s'adapte facilement en responsive.
Vous devez jouer avec les résolutions (parfois particulièrement petites, ou toujours très variées), en délivrant des indices suggérant les actions possible.

Sur desktop, cet indice peut-être bien visible, ou s'affiche au survol.
En mobile, il se doit d'être explicite directement, souvent en laissant une amorce évidente à l'utilisateur.

Ci-dessous un exemple pensé chez France.tv
‍

Les utilisateurs ont d'ores et déjà des habitudes bien précises sur l'utilisation des ordinateurs, tablettes ou téléphones.
Vous devez tenir compte de cela, pour concevoir vos interfaces.

Sur desktop, on peut retrouver des états de survol, qui fonctionnent très bien, et qui incitent à l'action.
Mais attention parce que sur mobile ces états n'existent pas.
Il convient donc d'ajuster l'UX du produit aux différents usages.

Des actions comme pincer pour zoomer, ou glisser à gauche pour retourner à la page précédent sont devenues intuitives pour la plupart des utilisateurs sur les appareils tactiles et peuvent être utilisés pour optimiser et améliorer l'expérience utilisateur.

Afin d'assister les utilisateurs dans leur utilisation du site ou de l'application, il est important de les accompagner au moyen de notifications.

Ces notifications peuvent prendre différentes formes : des messages d'erreur, des notifications en temps réel pour une action spécifique, ou encore des messages visant à encourager l'utilisation d'un service.

Sur les applications mobiles ou tablettes, il existe des notifications intégrées à l'appareil, mais sur Internet, ce système est soit inexistant, soit méconnu.
Pour garantir une expérience 100% adaptée et réactive à tous les types d'appareils, il est recommandé de concevoir un système de notifications global qui s'adapte à tous les dispositifs.

Généralement, l'e-mail est votre meilleur allié.
Pourquoi ? Parce qu'il est disponible pour tous les types d'utilisateurs, sur toutes les plateformes.
Cependant, il est nécessaire de collecter les données de l'utilisateur pour pouvoir les utiliser.

Vous pouvez également envisager des notifications entièrement responsive et faciles à implémenter, telles que l'utilisation de "toasts" pour confirmer une action ou la création de pages dédiées (par exemple, des pages de conclusion de parcours) pour accompagner votre utilisateur.