tKaap.com un projet évolutif

Dans mon dernier Ergotest je vous ai évoqué un projet sur lequel je travail avant et après mes heures de boulot (ainsi que certain weekend, pas tous car j’ai besoin de repos aussi). Dès aujourd’hui vous pourrez suivre ce projet sur tKaap.com !

tKaap, un projet à  2

Logo Tkaap.com

Sur ce nouveau projet, je collabore avec Sylvain Weber qui est développeur web chez Dailymotion et blogueur de Questionsouvertes.com. A l’heure actuelle, si vous allez sur tKaap.com vous y trouverez un blog qui a pour but de vous faire découvrir au fur et à  mesure l’avancement de ce projet : de la charte graphique au développement, de la conduite de projet aux choix stratégiques.

Même si nos tâches sont quasiment réparties. Je vais m’occuper entre autre de la charte graphique et de l’ergonomie du service tandis que Sylvain se concentre sur le développement web et la stratégie globale. La partie développement n’a pas encore commencé car Sylvain passe ses nuits sur un projet pour Dailymotion que je ne manquerai pas de vous dévoiler en faisant un Ergospeed dès sa mise en ligne.

A très bientà´t sur tKaap.com

tKaap.com un projet évolutif

Ergotest #03 : Deezer.com (v1)

Enfin le 3° Ergotest ! Je suis désolée de ne pas être assez régulière dans mes publications mais je travaille actuellement sur un autre projet que je ne manquerais pas de communiquer dessus lorsque celui-ci sera en ligne.
Il y a moins d’un an j’utilisais Pandora, puis n’ayant plus accès je me suis tournée vers Last.fm, des webradios associatives comme KillTheFM.net et aujourd’hui je teste Deezer qui sera, bien sûr, ma nouvelle analyse ergonomique.

A propos de Deezer

Deezer Logo
Deezer est le premier site français légal de musique illimitée à  la demande ayant signé un accord avec la SACEM. Il permet d’écouter gratuitement et en streaming plusieurs centaines de milliers de titres dont une partie des recettes publicitaires est reversée aux artistes. Créé en juin 2006 par Daniel Marhely et Jonathan Benassaya, ex-Blogmusik.net Deezer fut parler de lui il y a quelques mois à  cause de ces problème de téléchargement, d’Universal et de Free. Dernièrement, Deezer a signé un accord avec SONY BMG qui apporte plus de 165 000 titres à  leur catalogue. Je ne ferais pas un récapitulatif historique mais je vous invite à  lire l’interview de ses fondateurs sur 01net.

Page d’accueil

Deezer Home Page

Le Header

01 Un header bien agencé avec une présentation propre et clairvoyante des éléments :

  • Un logo situé à  gauche qui correspond au sens logique de lecture.
  • Un moteur de recherche omniprésent et aligné au logo sans pour autant l’obstruer.
  • Un lien textuel juxtaposé au moteur de recherche. Cela permet à  l’utilisateur de faire une demande à  Deezer lorsque ce dernier ne trouve pas un artiste ou un titre. Heureusement que sa mise en forme n’est pas un bouton graphique car il aurait alourdi le header. Toutefois un effet lors du rollover n’aurait pas été de trop pour accentuer la compréhension de ce lien.
  • La disposition des 16 drapeaux permet à  l’utilisateur de comprendre le fort potentiel international de Deezer. Mais est-ce vraiment nécessaire que ces éléments soient toujours visible dans le header et le pied de page ?

deezer header connecté

  • Inexistence de menu, seul des liens utilitaires concernant le membre ou le fonctionnement du site sont disposés en haut du header aligné à  droite. Il aurait fallu centrer ces liens afin d’éviter un empiètement sur le logo lorsque l’utilisateur est loggé.

Player Audio

02 Un player simple et efficace :
Deezer player audio

  • Un carré blanc annonce l’affichage des jaquettes d’albums lors de l’écoute d’un titre. Absence de lien qui aurait pu ouvrir la playlist de l’album avec la discographie de l’artiste.
  • Ce player est compréhensible avec des options essentielles. Remarquons l’icà´ne iTunes qui propose l’achat du titre. Encore une fois la pomme a su s’infiltrer et s’imposer.
  • Blocs grisés qui annoncent à  l’utilisateur des fonctionnalités intéressantes lors de l’écoute : « votez pour ce titre », « blog et partage »

Deezer player audio mode connecté

  • « Blog et Partage » : l’utilisateur peut intégrer un player audio personnalisable à  son blog ou bien envoyer/copier le lien par email ou « messenger » du titre en écoute. Attention la personnalisation du player reste très rudimentaire et tant mieux car cela permet de conserver une homogénéité avec le site internet. Apparition dans une pop-up que je détaille plus bas dans ce billet.

deezer player personnalisable

  • Souvent lors de l’écoute d’un titre la SmartPlaylist apparaît. Cette dernière permet d’écouter pendant plus de 3 heures des artistes semblables au titre en écoute.

Deezer SmartPlaylist

  • Les mêmes fonctionnalités sont présentes dans la SmartPlaylist que sur dans sa playlist : sélectionner un titre pour l’ajouter à  une playlist ou l’acheter sur iTunes, consultation de la fiche de l’artiste. La jaquette de l’album est pleinement visible et met l’artiste en avant. Un seul regret : lorsque l’utilisateur décide de passer au titre suivant, clic sur le picto compréhensible la « flèche », la jaquette passe en arrière-plan grisé et l’utilisateur ne peut revenir dessus. Pourtant un rollover est actif mais rien ne se passe ?

Une colonne de publicité

03 La colonne de droite est dédiée à  la publicité. Affichage d’un pavé 300x250px signalé par une mention « publicité » et une liste juste en-dessous d’Adwords. Notons juste que Deezer utilise énormément et ingénieusement les Adwords sur leur site. Ils sont très bien intégrés et ne gêne pas l’utilisateur qui en fait facilement abstraction. Je ne m’étalerai pas sur l’intégration de la publicité car j’y ai déjà  consacré un billet dernièrement : « Pub et contenu, une cohabitation est-elle possible ? »

Auto-promotion

Deezer autopromo

04 3 mots illustrés à  l’aide de pictos explicites, une phrase proposant 2 options gratuites, un emplacement central bien défini, le tout sur un fond blanc qui se détache de l’ensemble du site et qui révèle son corps. Cette auto-promotion est pertinente par son choix de disposition que par son dépouillement. Le seul reproche serait l’effet ombré qui surcharge l’effet d’élévation lors du rollover.

Le Top des Top

05 Le « Top » des artistes est classé par styles musicaux sous forme de fiche ou répertoire finement travaillé aux niveau des ombres. L’utilisateur peut écouter le titre mit en avant ou accéder à  tous les titres de l’artiste. Sachant que le site est conçu en Flash, le rollover des rubriques aurait pu être travaillé avec une animation reflétant vraiment la notion de fiche comme sur le portfolio Checkland Kindleysides (voir l’animation sur les onglets)

Bloc infos

06 Ces deux blocs présentés comme les « Tops » permettent de tenir au courant l’utilisateur sur les dernières nouveautés liés à  Deezer ou à  un artiste mis en avant. Une présentation sobre et épuré dont le contenu reste lisible malgré un corps typographique de petite taille.

Pied de page

Deezer pied de page

07 Le pied de page a une mise en forme classique comportant un nombre insensé de liens utilitaires. Etant sur des nuances de gris, ce dernier n’endommage pas visuellement le site. Toutefois ces liens chargent une page contenant un header minimale sans les identifiants de l’utilisateur et sans player ce qui arrête l’écoute en cours. Regrettons le classement par ordre alphabétique des artistes qui devrait être davantage mis en avant sur le site.

Deezer Page mentions legales

Playlists

La colonne de gauche fait office de menu permettant à  l’utilisateur d’avoir accès à  sa dernière recherche, un lien retour vers la SmartPlaylist, ses playlists ou à  la possibilité d’en créer une. Toutefois, il y a un problème de transversalité entre l’utilisation de ses fonctionnalités et le retour à  sa playlist en écoute.
Les pictos illustrant les rubriques n’apportent rien à  leur compréhension. Attention, le pictogramme de la SmartPlaylist est similaire à  Mes mp3s.

Créer une playlist :
Deezer playlists

L’option pop-up pour créer une playlist est une très bonne idée (pas de chargement de page, pas d’arrêt du player, recouvrement partiel du site) le seul inconvénient est sa trajectoire et l’effet désuet lors de son apparition. Une ouverture de type lightbox aurait été tout aussi efficace et sobre ce qui correspond davantage aux choix graphique de Deezer.

Organiser sa playlist :
deezer classement d’un titre

L’utilisateur a la possibilité de déplacer et classer ses mp3 dans ses playlists à  l’aide de l’option « drag&drop ». Ou bien, d’ajouter un titre à  une playlist à  l’aide du bouton « + » qui ouvre un menu déroulant sur le titre en question. Ces 2 options ne gêne pas la lisibilité et évite un abus de pop-up.

Deezer bouton playlist

Les pictos utilisés pour la lecture du titre ou l’ajout dans une playlist sont assez instinctif et compréhensif grâce à  des infobulles qui apparaîssent lors du Rollover. Dommage que c’est boutons/pictos ne changent pas d’état lors du rollover, cela accentuerait leur compréhension. Le changement d’état de la souris ne suffit pas.

Blogger sa playlist :
Deezer Blogger sa playlist

Dans les « options de playlist » (voir visuel ci-dessus), Deezer permet à  l’utilisateur d’ajouter à  son blog sa playlist, en français ou anglais, dans un player à  l’effigie de Deezer. Pas de personnification cette fois-ci.

Ajouter des MP3

deezer telecharger mp3

Un service rapide offrant la possibilité d’uploader plusieurs mp3s en même temps. Peut-être que Deezer pourrait envisager par la suite une application similaire à  Box.net avec l’option « drag&drop » en java afin d’aller encore plus vite pour uploader plusieurs fichiers se trouvant dans différents dossiers.

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design épuré et luxueux
– Bonne gestion des nuances de gris avec d’autres couleurs
– Utilisation sobre des effets « cover flow » et « glossy »
– Mise en valeur des jaquettes
– Pictos et boutons homogènes au site
– Corps du texte parfois trop petit à  mon goût 4/4
2. Efficacité
[pertinence de l’information]
– Accès à  la demande rapide et très rarement insatisfaisante
– Moteurs de recherche efficace
– Options pour blog pratiques
– SmartPlaylist pertinente
– Manque d’information écrite sur les artistes 3/4
3. Efficience
[rapidité de navigation]
– Player efficace et simple
– Création et alimentation rapide de sa playlist
– Organisation facile de ses titres
– Simplicité efficace pour uploader ses Mp3s
– Structure et organisation du site équilibrées
– Un manque de transversalité entre les pages 3/4
4. Satisfaction – Données importantes de musique
– Publicité bien intégrée et non intrusive
– Service gratuit
Titres souvent ralentis avec des coupures lors de l’écoute
– Arrêt du player lors d’ouverture de certaines pages
– Absence régulièrement de jaquette
– Absence de Mise à  jour des « Top » sur la page d’accueil
– Accès impossible aux playlists des autres membres
– Pas de connections avec d’autres membres
– Bug de Flash parfois
– Absence d’un widget Deezer
2/4
5. Accessibilité Le site est conçu en Flash donc… 0/4

Conclusion

12/20

Deezer est un site sobre et épuré avec de nombreuses fonctionnalités utiles. Leur seule problème est la qualité d’écoute des mp3s qui sont souvent ralentis. Je ne rentrerai pas dans le débat de l’accessibilité avec l’utilisation de Flash mais je vous invite à  lire « Flash et l’accessibilité : halte à  l’hypocrisie » de Fred Cavazza qui argumente mieux que moi ce point de vu que je partage.

A lire aussi :

Derniers Ergotests :

Ergotest #03 : Deezer.com (v1)

Pub et contenu, une cohabitation est-elle possible ?

Sylvie Da Silva Illustration
Omniprésence est le premier reproche des internautes envers la publicité. Son statut et son intégration sur certain site manque de clarté : intrusion dans le contenu, conception graphique agressive ou non-adapté à  la cible, autopromo ou partenariat… Tous ces détails agacent les internautes qui en oublient même qu’une publicité peut être aussi informative avant d’être vendeuse. Alors, est-ce l’intégration des pubs qui n’est suffisamment pas réfléchi par les webdesigners ? Ou bien, est-ce la conception graphique et son contenu qui n’est pas assez élaboré ?

Les objectifs d’une publicité

  • Respecter les internautes : envisager un signalement de la publicité par la présence d’une mention telle que « publicité » afin d’éviter des malentendus entre de l’autopromo ou du contenu.
  • Limiter la gêne : éviter les pop-up, le déclenchement automatique du son (pub audio ou vidéo), des animations trop brutales afin de ne pas bloquer l’utilisateur dans ses actions de navigation ou de lecture du contenu.
  • Réfléchir en amont si l’on désire monétiser le site web : prévoir l’emplacement publicitaire dès les storyboards pour qu’il soit le plus harmonieux et homogène lors de la conception du site.
  • Réfléchir à  son positionnement : la publicité doit corresponde à  la cible du site si vous désirez un meilleur accueil de la part des internautes (et pourquoi ne pas envisager la méthode du Wait Marketing?)
  • Visibilité de la marque et bien sûr « faut que ça clic ! »

Exemples d’existants

La Mega banner (728x90px), le pavé 300x250px ou le skyscraper (160x600px)
Dans le header, sous le menu et dans les colonnes de gauche ou droite ces bannièrers sont les plus exploitées car leur taux de clic à  augmenter jusqu’à  4.8 point entre 2005 à  2007. Je vous invite à  consulter le PDF de l’IAB France (Interactive Advertising Bureau) qui publie ces recommandations 2007 sur les formats e-pub en France. Ces pubs sont considérées comme étant envahissantes par leur manque de finesse dans leur intégration. Les Spaces de Windows Live est un exemple parmi tant d’autres : la bannière flotte dans son espace, aucun raccord avec la barre de menu, elle attire le regard de l’internaute par sa démarcation au point de gêner la lecture du contenu.

pub_banner_spaces

La publicité interstitielle
Située avant l’accès à  la page d’accueil ou entre deux pages web d’un site, cette publicité dite interstitielle est souvent considérée comme une véritable gène pour accéder au contenu. Le bouton permettant l’accès direct au site doit être visible dès le premier regard pour éviter la perte de l’internaute.

Le popup
Les pop-up (ou les pubs qui les imitent) dérangent et empêchent la lisibilité du contenu. Un lien permettant de la fermer le plus vite possible par l’utilisateur doit être perceptible et compréhensible : la mention « fermer » ou son symbole « la croix » doit être situé dans le coin du haut à  droite de la pop-up comme pour une application. Ce format publicitaire va disparaître peu à  peu à  cause d’une trop grande gène pour les internautes.

Expand banner
Ces bannières sont très utilisées pour la notion de teasing car elle annonce un évènement que l’utilisateur peut découvrir directement sans clic mais juste avec le rollover. Le seul inconvénient est qu’elle peut obstruer la lecture du contenu.
expand banner

Liens textuels
Le site Ladies Room à  opter pour une solution ingénieuse qui n’obstrue pas le header et le logo du site : absence de bannière. Ici, l’emplacement des adword allège le site et intensifie la qualité de la charte graphique à  la différence du header du site le Monde o๠tout se mélange : moteur de recherche, bannière publicitaire, login.
pub_LadiesRoom_adword

Deezer utilise aussi des adwords dans les playlists des utilisateurs. Leurs positions et leurs intégrations ne portent en aucun cas confusion et l’utilisateur en fait facilement abstraction.
pub_deezer_adword

Attention aux liens textuels qui sont directement introduit dans le rédactionnel du site. Ces liens sont purement trompeur au point de décrédibiliser le contenu.
Pub_Inrocks

Les publicité audio et vidéo
De plus en plus présentes ces pubs n’occassione pas deènes si elles sont fixes avec le son éteint. Leurs formats sont souvent en 300×250 et sont présentées sous différentes formes. BlogBang utilise le caractère informatif : visuel fixe faisant office d’aperçu, texte explicatif avec lien, utilisation des bannières Expand : lors du rollover sur l’image la vidéo se lance (voir ci-dessus).

Le flash transparent
Le flash transparent recouvre l’ensemble ou partiellement le site aux risques d’empêcher l’accès aux fonctions. Il donne une grande visibilité à  marque si cette dernière est bien réalisé. Exemple d’un flash transparent pour la marque Nike mais qui dure vraiment trop longtemps : monopolisation du site au risque d’agacer l’utilisateur.

Habillage de site
Moins intrusif que des bannières, l’habillage enveloppe le site jusqu’à  une refonte totale. La solution surement la plus efficace pour donner de la visibilité à  la marque sans trop gêner l’internaute dans ces actions de navigation ou de consultation. Le meilleur exemple est sans doute le site Allociné qui arrive à  bien gérer l’habillage.

Interactivité avec l’utilisateur

Pub_Adobe

Les bannières interactives vont de plus en plus apparaître dans notre quotidien car elles offrent la possibilité à  l’internaute de choisir s’il veut ou pas d’être actif. Elles impliquent l’utilisateur et changent des formats traditionnels dont l’internaute est habitué. Le meilleur exemple est sans doute la dernière campagne d’Adobe illustré ci-dessus (active jusqu’en décembre 2007). Pour le lancement du pack CS3, Adobe avait lancé il y a quelques mois des bannières interactives similaires à  celle-ci sauf que le contenu était cloîtré dans son format. Dernièrement, Adobe a renouvelé cette campagne avec une petite innovation :

  • Effet teasing : l’animation se joue un peu à  l’apparition du bloc puis elle reste statique
  • Rà´le actif de l’internaute : utilisation du curseur qui dévoile au fur et à  mesure le contenu
  • La publicité n’est plus confinée dans son format mais elle s’étale et se superspose au contenu du site
  • Moins intrusif : En aucun cas l’animation se joue sans l’accord et l’action de l’internaute
  • Contenu reflétant la marque et son produit : conception graphique de qualité, contenu inattendu, visibilité et mémorisation de la cible destiné. Cette nouvelle solution est un très bon coup de pub pour Adobe qui a fait signe d’imagination pour un produit destiné aux créatifs.

Pour voir cette publicité intégrée dans un site web je vous invite à  vous rendre sur Layer Tennis Live

Conclusion

Le problème n’est pas seulement l’intégration de la publicité mais véritablement son contenu et sa conception graphique. Souvent ces bannières manquent de qualité, de pertinence et d’ingéniosité qui reflète une culture graphique modeste ou un manque de confiance entre les graphistes et les marketeux. Dans les années à  venir nous verrons de plus en plus d’interactivité publicitaire s’imposer dans notre quotidien comme l’on déjà  compris certaines marques afin de se différencier de leurs concurrents.

Porte d’entrée interactive sur Design.2803.com

Pub et contenu, une cohabitation est-elle possible ?

Ergospeed #04 : Fnac.com

Logo_Fnac

La semaine dernière la Fnac a mis en ligne la refonte de son site e-commerce. Une surprise qui introduit des nouvelles fonctionnalités, des nouveaux services, une nouvelle structure accompagnée d’un design sans grande innovation mais qui respect la charte graphique de la marque.

Le moins de clic possible

Fnac_rollover

Parmi les nouveautés de ce site, la Fnac à  semble-t-il essayé de limiter le nombre de clic. Par exemple, lors du chargement de la page d’un des sous-menu de la rubrique « les services », les modules de navigation situés dans la colonne de gauche ont une particularité novatrice : ils s’ouvrent dès le rollover de la souris. Cette fonction permet une navigation plus fluide, rapide, douce et surtout instantanée. La présence de « symbole » ou « picto » similaire à  des boutons de navigation d’une application sont présent pour manifester à  l’utilisateur leurs états actifs ou pas. Ils ne sont pas forcément utiles pour les modules de navigation, mais plus pour le bloc central.

Malheureusement, cette navigation ne se retrouve pas sur tout le site. Ce choix d’utilisation du rollover est principalement utilisé dans la rubrique « les services ». Aussi bien dans les modules que dans le bloc central qui illustre les prestations de la Fnac. Dommage !

Notons que le module « et aussi », qui est de la publicité pour la Fnac, reste toujours ouvert.

Utilisation de Flash

flash_fnac
Certaines rubriques ont comme introduction une animation réalisé sous Flash. Même si ce parti pris est sans doute pour impressionner l’utilisateur afin de lui offrir un site conviviale, attractif et ludique, ces présentations animées sont inutiles et font perdre du temps. Toutefois, les webdesigners ont tout de même pensé aux utilisateurs avertis et pressés : un sous-menu identique aux rubriques contenues dans l’animation est présent juste au-dessus. Ouf !

Résumé

comparaison des sites, avant - après

  • Un menu plus concis et explicite
  • Une meilleur hiérarchisation et organisation du contenu. Une structure identique des pages mais pas dans sa mise en forme : le site est parfois centré ou élastique. Bizarre ?
  • Le moteur de recherche est assez bien mis en avant au centre et juste en-dessous du menu. Toutefois ce dernier n’est pas omniprésent dans toutes les rubriques et cela est un gros problème
  • Remarquons les 2 boutons « enfants » et « voyages » juxtaposés au moteur de recherche dans la rubrique « produits » : leur positionnement n’est peut-être pas un choix judicieux. Impression de flottement dans la colonne de droite et d’incohérence face à  la structure de la page. Même s’ils sont toujours présents, pourquoi ne figurent-ils pas dans le sous-menu ?
  • Une présence importante de vidéos qui servent à  guider l’utilisateur sur certains services.
  • Un design plus en volume : la mode du Glossy est encore passé par là  !

Conclusion

Une refonte bien réussi avec une nouveauté qui n’est pas assez mis en avant : les flux RSS. Des abonnements par rubriques et catégories sont disponibles. Mais à  quand un flux RSS par artiste, par avis des consommateurs sur un produit ou pour la FnacLive tout simplement ?

Ergospeed #04 : Fnac.com

Approche basique de l’accessibilité

Illustration Accessibilite

Enfin j’ai pris le temps de m’intéresser à  l’accessibilité. En cherchant sur le net les définitions et des exemples de méthodologie pour réaliser des tests d’accessibilité, je suis tombée sur les billets de Roger Johansson sur Pompage.net. Ces explications et son approche m’ont été d’une grande utilité pour comprendre l’importance de l’accessibilité. Je me suis permise de faire une synthèse de ces 3 billets afin de pouvoir faire un test rudimentaire sur mes prochains Ergotest. « Test rudimentaire » ? Oui, car vu l’étendu, l’évolution et les différentes approches de l’accessibilité… Cela est impossible pour ma part de m’y consacrer à  plein temps.

« Mettre le Web et ses services à  la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. » Tim Berners-Lee directeur du W3C.

1. Validation de la structure

  • CSS et (X)HTML : L’utilisation du CSS et du (X)HTML permet de séparer la structure du contenu. Cela permet d’avoir une rigueur et une sémantique utilisant des balises qui facilitent l’accessibilité du site web. Un code valide W3C est important pour assurer un site aux standards mais cela ne signifie pas pour autant son accessibilité à  certaines déficiences visuelles. Toutefois, le premier pas est déjà  là  !
  • Eviter les frames (cadres) : L’utilisation des frames fait perdre toute signification et hiérarchisation visuelle du contenu d’un site web. D’un point de vue d’utilisabilité, les frames sont inefficaces et risque de contraindre certain utilisateur lambda. Je vous invite à  lire le billet « Pour en finir avec les cadres » de Denis Boudreau sur OpenWeb qui explique davantage ce problème.
  • Utiliser les tableaux : Les tableaux ne doivent pas être utilisés comme élément de mise en page. Leur principale fonction est d’afficher des données tabulaires. Le W3C déconseille l’utilisation de table pour les mises en pages mais ne l’interdit pas forcément : une page construite d’un tableau peut-être valide en XHTML Strict.

2. Vérifier la sémantique du code

  • Désactiver les CSS : La sémantique est très importante. Elle permet de présenter le contenu selon sa priorité dans la page. Pour que cette page soit accessible, elle doit être hiérarchisée, cohérente et avoir une structure lisible. Les moteurs de recherche facilite leur indexation grâce aux balises sémantique. Une des méthodes rudimentaires pour vérifier la sémantique est la désactivation du CSS d’un site. Si la lecture de la page est cohérente alors les balises de type titre (h1 à  h6), listes (ul, li…), etc. sont utilisées correctement.
  • Comment faire ? Désactiver le CSS grâce à  l’extension Web Developer pour Firefox.

3. Image, texte et contraste

  • Images et texte alternatif : Le texte alternatif contenu dans l’attribut alt (obligatoire pour les balise img et area) sert à  renseigner l’utilisateur sur le contenu de l’image lorsqu’elle ne s’affiche pas. Cet attribut se doit d’être rempli correctement et le plus logiquement possible par rapport à  son contenu respectif.
  • Augmenter la taille du texte : La taille du texte doit toujours être spécifiée dans l’unité « em » ou en « % ». Cela permet un texte redimensionnable avec tous les navigateurs. Si l’unité est mentionnée en pixel, les utilisateurs d’Internet Explorer sur Windows devront se servir des préférences de l’application pour modifier la taille du texte.
  • Le contraste des couleurs : Si le contraste des couleurs entre le texte et son arrière-plan n’est pas assez tranché, les utilisateurs auront des difficultées à  lire le contenu.
  • Comment faire ? Pour effectuer des tests sur les couleurs et contrastes, vous pouvez utiliser : Color Contrast Check, qui vérifie les couleurs du premier plan et d’arrière-plan. Il existe aussi une extension Firefox « Color Contrast Analyser« . Sinon, il y a aussi Graybit.com, qui bascule une page HTML en niveau de gris.

P.S: A lire aussi « 36 critères d’accessibilité qui comptent pour le référencement » de Sébastien Billard.

Approche basique de l’accessibilité

Ergospeed #03 : Box.net

box_logo
Situé en Californie à  Palo Alto, Box.net permet depuis mars 2006 à  plus de 1.000.000 membres de stocker, de partager 1 Go de données en ligne et gratuitement. Ce service est très utile grâce à  sa simplicité d’utilisation et la possibilité de partager ses données avec des tiers.

Box_HomePage

Navigation en Drag & Drop

box_presentation_fichier

  • Lors du rollover un bouton apparaît pour signaler la présence d’un menu contextuel correspondant à  la fonction du clic droit de la souris
  • Choix d’une présentation en ligne ou en icà´nes des fichiers uploadés
  • Interface simple, épurée et claire utilisant la complémentarité de 2 couleurs : orange et bleu.

Box_Etapes Upload
Afin d’uploader un fichier dans le dossier créé, Box.net propose 2 possibilités d’action s’ouvrant dans un pop-up :

    Méthode « traditionnelle »

  • Bouton « Ajouter des fichiers » : Ouverture d’un pop-up permettant de naviguer dans les dossiers de son ordinateur.
    Méthode « Drag & Drop »

  • Ce lien ouvre un pop-up contenant une application en Java. Elle permet de glisser-déposer les fichiers désirés. L’upload de ces fichiers est facile d’utilisation et compréhensible grâce à  cette application offrant une navigation instinctive et pratique.

box_draganddrop
Cette pratique du drag & drop se retrouve pour le rangement et la classification des fichiers dans le compte de l’utilisateur.

Partage des fichiers

box_ partage
Comment partager ses fichiers avec des tiers personnes ? Pas plus simple : Box.net permet de se logger à  ses différents comptes mails o๠tous les contacts de l’utilisateur apparaîssent sous la forme d’une liste. Une case à  cocher, un champ texte à  remplir, un bouton de validation à  cliquer et la demande de partage est envoyée. Attention, pour le compte hotmail, impossible d’avoir une adresse « hotmail.fr » seul le « .com » est possible.

Widget
Possibilité de créer un widget d’un dossier que l’on souhaite partager sur son site web. Exemple ci-dessous :

  • La présence du bouton Menu reste fidèle à  la présentation du site ou du menu contextuel des fichiers uploadés
  • Les pictos illustrant les rubriques sont assez explicites
  • Une preview très utile présentée sous forme de player vidéo
  • Ce widget est le reflet de Box.net par son design épuré et efficace, son homogénéité de navigation qui est similaire à  celle du site web. Toutefois, la notion de drag & drop n’existe pas pour les fichiers téléchargeables du widget

Conclusion

Je conseille vivement ce service pour sa simplicité, ses possibilités de partage de fichiers que ce soit sur le site, à  aide du widget et maintenant grâce au module Firefox Universal Uploader.

Ergospeed #03 : Box.net

Ergotest #02 : Podemus.com

Voici enfin le deuxième Ergotest ! Celui-ci analyse le site Podemus, le média francophone du podcast audio et vidéo. Suite à  plusieurs emails de conseils, de recommandations de votre part (un grand merci au passage !), j’ai modifié certains critères de mise en forme et d’organisation. Je n’ai pas corrigé le premier ergotest afin de pouvoir constater l’évolution des billets au fil du temps. Pourquoi Podemus ? Etant friande de podcast, mais les écoutant principalement sur mon Netvibes ou iTunes, je me suis demandée pourquoi n’ai-je jamais adhéré à  Podemus qui est pourtant un site à  débordant de contenu. J’ai trouvé ma réponse dans cet Ergotest.

A propos de Podemus

Podemus_logo

Lancé en septembre 2005, Podemus est le premier portail des podcasts audio et vidéo francophone. Créé par Bertrand Lenotre et Ablaze, Podemus est un annuaire o๠l’utilisateur peut écouter, visionner, s’abonner, télécharger et effectuer des recherches par thèmes ou par mots clés. Une classification allant à  plus de 100 catégories est disponible pour que l’utilisateur puisse personnaliser sa liste de favoris. Podemus propose aussi un service d’hébergement destiné aux podcasteurs. Plusieurs formules sont proposées, dont une solution gratuite limitée en volume de stockage ainsi que deux formules payantes.

Page d’accueil

Podemus_HomePage

01 Point d’entrée principal pour Podemus, sa page d’accueil. Elle correspond à  l’espace personnalisable de l’utilisateur. Il est important que le logo soit toujours présent : il représente à  la fois le lien vers la page d’accueil et la marque du service que l’abonné utilise. Le logo est accompagné de son slogan ce qui identifie de suite la fonction du site. Le dégradé composant l’entête du site dirige notre regard du logo vers le menu et inversement. Cet élément est inconsciemment un guide visuel qui délimite aussi le haut de la page de son contenu. Notons l’absence du pied de page et de liens utilitaires du type « contact », « mentions légales », « à  propos »… L’utilisateur les trouvera dans le sous-menu de la rubrique « Aide » après plusieurs secondes de recherche. Tic-tac, l’heure tourne !

02Menu

  • A quoi sert le drapeau français ? Cet élément graphique obstrue la lisibilité du menu par son emplacement et son manque d’utilité : le site n’existe dans aucune autre langue. Est-il un indice pour signaler à  l’utilisateur qu’il se situe sur un site francophone ?
  • Rien n’indique à  l’utilisateur s’il est connecté. Son identifiant n’apparaît pas. Le seul signe lui permettant de le deviner est le lien « déconnexion ».

podemus_menu

  • Le sous-menu des rubriques principales comporte le double du nombre de clic nécessaire. C’est-à -dire : après un clic sur un bouton de la barre principale (ex: « mon espace« ), le sous-menu apparaît dans une fenêtre. A chaque accès d’une rubrique du sous-menu, la fenêtre disparaît. L’utilisateur perd donc du temps à  chaque clic quand il souhaite retourner au sous-menu d’une rubrique. Il aurait été plus judicieux d’utiliser un menu dont le rollover fait dérouler le sous-menu de la rubrique en question. Une petite incohérence se remarque dans la fenêtre du sous-menu : le bouton de fermeture (la croix) se situe à  gauche de la fenêtre et non à  droite comme sur l’ensemble du site.
  • L’utilisateur pourrait se servir de la flèche de navigation située dans l’angle droit en haut du module. Elle permet de retourner à  la sous-rubrique de gestion de son profil (rubrique « mon espace » seulement). Cette fonction n’est pas mise en valeur par sa petite taille, son emplacement et le seul sens de navigation qu’elle indique. L’utilisateur pourrait douter de sa fonction première. Comme cette flèche, les titres des modules sont très mal signalés.
  • Remarquons le bouton fermeture qui pointe vers la page d’accueil. C’est une fonction originale pour un site web car elle adapte un standard applicatif à  un lien hypertexte.

Podemus_navigation

  • Mon profil : Les illustrations des avatars par défaut sont un peu désuet. Il y a répétition des flux RSS. Une incompréhension de l’utilisateur pourrait se manifester lors du choix du flux : Lequels choisir ? That’s the question.

Podemus_profil

  • Mon blog : Possibilité de se créer un blog WordPress, hébergé par Podemus.
  • Publier un podcast : Cette notice manque de lisibilité. La taille du texte est trop petite, un rollover est obligatoire sur les images pour pouvoir les lire, problème de hiérarchisation des étapes.
  • Mes Stats : Il est intéressant pour l’utilisateur ou le podcasteur d’avoir accès à  ses statistiques qui permettent de savoir l’évolution de son profil.
  • Mobile : L’utilisateur peut enregistrer directement des podcats audio par téléphone. Le manque d’information sur cette rubrique ne permet pas d’avoir totalement confiance : combien coûte l’appel ? Etc.
  • Régie : Un clic pour rien. Cette partie devrait être dans la rubrique « mon profil » car elle est destinée aux podcasteurs en contrat avec la régie de Podemus.

Proposer un flux

Podemus_flux

  • Apparition d’une fenêtre nous proposant l’ajout du flux RSS. Ici, test avec la webradio KillTheFM.net.
  • Une page apparaît avec un formulaire descriptif à  compléter. Après l’ajout de l’URL du site, le formulaire est dupliqué 4 fois. S’agit-il d’un bug ? Car si l’utilisateur ajoute le lien du flux directement, il n’y a aucun problème.
  • Le formulaire proposé contient une sélection de catégorie pour la classification du flux. Un choix impréssionant de catégories, très bien répertorié pour l’utilisateur. Lorsque le premier choix est fait, un deuxième est possible et ainsi de suite. Cela permet une meilleure indexation du flux sur le site de Podemus.
  • Le seul regret est la validation du flux qui n’est pas immédiat. L’équipe de Podemus doit le valider. Cela est tout à  fait compréhensible dans une démarche de qualité.

Aide

    Cinq rubriques sont proposées en tant que sous-menu : Guide, forum, le blog, FAQ, contact.

  • Guide : ouverture de la page d’accueil avec le module « visite guidée ». Cette partie n’a aucune utilité et devrait peut-être se trouver dans la rubrique FAQ ?
  • La FAQ répond à  la plupart des questions liées au podcasting. Notons que l’apparition des réponses se font directement sous la question sans rechargement de la page. Ce système permet une meilleure consultations à  la fois au niveau des questions mais aussi des réponses. L’utilisateur n’est pas confronté à  un pavé de texte démotivant.
  • La partie contact devrait se trouver dans un pied de page ou dans le menu principal. Ce n’est pas très judicieux de l’avoir ajouté dans la rubrique « Aide ». Cela pourrait constituer un perte de temps pour l’utilisateur.

Recherche

    Podemus_bouton recherche

  • Le champs de la recherche est trop petit comme le bouton carré de validation. L’ensemble du site est conçu sur des formes arrondies, dommage que ce ne soit pas le cas pour le bouton « ok ».
  • La présentation des résultats est pertinente et claire : énumération des podcasts les uns en-dessous des autres, présence des logos permettant un repère visuel direct, fond blanc pour une meilleur lisibilité, séparation de chaque résultat par un trait fin correspondant à  la charte du site (dégradé allant du bleu au blanc).
  • Notons que les podcasts audio et vidéo ne sont pas assez repérables. Leurs pictos sont trop petits.

Podemus_Recherche Resultat

  • La numérotation des pages et le lien « suivant  » se situent seulement en bas de page. Cela éviterait des scrolls à  l’utilisateur si ces liens étaient présent aussi en haut de page.

03 Le module « Visite Guidée » décrit visuellement les 4 étapes d’inscription aux services Podemus. Chaque bloc affiche un encadré explicatif juste en-dessous. Efficacité et facilité sont les mots qui traduisent cette présentation.
Podemus_VisiteGuidee

04Mon média

Podemus_Mon media

  • Afin de permettre à  l’utilisateur de conserver et d’écouter régulièrement ses émissions préférées, le module « mon média » permet de sélectionner des émissions par leur avatar et de les glisser-déposer dans ce module qui les enregistre instantanément. Notons une petite incohérence dans les titres de ces modules : le module « mes dernières émissions » sur la page d’accueil contient le contenu de « mon média ». Pourquoi la page « mon média » ne s’appelle-t-elle pas « mes dernières émissions » ou inversement ?
  • Enumération des favoris avec la possibilité d’écouter les dernières émissions qui apparaissent lors du clic sur la flèche (situé entre l’avatar et le nom). Attention, la croix au bout de l’encadré n’est pas la fermeture de la fenêtre ouverte, mais la suppression du média parmi les favoris. Pour fermer, il faut re-cliquer sur la flèche d’ouverture. Cette procédure n’est pas évidente pour l’utilisateur lambda.
  • Possibilité d’écouter les podcasts directement sur le site grâce au player audio qui apparaît au même emplacement que les sous-menu. Lorsque l’utilisateur décide de naviguer sur le site, le player ne continue pas la diffusion. Il se stoppe dès que l’utilisateur charge une autre page. Cela freine considérablement la navigation sur le site en parallèle de l’écoute. Pour un podcast vidéo, le player s’ouvre dans une fenêtre pop-up qui n’indique pas à  l’utilisateur ce qu’il visionne. Le champs « envoyer à  un ami » ne se voit pas : typo blanche sur fond clair.
  • Les logos des différentes applications sont très mal intégrés : ils sont simplement juxtaposés les uns à  cà´té des autres, situés juste en dessous du flux RSS (qui est en doublon d’ailleurs)

050607Personnalisation et navigation
La réorganisation de la page se réalise grâce au « Drag and drop » des modules comme un agrégateur de type Netvibes. Cependant, le site n’est optimisé que pour la résolution 1024×768 ce qui restreint l’agencement de la page. Les modules ne sont pas redimensionnables et le changement de couleur se limite à  4 nuances. La disposition ainsi que le glissé-déposé sont assez archaà¯que dans leurs fluidités et leurs aimantations qui ne fonctionnent pas forcément.

Avatar_etapesLe module « nos recommandation », contenu sélectionné par l’équipe de Podemus, permet à  l’utilisateur de découvrir des podcasts inattendus. Ces podcasts sont présentés par leurs avatars. Aucune description, généralement l’image parle d’elle-même. Il est possible d’écouter les podcasts directement sur la page d’accueil grâce au bouton play qui apparaît lors du rollover.

Podemus_PlusdeChoixSi l’utilisateur supprime un des modules de sa page d’accueil, aucune liste est apparente pour faire réapparaître ce dernier. En fouinant bien, l’utilisateur trouve l’onglet dans le module « mon média » : le bouton « + de choix« . En cliquant dessus la liste en question apparaît. L’utilisateur pourrait ne pas deviner que « + de choix » correspond aux modules disponibles qui lui permet de personnaliser sa page. Lors d’une sélection dans cette liste, le module apparaît en pied de page. L’utilisateur ne voyant rien apparaître en haut de page, pourrait imaginer plusieurs hypothèses : « j’ai mal cliqué », « cela ne fonctionne pas », « pourquoi rien ne se passe », « un bug ? ». Notons que si l’utilisateur sélectionne un module déjà  existant sur sa page d’accueil, Podemus l’affiche en double.

08L’utilisateur doit scroller pour atteindre ces badges car ils sont situés sous la bannière de pub, en bas de page 🙁

Page d’une émission

Podemus_emission

01 Le module « mon média » est toujours présent et permet une facilité à  l’utilisateur de s’abonner à  des nouveaux podcasts.

02 Il est regretable que le nom du podcasteur ne soit pas assez mit en avant. Si l’utilisateur écoute un podcast dont le nom du podcasteur n’apparaît pas dans son avatar, il ne le voit pas du premier coup d’oeil. Pour pouvoir lire les commentaires, la page se recharge donc si l’utilisateur est en train d’écouter l’émission… tout se stoppe.

Dommage que la description de l’émission, le lien vers le site, le lien vers les commentaires, les étoiles permettant de voter et les tags soient séparés. Il y a un problème de hiérarchisation du contenu. Le langage familier des infobulles apparaissant lors du rollovers sur les étoiles sont précis et pertinents ce qui augmente la proximité avec l’utilisateur. Les avatars sont de bonne taille, pas trop grand ni trop petit. L’effet ombré les met en valeur juste comme il faut.

0306 La bannière de pub 160x600px se substitue au module : « vous aimerez aussi ». Toutefois, une bannière de pub ou de partenariat 300x250px est incluse dans le module du podcast sélectionné. Dommage, car cette dernière est mal intégrée.

04 Toujours le même problème pour ces visuels, ils sont entassés.

05 Lors du clic sur « Donnez votre avis » un champ de saisie apparaît (sans doute un peu trop haut). Si l’utilisateur décide de ne rien écrire, il n’a pas la possibilité d’annuler. C’est en tâtonnant la souris que l’utilisateur trouve la fermeture : re-clic sur le bouton « donnez votre avis ». Autrement, la date de publication est cependant séparé de son titre 🙁

Cette page présente les 5 derniers podcasts. En fin de page le lien « tout afficher » déroule les archives du podcasteur. Dilemne : quand tous les podcasts sont affichés, un long scroll de l’utilisateur est envisageable. La présentation actuelle ne permet pas un accès rapide aux archives. L’affichage du titre avec sa date de publication ainsi qu’un bouton comme dans la partie média (bouton flèche) peut-être une des solutions pour éviter une perte de temps à  scroller.

Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Couleurs pétillantes
– Design épuré permettant une meilleur lisibilité grâce au dégradé et à  la présence du blanc
– Bonne mise en valeur des avatars
– Taille du texte trop petit
– Titre pas assez visible
– Pictos audio et vidéo trop petit
– Manque de personnalisation des modules
3/5
2. Efficacité
[pertinence de l’information]
– Information instantanée grâce à  l’Ajax
– Classification des podcasts très pertinente
– Moteurs de recherche efficace
– Manque d’information écrite sur le podcasteur 4/5
3. Efficience
[rapidité de navigation]
– Liens avatars
– Le player vidéo
– Modules illimités sur la page d’accueil
– Trop de clic pour le menu
– Impossible d’écouter un podcast audio en naviguant sur d’autres pages du site
– Informations contextuelles illisibles
2/5
4. Satisfaction – Personnalisation de la page d’accueil
– Accès à  l’information
– Accès à  ses statistiques, à  la création des flux
– Accès aux flux de l’émission en cours d’écoute
– Service gratuit
– Absence d’une application Podemus permettant de lire l’ensemble de ses favoris au lieu de passer par iTunes
– Personnalisation réduite de la page d’accueil
3/5

Conclusion

12/20

Podemus est le seul portail francophone à  réunir autant de podcast audio et vidéo. Une application permettrait de fidéliser l’utilisateur au lieu de l’inciter à  utiliser iTunes qui a dorénavant le monopole. Elle permettrait la lecture continue de l’ensemble de ses favoris. Cela pourrait aussi encourager plus de partenariats avec les webradios, les webtv et les podcasteurs français.

Ergotest #02 : Podemus.com