Les formulaires sont indispensables pour recueillir les informations issues des utilisateurs. Leur mise en place nécessite quelques précautions que nous rappelle bbxdesign avec les 10 bonnes pratiques pour réaliser un formulaire d’après la conférence de Luke Wrobleski.

1. Aller droit au but (Path to completion),
2. Alignement des labels (Label alignment),
3. Aide et astuces (Help & tips),
4. Validation (Inline validation),
5. Actions primaires et secondaires (Primary & Secondary actions),
6. Actions en cours (Actions in progress),
7. Erreurs (Errors),
8. Input inutiles (Unnecessary inputs),
9. Organisation du formulaire (Form organization),
10. Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
• Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!

Usability Post est un excellent blog sur le design et l’ergonomie que je viens de découvrir grâce au non moins excellent article sur les 10 techniques pour améliorer de design de l’interface utilisateur paru sur Smashing Magazine sur les trucs et astuces qui permettent d’améliorer l’ergonomie et l’utilisabilité en se focalisant sur quelques détails qui ont leur importance.

Dans le monde de la création d’objet destiné au monde réel, le designer a l’habitude d’intégrer l’ergonomie dès le début de sa démarche créative. Il n’y parvient pas à tout les coups, mais toujours est-il que le but ultime de tout jeune designer est de créer un objet adapté à l’usage et à l’usager.

Cette quête de l’ergonomie (et de l’économie de moyen) est aussi présente dès les premières années d’étude d’architecture :  les espaces de vie doivent répondre à des normes strictes et tenir compte de contraintes indépassables comme les mensurations du corps humains ou les lois de la gravité.

Dans les Arts graphiques en revanche, c’est autre chose. Nombreux sont les graphistes qui balaient d’un revers de la main toutes considérations pratiques au motif qu’elles entravent un soi-disant « génie créatif ». Pour attirer l’attention, il faudrait faire preuve d’audace, chambouler les codes graphiques : détournement, collage… L’esprit contestataire de Mai 68 est encore bien présent dans les arts graphiques alors qu’il ne reste souvent qu’esthétique dans la musique.

Le graphiste est un rebel. C’est pour celà qu’il se méfie de Jakob Nielsen (à supposer qu’il en ait entendu parler) dont le discours vise à uniformiser les services en ligne autour de bonnes pratiques validées par moults tests in vivo et in vitro sur les utilisateurs… pour les utilisateurs.

L’excellent guide sur les différentes systèmes de navigation Donne-moi ce que je veux ! » est désormais accessible gratuitement en ligne. Découvrez 60 modèles de navigation commentés des bonnes pratiques d’ergonomie, de référencement et d’accessibilité.

Via le blog Alsacréations.

Après le thème Agrumz dont une version est encore visible sur Notorious Blog, et après avoir mis en place un thème provisoire en attendant, voici SquaryBluevie, le nouveau thème bleu et carré (et un peu vert aussi) pour css4design. Il ne s’agit pas vraiment d’un thème destiné à transformer ce blog en magazine, mais plutôt d’en faire un magazine qui ressemble à un blog, nuance, nuance… Un blogzine ? Oui, oui, c’est presque ça ! Comme promis, voici donc le premier volet de la série Danse avec les loops pour montrer ce qu’il y a sous le capot.

Une ligne éditoriale moins linéaire

Je ne m’étendrai pas trop sur les interrogations existentielles qui m’ont poussé à changer le design et la structure de ce blog. La première chose, c’est que la succession simple des billets dans l’ordre chronologique inverse ne correspond plus vraiment à mes aspirations et aux différentes rubriques qui composent ce blog.

En effet, si le coeur de la ligne éditoriale est consacré à la création de site web en général en mettant l’accent sur les problématiques liées à l’intégration HTML et CSS et à la structuration des contenus, j’aborde d’autres sujets comme le Web 2.0, le e-commerce et il m’arrive de publier des billets d’humeur sur l’actualité du web.

Si ces sujets peuvent très bien s’accommoder d’une structure de blog classique, j’avais envie de mieux distinguer les articles de fond des billets plutôt brefs, tout en mettant en avant mes billets d’humeur. Le problème du blog « classique », c’est que les billets disparaissent vite de la page d’accueil et perdent rapidement en visibilité, même si l’ami américain Google est là pour les faire remonter à la surface.

Il me fallait donc un système pour conserver une certaine unité dans la liste des articles en rapport avec les thèmes principaux abordés sur le blog tout en autorisant la publication de billets brefs et d’humeur. Un blogzine, en fait ;)

Voici pour les explications éditoriales. Jetons maintenant un oeil sous le capot !

Hiérarchie des Templates

Grâce à WordPress, il est possible de construire un thème en utilisant uniquement le fichier index.php. Chaque requête — le fait de cliquer sur une catégorie, une page d’archive, le titre d’un billet, un tag, etc. — crée un contexte de variables qui pointera vers ce fichier.

Si l’on veut afficher les contenus différemment sur le billet seul, par exemple, deux solutions s’offrent à nous : les marqueurs conditionnels (Conditional Tags) comme is_single() ou la création d’un fichier single.php.

S’il s’agit de modifier une largeur de colonne au passage du billet seul, le marqueur conditionnel suffit. En revanche, si les modifications sont plus profondes, le fichier single.php sera sans doute plus adapté sachant que dans la plupart des cas, la solution passe par un mélange des deux techniques.

La première chose à prendre en compte est le nombre de maquettes dont on dispose pour afficher tous les contextes possibles, même si dans la plupart des cas, il n’est pas nécessaire de mettre en place tous les Templates possibles.

Pour y voir un peu plus clair, voici une table des correspondances entre les marqueurs, les templates et la hiérarchie qui leur est associée (Template Hierarchy) :

Pour SquaryBluevie par exemple, je voulais tout faire en utilisant uniquement le fichier index.php, mais bien que cela soit possible, le risque est grand de se mélanger les pinceaux entre la multitude des conditions…

J’ai donc ajouté à index.php, les fichiers home.php, page.php et single.php. Le reste étant composé de fichiers inclus de manière conditionnelle ou en fonction du Template. C’est le cas pour header.php, footer.php, tutoriels.php, sidebar0.php, sidebar1.php, sidebar2.php, etc.

Un découpage en 7 grandes zones

1 L’en-tête

Le fichier header.php est composé de deux grandes parties. La première contient les éléments qui apparaissent sur l’ensemble du blog. C’est la partie header :

• Sommaire en haut à gauche,
• Classement Wikio en haut à droite,
• Texte de présentation de l’auteur,
• Logo,
• Texte de présentation du blog,
• Liste des pages statiques en dessous.

La deuxième partie header2 est située juste en dessous :

• Photo de l’auteur,
• Icône du flux RSS,
• Texte situé entre les deux.

C’est ce texte qui affichera un contenu différent selon le contexte :

• Dans une catégorie (<?php if ( is_category() ) : ?>), j’affiche la description de la catégorie
• Dans la page affichant l’article seul (<?php if ( is_single() ) : ?>), j’affiche une introduction générale pour les articles,
• Ni dans une page d’article ni dans une page statique ni dans une catégorie (<?php if ( !is_single() && !is_page() && !is_category() ) : ?>), j’affiche le dernier billet dans la rubrique « Editorial ».

La description du blog est celle que l’on renseigne habituellement dans Réglages -> Options générales -> Slogan du panneau d’administration. L’appel du texte se faisant avec la fonction <?php bloginfo('description'); ?>. Comme il s’agit — avec la présentation de l’auteur — d’une zone de widgets, il est possible de remplacer aisément la description du blog par un texte libre (notamment si la description est trop courte) en utilisant un widget texte.

Ceci est possible grâce à la fonction suivante (voir ce billet consacré à la création de zones widget dans WordPress) :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header2') ) : ?>
<div>
    <h2>Description du blog</h2>
    <div><?php bloginfo('description'); ?></div>
</div>
<?php endif; ?>

<?php $my_query = new WP_Query('category_name=editorial&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();?>
    Votre boucle ici
<?php endwhile; ?>

A l’affichage d’une catégorie, cet édito est remplacé par la description de la catégorie idoine. Cette description est accessible dans l’administration via Gérer -> Catégories -> Description. Le code à utiliser dans le Template est <?php echo category_description(); ?>. Enfin, lorsqu’on affiche l’article seul, cette description est remplacée par un texte libre (widget texte).

2 Billet « C’est vite dit ! » (En bref)

Sous le header, la deuxième zone se compose d’un billet « En bref » (cet intitulé — comme d’autres sur le blog — est modifiable dans le fichier functions.php) surmonté d’un visuel optionnel géré par les champs personnalisés (Customs fields).

Cette rubrique n’est ni plus ni moins que la catégorie 1 (uncategorized à l’origine) dont j’ai modifié l’intitulé. L’avantage est de pouvoir compter sur l’identifiant présent dès l’installation du blog, ce qui évite d’avoir à mettre les mains dans le code pour masquer cette catégorie dans les autres boucles. Par ailleurs, cette catégorie « originelle » est cochée par défaut, ce qui permet de gagner du temps lorsqu’on veut rédiger un billet court ;)

Note : pour afficher une seule rubrique, il est possible de se servir de son nom, mais pour l’exclure, il semble nécessaire de passer par l’identifiant numérique (à moins qu’une option m’ait échappée).

Voici le code pour cette boucle :

<?php if(!is_paged()) : ?>
    <?php $my_query = new WP_Query('cat=1&showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
        Contenu de la boucle
    <?php endwhile; ?>
<?php endif; ?><!-- end !is_paged -->

Pour cela, en plus d’initialiser la variable $do_not_duplicate dans la première boucle, il faut exclure le billet en question de la deuxième boucle :

<?php $my_query = new WP_Query('cat=1&showposts=6'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        Contenu de la boucle
<?php endwhile; ?>

La fonction update_post_caches() est là pour pallier le fait que certains plugins ne fonctionnent pas correctement lorsque plusieurs boucles sont présentes sur la même page. Cette fonction réinitialise le cache des billets pour éviter d’éventuels problèmes.

3 Les articles du blogzine proprement dit

Cette zone est suivie de la liste des billets publiés au fil de l’eau sur le blog à l’exception de l’édito et des billets « En bref ». Toutefois, je voulais que ces deux rubriques puissent apparaitre lorsque les visiteurs cliquent sur les Articles plus anciens car si la redondance est gênante sur la première page, elle l’est moins sur les autres :

<?php if(!is_paged()) : ?>
    <?php query_posts("$query_string&cat=-1,-16&showposts=10");
    /* Affichage des articles sauf featured et édito */?>
<?php else : ?>
    <?php query_posts("$query_string&showposts=15"); ?>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
        Contenu de la boucle
<?php endwhile; ?>

Il ne faut pas oublier le paramètre $query_string qui permet de recréer le contexte de la requête (ici is_paged() ) car la fonction query_posts() est un peu l’auberge espagnole : seules les variables précisées en paramètres sont disponibles sur votre page.

4 Le menu à onglets sur la droite

Ce pavé inaugure la barre latérale et est en quelque sorte le pivot du blog, la boussole qui sert de point de repère dans ce qui pourrait apparaitre comme une cacophonie de textes :

• Catégories — le moins mauvais des systèmes pour se repérer dans un blog ;
• Derniers articles publiés afin que le lecteur ait une vision « applatie » des parutions sur le blog. En effet, l’édito ou le billet « En bref » peuvent rester un certain temps avant d’être remplacés, même si le contenu du blog proprement dit (la quatrième zone) peut évoluer plus rapidement ; à moins que l’inverse se produise car il est tout à fait possible de publier plusieurs billets courts dans « En bref » ou de prendre un coup de sang quotidien avec l’édito !
• Articles les plus commentés. Si les derniers commentaires (voir plus bas) permettent aux visiteurs de se faire une idée sur les dernières discussions en cours, la liste des articles les plus commentés permet de faire remonter certains articles anciens qui ont, en leur temps, fais parler d’eux ;)
• Derniers commentaires avec le gravatar, l’URL du commentateur et l’adresse du billet commenté. Pratique, pour donner au visiteur un aperçu des sujets qui suscitent actuellement le plus d’intérêt.
• Nuage de tags pour donner un aperçu des thèmes abordés sur le blog au visiteur de passage (qui représente quand même plus de la moitié des visites).

A noter que lorsqu’on se trouve sur les pages single.php (affichage des billets seuls) et page.php (affichage des pages « statiques »), ce menu ne propose que les 3 premiers onglets afin de laisser plus de place pour l’article. Voici le code :

<?php if ( !is_single() && !is_page()) : ?>
    <div id="menu-wide">
<?php else : ?>
    <div id="menu-narrow">
<?php endif; ?>

5 Tutoriels aléatoires

Sous le menu à onglets, j’affiche un article aléatoire parmi ceux qui sont tagués « tutoriel ». Ca tombe bien car c’est un des rares tags que j’ai employé à bon escient depuis de début ! Ca permet de faire « remonter » des billets rédigés il y a plus de deux ans et sur lesquels j’ai le plus transpiré ;) La boucle est relativement similaire aux autres :

<?php /* Affichage des tous les billets tagué "tutoriels" */
query_posts('tag=tutoriel&showposts=1&orderby=rand');
while (have_posts()) : the_post(); ?>
    Contenu de votre boucle
<?php endwhile; ?>

Cette zone peut être précédée ou suivie d’une zone widgétisable pour placer une éventuelle publicité (actuellement des vidéos virales de unrulymedia) ou tout autre élément à la mode. Une zone est même prévue au-dessus du menu à onglets pour la même chose. Bon, rassurez-vous, une publicité placée au-dessus du menu principal vaut son pesant de cacaouettes : le jour où ça arrive, je vous invite à boire un café sur Lyon :D

6 Deux barres latérales pour le prix d’une !

C’est le moment de diviser la barre latérale en deux afin d’accueillir d’autres types de contenus. Pour le moment la première sidebar accueille la suite des billets « En bref » suivie d’une petite publicité virale (oui, j’essaie de trouver des alternative à Google Adsense… pas si facile non plus ;) )

La deuxième barre latérale est destinée à accueillir des liens externes comme les liens sponsorisés (saymal, mais saybon quand même :D ), les flux RSS externes, etc.

A noter que sous cette double sidebar, il est possible d’afficher du contenu à l’aide d’une zone widgétisée sur la largeur des deux colonnes.

7 Le footer

Ce footer est lui-même divisé en deux : un big footer (inactif pour l’instant) et le footer proprement dit qui affiche quelques informations classiques comme les droits réservés, l’adresse des différents flux RSS, le lien vers le formulaire de contact, etc.

Les widgets

Ce thème est truffé de zones widgets ready pour permettre une certaine souplesse dans l’administration du blog en minimisant les allers-retours dans le code. Pour information, SquaryBluevie ne compte pas moins de de 19 zones de widgets, certaines actives et d’autres pouvant être activées sur un claquement de souris.

Voici la liste des différentes zones de widget et leur utilisation actuelle ou prochaine :

1. header1 – présentation de l’auteur (widget Texte),
2. header2 – présentation du blog (inactive pour l’instant),
3. article – texte de remplacement de l’édito et de la description de la catégorie quand on est sur l’article seul,
4. tab1 — contenu du premier onglet dans le pavé de droite. Actuellement les catégories,
5. tab2 — derniers billets publiés,
6. tab3 — articles les plus commentés par les visiteurs,
7. tab4 — derniers commentaires des visiteurs
8. tab5 — listes des tags les plus utilisés
9. sidebar-top — zone située au-dessus du menu à onglets (inactive pour l’instant),
10. sidebar-middle — zone située sous le menu à onglets (Actuellement une vidéo publicitaire),
11. sidebar-middle2 — zone située sous le tutoriel aléatoire (inactive pour l’instant),
12. sidebars-bottom –zone située sous les deux colonnes latérales,
13. sidebar1-top — zone placée au-dessus de la première barre latérale étroite,
14. sidebar1-bottom — zone placée en dessous,
15. sidebar2 — l’ensemble de la deuxième barre latérale étroite est gérée par cette zone. Principalement pour des liens externes et/ou publicitaires (flux RSS, liens sponsorisés, blogroll, etc.),
16. bigfooter – si le besoin s’en fait sentir, une zone big footer est diponible sur toute la largeur de la page en 2, 3, 4 ou 5 colonnes en fonction des besoins. (inactive pour l’instant),
17. footer – zone disponible au début du footer (inactive pour l’instant),
18. adz — affichage des publicités AdSense à la fin du billet seul et sous le billet « En bref » présent sur la Home.
19. sidebar-single – permet d’afficher des élément sous le menu à onglets lorsqu’on lit un billet seul.

Grille de mise en page, feuilles de styles CSS et Javascript

Je ne m’étendrai pas trop sur ces questions qui feront l’objet d’un autre article : ce design est provisoire (ce qui n’est pas le cas de cet article) et je ne suis pas sûr de vouloir garder la même approche. Mais pour ceux qui sont curieux et qui n’ont pas envie de regarder le code source, voici quelques informations.

Pour ce thème, j’ai utilisé le framework CSS Blueprint en redéfinissant totalement la grille horizontale proposée par défaut en utilisant l’excellent Blueprint Generator pour générer automatiquement le fichier grids.css : il suffit de préciser quelques informations. J’ai opté pour une grille en 14 colonnes de 52 pixels chacune, séparées par une gouttière de 18 pixels, pour une largeur totale de 962 pixels.

L’avantage du framework Blueprint est de pouvoir tester rapidement plusieurs mises en page à partir de la même grille. La prise en main est relativement facile si l’on possède des bonnes notions de CSS et si l’on si sait à quel moment il faut rétablir le flux après les flottants : lorsqu’on détermine une largeur à l’aide de Blueprint, on utilise un float: left en même temps !

J’ai utilisé également le script ie7.js de Dean Edwards pour faire en sorte que Internet Explorer 6 se comporte comme IE7. Je vous invite à lire l’article Quelques notes sur la bibliothèque Javascript IE7 qui vous permettra d’en savoir plus sur les comportements ajoutés à Internet Explorer pour le rendre plus friendly ;)

Conclusion

Dans ce billet, je n’ai pas abordé les aspects graphiques : comme je l’ai déjà évoqué, ce thème est pour moi un saut dans l’inconnu car je n’ai pas l’habitude de travailler le bleu, les blocs carrés ou encore les designs symétriques ! Tout celà donne un aspect institutionnel qui n’était pas recherché au départ mais qui peut faire son petit effet ;)

Rassurez-vous toutefois, mon objectif n’était pas d’obtenir des backlinks d’un site se terminant par .gouv, mais simplement de mieux structurer le blog et d’utiliser une palette de couleur tendant vers la monochromie (deux couleurs froides) afin que le regard du lecteur ne se disperse pas trop : plus les contenus sont nombreux et variés et plus la sobriété est importante.

Par ailleurs, le graphisme de ce blog est destiné à évoluer régulièrement pendant quelques temps, le temps de trouver un rythme de croisière entre l’édito, les brèves, les articles de fond, les tutoriels, etc…

Stay tuned and mind the gap!

Le thème magazine se porte bien cette année et la tendance est à la hausse. Dans cette catégorie, quelques thèmes sont sortis du lot : Mimbo, traduit en français et modifié par niss et décrit par fran6. (Mimbo Pro est disponible à partir de 90$ — captures d’écran disponibles chez stagueve) et Révolution (à partir de 79$) qui a ouvert la voie aux thèmes magazine payants. Après eux, une foultitude de thèmes du même genre ont vu le jour. Les raisons du succès de ces habillages graphiques pour les blogs sont multiples :

• Les thèmes magazines donnent un look plus professionnel pour des blogs qui prennent leurs distances avec le « journal intime » ou le « carnet de bord » ;
• ils permettent une lecture qui s’affranchit du traditionnel ordre anté-chronologique en affichant généralement en première page, la liste des derniers billets par catégorie sous le « billet » du jour mis en avant par un traitement graphique spécifique ;
• Ils font un usage intensif des images qui prennent souvent la place des titres pour attirer l’oeil et guider le lecteur à travers la page, véritable vitrine du contenu ;
• pour finir, le look magazine se prête parfaitement à la mise en place de partenariats commerciaux, et nombreux sont les thèmes conçus en fonction des formats publicitaires les plus courants.

Je le veux mon thème magazine !

Tout celà, rend les thèmes magazines très attrayants. Mais tous les blogs ne gagneront pas à les utiliser : dans certains cas, l’utilisation d’un thème magazine pourra sembler disproportionné si les billets ne deviennent pas des articles : de nombreux thèmes n’ont de « magazine » que la première page, les autres ressemblant souvent aux blogs traditionnels, et le pauvre billet de 10 lignes semblera comme posé là comme un cheveu sur la soupe…

ll faut dire qu’un thème public a pour vocation d’être utilisé par le plus grand nombre, quelque soit le sujet, le nombre de rubriques, etc. de sorte, qu’à mon avis, on perd ce qui fait tout le charme des magazines que l’on trouvent chez le libraire : l’adéquation entre le fond et la forme. Rien que ça.

Après avoir réfléchis à cette question épineuse (comment proposer un thème générique adapté au contenu de chacun), j’ai compris que je ne trouverais pas la solution en me grattant la tête, alors j ‘ai pris un crayon et du papier pour poser quelques idées.

Un style magazine, mais lequel…

La première chose que je me suis demandé c’est : un style magazine, oui, mais quel style de magazine… En effet, selon que l’on ouvre GQ, SVM, ELLE ou Entrevue, on s’aperçoit vite que chaque habillage graphique épouse le contenu en fonction des habitudes des lecteurs et de leurs attentes.

J’allais abandonner l’idée quand je me suis dit que le style « journal » pouvait ouvrir des perspectives plus intéressantes encore pour structurer les divers contenus produits par un CMS comme WordPress ou Dotclear.

Finalement, en matière de balisage HTML comme en mise en page, il faut toujours partir du contenu et déterminer ensuite quel sens on lui donne, ce qui déterminera son importance et son emplacement dans la maquette.

P.S. : Ce billet est le premier d’une série dont le dernier sera la présentation d’un nouveau thème destiné à être être distribué.

Stay tuned!

Voici une traduction de l’article 10 Principles Of Effective Web Design paru sur Smashing Magazine où il apparait que prendre en compte les besoins des utilisateurs en amont du processus de conception d’un site web, peut être un fil conducteur plus efficace que de suivre le délire de l’artiste…

10 Principles Of Effective Web Design

Ce sont l’ergonomie et le service rendu — et non l’apparence — qui déterminent le succès ou l’échec d’un site web.  Etant donné que celui ou celle qui clique décide de tout, les designs orientés vers l’utilisateur (user-centric) sont désomais considérés comme une approche standard pour réaliser des sites web rentables. Si les utilisateurs ne peuvent pas utiliser une fonctionnalité, que fait-elle encore là ?

Nous ne parlons pas de l’implémentation des détails (comme l’emplacement de tel ou tel élément) qui a déjà été abordé dans de nombreux articles. A la place, nous nous pencheront sur les principes fondamentaux et heuristiques pour réaliser des designs web efficaces. Approches, qui utilisées à bon escient, peuvent conduire à des décisions sophistiquées en matière de design et simplifier le processus qui mène à la mise en forme des informations.

Avant de continuer, vous pouvez pendre en compte que :

• les articles parlant d’ergonomie comme 10 cauchemars ergonomiques et 30 problèmes d’utilisabilité que nous avons publié auparavant pourraient vous intéresser.
• Nous aborderons d’autres principes pour concevoir des sites web efficaces dans nos prochains articles. Pour ne pas les rater, abonnez-vous à notre flux RSS.

Afin d’utiliser correctement ces principes, nous devons d’abord comprendre la manière dont les utilisateurs intéragissent avec les sites web, comment ils pensent et quelles sont les bases de leur comportement.

Comment pensent les utilisateurs ?

Grosso modo, l’utilisateur a les mêmes habitudes sur le web que dans la « vraie vie ». Il jette un coup d’oeil à chaque nouvelle page, parcourt quelques lignes et clique sur le premier lien qui attire son attention ou qui ressemble vaguement à ce qu’il cherche. Dans les faits, une grande partie de la page n’est même pas vue.

La plupart des utilisateurs cherche quelque chose d’intéressant (ou d’utile) et de cliquable ; l’utilisateur clique sur le premier élément qui semble correspondre à ses aspirations. Si ce n’est pas le cas, direction le bouton « Retour » et le processus de recherche est relancé.

• Les utilisateurs apprécient la qualité et la crédibilité. Un site qui fournit un contenu de qualité peut bien avoir un design pauvre envahi de publicité, le visiteur fera « avec ». Ceci explique pourquoi des sites pas « terribles » mais présentant un contenu attractif font de l’audience depuis des années. Qu’importe le flacon, pourvu qu’on ait l’ivresse, pourrait-on dire.
• Les utilisateurs ne lisent pas, ils parcourent la page. Face à une page web, le utilisateurs cherchent des points de repères ou des liens pour les guider à travers le contenu.

Les visiteurs ne lisent pas, ils scannent. Notez la manière dont les zones « chaudes »surgissent au milieu des phrases, ce qui est typique d’un processus de « scannage »

Notez la forme en « F » typique d’un processus de « scannage » [NdT]

• Les utilisateurs du web sont impatients. Ils réclament des gratifications immédiates. Si un site web ne peut pas répondre à leurs attentes, Celà veut dire que le designer a échoué dans sa mission et que l’entreprise perd de l’argent. Plus la charge cognitive pour accéder aux ressources du site est élevée, plus la navigation sur le site est absconse, et plus les utilisateurs auront tendance à quitter la page pour autre chose. [JN / DWU]
• Les utilisateurs ne font pas des choix optimaux. Ils ne cherchent pas le moyen le plus rapide pour trouver l’information. Ils ne scannent pas non plus la page sur un mode linéaire en allant d’une section du site à une autre : ils font « au mieux » en choisissant la première option raisonnable. Il y a de fortes chances pour qu’ils cliquent sur le premier lien qui semble les mener au but. La rationalisation est chronophage, faire « au mieux » est plus efficace. [video ]

Le flux de lecture séquentiel ne fonctionne pas sur le web.

La capture d’écran à droite décrit le parcours de l’oeil sur une page donnée.

• Les utilisateurs suivent leur intuition. Dans la plupart des cas, ils improvisent au lieu de suivre le plan conçu par l’architecte du site. D’après Steve Krug, la raison est simple : les utilisateurs s’en moque : « si nous trouvons quelque chose qui marche, nous l’adoptons. Ca nous est égal de ne pas comprendre comment ça marche du moment que nous pouvons l’utiliser. Si vos visiteurs agissent comme si vous aviez conçu un panneau d’affichage, alors faites un beau panneau d’affichage. »
• Les utilisateurs veulent avoir le contrôle. Ils veulent pouvoir contrôler leur navigateur et se fier à la cohérence des données présentés tout au long de la navigation sur le site. Ils ne veulent pas de pop-up et veulent pouvoir revenir d’où ils viennent en utilisant un bouton « Retour ».

1. Ne faites pas réfléchir l’utilisateur

Selon la première loi d’utilisabilité de Krug, la page web doit être évidente et contenir toutes les explications nécessaires à sa compréhension. Lorsque vous créez un site, votre boulot est de supprimer les points d’interrogation — Les utilisateurs ne devraient pas peser le pour et le contre pour chaque clic.

Si la navigation et l’architecture du site ne sont pas intuitives, le nombre de points d’interrogation augmente et le système devient opaque : il devient plus difficile de se rendre d’un point A à un point B. Une structure claire avec des indications visuelles raisonnables et des liens facilement reconnaissables peuvent aider le visiteur à trouver son chemin.

Allez au-delà des apparences en changeant l’ordre des éléments.

Jetons un oeil à un exemple. Beyondis.co.uk se veut le « beyond channels, beyond products, beyond distribution ». Qu’est-ce que celà signifie ? Puisque les utilisateurs ont tendance à explorer les sites web selon un parcours en « F » ces trois assertions devraient être les premiers éléments visibles dès le chargement de la page.

Bien que le design en lui-même soit simple et intuitif, le visiteur doit chercher plus loin pour comprendre de quoi il retourne exactement. Voilà un exemple de point d’interrogation superflu. C’est au concepteur du site de s’assurer que les zones d’ombre disparaissent. L’explication visuelle est placée du côté droit ; en changeant simplement la place des deux blocs, on augmente la « lisibilité » de la page.

Le slogan devient fonctionnel en fournissant au visiteur des options pour essayer le service

ExpressionEngine utilise une structure très proche de celle utilisée par Beyondis tout en évitant les points d’interrogation. De plus, le slogan devient fonctionnel en fournissant au visiteur des options pour essayer le service et télécharger une version gratuite.

En réduisant la charge cognitive, les visiteurs comprenent mieux le fonctionnement du système, ce qui vous laisse ensuite le loisir de communiquer sur les avantages du site et les bénéfices que les visiteurs peuvent en retirer.

2. Ne gaspillez pas la patience du visiteur

Dans un projet, lorsque vous vous apprêtez à offrir un service, essayer de simplifier les procédures au maximum. Moins il y a d’actions à accomplir et plus les chances qu’un visiteur X ou Y saute le pas augmentent. A priori, les visiteurs sont disposés à jouer avec le service, pas à remplir des formulaires web longs comme le bras pour ouvrir un compte qu’ils n’utiliseront probablement jamais. Laissez-les explorer le site et découvrir vos services sans les obliger à divulguer des informations les concernant. Il n’est pas raisonnable de forcer les utilisateurs à fournir une adresse email pour tester une fonctionnalité.

Comme Ryan Singer — développeur dans l’équipe 37Signals — le déclare, les utilisateurs seront probablement désireux de donner leur adresse email si on la leur demande après qu’ils avoir vu quelque chose qui fonctionne.

Stikkit est un service « user-friendly » efficace

Stikkit est un parfait exemple de service centré sur les besoins de l’utilisateur (user-friendly), rassurant et non intrusif. Et c’est sûrement ce que vous voulez que vos visiteurs ressentent sur votre site web.

Un enregistrement rapide grâce l’orientation judicieuse du formulaire

Apparemment, Mite demande plus. Néanmoins, l’enregistrement peut être fait en moins de 30 secondes, grâce à l’orientation horizontale du formulaire qui ne nécessite pas de faire défiler la page.

Dans l’idéal, faites sauter les barrières, n’imposez pas d’abonnement ou d’enregistrement dès le début (rien que l’enregistrement est un obstacle suffisant pour réduire le trafic).

3. Gérez l’attention de l’utilisateur

Comme les sites web fournissent à la fois du contenu statique et dynamique, certains aspects de l’interface utilisateur attirent plus l’attention que d’autres. Les images sont évidemment plus attirantes que le texte — comme les phrases marquées en gras sont plus attirantes que le texte normal.

L’oeil humain n’est pas un instrument linéaire, et grâce à lui, les internautes peuvent reconnaitre instantanément les bords, les motifs et les mouvements. C’est pourquoi les publicités vidéo sont extrêmement agaçantes et perturbantes pour l’utilisateur, mais font parfaitement leur travail d’un point de vue marketing en captant l’attention.

“FREE.”, un signe subtil pour donner envie d’en savoir plus sur le service.

Humanized.com utilise le principe d’attention à la perfection. Le seul élément directement visible pour l’utilisateur est le mot « FREE. », attirant et séduisant, tout en étant reposant et purement informatif. Des signes subtils procurent au visiteur des informations suffisantes pour en savoir plus à propos de ces produits « free ».

Diriger l’attention sur des zones spécifiques du site avec un usage raisonnable d’éléments visuels aident vos visiteurs à aller d’un point A à un point B sans se demander comment ils sont supposés s’y rendre. Moins vos visiteurs auront de questions à se poser, et mieux ils pourront s’orienter dans le site. De plus, ils développeront une relation de confiance vis-à-vis de l’entreprise éditrice du site. En d’autres termes : moins on réfléchit, mieux on se porte.

4. Se battre pour passer en couverture

Les sites web modernes esont souvent critiqués à cause de leur tendance à vouloir guider le visiteur à l’aide de séduisants visuels, de 1-2-3-c’est-fini, de boutons larges avec effets spéciaux, etc. Mais dans une perspective de design, ces éléments sont plutôt une bonne chose ; ces lignes directrices sont extrêmement efficaces car elles guident simplement et de manière agréable les visiteurs à travers le contenu du site.

Des options visibles rapidement pour guider l’utilisateur.

Dibusoft.com combine visuel séduisant et structure claire. Le site possède neuf options pour la navigation principale visibles au premier coup d’oeil, même si le choix de la palette de couleur aurait pu être un peu plus contrastée.

Permettre à l’utilisateur de voir clairement quelles fonctions sont disponibles, est un principe fondamental pour le succès d’une interface utilisateur. La manière d’y parvenir n’est pas très importante. Ce qui importe c’est que le contenu soit bien compris et que les visiteurs se sentent à l’aise avec la manière dont ils interagissent avec le système.

5. Utilisez un style de rédaction efficace.

Etant donné que le web est différent de l’imprimé, il est nécessaire d’ajuster le style d’écriture aux préférences de l’utilisateur et de ses habitudes de navigation. Un style de rédaction « promotionnel » ne sera pas lu. Les longs blocs de texte sans image ni mots-clé marqués en gras ou en italic seront évités. Les formulations emphatiques seront ignorées.

Parlez business. Evitez les intitulés trop malins ou subtils, propres au marketing, trop techniques ou spécifiques à l’entreprise. Par exemple, si vous décrivez un service et voulez que les visiteurs créent un compte, l’intitulé « Créer un compte » est mieux que « Commencez maintenant ! » qui reste encore mieux que « Explorer nos services ».

L’efficacité à l’état brut.

Eleven2.com va droit au but. Pas d’intitulé subtil, pas de déclaration exagérée. A la place, un prix, juste ce que recherche les visiteurs.

Pour écrire efficacement, une solution optimale consiste à utiliser :

• des phrases courtes et concises (venez-en au but le plus rapidement possible), - une maquette « scannable » (catégorisez le contenu, utilisez plusieurs niveaux de titres, mettez des visuels et des liste à puces qui ne perturbent pas le flux uniforme du texte),
• un discours simple et objectif (une promotion n’a pas besoin de ressembler à une publicité ; donnez à vos visiteurs quelques raisons valables d’utiliser votre service et de rester sur votre site).

6. Luttez pour la simplicité

Le principle KIS – Keep it simple (restez simple) – devrait être le but premier de tout design de site.

Les utilisateurs viennent rarement sur un site pour en admirer le design. Battez-vous pour la simplicité.

Crcbus s’adresse aux visiteurs avec un design simple et net. Vous pouvez n’avoir aucune idée de quoi il s’agit si vous ne parlez pas italien, néanmoins vous reconnaitrez la navigation, l’en-tête, la zone de contenu et le pied de page. Notez comment les icônes transmettent clairement les informations. Lorsque les icônes sont survolées, des informations complémentaires apparaissent.

Du point de vue du visiteur, le meilleur design de site web est constitué de texte brut, exempt de publicité ou autres blocs de contenus alternatifs qui ne correspondent pas exactement à la requête des visiteurs ou au contenu qu’ils sont en train de chercher.

Une version imprimable du site allant à l’essentiel est indispensable à une bonne expérience utilisateur.

Finch présente clairement ce qu’il faut savoir concernant le site et donne aux visiteurs la possibilité de choisir entre plusieurs options sans pour autant surcharger la page.

7. N’ayez pas peur de l’espace blanc

Il est aujourd’hui difficile d’ignorer l’importance des blancs tournants. Non seulement les espaces blancs contribuent à réduire la charge cognitive des visiteurs, mais ils facilitent la perception des informations présentées à l’écran. Lorsqu’on aborde une maquette pour la première fois, on a tendance à parcourir la page et à diviser les zones de contenu en morceaux d’information digestes.

Il est difficile de lire, de scanner, d’analyser ou de travailler avec des structures complexes. Si vous avez le choix entre séparer deux segments du design par une ligne visible ou en laissant de l’espace entre eux, il est généralement judicieux d’utiliser la deuxième solution.

Les structures hiérarchisés réduisent la complexité (Loi de Simon) : l’existence d’une hiérarchie visuelle facilite la perception du contenu.

L’espace blanc est bon. Cameron.io l’utilise comme élément constitutif du design. Le résultat est une maquette facile à parcourir qui donne au contenu la position dominante qu’il mérite.

8. Communiquez efficacement avec un langage « visible »

Dans son journal sur la communication visuelle efficace, Aaron Marcus établit trois principes fondamentaux impliqués dans l’usage de ce que l’on peut appeller « langage visible » — le contenu que l’utilisateur voit sur son écran.

• Organisez : apporter à l’utilisateur une structure conceptuelle claire et cohérente. Cohérence, maquette, relation entre les éléments et navigabilité sont des concepts importants de l’organisation. Les mêmes règles et conventions devraient être appliquées à tous les éléments.
• Economisez : faites le maximum avec le minimum d’effets et d’éléments visuels. Quatre points sont à souligner : simplicité, clarté, distinction et accentuation. La simplicité s’applique seulement aux éléments qui sont les plus importants pour la communication. La clarté : tous les composants devraient être conçus de manière à ce que leur signification ne soit pas ambiguës. Distinction : les propriétés des éléments nécessaires devraient être distincts. Accentuation : les éléments les plus importants devrait être facilement perçus.
• Communiquez: adaptez la présentation des informations aux capacités des visiteurs. L’interface utilisateur doit jongler entre la lisibilité, la lecturabilité, la typographie, le symbolisme, les vues multiples, et les couleurs ou textures pour communiquer efficacement. Utilisez au maximum trois polices de caractères dans un maximum de trois taille — avec un maximum de 18 mots ou 50/80 caractères par ligne de texte.

9. Les conventions sont vos amies

Un design conventionnel n’est pas synonyme de site web ennuyeux. En fait, les conventions sont vraiment utiles car elles réduisent la courbe d’apprentissage, le besoin de d’imaginer la manière dont les choses fonctionnent. Par exemple, il serait cauchemardesque que chaque site web ait sa propre représentation des flux RSS. Ce n’est pas très différent de ce que nous faisont dans notre vie de tous les jours lorsque nous utilisons des principes de base pour organiser nos données informatiques (fichiers) ou lorsque nous faisont du shopping (placement des produits).

Grâce aux conventions, vous pouvez gagner la confiance des visiteurs et améliorer votre crédibilité. Suivez les attentes des utilisateurs — ce qu’ils attendent de la navigation d’un site, de la structure du texte, de l’emplacement du champ de recherche, etc. (cf. Les Alertbox de jakob Nielsen pour plus d’information).

Babelfish en action : Amazon.com en Russie.

Un exemple typique d’expérience d’utilisabilité est de traduire une page en japonais (à supposer que vos utilisateurs ne connaissent pas le japonais, e.g. avec Babelfish) et demandez à vos testeurs d’effectuer une tâche, comme rechercher quelque chose sur la page traduite. Si les conventions sont bien appliquées, les utilisateurs seront capables de réussir des objectifs assez larges, même s’ils ne comprennent pas un seul mot.

Steve Krug suggère qu’il vaut mieux innover uniquement lorsque vous savez que vous avez une meilleure idée, sinon, optez pour les avantages des conventions.

10. Testez tôt, testez souvent

Ce principe appelé TETO (Test Early, Test Often) devrait être appliqué pour chaque projet de design web où les tests d’utilisabilité font souvent ressortir les problèmes et les questions liées à une maquette donnée.

Ne testez pas trop tard, pas trop légèrement et pas pour de mauvaises raisons. Dans ce dernier cas, il faut comprendre que la plupart des décisions concernant un design sont locales ; ce qui signifie que vous ne pouvez pas répondre globalement pour savoir si une maquette est mieux qu’une autre étant donné que vous devez l’analyser à partir d’un point de vue très spécifique (en considérant le cahier des charges, les intervenants, le budget, etc.).

Quelques points importants à garder à l’esprit :

• d’après Steve Krug, effectuer un test avec un seul utilisateur est 100% mieux que pas de test du tout, et tester avec un utilisateur tôt dans le projet est mieux qu’avec 50 près de la fin. D’après la première loi de boehm, les erreurs sont plus fréquentes durant l’établissement du cahier des charges et la mise en place du design et sont plus coûteuses à corriger à mesure que le projet avance.
• Les tests sont un processus itératif. Celà signifie que vous concevez quelque chose, vous le testez, corrigez et le testez à nouveau. Il peut y avoir des problèmes qui n’ont pas été trouvés pendant le premier round étant donné que les utilisateurs ont été bloqués par d’autres problèmes.
• Les tests d’utilisabilité produisent toujours des effets bénéfiques. Soit ils vous renseignent sur les problèmes que vous avez, soit vous savez que votre projet est exempt de défaut, ce qui est – dans les deux cas – de bonne augure.
• d’après la loi de Weinberg, n’est pas le mieux placé pour tester son propre code. Celà est vrai aussi pour les designers. Après que vous avez travaillé sur un site pendant quelques semaines, vous ne pouvez plus le considérer avec un oeil neuf. Vous savez comment il a été construit et donc vous savez exactement comment il fonctionne — vous avez la sagesse que les testeurs indépendants et les visiteurs de votre site n’aurait pas.

Dernière chose : si vous voulez un grand site, vous devez tester.

Références

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Desig

Crédits et remerciements

Traduit avec la permission de A List Apart Magazine et de l’auteur.

Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l’auteur se soient glissées : je vous conseille vivement de lire l’article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l’article. D’ailleurs, ce billet reste en version bêta quelques temps ;)

PS : d’autres traductions d’articles sur les sujets du web sont disponibles dans la catégorie Traductions.