La nouvelle page d’accueil de Yahoo! est en ligne

Souvenez-vous, il y a quelques temps je vous parlais d’expérimentations autour d’une nouvelle page d’accueil pour Yahoo!. Et bien c’est chose faite, elle est en ligne : Yahoo.com.

Au programme des nouveautés :

un haut de page moins chargé avec l’apparition de Yahoo! Answers à un emplacement stratégique (tout près du moteur de recherche) ;
les chaînes qui s’affichent maintenant sur la colonne de gauche avec des pictos en primes ;
des onglets des quasiment toutes les cartouches pour diminuer la densité d’information ;
un gros bloc où sont concentrés les services personnalisés ;
l’apparition de deux nouveaux services collaboratifs (Marketplace et Pulse) ;
un code source utilisant le positionnemnet CSS (et beaucoup de javascript aussi) ;
l’utilisation de nombreux patterns (ils en parlent sur leur blog)…

Pas mal de nouveautés donc pour cette nouvelle version qui est plutôt réussie. Vous aimez ?

MAJ (15/05/2006) : On me signale que cette nouvelle page d’accueil n’est visible que par les utilisateurs d’IE6 et de Firefox (merci Pilgrim) et qu’il existe une version française (merci Smadje)

De l’importance des éléments invisibles dans la construction de vos pages

Voilà encore un excellent article rédigé par Luke Wroblewski : Developing the Invisible. L’auteur y explique ainsi l’importance des éléments invisibles (espaces blancs, alignements…) dans la structuration d’une page web. L’utilisation pertinente (ou hasardeuse) des espaces blancs et autres grilles peut ainsi améliorer (ou au contraire nuire fortement) à la lisibilité d’une page ou à la compréhension d’une interface.

Les espaces blancs sont ainsi primordiaux pour faire respirer une page et pour associer ou dissocier visuellement des éléments entre eux. L’auteur nous fournit ainsi l’exemple suivant qui illustre l’importance de ces espaces blancs :

L’alignement des éléments entre eux est également essentiel pour aider les utilisateurs à décoder une page. Second exemple avec ce tableau :

Le principe d’alignement est souvent associé à celui des grilles. Pour en savoir plus, je vous recommande ces deux articles :

La pornographie de l’information (ne vous fiez pas au titre…) ;
Conception Web : utiliser la grille.

(Re)Découvrez les utilisateurs-types

J’ai déjà eu l’occasion de m’exprimer de nombreuses fois sur le thème des utilisateurs-types (personas en anglais).

Pour ceux qui souhaitent une explication en français avec en prime un modèle de fiche d’utilisateurs-types alors propulsez-vous sur l’article suivant : Pourquoi est-ce que la technique des profils (Personas) est efficace lors de la construction d’un site Web ?

L’article est très facile à lire et le modèle est très bien conçu.

Un petit problème de hiérarchisation de l’information ?

Voici un site très original : Désordre.

Si je pouvais me permettre d’envisager de porter un début de jugement très personnel sur ce site… et bien je m’autoriserais éventuellement à suggérer à l’auteur d’essayer d’alléger la mise en page. Mais bon, c’est un avis très personnel… (via Presse-citron)

Avec quoi faites-vous vos arborescences ?

Voilà une question intéressante… surtout quand il est question de représenter sur une seule page une arborescence très profonde ou très complexe. Pour ouvrir le débat, je vous propose de lire les deux articles suivants :

The Lazy IA’s Guide to Making Sitemaps, où l’auteur nous explique comment générer des arborescences à partir de Visio ou de Word ;
Site Maps for Web Applications, où il est question de représenter la structure logique d’une application.

Au quotidien j’utilise Powerpoint pour réaliser mes arborescences, ce n’est certainement pas un modèle de formalisme mais il est rapide et simple à utiliser. Et vous, vous utilisez quoi ?