J’ai publié il y a quelques temps un POC tentant de répondre à plusieurs questions d’UI. J’ai pris comme exemple d’application un carnet de voyage, car c’est un sujet qui me tient à coeur depuis plusieurs années. Mais cette UI est adaptable à bien d’autres types de contenus.

Tripbook poc by Tilap
Tripbook poc by Tilap

Objectifs du POC

A travers ce POC, j’ai tenté de répondre aux problématiques suivantes :

  • comment tirer parti de la surface horizontale des écrans actuels: pour une bonne lisibilité, les contenus textes ne peuvent s’étaler sur toute la largeur d’un écran. Comment occuper intelligemment le reste de l’écran ?
  • le découpage d’un écran en plusieurs colonnes peut-il avoir un sens ? Comment conserver une navigation compréhensible ?
  • comment enrichir du contenu sans en alourdir sa lecture ?

J’ai réalisé ce poc avec Frast et l’ai publié sur une page github.io.

L’UI en concret

Plusieurs autres itérations ont été faites depuis, mais vous pourrez déjà y retrouver un travail sur :

  • un contenu texte sur lequel je me suis penché pour obtenir une bonne lisibilité (taille de typo, interligne, …) en y appliquant les meilleurs pratiques que j’ai pu glaner ou remarquer ;
  • des exemples standards de contenus : images, vidéos, galleries photos ;
  • la mise en exergue d’un « side content« , sur la partie gauche, illustrant et enrichissant la partie de texte en cours de lecture;
  • des tentatives de réponses sans grande conviction sur la mise en évidence de lien entre le contenu principal et le side content ;
  • l’adaptation en responsive, en assumant la disparition du « side content ».

Futures itérations ?

Suite a ce poc, plusieurs éléments sont à revoir.

  • La navigation principale, pour intégrer une telle ihm dans un site qui est difficile à placer. Pour le moment, la navigation principale est en haut à droite, ce qui n’est absolument pas naturel ;
  • La mise en évidence pour l’utilisateur du « side content » lié au contenu n’est pas forcément nécessaire ;
  • L’affichage de carte donne souvent envie aux utilisateurs d’une navigation carte vers contenu. J’ai déjà testé plusieurs solutions. Mais elles ont eu pour effet un brouillage de la lecture et de la compréhension de la navigation ;
  • Des composants de contenus additionnel: la galerie d’images est la plus souvent citée. Le carousel ne suffit pas.
  • Des éléments techniques à revoir, notamment en version mobile pour le scroll vertical manquant de fluidité ;
  • Quelques utilisateurs l’ayant testé m’ont parlé de paralax, mais je reste toujours aussi peu convaincu de son intérêt. A tester donc…

Voir la version en ligne »