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 ?

Une nouvelle interface minimaliste pour le NY Times

Alors que la version française de Slate fait (toujours) débat, le NY Times n’en finit plus d’innover avec cette toute nouvelle interface minimaliste : Article Skimmer.

nytimes_skimmer

L’idée derrière cette interface est de pouvoir « balayer » les news d’un oeil distant comme vous pouvez le faire en buvant votre café du matin, d’où le titre du billet qui explique la genèse de cette interface : Sunday Browsing. La mise en page est réduite à sa plus simple expression, la lisibilité est parfaite et la prise en main immédiate. D’un point de vue ergonomique c’est du grand art, dans la droite ligne de cet article : In Defense of Readers.

Suite à une précédente expérimentation sociale à grande échelle (cf. L’avenir de la presse en ligne est-il dans le social ?), le NY Times confirme sa position de pionnier dans une industrie de la presse qui se cherche un second souffle.

(via SwissMiss)

De l’art de ne pas du tout respecter les conventions

Celles et ceux qui me lisent depuis un certains temps, notamment sur des sujets liés à l’ergonomie et à la conception d’interfaces web, savent à quel point j’insiste sur les  conventions (liens soulignés bleus…) et les risques liés au non-respect de ces conventions. Bon… vous pourriez me dire qu’il y a convention et convention mais là n’est pas mon propos, je ne cherche pas à rentrer dans ce débat.

Bref, tout ça pour dire que je suis récemment passé sous Mac et que j’ai découvert un utilitaire tout à fait singulier : Skitch. Pour faire simple, il s’agit d’un outil de capture, de retouche et de partage d’images (uniquement disponible sur Mac). Il existe de nombreux logiciels proposant la même chose (dont le très original Jing) mais Skitch propose une interface tellement déconcertante que ça mérite un billet.

La particularité de ce fameux Skitch est de proposer une fenêtre où les différentes icônes et fonctions sont réparties tout autour du cadre :

Deuxième particularité : le modèle d’interaction très particulier qu’il propose pour redimensionner, renommer et sauvegarder une image. Dans n’importe quel outil vous vous attendriez à faire quelque chose comme :

  1. Menu « Image » puis option « Redimensionner » ;
  2. Menu « Fichier » puis option « Enregistrer sous » avec une fenêtre de dialogue pour choisir le nom et l’emplacement du fichier.

Et bien ici pas du tout car le redimensionnement se fait directement en déplaçant un des coins de la fenêtre et le renommage en saisisant le nom du fichier et le fomat dans le champ en bas de la fenêtre :

Encore plus déroutant : pour sauvegarder le fichier il faut attraper l’onglet « drag me » en bas de fenêtre et le positionner à l’emplacement désiré (sur le bureau, dans un fichier ou un email…) :

A la première utilisation c’est très déroutant mais on a vite fait de se prendre au jeu et surtout de se dire que ce modèle d’interaction est terriblement efficace. Voici donc un bon exemple de non respect des conventions qui pourtant fonctionne plutôt bien. Un excercice très délicat (voir carrément dangereux) mais qui donne un caractère très particulier à cette application (en plus de la couleur rose).

Dans le même genre il y a également Chrome qui a supprimé la barre de menu. Si vous connaissez d’autres exemples, n’hésitez pas à publier les liens en commentaire.

Alors bien évidemment vous vous doutez bien que je ne vous recommanderais pas dans un premier temps d’appliquer ce principe (« Don’t try this at home« ), mais il y a tout de même de quoi nourrir une réflexion intéressante sur une approche en décallage complet avec les conventions et autres normes informelles (le fameux « Thinking outside the box« ).

Aurora, le navigateur conceptuel de Mozilla

Pour celles et ceux qui rentre de congés, je vous propose de découvrir le gros buzz de l’été, un concept de navigateur futuriste imaginé par Mozilla Labs et l’agence Adpative Path : Aurora.

aurora_overview

 

Pour faire simple, Aurora n’est pas un produit, mais plus une réflexion menée conjointement par le Mozilla Labs dans le cadre de ses Concept Series pour essayer d’anticiper le futur des navigateurs web et de l’internet (cf. Mozilla Crowdsources Future of the Internet).

Intégration fine entre browser, bureau et mobile

Plusieurs vidéos ont ainsi été publiées pour expliquer les différents concepts fonctionnels et d’IHM de ce navigateur du futur : Aurora Concept Video Part 1.

On y voit ainsi la possibilité de partager l’écran avec un autre utilisateur (regardez bien, il y a deux souris sur cet écran) :

Aurora_DualUser

 

Nous retrouvons également un bureau complètement spatialisé où les documents, applications et contenus sont regroupés de façon sémantique en groupe (clusters en anglais). Vous noterez également la subtile utilisation du cadre pour y insérer les applications en bas, l’historique à gauche, les raccourcis à droite et les macro-fonctions en haut :

Aurora_SpatialView

 

Une autre vidéo présente également un achat en ligne sur un Amazon à interface flou :

Aurora_Amazon

 

Il y a également une version mobile :

Aurora_MobileSpatialView

 

Et même une version de l’interface marchande « sociale » en situation de mobilité :

Aurora_MobileSocialShopping

 

Et pour finir nous avons même droit à une version Set-Top Box avec une interface gestuelle à mi-chemin entre Wii et Minority Report :

Aurora_Gestures

 

Un hypothétique Firefox 5 ?

Force est de constater que le travail réalisé est tout à fait inpirationnel, notamment en termes d’utilisabilité. Certains éléments d’interface ne sont pas neufs comme les menus radiaux (vu dans Second Life et Songza), la widgetisation de portions de page (vu chez Safari et le prochain IE 8 il me semble), la barre d’application à effet fish eye (vu chez Mac OS)…

Il y a par contre des choses plus novatrices comme ces clusters contextualisés qui pourraient inspirés les équipes de Google Desktop. Pour en savoir plus sur cette interface, je vous recommande les explications suivantes : Aurora Interface Guide and Design Concepts de même qu’aux scénarios d’anticipation (Aurora Forecasting the Future)

Pour la petite histoire, les équipes d’Adpative Path étaient également à l’origine d’une autre réflexion tout à fait intéressante sur un concept de terminal médical personnel : Charmr, A Design Concept for Diabetes Management Devices.

Soyons réalistes et espérons que ces idées seront implémentées dans les futures versions de Firefox. Peut-être la version 5 se reprochera-t-elle de ce concept…

Quand les fonctionnalités s’invitent dans la barre d’adresse

Voilà quelques années que les grands portails et acteurs du web se livrent une guerre sans merci pour s’incruster dans le navigateur au travers des plugins et autres barre : Yahoo! Toolbar, Google Toolbar… A force, ça fini par faire beaucoup de monde qui empiète sur la surface d’affichage et « remonte » la limite de visibilité (un véritable casse-tête pour les concepteurs de sites qui doivent en tenir compte).

La version 7 d’Internet Explorer avait innové en remontant certains boutons dans le cadre de la fenêtre elle-même, libérant ainsi un peu de place en hauteur. Et bien figurez-vous que la bataille est maintenant ouverte sur une nouvelle zone de la fenêtre à conquérir : la barre d’adresse.

Et c’est du côté de Firefox que l’innovation est arrivée avec sur le côté gauche un favicon aux propriétés étendues qui permet d’indiquer si le site est reconnu (ils appellent ça le Site Identity Icon) :

siteidbutton_green.png

Nous avons ensuite sur la droite l’étoile qui permet d’ajouter un site à vos favoris, la petite icône d’inscription au flux RSS (cf. Feed Icons) et même celui des microformats détectés (cf. On Firefox 3 and microformats with Michael Kaply) :

operator08.png

Dernière nouveauté en date : un bouton universel d’édition pour les wikis (Universal Edit Button) qui permettra d’éditer une page quelque soit la plateforme de wiki :

UEB.jpg

Wow ! Décidément cette barre d’adresse va commencer à être sacrément encombrée. Nous pouvons déjà anticipée un phénomène de mimétisme et l’apparition prochaine d’autres boutons universels (commentaire, panier d’achat…) et pourquoi pas des boutons d’éditeurs (Digg, Aamzon, Ebay…).

Peut-être un peu confusant pour les utilisateurs vous ne trouvez pas ?

(via Ross Mayfield)

Des tonnes de vidéos sur l’Information Architecture TV

Vous en rêviez ? Ils l’ont fait : Information Architecture TV.

IATV.jpg

En fait de télévision, c’est plutôt un blog sur lequel vous trouverez un ensemble de vidéos traitant de sujets aussi variés que l’architecture de l’information, l’utilisabitilté, l’interaction design, la conception centrée sur l’utilisateur…

Toutes ces vidéos sont en fait extraites de Youtube mais le travail de sélection et de catégorisation réalisé par Jan Jursa(du blog Hot Strudel) est tout à fait remarquable.

Un must pour les passionnés d’ergonomie et pour les concepteurs de sites web.

Utilisabilité des applications en ligne à l’Université du SI

Sortez vos agendas car le mois prochain va se tenir un évènement prestigieux : L’Université du SI.

UnivSI.png

Il s’agit d’un séminaire organisé sur 2 jours (les 2 et 3 Juillet) sur le thème des nouveaux leviers de productivité et de l’évolution durable des usages de l’informatique. Rassurez-vous, cette conférence s’adresse à deux cibles privilégiées (les geeks et les boss) mais les interventions vont être variées et surtout très riches avec des intervenants prestigieux : Neil Armstrong, Michel Serres, Eliyahu M. Goldratt, Guillaume Laforge

J’animerai pour ma part une session sur l’utilisabilité des applications en ligne. Je parlerai de SaaS, d’interfaces riches appliquées aux applications métiers et aux tableaux de bord,des contraintes spécifiques de l’utilisabilité dans un contexte de productivité…