La sticky bar all-in-one : tout le produit, sans quitter la page
2
NOUVEAUMieux qu’un kit solaire, Sunology PLAY est la station solaire originale. Prête à l’emploi, conçue et assemblée en France et déjà vendue à plus de 100 000 exemplaires, il vous suffit de la sortir du carton et de la brancher sur une simple prise pour fabriquer votre propre électricité.
Une véritable bête de course.
Aucune grille visible à l’avant, l’énergie captée des deux côtés : jusqu’à 624 W de puissance cumulée.
Cellules à contact arrière : jusqu’à 1 000 kWh de production en plus qu’un panneau TOPCon de même taille.
Deux boutons pour trouver l’angle idéal, toute l’année : jusqu’à 10 % d’énergie en plus par an.
La première station solaire qui vous ressemble.
PLAY est équipée de quatre enjoliveurs de coins, disponibles en trois coloris au choix. Un design personnalisable, pensé dans les moindres détails.
Pilotez le soleil. Au doigt et à l’œil.
Avec STREAM, l’application de référence, levez le voile sur vos flux énergétiques et votre véritable coût au kWh.
4,74,7
Faites défiler la page, puis ouvrez une entrée de la barre.
Contexte
Tout le trafic payant de Sunology arrive sur les pages produit. Sur PLAY, avant d'acheter, le visiteur a des questions : que vaut la station, comment la suivre au quotidien, comment l'installer, qu'en disent les clients. Les réponses existaient, mais éparpillées : en bas de page, dans le centre d'aide, sur Trustpilot. Chaque détour éloigne de l'achat.
La refonte de la page PLAY a été l'occasion de rassembler ces réponses dans la barre qui porte déjà l'achat : une sticky bar all-in-one, qui ouvre les ressources sur place au lieu d'envoyer ailleurs.
Rôle
J'ai conçu ce composant de bout en bout : l'architecture des entrées, les états de chaque bouton, les deux verres, le comportement de l'ordinateur au mobile et le mouvement. Le prototype ci-dessus est reconstitué pour ce portfolio à partir de mes maquettes, pour montrer ce qu'une maquette statique ne montre pas : comment la barre se fixe, s'ouvre et se referme.
Objectifs
L'achat à portée
Le nom, la note et « Acheter maintenant » restent visibles, où que l’on soit dans la page.
Répondre sur place
Application, notices, avis, FAQ : les questions d’avant achat trouvent leur réponse sans quitter la page.
Un seul composant
Le même composant, de l’écran large au téléphone, avec ses états et son mouvement.
Lisible partout
Une page qui alterne photos sombres et sections claires : la barre doit rester lisible au-dessus des deux.
Les décisions de design
Deux natures d'entrées
Toutes les entrées de la barre ne font pas la même chose, et c'est voulu. Caractéristiques ramène dans la page : le contenu produit y est déjà, le dupliquer dans un panneau aurait créé deux versions à tenir.
Application, Notices, Avis clients et FAQ ouvrent ce que la page ne montre pas, dans un panneau posé sous la barre. Un trait vertical sépare les deux familles, pour que la différence se voie avant le clic.
De la barre noire au verre
La première version était un bloc noir opaque : la barre et son panneau ne faisaient qu'un. Solide, mais lourd sur une page claire, et elle masquait tout ce qui passait dessous.
Le verre garde la page visible sous la barre, floutée. J'en ai décliné deux teintes : un verre fumé, qui s'accorde aux photos sombres du produit, et un verre clair, plus éditorial, avec des actions en jaune plein. Le panneau devient une carte de verre séparée, qui descend de la barre au-dessus de la page voilée.
Un mouvement qui relie
Tout se voit dans le prototype en tête de page.
- 01Une seule courbe pour tout le composant, et des ouvertures plus lentes que les fermetures : on accompagne l’arrivée, on ne fait pas attendre le départ.
- 02Le panneau descend de la barre qui l’a ouvert, au lieu d’apparaître au milieu de l’écran.
- 03Un seul liseré pour l’entrée active : il glisse d’une entrée à l’autre et suit la section lue quand on fait défiler le panneau.
- 04L’icône de l’entrée active se change en croix, le hamburger croise ses traits : le geste de fermeture est toujours au même endroit que celui d’ouverture.
- 05Les contenus arrivent en cascade, à 70 ms d’écart. Si le système demande moins d’animations, tout s’affiche d’un coup.
Sur mobile, un menu
Cinq entrées ne tiennent pas sur un téléphone, et une liste qui défile à l'horizontale cache la moitié des choix. La barre garde le nom, la note et l'achat ; les entrées passent derrière un hamburger qui déplie le menu dans la barre elle-même. Une ressource s'ouvre seule, avec un retour vers le menu : on lit une chose à la fois.
Les détails qui comptent
- Échap
- referme tout, et le focus revient sur l’entrée qui avait ouvert.
- Clic dehors
- sur la page voilée, referme aussi.
- Molette
- la page défile même quand le pointeur est sur la barre.
- ARIA
- chaque entrée annonce son état ouvert ou fermé et le panneau qu’elle contrôle.