Ponçage de l’UI

(blog.jim-nielsen.com)

2 points par GN⁺ 2024-09-22 | Aucun commentaire pour le moment. | Partager sur WhatsApp

En développement, on construit quelque chose, on clique plusieurs fois, on modifie, puis on reclique, en répétant ce processus
Lors des changements de page, on utilise plusieurs fois le bouton retour
C’est une sorte de tactique de QA, qui consiste à cliquer pour trouver les problèmes et les corriger
C’est comparable au travail du bois : on règle d’abord les gros problèmes, puis on affine les détails

Les logiciels comportent trop de variables pour tout tester et peaufiner facilement
On utilise l’UI à plusieurs reprises pour repérer les problèmes et les corriger, en répétant le processus

Placer et sur la même ligne, les aligner au centre et ajouter de l’espacement
Autrefois, on utilisait les float en CSS, mais aujourd’hui on fait cela facilement avec flexbox

  
  Foo  
  
  
  
  
  .container {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    gap: .5rem;  
  }

Dans l’UI, on découvre une zone morte non cliquable entre le bouton radio et son libellé
On confirme que la propriété gap de flexbox est à l’origine du problème
On résout le problème en supprimant gap et en ajoutant du padding au libellé
En ajoutant du padding au libellé, on rend la zone cliquable sans créer de zone morte

De petits problèmes peuvent s’accumuler et provoquer une grande gêne
En répétant le processus de détection et de correction, on obtient au final un résultat fluide

Résumé de GN⁺

Cet article explique comment repérer et résoudre de petits problèmes pouvant survenir lors du développement d’une UI
flexbox permet de construire facilement une mise en page, mais des problèmes inattendus peuvent survenir
Pour résoudre le problème, plusieurs approches sont essayées, et c’est finalement le padding qui permet de le corriger
Il fournit des conseils utiles aux développeurs UI et souligne l’importance de résoudre les petits problèmes au fil du processus