Le bouton qu’on ne voit pas — dix propositions

Le bouton cesse d'etre un objet blanc pose sur un en-tete blanc : le carre de 46 px se remplit du turquoise fonce que portait deja l'etoile, et l'etoile passe en blanc — meme taille, meme place, meme rayon, zero pixel pris au champ.

Quand : La couleur, elle, est permanente : c'est elle qui rend le bouton visible, et elle ne s'anime jamais en regime normal. Le mouvement ne sert qu'a la presentation, UNE SEULE FOIS PAR SESSION (drapeau sessionStorage) : sur la premiere page vue, le bouton s'affiche

Ce que le champ perd : ZERO pixel, a 390 comme a 320. C'est le seul avantage decisif de cet angle : la couleur ne prend pas de place. Le bouton conserve exactement son empreinte actuelle de 46x46 — pas de libelle, pas de padding en plus, donc

Jugement : Le seul qui regle vraiment le probleme sans rien coûter : 46 px de #037a8a plein, contraste verifie a 5,05:1 contre l'en-tete blanc, zero pixel pris au champ a 390 comme a 320, aucun mot a traduire, aucune boucle — le seul prix a assumer est qu'un bloc plein colle a droite du champ sera lu par une partie des gens comme le bouton « valider ».

Le point faible, par son auteur : Trois choses, honnetement. 1) LA SOBRIETE PERDUE : aujourd'hui le turquoise est un fil de 1,5 px ; il devient une masse de 46x46, l'objet le plus sature de chaque page du site, present sur toutes les pages. L'en-tete blanc-sur-blanc etait une declaration de retenue de galerie ; on en echange une partie contre le fait d'etre vu. C'est le p

Le champ et le bouton cessent d'etre deux objets poses cote a cote : ils deviennent un seul boitier a bord turquoise, coupe en deux par un filet, dont le volet de droite est rempli de turquoise plein — on ne peut plus regarder le champ sans voir le volet.

Quand : L'etat de repos est deja visible en permanence : le volet est turquoise plein, sans aucune animation. L'animation ne sert qu'a raconter la bascule une fois : au chargement, le boitier apparait entierement blanc (exactement l'etat actuel du site), puis apres 0,

Ce que le champ perd : A 390 px (marges 16 px, zone utile 358 px) : aujourd'hui champ 303 + ecart 9 + bouton 46 = 358. Nouveau : boitier 358, volet 60, champ 298. Le champ perd 5 px, soit 1,7 %. Le volet grossit de 14 px mais l'ecart de 9 px e

Jugement : Aussi visible que l'aplat mais il paie trois fois plus cher : 7 px pris au champ sur petit telephone, une refonte du champ lui-meme, et un #04a7bd qui ne donne que 2,89:1 sur blanc — l'etoile blanche dessus passe sous le seuil de 3:1 ; surtout, la forme segmentee transforme le doute « c'est le bouton valider ? » en quasi-certitude.

Le point faible, par son auteur : Le risque principal est semantique, et il est la contrepartie exacte du gain : colle au champ, a la place ou tous les sites du monde mettent la loupe, un volet plein va etre lu par une partie des visiteurs comme le bouton « valider ma recherche ». Ils taperont « fleurs » puis appuieront dessus, et tomberont sur la fenetre a deux portes sa

Un anneau turquoise s'ecarte du bouton comme une onde a la surface de l'eau, trois fois, sans rien deplacer ni elargir. Et la troisieme onde, en s'eteignant, depose sur le bouton un lisere turquoise et un fond #e9feff qui, eux, restent : le mouvement se tait, la visibilite reste.

Quand : L'onde part 700 ms apres l'affichage de l'en-tete, UNE SEULE FOIS PAR VISITE (drapeau sessionStorage : elle ne se rejoue sur aucune autre page du site, meme apres 40 pages vues). Trois ondes de 1,5 s (0,9 s de course, puis 0,6 s de silence) = 4,5 s, puis plus

Ce que le champ perd : ZERO pixel, dans les deux cas. Le bouton reste 46 x 46 px : sur 390 px le champ garde ses 303 px (390 - 15 - 15 - 11 - 46 = 303), sur 320 px il garde 233 px. L'onde est un calque absolu qui deborde de 10,1 px au plus for

Jugement : Un anneau qui s'ecarte trois fois est le vocabulaire de la notification, pas celui d'une galerie a 240 EUR la piece, et la trace censee tout sauver est un fond #e9feff quasi blanc : passe 4,5 s, le bouton est redevenu exactement ce qu'il etait, et il ne se rejouera plus de la visite.

Le point faible, par son auteur : Le point faible est le timing : l'onde ne dure que 4,5 s et se joue en haut de l'ecran. Un visiteur qui arrive sur une page produit et qui defile tout de suite ne la verra jamais, et elle ne se rejouera plus de la visite. C'est exactement pour cela que j'ai ajoute la trace permanente : sans elle, l'effet ne servirait que les 4,5 premieres

Le champ, deja regarde et deja cerne de turquoise, detache un court trait de son propre lisere et le fait glisser jusqu'au bouton ; a l'arrivee le bouton prend le turquoise du champ (cercle #04a7bd, fond #e9feff, un seul quart de tour de l'etoile) et le garde tant que la personne hesite.

Quand : Trois conditions reunies : la personne a touche le champ (focus), le champ est vide, et 3 secondes passent sans qu'elle tape. Le geste dure 1,1 s puis S'ARRETE net : plus rien ne bouge, le bouton reste simplement turquoise, en etat fixe. Il redevient blanc en

Ce que le champ perd : Zero pixel, sur les deux largeurs. Le champ garde exactement 303 px sur un ecran de 390 et 235 px sur un ecran de 320, avant, pendant et apres l'effet. Rien ne pousse la mise en page : le trait est en position:absolute d

Jugement : Le plus elegant du lot et le hors-sujet le plus poli : il ne parle qu'a ceux qui ont deja touche le champ puis attendu 3 s sans taper, c'est-a-dire precisement ceux qui n'ont pas le probleme — pour tous les autres, et pour toutes les pages ou personne ne touche la barre, le bouton reste blanc sur blanc.

Le point faible, par son auteur : Le point faible est structurel, pas graphique : cet effet ne parle qu'aux gens qui touchent deja le champ de recherche. Celui qui ne touche jamais la barre ne verra jamais le bouton s'allumer - le probleme du proprietaire n'est donc resolu que pour une partie du trafic, pas pour tout le monde. S'y ajoute que beaucoup tapent leur mot dans

Un petit signet turquoise, exactement aussi large que l'étoile, est glissé derrière la pastille et dépasse de 12 px au-dessus d'elle — comme le cartel qu'on accroche au-dessus d'une œuvre : le bouton ne grossit pas d'un pixel, mais il porte enfin une marque de couleur pleine que l'œil attrape de loin.

Quand : Au premier chargement de la session seulement : 0,7 s après l'ouverture de la page, le signet sort de derrière la pastille en 0,52 s, puis s'arrête net et ne bouge plus jamais. La classe d'animation se retire d'elle-même sur `animationend`, et un drapeau `sess

Ce que le champ perd : Zéro pixel. Le signet fait 24 px de large et il est centré à l'intérieur des 46 px du bouton (il occupe x = 11 à 35 dans le bouton), donc il ne déborde ni à gauche ni à droite. Le champ garde 303 px sur un écran de 390,

Le point faible, par son auteur : Trois points francs. 1) La place au-dessus : il faut 12 px de vide au-dessus de la ligne de recherche et aucun overflow:hidden sur le conteneur de la ligne. Si l'en-tete est serre, l'etiquette est rognee ou vient toucher le logo — c'est le seul vrai obstacle technique, a verifier sur la page en service avant de valider (a defaut, la meme

Tant que le champ est vide, le bouton n'est plus une pastille blanche invisible mais un bloc turquoise plein de 116 px qui porte son nom ; à la première lettre tapée, il se rétracte derrière son étoile et rend au champ toute sa largeur.

Quand : Aucune animation spontanée, jamais : ce n'est pas un effet qui se joue, c'est un état. Le bouton est large tant que le champ est vide, donc à l'ouverture de n'importe quelle page. Le seul mouvement (340 ms, une fois) est déclenché par l'utilisateur lui-même au

Ce que le champ perd : À 390 px : 390 moins 32 de marges intérieures = 358 utiles, moins 9 de gouttière, moins 116 de bouton, le champ mesure 233 px au lieu de 303. Perte 70 px, soit 23 %. Dès la première lettre le bouton retombe à 46 px et le

Le point faible, par son auteur : Trois points faibles, dans l'ordre de gravité. 1) Le bouton disparaît au pire moment. Celui qui tape « tableau salon beige » et n'obtient rien est exactement celui à qui la recherche par photo servirait le plus — or à cet instant le bouton est redevenu la pastille blanche invisible d'aujourd'hui. La direction règle la découverte, pas le r

Le contour du bouton se trace en turquoise, d'un seul trait continu, comme on accroche un cadre au mur — puis le trait reste : le bouton n'est plus une pastille blanche posee sur du blanc, il porte desormais un filet turquoise permanent, frere du lisere du champ.

Quand : Au chargement de la page. 300 ms d'attente (le temps que l'oeil se pose sur l'en-tete), le trait se dessine en 620 ms, puis il se pose en 300 ms (il passe de 1,7 px plein #04a7bd a 1,2 px a 50 %). Total 920 ms, et C'EST FINI : plus rien ne bouge ensuite, jamai

Ce que le champ perd : ZERO pixel, a 390 px comme a 320 px. Le trait est dessine A L'INTERIEUR du carre de 46x46 (inset de 0,75 px, donc trace sur un rectangle de 44,5x44,5 a rayon 10,25). Le bouton garde exactement 46 px de large : le champ g

Jugement : Le plus juste de ton et le moins efficace : ce qui reste apres la demonstration est un filet de 1,2 px a 50 %, pose a 9 px d'un champ qui porte deja un lisere de 1,5 px — le bouton devient le jumeau pale du champ au lieu de s'en detacher ; a ne garder que si l'aplat est juge trop fort.

Le point faible, par son auteur : Le risque honnete est en deux temps. 1) L'ANIMATION PEUT ETRE MANQUEE : elle se joue 300 ms apres le chargement, au moment ou l'utilisateur regarde encore le haut de la page ou le premier tableau — s'il arrive sur l'en-tete a la seconde 3, il ne verra rien bouger. Il ne faut donc pas compter sur le trace pour resoudre le probleme : ce qui

L'etoile pivote d'un quart de tour en 620 ms pendant que la pastille se teinte une seconde de turquoise : comme l'etoile a quatre branches, 90 degres la ramenent exactement sur elle-meme, le geste s'acheve sans rien laisser derriere lui.

Quand : Premiere occurrence 2,5 s apres le chargement (le temps que la page se pose), puis a 15 s et a 30 s. Trois occurrences AU TOTAL pour la visite, pas trois par page : le compteur vit dans sessionStorage, donc l'en-tete ne rejoue pas le geste a chaque changement

Ce que le champ perd : Zero pixel, aux deux tailles. Le bouton reste un carre de 46x46 (zone tactile 46x46, au-dessus des 44 requis) et ne s'elargit a aucun moment, y compris pendant le geste : la teinte et l'anneau turquoise sont un backgroun

Le point faible, par son auteur : Le geste ne repare que 3,75 secondes sur toute la visite. Le reste du temps, le bouton est exactement aussi blanc-sur-blanc qu'aujourd'hui : si le visiteur regarde ailleurs (il scrolle la grille de tableaux, il lit un prix, il a le pouce devant l'ecran) au moment ou le geste part, il peut rater les trois, et on est revenu au point de depa

Le turquoise — seul accent de la marque — quitte le champ de recherche et passe entièrement sur le bouton : la pastille blanche devient un bloc plein #037a8a de 76 px avec l'étoile en blanc, pendant que le champ retombe sur le gris #f4f6f7 et une simple ligne d'un pixel ; sur 16 264 références où taper un mot mène rarement quelque part, on donne l'accent au chemin qui marche et on laisse se taire celui qui marche mal.

Quand : Deux temps, dont un seul bouge. (1) L'INVERSION EST PERMANENTE ET IMMOBILE : sur toutes les pages, à chaque chargement, le bouton est turquoise plein et le champ est gris. Aucune animation, donc rien qui puisse lasser sur un en-tête vu partout. C'est cette par

Ce que le champ perd : Le bouton passe de 46 à 76 px, soit +30 px pris au champ, exactement les mêmes 30 px aux deux largeurs (l'espacement et les marges ne bougent pas). À 390 px d'écran : le champ passe de 303 à 273 px, soit -30 px (-9,9 %).

Le point faible, par son auteur : Le pari est réel et il coupe dans les deux sens. Ce qu'on gagne : le bouton devient l'objet le plus contrasté de l'en-tête, il ne peut plus disparaître, et le test utilisateur qui a échoué ne peut plus échouer pour la même raison. Ce qu'on risque : (1) Un bloc turquoise plein à droite d'un champ ressemble énormément à un BOUTON « OK / Env

Le bouton cesse d'etre une pastille peinte sur l'en-tete : il devient une carte blanche epaisse, avec une tranche grise visible de 2,5 px sous sa face, une ombre de contact serree et une ombre d'ambiance longue — un objet POSE sur le blanc, pas dessine dessus ; et une seule fois, il se decolle de 4 px comme si une main le soulevait de la table.

Quand : Le relief est PERMANENT : tranche + double ombre, aucune animation, c'est lui qui fait 80 % du travail. Le soulevement se joue 700 ms apres l'arrivee sur le site, deux fois espacees de 3,2 s (2 x 1,15 s de mouvement, le reste immobile), puis PLUS JAMAIS : un d

Ce que le champ perd : ZERO pixel. Le bouton reste exactement 46 x 46 px, toute la visibilite est gagnee dans l'epaisseur et pas dans la largeur. Mesure faite dans le navigateur sur la maquette : ecran 390 -> champ 303 px, bouton 46 px, gap 9

Le point faible, par son auteur : Le pari repose sur 2,5 px de gris. Sur un telephone en plein soleil, luminosite basse ou ecran vu de biais, un filet #c6d1d5 et des ombres a 20-30 % d'opacite peuvent s'aplatir presque autant que l'ombre actuelle : le gain est reel mais il est de l'ordre de « on le voit maintenant » et pas de « on ne voit que lui », alors que le lisere tu