Domain-Driven User Interface Design
-
Upload
corentin-moussard -
Category
Design
-
view
29 -
download
1
Transcript of Domain-Driven User Interface Design
![Page 1: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/1.jpg)
Corentin Moussard
![Page 2: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/2.jpg)
Domain-Driven User Interface Design
![Page 3: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/3.jpg)
![Page 4: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/4.jpg)
iOS 7
![Page 5: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/5.jpg)
Material Design
![Page 6: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/6.jpg)
Icons
![Page 7: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/7.jpg)
Animations
![Page 8: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/8.jpg)
“Une bonne interface est une belle interface“
![Page 9: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/9.jpg)
![Page 10: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/10.jpg)
Qu’est ce qu’une interface?
![Page 11: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/11.jpg)
![Page 12: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/12.jpg)
![Page 13: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/13.jpg)
Le domaine? Ensemble de concepts qui à travers des cas d’usage permettent de résoudre des problèmes
![Page 14: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/14.jpg)
domaine interface user
![Page 15: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/15.jpg)
![Page 16: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/16.jpg)
Le langage du domaine
![Page 17: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/17.jpg)
Les concepts d’un domaine :
- Objets - Actions - Evénements
![Page 18: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/18.jpg)
Objet
![Page 19: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/19.jpg)
Objet : groupe nominal
![Page 20: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/20.jpg)
Action
![Page 21: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/21.jpg)
Action : verbe
![Page 22: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/22.jpg)
Evénement
![Page 23: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/23.jpg)
Evénement : participe passé
![Page 24: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/24.jpg)
Introduire le langage du domaine dans l’interface
![Page 25: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/25.jpg)
google inbox
![Page 26: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/26.jpg)
![Page 27: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/27.jpg)
![Page 28: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/28.jpg)
Eviter les termes génériques, utiliser le langage du domaine
![Page 29: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/29.jpg)
Rafraichir
![Page 30: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/30.jpg)
Rafraichir Relever le courier
![Page 31: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/31.jpg)
Signifié / Signifiant
![Page 32: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/32.jpg)
![Page 33: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/33.jpg)
![Page 34: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/34.jpg)
Prendre en compte le contexte culturel
![Page 35: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/35.jpg)
![Page 36: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/36.jpg)
![Page 37: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/37.jpg)
Hiérarchiser les concepts
![Page 38: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/38.jpg)
![Page 39: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/39.jpg)
Choisir une boite mail
Lire un email
Ecrire un email
Un email reçu
Un email envoyé
![Page 40: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/40.jpg)
Choisir une boite mail
Lire un email
Ecrire un email
Un email reçu
Un email envoyé
![Page 41: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/41.jpg)
![Page 42: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/42.jpg)
Connaître les tendance Sans forcément les suivre
![Page 43: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/43.jpg)
![Page 44: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/44.jpg)
![Page 45: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/45.jpg)
![Page 46: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/46.jpg)
Construire une charte lisible et explicite
![Page 47: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/47.jpg)
Contraster
![Page 48: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/48.jpg)
![Page 49: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/49.jpg)
Legible fonts
![Page 50: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/50.jpg)
Ma première présentation :)
![Page 51: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/51.jpg)
Si vous pensez que c’est assez grand, ajoutez 20%
![Page 52: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/52.jpg)
L’affordance
![Page 53: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/53.jpg)
Expliciter le potentiel d’interaction
![Page 54: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/54.jpg)
![Page 55: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/55.jpg)
![Page 56: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/56.jpg)
Le Feedback
![Page 57: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/57.jpg)
![Page 58: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/58.jpg)
![Page 59: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/59.jpg)
![Page 60: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/60.jpg)
• Introduire le langage du domaine dans l’interface
• Hiérarchiser les concepts
• Construire une charte lisible et explicite
![Page 61: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/61.jpg)
• Introduire le langage du domaine dans l’interface
• Hiérarchiser les concepts
• Construire une charte lisible et explicite
Tester
![Page 62: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/62.jpg)
Interface fonctionnelle
& explicite
![Page 63: Domain-Driven User Interface Design](https://reader031.fdocuments.us/reader031/viewer/2022020410/58f363e21a28abb0658b457d/html5/thumbnails/63.jpg)
Merci
www.alune.fr