UX Cards vol 2 – 6 règles d’ergonomie web à découvrir

Bouton primaire

  • Utiliser des couleurs saturées en accord avec l'action demandée (ex :rouge = danger, vert = continuer)
  • Employé pour des actions incitatives, irréversibles, et des actions de sécurité
  • Accompagner le bouton d'un label explicite (ex: soumettre, sauvegarder, continuer)
  • Ne pas faire : Accompagner le bouton d'un label vague (ex : go, ok)
Règle d'ergonomie web - bouton

Bouton secondaire

  • Employé pour des actions non incitatives, et moins importantes
  • Employé lorsque l'action est désactivée
  • Le bouton peut être remplacé par un simple lien
  • Utiliser des labels explicites en accord avec l'action (ex : annuler, retour, passer à l'étape suivante)
Règle d'ergonomie web - bouton secondaire

Besoins d'un expert en UX UI design

Type de bouton

  • 1.Bouton primaire, à utiliser pour les actions importantes
  • 2. Bouton secondaire, à utiliser pour les actions moins importantes
  • 3. Bouton spécial, à utiliser pour des boutons tels que "ajouter au favoris", "like", "tweet"....
  • Ne pas faire : Accompagner le bouton d'un label vague (ex : go, ok)
Règle d'ergonomie web - type de bouton

Boîte de dialogue / Modale

Ce qui est conseillé

  • Lecture naturelle du type Z-layout
  • Balayage rapide et facile de la boite
  • L'utilisateur fait le tour des actions possibles avant de terminer par l'action
Règle d'ergonomie web - modale

Boîte de dialogue / Modale

Ce qui est déconseillé

  • Lecture moins naturelle et fixation visuelle accrue
ergonomie web - modale

Ergonomie d’une Landing page

  • 1- Titre principale ou H1
  • 1.a / 1.b / 1.C - Sous titre / Argument accrocheur
  • 2 - Image ou vidéo principale
  • 3 - Argument de vente
  • 3.a - Liste sommaire des avantages
  • 4 - Témoignages
  • 4 - Incitation à l'action (newsletter, test gratuit de la solution, contact etc...)
ergonomie web - landing-page

Partager cet article

Partager sur linkedin
Partager sur facebook
Partager sur twitter
Partager sur email
Partager sur print

2 réflexions au sujet de “UX Cards vol 2 – 6 règles d’ergonomie web à découvrir”

Laisser un commentaire

Sommaire

Travaillons ensemble !

Vous avez un projet, je suis là pour vous aider, contactez moi.