Si Satan était un développeur web ...

C'est où qu'on envoie son CV ?

Image d'entête

par skywodd | | Licence (voir pied de page)

Catégories : Blog | Mots clefs : WTF Web

Cet article a été modifié pour la dernière fois le


Que se passerait-il si Satan, l'incarnation même du mal, dirigeait une entreprise d'informatique ? À quoi pourrait ressembler un bête formulaire de contact sur le site de cette entreprise diabolique ? Voici quelques possibilités de mon cru.

Sommaire

Bonjour à toutes et à tous !

J'étais tranquillement en train de travailler sur le code du site, préparer un article de Noël, glander sur internet. Quand soudain, je tombe sur cet album d'images : http://imgur.com/gallery/qA4Bu.

Mon cerveau est instantanément passé en mode pilotage automatique. Toute forme de conscience m'a quitté et le démon en moi s’est soudain réveillé avec une seule et unique volonté : concevoir le pire des formulaires de contact. Un formulaire de contact si diabolique, que Satan en personne serait impressionné.

J'ai terminé ma soirée (matinée ?) à 3 heures du matin pour arriver à mes fins, mais diable, ça valait le coup ! Mouuuuuuaaaaaaaaaaaakkkrff **tousse** **tousse**. Pardon.

N.B. Vous pensiez que j'allais faire un article "joyeux Noël et bonne année" avec une illustration de père Noël, comme tout le monde sur le web ? C'est bien mal me connaitre.

Les règles du jeu

Evil racoon, version française

Excellent …

Le formulaire doit permettre la saisie d'un numéro de téléphone, histoire rester dans l'idée de l'album d'origine. Ni plus ni moins, juste un champ pour saisir un numéro de téléphone.

PS Pour simplifier les choses (cet article n'est rien de plus qu'une blague de développeur), on part du principe qu'un numéro de téléphone est composé d'un zéro, suivi d'un chiffre de 1 à 9 puis de huit chiffres quelconques.

Le formulaire doit être fonctionnel. Il doit être possible de saisir le numéro de téléphone et de valider le formulaire par la suite. Cela doit juste être particulièrement énervant, frustrant, bref, diabolique.

N.B. Tous les formulaires présentés ci-dessous sont disponibles sur le GitHub du TamiaLab pour les curieux.

PS Si vous arrivez à saisir votre numéro de téléphone via les formulaires ci-dessous, une surprise vous attend. Ne dites rien en commentaires par contre, laissez la surprise aux autres ;)

Le petit joueur

Satan UI - Normal

Commençons léger, avec un formulaire d'apparence tout à fait normal.

Cependant, celui-ci efface complètement la saisie de l'utilisateur en cas d'erreur et empêche l'utilisation de la touche entrée pour valider le formulaire. Mouaaa, wait, c'est nul …

Ce formulaire sera la base des dix formulaires suivants, qui eux, seront un pur concentré de diablerie ;)

Voir le formulaire

Le classique compteur

Satan UI - Compteur

Trois boutons et un chiffre : un bouton pour incrémenter le chiffre, un bouton pour le décrémenter et un bouton pour passer au chiffre suivant. Crise de nerf garanti.

Voir le formulaire

Le copier clavier

Satan UI - Copier coller

Pour composer le numéro de téléphone, il faut copier individuellement chaque chiffre. Sur mobile, ce formulaire fera un vrai massacre.

Voir le formulaire

Le clavier visuel

Satan UI - Clavier visuel

Pour composer le numéro de téléphone, il suffit d'utiliser le clavier visuel juste en dessous. C'est ce que propose le site de ma banque et sûrement aussi celui de la vôtre.

Où est le problème ? Aucun, par contre, vous ferez attention, les touches des chiffres s'échangent aléatoirement après chaque appui sur un bouton.

Voir le formulaire

Le mode T9

Satan UI - Mode T9

Souvenir souvenir. Le bon vieux mode T9 remis au gout du jour avec seulement des chiffres.

Très fun à programmer au passage, avec une petite machine à état fini et un timer en arrière-plan.

Voir le formulaire

L'afficheur 7-segments

Satan UI - Afficheur 7 segments

Je ne pouvais pas faire cet article et le publier sur Carnet du Maker sans y inclure un afficheur 7 segments dans le lot.

Très fun à programmer lui aussi, l'afficheur en lui même est basé sur un fichier vectoriel interactif. J'utiliserai cette technique dans le futur pour d'autres (vrais) projets.

Voir le formulaire

32 bits non signés

Satan UI - Binaire

Un numéro de téléphone rentre pile-poil dans un nombre non signé de 32 bits. Coïncidence ? Je ne pense pas.

Voir le formulaire

Décimal codé binaire

Satan UI - BCD

En bon informaticien et électronicien, je ne pouvais pas faire un formulaire en binaire sans faire par la suite une variante en décimal codé binaire.

Voir le formulaire

Pour les chanceux

Satan UI - Random

Si vous avez de la chance, vous aurez vite fait de remplir le formulaire. Sinon, bonne chance :D

Voir le formulaire

Pour les patients

Satan UI - Timer

Celui-là, j'avoue, j'ai dû le modifier après avoir fait mes tests. Je n'avais tout simplement pas la patience d'attendre que le chiffre soit à la bonne valeur pour passer au suivant.

Voir le formulaire

Recherche dichotomique

Satan UI - Dichotomie

Résultat de plusieurs années de recherche au sein du TamiaLab. J'ai l'immense honneur de vous présenter le formulaire de saisie de numéro de téléphone par recherche dichotomique. Il vous suffit de dire si le chiffre affiché est inférieur ou supérieur à votre numéro de téléphone et le formulaire trouvera par lui même la bonne valeur en un minimum de temps.

Ce n'est pas une blague, il s'agit vraiment d'une recherche dichomotique. Vous pouvez tester, l'algorithme est valide et fonctionne. Par contre, si vous faites la moindre erreur en cliquant sur le mauvais bouton, c'est foutu ]:)

Voir le formulaire

Conclusion

Ce tutoriel de conception d'interfaces utilisateur simples et ergonomiques est désormais terminé.

Si cet article vous a plu, n'hésitez pas à le commenter sur le forum, à le partager sur les réseaux sociaux et à soutenir le site si cela vous fait plaisir.

PS À votre tour collègues développeurs. Terminons cette année 2016 en beauté avec de futures "bonnes pratiques" pour 2017. **rire diabolique**