Category: expérience


Reebok : Je veux_

Reebok vient de lancer son nouveau site. Et faut bien avouer qu’ils ont bien fait.

Déjà parce que leur ancien site avait pris un coup de vieux, mais surtout parce qu’ils ont fait ça bien. Vachement bien même.

Genre, niveau ergo, il y a un vrai parti-pris de navigation, avec ce gros champs de recherche et ce « Je veux_ » énigmatique et pourtant si attirant. Oh oui, si attirant (hop, doublé chuchotté). L’air de rien, ça donne un petit coup de frais et un bon goût de nouveauté.

Le principe repose sur une sorte de « tags » ou « labels » qui se concatène dans ce fameux champs de recherche. Oui, bon, difficile à expliquer comme ça… Mieux vaut quelques images :

Autre point non négligeable, la (forte) présence de cette grille, qui se rafraîchit (avec, en sus, une animation du plus bel effet) en fonction des « tags ». Ou « labels ». Bref. Bien foutu. Ça structure bien la page, et le principe de rafraîchissement donne un sentiment de fluidité dans l’expérience de navigation…

Dernier point non négligeable : les visuels. Que ce soit les natures mortes ou les portés, y’a pas à dire, c’est soigné. Et homogène. Et de bon goût. #jalousie

Donc là aussi c’est une réussite.

Je passe sur les petits détails/trouvailles vachement sympas. Oh et puis non, je passe pas.

Les petits call-to-action et cette petite map qui permet de se repérer dans la page, moi j’aime vachement bien :

Dernière chose : la fiche produit. Que j’aime beaucoup. On a un bel impact produit en haut de page (les beaux visus, ça aide hein) et une jolie grille de cross dans le bas de page. Même le gros zoom est top, avec le bloc info produit qui disparaît pour laisser place au visuel.

Voilà.

Par contre, je vais finir sur un point négatif. Très négatif même.

Quand on clique sur « acheter » POURQUOI ON EST REDIRIGE SUR LE SHOP TOUT MOCHE, AVEC DES VISUS TOUT MOCHES ????????? #colère #jalousie

J’exagère (un peu), mais juste que ce site aurait mérité d’être le shop. En fait.

Yohann.

Lao-Tseu et le e-commerce

Ce genre de petits détails qui marque les esprits :
Comment diminuer le sentiment de déception quand on veut acheter un produit qui n’est plus en stock ?

Un touche d’humour, une pincée de philosophie… Les espiègles de Photojojo ont trouvé la recette !

Sur la fiche produit :

Fiche d'un produit non disponible sur Photojojo

Fiche d'un produit non disponible sur Photojojo

« La flamme qui brûle deux fois plus fort brûle deux fois moins longtemps », Lao-Tseu

Avec ça on est presque content qu’il ne soit plus en stock ce produit !
D’autant qu’on m’en propose plein d’autres qui vont bien…

Laurent B

Emmaüs Lescar-Pau fait appel au studio bordelais « Tricolore » pour une opération de communication et de visibilité. Ils ont retroussé leurs manches et ont réalisé une méga fresque de 20 mètres par 3, au pinceau, au niveau d’un échangeur de l’autoroute Bordeaux/Pau qui passe à proximité de la communauté.

Chaque lettre illustre une des « valeurs » de la communauté. « E » comme écologie, « M » comme mixité, « M » comme mouvement, « A » comme alternative, « U » comme utopie et « S » comme solidarité. Si vous avez l’occasion d’y passer en voiture, vous ne pourrez pas la manquer !

Voici la vidéo de la réalisation de la fresque :

http://www.vimeo.com/31388127

Et je vous invite aussi à découvrir les autres travaux du Studio Tricolore ! Ils n’en sont d’ailleurs pas à leur première collaboration avec la communauté Emmaus…

Anne

Je n’ai pas d’action chez eux, et ils ne sont même pas client chez nous. Et en plus ça n’est même pas nouveau. Alors pourquoi en parler ?
Parce que dernièrement, certaines boutiques en ligne s’y sont essayées, sans arriver à faire mieux que la dernière version du site H&M, sortie en avril, a amélioré encore davantage son dressing room, et pas que d’un point de vue esthétique. Alors, comme c’est ce qui se fait de mieux en la matière, cela mérite bien qu’on en parle.

Je ne m’amuserai pas à faire un comparatif avec d’autres enseignes qui paraissent bien pâle à côté de celui là. Les moyens financiers et mis en œuvre y sont sans doute pour quelque chose.
Donc, j’opterai pour une position courageuse mais pas trop téméraire j’en conviens. En me bornant juste à un comparatif avec son ancienne mouture, qui n’était pas trop mal foutue, mais qui a pris un sacré coup de vieux au regard de la nouvelle mouture. Ça y est, ça balance !

Dressing room H&M version 2010

Dressing room H&M version 2011


La navigation
:

De mettre la navigation principale du site dans le haut, homogénéise le tout et libère de la place en largeur. Du coup l’espace dressing room est plus marqué et se distingue mieux du reste du site, donc moins confus.
Ce gain de place, aère l’ensemble, permettant une meilleure disposition des divers éléments qui composent la page.
En bas, une barre bien distincte en noir contient toutes les infos qui se trouvaient dans l’image sous les pieds du modèle, ainsi qu’une partie des onglets. Ce qui permet de rester constamment sur les sélections.

La navigation par catégorie outre le fait de passer de droite à gauche (au cas où vous n’auriez pas remarqué), s’est enrichie d’un sous menu. Permettant de garder le mannequin au centre et d’agrandir les vignettes de produits, on regrettera simplement qu’elles ne puissent s’agrandir encore d’avantage quand on passe au roll-over.


Décor et Mannequin :

Bien vu le fond qui court sur toute la largeur, liant le tout, et emprisonnant un peu moins le mannequin, le laissant un peu plus respirer. Exit les fonds avec paquets cadeaux qui parasitaient le visuel, au profit de fonds plus sobres avec plus de nuances colorées. Il y a même un fond plage, qui à l’approche de l’été, permet de mettre en situation par exemple le bikini qui nous fait envie.

Le mannequin quant à lui, n’a pas beaucoup changé en soi (même taille, même pose).  Par contre le choix de type de visages (12 contre 8 auparavant, et 6 pour les mecs) font un peu plus naturels, même si les genres typés ne sont pas beaucoup représentés. Au moins, ils sont plus accentués et différenciant.

Dressing room H&M version 2010 - modèles et fonds

Dressing room H&M version 2011 - modèles

Les différents types de visages s’adaptent bien aux corps. Pas de mauvais raccord, quels que soient le type de peau et de visages. Idem pour les vêtements qui s’adaptent parfaitement au modèle.
La gestion des couches des layers est très bien gérée (premiers plans et arrières plans).
Et c’est encore plus bluffant quand ces mêmes vêtements s’adaptent selon que la fille porte ou non des chaussures à talons, sans qu’il y est de bugs visuels à ce niveau. Idem aussi quand le mannequin est en position latérale.
Ça peut paraître insignifiant, mais c’est le détail qui tue, bien que déjà existant sous l’ancienne version. Pourtant, ça change tout et fait toute la différence. Car même si la posture est la même, la silhouette semble avoir changé. Le corps est plus élancé et le porté différent.
Incroyable ! Non ? Un must dis-je, en la matière, qui je pense est le seul à le proposer.

J’en profite pour tirer bien bas mon chapeau à l’équipe technique, aux designers et aux photographes qui pour arriver à des juxtapositions, des raccords aussi précis avec quasi aucun défaut visible. Les vêtements font portés et ne font pas découpage de formes placées au premier plan. Les pieds sont bien dans les chaussures quel que soit le modèle avec ou sans chaussettes.  Déjà rien qu’en ça, c’est déjà une belle prouesse. On n’y voit que du feu.

Des petits bug visuels finissent par apparaître par exemple quand on essaye d’enfiler un short au dessus d’une jupe, avec un string par-dessus. Ce qui peut donner libre cours à nos délires ludiques et vestimentaires. Voir même réécrire la mode pourquoi pas. Je suis sûr que Barbie doit en être jalouse.

Mais même là, l’outil arrive à nous surprendre. C’est qu’en cliquant sur l’objet pour voir apparaître ses propriétés. On nous propose de porter  sur ou sous tel ou tel vêtement. Et là où il nous étonne encore, c’est que le vêtement s’adapte à celui du dessus. Dans l’exemple ci-dessous, le bas de la robe rentre dans le short. Alors qu’avant il était caché sous la robe. « C’est du boulot de ouf. On est d’accord ? »


Les + :

- le choix du modèle (femme/homme), la possibilité de changer de fonds, intéressant pour contraster avec certains vêtements.

- La gestion de porté avec ou sans talons.

- Le fondu flou qui se crée autour du vêtement sélectionné. Ce qui permet en plus de savoir quel article est pointé, d’obtenir des infos succinctes sur l’article avec la désignation et prix. Ainsi que la possibilité de changer de couleurs et de supprimer celui-ci.

- Les différents mode de suppression : soit dans la liste des articles (nouveau look) , soit en cliquant sur l’article qui ouvre un mini menu contextuel, soit en faisant un cliqué déposé en dehors du mannequin, qui est encore la méthode la plus rapide.

- le mode listing sur le côté avec le prix total des articles essayés.

- la possibilité d’essayer certains vêtements ouverts ou fermés (chemises, gilets, vestes…)

- La catégorie : derniers arrivages, est très intéressante, vue la mise à jour constante des collections.


Les -
:

- Quand on veut tester 2 vêtements de même type, il y a substitution. Pas d’espace de dépôt temporaire. Surtout quand la catégorie comporte plusieurs pages de produits. Ça devient un peu galère pour aller le rechercher. Bien qu’un lien « enregistrer » permet de sauvegarder son look à condition d’avoir un compte utilisateur. Ce qui n’empêche pas, même une fois sauvegardé, de devoir reprendre l’essayage depuis le début.

- Les ensembles 2 pièces haut et bas (lingerie et bikini). Bien qu’intéressant de pouvoir dissocier les 2. Mais un peu pénible quand on veut l’ensemble de devoir chercher l’autre partie dans les différentes vignettes.

- L’actualisation des collections, ce qui par moment laisse peu de choix. Par moment certaines catégories peuvent ne proposer qu’un article. Ce qui restreint les possibilités de mix’n’match. Les basiques devraient toujours être présent.

- L’intérêt pour la catégorie « tenue pour » qui n’a pas grand intérêt. Dommage que la recherche par couleurs soit supprimée et qu’on ne propose pas déjà des propositions de styles.

- Pas de modèle enfant


Conclusion
:

Je comprends mieux pourquoi la concurrence s’en inspire.
Je serai curieux de savoir le budget que cela représente. Et combien de temps de travail il a fallu. En tous cas le résultat est là. C’est bien pensé, ludique, facile de prise en main, d’ailleurs l’aide a disparu. Pratique, avant que ma copine ne m’emmène en magasin essayer des fringues pendant des heures à me demander mon avis, elle peut le faire de la maison, me montrer les tenues qu’elle a enregistré et je peux même m’amuser à lui faire des propositions. C’est magique, même sur le couple ça semble avoir des effets bénéfiques. Mais bon, ça a tout de même ses limites.

Alors les filles, on file en cabine ?

http://www.hm.com/fr/dressingroom/LADIES

Pour les hommes, c’est par là
http://www.hm.com/fr/dressingroom/MEN


Ludovic L.

En tant que belge de service (enfin à moitié), j’étais un peu obligé de parler d’un truc belge. Rien à voir avec les frites sauce bicky et la (bonne) bière. Ça parle meuble.

Quatuor.be, c’est le genre de site qu’on a toujours sous la main, dans les benchmarks, comme le site qui a l’air de rien, mais qui réunit pas mal de bonnes choses. De très bonnes choses même.

Premièrement, d’un point de vue graphique, on est pas dans l’exceptionnel non plus, c’est dans les codes actuels, mais le moins que l’on puisse dire, c’est qu’il y a de la fraîcheur et du dynamisme (et que c’est très propre aussi).

Bref, là où je veux en venir c’est que si ce site tient une bonne place dans ma liste de référence, c’est par l’esprit qu’il dégage. Bien sûr le ton graphique y participe, mais c’est surtout le travail rédactionnel qui donne une identité aussi sympathique à ce site.

Le ton est super bien choisi et inspire la sympathie d’emblée. C’est quand même bien (voire super) agréable qu’un site nous parle de cette façon à nous, humains, et ça se fait rare dans ce monde web froid et sans âme.

Pour info, c’est les (très symathiques) liègeois de chez Epic Agency (dont le site est très rédac aussi) qui s’est chargé de la refonte complète de Quatuor.

La belgian touch’ quoi.

Yohann

J’ai reçu ce matin cet e-mail de la part de Disneyland Paris m’annonçant que les super soirées Princesses et Pirates du mois de juin sont annulées…

Sauf que… je n’avais de toute façon jamais entendu parler de ces soirées et que par conséquent je ne m’y suis forcément pas inscrit !

Alors pourquoi m’adresser cet e-mail au contenu très négatif (je me suis mis à imaginer la tête déconfite de mes 2 enfants si je devais leur annoncer que la super-fiesta était finalement annulée, et les travaux de réhabilitation qui se prolongent ne sont pas rassurants et renvoient irrémédiablement à l’accident du train de la mine). Pas très raccord avec le spot TV de Disneyland Paris du moment « et vous, quand pensez-vous leur dire ? ».

Un peu de ciblage dans vos e-mails, surtout pour annoncer les mauvaises nouvelles que diable !

Stéphane

Logo Burton

Vous connaissez sans doute l’excellent site de Burton, fabricant de matériel et équipement de Snowboard depuis 1977.

Mais ce que vous ne savez peut-être pas, c’est qu’un module a été mis en place sur leur site il y a quelques semaines.

Le principe est simple, proposer des produits en fonction du temps qu’il fait chez vous.

La géolocalisation lors de votre arrivée sur la home du site fonctionne plutôt bien et la météo sur les trois prochains jours vous sera automatiquement indiqué (un partenariat avec « Weather Underground » a d’ailleurs été mis en place).

Il est tout de même possible de modifier la géolocalisation et d’entrer manuellement la ville que vous désirez ce qui est bien pratique pour prévoir des vêtements pour les vacances par exemple.

Tout le principe repose donc sur le fait de proposer un produit adapté à l’environnement dans lequel vous êtes ou dans lesquel vous vous trouverez prochainement.

Et pour le coup Burton ne fait pas les choses à moitié… Outre un produit mis en avant, trois sélections (catégorie homme, catégorie femme et sac à dos) « cachés » derrière des visuels sont également proposés et ce toujours en fonction de la météo.

D’un point de vue graphique le tout reste très propre avec une couleur dominante qui change en fonction de la météo.

Je suis fan de la marque mais aussi de leur site qui graphiquement reste l’un des meilleurs dans le domaine du sport de glisse !

Je vous laisse découvrir les tas de petites subtilités qui jalonnent les pages et vous souhaite une bonne journée !

Basile


Pas une goutte de Flash ou presque…
La tendance est au « pur » HTML mais pas forcément au détriment des interactions ou des jolies effets de transition.

En témoignent les derniers blockbusters de ces derniers mois comme Nike Better World ou encore Glo le portail éditorial de msn.

Nike Better World : le grand retour du scrolling multiplans.

Ça me rappelle mes années Amiga et le jeu Shadow of the Beast, le premier à tirer pleinement parti du multi-défilement parallaxe (waow ça fait geek) avec 13 couches superposées… En pas geek : le fond est constitué de plusieurs superpositions de décors avec transparence et ces différents couches ne défilent pas à la même vitesse.

Le plus simple, c’est d’aller faire un tour directement sur le site de Nike Better World, vous allez vite comprendre ;-)

Petit bonus : le site calcule le nombre de pixels scrollés…

Pourquoi j’en parle ? Parce que sur le site de Nike le résultat est super élégant avec des images canons et une superposition plutôt bien travaillée.

Cet effet est déjà présent sur la version française du site Fatboy (mais développé à l’époque en Flash) :

À découvrir aussi, le site glo.msn.com (sans les www sinon ça marche pas, désolé), le portail édito de MSN lancé il y a quelque mois en partenariat avec le Groupe Hachette.

Là aussi une longue bande verticale presque infinie, avec des raccourcis, des typos incorporées et très peu de Flash pour gérer les interactions.

Reste que ce n’est pas encore du 100% no Flash… Les vidéos sont encore encodées en FLV (sans doute pour des raisons de compression et de streaming) et que c’est pas encore tip-top bien lu sur iPad par exemple et il vaut mieux avoir une bécane et un navigateur récents si on veut éviter les scrolling saccadés.

Ça reste toutefois assez prometteur… à suivre !

Stéphane

Powered by Wordpress and Motion by 85ideas.