Ergospeed #17 : Barre de défilement sur apple.com

logo apple
Depuis la keynote de septembre, Apple.com a bien entendu fait des mises à  jour de leur site en présentant leur nouvelle gamme de produits. Ils ont intégré plusieurs modules dont cette barre de défilement horizontale dans la rubrique « iPod + iTunes ». Cette scrollbar est particulièrement bien exploitée pour une présentation de leur produits le tout en CSS et Javascript.

Classification & Organisation visuelle

apple scrollbar

1/ Utilisation habituelle de la scrollbar

Chaque produit est juxtaposé avec une régularité graphique et proportionnelle. Tous sont détourés sur un fond gris uni afin de faire ressortir aux mieux chaque couleur. Bien sûr, leurs intitulés sont situés juste en dessous et permettent une identification plus précise. Cette première zone de lecture permet à  l’utilisateur de consulter la gamme entière d’Apple avec un usage unique et habituelle d’une scrollbar.

2/ Une barre de défilement qui classifie

Le deuxième sens de lecture se situe dans l’utilisation de la scrollbar. A l’intérieure de celle-ci se trouve des sous-catégories qui permettent de hiérarchiser en 1 seul clic les différents produits selon leur gamme. Le défilement et le positionnement des produits permettent à  l’utilisateur de comprendre la délimitation de chaque produits. La scrollbar n’est pas surchargée de catégorie car seulement 3 existes (« produits », « iTunes plus » et « accessoires ») et le curseur reste de taille identique afin de « souligner » et d’indiquer le choix de l’utilisateur.

Une utilisation efficace et simple qui n’empêche pas une utilisation habituelle pour des utilisateurs moins avertis.

A lire aussi :

Derniers Ergospeeds :

Ergospeed #17 : Barre de défilement sur apple.com

Paris Web 2008

logo paris web
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 :

A lire aussi :

Paris Web 2008

Timeline de TheNewYorkTimes.com

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


Timeline de TheNewYorkTimes.com

Mémento – Ergonomie web, Amélie Boucher

memento amélie boucher
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

Ergonomie Amélie BoucherDu même auteur :
Ergonomie web, pour des sites web efficaces,
Edition Eyrolles : 32€
Novembre 2007

A lire aussi :

Mémento – Ergonomie web, Amélie Boucher

La convergence numérique

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.

Egoten

Définition de la Convergence numérique

Sources Wikipédia :

La convergence numérique est un phénomène ancien, mais en accélération ces dernières années, de fusion de trois éléments : une information, son support, son transport.

  • L’information est l’ensemble des objets physiques d’autrefois (photos, disques, documents imprimés sur papier, cassettes vidéo), que la numérisation « dématérialise », transforme en simple « information », c’est-à -dire en série d’octets.
  • Le support est la combinaison de la mémoire, de masse ou volatile, disque dur ou mémoire flash, autrement dit de tout ce qui contient un nombre de plus en plus important d’octets, et du protocole nécessaire à  l’interprétation du sens de cette série d’octets (un programme).
  • Le transport est le passage de cette information d’un point à  un autre dans le but d’être « consommée » : lue, écoutée, visualisée, copiée, par n’importe quel réseau, local ou étendu, privé ou public, sur un support physique ou via une forme d’émission radio.

La convergence numérique se traduit concrètement par la fusion d’appareils jusque là  très différents comme le téléphone avec la télévision ou l’ordinateur avec la chaîne HI-FI. Cela grâce à  la numérisation des contenus et des communications.

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.orgAdobe ; 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 çà  😉

La convergence numérique