Jean-Sébastien Mansart .com - Tag - ergonomie

Deezer, web2.0 et relation client

Jean-Sébastien Mansart — Sun, 28 Sep 2008 18:43:00 +0200

Il y a quelques temps maintenant que je suis inscris sur deezer, mais j'avais quelques soucis de connexion avec mon login / mot de passe.
J'ai voulu parler du problème sur mon autre blog, pour avoir des retours de la part d'utilisateurs, je ne m'attendais pas à avoir une réponse de la part de deezer lui même...

Dans ce commentaire, Doki, de deezer me demande de le contacter directement par email. Ce que je fais rapidement. Le soir, je test de modifier mon mot de passe pour enlever tout caractères non alpha-numérique. Je re-test la connexion et ça passe.

Je reviens sur mon blog et laisse un commentaire disant qu'effectivement, il ne faut que des caractères alpha-numérique, mais que l'interface de deezer ne le signal à aucun moment, ni ne fait aucune vérification.

Le lendemain, je reçois un nouveau mail de la part de Doki. Il me remercie pour mon retour, et me dit qu'un texte signalant les caractères autorisés sera désormais affiché et qu'un test sera effectué lors de la saisie du mot de passe.

J'ai été très surpris par la rapidité et la prise en compte des utilisateurs de la part de deezer. J'aurais pu tout simplement envoyer un email au support, mais je n'ai pas pris le temps de chercher et je voulais tester la réactivité de mon blog.
Deezer est très à l'écoute de ses utilisateurs, et tiens compte de leurs remarques.

Je viens à l'instant de tester le formulaire d'inscription, et il n'est pas possible de saisir de caractères non alpha-numérique.

Beau travail, et merci encore.

Article original écrit par Jean-Sébastien Mansart et publié sur Jean-Sébastien Mansart .com | Lien direct vers l'article | Si vous lisez cet article dans son intégralité sur un autre site que Jean-Sébastien Mansart .com c'est qu'il a été reproduit illégalement et sans autorisation. Merci de le sig naler à son auteur original en cliquant ici | © jsmansart.com.

DotClear 2 : le Wordpress killer ?

Jean-Sébastien Mansart — Wed, 04 Jun 2008 08:00:00 +0200

Cela fait maintenant un mois que DotClear 2 est en RC1, il est temps de faire le point sur les nouveautés apportées et sur ce qu'il manque encore (à mon avis) pour en faire un moteur de blog incontournable.

En route !

Une RC1 désigne une version dont les fonctionnalités sont arrêtées. Reste seulement quelques bugs à corriger, et mener un test à grande échelle.

Bientôt deux ans que la version 2 de DotClear était en beta, et chose impensable dans le monde du logiciel libre, la RC1 a été livré à l'heure, à la minute près. Beaucoup de choses ont changés depuis les versions (7 en tout) beta, petit tour d'horizon :

La première grosse nouvelle, est l'arrivée (enfin !) des pages statiques. Plus besoin de plugin, ni de bidouille, vous pourrez enfin créer vos pages de contacts, d'à propos ou autre le plus simplement du monde. Le formulaire d'édition est le même point par point à celui des billets, vous ne serez donc pas perdu.

La deuxième grosse nouvelle, celle qui se voit le plus d'ailleurs, c'est le nouveau thème Blowup. Un thème simple, mais qui cache toute sa puissance dans l'interface d'administration.
En effet, il est possible d'éditer le thème.
On a de base accès à 11 styles prédéfinis, une fois choisi celui qui nous correspond le mieux, on peut modifier chaque paramètres indépendamment, comme la couleur des liens, la couleur de fond, la position du titre du blog, l'image du bandeau, etc... Les possibilités sont impressionnantes et infinies.
Les personnes n'ayant aucune connaissance en HTML / CSS en seront ravies.

Le formulaire d'édition des billets a subit lui aussi un petit lifting avec quelques options bien utiles :

Les zones d'édition sont redimensionnables à la volée grâce à des poignées, un petit drag & drop et le tour est joué.
Si vous écrivez votre billet avec la syntaxe wiki, un petit lien permet de le convertir en XHTML. Un autre permet la validation XHTML du billet.
Dans la barre wysiwyg deux nouveaux boutons font leur apparition, le premier permet d'insérer un lien vers un ancien billet. Une fenêtre s'ouvre et vous laisse choisir le billet à lier. Un petit module permet d'effectuer une recherche sur les billets.

Le second, permet d'ajouter un média externe, comme une vidéo dailymotion ou youtube. Il suffit d'indiquer l'url de la vidéo et DotClear s'occupe d'insérer le code XHTML valide (contrairement à ce que dailymotion ou youtube fournissent) dans le corps du billet.

En parlant de média, il est maintenant possible d'enregistrer le contenu de ce dossier au format zip et de le télécharger sur l'ordinateur.

Le zip est d'ailleurs devenu le nouveau format pour les plugins. Oubliez le format propriétaire pkg.gz pour distribuer vos plugins, le zip prend le relais. Beaucoup plus simple et ne requière pas l'utilisation d'un plugin particulier pour générer les packages...

La gestion des tags a été aussi revue, il est maintenant possible (oui, ça ne l'était pas avant) de supprimer un tag.

Pour en finir avec les nouveautés, l'accès contextuel à l'aide a été améliorée. Un bouton sur la droite de l'écran permet d'ouvrir un bandeau latéral et affiche le contenu de l'aide en rapport avec la rubrique où vous vous trouvez.

Comme vous pouvez le voir, le travail accompli a été énorme et très bien pensé. Malheureusement (ou heureusement), il y a encore du travail à faire, déjà pour sortir une version finale, et ensuite pour en faire un vrai moteur de blog incontournable, voir un Wordpress killer. Qui sait ?

Pour moi il ne manque pas grand chose :

La prévisualisation du billet dans le blog directement. Pour mieux voir la mise en page et ce que va rendre le billet une fois en ligne.
La sauvegarde automatique du billet toutes les minutes par exemple. Parce qu'on en a marre de perdre le travail en cours (bon, ok, moi je passe par OpenOffice ou Word pour rédiger mes billets... mais bon.)
L'auto-complétion des tags lors de l'édition du billet. C'est peut-être du gadget, moi je ne trouve pas. C'est de l'ergonomie et de la facilité d'utilisation, surtout lorsque l'on a une liste de tags assez chargée. Ca évite aussi de faire des doublons avec deux orthographes différentes.
L'identification par OpenID. On aurait une piste par ici...
Rendre un blog privé. Pour le moment, on ne peut rendre que les billets privés, avec un accès par mot de passe. Des plugins existeraient pour rendre le blog privé, mais d'après les échos que j'en ai eu, ils ne seraient pas vraiment au top.

Pour ma part, je trouve que DotClear est un très bon moteur de blog. Au delà de ce que peut être Wordpress, surtout au niveau de l'ergonomie de l'interface d'administration. DotClear possède des qualités indéniables. Manque juste une communauté plus importante et plus active, surtout pour la création de plugins et thèmes. Cela viendra sûrement avec la version finale.

Nouveau thème : je vous fais faire le tour du proprio ?

Jean-Sébastien Mansart — Wed, 26 Mar 2008 13:54:00 +0100

Après un mois de dur labeur et de fouettage de la graphiste, le nouveau thème de ce blog est enfin en ligne.
Plus qu'un simple changement de couleurs, c'est avant tout un changement ergonomique de la navigation.

Petit tour d'horizon des nouveautés apportées.

Premièrement, d'un point de vue global, la charte graphique reste dans les mêmes tons. L'accent à surtout été mis sur la navigation qui était le point faible (c'est pas peu dire) de l'ancienne version, l'ergonomie et l'accessibilité.
Lorsqu'un visiteur arrivait sur un billet, il n'avait d'autre choix que de retourner à l'accueil où cliquer sur la barre de navigation qui exécutait un javascript douteux...

Maintenant, on retrouve une barre de navigation sur la droite, assez commune, avec un bel emplacement pour l'abonnement au flux RSS, la liste des derniers billets, les catégories et les tags.

Une "micro" navigation horizontale permet d'accéder à des informations plus personnelles : une page pour me contacter, un lien d'échappement vers l'à propos et un lien vers mon CV en format PDF.

Toujours dans la navigation, tout en bas du blog se trouve un "bigfooter" ou "pied de page" qui regroupe les derniers commentaires publiés, les derniers articles et un encart sur ma vie trépidante (c'est pas tout le monde qui peut se targuer d'être l'inventeur d'un sport).

Pour le contenu, tout à été fait pour le mettre en avant.

Sur la page d'accueil, les billets sont coupés, le lien "lire la suite..." à été revu et mis en valeur.
Un lien affiche le nombre de commentaires, et lorsqu'il n'y en a pas, au lieu d'afficher un triste et désespéré "0 commentaires", s'affiche un "commentez !" nettement plus incitatif.
Les liens dans le corps du texte étaient avant pratiquement invisibles, ils étaient noyés dans le texte. On a donc changé la couleur pour une couleur beaucoup plus voyante avec un fort contraste afin de mieux les identifier.
Enfin, à la fin de chaque billet se trouve une section "vous allez aimer !" qui affiche les 5 billets qui sont (plus ou moins) en rapport avec le billet en cours.

Ce thème à naturellement été testé avec les principaux navigateurs du marché : IE6, IE7, Firefox et Safari.
Mis à part sous IE6 qui est un véritable calvaire pour les développeurs, tout a fonctionné à merveille sur les autres navigateurs.

Faites moi part de vos critiques et/ou rapport de bugs (si vous en trouvez)

Utiliser les nouvelles technologies a tout prix

Jean-Sébastien Mansart — Wed, 19 Mar 2008 14:45:00 +0100

L'échange de cartes de visite est un moment assez solennel. Certains ont une carte standard, d'autres pourtant se démarquent. C'est le cas de la carte de visite de Patricia Gallot-Lavallée : un format rond, type sticker, avec sur le recto les informations usuelles et sur le verso des infos en plus.
Quand Patricia nous a donné sa carte, chacun l'a regardé un moment et j'ai été le premier à m'étonner : "Oh ! Un QR Code". Les autres quant à eux se demandaient ce que pouvait bien être cet espèce de picto 8-bit revival tout chelou...

Bienvenue dans le petit monde du QR Code et de sa non utilisation en France...

Le QR Code (Quick Response Code) est un code barre en deux dimensions, il permet un stockage d'informations plus élevé qu'un code barre classique et on peut le lire même s'il est dégradé (ça serait bien pratique en caisse ça...).

Les Codes QR sont originaire du Japon, ils sont principalement utilisés (au japon, forcément) sur les cartes de visites, magazines, affiches publicitaires, etc... et peuvent représenter une url, un email, un nom, une adresse...

Tout le monde le sait, au Japon, c'est pas comme chez nous, ils ont des téléphones portables beaucoup plus évolués, c'est d'ailleurs avec ces derniers que l'utilisation des Codes QR prend tout son sens : Vous voyez un Code QR, hop, dégainage du mobile, une photo et l'appareil reconnaît directement le code. Il vous propose ensuite de suivre le lien et vous vous retrouvez sur une page web par exemple.
Ca évite de devoir taper avec son gros pouce une url dans son téléphone. C'est quand même beaucoup plus pratique.

Par contre en France, avant de trouver un téléphone qui utilise cette technologie, ben... Ouais. On peut encore attendre... Il existe bien quelques logiciels sur PC qui permettent de décoder ces codes barres, et peut être une ou deux applications pour les téléphones, mais elles sont en japonais.

Alors la carte de visite de notre chère Patricia (tout comme celle de Fred Cavazza) est très jolie, elle fait "über hype" avec son QR Code, elle est à la pointe de la technologie, sauf que complètement inutilisable, car complètement inutilisé (et inconnu) en France.

Les early adopters aiment toujours propulser un peu en avant les nouvelles technologies, afin d'en faire un standard (OpenID par exemple). Mettre ainsi sur sa carte de visite un QR Code permet effectivement de promouvoir cette technologie, mais est-ce une bonne idée de l'afficher sur un média aussi commun qu'une carte de visite ?

Peut être que dans dix ans je pourrais ressortir sa carte et la scanner avec mon téléphone, mais pour l'instant...
Heureusement que les infos sont aussi sous forme de texte.

La killer-app pour l'iPhone enfin disponible ?

Jean-Sébastien Mansart — Mon, 10 Mar 2008 16:55:00 +0100

Il aura fallut plus de 6 mois avant d'avoir enfin accès à cette application, certes innovante et dont Apple n'avait absolument pas pensé. Grosse erreur de leur part...

Grâce à iCopy, ça y'est on peut enfin faire du copier / coller.

Et franchement c'est pas trop tôt !

Le Flash, c'est peut être pas assez bien pour l'iPhone, mais le copier / coller ?
De qui se moque-t-on ?

Via TechCrunch

Refonte complète du blog

Jean-Sébastien Mansart — Fri, 07 Mar 2008 13:31:00 +0100

Ça faisait un petit moment que ça me turlupinait, mon blog avait un thème "sympa", mais pas top. Après avoir rencontré Patricia Gallot, l'auteur de "Internet, donne moi ce que je veux", je me suis mis en tête de refondre complètement mon blog, en commençant par la navigation.

La première étape était de trouver un ou plusieurs modèle de navigation propice à un blog.

Un coup de chance, j'avais le livre de Patricia sous la main, et après avoir parcouru les 60 modèles de navigation, j'en ai retenu 3 :

le menu sur la droite
le big footer (le gros pied de page)
le menu horizontal

Il ne restait plus qu'a placer les différents éléments dedans.
Dans le menu de droite seraient présents (dans le désordre) :

la recherche
le lien vers le flux RSS
la liste des tags
les derniers billets
la liste des catégories

Dans le big footer :

le fameux "a propos"
les derniers commentaires
et pour se faire plaisir, une fois encore les derniers billets

Dans le menu horizontal :

Contact
CV
A propos

Et pour finir le tout, un petit colophon histoire de rappeler les mentions légales et quelques liens rapides d'échappements.

Deuxième étape : faire une maquette à partir des éléments définis plus haut.

J'admets, cette partie là, je l'ai délégué. Étant en collocation avec une graphiste web, je n'ai pas eu à chercher longtemps à qui j'allais confier cette tache... On en a profiter pour revoir l'ergonomie du blog, en créant des liens d'échappements là où il en fallait (comme un lien pour aller directement aux commentaires), retirer quelques éléments qui n'apportaient rien (le lien permalink).
Mettre des parties plus en évidences : comme l'abonnement au flux RSS, le "lire la suite..." sur la page d'accueil, les liens dans le corps du texte, etc...

Je voulais aussi garder l'esprit et la charte graphique de l'actuel. Le bandeau à été remanié, le titre du blog amélioré...

Troisième étape : optimiser le code HTML pour le référencement.

Dotclear est part défaut très bien conçut pour le référencement. Cependant, on peut noter quelques améliorations à apporter.

La balise <title> est le titre de la page.
Une balise <h1> définit le titre du document.
Une balise <h2> définit les sous titres

Lorsque l'on est sur la page d'accueil, le title doit donc être le nom du blog, la balise <h1> contiendra elle aussi le titre du blog et on placera les titres des billets dans des balises <h2>.

Par contre, lorsque l'on est sur un billet. Le title de la page devient donc le titre du billet. Celui-ci est aussi englobé dans une balise h1, mais quid du titre du blog ?

Certains disent qu'on peut le laisser en <h1>, d'autres au contraire affirment qu'il ne doit y avoir qu'une seule balise <h1> par page.
Si on part sur la seconde hypothèse, dans quelle balise met-on le titre ?
Une balise <h2> ?
Une balise <p> ?
Une balise <span> ?

Les mêmes questions se posent pour la navigation : les bloc ont des titres, on met quoi ? des <hx> ou une toute autre balise ?

Pour le coup, je suis un peu dépassé, et même tous les grands du HTML se battent sur ce genre de sujet...

Tout cela demande énormément de travail et de recherche, la maquette est terminée, il reste encore l'intégration à faire, les tests sous différents navigateurs et système d'exploitation, et pour finir : le polissage.

A votre avis : quelles balises utiliser pour le titre du blog et la navigation ?