Décidément, tout le monde se met au ecommerce. Dès aujourd’hui, nos femmes pourront donc aller chez Nafnaf.com pour trouver robe à leur goût et nous ravir de leurs formes pour un été qui s’annonce chaud.
Entièrement créé et géré par the Otherstore, un nouveau venu pour la délégation ecommerce (lire l’article de Christophe Dournaux sur ce sujet), d’un point de vue esthétique et ergonomique, Nafnaf.com s’annonce comme une réussite, le point principal ayant retenu mon attention étant la liste produits.
Une mise en page « déchtrouctouré ! »
Pour une fois, et c’est assez rare pour le signaler, la mise en page ne répète pas le modèle archi-usagé de la présentation en colonne, mais adopte une (presque) mise en page de catalogue papier avec des produits mis en avant en plus grande taille au milieu de la liste. L’exploration de l’offre n’en est que plus agréable et moins monotone.
Rollovers malins et informations taille/couleur
Afin d’éviter les aller-retours inutiles sur la fiche produit, couleur et taille sont affichés sur les vignettes. De plus, pour mieux voir le modèle, un visuel à plat est compensé par un visuel « porté » qui apparait au rollover sur la vignette. Ok, ça coûte deux fois plus cher en shooting, mais le jeu en vaut certainement la chandelle quand il s’agit de séduire l’internaute.
Filtres cachés
La navigation à facettes ou par filtre est devenu un incontournable. Ici, pour ne pas gâcher de la place, celle-ci est rétractable et ne s’affiche qu’au besoin de l’utilisateur.
Et vous, auriez-vous vu encore d’autres choses qui vaillent la peine d’etre notées sur Nafnaf.com ?
[...] This post was mentioned on Twitter by Camille Jourdain and Laurent Balssa, Loïc Saulnier. Loïc Saulnier said: RT @laurentb: RT @camj59: Nafnaf.com : 3 bonnes idées à piquer http://bit.ly/bc2LDq RT @capitaine [...]
Très belle réalisation ce nafnaf.com : il y a une autre petite chose qui mérite d’être relevée : l’intégration et la gestion des favoris (coup de coeurs). Ils sont ajoutés sur une mini penderie juste sous le header. C’est très beau tout en restant très pratique.
Un petit bug cependant : sous chrome/osx impossible d’ajouter à la penderie depuis le catalogue produits…
Très très belle réussite, cette mise en page est vraiment séduisante, les rollovers intelligents, et j’ai aussi apprécié le tunnel de paiement extrêmement fluide. Je serais curieux de savoir si ce type de mise en page déstructuré pouvait fonctionner dynamiquement ou si elle à été monté à la main ? Je crois que certains vont s’en inspirer…
@Franck
Ce type de mise en page est possible (selon les solutions utilisées), mais ça implique, soit une valeur définie numériquement, soit le calcul de la taille du bloc sur la base de la dimension des images.
Mais dans ce cas précis, tu noteras que, que l’on passe par la navigation : robes, ou par une recherche sur « robes », on obtient la même présentation, mais fais le test suivant :
Regarde cette url : http://www.nafnaf.com/fr/chemises-tuniques.html
note la blouse bleue, la première de cette page, celle qui est un peu moche… lance une recherche sur « dentelle », tu vas la retrouver dans le résultat de recherche, mais présentée façon « colonnes ».
Donc certaines pages sont pensées pour être présentées dans des formats bien spécifiques, tout le reste en « standard ». C’est tout à fait réalisable sur Rentashop avec un peu de programmation mais sans plus, en revanche ça demande une réflexion et un peu de travail pour bien calculer les dimensions des images, définir quelles pages réagissent sur cette base, la bonne gestion du float doit faire le reste.
En tous cas c’est du beau boulot, ce site, chapeau, et effectivement, c’est susceptible d’être pompé par pas mal de monde
Merci François pour tes explications claires.
Je n’en ai pas parlé dans mon article : le tunnel de commande démarre de manière assez bizarre. Il serait intéressant de l’analyser plus en profondeur. En tout cas, il est plutot original et je m’y suis senti un peu perdu au démarrage.
Ah bon ? Moi je l’ai trouvé hyper simple et clair… en quoi as-tu été troublé ?
Tiens, je viens de me faire tirer les oreilles par l’intégration chez moi : je n’avais pas pris la peine de regarder le code source. Il ne s’agit pas de float, mais de positionnement en absolute ET de float, c’est donc un peu plus complexe à gérer, mais du coup hyper précis
Géniale cette déstructuration des cadres des produits !
En tout cas un beau site sous Magento
Cher Captain,
Merci beaucoup de ton article qui nous a fait plaisir à toute l’équipe (les compliments des supers héros sont trop rares de nos jours) !
Merci également de tous vos commentaires et du petit bug remonté !
A très bientôt pour d’autres cholis sites
PS : on en a déjà fait plein d’autres ‘cholis’ sites, n’hésitez pas à nous dire ceux qui vous plaisent…ou pas
Très jolie site en effet, beau travail !
En ce qui concerne le checkout, ça ressemble beaucoup à du http://www.onestepcheckout.com, très à la mode en ce moment sur Magento.
Remarque : il serait intéressant d’avoir une solution plus simple que d’utiliser « effacer la sélection » (sous la liste des filtres dépliés) pour annuler le « tout voir ».
Bref, ça reste du super boulot, je suis jaloux !
[...] d’habillement se montrent portés au rollover. Une bonne idée qu’on avait déjà vu chez Nafnaf. La présentation pliée offre une homogénéité visuelle qui permet un parcours du regard plus [...]
Pour le rollover permettant de voir la photo du vêtement porté, il y a aussi http://www.vitrines-parisiennes.com (mais c’est un peu plus lourd, il y a un petit temps de chargement)