Accueil » Blog » Soignez vos boutons !

Soignez vos boutons !

Je planifie régulièrement mes déplacements en train via le site de la SNCB.

Récemment, quelques modifications sont intervenues au niveau de la réservation des billets.

L’accès au formulaire est plus immédiat au départ de la page d’accueil. Ca, c’est pour l’amélioration.

En revanche, un détail que je trouve fort gênant, dans la première étape de la procédure, c’est le bouton d’envoi des données.

Plusieurs caractéristiques de ce bouton pourrait être améliorées en vue de rendre son usage plus évident :

  • La position : Il est plus naturel de placer les boutons de confirmation d’un formulaire en bas à droite. Ici, il est à gauche et perd de sa puissance par rapport au sens habituel de lecture. Le lien “Plus d’options”, par définition facultatif, apparaît, du coup, plus présent que le bouton principal.
  • Le format : La taille du bouton me paraît fort modeste. Le texte est comprimé et peu lisible. Le bouton manque de présence.
  • La couleur : La couleur grise n’est pas des plus propices à attirer le regard. Le rouge ou le vert, voire un bleu électrique en cohérence avec la charte graphique, me paraîtraient plus efficaces.
  • Le libellé : L’instruction “Afficher trains” sonne un peu sèche. On pourrait remplacer par “Afficher les trains disponibles” pour plus de convivialité. Il n’y a aucun mal à utiliser trois ou quatre mots plutôt que deux, si c’est pour gagner en clarté.

Vous êtes d’accord avec moi ou je cherche la petite bête ? 😉

Vous souhaitez améliorer vos interfaces graphiques ? Consultez notre service de design graphique et ergonomique !

Commentaires des lecteurs

  • Comment by Mathieu Laurent — 1 December 2008

    T’as raison. Avant de lire ton explication en-dessous de la capture, je ne l’ai pas trouvé, je pensais qu’on avait le choix entre Thalys, Eurostar, TGV, … 5 boutons !

  • Comment by Andrea — 3 December 2008

    Je suis d’accord. Personnellement, je suis aussi plus attiré par le lien ‘Plus d’options’ (mieux placé et plus lisible) que par le bouton principal.

    Peut-être le lien "Plus d’options" pourrait tout aussi bien rester à droite du bouton principal (il faudrait vérifier la situation actuelle, mais pendant tout un temps c’était une configuration assez standard), mais alors il devrait en constituer simplement une continuation: il devrait être visuellement attaché au bouton, et les deux former un seul bloc, qui pourrait dans ce cas même rester à gauche. Il serait intéressant de tester cette configuration.

    En fait, je suis en train de penser que, question position, peut-être le problème plus grand n’est pas tellement celle du bouton lui même, mais le fait que le lien ‘Plus d’options’ attire trop le regard, et par sa distance l’éloigne du bouton principal.

  • Comment by Vincent — 8 December 2008

    Tu as tout à fait raison, c’est le genre de "petite bête" qu’il faut chercher à tout prix pour rendre un site plus ergonomique.

  • Comment by Guy, photographe — 18 December 2008

    C’est bien simple, j’ai dû chercher le bouton de validation !
    (par contre les vôtres on les voit très bien et ils sont très explicites du fait des icônes, la flèche et le RSS).

  • Comment by C-lévidence-même — 13 April 2009

    Dans le même genre, vous avez celui de la RATP : la recherche d’itinéraires.

    Un principe d’ergonomie très étrange qui consiste à cliquer sur le bouton "Itinéraires" qui se trouve être dans le même cartouche que celui dans lequel vous inscrivez votre adresse d’arrivée.

    Pire encore, c’est le même cartouche "départ/plan arrivée" dans lequel vous inscrivez soit votre adresse de départ, soit l’adresse dont vous cherchez le plan de quartier.

    On attendrait plutôt : un cartouche permettant d’inscrire son adresse de départ et d’arrivée avec un bouton en bas à droite "Lancer la recherche" et un autre cartouche permettant de rechercher un plan de quartier.

Votre commentaire

Your email address will not be published. Required fields are marked *

Je suis un humain*

This site uses Akismet to reduce spam. Learn how your comment data is processed.