• Agence
  • Services
    • Stratégie numérique
      • Accompagnement stratégique
      • Transformation numérique
      • Stratégie des médias sociaux
      • Stratégie de contenu
      • Stratégie influenceurs
    • Création et UX
      • Image de marque
      • Design web (UI)
      • Expérience utilisateur (UX)
      • Création graphique et infographie
    • Développement web
      • Développement e-commerce
      • Création de site web
      • Développement web & programmation
      • Gestion de contenu CMS
    • Marketing web
      • Gestion de communauté
      • Mesure de performance
      • Programmatique
      • Référencement naturel (SEO)
      • Référencement payant (SMM & SEM)
  • Projets
  • Carrières
  • Industries
    • Secteurs d’activités
      • Détaillants
      • Manufacturiers et distributeurs
      • Services professionnels
      • Obnl
  • Nous joindre
  • Blogue
  • Accueil
  • Agence
  • Services
    • Stratégie numérique
      • Accompagnement stratégique
      • Transformation numérique
      • Stratégie des médias sociaux
      • Stratégie de contenu
      • Stratégie influenceurs
    • Création et UX
      • Image de marque
      • Design web (UI)
      • Expérience utilisateur (UX)
      • Création graphique et infographie
    • Développement web
      • Développement e-commerce
      • Création de site web
      • Développement web & programmation
      • Gestion de contenu CMS
    • Marketing web
      • Gestion de communauté
      • Mesure de performance
      • Programmatique
      • Référencement naturel (SEO)
      • Référencement payant (SMM & SEM)
  • Projets
  • Carrières
  • Industries
    • Secteurs d’activités
      • Détaillants
      • Manufacturiers et distributeurs
      • Services professionnels
      • Obnl
  • Nous joindre
  • Blogue
  • Accueil

Design & ergonomie

Tout savoir sur le design des boutons


Les boutons sont des éléments simples, mais primordiaux pour une bonne expérience usager. Il ne faut toutefois pas négliger leur design.

Les boutons servent principalement à deux choses.

1- Ils doivent inciter l’usager à agir.

2- Ils doivent guider l’usager à travers le site.

Pour aboutir à ces deux actions, vous devez absolument bien réfléchir à la mise en place et au design de ceux-ci. Voici quelques éléments à prendre en considération lorsque vous ferez vos appels à l’action dans vos pages web :

La forme

Rectangles et rectangles à coins arrondis sont des classiques lors de la conception de sites web. Les flèches, lignes et autres formes géométriques sont de plus en plus utilisées, bien qu’elles soient moins performantes. L’important est de demeurer constant dans le choix de vos formes.

La taille

Sans exagérations, vos boutons doivent être bien visibles et proportionnés dans vos pages. La taille des boutons est d’autant plus importante pour la navigation sur appareils mobiles. Selon une étude faite par MIT Touch Lab, pour qu’un bouton soit facilement cliquable au contact d’un doigt, il devrait avoir une taille minimum de 10 mm de large.

La couleur

Comme pour un feu de circulation, vos boutons d’appels négatifs devraient être dans les teintes de rouge, et ceux positifs dans les teintes de vert. Ce langage est universel, donc impossible de mélanger l’usager! Vous pouvez aussi mettre les boutons d’annulation ou de refus en gris, ou en transparence, afin de laisser la vedette à votre bouton prédominant.

L’emplacement

Placez vos boutons dans un ordre et à un endroit où l’usager s’attend à trouver un bouton. Par exemple, vous trouverez toujours un bouton « précédent » placé à la gauche, et un bouton « suivant » à la droite.

À noter que pour les applications mobiles et les sites web mobiles, il est préférable de mettre les boutons d’appels positifs (oui, OK, envoyer, etc.) à porter du pouce.

Le message

Un court message de 1 à 3 mots, clair et précis. Si vous voulez inciter l’usager à prendre une action, assurez-vous de choisir des termes qui susciteront son intérêt.

Pour conclure, l’important est d’être constant dans vos choix d’éléments, afin de rendre l’expérience usager fluide et agréable.

Voici quelques exemples de boutons, pour vous inspirer lors de vos prochains projets!

3JPG

 

Paméla Théoret
Designer Web UX/UI

Source : https://uxplanet.org/button-ux-design-best-practices-types-and-states-647cf4ae0fc6#.q9retieer

Par Webit Interactive - le 04 octobre 2016
Partager

Contactez-nous

En voilà d'autres

Design & ergonomie
Nouveau logo signé Webit pour le Clos de l’Orme blanc
Lire la suite
Design & ergonomie
Les pratiques UX de base pour la navigation mobile
Lire la suite
Design & ergonomie
Les tendances UX pour 2020
Lire la suite
Design & ergonomie
Nouveau logo signé Webit pour le Clos de l’Orme blanc
Lire la suite
Design & ergonomie
Les pratiques UX de base pour la navigation mobile
Lire la suite
Design & ergonomie
Les tendances UX pour 2020
Lire la suite

Suivez-nous

170 Boul. Taschereau, Bureau 245, La Prairie,
(Québec) J5R 5H6

Itinéraire
+1 (514) 932-4840

Tenez-vous à jour

Avis légal

© Webit Interactive 2022