Posté par francois francois le 15 août 2014

bootstrap mysmeuh smeuhsocial ux

Un MySmeuh 1.5 ?

Récemment, j'ai suivi une courte formation en l'ergonomie logicielle. C'est un domaine passionnant, aussi j'ai décidé de mettre en œuvre mes fraîches compétences sur le projet smeuhsocial, le logiciel derrière mysmeuh. Et tant mieux, il y a plein de choses à y faire

MySmeuh est une chouette aventure. Ici est stockée une bonne tranche de mémoire collective et individuelle. Certains contenus ne manqueront pas de réveiller des émotions ! Aussi, je trouve qu'il est du devoir des technophiles d’œuvrer à la pérennisation de ces données, en faisant vivre le support numérique avec son temps. Depuis le lancement de cette plate-forme, le web et ses usages ont beaucoup progressé et se sont énormément diversifiés. Mais des convergences sont aussi apparues : il est temps d'en faire profiter nos utilisateurs !

<h1>Bootstrap</h1>

Bootstrap est un ensemble de briques vraiment sympathique pour le web moderne. Sa particularité est d'offrir un support pour les périphériques mobiles. Dans sa précédente mise à jour, Alex avait introduit le "responsive design" sur la page d'accueil. Maintenant, il est (presque) partout ! MySmeuh devient bien plus accessible aux mobiles et tablettes sans faillir à son confort sur ordinateur. L'accessibilité, c'est bon

Bootstrap aide à réaliser un site avec des qualités de mise en page et de typographie. La largeur maximale d'une page (sauf la page d'accueil) n'excède pas 960, ce qui permet de concentrer le regard, et propose un grille de mise en page à 12 colonnes permettant de spécifier l'agencement pour chaque taille de lecteur web, juste par des classes css. Il est particulièrement enchanteur de réduire son navigateur et de voir la mise en page se transformer pour un confort de visualisation optimal quelque soit la taille ! Voici la visualisation d'une photo sur écran large, sur petit écran et sur très petit écran.

Un petit peu de "kawaï" apparait au travers d'icônes qui proviennent de Bootstrap. Monochromes et minimales, elle s'intègrent bien partout.

<h1>Navigation</h1>

Je n'ai ajouté aucune fonctionnalité mais remanié leur accès pour simplifier l'interface, et aussi pour inciter l'utilisateur à certaines actions. Car l'ergonomie, c'est aussi de la manipulation : on guide l'utilisateur vers l'accomplissement des actions qu'on lui aura proposé ou suggéré

La navigation se faisait par onglet avec sous-menus sur la droite. L'alignement à droite est perturbant, surtout sur un écran large, le logo tout à gauche invite à un strabisme divergent ... Heureusement la grille de Bootstrap ramène le tout à environ 900 pixels. Mais la zone à chérir en ergonomie et le coin en haut à gauche : c'est là que l’œil se pose en premier. Le logo y est parfaitement à sa place, mais la navigation de niveau 1 devrait être plus proche.

J'ai retiré les onglets, trop nombreux et dont la lecture des libellés assez dense accroit la charge mentale : j'ai choisi de grosses icônes évocatrices (dans les glyphicons de Bootstrap) pour l'accès aux contenus principaux (photos, audio, touites, blogs et tags). Leur grande taille est opportuniste : elle s'accorde à la taille du logo. J'ai sorti du premier niveau de navigation ce qui m'a semblé peu utilisé : "Profil" et "Message". Un aperçu sur la page d'accueil :

Nouvelle navigation

Chaque onglet dupliquait dans son menu la fonctionnalité appelée au clic sur ce même onglet : j'ai retiré ces options de la navigation. Par exemple cliquer sur "Photos" affichait les dernières photos, tout en proposant en 1er élément de sous-menu "Dernières photos" Less is more

La conception centrée sur l'utilisateur est le pilier de l'ergonomie moderne du genre de logiciel qu'est smeuhsocial. J'ai regroupé les éléments liés à l'utilisateur connecté dans l'angle en haut à droite, dans un menu dont le libellé est l'avatar et le nom de l'utilisateur. Un petit triangle vers le bas indique qu'en cliquant, quelque chose va apparaître en dessous :

Menu utilisateur

En l’occurrence, c'est un menu contenant les actions de niveau 2 relatives à l'utilisateur : messagerie, profil, contenus dont il est l'auteur, la configuration du compte et ... le lien pour se déconnecter. C'est volontaire : quitter n'est pas encouragé mais doit être accessible, ici en 2 clics. Le libellé du menu utilisateur peut aussi comporter un badge contenant un nombre de messages non lu s'il y en a. Je pense que peu de gens utilisent la messagerie de smeuh, aussi son accès en niveau 2 de navigation est logique et l'utilisation du badge ramène l'information intéressante sur les messages au niveau 1 de la navigation.

J'aimerai voir avec le temps un MySmeuh encore plus garni ... Aussi j'ai décidé de placer les fonctions liées à la création de contenu systématiquement en première position du sous-menu pour inciter à cette action.

La page d'accueil présente elle tous les liens pour initier un nouveau contenu de n'importe quel type en 1 clic (photo, morceau, billet), contre 2 à présent, avec en plus la charge mentale de navigation ("envoyer une photo" était le dernier élément du menu Photos). C'est le "call to action", qui se répète de page en page suivant le contexte. On veut plus de données sur MySmeuh 'cause we make data love !

Voilà pour la navigation ! C'est déjà beaucoup car un changement visuel assez radical est toujours difficile pour les utilisateurs. Je suis parfaitement prêt à encaisser des commentaires type "nazi de l'interface" ;)

Cependant, je pense que le nombre réduit de clics et une meilleure organisation feront largement oublier les désagréments du changement.

<h1>Teaser</h1>

Toutes les applications qui composent MySmeuh doivent être reprises une à une ... Le tout avance petit à petit, sachant que l'ergonomie, c'est aussi des petites touches qui font la différence. La gallerie photo a son lot d'améliorations : retrait du texte des liens et mise en place d'icônes (qu'ils faut d'ailleurs mettre dans une couleur grise pour ne pas mordre sur les couleurs des images ;) mais je n'ai pas encore customisé la css bootstrap aux couleurs de smeuh ). Les bords ronds ... mmm ... kawai ;)

<h1>C'est pour quand ?</h1>

Il y a encore beaucoup, beaucoup de travail pour migrer totalement le projet ... mais un déploiement de ma version d'expérimentation devrait être possible sur smeuh C'est aussi l'occasion de discuter de tout ça si vous, utilisateurs de mysmeuh, souhaitez une évolution. Aussi, c'est un premier jet, une base de discussion. Tout est absolument améliorable dans le raisonnable

Les sources de smeuhsocial expérimental sont sur mon github.

Commentaires sur ce billet

Merci de vous authentifier (ou vous inscrire) pour laisser un commentaire

Voir le code source en Markdown