Conférence sur « Utilisabilité et interfaces riches »

wud-logo
A l’occasion de la Journée Mondiale de l’Utilisabilité, une conférence gratuite aura lieu le 12 novembre 2008 à  partir de 18h30 chez Microsoft. Cette conférence sera sur le thème de « L’utilisabilité et Interfaces Riches« .

Inscription & Programme

Inscription pour assister à  la conférence

Retrouvez ce programme (non-définitif) sur le blog de Fred Cavazza : SimpleWeb.fr

  • 18 H 30 – Accueil et introduction
  • 19 H 00 – Utilisabilité et interfaces riches par Frédéric Cavazza – Genèse des RIAs, panorama des différents interfaces et terminaux, enjeux et perspectives.
  • 19 H 20 – RIA et systèmes de navigation par Patricia Gallot-Lavallée – Définition, exemples de systèmes de navigation riches, apports, impacts et meilleures pratiques, quel héritage à  retenir des interfaces de jeux vidéo.
  • 19 H 40 – RIA et applications métiers par Mathieu Isaia – Avantages / inconvénients des applications en ligne, particularité des applications métiers, exemples et retour d’expérience, méthodes et outils de conception.
  • 20 H 00 – Pause
  • 20 H 10 – RIA et sites grand public par Toufik Lerari – Les contraintes des sites grand public, bénéfices et inconvénients des technologies riches, retour d’expérience et études de cas.
  • 20 H 30 – RIA et expérience utilisateur par Sam Woodman, Michael Chaize et Thibault Imbert (Adobe) – Comment les RIAs transforment l’expérience utilisateur – étude de cas, quels impacts sur la structuration des sites web, quelle démarche pour concevoir des interfaces performantes ?
  • 20 H 50 – Une approche holistique des interfaces riches par Christophe Lauer et David Talaga (Microsoft) – Comment les RIAs transforment l’expérience utilisateur – étude de cas, quels impacts sur la structuration des sites web, quelle démarche pour concevoir des interfaces performantes ?
  • 21 H 10 – Cocktail et remerciements
  • 21 H 30 – Fin

Lieu : Microsoft Business Center, 148 rue de l’Université, 75007 PARIS

View Larger Map

A lire aussi :

Conférence sur « Utilisabilité et interfaces riches »

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

Ergotest #06 : Asphalt 4 sur iPhone (Gameloft)


Il y a quelques jours de cela, j’assistai au FanDay Gameloft qui avait pour but de présenter 3 nouveaux jeux de leur gamme sur iPhone et iTouch. Développeur, designer et marketeux étaient présents pour nous faire une démonstration de Asphalt 4, Real Football 2009 et Block Breaker Deluxe 2. Un grand remerciement à  Doudou qui m’a permis d’assister à  cet évènement et à  Cyrille de Gameloft pour toutes ces explications.

A propos

Logo Gameloft


MAJ : 16 janvier 2009 – Selon une étude menée par le site PocketGamer.biz, Gameloft a été le meilleur éditeur de jeux mobiles en 2008 pour la qualité de ses jeux. Les jeux Gameloft sont en tête des classements des sites spécialisés depuis 2003.
Lire le communiqué de presse

Petite sÅ“ur d’Ubisoft, depuis 1999, Gameloft édite et développe des jeux vidéos sur mobiles et consoles. En 2001, elle se voit cotée en Bourse et se positionne comme une entreprise innovante dans son domaine. Aujourd’hui, Gameloft vend en moyenne 3 jeux par seconde dans le monde et comprend environ 4000 employés basés dans une vingtaine de villes telle que New York, Mexico, Bogota, Paris, Londres, Copenhague… Plus d’infos

Asphalt 4 Elite Racing (v1.2.0)

Asphalt

Les critères d’utilisabilité d’un jeu-vidéo ne sont pas si différents d’une interface web. D’autres facteurs viennent se greffer et prennent en considération des émotions typiquement liées au jeu : immersion, joie, challenge, nervosité, fierté… Le jeu a pour vocation d’être ludique et l’expérience utilisateur entraine un apprentissage du jeu différent dans son utilisation et son approche.

Introduction & Chargement

Une vidéo fait office d’introduction (40s.) et se joue à  chaque lancement de l’application. Malgré sa magnifique réalisation, elle devient répétitive. Heureusement, l’utilisateur peut la zapper… Nombreux sont les jeux qui obligent l’utilisateur à  visionner une introduction inlassablement longue. Ici, Gameloft nous laisse le choix. Ouf !

Asphalt Loading Lors d’un chargement, chaque fin de loading doit être validé par l’utilisateur par un « Touche l’écran pour continuer ». Nous pouvons avoir deux points de vue différents sur cette action :

  • L’application demande l’autorisation à  l’utilisateur de passer à  une étape suivante. Donc, le joueur contrà´le ses actions.
  • Cela peut-être aussi freinant car l’application implique une action d’interaction en plus qui peut ralentir l’utilisateur dans son usage et son enthousiasme.

Pendant le chargement, notons la présence de tips (accompagnés, bien sûr, d’une fille à  forte poitrine. Forcément, nous sommes dans un jeu de course, donc qui dit Auto dit GrolOlO). Ces astuces didactiques permettent de faciliter l’apprentissage du jeu au joueur.


Graphisme & Interface

D’un point de vue esthétique, Asphalt est assez bien conçu : les décors et véhicules sont réalistes et l’authenticité du jeu se concrétise grâce à  la présence des licences telles que Mini, BMW, Mercedes, Ducati… La satisfaction du joueur provient des récompenses qu’il acquiert au fur à  mesure des étapes franchies. Grâce à  l’acquisition de ces licences, Gameloft offre à  ses joueur des récompenses gratifiantes avec des nouveaux modèles de véhicules customisables, mais aussi des circuits, des accessoires, des filles, etc.

Attention de ne pas systématiquement récompenser le joueur avec des gains non-appropriées à  ses compétences. Cela pourrait affaiblir sa motivation face au challenge. Le jeu se doit d’évoluer avec le joueur avec des paliers de difficultés de telle sorte que le challenge soit maintenu tout du long.

En ce qui concerne les pictogrammes et leurs agencements, il y a certaines incohérences qui peuvent nuire à  la compréhension de l’interface :

Gameloft Asphat icon

Dans les entêtes des rubriques, chaque picto est trop éloigné de leur intitulé et ne permette pas une reconnaissance visuelle. Surtout quand le « bouton retour » s’intercale entre les deux. De plus, ce dernier n’est pas visible au premier coup d’Å“il et l’absence d’intitulé le rend incompréhensible. Son graphisme est inadapté car il est trop ancrée dans notre quotidien pour un usage ayant l’action « Repeat » d’une musique ou « re-chargement » d’une page web.

Compréhension de l’interface

L’absence de flèches directionnelles dans certaines rubriques (aide, choix des filles, à  propos, tuning…) occasionne parfois des incompréhensions du joueur. Même si cela va de soi pour les utilisateurs d’iPhone que toute la navigation se fait avec le Touch, un petit indicateur de direction ne fait jamais de mal 😉

Le but d’un jeu est de captiver l’utilisateur en l’immergeant dans un univers. Le jeu se doit de le tenir en haleine tout au long d’un fil conducteur sans perturber sa perception du jeu et l’interactivité qui lui offre. Les menus, options, éléments graphiques de l’interface doivent être suffisamment compréhensibles et facile d’utilisation pour laisser au joueur une totale attention au jeu. Le moindre obstacle peut être fatale.

Ici, par exemple, le volume et les 4 modes de visualisations :

Asphalt Volume Option du son
Sur chaque option du son, il manque un bouton on/off qui permettrait au joueur d’être plus rapide dans ses actions de configuration. Ces boutons sont des raccourcies qui amélioreraient l’usage du volume de la musique et des effets sonores.

Quatre mode de visualisation possible
L’absence de prévisualisation des 4 modes de caméras lors de leur sélection est un énorme frein pendant une partie. Cela ralenti et déstabilise le joueur lors de son changement de caméra en plein course. Absence de raccourcies sur l’écran du jeu.

3 modes de navigation lors du jeu

Grâce à  l’interface de l’iPhone, les concepteurs de jeu peuvent envisager de nouveaux modes de navigation et d’interactions. Ici, Asphalt en comporte trois :
Asphalt Navigation

Le coup du volant : Difficile à  manipuler car seul le pouce gauche doit interagir sur le volant afin de diriger au mieux l’auto. Il rappelle la manette d’une console avec son stick analogique.

Touch My Screen : L’interaction se fait en touchant le coté gauche et droit de l’écran. Personnellement, je n’y arrive pas du tout mais des amis n’utilisent que ce mode… donc…

Sans les doigts : L’utilisateur manipule directement l’iPhone grâce à  l’accéléromètre pour guider le véhicule. Le mode que j’utilise le plus et même dans le métro j’y arrive !


Tableau récapitulatif

Fonction Les + Les – Note
1. Design graphique – Design réaliste et adapté à  la cible
– Icà´nes compréhensibles
– Interaction facile avec des boutons de dimensions adapté au Touch
– La typographie de l’interface est parfois difficile à  lire 4/5
2. Efficacité
[pertinence de l’information]
– Accès à  l’info rarement insatisfaisant
– Hiérarchisation des rubriques compréhensible
– Absence d’accueil (icon course = HP : incompréhensible)
– Mode de visualisation
– Option volume
3/5
3. Efficience
[rapidité de navigation]
– Accès aux rubriques/option facile
– Les 3 modes fonctionnent assez bien en format portrait ou paysage
– Le jeu saccade souvent et rame au début de la course
– Le temps de chargement est assez long et doit être validé à  chaque fois
– Absence de repère visuel directionnel pour certaine rubrique
2/5
4. Satisfaction – Immersion dans le jeu grâce aux graphisme et difficultés des courses
– Récompenses gratifiantes
– Mode multi-joueur fonctionnant assez bien en wifi
– Saccadement du jeu
– Interface qui freine le joueur lorsqu’il décide de changer de configuration
4/5

Conclusion

13/20

Asphalt est un jeu au graphisme et réalisme assez bien réussi o๠le challenge est évolutif (circuits et voiture à  débloquer, fille à  GrolOlO et des kit de Tunning à  gagner). Grâce à  ce jeu, je redécouvre le plaisir de la conduite et le cà´té grande poursuite à  l’américaine avec hélicoptère. Asphalt me permet tous les jours, d’exploser des taxis, des voitures et d’abuser de la nitro dans le métro. Depuis que j’ai récupéré un iPhone, je me suis remise à  jouer et je n’arrête plus. L’AppStore est tout de même une très bonne plateforme de distribution d’applications/de jeux qui permet aux développeurs d’innover et de contribuer à  la communauté. Ma conclusion ne finit pas par des questions sur l’avenir de l’iphone comme console car dernièrement j’ai eu une forte discussion avec des amis qui considèrent l’iPhone comme un objet de consommation ostentatoire qui ne pourra jamais concurrencer une DS ou PSP.

Donc… 🙂

Les éditeurs de jeux devraient-ils commencer à  se méfier du pouvoir de la Pomme ? L’iPhone ne va-t-il pas de devenir l’objet unique qui risque de faire de l’ombre au console portable d’ici quelques années ?

Ergotests précédent :

Ergotest #06 : Asphalt 4 sur iPhone (Gameloft)