Conférences Paris-Web : ergonomie, web design, qualité (à Lyon aussi !)

Blog Applibox

Les conférences de Paris Web se sont révélées riches d’enseignement, et nous sommes revenus avec plein d’idées et d’ambitions… pour Lyon !

Deux jours pleins de geeks sympathiques et dynamiques, de l’amour du web, des infos et des tendances, merci Paris web ! Bon… une connexion wifi instable dans la tour IBM de la défense, en revanche, c’est un peu décevant !

Les videos des conférences, ainsi que les slides seront bientôt disponibles sur le site de Paris web, mais voici déjà, très brièvement, quelques idées et pistes que nous avons retenues pour notre agence web lyonnaise.

 Ergonomie : tests utilisateurs

  • Quelques utilisateurs testeurs (3 à 5) peuvent suffire à mettre en exergue 90% des problèmes d’ergonomie (ou pour utliser le barbarisme à la mode « d’utilisabilité ») d’un site. Les panels plus vastes, avec un coût beaucoup plus élevés, ne révéleront que 2 à 3% de plus.
  • Investir 1 000 ou 2 000 euros de plus pour être sûr de la perception utilisateur du site avant son lancement parait plus que judicieux, pour un projet e-commerce, un intranet ou un site de communication important… Nous allons rapidement définir une méthodologie adaptée à notre agence web, inspirée des bonnes pratiques du métier (pas besoin de réinventer la roue) et proposer cette prestation à nos prospects et à nos clients.
  • Plus efficaces que n’importe quel théorie marketing ou d’ergonomie, les tests utilisateurs sont sans appel, et sont les seuls qui permettent de repérer vraiment les problèmes, souvent insoupçonnables même par les professionnels.

Ergonomie : juste l’info nécessaire, au bon moment

La conférence de la très brillante Amélie Boucher  (ergolab.net, auteur de l’indispensable « Ergonomie web ») nous a apporté plein d’idées de bon sens pour l’ergonomie appliquée aux sites e-commerce. En vrac :

  •  Pourquoi afficher un « créer mon compte » lorsque je viens de valider mon panier ? Je ne veux pas créer un compte sur votre site, je veux juste acheter ! Il faudrait juste demander l’email (et le mot de passe si déjà inscrit), page suivant : « mes coordonnées ». A vérifier sur nos sites ;-)
  • C’est sur la fiche produit, c’est-à-dire quand je suis en acte d’achat, qu’il faut présenter les infos liées à l’achat (possibilité de retour, frais de port offerts, etc.). Beaucoup de sites ont de très bonnes idées marketing, mais ne le font pas savoir au bon moment. Je peux faire un retour pendant 60 jours, super idée ! Mais pourquoi le dire seulement une fois mis en panier. Il fallait me le dire quand j’hésitais, sur la fiche produit.
  • Mon produit est indisponible :pourquoi me laisser espérer ? Dans la liste, je vois une belle photo en couleur à gauche, je dois aller jusqu’à la partie droite de l’écran pour m’apercevoir que le produit n’est pas disponible. Frustrant ! Ce serait une bonne idée de développer une petite fonctionnalité permettant de griser les photos de produits non disponibles (quitte à afficher les couleurs au survol de la souris).
  • Simplifier nos écrans pour ne laisser que ce qui est indispensable par rapport à ce que je suis en train de faire.

Spécialisation des métiers

C’était un peu le fil rouge de ces conférences et des discussions : si autrefois le designer web cumulait les tâches d’ergonome, d’intégrateur html, de développeur javascript, ces métiers, du moins dans les structures les plus importantes, ont tendance à se spécialiser fortement, avec des frontières encore très mouvantes et floues. Le web est une « industrie » jeune, et les métiers changent et se chevauchent. Bien sûr, dans les petites structures, les individus doivent porter plus de casquettes : le web designer fait parfois de l’intégration et de l’ergonomie, le développeur fait de l’intégration, etc.

  • Le designer web (du graphiste ergonome au concepteur fonctionnel, c’est le métier dont les définitions varient le plus). Il décide de l’apparence visuelle du site.
  • Le développeur front-end. Chargé des fonctionnalités et de l’interactivité du côté client (navigateur)
  • L’intégrateur Il est chargé de mettre la maquette du web designer dans sa forme web (html + css + javascript)
  • L’ergonome (pas souvent présent)
  • Le chef de projet

[Pour les techs] Utilité des frameworks et des grilles de layout

Nicole Sullivan (Yahoo !, SFR, FNAC, Club Med, Accor, Renault, SNCF, et La Poste…) a brillamment exposé le manque de maturité des usages CSS dans les agences :

  • code dupliqué (on préfère faire un code CSS pour un bloc dans la page, sans partager avec d’autres zones, pour éviter de tout casser)
  • nécessité d’être un expert dès le début (pas de place pour les débutants, qui risquent à tout moment de tout casser)
  • Impossibilité de réutiliser le code css (un code css a toutes les chances de ne pas fonctionner dans un autre contexte, y compris dans le même site, voire dans la même page)
  • Poids et complexité rapidement croissants des fichiers CSS dûs à ces problèmes
  • J’ajouterai : impossibilité de communiquer entre développeurs CSS (intégrateurs) et designers, et entre les intégrateurs eux-mêmes, ceux-ci ayant chacun leurs propres frameworks.

Nicole propose un framework css (« orienté objet », pas au sens de la programmation, mais dans le même esprit) vraiment très performant : pas de bugs, rapidité de mise en place, poids très réduit.

Les frameworks CSS et les « layout grids »(960 pixels, YUI) sont de toutes façons des solutions à travailler, pour qui veut rendre cohérents ces développements. PHP a réussi, Javascript aussi, pourquoi pas html et CSS.

Méthodes agiles : des méthodes très adaptées au web

(Stephanie Troeth)

Parmi beaucoup d’autres (versions très fréquentes, gérer l’imprévu plutôt que chercher à tout prévoir…), je retiens particulièrement une idée que nous pourrions mettre en pratique facilement et utilement : les user stories. Quelques exemples :

  • plutôt que de définir la prochaine tâche comme « historique des mises à jour », nous pourrions faire parler notre client : « Je veux pouvoir voir les précédentes versions de ma page ». Plus simple à comprendre, plus orienté utilisateur, on peut parler de la même chose avec lui, et nous pouvons tester facilement si « ça » marche ou pas.
  • Plutôt que « Back offie newsletter automatique », dites : « Je veux pouvoir choisir les inscrits au site comme destinataire de ma newsletter automatique » + « je veux pouvoir décider de la date d’envoi programmée de ma newsletter », etc. Encore une fois, on peut discuter, les différentes fonctionnalités sont bien définies, c’est facile de voir si on peut l’inclure sans tout le reste du back office dans la prochaine version, etc.
  • Pour estimer les budgets et les délais, deux solutions : les points à valeur relative (telle user story vaut deux points, telle autre vaut trois points, et on peut savoir peu à peu combien de temps représente un point, en fonction de l’équipe et du projet), ou bien la méthode « 4-hours buckets » : on découpe les user stories de manière à ce qu’elle représente au maximum 4 heures (une demi-journée de travail)

Web design et qualité

La conférence de Benjamin de Cock (Deaxon), avec des exemples très bien choisis, nous a permis d’obtenir une piqûre de rappel de quelques principes de design web applicatif :

  • Se calquer sur le mode de pensée de l’utilisateur :
  • Utiliser un langage simple, court et direct
  • Réduire les fonctionnalités au max (fonctionnalités pour 10% embêtent 90%
  • Choisir judicieusement les options de configuration par défaut (pour limiter au maximum les choix à faire par l’utilisateur)
  • Utiliser un design rassurant (ordre, calme et volupté. Il faudrait ajouter sobriété)
  Auteur : Johann
Experts réactifs à votre écoute
Amélioration continue
Agence Agile
Passez prendre un café
Applibox - Twitter Applibox - Facebook Applibox - Google Plus Applibox - Linkedin Applibox - Flux RSS
Inscrivez-vous
à notre newsletter
Si vous avez
un projet
Demander un devis
Applibox Lyon Agence web lyon

61, cours de la Liberté

69003 Lyon

Applibox Villefranche-Sur-Saône Agence web Villefranche

590, boulevard Albert Camus

69400 Villefranche-Sur-Saône

Applibox © 2012