UX Cards vol 1- 8 règles d’UX design à découvrir

Sommaire

Retrouvez dans cet article un mémento sur les règles de bases en ergonomie d’interface / UX design sous la forme d’un set de carte.

Au programme : Les layouts, hamburger menu, tab menu, header et footer menu, l’image dans un article.

Retrouvez toutes les cartes téléchargeables sur GITHUB.

Navigation : Le hamburger menu

  • Permet de placer beaucoup de section dans le menu
  • Concept commun, tout le monde connait le hamburger menu
  • On ne sait pas ce que l'on va trouver dans un hamburger menu

hamburger-menu-UX design

Navigation : Le tab menu

  • Permet d'identifier rapidement les sections d'un menu
  • L'accès aux sections se fait rapidement
  • Eviter son usage s'il y a beaucoup de sections importantes à placer dans le menu

tab-menu-menu-UX design

Navigation : Le F-layout

  • Permet un lecture naturelle du contenu du site web
  • Contient les éléments importants dans la partie supérieure du site web
  • Contient les éléments les plus importants le long du bord gauche du site web
  • L'utilisateur est moins attentif au contenu du site en dessous de la "F"

f-layout-UX design

Navigation : Le z-layout

  • Permet une lecture naturelle du contenu
  • L'utilisateur reste attentif sur toute la hauteur du site
  • L'attention de l'utilisateur est moindre sur TOUTE la hauteur du site

z-layout-ux-design

Navigation : le header menu

  • Contient l'image de marque du site (logo, slogan)
  • Contient les liens de premier niveau de l'arborescence du site
  • Doit permettre un accès rapide aux éléments importants du site (panier, connexion, inscription
  • Les liens doivent être modifiables facilement selon leur popularité

header-menu-recto

Besoins d'un expert en UX UI design

Navigation : Le footer menu

  • Contient les liens statiques et informatifs
  • Contient les liens les moins importants du site
  • Contient les liens déjà présents autre part sur le site

footer-menu-ux design

L’image dans un article 1

  • Le protagoniste de l'image regarde en face
  • Le contenu de l'article perd de l'intérêt pour l'utilisateur

Composition image - UX design

L’image dans un article 2

  • Le protagoniste de l'image regarde l'article
  • L'utilisateur regarde dans le même sens que le protagoniste de l'image
  • Le contenu de l'article gagne en intérêt pour l'utilisateur

Composition image - UX design

Partager cet article

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

Laisser un commentaire