The Good, The Bad and The UX – Apprenez les patterns UX par l'exemple

FormulairesNouveau

Saisie de la date de naissance

Utiliser trois champs texte (jour, mois, année) avec auto-advance au lieu des date pickers natifs ou des longs dropdowns.

forminputdatebirthdaymobileaccessibility

Mauvais exemple

Date of birth

Bon exemple

Date of birth

Formulaires

Toggle switches pour les réglages immédiats

Utiliser des toggle switches pour les réglages indépendants à effet immédiat, pas des checkboxes qui impliquent une action différée.

togglecheckboxswitchsettingsform

Formulaires

Checkboxes pour la sélection groupée

Utiliser des checkboxes quand les utilisateurs sélectionnent parmi un groupe d'options nécessitant une confirmation explicite.

checkboxtoggleformselectionsubmit

Formulaires

Checkboxes pour la sélection hiérarchique

Utiliser des checkboxes avec état indéterminé pour les hiérarchies parent-enfant. Les toggles ne peuvent pas exprimer une sélection partielle.

checkboxtogglehierarchyindeterminateform

Input

Ne pas limiter la saisie utilisateur

Permettre aux utilisateurs de dépasser la limite de caractères et afficher un feedback clair au lieu de bloquer silencieusement.

inputtextareacharacter-limitvalidationfeedback

Mauvais exemple

Article title

No way to enter more text

Description

Text is cut off without warning

Bon exemple

Article title (max 15 chars)

5 characters over limit (20/15)

Description (max 100 chars)

20 characters over limit (120/100)

Navigation

Bouton d'action flottant (FAB)

Masquer le FAB au scroll vers le bas et l'afficher au scroll vers le haut

fabbuttonnavigationaccessibilitymobileux

Mauvais exemple

Scroll down, then try to create a post

U

User 1

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 2

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 3

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 4

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 5

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 6

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 7

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 8

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

The "Create Post" button disappears when scrolling

Bon exemple

Scroll down — the create button stays accessible

U

User 1

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 2

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 3

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 4

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 5

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 6

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 7

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

U

User 8

Just shared something interesting! This is a sample post that shows how a social feed might look. What do you think about this topic?

FAB stays visible regardless of scroll position

Feedback

Toast vs Feedback inline

Utiliser un feedback inline pour les actions contextuelles plutôt que des toasts déconnectés

toastfeedbackcopyclipboardaccessibility

Mauvais exemple

Click the ••• menu and select "Copy link" ?👇

Alex Johnson

2h ago

Just shared something interesting that I think you'll all enjoy! Check it out and let me know what you think.

Bon exemple

Click the ••• menu and select "Copy link" ?👇

Alex Johnson

2h ago

Just shared something interesting that I think you'll all enjoy! Check it out and let me know what you think.

Formulaires

Ergonomie des dropdowns

Remplacer les longues listes déroulantes par des sélecteurs avec recherche

formselectinputaccessibilitymobile

Mauvais exemple

Country

Bon exemple

Country

Input

Options d'affichage

Utiliser des toggles visuels clairs pour les options d'affichage au lieu de checkboxes

formselectinputaccessibility

Mauvais exemple

Subscription plan

Bon exemple

Plusieurs bons exemples !

Subscription plan

Modales

Interactions de fermeture de modale

Permettre aux utilisateurs de fermer les modales de plusieurs façons : bouton X, clic extérieur, touche Échap

modalaccessibilitykeyboardux

Mauvais exemple

Bon exemple

Navigation

Bouton retour en haut

Afficher un bouton flottant pour remonter en haut sur les pages longues

scrollnavigationbuttonaccessibilityux