Petits blocs visuels, souvent carrés ou rectangulaires, qui servent à présenter une option, une fonction ou une information de façon simple et claire. On les utilise comme des boutons illustrés ou des raccourcis visuels par exemple dans un menu, un tableau de bord ou une page d’accueil.
Elles permettent de naviguer facilement ou d’accéder à une action en un coup d’œil, grâce à une icône, un mot ou une image. Très utiles en pédagogie ou dans les interfaces pour débutants, car elles rendent l’usage intuitif.
Syn. : tuiles d’interface
Exemple
Caractéristiques des UI tiles
- Conteneur autonome
Chaque tuile regroupe un ensemble cohérent d’informations ou d’actions : texte, icône, image, métrique, bouton, etc. - Disposition en grille
Les tuiles s’alignent selon une structure responsive (souvent via CSS Grid ou Flexbox), s’adaptant à différents écrans. - Interactivité claire
Elles sont généralement cliquables ou tapables, avec un feedback visuel (ombre au survol, changement de couleur, etc.). - Hiérarchie visuelle
La taille, la couleur ou l’icône peuvent indiquer l’importance ou la catégorie de l’élément. - Esthétique « card-like »
Souvent inspirées du Material Design (Google) ou du Fluent Design (Microsoft), avec coins arrondis, ombres portées et espacement aéré.
Exemples concrets
| Contexte | Usage typique |
|---|---|
| Dashboard admin | Tuiles pour « Utilisateurs actifs », « Erreurs système », « Dernières commandes » |
| Intranet / Portail | Accès rapide à RH, formation, outils collaboratifs |
| E-commerce | Produits affichés en tuiles (image + prix + CTA) |
| Windows Start Menu | Icônes dynamiques en tuiles (historique Microsoft) |
| Applications mobiles | Menu principal sous forme de tuiles (ex. banque, santé) |