Étiquettes : accessibilité, expérience utilisateur, formats éditoriaux

En travaillant selon une démarche d’amélioration progressive du design, l’approche mobile-first mise sur le contenu et donc, sur l’expérience utilisateur.

[pullquote]Concevoir d’abord pour le mobile ne signifie pas éliminer une partie du contenu. Cette approche nécessite de faire le tri entre les contenus essentiels, secondaires et tertiaires.[/pullquote]

Mobile-first Vs. Desktop-first

L’approche mobile-first ou l’amélioration progressive

Si vous planchez d’abord sur toutes les questions liées au design pour le mobile, adapter celui-ci par la suite pour les autres plateformes (desktop, tablette) est plus facile. En vous penchant en premier lieu sur les caractéristiques essentielles du design, vous travaillez le cœur de votre expérience utilisateur.

L’approche traditionnelle desktop-first ou la dégradation progressive

Pendant longtemps, les designers commençaient par le site, pour lequel ils développaient de nombreuses caractéristiques et complexités. Dans un second temps, ils adaptaient cette version aux dispositifs plus petits. Comment procédaient-ils? Tout simplement en retirant des caractéristiques.

Mais, quel est donc le souci de la dégradation progressive? Pas si simple de distinguer les éléments principaux des secondaires dans cette formule all-inclusive! L’expérience utilisateur sur mobile a de fortes chances de pâtir de cette approche mobile pensée après-coup, qui a simplement consisté à couper dans l’expérience conçue à l’origine.

Qui dit mobile-first, dit content-first

Autre atout de l’approche mobile-first, elle se concentre dès le départ sur le contenu, et donc sur l’utilisateur! Selon cette approche, on ajoute progressivement des couches d’information en passant du mobile à la tablette, et de la tablette au desktop. À l’inverse, selon l’approche desktop-first, on coupe de plus en plus dans le contenu développé pour la version ordinateur.

Concevoir d’abord pour le mobile ne signifie pas éliminer une partie du contenu. Cette approche nécessite de faire le tri entre les contenus essentiels, secondaires et tertiaires. S’il est facile de distinguer les éléments essentiels des éléments secondaires, résistez à la tentation de tout inclure dans la version tablette! L’espace y reste limité!

La typologie de contenu selon l’approche mobile-first

Rapportez-vous à l’essence même de votre site (vendre, informer, etc.). Prenons l’exemple de la page d’accueil d’un site e-commerce de sac à main.

• Les contenus essentiels à retrouver sur la version mobile: le modèle le plus vendu et le tout dernier modèle vont mener directement aux ventes. Évidemment, on retrouvera le nom de la marque et le logo, ainsi que la navigation sous forme de tiroir. Très important également, un call-to-action proéminent de type, « trouvez le sac à main de vos rêves » qui mènera l’utilisateur à vos autres produits.
• Les contenus secondaires à ajouter aux contenus essentiels sur la version tablette: mise en avant de produits additionnels, comme un autre sac à dos ou un kit d’entretien du cuir. Le menu sort du tiroir et s’étend sur toute la longueur de l’écran. Ajoutez un beau et grand visuel dans la partie supérieure de l’écran pour brander votre marque. Et pourquoi pas un témoignage?
• Les contenus tertiaires à ajouter aux contenus essentiels et secondaires sur la version desktop: des bons d’achat, des témoignages, des articles de blog, etc. Ajoutez toutes l’information qui vous semble pertinente!

Notez enfin que les utilisateurs mobiles peuvent avoir besoin d’un contenu fort différent des utilisateurs desktop, car le contexte de navigation n’est pas le même.

Alors, prêt à changer votre manière de penser?

Source

---