Nouveau thème graphique en HTML5 et responsive design

Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Mises en page pour smartphones et tablettes

Nous avons également travaillé sur une version « grand large » (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

Les deux mises en page normal et grand large

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

  • Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
  • Ajout de la microdata Article ;
  • Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
  • Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
  • Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
  • Création d’un media print pour l’impression de l’article ;
  • Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
  • Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
  • Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

  • La page d’accueil « version mobile » ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page « normale » pèse 1,6 Mo alors que la page « mobile » pèse 158 Ko) ;
  • Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
  • Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
  • Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
  • Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

  • Pour IE 10, utilisation basique des dégradés et media query ;
  • Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
  • Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

La mise en page de ce blog sous IE 6

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…

Adobe lance son application de prototypage rapide… pour les tablettes

Cette semaine se tient à Los Angeles la grand-messe annuelle d’Adobe où l’éditeur nous présente ses nouveautés et sa stratégie. L’évènement n’étant pas encore terminé, je me garde de vous faire un récapitulatif (qui sera publié en fin de semaine sur InterfacesRiches.fr). Je souhaite néanmoins vous présenter la gamme de produits destinés aux tablettes (les Adobe Touch Apps) qui sont intégrées dans la Creative Suite. L’ambition d’Adobe avec cette nouvelle gamme est de stimuler la créativité au travers d’interfaces tactiles inspirationelles : Adobe Touch Apps Redefine Creative Software.

L’un de ces produits a particulièrement retenu mon attention : Adobe Proto, une application de prototypage rapide pour tablettes Android et iPad. Cela fait de nombreuses années que je milite pour que les grands éditeurs rajoutent à leur catalogue un outil de prototypage rapide digne de ce nom (Wireframes : 4 styles pour 4 types d’outils). Jusqu’à présent, il fallait composer chez Adobe avec des produits bâtards comme les extensions pour Fireworks (trop lourdes à manier) ou Flash Catalyst (plutôt orienté design des interactions). Avec ce Proto, Adobe comble le vide dans sa gamme avec une application tout à fait innovante :

Adobe Proto se présente donc comme une application de prototypage rapide avec une interface tactile particulièrement intuitive :

Du prototypage rapide sur votre tablette avec Adobe Proto

Pas de menus compliqués, tout se fait avec le doigt : soit vous sélectionnez un composant dans la barre de gauche, soit vous dessinez directement une forme et l’interface l’interprète (cartouche, image, menu…) et la reformate pour vous (alignement sur la grille).

L'interface tactile de Adobe Proto

Visiblement l’orientation donnée à cette application est de privilégier la rapidité d’exécution tout en offrant de la rigueur. Il vous suffit de gribouiller dans une cartouche pour que l’interface transforme ça en texte (petit gribouillis) ou titre (gros gribouillis), ce nouvel élément est alors repositionnable et redimensionnable à l’aide de l’inspecteur. Plutôt que de vous faire un long discours, je vous propose de regarder la démo (sautez directement à 2″00′ et 3″30′) :

Comme vous pouvez le constater, l’interface est assez réactive (quoique le temps de latence est encore un peu élevé) et réagit très bien. Vous pourriez me dire que ce Proto n’est pas aussi sophistiqué que les autres applications (iMockups, OmniGraffle, SketchyPad, MoodBoard ou encore AppCooker), mais n’oubliez pas qu’il s’insère dans une gamme, qui elle-même fait partie d’une suite.

Il ne faut donc pas considérer Proto comme un logiciel isolé, mais comme une façon d’exprimer votre créativité parmi d’autres (Ideas permet de dessiner de façon plus libre, Collage permet de faire des montages, Debut permet de présenter ça à vos collègues…). De plus, cette collection d’applications pour tablettes est assortie d’un environnement de collaboration (Adobe Creative Cloud), forcément, puisque’il n’y a pas de système de fichier sur l’iPad (donc impossible d’exporter vos maquettes, sauf dans les nuages).

Exportez vos maquettes dans les nuages avec Adobe Proto

Pour avoir une idée plus précise du positionnement de cette offre, voici une mise en situation :

Au final, est-ce que je suis emballé par cette application ? Oui, car elle propose une approche tout à novatrice du prototypage. Est-ce que cette application va balayer la concurrence ? Non aucune chance, car pour le moment, Proto n’est à mon sens pas un produit fini. Le prototypage rapide est une méthode de conception très puissante si elle est:

  • Itérative / collaborative (nous ne savons pas grand-chose de ce que va proposer le Creative Cloud) ;
  • Simple d’accès, mais complète (comment faire pour récupérer une maquette Proto et l’enrichir sur votre ordinateur ?) ;
  • Intégrée dans une chaine de création (sera-t-il possible d’exporter les maquettes dans Fireworks ou Photoshop ?).

Je suis donc plutôt réservé quant à l’utilité réelle de cette application qui ne soutient pas la comparaison face à Balsamiq ou FlairBuilder. Certes, ce ne sont pas les mêmes produits, mais si Adobe veut séduire et convaincre les concepteurs, il va falloir faire mieux. Ceci étant dit, je pense ne pas me tromper en disant que cette application a été compilée avec AIR pour faciliter la compatibilité Android / iOS et devrait donc être très facilement portable sur PC/Mac. J’anticipe donc une version desktop de Proto proposant beaucoup plus de fonctionnalités. À partir de là, la chaine de création sera complète et cette application pour tablette aura du sens.

Mais chaque chose en son temps, car Proto vient tout juste d’être annoncée. Cette application sera disponible dès le mois prochain pour les tablettes Android à 9,99$. J’attends avec impatience de pouvoir mettre mes doigts dessus…

Apple réinvente le système de gestion de fichiers dans iWork

Apple a lancé en fin de semaine dernière la dernière version de son système d’exploitation Mac OS. Beaucoup de nouveautés dans ce Lion (mode plein écran, Mission Control, Lauchpad…) et surtout des choix de conception audacieux (natural scrolling sur le pavé tactile).

Mais le changement le plus important concerne la gestion des fichiers avec les fonctions Auto-Save et VersionsLes changements sont automatiquement enregistrés (très pratique si vous fermez l’application sans faire de sauvegarde) et sont accessibles au travers d’une interface directement héritée de Time Machine :

Revenir à une version précédente avec iWork et Versions

Déjà implémentée sur les logiciels natifs comme Finder, cette gestion des versions est également disponible dans iWork (avec une petite mise à jour). L’air de rien, les équipes de Apple viennent tout simplement d’imposer un gestionnaire de versions dans une suite bureautique et de signer l’arrêt de mort du « Enregistrer sous…« .

Pour créer une copie d’un document, vous ne pouvez plus l’enregistrer sous…, il faut maintenant le dupliquer. De même, la sauvegarde est automatique (toutes les 5 minutes il me semble) mais vous pouvez forcer l’enregistrement d’une nouvelle version.

Le nouveau système de fichier dans iWork

Je ne vous cache pas que ma première réaction a été de me dire : « Pourquoi vouloir changer un système qui fonctionne bien ?« . Mais en réfléchissant plus profondément, je me suis rendu compte que ce système ne fonctionnait pas si bien que ça et qu’il m’a fait perdre de précieuses heures de travail par le passé. Vous noterez que ce principe de gestion des versions remplaçant celui des fichiers a déjà été abordé par Alan Cooper il y a quelques années dans son livre About Face.

Autre conséquence de ce nouveau système : Tous les fichiers déjà créés sont verrouillés, pour les modifier il faudra donc les déverrouiller. Là encore ma première réaction a été de me dire : « Non mais de quoi j’me mêle, d’où il me verrouille mes fichiers l’autre ?« . Pourtant il s’avère que cette protection est très précieuse : Vous pouvez maintenant consulter à loisir de nombreux fichiers pour en créer / modifier un nouveau sans craindre la fausse manipulation.

Verrouillage des fichiers dans iWork

Ce nouveau système de gestion des fichiers (en fait des versions) est donc une approche déroutante au début, contraignante, mais terriblement plus efficace, surtout combinée avec l’historique des versions. En y réfléchissant bien, on se rend vite compte que ce système n’est pas neuf, il est déjà en vigueur dans les suites bureautiques en ligne (Google Docs, Zoho…).

Précision importante : Les versions sont stockées sur votre disque dur, donc si vous envoyez le fichier à quelqu’un d’autre, l’historique des versions est perdu. Dommage, il aurait été intéressant d’avoir une option pour « attacher » les versions à un document et pouvoir ainsi parcourir l’historique si besoins ur un autre ordinateur.

Avec cette nouvelle gestion des versions imposée dans iWork, Apple est donc en train d’éduquer le marché de force au mode de fonctionnement des logiciels en ligne et des documents hébergés dans les nuages. Je ne suis pas devin, mais je parierais bien ma souris que la prochaine version d’iWork intégrera de façon bien plus profonde le service de collaboration iWork.com. Nous pourrions même anticiper une plateforme de collaboration en ligne plus poussée comme peut en proposer Acrobat.com (tout ceci ne risque pas de calmer les esprits entre Apple et Adobe !).

Et vous, est-ce que vous appréciez ce nouveau système ?

Rentrée littéraire 2010

Bon OK la rentrée est passée de deux mois mais je pense qu’il est tout de même important de vous signaler la parution récente de deux très bons ouvrages traitant de l’ergonomie en français (ce qui est rare).

Il y a tout d’abord le nouveau livre d’Amélie Boucher : Ergonomie web illustrée. Un ouvrage tout à fait intéressant, car construit sous la forme d’une analyse détaillée de 60 sites. Les règles et conseils relatifs à l’ergonomie web sont ainsi distillés en contexte tout au long des cas étudiés. Les sites sont variés et les enseignements très complets. Ça jargonne à mort ( « Affordances, Attention sélective, Design semi-élastique, Engagement immédiat, Loi de Fitts, Micro-utilités, Momentum behaviour…« ) mais il y a un lexique à la fin. À noter que le livre est préfacé par Benoit Drouillat et qu’il existe un site compagnon pour avoir plus de détails sur le livre : ergonomie-web-illustree.com.

Autre ouvrage de référence, la troisième édition du mémento des bonnes pratiques web d’Elie sloïm. Ce mémento est en fait un dépliant de 18 pages expliquant et détaillant les 217 bonnes pratiques du référentiel Opquast (Open Quality Standards). Ces bonnes pratiques sont ainsi réparties dans 5 catégories correspondants au modèle VPTCS qui classe les exigences des utilisateurs de services en ligne (Visibilité, Perception, Technique, Contenu, E-services). Ce mémento se présente donc sous la forme d’une gigantesque check-list très pratique pour vous accompagner dans vos travaux de conception quotidiens.

Bonne lecture !

Qwiki inaugure l’avenir de la recherche sur terminaux alternatifs

Connaissez-vous Qwiki ? Il s’agit d’un moteur de recherche de nouvelle génération. Non pas qu’il soit plus « intelligent » que les nouveaux entrants (Le marché de la recherche relancé avec Bing et Wolfram ?) mais qu’il propose une expérience unique de restitution des résultats : Qwiki wants to be the multimedia search engine of the future. À l’origine de ce projet, il y a le fondateur d’AltaVista (le français Louis Monier, Cocorico !).

La page d'accueil de Qwiki

Qwiki se différencie des autres moteurs sur deux points :

  • Il n’y a pas de page de résultats de recherche (grâce à un système de recherche assistée)
  • Les résultats sont consultés directement dans l’interface sous forme d’un diaporama animé qui résume différentes sources et dicte le texte grâce à une synthèse vocale
La page de résultat de Qwiki

Autant le dire tout de suite : l’expérience est bluffante, car le résumé est de très bonne qualité (malheureusement en anglais) et car la synthèse vocale est très agréable (diction fluide). Ici une petite vidéo de démonstration :

Avec ce mode d’interaction nous pouvons tout à fait affirmer que c’est un nouveau paradigme de la recherche d’information en ligne, Qwiki s’apparente ainsi plus à une meta-encyclopédie à la volée qu’à un moteur de recherche classique. Est-ce la fin de Google ou de Wikipedia ? Non absolument pas car l’information remontée est beaucoup plus pauvre… mais bien plus facile à consommer.

C’est donc là que réside le secret de Qwiki : offrir une expérience plus proche du divertissement que de la recherche documentaire. Donc non, Qwiki n’est absolument pas un concurrent de Google sur votre ordinateur, mais trouvera tout à fait sa place et son utilité sur des terminaux alternatifs comme les touchbooks ou les TV connectés. Nous sommes donc dans une optique assez proche de celle proposée par Youtube Leanback.

Ce moteur de recherche préfigure à mon avis une nouvelle vague de services en ligne (nouveautés ou adaptation de services existants) proposant une expérience d’utilisation radicalement différente et parfaitement adaptée aux nouveaux terminaux (Faut-il réinventer le web pour les touchbooks ?).

Google publie des recommandations pour la conception d’interfaces TV

La nouvelle est tombée la semaine dernière : Google va lancer cette année une offensive sur la télévision et proposer sa technologie de recherche et sa plateforme de widgets au travers d’une TV Box (à découvrir ici : Introducing Google TV). L’annonce est alléchante et les possibilités très nombreuses car cette TV box exploitera la système d’exploitation Android, bien connu des développeurs. Cela veut dire qu’il va être extrêmement simple de développer des applications pour les TV compatibles avec le système Google TV. Cela veut surtout dire que la tâche des concepteurs va encore se complexifier car il va falloir appréhender un nouveau support (en plus des terminaux mobiles) avec de nouvelles contraintes.

GoogleTV

Voilà pourquoi Google a prit les devants et publier un certain nombre de recommandations pour ceux qui souhaitent se lancer dans la conception d’applications : Designing websites for Google TV. L’approche de Google est différente de celle d’Apple (qui a plus l’habitude d’imposer des guidelines très strictes) dans la mesure où ils ne publient qu’une série de bons conseils.

Recommandations générales :

  • Ne pas gêner le spectateur dans le visionnage de son programme ;
  • Bien prendre en compte le contexte du salon (plus de distractions) ;
  • L’affichage est différent des ordinateurs (écrans plus larges et rendu des couleurs différent) ;
  • Les modalités d’interaction sont différentes (pas de souris ou de clavier, pas de scroll…).

Concernant la simplicité d’usage :

  • Ne conserver que le strict nécessaire à l’écran ;
  • Un seul niveau de navigation (donc de hiérarchie d’information) ;
  • Une navigation omniprésente et adaptée à la télécommande (quatre flèches directionnelles) ;
  • Des items de navigation / action très explicites (pas d’icônes).

Concernant l’affichage et les textes :

  • Exploiter le format 16/9 ;
  • Respecter les zones de sûreté ;
    SafeZones_TV
  • Ne pas utiliser du blanc pour le fond d’écran car cela peut provoquer des scintillements ;
  • Éviter les contrastes trop prononcés ;
  • Limiter la taille des paragraphes à 90 mots (et des lignes à 12 mots) ;
  • Préférer du texte blanc sur fond noir que l’inverse…

Bref, il y a beaucoup de conseils très intéressants dans cette page que je vous recommande de consulter. Il y a également des recommandations sur l’utilisation du son (notamment pour les retours sonores comme dans les jeux vidéo) et de Flash (qui pourra être exploité). Après les Rich Internet Applications, les Rich Mobile Applications, nous aurons bientôt des Rich TV Applications !

Pour approfondir le sujet, je vous recommande également ces études plus anciennes :

J’ai comme l’impression que la conquête de nouveaux supports (smartphones, TV, touchbooks…) va se faire de façon moins douloureuse que celle du web car les concepteurs et éditeurs de contenus et services ont conscience de l’importance de la simplicité et du confort d’usage. D’où ces recommandations très utiles.

(via Read/Write Web)

Vers une standardisation des champs de saisie typés ?

Il y a 6 ans (6 ans !) je vous parlais de la standardisation des formulaires à l’aide d’attributs date, number, range et email : Des formulaires standardisés. À l’époque il était question de XForms pour typer les champs de saisie. Aujourd’hui l’objectif est toujours le même, sauf que cette possibilité nous est offerte par HTML 5 et que ça se passe maintenant puisque si vous utilisez un navigateur moderne vous y avez déjà accès.

Le site 456 Berae St nous propose ainsi de faire le point sur les nouveaux attributs : HTML5 input types. Pour faire simple, il vous suffit de spécifier dans votre code source le type de données que vous voulez collecter (une date, un nombre, un email…) et le navigateur se charge d’afficher un champ adapté à la valeur à saisir. Cette technique est déjà employée avec brio sur les smartphones (cf. A propos des formulaires mobiles et narratifs) et l’on commence déjà à voir des choses intéressantes sur les navigateurs de dernières génération (Opera, Safari et Chrome).

Je vous invite donc à tester ces différents types de champs dans la page suivante : HTML5 input types test page. Voici à quoi ressemble un champ search dans Safari (coins arrondis comme dans le Spotlight de Mac OS et croix pour vider le champ comme sur l’iPhone) :

Un champ de recherche avec Safari
Un champ de recherche avec Safari

Voici à quoi ressemble un champ number avec opera (avec les deux boutons) :

Le champ number avec Opera
Un champ nombre avec Opera

Le champ range avec Chrome (dommage que la valeur ne s’affiche pas sous la glissière) :

Un champ range avec Chrome
Un champ range avec Chrome

Le champ email avec Opera (incluant un contrôle de surface):

Saisi d'un email avec Opera
Saisie d'un email avec Opera

Et pour finir le champ date avec Opera :

Saisi d'une date avec Opera
Saisie d'une date avec Opera

C’est ce dernier exemple qui m’intéresse particulièrement car la saisie d’une date ou d’un horaire est compliquée et qu’il y a beaucoup de différences dans les techniques employées. Standardiser le comportement des champs typés permettrait d’assurer de la cohérence au travers des différents sites et de réduire de façon considérable les erreurs de saisie.

Pour le moment il n’y a que la dernière version d’Opera qui implémente correctement les types mais nous ne devrions pas tarder à voir apparaitre ça sur les autres navigateurs. Deux types de champs pourraient grandement améliorer l’expérience utilisateur : Le champ tel pour saisir un numéro de téléphone (uniquement implémenté sur les smartphones) et le champ price pour saisir un prix (pas prévu pour le moment).

C’est un début encourageant et il reste beaucoup de travail mais nous sommes visiblement sur la bonne voix avec d’autres standardisation (notamment les pseudo-classes valid, invalid et required avec CSS3). C’est avec ce type d’améliorations que les navigateurs modernes vont pouvoir faire la différence vis à vis des vieux navigateurs qui sont plus lents, moins bien sécurisés et qui ne simplifieront pas la saisie des formulaires. Mais vous aviez déjà abandonné Internet Explorer depuis longtemps, non ?

Les bureaux 3D se trouvent un champion avec BumpTop

Depuis l’apparition des premières interfaces graphiques il y a presque 30 ans (cf. Quelle interface pour le système d’exploitation de demain ?), force est de constater que le modèle d’interaction des interfaces de nos système d’exploitation n’a pas beaucoup changé : toujours un bureau en 2D avec des icônes et des dossiers, puis des zones « intelligentes » comme le Dock de Mac OS ou la Sidebar de Windows Vista.

Alors que les géants du secteur sont encore en phase d’expérimentation (cf. Bientôt un bureau en 3D chez Apple ?), il semblerait qu’une start-up canadienne soit en train de s’illustrer avec une interface 3D tout à fait convaincante : BumpTop.

L'interface 3D de BumpTop
L'interface 3D de BumpTop

Pour faire simple, BumpTop est une interface qui vient se greffer par dessus Windows et qui permet de manipuler les fichiers et fonctions de votre ordinateur de façon beaucoup plus… naturelle. La grande nouveauté vient du fait qu’ils proposent depuis peu le support des écrans tactiles et du multitouch : BumpTop Gets Multi-Touch Support on Windows 7.

En pratique il est donc possible de manipuler les différents éléments de l’interface (fichiers, dossiers…) avec vos doigts et des gestes intuitifs :

Les gestes de manipulation de l'interface de BumpTop 3D
Les gestes de manipulation de l'interface de BumpTop 3D

Pour vous rendre compte de la puissance de cette interface je vous propose cette petite démonstration vidéo :

Autant j’étais plus que sceptique quand à l’intérêt réel de la 3D dans l’interface d’un système d’exploitation, autant je me dis qu’une telle interface associée à un touchbook est une solution non seulement viable mais en plus tout à fiat innovante. Bref, les équipes de BumpTop ont réussi un authentique exploit en proposant des modalités d’interaction très intuitives et surtout adaptées à une partie du public des touchbooks (les séniors et autres utilisateurs réfractaires aux ordinateurs traditionnels).

(via Techcrunch)

Une charte ergonomique des sites internet publics

Vous connaissiez déjà les référentiels d’accessibilité, qui donne les lignes de conduite à suivre en matière d’accessibilité, mais connaissiez-vous les référentiels d’utilisabilité ? Ces documents très utiles regroupent ainsi un ensemble de règles / directives / recommandations / bonnes pratiques pour faire de la bonne conception web.

Le service public avait déjà publié un référentiel d’accessibilité (dérivé des WCAG) et a prolongé ce travail avec ce très bon document : Une charte ergonomique unique pour les sites Internet publics. En lisant ce document vous allez très rapidement vous rendre compte qu’il s’agit plus d’un référentiel que d’une charte ergonomique à laquelle les sites publics doivent se plier. Cette charte peut être téléchargée ici : charte_ergonomique_servicepublic_fr.pdf (fichier PDF – 2,6 Mo).

La charte ergonomique des sites publics
La charte ergonomique des sites publics

Ce référentiel est organisé en différentes parties :

  • Les règles d’ordre général (architecture de l’information, lisibilité, systèmes de navigation…) ;
  • Les règles sur les objets (liens, formulaires, tableaux, images…) ;
  • Les règles sur les contenus (page d’accueil, page spécifique…).

Nous avons donc au final un très bon document qui pourrait vous aider dans votre travail quotidien de conception. Bien évidement ce document ne remplace pas un livre entièrement dédié au sujet (comme par exemple Ergonomie Web) mais par ces temps de crise, c’est mieux que rien !

Notons au passage qu’il existe un équivalent publié par l’administration US il y a plus de 5 ans : Research-Based Web Design & Usability GuidelinesResearch-Based Web Design & Usability Guidelines.

Connaissez des équivalents en Belgique ou au Canada ?

(via Ergophile)

L’ergonomie Web vue par les internautes

Ce mois-ci, le pôle Conseil en ergonomie de Benchmark Group a mis en ligne les résultats d’une enquête très intéressante : « Ergonomie des sites Web : le verdict des internautes ». Cette enquête a été menée au cours du mois de novembre 2008 auprès des lecteurs du Journal du Net et de L’Internaute Magazine. L’enquête a recueilli 824 réponses.

Nous vous invitons fortement à la consulter.

Voici quelques informations à retenir :

1- 75% des internautes rencontrent encore «souvent» des difficultés pour trouver ce qu’ils cherchent sur les sites qu’ils consultent, et que 58% sont «souvent» confrontés à des problèmes de navigation.

2- 66% trouvent les contenus des sites «souvent mal présentés» et 47% «l’allure de la page d’accueil souvent peu engageante».

3- 7 internautes sur 10 ne reviennent pas sur un site où ils ont rencontré des problèmes de navigation ou d’orientation.

Finalement, voici un des schémas qui se retrouve dans les résultats de l’enquête que nous souhaitons partagez avec vous.

Qu’en pensez-vous ?

Source : PEG veille pour vous

Billet initialement publié sur Mikimya