Ergospeed #25 : Bounceapp.com

Découvert cette semaine sur le blog de Korben.info,
Bounceapp.com est un site qui risque de vous changer la vie !

Bounce vous permet d’annoter, de commenter ou d’encadrer TRES FACILEMENT et RAPIDEMENT des éléments précis d’un site web. Ensuite, vous pouvez partager vos notes à  vos collègues ou clients avec une URL publique ou privée.

Ce site est vraiment simple et instinctif à  utiliser, à  testez au plus vite !
> Bounceapp.com


Ergospeed #25 : Bounceapp.com

Ergospeed #24: DiggLabs 365, navigation radiale / circulaire

Découvert ce mois-ci sur Hebiflux, le DiggLabs 365 qui permet de consulter le site officiel sous une navigation nouvelle : visualisation des meilleurs Diggs de l’année, du mois ou de la journée. Une interaction avec l’internaute assez instinctive, simple et efficace.

Hiérarchisation

L’ouverture du « menu » commence par l’année puis par un sous-menu proposant les mois et pour finir les jours. A chaque sélection les « Diggs » (les informations votées par les utilisateurs) se mettent à  jour selon leurs popularités. Noté la segmentation trimestrielle des mois par couleur qui permettent à  l’internaute d’avoir un repère visuel et temporel pour chaque Digg.

  • 1/ Le menu est basé sur l’année, repère temporel pour l’internaute
  • 2/ Le second niveau permet d’approfondir l’actualité par mois
  • 3/ 4/ 5 / La zone 3 est le déploiement des Diggs qui sont positionnés (4-5) selon leurs dates, leurs tailles (4-5) qui diffèrent par rapport à  leurs pertinences (votes des internautes)
  • 6/ Le dernier niveau correspond au sous-menu (caché) qui permet davantage de cibler l’information selon un jour précis

Cette vidéo permet de visualiser les différentes navigations expérimentales que propose DiggLabs :

Billets similaires à  une navigation circulaire ou radiale :

Ergospeed #24: DiggLabs 365, navigation radiale / circulaire

Ergospeed #23: Google, nouvelle interface

Pour les personnes qui me suivent sur Twitter, vous avez découvert, début de semaine dernière, le nouveau design et les nouvelles fonctionnalités de Google.com. Retour sur cette info.

Page d’accueil

Avec cette nouvelle version, encore plus épuré, nous supposons que le moteur de recherche doit être encore plus performant qu’aujourd’hui car les ingénieurs de Google ont décidé de supprimer les options « Recherche avancée » & « Outils linguistiques » sur la page d’accueil. Ils se sont (encore plus) focalisés sur la fonctionnalité essentielle que propose Google depuis le début : un moteur de recherche. D’o๠la présence du champ de recherche et de ces 2 boutons habituels bien voyant avec une couleur pêchue (le bleu « lien » traditionnelle).
google_com

Maj : 4 décembre 2009

Transition en fondu pour insister sur le logo et le champ de recherche.

Page résultat d’une recherche

menu_googleAvec la nouvelle version, nous pouvons constater que les « options de recherche » sont omniprésentes et se présentent dans un module avec plusieurs items illustrés de pictos (comme sur la page d’accueil de Facebook). Je ne pense pas que Google se réfère à  Facebook mais nous ne pouvons pas nier la croissance impressionnante de Facebook depuis c’est 2 dernières années.

Extrait du billet sur les statistique janvier 2009 de l’usage de Facebook via marketing20.fr :

  • Plus de 150 millions utilisateurs actifs.
  • Plus de 700 millions de photos uploadées chaque mois.
  • Plus de 4 millions de vidéos uploadées chaque mois.

stat_facebook

rch_google

Comment accéder à  ce nouveau Google

etape01_google

Grâce aux actualités de Zorgloob, vous allez savoir comment accéder à  cette nouvelle interface :

  • Ouvrez votre navigateur (pensez à  vous délogger de Google)
  • Assurez vous d’être sur l’interface anglaise (voir encadré rose sur l’image)
  • Copiez/collez le code javascript ci-dessous dans votre barre d’adresse et validez.
javascript:void(document.cookie= »PREF=ID=20b6e4c2f44943bb:
U=4bf292d46faad806:TM=1249677602:
LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com »);
  • Rechargez Google.com (et re-basculez éventuellement sur l’interface anglaise)

Attendons maintenant l’accès à  la France…

A lire aussi :

Ergospeed #23: Google, nouvelle interface

Ergospeed #22 : Le FullScreen Deezer, vers un usage tactile

Le 6 novembre dernier, vous avez sans doute constaté les offres de Deezer Premium ainsi qu’une nouvelle fonctionnalité présente dans le player : Le FullScreen (ou le plein écran). Nous avons conçu cette interface pour répondre à  une forte demande de nos utilisateurs qui sont en charge d’animer des soirées mais aussi, et surtout, pour envisager un usage sur des nouveaux supports comme les écrans tactiles.

L’idée vient de Daniel, le fondateur & directeur technique de Deezer, le développement en Flash et Away3D est une réalisation de Loà¯c, développeur Flash. Ce FullScreen v.1 sera amélioré et complété avec des nouvelles fonctionnalités qui arriveront prochainement.

full_screen_track

La sobriété et la simplicité de ce Full Screen est avant tout un moyen d’utiliser les fonctionnalités les plus convoités de nos utilisateurs : leurs playlists, leurs radios et albums favoris, et la liste de lecture courante. Elle reprend l’idée d’un jukebox en évitant une surcharge d’information.

hebiflux_logoJe me permet de reprendre le témoignage de Loà¯c paru sur le blog de Galdric Pons, Hebiflux.com, que je vous invite vivement à  lire en entier. Il aborde ces nouveaux usages en détails : Liant entre supports et usages, mutation, Flash & Silverlight… » Fullscreen Deezer et écrans tactiles

Loà¯c : « En effet ce player fullscreen à  été conçu pour être utilisable dans toutes sortes de conditions : au clavier, à  la souris ou via écran tactile. Le coté écran tactile n’est pour le moment pas très poussé et finalement pour le moment équivalent au mode souris mais les boutons sont suffisamment gros pour tous les utiliser avec un doigt. Mais dès la sortie de Flash Player 10.1 […], je compte bien améliorer l’expérience utilisateur de celui-ci en essayant d’apporter un défilement de la playlist en faisant glisser le doigt comme sur un iphone par exemple et réfléchir à  d’autres fonctionnalités utilisant plusieurs doigts par exemple. »

(Techniquement, c’est Away3D qui a été choisi pour ses performances techniques, même si la documentation est plus fournie chez Papervision. Le choix était aussi de rester dans quelque chose de plus simple pour ne pas surcharger et être trop gourmand en ressources. Dixit.)

Astuce

player_deezer_fs

Ce « full screen » vous permet de visualiser vos playlists, albums et radios favoris ainsi que la liste de lecture courante. Pour activer cette fonctionnalité, vous trouverez le bouton situé dans le player. Grâce aux raccourcis clavier, eux aussi actifs, la navigation est ainsi plus fluide et instinctive.

  • Touche espace : lecture
  • Touche flèche haut : titre passé
  • Touche bas : titre suivant

full_screen_menu

Pour le Deezer Desktop, vous avez plus de liberté grâce aux contrà´les clavier plus nombreux pour les applications Air. Ainsi le player situé en bas de l’écran est contrà´lable grâce au combinaison ctrl + « touche » :

  • Touche entrée permet de valider une chanson pour lancer la lecture
  • ctrl + flèche haut : augmente le volume
  • ctrl + flèche bas : baisse le volume
  • ctrl + touche flèche droite : titre suivant
  • crtrl + touche gauche : titre passé
  • ctrl + espace : pause
  • ctrl + s : active le mode shuffle (aléatoire)
  • ctrl + r : active le mode repeat (répétition)
  • ctrl + m : player en mode muet
  • ctrl + h : active ou désactive le mode HQ

A lire :

Ergospeed #22 : Le FullScreen Deezer, vers un usage tactile

Ergospeed #21 : Totlol.com, une interface qui évolue avec l’âge

totlol_logoDécouvert il y a quelques semaines, ToTLoL.com est un nouveau service vidéo proposé par YouTube mais cette fois-ci destiné aux enfants. Bien sûr, le contenu est filtré et un verrouillage parentale est possible. De quoi rassurer les adultes et d’avoir une garantie sur ce que visionne les enfants.

La particularité de ce nouveau service est son interface qui s’adapte selon l’âge de l’enfant. Les différentes interfaces permettent d’accompagner et de fidéliser son utilisateur dans sa navigation jusqu’à  la transition vers une plateforme vidéo plus commune à  tous comme YouTube.

A quand un service web qui propose des interfaces modulables du plus jeunes âges jusqu’à  nos vieux jours ?

Mode « Tottler » : Tout petit

L’interface Tottler est extrêmement simple : elle propose seulement 20 vidéos optimisées sur la page d’accueil. Ces vidéos sont rafraîchis et mises à  jours quotidiennement. La navigation est limitée au visionnage de la vidéo sélectionnée et à  la vidéo suivante.

toutPetit

Mode « Preschooler » : Enfant d’âge préscolaire

L’interface Preschooler permet d’accéder à  200 vidéos optimisées. La navigation commence a s’étoffer et n’est plus linéaire : l’enfant a accès à  sa liste de vidéos préférées, à  des centaines d’autres vidéos via à  une présentation « light » en mosaà¯que et une pagination unilatérale. (absence de texte)

preschooler

preschooler_02

Mode « Kindergarten » : Jardins d’enfants / Ecole Marternelle

Dans l’interface Kindergarten les fonctionnalités habituelles présentent sur la plupart des plateformes commence à  apparaitre comme la recherche, les collections (chaines), la possibilité d’ajouter ou de supprimer une vidéo de sa liste des favoris (optionnel par les parents dans les « Settings »), les vidéos similaires sous une vidéo en cours de lecture…

kindergarten

kindergarten02

Mode « Young Kid » : Jeune enfant

Les interfaces Young Kid et Tween introduisent une structure sur deux colonnes commune à  YouTube (ou autres plateformes vidéos). L’apparition des fonctionnalités continuent (différents modes de visualisation, le nuage de tag, les informations relatives…) et permettent une transition vers les plateformes communes à  tous.

youngKid

Mode « Tween » : Transition avant l’accès à  YouTube

tween

Ergospeeds précédents :

Ergospeed #21 : Totlol.com, une interface qui évolue avec l’âge

Ergospeed #20 : Converbot (application iPhone)

converbot_iphone
Grande découverte du weekend : L’application iPhone Converbot !
Ce convertisseur est à  la fois efficace, personnalisable et beau, que demander de plus ?

Il permet de convertir la monnaie, les unités de mesure, le temps… grâce à  une interface graphique de qualité et des effets sonores qui accentuent son interactivité.

Orienter l’utilisateur

La première fois que vous ouvrez Converbot, un tips vous invite à  visionner la démonstration qui permet de comprendre en un coup d’Å“il l’usage quotidien de ce convertisseur. Cette démo est vraiment bien réussie et tellement simple qu’elle ne peut être qu’efficace.

converbot

Navigation circulaire ou radiale

converbot ipod

En un coup de pouce vous sélectionnez votre unité grâce à  une navigation radiale. Cette approche assez attractive entre l’utilisateur et l’interaction qui en résulte peut rappeler la navigation de l’iPod. Grâce à  sa rapidité, l’utilisateur comprend directement le sens de lecture circulaire et son fonctionnement avec les différents paliers de sélection.

Sur cette vidéo ci-dessous, vous constaterez la fluidité de cette application dans son utilisation. La proximité et l’interactivité de chaque élément permet une meilleure utilisabilité et un confort d’utilisation provenant aussi de son graphisme et de ses retours sonores.

A tester et vite 🙂

Billets similaires à  une navigation circulaire ou radiale :
converbot_telecharger

Ergospeed #20 : Converbot (application iPhone)

Ergospeed #19 : Un formulaire désastreux – pagesjaunes.fr

Il y a quelques mois de cela Martin, webaaz.com, me contacte pour me signaler « un formulaire désastreux » en terme d’ergonomie. Le temps passe et je n’avais jamais pris le temps d’en faire un billet jusqu’au twit d’@Eco_blog qui me l’a rappelé.

Un formulaire complexe

Connaissez-vous le site recevoirmesannuaires.pagesjaunes.fr ? Ce site permet de se désabonner des annuaires / bottins téléphoniques. Aujourd’hui nous sommes pratiquement tous connectés et à  quoi bon de continuer de les recevoir s’ils nous servent juste de cale porte ou de tabouret.

Lors de l’ouverture de la page, au premier coup d’Å“il l’utilisateur doit se dire : « Chouette, cela va être rapide à  remplir ! » Et là  patatra ! C’est le drame…

page_annuaire

Comme vous pouvez le constater, les champs de saisis sont pré-remplis par leurs intitulés. Lorsque l’utilisateur passe à  l’action, les intitulés disparaissent et malheureusement l’internaute perd tous repères lorsqu’il désire vérifier et relire ses données.

Problématiques rencontrées

Remplir un formulaire est un long processus et un effort pour l’utilisateur. La manière dont il est conçu ne doit pas être un frein. Si le formulaire est court et rapide à  remplir, l’utilisateur ira sans doute jusqu’au bout du processus.

Notons les difficultés rencontrées pour ce formulaire :

  • Lisibilité : Les intitulés doivent rester omniprésent et à  proximité des champs. Ils guident l’utilisateur dans sa tache de saisie. Ils ne doivent pas pré-remplir les champs comme ici.
  • Organisation visuelle : Il n’y a aucune hiérarchisation, ni de sémantique des éléments. Lors de la conception d’un formulaire, la logique et l’organisation des demandes d’informations doivent être structurées selon un degré d’importance. Les champs optionnels ou obligatoires doivent être signalés avec clarté.
  • Rapidité d’exécution et limitation du temps de remplissage : L’utilisateur utilise sa mémoire à  court terme pour des actions instantanées. Le fait que les intitulés sont absents et le format des champs de taille réduite, cela freine et empêche une relecture en un coup d’Å“il des données.
  • Gestion des erreurs : Aucun éléments signalent les erreurs directement dans les champs ou à  proximité. Les erreurs s’affichent en dessous du formulaire dans une liste de taille réduite avec scrollbar. Cela entraine un effort de concentration de l’utilisateur lors de sa relecture et repérage des erreurs.

Ce genre de formulaire est déconseillé et risque d’entraîner la fuite de l’utilisateur. Des champs pré-remplis par leurs intitulés peuvent être utilisés pour des modules de connexion (pseudo/mot de passe) ou un champ de recherche par exemple.

Info écolo, bon à  savoir 🙂

ecologeek

widget_mobile.jpg

Ergospeed #19 : Un formulaire désastreux – pagesjaunes.fr