Revue de site : l’interface de LifeInMyShoes.org

Je vous propose de décortiquer un site web chaque mois afin d’examiner son interface utilisateur. Je tâcherai de choisir des sites plutôt bien exécutés, utilisant des techniques actuelles et ayant des designs intéressants.

Pour la première édition de l’année, nous allons nous pencher sur le site Life In My Shoes. Quelles sont ses forces au niveau du design et de l’expérience utilisateur ? Quelles sont ses points faibles ?

Présentation du site

La campagne Life In My Shoes a pour vocation de combattre les idées reçues sur les personnes atteintes par le VIH. Il a été commissionné par l’association Body and Soul qui lutte pour le respect, la dignité et le bien-être des enfants, des jeunes et des familles vivant avec le VIH.

Le site vise un public jeune qu’il tente de sensibiliser à ces problématiques.

J’ai choisi de parler de Life In My Shoes car tout en étant un site relativement simple, le sujet est traité de manière intéressante et attractive, avec une expérience utilisateur assez riche.

Le style graphique

Le design de ce site est relativement épuré, voire minimaliste.

Couleur

La palette de couleurs est très réduite : en fait, une seule couleur est utilisée : le jaune. Pour l’accompagner, le designer a choisi d’utiliser toute une gamme de gris. Le gris, et les aplats de gris clair en particulier, on l’avantage de créer une atmosphère posée et propre, propice à la lisibilité de texte gris foncé ou noir.

Imagerie

Le travail sur les graphismes et les photos est intéressant. La plupart des visuels sont des mélanges de photographie et dessin manuel. Les photos on été découpées afin d’éliminer le fond et de ne conserver que le sujet principal.
page du site Life In My Shoes
Ce traitement de l’imagerie a permis d’harmoniser les visuels entre eux. Même si les différentes photos fournies étaient de style hétérogènes, leurs différences sont gommées par leur découpage et leur assemblage avec du dessin.

Typographie

Le travail typographique a été réalisé avec beaucoup d’habileté même si je ne suis pas une adepte du texte centré (sauf exception). La police d’écriture à l’honneur est Houschka Rounded. C’est une police sans empâtement, à la fois très lisible et agréable à regarder.

La police utilisée pour les titres en lettres capitales est Sevigne ST.

La taille du corps de texte varie entre 16px sur le blog, et 19px sur d’autres pages. L’interligne est très bien ajusté, ce qui fait que le tout est très facile et plaisant à lire.

exemple de typographie sur le site Life In My Shoes

Beaucoup de web designers (moi y compris) se permettent des tailles de police de 12px ou 11px sans se rendre compte que c’est très difficile à lire. L’interligne est souvent beaucoup trop serré, ce qui ne donne pas envie d’aller au bout du premier paragraphe.

Comme l’explique cet article du Typographe (Mise à jour du 18/04/2012 : cet article n’est plus disponible mais vous pouvez consulter un article de Smashing Magazine sur ce sujet, en anglais), un corps de texte en 16px est idéal car cette taille correspond à peu près à la taille de texte que nous avons l’habitude de lire sur papier.

Depuis que ma vue a baissé légèrement, je réalise à quel point il est important de ne pas proposer des tailles de textes en dessous de 14px. Très faible est la portion de la population ayant une vision à la Superman.

C’est la mode des designs minimalistes sur internet, bien qu’ils ne soient pas appréciés de tous. On peut le comprendre ; même si l’équilibre entre vides et pleins est harmonieux et que la typographie est belle, ces designs peuvent être visuellement un peu fade.

Dans le cas de Life In My Shoes, je trouve que cet écueil a été évité grâce à plusieurs techniques et astuces subtilement utilisées.

L’interactivité

« (Design is) not just what it looks like and feels like.Design is how it works. »
Steve Jobs

Pour paraphraser cette citation du brillant Steve Jobs, le design n’est pas uniquement affaire d’esthétique et de cosmétique. Le design comprend aussi la manière dont le produit – ici le site web – va réagir aux interactions. Pour résumer, ce qui importe ce n’est pas seulement si c’est « joli », c’est l’expérience utilisateur dans son ensemble.

J’ai trouvé que l’expérience utilisateur sur ce site était subtilement enrichie par différents niveaux d’interactivité et de réactivité.

Les transitions

Lors du passage d’une page à l’autre, la zone de contenu est balayée avec un effet de transition. On aurait pu simplement charger la nouvelle page de manière traditionnelle, mais cet effet est un petit plus assez attractif.

Les contenus de la page d’accueil et de la page Journey So Far apparaissent de manière animée eux aussi. Notez l’effet subtil de parallax sur la page d’accueil, c’est à dire que la photo de l’homme apparait en premier et le fond dessiné circulaire s’insère en décalé dans le temps. On retrouve cet effet sur les différentes pages de Journey So Far lorsqu’on navigue avec les flèches jaunes.

Sur la page About us, on retrouve l’effet de parallax qui est cette fois vertical. Lorsque l’on descend dans la page, que ce soit en utilisant la molette de la souris ou les boutons présents dans la page, on voit que les morceaux de textes et les éléments graphiques bougent à des vitesses différentes. C’est une bonne manière d’inciter à parcourir toute la page, et de faire lire le texte à l’audience.

User input

Autre aspect sympa du site se passe sur la page Be Involved dont le contenu est généré par les utilisateurs. On leur propose d’uploader une photo de leurs pieds chaussés (référence au nom de la campagne) et de partager en une phrase un moment où ils se sont sentis différents, mis à l’écart.

page Be Involved du site

C’est une manière simple et ludique pour l’internaute de s’impliquer et de partager avec d’autres. Visuellement, cela crée ces petites vignettes que l’on peut retourner d’un clic. La simplicité du concept et de l’interface donne envie d’explorer les différentes vignettes, et pourquoi pas d’y ajouter son emprunte.

Responsiveness

Le site a été conçu de manière a s’afficher correctement sur toutes les plateformes et résolutions d’écran. Que vous le consultiez sur un smartphone ou un grand écran d’ordinateur, l’interface devrait à peu près s’adapter. Je dis « à peu près » car le résultat n’est pas parfait sur certaines pages.

Le site s'adapte aux différentes résolutions

Si vous voulez en savoir plus sur ce sujet, je vous recommande de lire ce cas d’étude que j’ai écrit sur le « responsive design ».

Vidéos

Dans la liste des interactions avec le site, j’aimerais ajouter une petite note sur les vidéos car ce site en comprend plusieurs.
Il n’est pas a la portée de tous de proposer des vidéos sur un site, cependant lorsque c’est possible et que c’est pertinent, cela peut être une vraie valeur ajoutée. En tant qu’utilisateur on n’a pas toujours envie de lire du texte. Regarder une vidéo bien faite peut être tout aussi informatif et demander moins d’effort.

Rollovers

Sur la page Journey So Far, j’ai apprécié les petites bulles qui apparaissent lorsqu’on passe la souris sur les noms en noir des personnes citées. C’est une manière ludique de présenter plus d’informations à l’internaute tout en les rendant « optionnelles ». De cette manière elles ne polluent pas la page en étant tout le temps présente.

exemple de bulle lorsque le curseur passe un lien

J’aurais aimé retrouver ce comportement sur d’autres liens du site, dans les contenus mais aussi par exemple sur les icônes des réseaux sociaux ou les logos des partenaires en bas de page.

Note sur l’ergonomie

Elle est plutôt bien pensée dans l’ensemble. La navigation est aisée, le texte est découpé en blocs faciles à lire. J’aurais cependant quelques critiques à émettre.

Navigation

L’état sélectionné d’un élément de navigation ne saute pas aux yeux. Lorsqu’on se trouve sur une page, l’élément de navigation correspondant est d’un gris un peu plus foncé que les autres éléments mais la distinction entre les deux états n’est à mon sens pas suffisante.

La navigation sur la page About us grâce à la barre verticale de droite n’est pas très explicite. J’ai mis du temps à comprendre pourquoi plusieurs points étaient en jaune. Je vous laisse deviner la raison mais voici un indice : cela dépend de la hauteur de votre fenêtre et de votre écran.

Heureusement, l’utilisateur a deux autres options pour naviguer dans cette page : en scrollant à l’aide de la souris ou de la barre de défilement du navigateur et à l’aide des boutons noirs sur jaune situés dans la zone de contenu.

URLs

La section Journey So Far est divisée en trois écrans. Au niveau du code il s’agit d’une seule et même page, mais du point de vue de l’utilisateur ce sont trois pages séparées. On navigue de l’une à l’autre à l’aide des flèches jaunes.

Une bonne pratique consiste à donner des URLs différentes à ces pages, même si en réalité il n’y a qu’une seule page. Dans cet exemple l’URL ne change pas.

En résumé

Les « plus »

  • Palette de couleurs lumineuse et épurée
  • Style d’imagerie créatif et homogène
  • Typographie de qualité et hautement lisible
  • Interactivité variée
  • Animations par petites touches
  • Site « responsive », c’est à dire qui s’adapte aux différentes résolutions d’écrans
  • Vidéos qui égayent et informent

Les « moins »

  • Ergonomie médiocre de la navigation
  • Le texte centré est à éviter
  • Utilisation de javascript pour répartir du contenu sur plusieurs pages, sans changer l’URL

Conclusion

J’ai aimé ce site à la fois pour sa simplicité et pour tous les détails qui apportent un « plus » à l’expérience utilisateur.

On sent que ce projet a nécessité beaucoup de temps et de réflexion afin d’aborder ce sujet sensible de manière ludique, interactive et attractive pour les jeunes (et les moins jeunes), sans tomber dans l’excès au niveau des animations.

Le mois prochain, je vous présenterai la critique d’un autre site.
D’ici là si n’hésitez pas à poster vos commentaires. Êtes-vous d’accord avec mon analyse ? Pas d’accord du tout ?

Commentaires

  1. Merci pour les mots gentils, j’ai travaillé sur le site avec quelques autres au Traffic et nous sont trés enchanté avec votre reaction

  2. raphaelle a écrit:

    Contente que cela vous fasse plaisir, vous avez fait du bon travail !

Exprimez vous!

*