Le Responsive Web Design ou comment améliorer l’expérience utilisateur

Le RWD pour adapter votre site aux comportements de l’utilisateur… Avant d’attaquer le développement, penser expérience utilisateur, ergonomie et contenu!

Les comportements des utilisateurs mobiles poussent les entreprises à optimiser leur site pour une lecture adaptée à toutes les tailles d’écran.

Le Responsive Design : entendons-nous bien

Le but du Responsive Web Design est de permettre à un site Web de s’autoadapter à la taille de l’écran de l’utilisateur, pour améliorer encore et toujours l’expérience de l’utilisateur dans la navigation Web.

Le Responsive Web Design regroupe une série de techniques de conception graphique, ergonomique et de développement. Le RWD repose sur 3 composants fondamentaux :

1. les media queries (CSS3),
2. les grilles fluides et
3. les images flexibles.

Comme vous le constatez, coder un site en Responsive Design demande de faire appel à un bon designer et intégrateur Web, spécialisé dans les technologies et langages de développement. Un travail pas facile du tout, entres autre dû à l’apparition constante de nouveaux terminaux mobiles. Cela demande du temps, autant pour le développement du site que pour sa conception graphique et ergonomique.

Le but recherché est de rendre un site Web consultable sur tous les supports. Le parcours de l’utilisateur doit être simplifié grâce à une navigation minimaliste, une mise en page claire, simple avec des visuels toujours plus attractifs et rapidement téléchargeables. Retrouvez des exemples à suivre sur  http://mediaqueri.es.

Le contenu et la navigation d’abord, le développement ensuite

Avant de penser au développement de votre site en Responsive Web Design, vous devez réfléchir en amont  au contenu que vous désirez offrir à l’utilisateur et ensuite à l’ergonomie du site. Bien entendu, les besoins mobiles des utilisateurs, leurs comportements doivent être identifiés au préalable pour éviter de faire fausse route.

Laissons la partie technique au développeur. Attardons-nous plutôt sur le contenu que vous allez proposer aux utilisateurs. « Car c’est à partir de cela qu’on détermine ce qu’on va coder en Responsive. Au fond le Responsive, c’est un choix d’architecture de l’information. En Responsive Web Design, c’est le contenu qui va déterminer l’architecture, comme dans un site traditionnel. Encore une fois, le contenu, c’est le nerf de la guerre, comme toujours. »

Quelques conseils…

• Faites un inventaire de vos contenus (articles, pages produit, localisation, liens vers les médias sociaux et extraits PDF, metadescriptions, les différentes rubriques, micro contenu, galerie photos …)
• Structurez votre contenu en pensant aux besoins de l’utilisateur. Faites une maquette, un fil de fer pour structurer vos blocs de contenu. Créez des blocs avec vos contenus : Bloc « header » (constitué du logo, du nom du site et d’éventuelles interactions annexes), Bloc « menu », Bloc « produit » (images, description, prix, informations complémentaires), Bloc « footer » (liens secondaires du site, plan du site)… Ces blocs doivent être indépendants, capables de se réorganiser selon les contraintes du terminal utilisé par l’utilisateur. Conservez un ordre logique dans la structure de vos contenus pour ne pas perdre les utilisateurs.
• Sélectionnez les visuels à conserver : supprimer les visuels qui n’ ont pas trait à informer et qui risqueraient de ralentir la navigation (images de trop grande taille). L’utilisateur sur mobile a des besoins différents. Les utilisateurs ont moins tendance à s’attarder sur les photos.
• Supprimez les éléments et contenus inutiles : proposez des contenus adaptés aux utilisateurs en situation de mobilité. Ces derniers désirent accéder à l’information le plus vite possible.
• Apportez un confort à  la lecture de l’utilisateur: la navigation doit être intuitive.
  • Faites un choix dans la  navigation: l’une des solutions les plus faciles à mettre en place et utilisée dans la majorité des sites responsives, c’est de simplement garder la navigation en haut.
  • Prêtez attention à la longueur de la page sur les versions mobiles.
  • L’utilisateur doit comprendre au premier coup d’œil avec quel élément de l’interface il peut interagir : il est nécessaire que les zones d’interactions ( boutons, liens, …) soient agrandies pour les interfaces tactiles afin d’éviter des clics de proximité non voulus. Les doigts entraînent souvent des erreurs de manipulation.

—> En amont, faites des tests utilisateurs, observez les attentes, comportements et difficultés des utilisateurs lorsqu’ils naviguent sur mobile et autres terminaux.

Identifiez les comportements des utilisateurs de mobile

Le site Our Mobile Planet (conçu par Google en partenariat avec Ipsos OTX Media CT) a mené une étude sur les comportements quotidiens des utilisateurs de mobile.

Après la lecture de cette étude, l’importance de coder votre site en Responsive Web Design deviendra inéluctablement une priorité dans votre démarche marketing et communicationnelle.

L’agence-CSV reprend les grandes lignes de ce rapport composé d’une quarantaine de pages.

Ce qu’on retient :

• En France, le profil type de l’utilisateur de smartphone en 2012 est un homme (59 %), ayant entre 25 et 34 ans (35 %), marié (34 %), vivant en zone urbaine (48 %), avec niveau d’étude équivalent à un Bac+2 (27 %), actuellement employé à temps plein ou temps partiel (69 %) et dont les revenus mensuels bruts sont compris entre 2 500 et 3 499 € (33 %).

• Le domicile est, de manière quasi unanime, le principal lieu d’utilisation du téléphone portable. Le lieu de travail, les moments consacrés au déplacement et les grands magasins constituent les autres principaux lieux d’utilisation des smartphones.

• Si 55% des sondés se connectent à Internet au moins une fois par jour grâce à leur smartphone, c’est dans 62% des cas pour consulter leur messagerie ou pour envoyer des courriels. Viennent ensuite à 48% les recherches via un moteur de recherche, les connexions à des sites de réseaux sociaux (43%) ou à des sites de partage de vidéos (19%).

• 46% des personnes ayant recherché une information locale ont ensuite pris contact avec l’entreprise, 59% s’y sont déplacés, 16% ont abordé le sujet avec d’autres interlocuteurs et 34% ont acheté un produit.

• 47% des personnes ayant été confrontés à publicités diffusées sur des supports aussi différents que la télévision, les revues, les magasins ou les panneaux publicitaires ont cherché à obtenir davantage de renseignements sur le produit en effectuant une recherche sur leur smartphone.

• Les recherches effectuées sur un téléphone portable débouchent, dans 30% des cas, sur des achats en ligne et, dans 22% des cas, à un achat directement en magasin.

Et vous?  Est-ce que votre site est conçu en Responsive Web Design? Qu’avez-vous remarqué dans le comportement des utilisateurs de mobile ?

Sur le sujet, avez-vous lu…

A propos de Mounira Achaichi

Mounira et la E-communication? Le Webmarketing? Vous dites réseaux sociaux? Pour Mounira, c'est devenu une nouvelle passion. Diplômée depuis 2010 en Relations publiques, elle étoffe maintenant ses connaissances en étudiant la Communication à l'Université Libre de Bruxelles. En quête d'expérience ou peut-être tout simplement parce que Cupidon a enfin atteint sa cible, Mounira est depuis février rédactrice sur le blog "Ecrire Pour le Web" une fois par semaine.

Mail | Web | Twitter | Facebook | LinkedIn | Google+ | More Posts (24)