Comment prĂ©senter le contenu d’une presse en ligne ?

Le design de la presse en ligne est un sujet dont on entend parler depuis quelques mois. Hier j’ai pris connaissance d’une prĂ©sentation très intĂ©ressante sur Slideshare. Cette prĂ©sentation est de BenoĂ®t Drouillat, designer interactif.  Elle fait l’objet d’un point de rĂ©fĂ©rence (non officiel) de la façon dont la presse en ligne (essentiellement amĂ©ricaine) structure ses nouvelles sur une page pour mettre en valeur ses contenus. La prĂ©sentation est composĂ©e de 94 diapositives.

En savoir plus ?

Consultez les billets suivants :

Une réflexion sur le design de la presse en ligne de Benoît Drouillat

Le futur de l’édition en ligne, quelques hypothèses de Étienne Mineur

Le futur de l’édition en ligne, quelques images de Étienne Mineur


Qu’en pensez-vous ?

Source : Martin Lessard

37 exemples de navigation unique

Pour faire suite aux articles de FrĂ©dĂ©ric “Tout savoir sur les chemins de navigation (breadcrumb)” et “Peut-on se passer des menus de navigation ?” voici une dĂ©couverte très intĂ©ressante que je souhaite partager avec vous.

Il s’agit de l’article 37 Examples of Unique Navigation sur inspiredology.com.

J’ai particulièrement aimĂ© ma visite sur les trois sites suivants :

Jaymeblackmon.com pour les rolovers du menu de navigation

Porsche.com pour les gros menus présentant les modèles de Porsches.

Salinas-rio.com.br pour l’ajout des illustrations dans le menu de navigation

Et vous, quels sont vos préférés ?

De l’art de soigner vos tableaux comparatifs

Lorsque vous vendez du service (ou mĂŞme des produits avec beaucoup de caractĂ©ristiques techniques), il est essentiel de bien prĂ©senter les diffĂ©rentes offres et surtout de ne pas gĂ©nĂ©rer de la confusion chez le prospect. Plus facile Ă  dire qu’Ă  faire car vous pouvez avoir des offres très similaires ou complexes Ă  prĂ©senter. IdĂ©alement il faut un tableau comparatif qui donne envie et oĂą chacun va trouver facilement l’offre qui lui correspond et se persuader qu’elle est mieux que les autres.

Pour attayer votre réflexion je vous propose donc deux très bons articles : Pricing Tables: Examples And Best Practices et Design Decisions: The new Highrise signup chart.

Dans le premier article, il est question des meilleures pratiques :

  • Faire ressortir les diffĂ©rences et non les similitudes ;
  • Mettre en avant un choix pour faciliter la prise de dĂ©cision des indĂ©cis ;
  • Ne pas surcharger le tableau pour pouvoir utiliser une typo plus grande ;
  • ClĂ´turer le tableau avec des appels Ă  l’action simples.

Pour illustrer ceci, voici un exemple avec le très bon tableau des offres de CrazyEgg :

Le tableau de comparaison des offres de CrazyEgg
Le tableau de comparaison des offres de CrazyEgg

Dans le deuxième article, il est question de la refonte du tableau de présentation des offres de Highrise dont voici la version initiale :

highrise_before
Avant la refonte

Vous noterez le côté brouillon de ce tableau avec beaucoup de bruit et du contenu difficile à décrypter (trop de tailles de typo différentes, de couleurs et stimuli visuels). Voici la version finale :

Après la refonte
Après la refonte

Nous avons ici une page bien plus incitative avec une belle promesse au-dessus du tableau, moins de bruit, une meilleure segmentation (“For big groups, For small teams…“) et des appels Ă  l’action bien plus visibles. Vous noterez Ă©galement qu’il existe une offre gratuite mais qu’elle est complètement mise en retrait (en bas Ă  gauche du tableau).

Pour prolonger cette réflexion je vous engage à visiter les sites des constructeurs automobile US qui proposent  des Car Comparator très intéressants.

Et on reparle des bibliothèques de modèles de conception

Pour complĂ©ter ma prĂ©cĂ©dente liste de User Interface Patterns Library (cf. Vive les librairies de modèles de conception d’interfaces) je vous propose de dĂ©couvrir une nouvelle bibliothèque qui s’illustre par son interface : Quince.

Les modèles sont ainsi répartis par tâches, tags et types de wireframe. À chaque mode de classement correspond une interface, ici la recherche par tâches :

La recherche par xx chez Quince
La recherche par tâches chez Quince

LĂ , la recherche par tags :

La recherche par tag de Quince
La recherche par tag de Quince

Et voici enfin Ă  quoi ressemble la fiche d’un modèle de conception :

Un modèle de conception sur Quince
Un modèle de conception sur Quince

C’est donc une interface très originale que nous propose cette bibliothèque de modèles de conception, un peu perturbante au dĂ©part mais finalement assez simple d’utilisation. Voici en tout cas un bon moyen de faire Ă©voluer les mentalitĂ©s et notamment les Ă  priori vis Ă  vis des interfaces riches. (via Usability Post)

Un effet en CSS pour faciliter la lecture des liens distants.

J’ai rĂ©cemment pris connaissance d’une technique en CSS sur le blogue de Mr Xhark. Cette technique permettrait, en quelque sorte, de diminuer le poids d’une page Web. Elle Ă©viterait ainsi l’utilisation de Flash ou de Javascript pour ce genre d’effet. Le rĂ©sultat n’a rien d’impressionnant, mais sur le plan de la simplicitĂ© je le trouve intĂ©ressant. Ă€ mon avis cet effet facilite la lecture.

Source de l’image : http://blogmotion.fr

Par contre, pour diminuer le risque d’erreur sur les photos j’aurais tendance Ă  jouer avec l’opacitĂ© de celles-ci…  :

remote_link_css.jpg


Qu’en pensez-vous ?

Mémento Web : un concentré de bonnes pratiques de conception web

Quand vous Ă©tiez lycĂ©ens, vous aviez les “Profil d’une oeuvre” pour vous simplifier les fiches de lecture. Quand vous Ă©tiez Ă©tudiants, vous aviez les “Que sais-je” pour vous initier rapidement Ă  une discipline. Maintenant que vous ĂŞtes en activitĂ©, je vous propose de dĂ©couvrir les MĂ©mentos Sites Web. Il s’agit d’une collection d’antisèches pour la conception web. Deux ouvrages nous intĂ©ressent particulièrement :

  • Ergonomie Web, un condensĂ© de bonnes pratiques pour rendre votre site plus attractif, plus percutant, plus fonctionnel… rĂ©digĂ© par AmĂ©lie Boucher d’Ergolab ;
  • Bonnes pratiques, un rĂ©sumĂ© des 153 critères de qualitĂ© du rĂ©fĂ©rentiel Opquast rĂ©digĂ© par Elie SloĂŻm.

Inutile de vous dire que je suis plus qu’enthousiaste quand Ă  ces deux fascicules extrĂŞmement bien conçus et qui rĂ©sument de nombreuses annĂ©es d’expĂ©rience de conception de sites web.

Bref, une lecture indispensable pour tous les concepteurs / designers / chef de projet car cela permet de faire des “piqures de rappel”.

Vive les assistants de saisie pour les champs de formulaire

Je ne le rĂ©pèterais jamais assez : Les formulaires sont les bĂŞtes noires des internautes. Surtout quand il s’agit de saisir des donnĂ©es avec un format bien particulier comme un numĂ©ro de tĂ©lĂ©phone ou une date.

Mais rassurez-vous car la situation est en train de changer grâce aux assistants de saisie qui sont décris ici : Input Masks Design. Le principe est révolutionnaire : simuler le formatage des données lors de la saisie.

Illustration avec une première technique de Masked Input Plugin (cliquez sur l’onglet “Demo“) :

Exemple de formatage de données en cours de saisie
Exemple de formatage de données en cours de saisie

Deuxième illustration avecle Dynamic Field Masking :

Deuxième e
Deuxième exemple de formatage de données en cours de saisie

Je trouve ce principe révolutionnaire car il permet une bien meilleure appréhension du format à respecter sans pour autant perturber la saisie.

Dans le même genre il y a aussi la correction orthographique sur les formulaires de recherche de Transport-IdF mais qui est bien plus perturbante car très dirigiste (ne fonctionne que sur certains navigateurs).

En tout cas cette nouvelle variante de la saisie assistĂ©e mĂ©rite largement que l’on s’y intĂ©resse, surtout si elle se dĂ©grade correctement pour les navigateurs non compatibles (Ă  vĂ©rifier).

Les plus belles interfaces ne sont pas forcément les meilleures

VoilĂ  un très bon article qui vient d’ĂŞtre publiĂ© sur UsabilityPost : Experience vs. Function — a Beautiful UI is Not Always the Best UI. L’auteur y explique fort justement que le but d’une interface n’est pas de remporter un concours de beautĂ© mais plutĂ´t de bien restituer le contenu et les fonctionnalitĂ©s. En d’autres termes : la meilleure interface est celle qui ne se remarque pas, celle qui s’efface pour laisser plus de place au contenu, celle qui supporte le mieux les fonctionnalitĂ©s sans leur faire de l’ombre.

Illustration avec deux sites remplissant la même fonction (agrégation de news IT) : Newspond et HackerNews.

L’un propose une superbe interface avec de très beau effets graphiques (Newspond) :

La très belle interface (mais trop chargée) de Newspond
La très belle interface (mais trop chargée) de Newspond

L’autre est beaucoup plus sobre (Ă  la limite de l’austĂ©ritĂ©) mais permet d’afficher beaucoup plus de news (HackerNews) :

Linterface minimaliste de HackerNews
L'interface minimaliste de HackerNews

Force est de constater qu’Ă  l’usage le deuxième site est tout de mĂŞme beaucoup plus productif. D’autres sites sont ainsi des modèles d’effacement face au contenu : Amazon, Ebay, Craiglist

Tout ceci me fait penser Ă  un vieux dĂ©bat sur l’Ă©lasticitĂ© du design (un design moche rassure alors qu’un design trop sophistiquĂ© peut rendre mĂ©fiant) : La règle de l’élasticitĂ© s’applique-t-elle au design des sites web ?.

Cloudo et son formulaire de création de compte

Les formulaires de crĂ©ation de compte sont un grand classique du web. Exercice aujourd’hui bien maĂ®trisĂ© (cf. Le formulaire parfait ?), il ne pose plus trop de problème. Et pourtant, les Ă©quipes de Cloudo nous propose une version encore amĂ©liorĂ©e avec notamment un système d’aide contextuel très performant :

Le formulaire d'identification de Cloudo
Le formulaire d'identification de Cloudo

Les points forts de ce formulaire :

  • Une vĂ©rification de surface des champs (matĂ©rialisĂ©e par la petite coche) ;
  • Un indicateur de “force” pour le mot de passe (plus ou moins dure Ă  trouver) ;
  • Un petit rappel pour la correspondance entre les deux champs Password (la double flèche).

Rien de très rĂ©volutionnaire mais des petites attentions qui font plaisir aux utilisateurs et amĂ©liorent l’intuitivitĂ© et prĂ©viennent les erreurs.

Vive les librairies de modèles de conception d’interfaces

Dans 95% des cas, concevoir une interface reviens Ă  assembler des briques “standards”. Dans mon jargon on appelle ça des modèles de conception (“design patterns” en anglais). Ces modèles sont Ă  la fois issus de la façon dont le HTML traite les Ă©lĂ©ments d’interfaces basiques (champs, boutons…) mais Ă©galement de l’accumulation de bonnes pratiques.

Et justement, quand il est question d’accumulation de bonnes pratiques, rien de telle que les librairies de modèles de conception d’interfaces. Je vous propose de partager avec vous ma liste de librairies. Certaines sont très complètes et actives, d’autres n’ont quasiment pas Ă©voluĂ©es mais elles prĂ©sentent toutes un intĂ©rĂŞt.

Mes préférées :

Celles qui concernent les interfaces d’applications :

Celles qui concernent le E-commerce :

  • Web Design Practices, qui n’est malheureusement plus alimentĂ©e mais apportent des stats très intĂ©ressantes ;
  • Ecommr, une toute nouvelle librairie avec des tonnes d’exemples.

VoilĂ  de quoi vous donner des nombreuses sources d’inspiration.

(via Use Design Blog)