Quotidien Shaarli
September 29, 2025
Dans ce billet, Lea Verou explore l’idée que le succès d’un produit dépend de la manière dont il gère l’effort demandé à l’utilisateur en fonction de la complexité des cas d’usage. Elle illustre ce principe avec plusieurs exemples : Google Calendar, qui optimise les cas simples tout en permettant les cas complexes avec un effort supplémentaire ; l’élément HTML <video>
, où la personnalisation des contrôles devient soudainement très coûteuse en effort ; l’éditeur Instagram, qui sépare les filtres prédéfinis des réglages avancés ; et Coda, qui intègre intelligemment des formules générées automatiquement pour faciliter la transition entre simplicité et complexité. Elle souligne aussi l’importance de concevoir des interfaces qui minimisent l’effort utilisateur, même si cela complique l’implémentation, comme le montre l’exemple des robinets ou des bornes de train d’Oslo. L’article plaide pour une courbe d’effort progressive, évitant les « falaises d’utilisabilité » où un petit besoin supplémentaire exige un effort démesuré. En résumé, un bon design doit être une « bonne affaire » pour l’utilisateur, pas une arnaque.
Le positionnement par ancre (anchor positioning) est une nouvelle fonctionnalité CSS qui permet de positionner visuellement un élément par rapport à un autre, indépendamment de leur place dans le DOM. Idéal pour les info-bulles, menus contextuels ou modales, il utilise anchor-name
pour définir une ancre et position-anchor
pour l’associer à un élément positionné (en absolute
ou fixed
). Le placement s’effectue via anchor()
ou position-area
, tandis que anchor-size()
permet d’adapter les dimensions de l’élément en fonction de l’ancre. La propriété position-try
gère les débordements en proposant des solutions de repli. Compatible avec les navigateurs modernes, cette technique offre une alternative flexible aux méthodes traditionnelles, tout en nécessitant une attention particulière à l’accessibilité. Des outils comme Anchor Tool et des démos pratiques illustrent son potentiel.
Le projet MicroStack, un rack modulaire imprimé en 3D pour organiser des mini-PC en homelab, s’enrichit désormais avec la compatibilité des HP EliteDesk/ProDesk et Lenovo ThinkCentre Tiny, en plus des Dell OptiPlex Micro déjà supportés. L’auteur a répondu aux demandes de la communauté en développant des modules dédiés pour chaque marque, tous inter-compatibles et empilables, permettant de mixer les appareils dans un même rack. La collection comprend aussi des modules de stockage et un "chapeau" pour une finition propre. Le design utilise un motif honeycomb pour une bonne ventilation et il est recommandé d’imprimer en PETG pour une meilleure résistance thermique. Le projet, open source et disponible sur MakerWorld, a reçu un accueil positif, avec des retours d’utilisateurs montrant des installations mixtes. L’auteur invite à proposer d’autres modèles de mini-PC à intégrer et encourage les retours et partages pour faire évoluer le projet.
L’article aborde les enjeux d’accessibilité et d’UX liés au défilement horizontal sur le web, un choix de design souvent esthétique mais problématique pour de nombreux utilisateurs (personnes naviguant au clavier, avec des troubles moteurs ou visuels, etc.). Bien que populaire (carrousels, galeries, etc.), ce modèle pose des défis majeurs : contenu manqué, navigation complexe, gestes difficiles, perte de repères, et incompatibilités selon les appareils. Le RGAA et les WCAG encadrent ces pratiques en France, rappelant que l’accessibilité améliore l’expérience pour tous et favorise l’inclusion. Si le défilement horizontal est parfois incontournable, des bonnes pratiques existent (balises ARIA, contrôles clairs, navigation clavier, gestion du focus) pour limiter ses impacts négatifs. L’article conclut en encourageant à privilégier la clarté, la simplicité et l’inclusion plutôt que les tendances visuelles, soulignant que les carrousels, par exemple, sont souvent peu efficaces et mal perçus par les utilisateurs. Une réflexion utile pour repenser les interfaces de manière plus universelle.