Best Of

Comment réaliser un bon formulaire HTML

21 Apr

webformdesign_med Depuis longtemps, je suis le passionant travail de Luke Wrobleski, le Senior Director of Product Ideation & Design chez Yahoo. En gros, il design des interfaces web, et notamment les formulaires. Ca n’a l’air de rien, mais cet élément fondamental du web est souvent négligé. Il a sorti un livre : Web Form Design: Filling in the Blanks que j’aurais acheté si je bossais encore dans le e-commerce.

Luke a fait une conférence le mois dernier au MIX 09. Elle est disponible en vidéo et c’est à partir de celle là que je rédige ce post.

10 bonnes pratiques pour réaliser un formulaire

Aller droit au but (Path to completion)
Alignement des labels (Label alignment)
Aide et astuces (Help & tips)
Validation (Inline validation)
Actions primaires et secondaires (Primary & Secondary actions)
Actions en cours (Actions in progress)
Erreurs (Errors)
Input inutiles (Unnecessary inputs)
Organisation du formulaire (Form organization)
Engagement graduel (Gradual engagement)

Préambule

Les formulaires, c’est chiant. C’est une barrière entre l’internaute et le site, entre l’utilisateur et l’outil, entre le client et l’entreprise. Il y en a pour tout : pour acheter en ligne, pour participer à des forums, pour utiliser une appli web… C’est pourquoi il faut en tenir compte pour les rendre plus agréable à remplir.

Je livre ici un résumé de la vidéo précédemment citée.

1. Aller droit au but

Avant de remplir un formulaire, l’internaute doit avoir un aperçu de ce qui l’attend. Visuellement, la page doit pouvoir être scannée rapidement. Si il y a plusieurs pages, il faut notifier des différentes étapes (présent, passé, futur). Il faut qu’à tout moment, l’internaute sache où il en est et ce qui lui reste à faire.

Mauvais exemple :

Bon exemple :

2. Alignement des labels

Il y a 3 manières d’aligner les labels :

en haut de l’input : c’est le plus rapide à scanner mais ça prend de la place en hauteur. A utiliser uniquement sur des formulaires courts.
aligner à droite : à utiliser si l’hauteur de la page est limitée parce que le formulaire est long. L’association label/input est rapide parce que les deux sont visuellement proches. Le seul problème avec ce type d’alignement est l’internationalisation : la largeur des labels varient alors que dans la page cette largeur est fixe.
aligner à gauche : facilite la lecture des labels. C’est donc à utiliser si les labels sont compliqués. L’inconvénient est que l’association label/input est moins évidente.

3 manières d'aligner les labels pour 3 situations différentes

Cas particulier : les labels à l’intérieur des inputs

label-dans-input
Si on met le label à l’intérieur de l’input, il faut bien notifier que le contenu actuel ne fait pas partie de la réponse à donner. Si il y a marqué “Mettez votre nom ici…”, il faut éviter que ce contenu soit validé.
Aussi, en remplissant l’input, le label disparaît. Donc à utiliser avec précaution.

3. Aide et astuces

L’aide est utile :

lorsque les informations à donner sont compliquées
pour accompagner l’utilisateur dans sa démarche
pour notifier les données optionnelles
pour expliquer à l’internaute pourquoi telle information est demandée

Il faut faire attention à ne pas surcharger l’utilisateur d’informations.

Plusieurs manières d’aider l’utilisateur :

afficher une aide uniquement sur l’input que l’on est en train de remplir : ça permet d’éviter de surcharger la page en ne donnant qu’une aide sur l’élément actif
afficher une aide au clic ou au hover : une aide optionnelle si l’utilisateur est perdu
afficher une popup : si un texte long est indispensable pour bien expliquer
utiliser une zone fixe où l’aide change au fur et à mesure du formulaire : ça permet d’avoir une zone dédiée à l’aide que l’utilisateur consultera si besoin est

Le formulaire de Digg offre une aide au fur et à mesure que l'on remplit les inputs.

4. Validation

Avec de l’Ajax et des notifications visuelles, on peut aider l’utilisateur à remplir correctement le formulaire, et du mieux possible.

La validation en “live” permet :

de gagner du temps : l’internaute n’a pas besoin d’aller/retour, de recharger la page, de revenir sur les inputs déjà remplis… On ne passe qu’une seule fois à travers le processus.
de donner une réponse correcte : par exemple, si vous voulez une nouvelle adresse mail, vous savez que beaucoup de pseudos sont déjà pris. La validation en “live” permet de tester rapidement les pseudos qui sont disponibles.
de fournir la meilleure réponse : il y a souvent plusieurs réponses correctes possibles. L’exemple le plus évident est le choix du mot de passe. Il y a de plus en plus souvent une barre qui fournit la “puissance” du mot de passe. Plus il est compliqué, plus il est puissant. C’est à double-tranchant, parce qu’il faut se souvenir du mot de passe. Mais ça reste un conseil utile.

La barre de progression pour le mot de passe s'est très répandue.

5. Actions primaires et secondaires

Luke avait posté un excellent post sur la manière de placer et distinguer les actions primaires (“Valider”, “Confirmer”, “Suivant”…) des actions secondaires (“Annuler”, “Effacer”, “Retour”…). Il avait réalisé des tests utilisateurs en leur proposant 6 mises en forme différentes.

La meilleure solution est :

d’éviter les actions secondaires si elles sont inutiles (un “Reset” est très rarement utilisé par l’internaute)
de bien distinguer l’action secondaire (si il y en a une). Ca a pour conséquence de rallonger légèrement la durée de remplissage du formulaire mais l’internaute est content d’être averti des différents choix possibles.
d’aligner l’action principale avec les inputs. La grande majorité du temps, l’internaute n’a qu’une seule envie, c’est d’aller au but, et un bon alignement est primordial pour la vitesse.

La meilleure solution est de distinguer visuellement les deux actions possibles et d'aligner l'action principale à gauche.

6. Actions en cours

Il y a parfois des actions qui demandent du temps, par exemple, lorsqu’on rentre un numéro de carte de crédit et que le formulaire demande à la banque si les informations données sont correctes.
Dans ce cas, pour éviter les erreurs, la meilleure solution est de désactiver temporairement la validation du formulaire, parce que justement, on ne peut pas valider tant que la réponse de la banque n’a pas été fournie. Si l’internaute clique par malheure sur le bouton, il risque de compromettre la validation du formulaire et d’avoir à tout recommencer.

C’est le cas typique de la case à cocher “J’accepte les condtions de service”, qui est généralement décochée. L’internaute clique sur “valider” mais ça ne marche pas.

7. Erreurs

Les erreurs de formulaire dûes à des informations erronées données par l’internaute sont le principal obstacle à la validation du formulaire. Tant qu’il y a des erreurs, on ne peut terminer la validation. L’important est de notifier ces erreurs, et d’informer l’internaute.

Pour bien notifier l’erreur, il faut :

visuellement la marquer : en un coup d’oeil, l’internaute doit comprendre qu’il y a une erreur, et où
expliquer comment corriger l’erreur : si les informations données n’étaient pas bonnes, c’est que l’aide (si il y en avait une), n’a pas marché. A ce moment là, il n’y a plus d’alternative : il faut expliquer clairement comment résoudre le problème.
doubler l’affichage : je me répète mais pour bien marquer l’erreur il faut une couleur différente, une taille de police différente (pour les déficients visuels qui ne voient pas les différences de couleur) et une icône

N'oubliez pas les déficients visuels : il faut non seulement une différence de couleur mais aussi une différence dans la police. Une icône est un plus.

8. Inputs inutiles

Il y a souvent des inputs inutiles dans un formulaire. Par exemple, il arrive souvent à l’inscription d’un site que ce dernier vous demande toutes vos informations : nom, prénom, adresse, sites préférés, hobbies, comment avez-vous connu le site, votre revenu annuel… alors que l’essentiel pour utiliser le site ne réside que dans le nom et l’email.
On voit ça souvent dans les sites communautaires (un forum par exemple) où on demande implicitement à l’inscription de remplir la page de profil alors qu’il est parfaitement possible de s’en occuper plus tard. “Pour l’instant, je veux juste poster ma question sur le forum. Je remplirai mes informations personnelles après”.

Si il est possible de retirer des inputs, il faut le faire.

9. Organisation du formulaire

Avant de s’attaquer à la création d’un formulaire, il faut se focaliser sur ces points :

objectif du formulaire : il faut bien se concentrer sur la raison même d’exister du formulaire, et ne pas s’en écarter.
questions à poser : un certains nombre d’informations sont indispensables, d’autres ne le sont pas.
discuter avec l’internaute : un bon vocabulaire peut aider l’internaute. Etre concis et naturel dans son langage est un plus.
songer à diviser le formulaire en plusieurs sections/pages, si les inputs peuvent être regroupés par thème (une section sur le nom/prénom/adresse, une sur le pseudo/mot de passe, une sur les infos bancaires…)

Ecrire "Day/Year" plutôt que "dd/yyyy" est bien plus naturel et compréhensible.

Le site Huffduffer propose un formulaire imbriqué dans une phrase.

10. Engagement progressif

Le but ultime d’un formulaire est de pouvoir s’en passer. Si un internaute peut commencer à utiliser un service web sans avoir à s’inscrire, alors il sera beaucoup moins réticent à s’inscrire par la suite. “Tiens, je n’ai pas besoin de m’inscrire pour tester cette appli.” Et quelques minutes de test plus tard : “Ah c’est vraiment super! Je m’inscris tout de suite!”

En arrivant sur netvibes, on peut déjà customiser sa page sans avoir à s'inscrire au préalable.

Si une inscription est inévitable, il faut faire en sorte de la rendre la moins laborieuse possible.

Par exemple, si je veux créer un blog :

sur Tumblr : je remplis 3 champs et c’est parti!
sur Blogger : j’ai 3 pages entières à remplir (créer un compte, nommer le blog, choisir un modèle… je le ferais après!)

Je veux juste créer un blog. Pourquoi remplir 3 pages alors que je n'ai que besoin de remplir 3 champs ?

Conclusion

Les formulaires resteront toujours un obstacle entre un site et l’internaute. Il faut à tout prix les raccourcir, jusqu’à les supprimer! Le plus gratifiant dans l’expérience que l’on a d’un service web c’est lorsque l’utilisation est instantanée. Il n’y a pas délai entre le moment où l’on arrive sur un site et le moment où l’on commence à s’en servir. L’inscription s’avère alors une formalité.

Est-ce qu’un bon formulaire peut faire gagner de l’argent ? Oui! Rappelez-vous le bouton à 300 millions de dollars : l’internaute n’était plus invité à “S’inscrire” mais plutôt à “Continuer” ses achats. Ce formulaire avait été redesigné par Luke Wroblewski lui-même.

Je vous invite donc fortement à regarder cette passionante et sympathique vidéo remplie d’exemples intéressants et drôles.

Lancement de 29minparjour.com : un blog pour lutter contre la procrastination

Billet

29 Mar

Je viens de lancer un nouveau blog dont voici le concept :

Tous les jours, je passe au moins 29 minutes à apprendre un nouveau langage et je poste quotidiennement mon avancée. C’est ma solution pour lutter contre la procrastination.

Plus d’informations dans le premier billet de 29minparjour.

bbxpress : un thème WordPress gratuit

Billet

25 Mar

Depuis le temps que je voulais en faire un, voici bbxpress, un thème pour WordPress. C’est une première version, donc n’hésitez pas à faire des retours si vous l’utilisez.

Le but est d’offrir un thème passe-partout, facile à utiliser. Voici quelques caractéristiques :

sidebar avec widgets (très facile à gérer dans l’admin)
compatible IE6
onglets listant les pages WordPress
gravatar dans les commentaires
s’affiche correctement en 800×600
aucun plugin n’est nécessaire pour le faire fonctionner

Les icônes utilisées proviennent de Jonas Rask (un lien existe dans le footer). Pour l’instant, le thème est en anglais (une version française est envisagée, si besoin est).

Screenshots

bbxpress01

bbxpress02

bbxpress03

bbxpress04

bbxpress05

bbxpress06

Télécharger ou prévisualiser le thème

Vous pouvez prévisualiser le thème ou télécharger le thème bbxpress v1.0

Google et ses designers : le divorce

Billet

25 Mar

Le constat

Les départs du pôle design de Google (et part “design”, je parle avant tout de “user experience“, “interface”) se suivent :

Douglas Bowman, Lead Visual Designer (j’en avais déjà parlé)
Kevin Fox, User Experience Designer (pour Gmail, Google Calendar et Google Reader) est parti l’an dernier
Jeffrey Veen (et son équipe) qui avaient créé le très convoité Measure Map (j’ai encore un dossier dédié dans mes bookmarks), racheté par Google pour améliorer l’inévitable Google Analytics
et d’autres: Alexander Limi ou encore Adam Howell

Les raisons d’un divorce

L’essence de Google : les chiffres

Google est rempli d’ingénieurs, de développeurs, de mathématiciens, de statisticiens… C’est la source, le coeur de leur métier, et avant tout, de leur réussite. Il y a d’abord eu l’imperturbable moteur de recherche. Puis il y a eu tout le reste, toutes les applications, qui ont soutenu et renforcé l’emprise de Google sur le web.

Google vit de chiffres et d’algorithmes. Le facteur humain existe (ce qui l’a différencié d’autres moteurs de recherche notamment) mais reste marginal. Tout se calcule, se mesure, et s’appuie sur des données : un monde binaire et quantifié où les données ne mentent pas.

Le design ne se calcule pas

Il est compliqué dans un environnement pareil pour un designer de faire comprendre que son travail peut rarement être mesuré. Il existe le A/B testing pour certains cas de figure, mais lorsque l’on voit ce genre de test utilisé pour se décider entre 41 teintes de bleu (et voir lequel est le plus efficace), on s’imagine que les données prennent ici trop d’importance.

Le rôle d’un designer est d’imaginer de nouvelles expériences, des intéractions innovantes. C’est un travail bien plus global et intéressant que de choisir une couleur ou la taille d’une bordure. Les conversations dans Gmail, le scroll actif de Reader ou les timezone de Google Calendar sont autant d’exemples de design réfléchi, original et efficace, qui n’auraient pu être réalisés arithmétiquement.

Les designers de Google ont eu leur mot à dire. Les résultats sont là. Mais leur influence n’a cessé de décroître ces derniers temps, et cet âge d’or est désormais révolu. Les designers sont, contre leur gré, moins des actifs que des consultants.

Opinion versus tests

Le “user testing” est loin d’être infaillible, et bride fortement l’innovation, la prise de risque, lorsqu’on en abuse. Le vice d’un tel processus est de se retrouver rapidement dans l’impasse, à court d’éléments sur lesquels s’appuyer.

Il faut souvent laisser la décision à une seule personne, légitime et consciencieuse, qui par son expérience, a une opinion fiable sur la solution au problème. Même s’il est difficile de faire comprendre à des ingénieurs qu’un tel choix est le meilleur, car non démontré dans l’absolu, il est indispensable d’agir de cette manière pour éviter des incohérences regrettables et contre-productives.

En soi, Google est l’opposé d’Apple, où les designers (Steve Jobs en premier) ont un souhait souvent difficile à réaliser que les ingénieurs doivent à tout prix concrétiser. Et ces derniers y arrivent avec succès.

Et la suite ?

Je suis admiratif de Google. Si je ne l’étais pas, je ne prendrai pas le temps d’écrire ce post pour tenter de comprendre cette rupture nette et, pour ma part, inattendue. Ces départs multiples de cadres me semblent inquiétants, parce que j’ai l’impression que l’on n’a pas tenté de les empêcher. Est-ce que Google peut se permettre de se séparer d’autant de talents ? Peut-être qu’ils pensent que oui, et l’avenir dira s’ils s’en mordront les doigts ou pas.

Peut-être que l’erreur de Google est d’avoir recruté ces designers pour un poste qui ne leur correspond pas. Lorsque l’on recrute des compétences, il faut en avoir la nécessité, et non pas recruter un statut à qui l’on exigerait des travaux discordants. Le risque est que ces designers ne puissent même plus exercer leur travail, parce que l’essence même de leur profession leur a été subtilisée par quelqu’un d’autre. La confiance entre l’entreprise et le salarié est alors brisée, et le divorce inévitable.

iPhone ≠ iPod Shuffle + PSP + eeePC

Billet

6 Jan

L’iPhone est à la base un téléphone mobile. Mais les raisons de son succès (médiatique et économique) réside dans tout ce qu’il sait faire d’autre : Internet, Jeux, Musique.

Ayant acquis un iPhone il y a 1 mois, mais possédant déjà un iPod Shuffle, une PSP et un “eeePC ” (Medion Akoya Mini E1210), je pensais me passer progressivement de ces 3 objets. Oui et non.

iPhone = iPod plus classe mais moins pratique

L’interface d’un iPhone (ou iPod Touch) est tactile : elle est donc visuelle. Il faut quasi obligatoirement regarder l’écran pour écouter de la musique. En tant que baladeur mp3, il devient laborieux de changer de morceau ou d’éteindre la musique (il reste cependant la possibilité d’augmenter/baisser le volume mais ça reste rudimentaire).

Au contraire, un iPod Shuffle, sans écran (et donc, avec uniquement de véritables boutons physiques), demeure parfait pour une utilisation en transport. On pilote à l’aveugle, uniquement avec ses doigts. Vous me direz qu’il manque un écran pour au moins savoir quel artiste on écoute. Mais à titre personnel, je mets maximum 4 albums sur mon Shuffle, et justement en mode non shuffle (donc, à la suite). Je sais quasiment toujours qui j’écoute. Si vous mettez toute votre bibliothèque musicale, ça peut devenir pénible pour certains. Dans ce cas, je préfère encore un iPod Nano qui garde encore de vrais boutons.

iPhone = PSP différente

L’iPhone est avant tout, autre chose qu’une console de jeu, a priori. Mais la prolifération de jeux sur cette plateforme et l’arrivée de gros éditeurs (Konami par exemple avec Metal Gear Solid, Frogger et Silent Hill) font de facto de l’iPhone une console portable, concurrente des DS et PSP.

Concurrente, vraiment ?

Performances

Incontournables même si parfois secondaires, les performances brutes d’une console sont un point important, notamment pour la qualité graphique et la fluidité des jeux. Selon le président de SEGA America, l’iPhone est aussi puissant qu’une Dreamcast. Mieux qu’une DS (= Nintendo 64), mais moins bien qu’une PSP (= Playstation 2).

Catalogue de jeux

Oui, il y a des tonnes de jeux qui sortent toutes les semaines sur iPhone. Mais combien de bons jeux ? Pour l’instant, j’ai constaté une part énorme de jeux du type casual gaming dont la plupart sont (heureusement) gratuits. L’iPhone ne serait qu’une plateforme où l’on transfèrerait tous les jeux Flash du web ? Le comble!

Certains éditeurs pensent différement et tant mieux pour nous! Je pense à Sim City, Rolando (quasi-remake de LocoRco), Tap Tap, Payback (GTA 2 like), Crash Bandicoot Nitro Kart…

Interface

L’iPhone est une console sans bouton! Il reste possible d’en simuler virtuellement (sur Real Football par exemple). Mais il n’y a pas la précision d’un vrai bouton digital, binaire (appuyé/pas appuyé). Je m’imagine très mal jouer à PES 2009 autrement qu’avec ma PSP.

Quoiqu’il en soit, l’iPhone a ses attraits. Tous les jeux à base de clic de souris se portent très bien sur iPhone, où le tapotage se substitue au clic. Je pense par exemple aux jeux de stratégie au tour à tour : Lux Touch (Risk dans ta poche!) ou Reign Of Swords. N’oublions pas les jeux de cartes et de réflexion.

Un autre atout : l’accélèromètre. Ou une toute nouvelle manière de jouer! Ca donne des jeux assez sympas : Labyrinth ou Super Monkey Ball.

iPhone = eeePC de poche

Le web joue un rôle essentiel dans la popularité de l’iPhone. De plus en plus d’applications web possèdent leur version iPhone, que ce soit une version optimisée pour le navigateur (Google Reader) ou bien une application à part entière (Facebook, WordPress).

Si l’on rajoute les applications basiques de type mail, agenda, prises de notes, messagerie, photos… on peut éventuellement se passer d’un pc portable ou d’un netbook. J’utilise de moins en moins mon Medion pour surfer sur le net. Et puis l’iPhone, en marge de la connection Wi-Fi, peut utiliser le réseau Edge ou 3G.

Mais il manque encore à l’iPhone l’étendue d’un véritable système d’exploitation que peut apporter Windows/Linux/Mac OS. Il semble évident qu’il est difficile pour un OS aussi jeune de concurrencer une plate-forme déjà présente depuis des années (avec son catalogue infini de logiciels tiers). Et c’est sans doute en demander trop! Mais je suis exigeant .

Il ne faut pas oublier l’inexistence d’un clavier physique pour l’iPhone. Entre le tapotage à deux pouces et le tapotage à 10 doigts, je pense que la vitesse de frappe diffère du simple au quadruple.

Conclusion

J’utilise toujours autant mon iPod Shuffle, je n’emporte plus ma PSP dans les transports (le casual gaming de l’iPhone me convient) et j’utilise mon netbook comme avant (c’est à dire, au bureau ou chez des amis).

L’art du management dans le monde du web

Billet

2 Dec

Le web est un domaine professionnel récent. Je ne songe pas aux entreprises qui utilisent le web au quotidien dans leur processus de production. Je pense plutôt aux entreprises qui existent (uniquement) grâce au web : les agences, les sites de e-commerce, les éditeurs d’applications web…

Parce que cet univers est jeune et en perpétuelle évolution, ses acteurs doivent s’entourer d’une population dynamique et innovante, qui a non seulement grandi avec cette révolution numérique, mais veut avant tout en faire partie. C’est une catégorie de salariés peu agée et peu expérimentée dans le monde de l’entreprise, mais à qui il faut faire confiance parce qu’elle déborde d’idées et possède un désir créatif très prolifique. Le web est loin d’avoir atteint son adolescence et son avenir est tellement gigantesque qu’il faut laisser libre cours à la recherche et aux expérimentations qui se révèleront être demain des standards. L’inspiration existe à tous les niveaux d’une hiérarchie.

Il faut éviter de se considérer comme ayant atteint un état de stabilité et de maturité invariable parce que la course à la première place est permanente. Il n’existe pas de risque à prendre mais uniquement des opportunités à saisir. Rien n’est déjà tracé : il faut dessiner sa propre route.

Cette quasi-obligation de progression est parfaitement compatible avec le monde du web, où les contraintes physiques (notamment logistiques) sont souvent insignifiantes. La scalabilité de la production est rudimentaire. L’exemple le plus évident qui me vient à l’esprit est 37signals qui a su exploser sur le marché sans pour autant décupler son effectif. La clé de la réussite d’une telle politique réside sans doute dans une organisation multi-latérale où aucune entité de l’entreprise ne voit son travail dévalorisé, mais au contraire se retrouve incité à s’impliquer activement (et au départ à titre individuel) à la réussite de l’ensemble de la société.

When you’re hiring, seek out people who are managers of one.

Le triangle passion-croissance-argent

Billet

27 Nov

Une question que l’on est amené à se poser de temps en temps : comment évaluer sa situation professionnelle ?

Difficile de répondre à une question qui fait rentrer en jeu d’innombrables critères. Jack Cheng a pourtant tenté le coup en apportant une approche graphique et synthétique du problème : Maxing out your Triangle. Il s’agit d’un triangle équilatéral où chaque médiane correspond à une échelle partant de zéro (au niveau du centre de gravité) pour aller au maximum (qui se trouve à chaque sommet). Et on obtient le love-growth-cash triangle. J’ai traduit ça par :

Passion : le plaisir de faire ce job
Croissance : l’opportunité d’apprendre de nouvelles choses
Argent : ce que ça nous rapporte financièrement

J’ai essayé d’analyser ma situation en utilisant cet outil, et j’ai obtenu :

Un job qui me passionne pas mal, j’apprends beaucoup de choses et le salaire est basique. Ce triangle peut varier au fil des mois mais c’est à peu près la moyenne. Je me rends compte qu’il y a encore beaucoup de zone à remplir, et que d’un côté c’est une bonne chose parce que ça permet de garder des objectifs et de rester motivé.

Je m’ennuie assez vite. C’est pour ça que j’aime démarrer de nouveaux projets (au travail et en dehors), même si je ne les termine pas tous au final. Je pense qu’en freelance on pourrait créer un tel triangle pour chaque travail auquel on s’affaire.

Entre autres, ce qui m’a plu dans cette approche, c’est qu’elle montre que d’avoir un job très bien payé (mais totalement inintéressant) avec des hobbies passionnants à côté est une solution peu fructueuse à terme. Il vaut mieux essayer de concilier les 3 aspects en un seul job : Love Growth Cash. N’est-ce pas là la problématique principale d’une carrière professionnelle, voire d’une vie ?

Faut-il arrêter de coder pour Internet Explorer 6 ?

Billet

23 Oct

Tombe IE6

Ce débat est récurrent dans le temps parce qu’encore aujourd’hui, beaucoup d’intégrateurs s’efforcent de faire marcher leur site (ou ceux de leurs clients) sur IE6. Je ne suis pas le seul (français en tout cas) à réfléchir à ce problème, voire à y répondre carrément en proposant 5 raisons d’arrêter de coder pour IE6.

L’état des lieux

Internet Explorer 6 a globalement une part de marché de 36%. J’utilise TheCounter.com comme référence parce que d’autres sites (comme w3schools ou webreference) ne prennent en compte que leur propre traffic. Ce n’est que depuis février dernier que IE7 est passé devant IE6.

IE6 est sorti en 2001, et sa dernière grosse MAJ date de 2004. Le web étant ce qu’il est en terme de rapidité, IE6 est technologiquement dépassé depuis quelques années. Mais il reste encore très populaire parce qu’il est installé par défaut sur Windows XP.

Le logiciel est tellement buggé que cette page de résolution des bugs est (malheureusement) devenue une référence incontournable : Explorer Exposed.

La concurrence

Etant donné le succès très mitigé de Windows Vista, Internet Explorer 7 a des difficultés à se répandre, malgré le fait qu’il soit, contrairement à son prédécesseur, disponible en téléchargement gratuit.

Chez la concurrence externe à Microsoft, on trouve :

Firefox : populaire chez les web developers et chez les jeunes
Safari : populaire chez les Mac users
Google Chrome : très récent et relativement peu populaire (sans compter le buzz à sa sortie)
Opera : une perle malheureusement très inconnue du grand public

Aucun de ces logiciels ne peut néanmoins exploser au niveau du grand public, cette part de marché, grandissante, novice et à ne surtout pas négliger.

Pourquoi continuer à coder pour IE6

Pour le grand public justement. On peut se poser la question “Mais qui est assez bête pour continuer à utiliser IE6 ?”, mais l’on serait peu respectueux du fait que la plupart des gens ne savent pas ce qu’est un navigateur web. Vous en connaissez surement autour de vous, et vous ne pouvez pas les considérer comme imbéciles pour autant.

N’oublions pas que Tim Berners-Lee (l’inventeur du Web) veut que le Web soit ouvert et accessible à tout le monde, quelle que soit la plate-forme utilisée. Cela passe bien sûr par les Standards du Web, mais il faut tenir compte des faits, c’est à dire la popularité d’IE6.

Une autre raison de coder pour IE6, ce sont les clients. Imaginez que vous fassiez un site pour un prestataire, mais en le prévenant : “Votre site marchera très bien, à part pour un tiers de vos visiteurs, pour qui le site sera totalement buggé.”
Et si il vous demande pourquoi, il sera difficile de lui dire “Parce que le site est parfaitement codé.”

La grand majorité des clients se contrefichent du code derrière un site, et se soucient uniquement du résultat, ce qui est totalement légitime. Ils veulent un site qui fonctionne. Point. D’ailleurs, certaines web agency m’étonnent en mettant en avant le fait qu’ils codent en respectant les standards, tel un argument marketing de premier plan. Leurs clients sont peut-être des développeurs purs et durs qui n’aiment pas intégrer, je ne sais pas, mais ça m’intrigue.

Pourquoi arrêter de coder pour IE6

La raison principale : le temps.
Pour ma part, cela prend 50% de mon temps de faire fonctionner un site sous IE6, ou devrais-je dire, de débugger mon site… C’est comme créer deux sites distincts. Il faudrait facturer cette rétro-compatibilité (parce que oui, je considère IE6 comme rétro) au prix fort.

Autre raison : ne pas avoir à se brider.
Il y a les incapacités d’IE6 (png, hover, position fixed…) et les difficultés d’IE6 (float, margin, alignement…). Avec l’arrivée prochaine des propriétés CSS 3 (border-radius, ombre portée, display table…), ça sera encore plus vrai.

Pour les utilisateurs
Si un internaute voit la plupart des sites buggés sur son ordinateur, il pensera peut-être que le problème ne vient pas des sites mais de son logiciel. Mais il faudrait une action commune et concertée des web developers pour arriver à changer les mentalités. Ca semble compliqué à l’échelle de la planète ? Il suffit que Google dise “Arrêtez de coder pour IE6″ et le monde changera.

Faire un choix

Je pense que le choix se fait au cas par cas. Par exemple, je n’ai pas testé mon blog sous IE6 parce que le temps m’en manque, et parce que le public visé (très vaguement) n’est surement pas grand utilisateur d’IE6.

Mais pour un client (une assocation par exemple), il faudra se plier à cette compatiblité, par respect des utilisateurs, même si, sans qu’ils le sachent, ces utilisateurs ne nous respectent pas.

Netvibes I’m leaving you

Billet

16 Sep

J’ai toujours été fan de Netvibes. Ce fut ma première expérience Ajax. L’interface customizable m’avait bluffée. J’ai rapidement adopté Netvibes en tant que page d’accueil. Les widgets mails étaient un argument de poids : consulter ses boites mails en un seul endroit. Rapidement, j’ai intégré d’autres widgets, qu’ils proviennent de Netvibes (bloc-notes, météo, calendrier…) ou de tiers (Digg, del.icio.us, YouTube…). Mais j’ai surtout utilisé Netvibes comme lecteur de flux RSS, ce qui m’a amené à l’adorer, puis à le quitter.

Netvibes : méga lecteur de flux RSS

Par “méga”, je parle de quantité de flux. En effet, il est très facile d’ajouter des flux RSS : non seulement pas 1 par 1, mais groupes par groupes. Netvibes fonctionne par onglets et l’on pouvait (parce que je ne le retrouve plus) télécharger des onglets entiers remplis de flux RSS (onglets proposés par les utilisateurs). Je me retrouvais avec une douzaine d’onglets, parlant de Web Design, de E-Commerce, de Jeux Vidéo, de Sport, d’Interface, de Photo… C’était la quantité, et souvent la qualité.

Je me retrouvais avec des tonnes de flux RSS, répartis entre divers onglets. Beaucoup de contenu intéressant, peu de temps pour les lire. Netvibes n’offre par défaut que le titre d’un élément du flux (il faut cliquer pour obtenir le contenu). Je me fiais donc à ce titre pour savoir quel contenu lire.

Productivité décroissante

Au fil du temps, je perdais beaucoup de temps à lire mes flux RSS (alors que j’en avais supprimé une bonne moitié). Les 2 éléments qui causaient cette lenteur étaient :

l’Interface
le JavaScript

Naviguer à travers les onglets est devenu fastidieux : il n’y a pas de ligne directrice visuelle pour lire les flux sans perte de temps. On vérifie à l’oeil que chaque bloc n’a pas de nouvel élément, et si oui, on lie le titre, et éventuellement on lit le contenu. Cette non mise en avant du contenu est problématique parce qu’un titre en dit souvent très peu (et les titres racoleurs ne m’attirent guère). Résultat : je passais potentiellement à côté de contenu intéressant.

Autre point sensible : le temps de chargement. Et oui : Firefox + JavaScript = lenteur. Même si c’est moins vrai avec FF3, ça reste pénalisant pour un site qui utilise autant de JS que Netvibes. L’interface est très jolie mais est-ce bien ce que l’on demande d’un flux RSS ?

Vers Google Reader

On m’a initié à ce concurrent qui n’en est pas vraiment un puisque l’équivalent de Netvibes chez Google, c’est iGoogle. Tiens : Google a 2 lecteurs de flux RSS ? Oui, et c’est là d’où venait mon problème.

Google Reader est un vrai lecteur de flux RSS : l’emphase est mise sur le contenu. La mise en forme est basique, l’interface est très pratique (j’adore l’utilisation du scroll), le moteur est rapide.

iGoogle et Netvibes peuvent être utilisés comme lecteur de flux RSS, mais leur atout principal sont les widgets, la personnalisation, les fonctionnalités riches.

Alors me direz-vous, pourquoi est-ce que j’utilisais Netvibes comme lecteur de flux ? Tout simplement parce que tout s’y prête :

à chaque flux RSS disponible sur un site on trouve ce logo
Firefox propose lui même dans sa liste déroulante Netvibes comme lecteur de flux
lorsqu’on veut “Ajouter du contenu” sur Netvibes, un élément principal est l’ajout de flux (avec possibilité d’importer un fichier OPML)

C’était mon erreur : utiliser Netvibes pour une fonctionnalité non optimisée.

Que faire avec Netvibes ?

Si j’aimais assez les widgets, je l’utiliserais encore. Mais ils me sont trop peu utiles. C’est juste une préférence personnelle et je comprends que certains apprécient ces multiples widgets.

Je pense néanmoins que la fonctionnalité la plus intéressante (et une des plus récentes) est la page publique Netvibes. Je l’ai découvert par le biais du Vanksen Group : comparez la page Netvibes avec le site “normal”.

Non seulement le design est nettement plus intéressant sur Netvibes, mais le contenu l’est aussi! La page publique Netvibes permet pour une entreprise d’afficher très facilement son actualité, sa personnalité, ses préférences. Tout ceci est très facile à gérer étant donné la nature dynamique des widgets (par exemple, uploadez une photo sur Flickr, elle s’affichera sur votre page Netvibes).

Cette page publique permet d’apparaître “moderne” et ouvert, surtout si l’entreprise travaille dans le secteur du web. C’est facile, joli et intéressant.

Conclusion

La nature même de Netvibes m’a amené à ne plus l’utiliser. La beauté du site et l’expérience fournie m’éloignaient du contenu, seul élément important chez les flux RSS.

Netvibes est sans doute trop élaboré pour n’être qu’un “simple” lecteur. Il peut faire beaucoup plus et c’est dans ce domaine là qu’il excelle.

Histoire d’un redesign

Billet

11 Aug

Si vous suivez ce blog depuis quelques temps, vous aurez remarqué que j’aime changer de thème WordPress assez fréquemment. Non seulement, je m’ennuie en général assez vite d’un nouveau design mais le thème en lui-même n’est pas bien construit. D’un côté, j’aime varier l’aspect purement graphique de mon site et je construis par conséquent le thème derrière. Mais ce dernier est rarement optimisé. Par exemple, le dernier contenait uniquement un fichier index.php (mis à part les fichiers d’inclusion du type header,footer, comments…). Vous aviez donc la même page selon que vous naviguiez sur la page d’accueil, la page d’un post ou la page des archives. Une grossière erreur d’ergonomie.

Les précédents thèmes

bbxcloud
Mon tout premier thème. Du bleu, du vert, du blanc, et des nuages. Il me fallait apprendre à créer un thème WordPress et à créer une structure de blog. Elle s’avérait au final très bancale.
bbxland
Trois colonnes, et un paysage en guise de header. Ajout d’une 3ème couleur (l’orange) et de plusieurs plugins. Et déjà aucune différenciation entre page d’accueil, page de post, page d’archives…
bbxrevision
Il tient son nom du site où j’avais vu ce type « d’étiquettes » sur le côté. J’ai gardé le système à 3 colonnes en allégeant relativement celle de gauche. Toujours pas de différenciation (home,post,archives…)

Le nouveau thème : bbxhudson

Mon objectif était avant tout de réaliser un thème long terme, que je ne modifierais pas dans quelques mois. Il fallait donc qu’il soit déjà très fonctionnel.

Différenciation

Chaque type de page a sa structure personnelle :

la page d’accueil est en 2 colonnes (avec à droite les infos générales du blog)
arrivé sur la page d’un seul post, cette colonne de droite obtient les infos du post ainsi que les commentaires, pour gagner en hauteur
les pages d’archives (en parcourant une catégorie) ont un titre, une description de la catégorie ainsi qu’une liste des posts sous forme de mosaïque
la page bdbx, pour son contenu particulier, utilisera une mosaïque d’images
la page de tags est identique à celle des archives, avec pour différence la présence d’un nuage de tags en haut, pour faciliter la navigation
une page 404 fait son apparition, en espérant que vous n’ayez pas à tomber dessus

Design élastique en css

Le plus grand challenge a été de réaliser ce thème avec un design élastique. Il n’est pas fixe (largeur définie en pixels), ni fluide (largeurqui s’adapte à la taille de la fenêtre). Il est élastique : la largeur des blocs dépend de la taille du texte, car définie en em. Il est rare de voir ce genre de design parce qu’il est plus compliqué à mettre en place que les autres. Parmi les sites qui l’utilisent, il faut citer l’excellent SimpleBits, le très typographique site de Jon Tan ou bien l’incontournable blog de Fred Cavazza.

A quoi ça sert ?

En modifiant la taille du texte (Ctrl+molette vers le haut ou le bas), les blocs s’adaptent à la taille du texte. Ca permet à ceux qui veulent agrandir le texte de le faire tout en gardant une structure correcte. On a l’impression que c’est un véritable zoom, mais il n’en est rien. Cette méthode marche même sous Internet Explorer.

J’aurais pu refaire un design fixe, comme d’habitude. Mais j’ai profité ce nouveau thème pour apprendre à utiliser les em. Je l’ai fait en lisant (et relisant) cet excellent post : The Incredible Em & Elastic Layouts with CSS.

Vertical Rhythm

En supplément de l’utilisation des em pour la typographie et pour la largeur des blocs, je me suis intéressé à adopter une structure verticale, que l’on appelle en anglais vertical motion (ou vertical rhythm).

Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.

Que ce soit les titres, les paragraphes, les listes, les citations… tous ces éléments ont une hauteur multiple de 24. Cela se voit surtout sur la page d’un seul post, où il y a 2 colonnes.

Il y a donc pas mal de changements dans ce dernier thème. J’en ai profité pour mettre à jour mon tutoriel de menu 100% css et je compte prochainement rajouter un theme switcher, ainsi qu’un footer (à l’occasion ).

«123 »