Paris Web revient cette année et aura lieu le 13, 14 et 15 novembre.
A l’occasion de la World Usability Day (13 novembre), Amélie Boucher m’a proposé de participer à  une table ronde programmée en fin de journée. Malheureusement, j’ai dû décliner son invitation car beaucoup de mes projets vont apparaître vers cette période et je n’aurai pas le temps de m’y consacrer et même de venir peut-être 🙁

Comme chaque année de nombreuses conférences de qualité y sont organisées :

Jeudi 13 novembre

/ Conférence – Technique

• Ergonomie des interfaces riches – Amélie boucher
• Qualité et accessibilité Web : vers l’amélioration continue – Elie Sloà¯m
• Travailler dans le présent – Christian Heilmann
• Accessibilité : des volontaires ? – Stéphane Deschamps, Aurélien Levy
• Internautes et robots des moteurs de recherche, mais comment font-ils pour s’y retrouver ? –
• Alix Lassaigne, Christophe Cotin-Valois
• Fin de journée table ronde

Vendredi 14 novembre

/ Conférence – Technique

• Internationalisation – François Yergeau
• La mode se démode, le style jamais – Daniel Glazman
• Identité 2.0 et Web sémantique – David Larlet
• IE 8 et les standards du Web – Chris Wilson
• Performance Web cà´té client – éric Daspet, Nicole Sullivan

/ Conférences – Décideur

• Panorama des bonnes pratiques Web (ou « Au secours, on m’a confié le projet Web ! ») – François Nonnenmacher
• Accessibilité, persuader tous les maillons – Jean-Marc Bassin
• Making Chaos Accessible – Aaron Leventhal
• ReNo, le référentiel de qualité Web du gouvernement luxembourgeois – Gautier Barrère
• Qualité éditoriale : la grande oubliée – Joà«l Ronez
• Les standards du Web en entreprise – Jérémie Patonnier
• Comment décider des modèles de navigation pour ses applications Web ? – Patricia Gallot-Lavallée

Organisation de l’apéritif communautaire avec Eyrolles (14 novembre)

« Comme chaque année, un apéritif communautaire est organisé dans le centre de Paris, avec la collaboration des éditions Eyrolles. Il s’agit de permettre aux développeurs, chefs de projets, et passionnés du Web de se retrouver dans des discussions plus informelles autour d’un verre. Il n’y a aucun sujet imposé, aucune contrainte, juste de la bonne humeur et des discussions engagées… » suite

Samedi 15 Novembre

/ Ateliers – Technique

• ARIA : Accessible Rich Internet Application
• RDFa vs Microformats
• 2UNL
• Firebug, Web Inspector : des outils indispensables
• jQuery et accessibilité
• Accessibilité par les utilisateurs
• Cascade et héritage : concevoir, organiser, optimiser et maintenir ses feuilles de styles
• Comment rendre mes vidéos accessibles ?
• Développement efficace avec les frameworks CSS
• Enrichissement progressif de sites Web
• Javascript De(ux) zéro
• Les nouvelles technologies du Web
• Optimiser ses CSS
• Performance Web cà´té client
• Playing with Opera stuff
• Rédaction Web et référencement naturel
• Validation avancée des formulaires

Infos Pratiques :

• Paris Web 2009 – Hervé Mischler
• Inscriptions : tarifs
• Plan – accès
• Site ParisWeb2008

A lire aussi :

• Paris Web 2007 : Atelier Ergonomie, Amélie Boucher
• tKaap.com : Paris web 2007, on y était

A l’approche de l’élection présidentielle américaine, le mardi 7 octobre dernier a eut lieu le second débat entre Barack Obama et John McCain. Pour cet évènement, le New York Times a eu la brillante idée de mettre a disposition la vidéo de ce débat avec un dispositif très intéressant permettant de la consulter en détail.

Une timeline adapté au contenu

Sur ce screencast vous pouvez constater l’utilisation d’une timeline utilisant des repères de temps échelonnés sur la durée du débat permettant un accès direct aux thèmes abordés. L’utilisateur sélectionne le sujet qu’il souhaite avec efficacité :

• Consultation simple, rapide et fluide
• Informations accessibles avec plusieurs points d’entrées
• Moteur de recherche interne au contenu de la vidéo
• 2 timelines avec des repères de temps de prise de parole des candidats
• Contenu rédactionnel ciblé selon le contenu de la vidéo en cours et vice&versa
• Une approche consommatrice et zapping du contenu

A tester d’urgence avant que cela ne disparaisse 🙂

---

L’usage et l’utilité d’une timeline adapté au contenu

Je vous invite à  lire le billet de BiblioSession : « L’usage de la Timeline comme outil de médiation numérique« . Il détaille assez bien cet usage avec plusieurs exemples de timeline adapté au contenu.

Ci-contre, le Timeline d’Ergophile propulsé par Dipity.com

---

Je viens tout juste d’acquérir le Mémento – Ergonomie Web d’Amélie Boucher. Qui dit acquis, dit déjà  fini ! Paru aux Editions Eyrolles, ce petit dépliant est un aide-mémoire bien pratique qui se complète avec le livre d’Amélie paru en Novembre 2007 : « Ergonomie web pour des sites web efficaces ».

Des points clés à  ne pas oublier

Ce 14 pages, au contenu complet et concis, nous permettent d’avoir sous la main les bases de l’ergonomie avec une trame de conseils à  suivre (plus de 150 principes d’ergonomie web). Une sorte de checklist à  retenir et à  appliquer, bien sûr, si cela correspond à  l’usage de vos d’internautes.

Au sommaire de ce Mémento à  5€ (pas cher dis donc !) :

• L’ergonomie, c’est quoi ?
• Bien organiser une page web
• Des textes lisibles et clairs
• Titres et libellés : aller à  l’essentiel
• Liens hypertextes : les clés d’une navigation réussie
• Des formulaires simples et efficaces
• Menus : naviguer sans perdre le nord
• Des boutons pour passer à  l’action
• Organiser ses listes et tableaux
• Bannières publicitaires : oui, mais !
• Des messages d’information pour accompagner votre internaute

Du même auteur :
Ergonomie web, pour des sites web efficaces,
Edition Eyrolles : 32€
Novembre 2007

A lire aussi :

• Ergophile : Ergonomie web pour des sites web efficaces
• Ergophile : Paris Web 2007 : Atelier d’ergonomie avec Amélie Boucher
• Designers Interactifs : 3 questions à  Amélie Boucher

Mercredi dernier, j’assistais pour la deuxième fois à  une soirée micro-débat organisé par Adobe. Souvenez-vous, la première session était sur le thème « Interface/homme machine » (IHM) courant juillet et la deuxième eu lieu la semaine dernière. Au programme une dizaine de questions sur la Convergence Numérique.

Définition de la Convergence numérique

Personnes Invitées

Pratiquement les mêmes participants que la dernière fois avec quelques nouvelles têtes :

Peter Gabor : Paris.blog.lemonde.fr ; Etienne Mineur : My-os.net/blog ; Jean Louis Frechin : Nodesign.net ; Olivier Saint-Léger : Agence Ketchum ; Galdric Pons : Hebiflux.com/blog ; Thibault Imbert : Bytearray.org – Adobe ; Stéphane Baril : Adobe ; Stéphanie Saissay : Adobe ; Sylvain Weber : Questionsouvertes.com ;

Convergences des technologies = convergence des métiers ?

Ce sujet a suscité beaucoup de controverses qui ont souvent dérivés sur la concurrence des technologies telle que Adobe vs Microsoft, Microsoft vs Apple, Flash vs SilverLight… Ci-dessous les questions qui étaient notre fil rouge de la soirée :

• La convergence des technologies, c’est quoi selon vous ?
• La convergence pose elle un problème de limitation des connaissances ?
• La convergence des métiers induit elle la compression des ressources en entreprises ?
• Convergence : faut il mieux être spécialiste ou généraliste ?
• La convergence induit elle une formation spécifique ? Il y a des formation adaptées ?
• La convergence des métiers induit elle la compression des ressources en entreprises ?
• Quelle est l’incidence de la convergence sur l’organisation des entreprises ?
• Quelle est la place de la R&D dans les entreprise face à  la convergence ?

Toutes ces questions n’ont pu être abordées, aucunes réponses n’ont pu vraiment aboutir et bien sûr, d’autres questions ont vu le jour :

• Selon-vous, quel est l’objet qui pourrait représenter la convergence numérique ? Existe-t-il ? Et quel risque cela pourrait-il occasionné ?
• La surenchère technique dans le développement des logiciels n’a-t-elle que pour but de vendre sans se soucier de l’usage des utilisateurs?
• etc…

Si vous désirez partager votre point de vue sur ce sujet, les commentaires sont fait pour çà  😉

Dernière partie des billets 10 visionneuses et plus encore ! (partie 1 & 2) : « Découvert sur Smileycat.com grâce à  Brett, 50 visionneuses sont listées et nous permettent de constater l’importance de ce nouveau format… » voir article précédent

M.A.J : Visionneuses/carrousels, vidéo de SmartExperience.org

NONESUCH.COM

Cette visionneuse peut être considérée comme la transition entre les billets précédents et ce dernier présentant des formats de type dynamique. Ici, à  chaque nouvel évènement se joue une animation entre le rédactionnel et la photographie permettant d’illustrer de manière attractive la transition de chaque sujet. Toutefois, l’espace de ce format paysage est assez mal exploité et bien souvent, un vide est omniprésent. La taille des visuels ainsi que du rédactionnel sont trop petit et accentue l’illisibilité.

---

XBOX.COM

Longue au chargement, cette visio est simple d’utilisation avec comme pagination les packagings des jeux vidéos. L’utilisation de la perspective pour le positionnement des items accentue la profondeur du CoverFlow tout comme l’élément positionné au premier plan qui répond à  son format promotionnel. Cette présentation peut être considérée comme une PLV (Publicité sur le Lieu de Vente) situé en tête de gondole dans un magasin.

---

JO2008.CANALPLUS.FR

A l’occasion des JO de Pékin, Canal+ a créé un site évènementiel utilisant un carrousel 2D pour annoncer les derniers évènements sportifs. Ce carrousel contient une légère animation lors de la sélection d’un visuel de second plan ou lors d’un clic sur les flèches directionnelles qui permet d’accélérer la vitesse de consultation. Simple, dynamique et efficace, cette visionneuse est adaptée à  la charte graphique de Canal+ ainsi qu’aux sujets abordés.

---

PLAZA.PLAYNC.CO.KR

D’une apparence assez gadget et confuse cette visionneuse se navigue pratiquement que par rollover. Des éléments didactiques y sont rajoutés et permettent de compléter la sémantique de chaque items : Hiérarchie du rédactionnel, présence de pictogrammes efficaces, double entrée aux contenus différents. Malheureusement, l’accès aux pages dédiées des sujets ne se fait que par des liens situés sur les titres et sur un minuscule bouton situé en-dessous des images… Difficile à  trouver.

---

Conclusion

L’importance et les répercussions d’une visionneuse sur une page d’accueil et sur un utilisateur sont considérables. D’o๠la nécessité de réfléchir au mieux sur le choix et les besoins de sa cible, de son intégration et de sa stratégie d’utilisation. En espérant que ces trois longs billets vous ont permis de découvrir des nouvelles utilisations de ce format qui est de plus en plus présent sur le web.

A lire aussi :

• 10 visionneuses et plus encore ! (partie 1)
• 10 visionneuses et plus encore ! (partie 2)
• 10 visionneuses et plus encore ! (partie 3 & Fin)
• Visionneuses/carrousels, vidéo de SmartExperience.org

Deuxième partie du billet 10 visionneuses et plus encore ! (partie 1) : « Découvert sur Smileycat.com grâce à  Brett, 50 visionneuses sont listées et nous permettent de constater l’importance de ce nouveau format… voir article précédent »

M.A.J : Visionneuses/carrousels, vidéo de SmartExperience.org

FNAC.COM

La Fnac se restreint à  3 évènements en utilisant une pagination à  chiffre. Chaque visuel est adapté à  la charte graphique de la Fnac ce qui permet d’homogénéiser les promotions, mais aussi de mettre à  jour plus régulièrement leur page d’accueil grâce au nombre limité d’évènement.

Les Plus : L’information textuelle ainsi que les liens sont toujours situés au même emplacement, l’utilisateur s’habitue à  cette navigation et évite une perte de repère à  chaque visite. Le fait d’utiliser 3 à  4 évènements évite de surcharger de promotion l’utilisateur et permet une attention de ce dernier sur les informations qu’il consulte.

Les Moins : Les paginations à  chiffre peuvent déstabiliser l’utilisateur car il doit utiliser sa mémoire à  courte terme. Heureusement, la fnac n’utilise que 3 à  4 visuels pas plus ce qui permet à  l’utilisateur de retenir l’information consultées. Pour CBS cela n’est pas le cas…

---

CBS.COM

CBS a opté pour l’intégration d’une visionneuse panoramique occupant toute la largeur du site. L’utilisateur profite d’un format inattendu similaire à  un cadrage cinématographique.

Les Plus : L’utilisation des photographies au format 16/9ème permette à  l’utilisateur d’apprécier les sujets présentés qui sont accompagné d’un cartouche rédactionnel. Ce format correspond parfaitement au sujet du site.

Les Moins : La pagination est absente et perd l’utilisateur parmi les 7 items de forme abstraite. L’absence de repère didactique déstabilise l’utilisateur. Trop d’item tue l’item !

---

PREMIERE.COM

Cette visionneuse possède une fonctionnalité en plus des autres : un player ! Oui, un player… pause, play. Wow ! La visionneuse est similaire à  un diaporama.

Les Plus : L’utilisateur se repère grâce à  la pagination à  chiffre et gère son temps de consultation du player. Le rédactionnel permet d’avoir le chapo de l’article correspondant au visuel.

Les Moins : La mention « Todays Features » n’est d’aucune utilité. Le format pavé ne met pas en valeur les thèmes présentés ainsi que l’intégration du chapo des articles… Pas très sexy tout çà .

---

ACTIVERIDESSHOP.COM

Cette visionneuse reprend le même principe que celle de Premiere.com avec des onglets en plus. Ces onglets permettent de cibler directement les utilisateurs du site pour la vente de produits : « men », « women » et « snow ». 3 visionneuses en 1 car derrière chaque onglet se trouve une visionneuse à  plusieurs items. eheh !

---

Visionneuses similaires

---

A lire aussi :

• 10 visionneuses et plus encore ! (partie 1)
• 10 visionneuses et plus encore ! (partie 2)
• 10 visionneuses et plus encore ! (partie 3 & Fin)
• Visionneuses/carrousels, vidéo de SmartExperience.org

Découvert sur Smileycat.com grâce à  Brett, 50 visionneuses sont listées et nous permettent de constater l’importance de ce nouveau format donnant la possibilité de faire plusieurs mises en avant sur une seule et unique zone. Suite à  cette liste, je me suis permise de faire une sélection d’une dizaine de visionneuses tout en essayant de décrypter leurs principaaux atouts et lacunes dans leur contexte respectif.

M.A.J : Visionneuses/carrousels, vidéo de SmartExperience.org

VIRGINMEGA.FR

Virgin a adapté une navigation avec 10 items correspondant au cover des CD. Malheureusement, 10 items c’est trop surtout quand ces derniers sont présentés dans un menu défilant à  l’infini. Cela est assez déroutant. L’utilisateur doit utiliser sa mémoire dite « mémoire à  courte terme » pour retenir un item afin de se repérer et de se positionner dans le temps de sa consultation.

Les Plus : Cette visionneuse privilégie le cà´té évènementiel de chaque visuel. Une présentation différente est créée pour annoncer une exclusivité aux internautes sur un artiste. Exploitation du rollover pour passer d’une image à  une autre, cela entraine une rapidité d’utilisation.

Les Moins : Une transition trop rapide qui ralentie la navigation de l’utilisateur. Il manque de temps pour lire le rédactionnel et son intégration dans la page laisse à  désirer : la colonne de gauche contient un pavé promotionnel animé et une méga-banner publicitaire est située dans le Header à  proximité de la visionneuse qui bien sûr, dit pub dit forcément clignotement. Attention aux yeux !

---

MTV.COM

MTV utilise d’une manière différente ses items visuels : ils représentent un cadrage serré de l’image mise en avant. Les 6 items sont superposés au visuel et se mêle à  lui. Le caractère évènementiel se manifeste par une cartouche opposée aux items et par des photographies bruts c’est-à -dire sans aucun ajout textuel. Le rédactionnel se situe au pied de la photo dans un format standardisé superposé.

Les Plus : Des visuels sobres, impactant et bruts afin d’annoncer des évènements variés et de qualité.

Les Moins : L’utilisateur a 4 niveaux de lecture sur cette visionneuse. Le positionnement, la superposition de chaque élément ainsi que la transition peut troubler la lisibilité et le sens de lecture de l’internaute.

---

DEEZER.COM

Cette visionneuse standardise les mises en avant et permet une hiérarchisation des informations. Elle permet à  l’utilisateur de s’habituer et d’apprivoiser ses différents liens ainsi que leur positionnement. La transition en fondu adoucit le changement de thème et permet d’apprécier les photographies impactant grâce à  leur format paysage.

Les Plus : Une structuration simple et efficace des infos textuels, c’est-à -dire nom de l’artiste, nom de l’album, accès à  sa fiche et accès à  l’album. Aucune phrase promotionnelle n’est présente et permet une mise en avant plus imposante visuellement.

Les Moins : Absence d’information sur le type de l’artiste : rock, jazz, rap… Aucun lien sur le nom de l’artiste, le nom de l’album et le visuel de fond. Ce manque occasionne une frustration et une perte de temps à  l’utilisateur qui est obligé de se diriger sur les 2 petits liens oranges situés dans le cartouche.

Visionneuses similaires

A lire aussi :

• 10 visionneuses et plus encore ! (partie 1)
• 10 visionneuses et plus encore ! (partie 2)
• 10 visionneuses et plus encore ! (partie 3 & Fin)
• Visionneuses/carrousels, vidéo de SmartExperience.org

---