Un sans faute pour le nouveau site d’Electronic Arts ?

Je viens de découvrir la toute nouvelle version du site d’Electronic Arts et je dois avouer avoir été scotché par cette nouvelle réalisation. En fait je me demande même s’ils n’ont pas réussi le sans-faute… Il y a tout d’abord cette superbe page d’accueil avec beaucoup d’images, plein de trucs à cliquer tout en conservant une excellente lisibilité :

La page d'accueil d'Electronic Arts
La page d'accueil d'Electronic Arts

Les raisons qui font que j’aime cette page d’accueil :

  • La grille de lecture est sobre et visuellement très légère ;
  • Le haut de page est très bien orchestré avec une élégante intégration du logo, de la barre de navigation et du moteur de recherche ;
  • Il y a beaucoup d’espace entre les blocs (ce qui fait « respirer » la page et ne sature pas l’oeil) ;
  • Les différents éléments sont bien hiérarchisés avec une emphase sur « Browse Games » et « Featured Spore Creatures » (pour compenser avec les autres éléments aux couleurs plus vives) ;
  • La page est structurée sur un bloc centré à largeur fixe, mais si vous agrandissez la fenêtre de votre navigateur le fond est « habillé » d’une très belle illustration.

Il y a ensuite un certain nombre de détails que j’adore, à commencer par le menu de navigation surdimensionné avec un très bon cloisonnement de l’information et une mise en avant :

Le menu de navigation surdimensionné
Le menu de navigation surdimensionné

Une sacrée coïncidence car j’ai justement rédigé un billet hier au sujet des menus XL et des plan de site dans le footer (ce que propose également ce site) : Soignez vos extrémités (menu et pied de page).

Le site propose également un très bon carrousel avec une petite barre qui permet d’anticiper le changement de vignette :

Le caroussel avec barre de défilement
Le carrousel avec barre de défilement

Il y a également un autre carrousel avec une présentation en accordéon très original :

Le second caroussel en accordéon
Le second carrousel en accordéon

Et il y a enfin une barre d’outil en bas de l’écran (qui reste à sa place quelle que soit la position dans la page) où l’on retrouve l’accès aux autres sites du groupe, le changement de langue, la création de compte… avec à chaque fois des panneaux flottants de toute beauté :

La barre d'outils en bas d'écran
La barre d'outils en bas d'écran

Le reste du site est plus classique (quoi que toujours aussi efficace). Mention spéciale pour la page de News qui présente un design élégant mais moderne (cf. nuage de tags) ainsi qu’un très bon moteur de filtres à gauche :

La page de news
La page de news

Bref, je suis vraiment sous le charme de cette nouvelle version car elle concentre un ensemble de bonnes pratiques dans un tout cohérent et de très bon goût.

Et vous ne savez pas le pire ? L’URL de ce site (EA.com) est l’anagramme d’un autre site que j’adore (AE.com). C’est fou, non ?

Twitter + Yahoo! Answers + LinkedIn = Blellow

J’ai déjà eu l’occasion de vous vanter les mérites des outils de microblog en entreprise (cf. Les microblogs d’entreprise comme outil d’éveil et Twitter + Basecamp = Co-op), mais comme je suis un incorrigible enthousiaste, je me permet de vous faire découvrir une troisième catégorie d’outil de microblog d’entreprise.

Troisième ? Mais oui enfin, car nous pouvons maintenant identifier différentes catégories en fonction de la cible :

  • Les outils de microblog à l’échelle de services ou projets comme Co-op ;
  • Les outils de microblog à l’échelle de l’entreprise comme Yammer ;
  • Les outils de microblog à l’échelle de professions comme Blellow.

blellow1

Blellow vient donc bousculer les acteurs en place avec une proposition de valeur tout à fait intéressante : une plateforme de microblog et de collaboration centrée sur les métiers (cf. Blellow, Like Yammer meets LinkedIn Meets Twitter In A Way That Makes Sense). Le principe est simple :

  1. Vous créez un compte ;
  2. Vous rejoignez un groupe (en fonction de vos compétences / profession) ;
  3. Vous décrivez les projets sur lesquels vous travaillez et posez des questions aux membres de votre groupe ;
  4. Vous récompensez les meilleures réponses avec des kudos ;
  5. Les utilisateurs avec le plus de kudos bénéficient d’une meilleure exposition (et de la reconnaissance de leurs collègues) et sont ainsi plus visibles pour une société à la recherche d’un expert.

blellow-group

Voilà, c’est d’un simplicité diabolique : implication = reconnaissance = visibilité = $.

La plateforme propose en plus un certain nombre de prestations comme la possibilité de publier des offres d’emploi ou de recherche de freelance, d’héberger des documents… Ce Blellow se positionne donc comme le Twitter des freelance, un formidable outil de promotion personnelle. Plus d’infos ici : Blellow, A Better Microblogging Tool for Freelancers and Web Workers.

Dans un autre style, il y a aussi cette initiative de Federated Media et Microsoft pour verticaliser Twitter : Federated Media, Twitter and Microsoft Launch ExecTweets. L’idée derrière cet ExecTweets est de filtrer les membres par métier et par fonction (c’est en quelque sorte le Twitter des patrons). Les tweets sont ensuite classés en fonction du nombre de votes qu’ils ont reçus (ici la catégorie Technology) :

exectweets

Que dire de ce service si ce n’est que je trouve extrêmement réducteur de considérer que seuls les directeurs (« executives » en anglais) possèdent la compétence ou le savoir-faire. Bref, une variante intéressante mais trop élitiste à mon goût.

L’invasion des meta-agrégateurs sociaux

Les agrégateurs sociaux, vous connaissez ? Mais si enfin, c’est grosso-modo la traduction barbare des services de socialstreaming, ceux qui vous servent à centraliser votre vie sociale en ligne (avec des acteurs comme FriendFeed et Facebook). Et bien figurez-vous que la sphère sociale est tellement riche que les agrégateurs ne suffisent plus, il faut maintenant avoir recours à des méta-agrégateurs, des outils qui permettent de « consommer » plusieurs agrégateurs en même temps.

Il y a tout d’abord les rich desktop applications comme TweetDeck, Thwirl, AlertThingy ou encore Skimmer qui se livrent une bataille acharnée pour avoir la maîtrise des flux (lire à ce sujet Tweetdeck and Seesmic: The Twitterization of Facebook Comes to the Desktop).

L'interface de TweetDeck
L'interface de TweetDeck

Vous avez ensuite les extensions de browser comme Feedly qui permettent d’améliorer votre « productivité » en vous livrant une start page qui mélange flux RSS et socialstream (lire à ce sujet : 20 Firefox Extensions for Social Media Addicts).

La start page de Feedly
La start page de Feedly

Et vous avez enfin des services en ligne comme Streamy qui poussent encore plus loin cette logique de meta-agrégation : Streamy Takes Social Media Aggregation to the Next Level. Le principe de se service est de vous permettre d’agréger autant de flux que vous le souhaitez dans une interface horizontale à base de colonnes :

L'interface horizontale de Streamy
L'interface horizontale de Streamy

Bon là c’est sûr que ça commence à ne plus être très lisible, mais l’exploit technique réalisé est tout de même louable.

Je me permet de mettre un bémol à cette surenchère : il y a assez peu de chance que tous ces services survivent. J’anticipe un avenir proche (début 2010) où les logiciels d’agrégations vont petit à petit grignoter des parts de marché aux services en ligne mais il ne peut y avoir que 2 ou 3 concurrents sur ce créneau. Attendez-vous également à voir apparaître des versions mobiles de ces services.

J’ai adopté TweetDeck, et vous ?

Plus de maturité dans les éditeurs en ligne

Pouvoir éditer son site web en ligne (ou retoucher une photo) n’est pas nouveau. Par contre j’ai constate ces dernières années une incroyable progression dans la qualité des services et des interfaces proposées, ceci grâce aux interfaces riches et à Flash en particulier.

Ce sont deux articles publiés dans TechCrunch qui m’ont décidés à publier ce billet pour illustrer le niveau désormais atteint. Il y a tout d’abord les outils de retouche de photos en ligne comme Picnik, Photoshop Express ou FotoFlexer. Ces services proposent en effet de superbes interfaces, robustes et intuitives pour assurer les 10% de fonctionnalités des logiciels de retouche de photo qui conviennent à 90% des utilisateurs :

fotoflexer

Auparavant isolés, ces services sont maintenant directement intégrés à des plateformes sociales (MySpace Launches In-Browser Photo Editing Tools) ou des plateformes de partage de photos (Photobucket Image Editing Now Provided by FotoFlexer). Vivement leur intégration dans les plateformes de blog !

Plus intéressant, nous voyons également fleurir une nouvelle génération d’outils d’édition de sites en ligne : Slick Website Builder SnapPages Gets A Big Upgrade. Deux de ces outils ont particulièrement retenus mon attention : tout d’abord SnapPages qui propose une interface particulièrement soignée et très sobre qui me fait penser aux outils d’Adobe :

snappages

Et Wix qui propose une incroyable richesse dans les possibilités d’édition tout en restant très simple d’accès. vous apprécierez ainsi la répartition des différents barres de picto sur les bords de l’écran (en sur-impression) avec une authentique télécommande en bas à droite qui grossit au survol de la souris :

wix

Il faut le voir (le tester) pour le croire, je suis stupéfait par la puissance de cet outil et par le travail d’acharné réalisé par les équipes pour concevoir une interface aussi propre. Et ils se payent même le luxe de copier Apple et son dock.

Bref, même si ces outils nécessitent une grosse bande passante et de la puissance, il n’empêche que les progrès réalisés sont stupéfiants. Vivement la suite…

Soignez vos extrémités (menu et pied de page)

J’avais constaté il y a quelque temps la prolifération de menus de navigation au format XL (cf. Est-ce la mode des menus déroulants surdimensionnés ?) mais c’est un article de Jakob Nielsen qui me pousse à aborder à nouveau le sujet : Mega Drop-Down Navigation Menus Work Well.

L’auteur nous explique ainsi que les menus de navigation surdimensionnés peuvent mieux fonctionner qu’un menu traditionnel :

  • Ils proposent une meilleur lisibilité avec un espace mieux exploiter et un guidage renforcé à l’aide de séparateurs et de pictos ;
  • Ils permettent d’afficher la totalité de l’arborescence d’une section.

Ces menus doivent par contre respecter quelques  règles d’utilisabilité :

  • Pas trop de choix à la fois ;
  • Un temps de latence d’1/2 seconde à l’ouverture et à la fermeture du panneau ;
  • Pas de contrôle trop complexes ;
  • Une navigation au clavier pour assurer une meilleure utilisabilité.

Sur ce dernier point je suis ravi de la position adoptée par le Dr Nielsen : même si les menus de navigation surdimensionnés ne sont pas accessibles (ou peuvent difficilement l’être), il suffit d’assurer l’accès au rubrique de premier niveau.

Deux très bon exemples sont cités dans l’article : Food Network (avec une excellente hiérarchisation de l’information) et Action Envelopes (avec une utilisation astucieuse des pictos).

menu_foodnetwork

menu_actionenvelope

Dans le même esprit mais à l’autre bout de la page, j’avais également abordé il y a deux ans cette pratique élégante qui consistait à mettre le plan du site dans le pied de page (cf. Un plan du site dans votre pied de page). Et c’est un article publié sur Web Designer Wall qui me fait aborder le sujet à nouveau : Modern Sitemap and Footer.

L’auteur liste ainsi les avantages de mettre le plan du site dans le footer :

  • Cela permet d’économiser un clic pour les utilisateurs et d’autoriser les sauts de section ;
  • Cela donne plus d’espace à la promotion interne (pour mettre en valeur des fonctions ou contenus clés) ;
  • Cela réchauffe le pied de page.

Un certain nombre d’exemples sont cités dont celui de Mozilla :

footer_mozilla

Mention spéciale au « site à Barak » (WhiteHouse.gov) qui cumule à la fois un menu de navigation surdimensionné et un plan du site en pied de page.