FredCavazza.net

Cela fait plus de 11 ans que je travaille dans le web et j’ai régulièrement des coups de cœur pour des sites que je découvre et qui m’émerveillent (lire à ce sujet : Mes 3 sites ‘coup de cœur’).

Dernier coup de cœur en date : TravelMuse, un portail de voyage découvert chez Mashable.

Dès la page d’accueil le ton est donné avec une superbe photo en plein largeur d’écran sur laquelle viennent reposer le bandeau de navigation et des têtes de gondoles. L’effet est d’autant plus saisissant que les photos sont superbement choisi (c’est la moindre des choses pour un portail de voyage). Vous noterez également au passage la grille de lecture un peu déstructurée qui donne du rythme à la page sans nuire au repérage des différents éléments.

Mais ce n’est pas tout, il y a sur ce site un travail de structuration éditorial tout à fait intéressant : tout d’abord un fleuve éditorial qui joue à merveille sur ambigüité magazine / blog (on peut le lire sur le site ou via le flux RSS). Il y a ensuite une catégorisation des contenus par thèmes ou destinations (deux clés d’entrée alternatives) :

Ils font également un très bon usage des interfaces riches avec le moteur d’inspiration (un modèle du genre) :

Vous avez aussi la possibilité de préparer vos prochaines vacances à l’aide du Trip Planner (une sorte de wish list améliorée) dans lequel vous pouvez ajouter des destinations mais également des articles. Le tout pouvant bien évidement se partager avec vos proche.

Au-delà des photos et des couleurs chatoyantes, il y a dans ce site un truc en plus : de l’énergie, de la cohérence et surtout une impression opulence et de diversité des contenus : on navigue de clic en clic sans avoir envie de quitter ce site tellement dépaysant.Bref, du très beau boulot. Vous aimez ?

Voilà plus de 10 ans que je passe plusieurs heures par jour sur internet. Malgré cette décennie de dur labeur, il m’arrive régulièrement d’avoir un coup de foudre pour un site. Le genre de coup de foudre que vous avez beaucoup de mal à expliquer mais que vous ressentez dès la première seconde.

Je vous propose donc de découvrir mes trois coups de cœur du moment.

Martha Stewart, un portail aux petits oignons

Martha Stewart est une star aux États-Unis : Elle écrit, édite, produit tout un tas de chose et surtout un portail de toute beauté : MarthaStewart.com.

J’aime tout dans ce portail : l’harmonie des couleurs, le choix des photos, le traitement graphique des cadres, la grille de lecture déstructurée, le media player tape à l’œil, les listes… Quelque soit la catégorie visitée, on retrouve tout de suite ses marques dans ce foutoir organisé mais tellement riche en contenus aussi futiles que variés.

American Eagle Outfitters, une boutique redoutablement bien conçue

American Eagle Outfitters est une chaîne de distribution américaine qui dispose d’une boutique en ligne remarquable : AE.com.

Ce n’est pas tant la page d’accueil que les pages intérieures qui m’impressionnent dans ce site : d’authentiques petites merveilles en termes de conception et de réalisation graphique. Un parfait équilibre entre efficacité marchande et sophistication de l’interface. Inutile de m’attarder sur ce site puisque j’en ai fait un billet sur le blog Rich Commerce : Un bel exemple d’enrichissement progressif.

MicroPlace, harmonieux et incitatif

MicroPlace est un site de micro-crédit responsable lancé par eBay : MicroPlace.com.

Là encore inutile de m’attarder dans la mesure où j’en avais déjà parlé l’année dernière : MicroPlace : un site beau et utile. Mais bon… chaque fois que j’y retourne il me fait toujours la même impression : de l’harmonie mais une mécanique persuasive très bien huilée.

Et maintenant à vous !

Encore une fois il n’y a pas réellement d’explication logique à ces coups de cœur, c’est juste que j’adore ces sites.

Comme je suis d’humeur joueuse, je lance une chaîne et passe la main à Eric, François et Tristan.

Beaucoup de monde à la conférence d’hier soir : 110 participants à la 3ème conférence de designers interactifs. Un grand merci et Benoît et à toute l’équipe de m’avoir laissé l’opportunité de m’exprimer à cette conférence aux côtés d’ Anuhi Lou.

Je suis ravi d’avoir pu parler et échanger sur un thème qui me tient à coeur et surtout devant une audience ayant des attentes et un niveau d’exigence élevés. Il faut dire qu’avec l’association des Designers Interactifs nous ne sommes pas dans une démarche d’évangélisation mais plutôt de vision prospective (en langage politique ils appellent ça l’excellence).

Pour celles et ceux qui n’ont pas pu se tasser dans la salle, voici le support de ma présentation : Les futurs défis des designers interactifs (format PDF, 2,5 Mo).

Vivement la prochaine édition (il parait qu’il va y avoir une surprise en mai…).

Suite à un précédent billet publié sur le sujet (ici : Maîtriser le design façon web 2.0), je vous propose de découvrir une suite de tutoriels passionnants sur le design façon web 2.0 : Web 2.0 Webdesign-Tutorials.

Vous pourrez ainsi retrouver dans cette liste des tutoriels pour concevoir de très beaux effets graphiques du type :

ou ça :

ou encore ça :

et peut-être même ça mais je vous conseille de ne pas trop en abuser :

C’est du web 2.0 design en quelque sorte… Tiens à ce sujet, est-ce que l’on dit des tutoriels ou des tutoriaux ?

(via je ne sais plus qui mais il ou elle peut se manifester dans les commentaires)

En théorie, vous devriez déjà avoir entendu parler de MySpace (et dans une certaine mesure de YouTube). Pourquoi devriez-vous déjà en avoir entendu parler ? Tout simplement parce que ces deux sites drainent une audience phénoménale et parce qu’ils attirent toutes les convoitises.

Mais ce qui est le plus frappant à propos de ces deux sites, c’est leur tendance mutuelle à s’enlaidir. MySpace est ainsi connu pour le manque de lisibilité des pages de ces membres, et YouTube n’est pas non plus un modèle de mise en page (minimalisme et austérité sont de rigueur).

Tout ça pour dire que ces deux modèles de design jusqu’alors opposés ont depuis peu entamés un improbable mimétisme :

• MySpace intègre maintenant des vidéos dans ces pages d’orientation et dans les pages membres (déjà que c’était le bordel…) ;
• YouTube propose maintenant à ces membres de créer leur propre page au sein des Channels (voyez donc le résultat ici : MissTilaTequila).

J’ai comme l’impression que ces pages membres sont en train de tirer le web vers le bas, du moins d’un point de vue purement graphique et ergonomique. Espérons que les hypothétiques communautés 3.0 relèveront le niveau…

Je viens d’achever un livre surprenant : WebVaastu, Designing Websites as per Ancient Science of Directions.

Ce livre, écrit par le Dr. Smita Jain Narang, tente d’associer les principes du Vaastu Shastra à la conception de sites web. Ces principes étant directement tirés de l’antique science indienne de conception des habitations.

Cette science repose sur l’harmonie entre les cinq éléments et leur intégration dans une construction humaine (un bâtiment, une maison… ou un site web). L’auteur fait ainsi un parallèle entre ces cinq éléments et les fondations d’un site web :

• la Terre (Bhumi) = la mise en page
• l’Eau (Jal) = les textes et les éléments graphiques
• l’Air (Vaayu) = le code HTML
• le Feu (Surya) = les couleurs
• l’Espace (Aakash) = le nom de domaine

Là où ça devient intéressant, c’est quand les principes d’orientation sont mis en application pour construire une page web :

• le Nord-Est est le domaine de l’Eau, la partie supérieur droite de vos pages devra donc être épurée et fluide (jusque là tout va bien puisque c’est une zone froide) ;
• le sud-ouest est le domaine de la Terre, cette partie de la page devra donc être bien chargée pour servir de fondation (hum… mouais) ;
• la partie centrale (le Brahmasthaan) doit être la plus légère possible (ha… là ça se complique…).

Il existe également des recommandations sur l’utilisation des formes, des couleurs ou des typographies pour que tout ça s’intègre de façon harmonieuses dans l’équilibre de votre page. Des principes de conception très surprenant, mais qui reposent néanmoins sur des pratiques ancestrales…

Là où ce livre est également surprenant c’est dans son approche très business-oriented. Nous sommes en effet très loin des clichés babacool du type peace & love mon frère. Ici l’objectif est clairement affiché : exploiter au mieux les cinq éléments pour être plus efficace dans les affaires et faire rentrer de l’argent !

Bref, un livre à ne pas mettre entre toutes les mains, mais qui apporte une touche d’exotisme tout à fait plaisante. Et vous, c’est quoi vos lectures exotiques ?

2007 sera une grande année pour les interfaces riches (voir à ce sujet mon précédent billet). Pour célébrer cette révolution à venir, je vous propose de faire une rétrospective sur dix années d’évolution des interfaces web, en incluant un peu de prospective sur l’année à venir.

J’ai résumé tout cela dans ce schéma :

La page HTML : simple et efficace

La manière la plus simple de réaliser une interface web est d’utiliser HTML. Pour consulter une page web, il faut : un système d’exploitation et un navigateur. C’est simple et efficace, suffisamment efficace pour faire fortune (à l’image d’eBay ou d’Amezon).

L’applet : un peu plus de puissance mais au détriment du confort d’usage

Durant la fin des années 90, sont apparus des micro-applications qui pouvaient être exécutées au sein d’une page web : les applets réalisées en Java. Pour pouvoir les exécuter, il fallait bien évidemment un système d’exploitation, un navigateur, mais également une machine virtuelle. C’est cette dernière qui servait à interpréter le code Java (qui n’a rien à voir avec Javascript).

Les applets permettent de faire plus de chose que le HTML mais au détriment du confort d’usage, car les applets sont lourdes et longues à démarrer (de 1 à 3 secondes) et que la machine virtuelle nécessite souvent des mises à jour intempestives. Quand il s’agit du configurateur en 3D de Volkswagen, ça va, mais quand il s’agit d’un simple calendrier pour choisir une date comme sur le site de la banque Fortis, c’est inadmissible.

Les RIA : le meilleur compromis à ce jour

Puis sont apparues les Rich Internet Applications qui proposaient de bien plus grandes possibilités d’affichage et de manipulation que le HTML. Ces interfaces riches pouvaient être réalisées en AJAX (à l’image du sélecteur de diamant d’Amazon ou du site de GAP) ou en exploitant des technologies vectorielles comme Flash ou WPF/E. Pour les faire tourner, vous devez posséder le bon plug-in (ce qui est le cas de 99% des ordinateurs pour Flash). L’intégration des animations au sein d’une page web est transparente et très performante (à l’image du très bon comparateur de Ford Vehicles).

Les widgets : petites mais terriblement efficaces

Plus récemment, des petits modules autonomes sont venus s’installer sur notre bureau : les widgets. Ces micro-applications nécessitent plusieurs choses pour pouvoir tourner : soit un programme appelé moteur de widget ( Yahoo! Widget, Google Desktop, Kapsules sous Linux ou encore le navigateur Opera), soit un système d’exploitation de nouvelle génération comme Windows Vista ou Mac OS X.

Les RDA : l’avenir du logiciel ?

La toute dernière évolution des interfaces web s’appelle les Rich Desktop Applications. Tout comme les applets, les RDA nécessitent une machine virtuelle ( Eclipse RCP, NetBeans, Java Web Start, XULRunner de Mozilla, Le futur Apollo d’Adobe ou encore le SmartClient de Microsoft). Ces technologies permettent d’avoir des interfaces aussi robustes que des applications et la simplicité de déploiement des sites web (pas besoin de les installer sur le système d’exploitation).

Plusieurs expérimentations sont en cours autour des RDA : SongBird (un concurrent de iTunes réalisé avec XUL), le Mozilla Amazon Browser (une RDA qui exploite le catalogue d’Amazon) ou encore le module d’ eBay réalisé avec Apollo.

Conclusion : le service avant tout

Après ce formidable déballage des technologies toutes plus prometteuses les unes que les autres, je vous propose de faire le constat suivant : Qui avons-nous à gauche du schéma ? Amazon et eBay. Qui retrouvons-nous à droite du schéma ? Amazon et eBay. L’enseignement que nous pouvons en tirer est le suivant : si votre service est bon alors ces différentes technologies (et les plus récentes en particulier) ne doivent vous servir qu’à enrichir l’expérience utilisateur que vous proposez. Par contre si votre service n’est pas performant alors ne rêvez pas, l’interface (quelle que soit la technologie utilisée) ne compensera pas une expérience utilisateur négative.

Je vous laisse méditer là dessus…

En début d’année je vous parlais dans un billet de cet excellent site (Web Design From Scratch), un condensé de bonnes paroles autour des différents thèmes de la conception d’un site web.

L’auteur du site vient de publier un guide de conception regroupant les meilleures pratiques de design façon web 2.0 : Web 2.0 how-to design style guide.

Le résultat est tout simplement bluffant : très simple à lire, concis et précis avec plein d’exemples. Cet article est une véritable mine d’or pour qui veut moderniser l’image de son site. Ou du moins, pour qui veut appliquer les codes graphiques du moment. Tout ça me fait penser à un précédent billet sur la règle de l’élasticité du design web…

Et voilà c’est fini. Beaucoup de monde à cette soirée… particulière. Beaucoup de paillettes et de superficialité dans cette grande messe de la profession (on se serait crû à Cannes).

Les deux grands gagnants de la soirée sont le site de l’ INA (plusieurs prix gagnés) et Netvibes (grand prix du jury). Mention spéciale au site SplitGames dont j’ai particulièrement apprécié le traitement graphique et la touche persuasive.

J’ai eu l’occasion de croiser plein de connaissances : Benoît (normal, c’est lui qui m’a négocié une invitation), Franck (qui repart avec un prix), Guillaume, Tigrou - Canardo et mes anciens collègues de Framfab, Martin et Thomas…

Une soirée intéressante mais je regrette que :

1. le site des Clics d’Or n’est pas à jour ce matin (où est la liste des lauréats ?)
2. la liste des participants n’a jamais été publiée (et il y a sûrement de très belles réalisations dedans qui méritent un peu d’attention)
3. je n’ai pas pu voir tout ceux que je voulais voir
4. l’Open Bar de Voyages-SNCF était réservé aux VIP (alors que je mourais de soif !)

Ce soir se tiendra la grande messe de notre profession : la neuvième cérémonie des Clics d’Or. Pour ceux qui ont une invitation, ça se passe à partir de 19 H au Palais de Tokyo : Clics d’Or 2006.

Les différentes catégories de sites en compétition sont les suivantes :

• Informer (38 projets) ;
• Divertir (35 projets) ;
• Communiquer (109 projets) ;
• Vendre (49 projets) ;
• Conquérir (52 projets) ;
• Interagir (68 projets) ;
• Mobiliser (38 projets) ;
• Mobilité (27 projets) ;
• Design (61 projets) ;
• TPE (26 projets).

Etrange comme classement, non ? Comment font les sites qui concernent un service de communication mobile autour de la conquête par l’interaction et le design dans l’objectif de mobiliser des vendeurs de TPE ?

Bon en tout cas j’espère avoir l’occasion de partager un verre ou deux avec vous ce soir. (et merci à Benoît pour l’invitation)