Romain Dao nous parle des patterns UI https://www.figma.com/community/file/1118225111623734519 ------------------ Retrouvez-nous sur https://friends.figma.com/cotonou/

1. friends.figma.com/cotonou

2. About me
• 33 years old
• 1st job a Criteo
•
• 8 years as a freelance
•
• 2 years spent in Argentina
•
• Musician
•
• Front-end developer
•
• Started design with
• macromedia Flash MX
•
• The Cacatoès Theory founder

3. Nom masculin
Pattern
Modèle spécifique représentant d'une
façon schématique la structure d'un
comportement individuel ou collectif.
source: larousse.fr

4. Qu’est ce qu’une pattern UI
Une succession d’étapes linéaires ou non,
qui permettent à l’utilisateur de compléter
une action définie (schema)

5. Toute interface (SaaS) est une
succession de patterns
Celles-ci peuvent avoir plusieurs issues
“un comportement de l’interface connu et attendu par le
user”

6. Le login
Objectif
Accéder à l’application et à ses données (compte)
de manière sécurisée
Méhodes
3 façons différentes de se login
• Email/Password
• Mobile + Verification code
• SSO - Single Sign On (Apple & Google)
3 user flow différents avec la même finalité
1 2
3
4

7. Connais-tu d’autres
façons de se login sur
une platerforme SaaS ?

8. Les 5 règles de la bonne pattern UI
➡️ Une pattern n’existe que dans un contexte
➡️ Laisser le choix à l’utilisateur (si possible) & le guider
➡️ Rester cohérent et ne pas réinventer la roue
➡️ Anticiper les éventuelles erreurs (sytème et user)
➡️ Indiquer le début et la fin de la pattern

9. RÈGLE 1
Une pattern n’existe
que dans un
contexte
exemple: le bulk (multiselect)

10. O item selected - All email read

11. 1 (or more) item selected - All email read
Mark as unread

12. All items selected - 1 or more unread email
Mark as Read

13. Sur Figma
Si 2+ calques sélectionnés -> Bulk rename

14. RÈGLE 2
Laisser le choix
au user (et le
guider)
exemple: Onboarding & Save as draft

15. ONBOARDING
➡️ Onfocus sur le premier input
➡️ Error & colored inputs
➡️ Navigation bullet
➡️ Create account = sortie
➡️ Browse assets = sortie

17. SAVE AS DRAFT
intérompre un flow et le sauver
pour le reprendre plus tard

18. UNE PATTERN UI EST
DRIVÉE PAR LA TECH !

19. ON NE DOIT JAMAIS
CONSTRUIRE UNE
FEATURE SUR LA BASE
D’UN EXCEPTION

20. RÈGLE 3
Rester cohérent
et ne pas
réinventer la roue
exemple: Navigation, messagerie ...

22. NAVIGATION
MESSAGERIES
FORMULAIRES
NOTIFICATIONS
...

23. Tout User flow est
une succession de patterns
qui peuvent elles mêmes
être scindées en plus
petites patterns

24. RÈGLE 4
Anticiper et
indiquer les
éventuelles erreurs
(sytème et user)
exemple: Import csv, supression

25. Import de .csv
Import de data dans une base de donnés
1 - Préparer la donnée et la formater
2 - Importer le fichier dans l’interface
3 - Matcher la data
4 - Valider et importer
5 - Success ou Error
6 - Si Error où ?

26. Columns matching

27. Upload document
Success
Error

28. Match columns
Avec preview des datas

29. Columns validation
• Indiquer les columns validées
• Refresh la data

30. RÈGLE 5
Indiquer le début
et la fin de la
pattern
exemple: Stepper, Empty states

31. Aider le user à se projetter dans la flow

32. Empty States

33. MERCI !