Cet article de SitePoint propose 10 conseils pour une évaluation efficace de l'expérience utilisateur (UX). Parmi ces conseils, on retrouve l'importance d'afficher l'état du système, d'organiser clairement l'information, de donner aux utilisateurs un contrôle total, de réaliser des tests d'utilisabilité, de concevoir une interface esthétique et minimaliste, d'utiliser le langage de l'utilisateur, de fournir une aide pour l'accessibilité, d'identifier et corriger les problèmes courants de UX, d'améliorer continuellement le produit et de réaliser des tests A/B. Ces pratiques visent à améliorer la satisfaction et la fidélité des utilisateurs en rendant les produits plus intuitifs et conviviaux.
L'auteur décrit avec humour et frustration l'incroyable complexité des boutons radio dans un projet utilisant Shadcn, un framework UI basé sur Radix. Initialement simple avec une balise HTML native, le bouton radio devient un composant React complexe de 45 lignes, intégrant des dépendances externes pour un simple cercle. L'article explore les couches de complexité ajoutées par Shadcn et Radix, questionnant la nécessité de cette sur-ingénierie pour un élément basique. Il se termine avec ce bout de code qui permet de faire la même chose... en plus simple
input[type="radio"] {
/* Disable the browser's default radio button styles */
appearance: none;
margin: 0;
/* Recreate the circle container */
border: 1px solid black;
background: white;
border-radius: 50%;
/* Center our dot in the container */
display: inline-grid;
place-content: center;
/* Use a pseudo-element to display our "dot" */
&::before {
content: "";
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
}
/* And display it when the radio button is checked */
&:checked::before {
background: black;
}
}L’article explique que les développeurs n’ont pas besoin d’être des designers pour créer des interfaces utilisateur efficaces. Cinq principes clés sont détaillés : la couleur (théorie, palettes, et règles comme 60-30-10), la typographie (choix des polices, interlignage, espacement des lettres), la hiérarchie visuelle (taille, poids, contraste, espace), le contraste (accessibilité, lisibilité), et l’alignement (ordre et équilibre). Ces concepts permettent de guider l’utilisateur, d’améliorer l’expérience et de rendre les interfaces plus professionnelles et accessibles, même sans expertise en design. L’article encourage à s’inspirer d’outils comme Coolors ou Fontpair et à pratiquer pour progresser.
L’article explique comment concevoir des tableaux clairs et efficaces, en s’appuyant sur les travaux d’Edward Tufte et de Charlie Munger. Il souligne que le choix entre tableau et graphique dépend de l’usage : les tableaux conviennent mieux aux petits jeux de données et aux comparaisons précises, tandis que les graphiques mettent en valeur les tendances et le mouvement des données. Pour rendre un tableau lisible, il recommande de limiter les bordures et les couleurs, d’aligner correctement le texte et les nombres (à droite pour ces derniers), et d’éviter les répétitions inutiles. L’article propose aussi des bonnes pratiques en HTML/CSS pour structurer et styliser les tableaux, comme l’utilisation de <thead>, <tbody>, et <tfoot>, l’alignement vertical sur la baseline, et l’adaptation responsive pour mobile. Enfin, il insiste sur l’importance de maximiser le ratio "data-ink" (encre utile) et de supprimer tout élément redondant ou superflu pour faciliter la compréhension. Une référence utile pour quiconque souhaite améliorer la présentation de données.
Il s'agiç d'une bibliothèque de composants pour Vue.js basée sur Tailwind et PrimeVue
Il s'agit d'un comparatif de différentes bibliothèques de composants UI pour Vue / Nuxt
Un billet d'humeur... dont je plussoie la conclusion
Une bibliothèque de composants bas niveau, non stylisés, pour Vue
Un catalogue de bibliothèques UI pour les projets Vue / Nuxt
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre (via https://stephaniewalter.design/fr/blog/semaine-pixels-27-janvier-2017/ )
Tout est dans le titre