Le blogue d'

Tel que défini par la norme ISO 9241-210, la conception centrée sur l’utilisateur est un processus qui repose sur l’idée que les futurs utilisateurs sont les personnes les mieux placées pour évaluer le produit (le site Web dans notre cas). On peut voir dans le graphe ci-dessous les principales étapes de ce processus :

En résumé, il s’agit d’un processus itératif, dans lequel on recommence les étapes suivantes tant que nos objectifs ne sont pas atteints :

• Comprendre et spécifier le contexte d’utilisation;
• Comprendre et spécifier les exigences utilisateurs et organisationnelles;
• Produire des solutions de conception;
• Évaluer les solutions au regard des exigences prédéfinies.

Maintenant… Comment évalue-t-on les solutions, tout en sachant que les futurs utilisateurs sont les personnes les mieux placées pour évaluer le produit ?

Le test d’utilisabilité

Le meilleur moyen d’évaluer les difficultés et les problèmes d’utilisation d’un site web, c’est d’effectuer un test d’utilisabilité.

Selon Wikipedia, l’utilisabilité est définie par la norme ISO 9241-11 comme « le degré selon lequel un produit peut être utilisé par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d’utilisation spécifié ». Les trois principaux critères de l’utilisabilité sont donc :

• L’efficacité : Est ce que le site web permet aux utilisateurs d’effectuer les tâches souhaitées ?
• L’efficience : Est ce que le site web permet aux utilisateurs d’effectuer les tâches souhaitées en un minimum de temps ?
• La satisfaction : Est ce que les utilisateurs sont satisfaits de leur utilisation du site Web ?

Le test d’utilisabilité permet donc de mesurer ces trois critères. Le principe de ce test est simple : On invite des utilisateurs pour effectuer des tâches pré-définies, on les observe, on analyse les résultats et finalement on amène des recommandations. Voici sommairement les pré-requis d’un test d’utilisabilité.

Des objectifs

Avant tout, on doit définir les objectifs à atteindre. Ces objectifs s’appuient sur les trois critères de l’utilisabilité; soit l’efficacité, l’efficience et la satisfaction.

Un exemple d’objectif peut être « 100% des utilisateurs doivent pouvoir trouver la page de contact en moins de 3 clics ».

Voici quelques critères que l’on peut utiliser dans la définition des objectifs :

• Réussite de la tâche;   
• Temps de réalisation de la tâche;
• Nombre de clics nécessaires pour réussir la tâche;
• etc.

Des scénarios de test

Un scénario de test est un petit paragraphe de mise en situation décrivant un contexte d’utilisation afin de demander à la personne exécutant le test, d’effectuer une tâche. Voici un exemple :
« Vous souhaitez aller voir un film au cinéma mais vous ne voulez pas faire la file d’attente étant donné le grand achalandage durant cette soirée de la semaine. Pour acheter vos billets en avance, un ami vous recommande le site www.achetezvosticketsdecinemaenligne.com. Vous allez donc visiter ce site dans l’intention d’acheter les tickets. »

Les sujets du test

Généralement, 5 à 8 sujets de test sont suffisants pour trouver la plupart des problèmes d’utilisabilité d’un site Web. Il est conseillé cependant de bien choisir les sujets de test en fonction du public visé par le produit (le site Web). Par exemple, pour un site de jeu vidéos, il est préférable d’inviter des jeunes personnes fans de jeux vidéos.

Le déroulement du test

Équipement nécessaire

Avant tout, on doit être équipé d’une webcam (ou tout autre caméra vidéo de bonne qualité) et d’un microphone pour enregistrer le déroulement du test. La vidéo des tests nous permettra par la suite d’effectuer une analyse des faits importants. Cette vidéo comportera une capture écran de tout ce que l’utilisateur effectue (les mouvements de la souris, les clics, etc.) ainsi que du visage de l’utilisateur, qui nous donnera des informations sur les réactions et sentiments éprouvés par ce dernier (frustration, hésitation, soulagement, etc). L’enregistrement audio nous permettra quant à lui, d’écouter les interactions entre l’utilisateur et la personne responsable du bon déroulement du test (dit le facilitateur).

Rôle du facilitateur

Le rôle du facilitateur est d’accueillir les sujets (une personne à la fois) et de leur expliquer le but de l’exercice. Il est bien important de leur préciser que ce que l’on teste c’est le site Web et non eux-mêmes. Ainsi, ils se sentiront plus confortables.

Une fois le test achevé, on pose quelques questions à l’utilisateur pour avoir ses impressions ainsi que ses recommandations concernant l’ensemble du site Web. Finalement, on lui propose de répondre à un bref questionnaire afin d’évaluer sa satisfaction quant à son utilisation du site.

Durant tout le temps du test d’utilisabilité, le facilitateur doit être concentré et prendre en note tout ce qu’il juge important. Généralement, quand un utilisateur hésite ou est frustré, cela signifie qu’il n’aime pas une fonctionnalité dans le site. Il faut donc prendre cette information en note.

L’analyse

Durant la phase d’analyse, on doit mesurer l’efficacité (nombre d’utilisateurs ayant réussi les scénarios, etc.), l’efficience (durée du test, nombre de clics, etc.) ainsi que la satisfaction des utilisateurs (grâce aux questionnaires de satisfaction). La vidéo du test ainsi que les notes du facilitateur doivent également être pris en considération lors de la phase d’analyse.

Présentation des résultats

Une fois l’analyse terminée, les personnes en charge du projet présentent les résultats obtenus ainsi que les recommandations formulées pour l’amélioration du site Web.

Pour conclure

Le principal avantage d’un test d’utilisabilité est de connaître la manière dont réfléchissent les utilisateurs lorsqu’ils naviguent sur notre site. Ainsi nous pouvons savoir quelles sont les fonctionnalités qu’ils aiment, lesquelles ils n’apprécient pas, pourquoi, etc. On entre dans la peau de l’utilisateur pour percevoir notre site d’un angle différent.

De plus, effectuer un test d’utilisabilité est assez facile et peu coûteux. Sa valeur ajoutée est très grande pour l’interface du site. On peut même tester l’accessibilité du site grâce à ce genre de test, en invitant des personnes handicapés.

Mohamed Rebai.

La dernière version du HTML fait de plus en plus parler d’elle. Que ce soit pour profiter des dernières fonctionnalités disponibles ou encore, pour être plus proactif, tout le monde veut y passer ! Voici quelques astuces afin de rendre vos sites TYPO3 les plus conformes possibles en HTML5.

Dans votre Typoscript « Constant », utilisez ce qui suit :

config.doctype = html5
config.xmlprologue = none

Dans votre Typoscript « Setup », utilisez ce qui suit :

page.headerData.50 = TEXT
page.headerData.50.value (
    <script src="fileadmin/templates/scripts/modernizr-1.7.min.js"></script>
)

Modernizr est une librairie qui permet aux vieux navigateurs de comprendre que les nouvelles balises existent. Vous servir de cette librairie peut vous éviter bien des problèmes d’affichage (www.modernizr.com).

Pour les styles, il est important d’ajouter au minimum ce qui suit, afin de permettre de traiter les nouvelles balises un peu comme des « div » :

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

Voici un exemple d’une configuration des dates de tt_news pour HTML 5 :

plugin.tt_news {
    displayLatest {
    # Date en HTML5
         date_stdWrap >
         date_stdWrap.cObject = COA
         date_stdWrap.cObject {
             10 = TEXT
             10.field = datetime
             10.strftime = %Y-%m-%d
             10.wrap = <time pubdate="pubdate" datetime="|">
             20 = TEXT
             20.field = datetime
             20.strftime = %d %B %Y
             20.wrap = |</time>
         }
    }
    displayList {
        date_stdWrap < plugin.tt_news.displayLatest.date_stdWrap
    }
    displaySingle {
        date_stdWrap < plugin.tt_news.displayLatest.date_stdWrap
    }
}

Voici un gabarit HTML d’exemples de tt_news qui respecte beaucoup mieux le nouveau balisage HTML5 :

<!-- ###TEMPLATE_LATEST### begin -->
<header>
    <h1>###LATEST_HEADER###</h1>
    <div>
        <!--###LINK_ARCHIVE###-->###GOTOARCHIVE###<!--###LINK_ARCHIVE###-->
    </div>
</header>
<!-- ###CONTENT### begin -->
    <!-- ###NEWS### begin -->
    <article>
        <header>
            ###NEWS_DATE###
            <h2>
                <!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###-->
            </h2>
        </header>
        ###NEWS_SUBHEADER###
        <p>
            <!--###LINK_ITEM###-->###MORE###<!--###LINK_ITEM###-->
        </p>
    </article>
    <!-- ###NEWS### end-->
<!-- ###CONTENT###  end -->
<!-- ###TEMPLATE_LATEST### end -->

Et voilà le résultat final avec le Typoscript et le nouveau gabarit HTML :

<header>
    <h1>Actualités</h1>
    <div><a href="{lien}">Toutes les actualités</a></div>
</header>
<article>
    <header>
        <time pubdate="pubdate" datetime="2011-08-05">5 août 2011</time>
         <h2><a href="{lien}" title="{titre}">{titre}</a></h2>
    </header>
    <p>{contenu}</p>
    <p><a href="{lien}" title="{titre}">Lire la suite</a> </p>
</article>

Depuis la toute dernière version de TYPO3 (4.5.4), la balise méta-charset est maintenant en format HTML5 (si vous avez bien assigné votre doctype). Il n’est donc plus nécessaire d’utiliser des extensions telles que html5meta_t3lib_pagerenderer pour rendre votre site conforme.

Voilà ! Avec ces quelques conseils, vous avez un bon point de départ pour commencer dès maintenant votre intégration en HTML5.

Varnish est un “reverse-proxy” libre très rapide qui permet d’augmenter le nombre de requêtes par seconde que votre site Web peut traiter. Il peut aussi être utilisé comme « load-balancer » si vous avez plusieurs serveurs web. Son installation est assez simple et configurable via un fichier VCL.

Si vous voulez utiliser Varnish avec TYPO3, je vous conseille d’installer l’extension moc_varnish. Cette  extension  permet une intégration quasiment parfaite avec le système de cache de TYPO3. De plus, moc_varnish vous fournit quelques fichiers VCL pour faciliter la configuration du service.

Pour tester l’efficacité de Varnish, je vous conseille le logiciel « siege » ou « ab » pour comparer les performances de votre site.