[TechDays 2012] : Session “Le livre de recette du design et de l’ergonomie pour le développeur”


Cette session des Techdays animée par Olivier Courtois et Christopher Maneu, consultants chez Bewise n’avait pas pour but de faire des développeurs que nous sommes de grands designers mais de nous donner quelques clés pour produire des interfaces plus conviviales. En voici un résumé.

Les fondamentaux

Ils sont au nombre de 4 et vous permettront si vous les suivez de ne pas produire des interfaces utilisateurs “Sapin de noël”.

La typographie

Familles

Le conseil est de ne pas en utiliser plus de 3

Serif/Sans Serif

Une police Serif est une police dont les lettres possèdent un empattement (Times New Roman par exemple) , contrairement à une police Sans Serif (Arial par exemple). Dans les applications, on utilisera plutôt les polices Sans Serif  car elles sont considérées comme étant plus modernes.

Graisse

La graisse est l’épaisseur d’un trait ou d’un caractère. Elle va donc permettre de créer du contraste sans avoir à changer de police.

Espacement

Jouer sur l’espacement entre les caractères et entre les lignes va permettre d’ajuster la mise en page. Cela peut permettre par exemple de rendre un paragraphe moins compact et donc plus agréable à lire.

Glyphs et alphabets

Avant de choisir la ou les polices qui vont être utilisées dans votre application, il est important de savoir dans quels contextes elle va être utilisée (multilingue, caractères spéciaux tel que € ou @ ) car certains alphabets ou Glyphs ne sont pas présents dans toutes les polices.

La couleur

Autant que faire se peut, évitez de choisir vous-même les couleurs qui composeront votre site. Si vous travaillez avec un designer, demandez-lui de vous les fournir, sinon choisissez-en 2 ou 3 mais attention à l’assortiment. Une fois la ou les couleurs choisies, vous pourrez augmenter votre palette en jouant sur la teinte. En éclaircissant ou en assombrissant la couleur, vous pourrez ainsi créer du contraste en évitant le côté “sapin de noël”.

Le Layout

Il existe 4 grandes règles :

Le contraste

Cela peut paraître bête à dire mais il faut différencier ce qui est différent. Cela rendra l’utilisation de votre application plus facile.

La répétition

Vous devez créer une unité en répétant une caractéristique visuelle (ex: Titre en gras, explications en italique, …)

L’alignement

Guidez l’œil de l’utilisateur en alignant les éléments. Une mauvaise mise en page risque de le fatiguer visuellement. Il refusera alors d’utiliser votre application ou, s’il s’agit d’un site internet,  risquera de ne plus revenir.

La proximité

Regroupez les éléments de même sens, séparez les autres.

Ergonomie

Affordance

Il s’agit du caractère intrinsèque d’un objet à nous renseigner sur sa fonction.  Par exemple, on aura plutôt tendance à tirer une porte avec une poignée et pourtant certaines portes avec une poignée doivent être poussées. Si l’on remplace la poignée par une barre, on aura alors plus tendance à la pousser. L’affordance sera donc meilleure. En design d’application, cela peut se traduire par : faites en sorte que vos boutons ressemblent à des boutons, vos champs de saisie à des champs de saisie, etc… L’utilisateur ne doit pas avoir à deviner comment utiliser votre application. Elle doit être la plus intuitive possible.

Loi de Fitts

“Plus c’est grand et proche, plus c’est facile à cliquer”, ou de façon mathématique  T = a+b.log2(D/L +1). Il s’agit ici du principe de proximité vu plus haut dans les règles de layout.  Évitez par exemple, autant que faire se peut, de placer l’un à côté de l’autre un bouton de modification et un bouton de suppression, un accident est si vite arrivé.

Nombre de Miller

7 +/- 2, il s’agit du nombre d’objets pouvant tenir dans la mémoire de travail d’un humain moyen. Ce nombre est aujourd’hui remis en cause, on parle plutôt de 3 ou 4. Évitez donc les menus trop longs et trop complexes, l’utilisateur final ne vous en sera que plus reconnaissant.

Vérification du travail

Chez Bewise, ils ont créé une liste de choses à vérifier pour savoir si votre application répond bien aux critères fondamentaux de design et d’ergonomie cités ci-avant et que tout développeur doit passer sur son application. Ils appellent cela une chuckLists.

Vous pouvez la retrouver à l’adresse suivante : http://chucklists.bewise.fr, c’est gratuit, cela ne prend que 5 minutes et peut vous éviter de livrer une application qui fera fuir tous les utilisateurs. Il en existe une version web et une version PDF téléchargeable. En prime pour les techdays, ils ont mis à disposition une “archive tout-en-un” intégrant entre autres les chuck lists mais aussi des metroGridHelper vous permettant de visualiser facilement l’alignement de vos éléments: http://chucklists.bewise.fr/techdays.

En conclusion, cette session a été très intéressante, pleine de conseils simples pour améliorer les IHM afin de les rendre plus attractives et plus faciles à utiliser.

Quelques liens pour aller plus loin:

http://www.alistapart.com/topics/design/ (excellent site en anglais abordant  en autres  les problématiques de design)

http://webdesign.tutsplus.com/sessions/web-design-theory/ (série d’articles en anglais portant sur la théorie du design web)

http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web/ (article en anglais portant sur la typographie)

Nombre de vue : 12

COMMENTAIRES 4 commentaires

  1. sj dit :

    Tout simplement excellent!
    🙂

  2. Merci beaucoup pour ce très joli résumé. Quand je publierai les sessions sur mon site je me permettrai de faire un lien vers cet article. Merci encore d’être venu, ravi que vous ayez trouvé cela intéressant.

  3. Antoine Berthelin dit :

    Bonjour Olivier et merci pour ton retour,
    Tu peux référencer notre article avec grand plaisir !

    Antoine

  4. Je rajouterai que les webcasts pour cette session sont désormais disponibles 🙂

    http://www.microsoft.com/fr-fr/showcase/details.aspx?uuid=1f926d2c-e752-48ff-bffb-68cecaca628e

AJOUTER UN COMMENTAIRE