UI/UX Design - Les bases

La notion de design d’expérience utilisateur (ou UX design) renvoie aux approches de conception de produits, d’interfaces et de services toujours mieux adaptés aux personnes qui les utilisent. Afin de dissiper les mauvaises interprétations et contresens, cette petite conférence s'attache aux principes et théories de base de l’UX.

Transcript

1. R é a l i s é e p a r C O N F É R E N C E UI / UX Design Les bases LANCEZ VOTRE PROJET DE STARTUP
2. D A V I D E N D I C O C O F O U N D E R & E R G O D E S I G N E R @ D a v i d E n d i c o B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 - 3 7
3. Qu’est-ce que l’UI / UX Design ? B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 - 3 7
4. C ’ E S T Q U O I L E D E S I G N ? D e s i g n i s n o t j u s t w h a t i t l o o k s a n d f e e l s l i ke . D e s i g n i s h o w i t w o r k s . — S t e v e J o b s , Th e T i m e s - 2 0 0 3 B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 4 - 3 7
5. B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 5 - 3 7
6. U t i l i s a t e u r B e s o i n C o n t ex t e B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 6 - 3 7
7.  U T I L I T É Répondre à un besoin  U T I L I S A B I L I T É Faciliter la réponse au besoin B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 7 - 3 7
8. U I = U s e r I n t e r fa c e = L i e n e n t r e l ’ H o m m e e t l a m a c h i n e B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 8 - 3 7
9. U X = U s e r e X p e r i e n c e = P e r c e p t i o n s d e l ’ u s a g e d ’ u n e p l a t e f o r m e B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 9 - 3 7
10. C ’ E S T Q U O I L ’ U X ? B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 0 - 3 7
11. B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 1 - 3 7
12. P R O D U C T U I U X L ’ U I / U X D E S I G N , C ’ E S T : B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 2 - 3 7
13. L ’ U I / U X D E S I G N , C ’ E S T : L ’ U X D e s i g n e s t u n e m é t h o d o l o g i e d ’ a n a l y s e e t d e c o n c e p t i o n v i s a n t à c o m p r e n d r e l e s u s a g e s d ’ a u j o u r d ’ h u i , e t s u r t o u t a n t i c i p e r c e u x d e d e m a i n . E n p l a ç a n t a u c o e u r l e s u s a g e s d e s u t i l i s a t e u r s ! — Au d r e y R I V Y , L u n aWe b - 2 0 1 7 B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 3 - 3 7
14. D U C O U P . . . L’UI / UX Design, c’est le boulot de l’UI / UX Designer B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 4 - 3 7
15. D U C O U P . . . L’UI / UX Design, c’est le boulot de l’UI / UX Designer FAUX B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 5 - 3 7
16. Théorie de la Gestalt P S Y C H O L O G I E D E L A F O R M E B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 6 - 3 7
17. L O I D E S I M I L A R I T É F O R M E B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 7 - 3 7
18. L O I D E S I M I L A R I T É C O U L E U R B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 8 - 3 7
19. L O I D E S I M I L A R I T É T A I L L E B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 1 9 - 3 7
20. L O I D E S I M I L A R I T É B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 20-37
21. L O I D E P R O X I M I T É B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 1 - 3 7
22. L O I D E C O N T I N U I T É B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 2 - 3 7
23. L O I D E H I É R A R C H I E B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 3 - 3 7
24. B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 4 - 3 7
25. L O I D E F I T T S L e t e m p s p o u r c i b l e r u n é l é m e n t d é p e n d d e l a d i s t a n c e e t d e l a t a i l l e d e l a c i b l e . — P a u l F I T T S - 1 9 5 4 B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 5 - 3 7
26. L O I D E F I T T S A g r a n d i r l e s z o n e s v i s i b l e s A g r a n d i r l e s z o n e s i n t e r a c t i v e s D i m i n u e r l e s d i s t a n c e s d e s é l é m e n t s Valider Valider Lien Lien B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 6 - 3 7
27. A F F O R D A N C E C a p a c i t é d ’ u n o b j e t à s u g g é r e r s a p r o p r e u t i l i s a t i o n . — J a m e s J . G I B S O N - 1 9 7 7 B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 7 - 3 7
28. A F F O R D A N C E  Supprimer  + B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 8 - 3 7
29. A p p r e n t i s s a g e ex t e r n e R e s p e c t e r l e s c o n v e n t i o n s ! C a p i t a l i s e z s u r l ’ ex p é r i e n c e d é j à a c q u i s e p a r v o s u t i l i s a t e u r s . Vocabulaire + Positionnement + Interaction B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 2 9 - 3 7
30. A p p r e n t i s s a g e i n t e r n e R e s t e z c o h é r e n t ! F l u i d i f i e z l ’ ex p é r i e n c e d e v o s u t i l i s a t e u r s e n r e s t a n t c o h é r e n t t o u t a u l o n g d e l e u r n a v i g a t i o n . Vocabulaire + Positionnement + Interaction B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 0 - 3 7
31. B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 1 - 3 7
32. Et la règle des 3 clics ? B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 2 - 3 7
33. B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 3 - 3 7
34. Et la règle des 3 clics ? B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 4 - 3 7
35. E X E M P L E : Priceminister B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 5 - 3 7
36. B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 6 - 3 7
37. P O U R A L L E R P L U S L O I N  G o o d U I b y J a k u b L i n o w s k i w w w . g o o d u i . o r g  E r g o n o m i e w e b b y A m é l i e B o u c h e r w w w . e y r o l l e s . c o m  E x p é r i e n c e u t i l i s a t e u r m o b i l e b y A m é l i e B o u c h e r w w w . e y r o l l e s . c o m  N e w f l u x w w w . n e w f l u x . f r B e a r S t u d i o A l l r i g h t s r e s e r v e d @ D a v i d E n d i co 3 7 - 3 7