Bookmarklet mon amour…

Vous connaissez les bookmarklets ?! Moi j’adore ^^

Alerte définition @La rache

Un bookmarklet, c’est comme un bookmark, un favoris, une petite étoile jaune quoi… mais qui, au lieu d’être un simple lien vers une page, agit sur la page ouverte via l’exécution de Javascript.

Si vous avez rien compris c’est pas grave, vous pouvez toujours aller lire l’article Wikipédia pour une meilleure explication.

Voici une petite sélection de ceux que vous devriez vraiment avoir dans vos bookmarks.

Responsive Design Test

Ce bookmarklet va vous permettre de tester en une page le résultat de vos jolies @mediaqueries.

Bookmarklet Responsive design test

Vous pouvez le configurer avez les tailles de viewport dont vous avez besoin en utilisant le site de l’auteur : http://www.benjaminkeen.com/misc/bricss/

Affichage d’une grille

Deuxième bookmark dans la catégorie « webdesign ». L’affichage d’une grille css en layer au dessus du site que vous visitez. Voyez plutôt :

 Grid overlay

Pratique pour vérifier qu’on a bien calé tout ce petit monde pendant l’intégration, ou juste pour comprendre le système de grille ;)

Vous en trouverez un sur le site 960.gs, et si celui ci ne vous plait pas GIYF…

C’est quoi cette font ?

La typographie prend aujourd’hui – pour le plus grand bonheur de tous, ou en tous cas le mien – de plus en plus d’importance dans le webdesign.

Ce bookmarklet vous permet de savoir quel font est utilisée pour un texte sans avoir à passer par firebug ou n’importe quel autres inspecteur d’élément.

Fount

Moi j’utilise Fount, mais encore une fois, GIYF, il en existe beaucoup d’autres.

Et en wireframe ça donne quoi ?

Celui-ci est plus anecdotique, mais les résultats sont parfois intéressant.

Il transformera un site en « wireframes ». D’un coup la structure du site devient plus clair…

Wirify - 960.gs

Vous le trouverez sur le site Wirify

Goggles

Maintenant que vous savez tout du site que vous visitez, il est temps de le pourrir…

Ce bookmarklet est juste une idée de génie, si l’on part du principe que tout ce qui est inutile est indispensable

Vous pouvez dessiner sur la page que vous visitez, et voir ce que les autres utilisateurs ont fait sur celle-ci. Une sorte de réseau social global sous-terrain ou un truc dans le genre. On attendra le premier mémoire de fin d’étude sur Goggles pour en savoir plus sur les implications sociologiques sous-jacentes.

Sur le site orange.fr ça donne ça (à l’heure du screenshot – soit le 16/02 à 22h) :

Goggles

A ajouter d’urgence à vos bookmarks pour la beauté du lol : http://goggles.sneakygcr.net/

Kick Ass

Maintenant que vous avez tout pourri, que plus rien n’est lisible, vous pouvez finir de vous défouler en détruisant le DOM de la page.

Vous avez passer des heures à essayer de finir Astéroids, vous passerez des heures à détruire des sites web, juste pour la beauté du geste…

KickAss

Indispensable, cela va sans dire… http://erkie.github.com/

Voilà pour ceux que j’utilise le plus souvent (enfin pour les deux derniers c’est juste qu’il me font marrer, je bosse un peu de temps en temps quand même).

Vous en trouverez plein d’autres sur votre moteur de recherche préféré ou sur le site Marklets, un annuaire plein de bookmarklets.

Et comme on dit, il y a un bookmarklet pour a peu près tout…

Menus de navigation, on se trompe et on s’obstine…

J’ai lu récemment un article très intéressant sur le site www.uxmovement.com[en], qui interpellait sur un détail d’interface que l’on connait tous : les menus déroulant (ou menu « hover », comprenez qui s’affiche au survol de la souris). Je m’inspire donc librement de cet article pour vous présenter mon avis sur la question et ouvrir le débat.

Ces éléments de navigation sont devenus en quelques années (grâce notamment aux apports du Javascript et des librairies telles que Jquery) des standards du web moderne.

Si ce type de menu apporte en effet une interactivité supplémentaire et peut présenter à priori un aspect pratique, cet article nous montre, par l’exemple, que l’on fait fausse route. Ces menus présentent un certain nombre de défaut non négligeables. Qu’ils fassent appel à des notions ergonomiques basiques ou simplement au bon sens, ces quelques exemples sont simples à comprendre et peuvent vous convaincre qu’une réflexion sur le sujet est intéressante à mener.

Le chemin le plus court est toujours le meilleur…

…sauf avec les menus déroulants.

Le chemin naturel de la souris affichera un autre élément du menu On voit bien sur cette image que le parcours visuel et donc le chemin suivi naturellement par la souris ne correspond pas au mode de fonctionnement du menu. Si je veux aller du menu

« Pas de Calais » au sous-menu « Saint-Omer » je suis instinctivement tenté de suivre la flèche. Mais ce chemin rencontre d’autres éléments, notamment « Nord ». Le sous-menu va donc changer et dans le meilleur des cas je vais devoir recommencer, dans le pire des cas je ne verrais pas le changement de sous-menu et je vais donc cliquer sur le mauvais élément.

Pour atteindre l’élément ciblé du sous-menu, je dois faire un détour Pour atteindre mon sous-menu je dois donc me concentrer et suivre le deuxième chemin, quelle perte de temps ! Et encore, sur cet exemple le sous-menu est relativement « haut » et pas très étendu, j’en ai vu des bien moins haut où la maitrise du glisser de souris sur longue distance était indispensable pour espérer ouvrir la page tant convoitée… Ce problème apparait également sur ce type de menu (et pourtant c’est celui d’Amazon.fr ;)) :

Le même problème en présentation verticaleLe même problème en présentation verticaleLà encore le menu mLà encore le menu m’oblige à utiliser un chemin détourné peu naturel

Apparition non-voulue

Le menu est classiquement positionné entre le header et le contenu de la page. Lorsque l’utilisateur passe sa souris de la zone « header » à la zone « contenu » il passe obligatoirement au-dessus du menu, provoquant ainsi l’ouverture du sous-menu, sans que l’utilisateur ne l’ai voulu et qui l’empêche d’accéder à la zone qu’il visait. Si une solution existe (ajouter une latence – un délai entre le moment où débute le survol de l’élément et l’affichage du sous-menu) elle est trop peu souvent mise en place et on se retrouve avec de nombreux menus qui frustre l’utilisateur, ralentisse son accès à l’information et dégrade donc son expérience de visite (c’est par exemple le cas sur le site Fnac.com).

Difficulté d’accès aux derniers éléments

Un autre problème apparait lorsque l’on présente un menu vertical au survol comme le fait le site euroguitar.fr (si vous vous demandez c’est qu’effectivement je vais m’acheter une nouvelle guitare, comme ça vous savez tout :) – oui je sais il y peu de chance que cela vous intéresse mais ça fait une petite pause détente).

Le dernier élément du sous-menu m’oblige a être précis pour ne pas que le menu ne disparaisse si je sors du cadre Pour atteindre les premiers éléments pas de problème, il suffit de descendre dans le sous-menu avec sa souris, mais pour cliquer sur le lien

« Pack guitare », il faut être précis et ralentir le mouvement de sa souris afin de ne pas quitter la zone de « sous-menu ». On perd encore un peu de temps et si l’utilisateur n’est pas assez précis et sors du menu il va là encore « s’énerver ». Pour cela aussi, des solutions existe, des zones actives plus grande (en ajoutant de la marge entre le texte et la fin du sous-menu), ou la latence. Mais pourquoi essayer de trouver des palliatifs alors que la solution à tous ces problèmes existe depuis toujours : le menu « au clic ».

On abandonne le menu « hover » et on revient aux menus « au clic » ?

D’apparence plus « austère », ils remplissent pourtant à merveille leur rôle, à savoir permettre une navigation fluide, efficace et intuitive. Comme je le disais plus haut, les menus déroulants sont devenus des « standards » et les utilisateurs ont pris l’habitude – aussi mauvaise et désagréable soit-elle pour eux – d’afficher les menus au survol. Revenir, sans distinction, à des menus « au clic » présente donc aussi son lot d’inconvénients.

On sait que l’expérience que les internautes acquièrent est un des critères important dans la conception web, en utilisant les standards latents de la conception web on limite au maximum le besoin de réflexion. Le risque étant alors de perturber l’internaute qui vient de visiter plusieurs sites avec des menus déroulants et au survol de notre magnifique menu, « Damned, il ne se passe rien ! ». Des indicateurs graphique doivent permettre de faire comprendre à l’utilisateur le fonctionnement de ce type de menu qui n’a rien de révolutionnaire non plus.

Il n’est jamais facile de rompre avec un certains confort et il faut assumer le fait de se dire : « ce n’est pas parce qu’il est si populaire qu’il est le plus efficace ».

Il faut donc penser à son menu de navigation – en tant qu’il est un élément central de la conception du site (même si sur ce point aussi un débat pourrait être lancé, et je le ferais sûrement ;)) – en fonction de l’arborescence du site, des autres éléments de navigation et de ses utilisateurs cibles.

Le menu « au clic » me semble gagner la bataille puisqu’il ne souffre pas de défaut d’utilisation majeur (je n’ai pas présenté ici les différents mode de fonctionnement possible mais l’article d’UxMovement le fait en détail[en]), il nécessite peut-être un peu d’éducation des utilisateurs, l’habitude et les astuces graphiques résolvant à merveille cette problématique.

Pour moi, le seul argument qu’il reste avant de « clore » le débat est celui de l’interactivité ou plutôt du « joli effet animé ». Mais, objectivement, si on parle d’ergonomie ce n’est plus un argument ?!

Je vous conseille de lire l’excellent article de UxMovement[en] qui a très fortement inspiré cet article.

De la dispersion des échanges à la décentralisation de l’identité numérique

La sortie de « Google  » est un petit évènement qui à agité les geeks et autres social-media addict pendant quelques jours et si j’ai plutôt un bon feeling avec cette application (je suis tombé amoureux du nouveau design qui est décliné sur tous les services Google) je ne vais pas vous proposer un énième article sur le succès ou l’échec à venir de celle-ci (d’abord parce que comme beaucoup je suis bien incapable de le savoir et tous les scénarios ont déjà été débattus).

La sortie de cette nouvelle application de réseau social remet au premier plan une problématique qui n’est pas nouvelle, la dispersion des contenus et des échanges.

Si l’on reprend un peu l’histoire d’internet, on peut identifier – jusqu’à aujourd’hui – 3 phases.

Au commencement était un réseau d’échange entre universitaires américains. Pour bien aller avec le terme Web 2.0, on pourrait dire que c’était un web en phase de développement, un Web beta. Puis le réseau s’est étendu et démocratisé. On parle de web 1.0 pour désigner cette période où le web était relativement statique, où l’on passait de page HTML en page HTML… Cette époque bénie des « pages persos Voilà » et des GIF animés.

Puis les technologies et les usages ont évolués (pour de multiples raisons) vers ce qui a été appelé le « Web 2.0 » et toutes ses applications d’User Generated Content et de réseaux sociaux. On se trouve donc aujourd’hui avec un nombre très important de blogs (plus ou moins actifs), des sites d’informations qui permettent de commenter leurs articles, et avec plus de profils sur des applications de réseau social qu’il est possible d’en gérer (Facebook, Twitter, Google , Viadeo, LinkedIn, Foursquare…).

J’ai lu quelques part dans un commentaire (et je ne retrouve plus où) l’expression « Brouillard social ». Impactant et plutôt bien représentatif de ce que nous sommes en train de construire. Le « web 2.0 » était facilement représenté par des nuages, ils sont en train de nous tomber sur la tête…

Que l’on cherche à retrouver les commentaires relatifs au contenu que l’on a publié, à un article que l’on vient de lire, ou simplement à suivre les conversations qui nous intéressent, la multitude des lieux rend cette tâche difficile. Chaque acteur – plus ou moins important – arrive avec une solution apportant chacune une approche plus ou moins différente, mais elles sont toutes relativement fermées.

On se trouve donc à devoir gérer autant d’identités qu’il existe de services de réseau social populaire. L’avenir d’internet en tant qu’outil assurant la continuité de nos relations sociales entre virtuel et physique passe par le déploiement d’un standard ouvert de gestion de l’identité numérique. La décentralisation de l’intégralité de mon identité numérique basé sur une adresse email (liste de contact, messagerie instantanée, informations personnelles…) – comme la décrit Ploum par exemple [en] – simplifierais beaucoup la vie des utilisateurs.

L’étape suivante est de parvenir à construire – sur le modèle de l’ambition de Diaspora – un réseau social alternatif et décentralisé qui ferait de ce peuple des internets, non plus des produits vendus aux publicitaires, mais bien des citoyens acteurs d’un monde en mouvement et seuls propriétaires de leur vie numérique. Ploum revient, dans son post sur Google + [fr], sur la sortie de celui-ci en s’inquiétant de l’hypercentralisation qui est le coeur du business-model Google.

Mais comme je viens de le dire précédemment, pour lui cette centralisation de la vie numérique dans le giron Google, s’accompagne d’une accélération de la dispersion des échanges. Bientôt on ne pourra certainement plus dire « tout le monde est sur Facebook » pour justifier le fait de ne pas se préoccuper du développement d’un standard ouvert de gestion de son identité numérique et de ses relations sociales.

Il y a plusieurs solutions envisageables pour tendre vers cet idéal reste à savoir laquelle de ces solutions, pour l’instant confidentielles et confinées aux cercles des geeks initiés à ses problématiques, pourra parvenir à atteindre le grand public.

C’est toujours le problème de ces solutions géniales, elles ont du mal à se rendre suffisamment accessible pour connaitre le succès qu’elles méritent ;)

Pêle-mêle autour du web mobile

Après le web 2.0 et ses nuages claqués dans toute bonne charte graphique qui se respectait, le web se dirige doucement vers une nouvelle (r)évolution.

Un peu d’histoire…

En février 2010 (autant dire il y a déjà une éternité) Eric Schmidt (l’ancien CEO de Google) s’exprimait en ces terme au Mobile World Congress : « Mobile first in everything. Mobile first in terms of applications. Most first in terms of the way people use things. »

Le concept de « Mobile First » me semble aujourd’hui une approche primordiale pour la réalisation de services ou de sites web qui répondront aux besoins utilisateurs et qui auront donc toutes les chances de connaitre le succès.

J’affirme cela pour deux raisons, d’abord le développement des usages mobiles, puis la modification bénéfiques des approches de conception, de design et de développement.

Sans stratégie mobile point de salut

Les usages et les usagers du web mobile sont en pleine expansion. Il est acquis pour tous que la présence sur mobile est – ou deviendra à très court terme – indispensable comme l’est celle sur le web aujourd’hui.

Les études récentes donnent un peu le tournis (on compte par exemple 14 millions de « mobinautes » en France (taux de pénétration 27%) et près de 2/3 d’entre eux se connectent quotidiennement). Et les chiffres des études prospectives sont encore plus hallucinants. On est face à de nouveaux usages généralisés, à un mode de consommation qui est totalement différents de ce que l’on connait pour le web « fixe » (attentes, besoins, objectifs, lieux, contextes) et à des devices hétérogènes.

Aujourd’hui il parait donc nécessaire de développer une présence multiplateforme cohérentes. Pour cela plusieurs combinaisons sont possibles :

  • Site web application iPhone/iPad => On vient instantanément d’oublier environ les 25% des possesseurs de smartphone qui sont sous Android ;)
  • Site web application iPhone/iPad/Android => Ça peut couter cher à force ;)
  • Site web version mobile => Je préfère mais on peut encore faire mieux…

HTML5 et CSS3 pour un meilleur web

Les applications natives ça roxent mais ça coute un peu d’argent quand même et il faut communiquer autour de ce nouveau support. Développer une nouvelle version du site c’est pas mal, mais là encore ça fait du développement en plus. Le web n’est plus réservé aux ordinateurs couteux et encombrants qui font des bruits bizarres en se connectant (souvenez-vous).

Aujourd’hui le web c’est sur un PC, sur un smartphone, sur une tablette, sur une télé… voire sur un frigo, dans ma main ou via un lapin qui parle…

Les utilisateurs ne doivent pas avoir à se demander si tel ou tel site/service web est accessible avec son iPhone (ou s’il doit chercher une application), si les vidéos de recettes du site lesrecettesquidechirent.fr s’afficheront bien sur son iPad ou s’il pourra lire les derniers articles du Monde sur sa télé pendant la pub.

Le développement de tous ces appareils connectés est absolument passionnant, notamment pour toutes les opportunités qu’il offre à l’internet des objets, mais il doit également être pris en compte dans la conception des sites/services web aujourd’hui.

Les technologies dans les mains des développeurs et intégrateurs web permettent dès maintenant de construire des applications web totalement « cross-device ». Nous avons tout à disposition pour faire du web un environnement unique et utilisable depuis n’importe quel appareil. Je ne vais pas rentrer dans les explications techniques – je serais bien incapable de faire ça de façon exhaustive et satisfaisante – mais je vous conseille de jeter un œil à cette gallerie de sites web qui s’adaptent « en live » à la fenêtre de visualisation (redimensionnez votre navigateur vous verrez :)) HTML5 permet également le stockage des données en local pour une consultation offline, la géolocalisation via le navigateur et une multitude d’autres choses qui font de ce « vieux » langage de balisage le truc hype du moment et probablement un des acteurs important d’une nouvelle révolution du web.

Mobile-first

Le fait de pouvoir être présent sur tous les terminaux imaginables en un seul développement n’est pas le seul avantage de ce développement d’un « web unique ».

Concevoir son application web d’abord pour le mobile permet de se concentrer dès le début sur ce qui est important. On s’oblige à identifier les fonctionnalités/informations clés, les fonctionnalités/informations nécessaires et les fonctionnalités/informations secondaires. L’application se concentre alors sur l’atteinte de l’objectif de l’utilisateur et sur la réponse à un besoin puisque l’espace disponible à l’écran sur ce type de device ne laisse pas de place à la décoration et à la surcharge. On simplifie alors la phase de conception web « classique » puisqu’il suffit de réintégrer les fonctionnalités secondaires qui ont été laissées de coté et d’adapter la mise en page. On a ainsi beaucoup plus de chance de concevoir une application web efficace.

Conclusion

Les applications natives ont encore de beaux jours devant elles et elles apportent dans certains cas un très beau plus en terme d’expérience utilisateur.

Je suis persuadé cependant que de nombreuses applications pourraient être remplacées par une application web adaptée.

Le marché et les utilisateurs vont tranquillement arriver à maturité et lorsque le réflexe site « cross-device » sera pris du début à la fin de la chaine (éditeurs, agences, utilisateurs) ont fera un pas important vers un seul et beau web – ouvert et accessible :)

Pour votre prochaine application mobile demandez-vous quand même si un application web ne ferait pas la même chose (en mieux) ;)

Box Of Cookies, un site qu’il est bien pour y acheter

EDIT : Le site est aujourd’hui fermé

Faisons une incursion de quelques secondes dans le monde réel. Ne vous inquiétez pas ce n’est pas si désagréable que l’on veut bien vous le faire croire… Si vous avez des murs tristes et que vous avez quelques euros à bien dépenser vous devriez aller faire un tour chez Box Of Cookies.

BOC c’est un site de vente de bijoux de créateurs et d’affiches d’art « sérigraphiées », en séries limitées, numérotées et signées (ça fait beaucoup de « ées » tout ça).

Concrètement vous pouvez afficher sur vos murs, pour des tarifs plus que raisonnables, des œuvres d’art de qualité, imprimées avec grand soin sur du papier de qualité…

Rajoutez un cadre et ça donne ça :

Le lapin crétin nLe lapin crétin n’est pas fourni mais fortement recommandé pour asseoir le texte de l’affiche :)

On y trouve des création de Philippe Delforge et Jérôme Grimbert, les fondateurs des Produits de l’épicerie, ou de Charly Braye par exemple.

Vous y trouverez également des bijoux et de bien jolis tee-shirts ;) Ce qui ne gâche rien au contraire, le site est vraiment sympa et bien réalisé, tout comme le propriétaire du site… Qui est sympa également, bien que je ne doute pas qu’il soit bien réalisé.

[troll]Quand on vous dit qu’internet est un espace de diffusion pour les artistes ;)[/troll]

Création culturelle, divertissement, et si on faisait enfin la différence ?

Le piratage des oeuvres culturelles est effectivement un fléau qui, non seulement porte atteinte aux droits légitimes des créateurs et des industries culturelles d’aujourd’hui, mais aussi fait peser une grave menace sur la création de demain.

Je pourrais parler de chaque mot de cette phrase, mais je vais concentrer sur la fin de celle-ci qui porte en elle une chose qui m’insupporte dans ce débat : « les industries culturelles ».

Les mots sont lancés et ont un sens. On parle d’industrie lorsqu’il s’agit de « produire des biens en série » et ceci induit la « division du travail » et la notion « d’économie d’échelle » et de « production de masse ». L’art et la création artistique sont un ouvrage artisanal, ce n’est pas pour rien que les deux mots « art » et « artisan » ont la même étymologie.

Le divertissement lui est une industrie a part entière qui peut avoir sa place dans notre société. Mais par pitié n’utilisons pas la trop grande proximité des deux mondes (l’art et le divertissement) pour défendre les droits voisins des industriels du divertissement. En appeller à la création de demain pour justifier la tentative de sauvetage d’une industrie qui ne cherche qu’a sauver son petit pré carré ne nous permettra jamais de trouver une solution viable pour que les artisans de la création puissent profiter de l’énorme opportunité que leur offre le développement des usages numériques.

Actons une bonne fois pour toute que l’industrie du divertissement a ses problèmes et que c’est son rôle de se réinventer. Ensuite la société civile et les gouvernements pourront travailler ensemble à la diffusion juste du patrimoine de l’humanité auquel participe les créateurs.

Je ne suis pas convaincu qu’on se souviennent éternellement des créations de Justin Bieber ou de Maxime Legrand qui Splouche pendant que je Primf (« splouche » aurait peut-être un rapport avec la première définition d’UrbanDictionnary ?!).

Le divertissement est un élément important de notre société et il n’y a aucun jugement de valeur ici, mais il est vital pour notre société de savoir reconnaitre un produit d’une oeuvre. Personne ne considère les tableaux produits en Chine et acheté à 5€ chez Ikea comme l’équivalent d’une toile peinte par un artiste, il faut faire la même chose avec la musique. L’art doit avoir une place à part dans notre société et dans les réflexions des gouvernements, il n’y a aucune raison pour que l’industrie du divertissement en bénéficie.

Bon si tu veux, mais on fait quoi pour les artisans ?

Je n’ai pas la réponse et j’en suis bien désolé mais finalement je crois que personne ne l’a complètement. Notamment parce que le débat est encore de savoir quelle est la solution pour les artistes et l’industrie du divertissement. Si l’on sépare les deux problèmes et que l’on se concentre sur les premiers, des idées germent, des usages naissent… Une solution se trouve peut-être dans le projet de Paul Da Silva… Il y a certainement plein d’autres personnes avec des idées et les capacités de les développer, il manque juste un peu de volonté politique et sociétale pour inventer le monde de demain.

On entend souvent que les majors servent à faire connaitre, à prendre des risques parce qu’un disque ça coute cher… Oui, mais non. Cette réflexion est celle de l’ancienne économie et de l’ancien monde. Internet change le monde et ceux qui ne s’adaptent pas mourront c’est inéluctable.

Allez chiche on se met d’accord pour vraiment aider les artistes et on s’y met tous ?!

L’internaute élément indispensable de la conception web

Etre persuadé qu’on ne peut pas faire du bon web sans faire appel aux internautes.

Amélie Boucher

Dans cette (excellente) conférence d’Amélie Boucher à Paris Web 2011, il y plusieurs phrases, images ou vidéos qui m’ont interpellées mais celle-ci ressort du lot par sa simplicité. Si on est déjà convaincu c’est facile et on accepte cette phrase comme une évidence, mais dans le cas contraire… Je vais tenter de vous apporter quelques éléments pour qu’enfin vous vous disiez qu’en effet « on ne peut pas faire du bon web sans les internautes ».

L’ergonomie

Derrière ce mot un peu flou se cache une discipline qui fait partie intégrante de notre quotidien. À chaque fois que l’on utilise un objet on juge de son ergonomie (chaise, stylo, tournevis, porte-manteau…). Tous les objets de notre quotidien font l’objet d’une recherche ergonomique – en tant qu’elle est la caractéristique d’un produit dont l’usage est confortable et efficace.

Si l’on conçoit aisément que c’est bien l’objet qui doit s’adapter à la façon dont l’homme va l’utiliser, lorsque l’on passe de l’objet au site web c’est tout de suite moins évident.

Pourquoi l’ergonomie web ?

Nous imaginons mal les concepteurs de vélos de courses se passer des retours des cyclistes lors de la conception, Decathlon effectue des tests grandeurs nature d’utilisation avant de valider un prototype, le web doit aujourd’hui, puisqu’il est devenu partie intégrante du quotidien de tous (ou presque), répondre aux mêmes contraintes et satisfaire toujours plus ses utilisateurs.

Un site web est un objet complexe à appréhender pour un utilisateur. Il y vient généralement pour une information ou un objectif précis et on lui demande de découvrir et comprendre un environnement nouveau le plus rapidement possible si vous ne voulez pas qu’il parte avant même d’avoir essayé de comprendre le site. Sur internet passer d’un site web à un autre est très facile et face à la profusion de concurrence il est primordial d’éliminer le maximum de facteurs d’insatisfactions et donc de portes de sorties.

L’ergonomie web s’attache à supprimer tout besoin d’apprentissage ou de réflexion lors de la visite d’un site afin de rendre celle-ci la plus efficiente et mémorable possible. Une chose est frappante dans les exemples de retours utilisateurs d’Amélie Boucher, c’est cette façon qu’ont les gens à se mettre en cause eux, plutôt que le site web. « Je suis nul, je ne comprend rien », à aucun moment l’utilisateur ne rejette la faute sur le site et sa conception. Personne n’a envie de rabaisser ses clients ou ses prospects en les faisant se sentir nuls ? Vous vous doutez bien qu’un site qui me fait me sentir incompétent ne fait pas parti de mes sites favoris, oubliez tout de suite toute ambition de transformation et/ou de fidélisation

La création d’un site web ne doit pas (uniquement) répondre à des critères visuels ou techniques mais bien à des critères d’utilisabilité, de confort et d’efficience. On peut aussi se dire que c’est le métier des concepteurs web (qu’ils soient concepteurs, webdesigners, développeurs, intégrateurs) de prendre en compte tout cela pour faire « du bon web ». Oui mais…  

Pourquoi l’utilisateur est le seul à nous permettre d’atteindre ces objectifs ?

Si c’est bien notre rôle de professionnels d’intégrer ces contraintes pour faire des sites web efficaces et répondant à des objectifs à la fois business et utilisateurs, nous restons des hommes et notre première qualité doit être de douter.

Chaque projet de site web est différent, chaque projet a ses propres objectifs business mais surtout chaque site à ses propres cibles. Si l’on rentre ensuite dans le détails, chaque profil d’utilisateur (= chaque cible) a sa propre histoire, ses propres habitudes sur internet et ses propres objectifs. Ajoutons à cela les différents contextes de visite (seul ou à plusieurs, fatigué ou non, pressé ou non) ainsi que les différents terminaux disponibles aujourd’hui (ordinateur, mobile, tv connectée…). Tout cela doit être pris en compte lors de la conception d’un site. Pour cela on doit faire appel à des notions cognitives et comportementales, à une connaissance avancée des us et usages des cibles. Il y a évidemment des règles et des « lois » à respecter mais cela ne suffit pas. L’ergonomie web ce n’est pas que du bon sens.

Que celui qui est capable de comprendre et spécifier en détails les comportements d’un internaute Y, représentatif d’une cible, de façon certaine, universelle et intemporelle se dénonce ! Que celui qui est capable d’avoir assez de recul sur un élément de son quotidien (internet) pour se mettre à la place de cette fameuse Madame Michu (en savoir plus sur notre chère Madame Michu[fr]) qui décidément n’y comprend rien se dénonce !

Mais qu’est ce que c’est ne rien comprendre à l’informatique ? Est-ce que l’on se sais encore qu’un jour on ne savait pas ? (idée inspirée par un article de Tanéléo http://www.taneleo.org/node/15)

Tout cela pour dire que croire que l’on peut se mettre à la place de l’utilisateur finale est une hérésie qui mène inéluctablement à des erreurs de conceptions qui peuvent être dramatique d’un point de vue business. Intégrer les utilisateurs finaux dans un processus de conception web permet de détecter ces erreurs pour le bien de tous. Le rôle des concepteurs est alors d’analyser les comportements, de déterminer les points de blocage et de trouver les solutions adaptées… puis de recommencer.

Les utilisateurs sont les seuls personnes importantes dans la conception d’un site web. Nous ne devons pas faire les choix de conceptions en fonctions des envies des chefs de projet, des développeurs ou des graphistes. Les choix doivent être guidés par les besoins réels des internautes.

Si l’utilisateur est au centre de toutes les attentions et le moteur de tous les choix, si cela, et seulement si cela, on fera du « bon web », efficace, agréable et rentable au regard des objectifs business.

Conclusion

Ceci est une vision purement théorique de l’approche de conception web qui se heurte toujours à des contraintes de tous niveaux (délais, budgets, marketing…). Il est néanmoins important de comprendre les enjeux de l’ergonomie web pour être capable d’avancer petit à petit vers une conception qualitative en utilisant de façon raisonnée et adaptée les différents outils mis à notre disposition par les méthodes de conceptions centrées utilisateurs.  

Bonus

En bonus la vidéo de la conférence, avec plein de comportements et de phrases d’internautes pour le moins étonnants. Si vous avez une petite heure et que cet article vous a un minimum interpellé sur l’importance des internautes dans la conception web n’hésitez pas.  

Internautes sous surveillance : retours de la réalité…

Pour aller plus loin

Les connaisseurs remarqueront que j’ai « piqué » beaucoup d’éléments de langage et de concept dans les discours d’Amélie Boucher. Ce n’est pas par hasard puisqu’elle est une de celles qui pensent le mieux l’ergonomie en français et fait un travail d’évangélisation de qualité. N’hésitez pas à creuser par vous mêmes grâce à ces quelques liens :

Ergolab.net(fr) : la « bible » française de l’ergonomie par Amélie Boucher (forcément)

Gargarismes Ergonomiques

Ergophile : par la Directrice artistique de Deezer.fr

52 Weeks of UX : comme son nom l’indique, 52 articles intéressant et « rafraîchissant » sur l’expérience utilisateur

Little Big Details : Tous ces petits détails invisibles qui font toute une IHM

Activeside : Site de Matthieu Mingasson (ma nouvelle idôle ;)) UX Designer et architecte de l’information