Cette idée, lancée après une illustration faite par @jared_w_smith d’un carrousel volontairement mal implémenté, avait pour but d’illustrer de manière exagérée les mauvais cas d’utilisation de certains « procédés » à la mode dans le WebDesign. Je crois que ça vous a plu !
Origine
À la base j’étais parti sur l’idée d’une traduction de ShoulIUseACarousel, @walterstephanie s’étant proposée pour traduire les textes, j’ai rapidement fait un bon gros code sale fait en quelques minutes pour la démo du contre-exemple en Français.
En agence nous avons souvent besoin d’illustrer nos propos pour contre-argumenter sur « un besoin » du client, qui tient plus souvent de la mode que d’un réel besoin. Le diaporama, certainement en tête de liste, fait partie de ces modes.
Au lieu de me contenter de faire cette traduction de slideshow, j’ai finalement choisi de voir plus large. J’ai donc pris quelques heures pour coder les deux autres contre-exemples qui me venaient en tête.
Pourquoi ces contre-exemples ?
Je suis parti du postulat que je ne devais certainement pas être le seul à avoir besoin de contre-argumenter certaines idées de mes clients. Pas que je ne veuille pas leur faire plaisir, mais que bien souvent leurs envies risquent de les desservir, eux et leur projet qu’ils veulent abouti.
Pour que mes propos soient plus parlants, j’étais souvent à la recherche des contre-exemples présents sur de vrais sites web. Mais cette recherche prend rapidement beaucoup de temps dans des plannings parfois serrés.
Quand j’ai vu ce tweet qui m’a fait sourire, cela ma conforté dans mon idée que ces illustrations peuvent servir, et pas uniquement à moi.
je parle surtout et principalement de cette pop-in intrusive de $*$£%¨ù%£ http://t.co/Et4cjNROZG
— Bastien (@jeanpaultarte) 4 Mars 2014
Bref ! Ainsi illustrés, les contre-exemples sont à portée de main pour vous ou vos client.
De vives réactions
Twitter est un bon vecteur pour échanger, et avoir des retours plus ou moins vifs.
Lorsque j’ai tweeté l’info il y a trois jours, je ne pensais pas que l’initiative ravirait autant la communauté.
"Dois-je utiliser" Le site qui explique pourquoi il ne faut pas faire certaines choses niveau ergonomie http://t.co/PeJV3SroVl #webdesign
— Céline Rouquié (@CelineRouquie) 3 Mars 2014
J'aimerai bien voir + de sites comme ça, c'est cool, en français et on comprend DIRECT ce qu'on peut apprendre. http://t.co/r0ZdZANEKT
— Elsa Serra ★ (@ideospire) 3 Mars 2014
+1 RT @ecp_be: #ergonomie #UX Des contre-exemples illustrés. http://t.co/vvzcGTjoIO
J'adore !!! Merci @geoffrey_crofte !
— AxeNet (@axenetwit) 2 Mars 2014
Ah ben voilà qui est UTILE !! 🙂 http://t.co/vBqMNSoHr1 via @geoffrey_crofte
— catepeli (@catepeli) 3 Mars 2014
Cette idée est top !! Des contre-exemples ergonomiques illustrés http://t.co/kl0C3griCa #webdesign via @geoffrey_crofte
— Margaux Poncelin (@MgxPcl) 3 Mars 2014
Exemples de mauvaises pratiques ergonomiques très souvent utilisées. En plus c'est drôle !
http://t.co/TAxPX3Jmd0 via @geoffrey_crofte
— Hugo Macarez (@HugoMacarez) 3 Mars 2014
Puis-je dire combien j'aime http://t.co/y5ih085tUQ ! Une perle d'#ergo avec plein d'#accessibilite cc @geoffrey_crofte @victorbritopro
— Matthieu Faure (@mfaure) 3 Mars 2014
Faisons-le évoluer !
Vous êtes plus de 5 000 personnes à avoir visité la totalité du site DoisJeUtiliser.fr hier. Cet engouement va motiver l’arrivée des prochains sujets qui sont déjà prêts, il ne reste qu’à les mettre en forme.
Votre aide peut être précieuse pour apporter de nouvelles idées, comme l’ont fait spontanément certaines personnes par e-mail ou Twitter :
@geoffrey_crofte Je pense qu'il serait intéressant de rajouter un sujet concernant le "infinite scroll" sur http://t.co/A0BkQjA8ji !
— Charles PHILIP (@chrl_p) 1 Mars 2014
Alors surtout n’hésitez pas à me contacter via Twitter, les commentaires de ce blog ou sur geoffrey[arobase]doisjeutiliser[point]fr si une idée vous vient.
Voici les idées déjà proposées :
- un Infinite scroll – par @chrl_p
- un bouton reset sur un formulaire – par @diou
- un scroll vertical inversé – par @diou
- une commande au survol – par @diou et @michaelcrofte
- un mot de passe à pattern – par @diou
- un intitulé non explicite – par @diou
- un menu principal caché – par @ThieuSalles
Et tenez-vous informés des prochaines sorties de contre-exemples en vous inscrivant sur la newsletter de DoisJeUtiliser.fr (formulaire dans le pied de page).
À bientôt pour de nouvelles aventures !
Allez plus loin
D’autres ont parlé avant moi !
Partager la publication "DoisJeUtiliser.fr – Contre-exemples ergonomiques illustrés"
Tu peux ajouter : des partages lourdingues de réseau sociaux 😉
Carrément ! On me l’a suggéré avec comme contre-exemple : http://worldsmostshareablewebsite.greig.cc/
D’ailleurs ça m’amusait sur doisjeutiliser.fr, mais je crois que je vais retirer les miens. Je trouvais juste fun de voir les chiffres grossir aussi vite. 😉
Je viens d’utiliser masonry pour un site et je serai ravi d’avoir un retour critique sur son utilisation afin soit de me conforter dans son choix soit le remettre en question.
(J’ai vu qu’il etait prévu dans les prochains ajout 🙂 )
En tout cas, superbe idée dont je vais suivre les mises à jour.
Merci !!!
Bonjour Mathieu,
C’est vrai que son utilisation peut servir certains designs. Le contre exemple que je prépare met à mal les mises en page trop verbeuses.
Tu peux fournir le lien de ton site web ici ou par e-mail 😉
Merci à toi !
http://euskadit.fr/veille/controleur.php
C’est un site dans sa version 1.0 (je l’ai fais ce week end) où j’ajoute les liens de ma veille.
On peut pas vraiment dire qu’il y a un effort de design et il est pas vraiment lisible mais bon, faut bien commencer quelque part ^^
(une version 2.0 est prévu assez vite ! )
C’est un peu l’idée que j’avais quand je parlais de blocs de contenu trop verbeux.
Masonry ou tout autre outil permettant de mettre en place un contenu qui remplit l’espace va retirer toute forme de vide, vide qui est extrêmement important pour le rythme de lecture et les repères visuels.
Si dans tes blocs tu n’as aucun repère et que tout se ressemble, tu risques de ne pas accrocher l’oeil du lecteur qui va avoir tendance à se balader partout.
Rien qu’en créant des zones blanches, tu vas améliorer le confort de lecture : http://img15.hostingpics.net/pics/493499exemplemasonry.gif
Tu me suis ? :p
Oui je te suis très bien, j’avais déjà remarqué ce problème au fur et à mesure du remplissage ( c’est pour ça que j’ai dis qu’il n’était pas très lisible)
J’ai imaginer des options du genre :
notation pour mettre des blocs de taille différentes en fonction de l’interêt du lien
illustration du lien par une image ( ça manque de visuel sinon je trouve)
et je cherche encore ^^
Merci pour l’image, j’aime bien la typo du titre 🙂
En effet des blocs imagés peuvent casser un peu la linéarité de la structure.
Pour la fonte il s’agit de Wendy Lt Std d’Adobe : http://www.myfonts.com/fonts/adobe/wendy-lp/
🙂
J’aime beaucoup cette initiative. J’avais déjà bien aimé des pages comme shouldIUseACarroussel ou shouldIUseAButton. Une autre idée pour le site serait l’utilisation de texte ou visuels pour signifier qu’une action est en cours, comme un « loading » pour une page en train de charger. Pour les formulaires, on peut peut-être rajouter la sauvegarde des données pour éviter de les retaper en cas d’erreur.
Sinon, s’il est cohérent de parler d’application mobiles sur ce site, on peut ajouter l’utilisation ou non des éléments d’interface par défaut des OS (selon que l’application se veut immersive ou non), ou même l’intérêt ou non de cacher la status bar (rien de plus chiant que de ne plus avoir l’heure sur une appli qui n’a aucune raison de se foutre en plein écran).
Si vous avez besoin d’aide pour coder des exemples, je suis prêt à aider. Pouvoir soutenir ses propos d’exemples concret, ça n’a pas de prix.
D’ailleurs, je pense qu’il faudrait orienter le discours pour les clients, les éditeurs, les chefs, les décideurs en général, qui ne sont pas développeurs. Enfin, seulement si ces articles ont pour but d’être utilisé comme contre-exemple devant ces derniers, comme tu le stipule dans début d’article. En tant que tel, ils fonctionnent très bien pour la cible « développeur », mais difficilement pour la cible « client », notamment pour celui sur les fenêtres pop-up.
Dans tous les cas, ça peut être tout aussi intéressant d’écrire pour les deux cibles. Qu’en pensez-vous ?
Bonjour Romain,
J’en pense que tu as parfaitement raison. Il faut probablement vulgariser d’avantage les propos et adapter le vocabulaire.
J’ai pensé mettre un gabarit-type, voire le site web complet sur Github, faudrait juste que je nettoie un peu le code parce que c’est fait un peu rapidement :p
Merci à toi !
Avez-vous tenté doisjeutiliser sous I.E ??
Je vous laisse la surprise… (une des premières règles en ergonomie est la compatibilité)
Bonjour également.
Bien entendu j’ai testé le site sur IE (pas « ?? » parce que je ne connais pas cette version, mais au moins le 11 et 10). Pourquoi ?
Pardon (et bonjour aussi au passage ;-)), je ne voulais pas lancer une polémique. Je suis Ergonome et mon intervention n’avait pour but que de constater, nullement de juger. J’ai donc juste constaté, au boulot, que sous IE 8 (pas le choix) rien d’autre que le pied de page ne s’affichait, ce que j’ai trouvé totalement hallucinant (je n’aurais jamais imaginé ça), surtout pour un site prônant l’ergonomie.
Maintenant sous Firefox, je n’ai absolument aucun soucis, d’où ma participation à la fréquentation. 😉
S’il j’avais une critique à formuler, cela serait à l’encontre de IE, bien entendu, qui rend les choses plus difficile.
Par contre, j’ai hâte de voir ce qu’il y aura sous les rubriques « accordéon » et « digital ».
C’est prévu pour quand ?
Hello 🙂
La critique est ouverte, nous n’avancerions pas sans.
Effectivement IE8 est largement en dehors des navigateurs testés. Je ne le supporte pas même dans mes projets pro, à moins qu’on m’en fasse la demande explicite.
Le projet n’a d’ailleurs pas non plus vocation à passer sur smartphone, mais un petit effort est fait malgré tout pour la compatibilité, justement 🙂
Pour les prochaines publication, le problème est le manque de temps pour produire des contres-exemples qui soient un minimum parlants. Du coup je n’ai pas de date précise, c’est selon mes dispos et inspiration.
Merci pour ton intervention !
Bon appétit 🙂
J’ai testé sous Netscape 5 et ça ne marche pas du tout, c’est totalement inadmissible ! Ça ne passe même pas le validateur HTML 4 !
Ah zut ! Ce qui m’embête ce n’est pas de corriger, mais de trouver une vraie installation de ce dinosaure ! :p
Mais blague à part, d’après les statistiques de visites du site, tous les visiteurs devraient voir le site convenablement, parce que le site est compatible pour les visiteurs actuels.
Dans tous les cas, ce site et jeune et lancé en quelques heures, laissons-lui le temps de murir 🙂
Il devrait finir sur Github bientôt : les grandes gueules n’auront plus qu’à activer leurs grands bras 😉
Vivement qu’il soit sur Github et qu’on puisse tout justifier avec un : « parce que c’est écrit sur doisjeutiliser.fr ».
Vivement les nouveaux contre-exemple