Loïc BEL, le web au milieu des champs.
Article tagué Maison et Confort.com
Moteur de présentation 3D de produits en flash
18/06/10
Pour Maison et Confort.com en plus de gérer le design global j’ai pu expérimenter et développer des outils d’aide à la vente ou facilitant le choix de l’internaute.
de nombreux didacticiels , simulateur de couleurs et autres.
Parmi ceux-ci j’ai retrouvé mon « rotatif 3D » , je dis « mon » rotatif parce que j’en suis le concepteur et que j’en ai réalisé une bonne grosse part mais Sébastien qui nous a rejoint a vraiment apporté à son développement surtout pour les versions dynamiques, Sébastien est également un graphiste qui code tout comme moi, (ce qui est différent d’un développeur qui fait du graphisme) 
.
Je me dois de préciser que la notion de 3D est totalement biaisée car il ne s’agit aucunement de réelle 3D, ici point de modélisation, de mapping et autres amusements
L’effet de 3D perçu ne l’est que par trucage et repose sur un système de photographie rotative développé en interne.
Principe de fonctionnement du module rotatif
Présentation.
À la grande différence d’un achat en magasin, l’internaute est loin de l’article et de ce fait privé de toute sensation de toucher du produit, ( ou même du confort d’assise dans le cas d’un canapé), j’ai donc proposé à mr Layani de développer ce type de modules afin de valoriser la qualité des produits avec un peu d’interactivité.
Principe de fonctionnement
sur la fiche de présentation d’un article, dans le cas présent ce sont des canapés mais ce moteur a été implémenté avec réussite pour d’autres typologies de produits.
Une animation flash récupère le nom du canapé et va chercher les visuels adaptés
(ceux ci ne sont chargés chez l’internaute que lors de l’action sur bouton, afin d’éviter d’alourdir la fiche produit inutilement.)
Utilisation :
L’interface permet de faire pivoter ou d’activer des fonctionnalités des articles image par image façon stop-motion.
l’interaction n’est pas obligatoire, laissant à l’internaute pressé qui le souhaite profiter d’une animation automatique façon diaporama rotatif.
Exemples :
Maison et Confort.com (webdesign pour e-commerce)
14/06/10
Accueil de Maison et Confort.com en 2007
À la naissance du projet MaisonetConfort.com, après les étapes de définition du nom, du logo et de la stratégie de communication de la marque est venu le temps de la conception du site.
Le site Maison et Confort.com a été réalisé à partir de zéro, nous avons fait le choix avec Claire ( Conceptrice Informatique du site) de ne pas utiliser de systèmes d’aides à la publication, à gestion de contenu ou de solutions d’e-commerce préétablies (Powerboutique, Prestahop et autres).
Nous avions l’habitude de travailler ensemble et surtout nous savions qu’il est parfois préférable de concevoir une solution complète que de batailler à essayer de plier une solution externe à nos souhaits ou aux nécessités des enjeux commerciaux propres à une activité.
Immédiatement les choix techniques et graphiques ont été pris, assumés et appliqués soit Php/MySql et un design ouvert aux évolutions du site, à la fois sobre, frais et rassurant.
Le marché du mobilier et de la décoration en ligne en 2005 n’était pas ce qu’il est aujourd’hui, les grands vépécistes et sites de vente flash et privées n’étaient que peu présents sur le marché.
En 2005, le fait de proposer en ligne à des internautes des canapés qu’ ils pourraient commander sans les essayer paraissait audacieux, Mr Layani a pris ce pari et Maisonetconfort est devenu l’un des grands acteurs de ce marché.
Enjeux de l’Ergonomie du site Web : Crédibilité et efficacité commerciale
Si la plupart des sites de vente en ligne de l’époque (et nombre d’entre eux encore à ce jour) se sont positionnés dans le discount, Maisonetconfort à opté pour la démarche inverse, la nécessité de rassurer l’internaute sur la qualité des articles vendus et sur le sérieux de la maison ont primé sur les aspects « bonne affaire et prix ».
Ce choix a été déterminant et a été le faisceau porteur de notre communication durant toute la phase de décollage du site marchand.
Nous étions d’avis qu’acheter un canapé, un salon en cuir, une piscine ou un spa n’est pas un achat qui se fait sur un coup de tête, le client peut comparer les prix et la qualité et doit d’ailleurs le faire, Internet sert également à cela.
La conception graphique et ergonomique devait donc avant tout répondre à ces enjeux.
Après plusieurs expériences dans le design e-commerce, la conception du site MaisonetConfort.com m’a permis d’expérimenter, heureusement avec un relatif succés je crois, la fusion des codes graphiques bancaires et d’assurances et ceux de la distribution classique.
Mon expérience sur Zebank chez Babel@stal m’a beaucoup servi pour Maison et confort.com, Zebank était un hypermarché bancaire, un nouveau type de service en ligne concurrençant ou complétant les offres d’acteurs bancaires quasi institutionnels, être un nouvel acteur du marché bancaire nécessitait l’installation d’une très forte crédibilité du site Web, être à la fois innovant et dynamique mais surtout fiable et rassurant dans la présentation de l’offre.
En 2005, le marché du mobilier était assez proche de cet état de fait, les grandes chaînes et enseignes se partageaient le marché depuis des dizaines d’années et rien ne semblait devoir changer Internet ou pas, Les Cxnfxrama, Bxis et Chiffxns, But, Atlas ou les Cuir-center, Roche-Bxbxis, Crxzatier et même les vépécistes, la redoute, les 3 suisses ou la Camif n’étaient pas présents en ligne et ne semblaient pas en envisager un dans l’immédiat pour l’équipement de la maison.
Le design et l’ergonomie de Maison et Confort sont donc issus des codes du graphisme bancaire et d’assurances autant que de ceux des acteurs du mobilier et répondent aux principes suivants :
- Fond blanc et structure aérée
- Très peu de sollicitations visuelles, aucune popup ou autre publicité ou communication invasive.
- Une navigation simple et ludique avec pictogrammes colorés en partie supérieure (nav horizontale)
Pictogrammes de navigation pour les différents univers du site.
- Une navigation complète et exhaustive ( catégories/sous catégories) en menu vertical.
- Une présentation des produits la plus complète possible tant graphiquement que dans l’affichage de leurs caractéristiques afin de palier à la « virtualité » de l’objet acheté
- Pas de prix barrés, de clignotements, de couleurs criardes, se différencier nettement des sites de discount et offrir à l’internaute arrivant sur MaisonetConfort, une sensation de calme et de repos visuel propice à la réflexion et à l’acte d’achat de paniers très élevés pour du Web.
- Permettre de créer à volonté des univers colorés cohérents selon l’actualité du catalogue ou de l’animation commerciale (Printemps, Soldes, Fêtes de fin d’année, Nouvelle collection mobilier..)à travers un bandeau central.
- Développement d’applicatifs et de contenu d’aide à la décision et au choix (animations flash, didacticiels…)
Jusqu’à récemment, la charte graphique du site et de la marque ont toujours répondu à ces critères et le site et sa communication ont été bien accueillis et très appréciés si j’en juge par leurs retours par les internautes et nos partenaires commerciaux.
Cette image de marque de qualité a été un travail quotidien rendu plus aisé par le design du site qui s’est révélé à l’usage encore plus flexible que je ne l’avais imaginé (sans pour autant subir de changements majeurs durant 3 ans dans sa structure ou dans ses codes).
Une version 2 du site perpétuant ces choix et améliorant encore cette démarche commerciale était à l’étude, presque finalisée et était envisagée fin 2008.
Exemples de quelques bandeaux centraux thématiques
(Quelques uns sont le travail de Seb Maratrat qui a travaillé avec moi en tant que graphiste durant près de 2 ans et qui a très bien su s’inscrire dans la démarche graphique que j’avais initiée, tout en y apportant sa patte personnelle).
Chose amusante, c’est quelques mois après la création de MaisonetConfort.com que nous avons découvert le site Vente-unique.com, site en concurrence directe sur certains articles avec Maison et Confort.com
dont l’un des dirigeant est également un ancien de Babel@Stal
Prochain article sur l’ergonomie et le design e-commerce : Exemples de modules d’aide à la décision et didacticiels en Flash
Maison et Confort.com et ALD
14/06/10
Logo de Maison et Confort.com (2004-2009)
Co-fondateur de Maison et Confort.com, j’ai eu l’opportunité de participer au cours des 3 dernières années à toutes les étapes qui ont fait de ce site un des grands noms de la vente en ligne.
L’aventure s’est terminée en octobre 2008 et le graphisme et l’ergonomie actuels du site ne sont aucunement le fruit de mon travail.
La génèse du projet :
En 2005 alors que nous étions mon épouse et moi-même en poste sur un gros site d’e-commerce toulousain (elle en tant que Chef de projet Informatique et moi en tant qu’Infographiste responsable catalogue) une de nos connaissances nous met en relation avec Mr Layani. Ce dernier exerçant depuis de nombreuses années dans la vente de mobilier, souhaitait créer une structure Internet de vente en ligne et nous proposa de le rejoindre sur ce projet.
Ce sera le début de l’aventure Maison et Confort.com, viendront le dépôt de la marque et la création de l’identité visuelle puis le design du site et du backoffice ( l’interface de gestion).
Le logo et ses couleurs
Une fois le positionnement marketing défini, le logo a été créé, un sigle carré de fond bordeaux/grenat sur lequel sont positionnés 4 rectangles de couleurs différentes s’articulant et s’imbriquant entre eux et autour/dans d’un rectangle en réserve de blanc.
Ce logo déposé à l’INPI en 2005 n’a connu que très peu de changements depuis, tout comme la typographie de la marque (Cantoria, Coronet et Franklin Gothic pour l’esperluète).
Les coloris sont le vert tilleul, un jaune aurore, un bleu pastel et un rouge thé éclairci.
Le site maison et confort, son ergonomie et son design c’est par ici
