Le design applicatif
Michel Rousseau
UX/ UI tech evangelist
Microsoft France
@rousseau_michel
100 % process
0 % Art
0 % mignon
0 % hype
C’est un process de résolution
C’est un process intégré
C’est un process obligatoire
faisable
viable
desirable
business
technique
Design
Thinking
Techniques de création
Les techniques de création
brainstorming exploration consolidation
Brainstorming
Une session de brainstorming=20 mns
Plusieurs sessions
Plusieurs groupes
Plusieurs approches
Générer des concepts
Extraire des idées,
Extraire des scénarii,
Trouver des approches.
Vous aurez besoin de :
Folie, imagi...
Exploration
Rassembler les approches,
Rassembler les idées
Prototyper les concepts
Créer des schémas mentaux
Travailler les personae
V...
12:38
Text
Text
Text
Text
CONTOSO COOKBOOK
regions
12:38
Text
CONTOSO COOKBOOK
indian rec
CONTOSO COOKBOOK
recipes ind
piv...
12:38
CONTOSO COOKBOOK
regions
12:38
Regional recipes
12:38
Recipe Detail
12:38
About
12:38
Notes & Photos
Back BackBack
B...
Consolidation
Régler ce qui peut/doit être fait.
Prévoir la matrice d’effort.
Définir ce que vous devez acquérir.
Trancher/ itérer/ vote...
Le Branding intégré
Pour créer une charte graphique unique
Pour donner une valeur à vos concepts
Pour définir une silhouette applicative et un...
storytelling
Inviter l’utilisateur au partage des valeurs de votre
marque.
Ajouter de la plus-value visuelle.
Rendre votre...
10 conseils pour designer une app
1. la facilité d’utilisation /vs/ la
complexité du métier.
toujours proposer la solution la plus simple, même si le
contex...
2. le feedback.
un élément interactif doit signifier son état.
si un délai entre l’action et la réaction est à prévoir,
il...
3. la consistance.
quelle que soit la page consultée, une interaction
donnée doit produire la même réaction.
4. la fiabilité.
une application doit s’exécuter sans à-coup et sans
coutures.
5. la sécurité.
une application ne doit pas contenir de cul-de-sac, ni de
branches mortes.
Une action devrait toujours pou...
6. l’extensibilité.
le modèle doit s’adapter à une augmentation des
données que l’appli utilise.
7. la portabilité.
le modèle doit pouvoir s’adapter à un changement de
contexte (PC / mobile) .
8. la modularité.
créer des modules indépendants et interchangeables
permet de maintenir plus facilement son application.
...
9. la solidité.
l’application doit être user-proof et doit pouvoir revenir à
son état précédant une erreur de manipulation.
10. la performance.
Peu importe la plateforme, le langage ou la méthode
employée, l’application doit être fluide, dynamiqu...
Les 5 grandes lois du design
applicatif
Loi de Fitts
le temps de déplacement vers un item est
fonction de sa taille et de son emplacement.
Loi de proximité
Posez vos items rationnellement.
Souhaitez-vous aller
à la slide suivante ?
Annuler
Oui
La règle des trois tiers
Une grille ordonnée guide le regard et permet de
focaliser l’attention sur le centre d’intérèt.
Loi de Hick
Plus vous donnez de choix, plus long est le
processus de décision.
Le syndrome de Pareto
80 % de vos utilisateurs n’utiliseront que 20 % de
votre application.
Les 5 grands métiers du
design applicatif
L’ux designer
est au centre de l’interaction entre les utilisateurs
et le point de contact du métier (application,
packagi...
L’ui designer
crée les interfaces, les structures et les schémas
qui définissent la relation entre l’utilisateur et sa
mac...
L’ixd designer (design
d’interactions)
a une vision transverse des applications et
traduit le branding vers des plateforme...
Le SD designer (le solution
designer)
Est l’acteur majeur de la transformation
numérique permettant de transposer un conte...
L’ergonome
Apporte une valeur scientifique et incontestable
à l’analyse du comportement d’un utilisateur vis-
à-vis d’un s...
Les tendances actuelles du design
Le flat design a gagné cette bataille
Lisibilité de l’information
Orientation mobile & touch first
Génération web content
Mais avec des nuances propres…
Et une évolution intrinsèque…
Et des gimmicks générationnels…
Mais avec des guidelines communes:
https://developer.apple.com/library/ios/documentation/UserEx
perience/Conceptual/MobileHIG/
https://developer.android.com/...
Et avec ça ma brave dame ?
Vous auriez des logos trendy ? Il m’en
faudrait 300 gr …
Mono-script Facettes
Lignes Pompons
Liaisons Géométriques
Hexagones Dynamiques
Pour s’inspirer et pour finir, les
interfaces foutraques du cinéma
Oblivion
Gardians of the galaxy
Age of Ultron
Ender’s game
Prometheus
Alien
L’influence des jeux vidéos
Le design applicatif
@rousseau_michel
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Designer votre startup
Prochain SlideShare
Chargement dans…5
×

Designer votre startup

396 vues

Publié le

Design process, tendances, métiers, et considérations sur le design applicatif

Publié dans : Design
  • Soyez le premier à commenter

Designer votre startup

  1. 1. Le design applicatif
  2. 2. Michel Rousseau UX/ UI tech evangelist Microsoft France @rousseau_michel
  3. 3. 100 % process 0 % Art 0 % mignon 0 % hype
  4. 4. C’est un process de résolution
  5. 5. C’est un process intégré
  6. 6. C’est un process obligatoire
  7. 7. faisable viable desirable business technique Design Thinking
  8. 8. Techniques de création
  9. 9. Les techniques de création brainstorming exploration consolidation
  10. 10. Brainstorming Une session de brainstorming=20 mns Plusieurs sessions Plusieurs groupes Plusieurs approches
  11. 11. Générer des concepts Extraire des idées, Extraire des scénarii, Trouver des approches. Vous aurez besoin de : Folie, imagination, poésie, lacher-prise
  12. 12. Exploration
  13. 13. Rassembler les approches, Rassembler les idées Prototyper les concepts Créer des schémas mentaux Travailler les personae Vous aurez besoin de : prototyper, storyboarding, wireframing, sketching.
  14. 14. 12:38 Text Text Text Text CONTOSO COOKBOOK regions 12:38 Text CONTOSO COOKBOOK indian rec CONTOSO COOKBOOK recipes ind pivot Text Text Text Text 12:38 Contoso Cookbook Shows recipes grouped by regional style. User can view recipes, also add pictures and notes
  15. 15. 12:38 CONTOSO COOKBOOK regions 12:38 Regional recipes 12:38 Recipe Detail 12:38 About 12:38 Notes & Photos Back BackBack Back
  16. 16. Consolidation
  17. 17. Régler ce qui peut/doit être fait. Prévoir la matrice d’effort. Définir ce que vous devez acquérir. Trancher/ itérer/ voter. Tester. Vous aurez besoin de : Tests, décisions, rigueur
  18. 18. Le Branding intégré
  19. 19. Pour créer une charte graphique unique Pour donner une valeur à vos concepts Pour définir une silhouette applicative et un espace colorimétrique.
  20. 20. storytelling Inviter l’utilisateur au partage des valeurs de votre marque. Ajouter de la plus-value visuelle. Rendre votre app sexy.
  21. 21. 10 conseils pour designer une app
  22. 22. 1. la facilité d’utilisation /vs/ la complexité du métier. toujours proposer la solution la plus simple, même si le contexte est compliqué.
  23. 23. 2. le feedback. un élément interactif doit signifier son état. si un délai entre l’action et la réaction est à prévoir, il faut renseigner l’utilisateur.
  24. 24. 3. la consistance. quelle que soit la page consultée, une interaction donnée doit produire la même réaction.
  25. 25. 4. la fiabilité. une application doit s’exécuter sans à-coup et sans coutures.
  26. 26. 5. la sécurité. une application ne doit pas contenir de cul-de-sac, ni de branches mortes. Une action devrait toujours pouvoir être stoppée / annulée.
  27. 27. 6. l’extensibilité. le modèle doit s’adapter à une augmentation des données que l’appli utilise.
  28. 28. 7. la portabilité. le modèle doit pouvoir s’adapter à un changement de contexte (PC / mobile) .
  29. 29. 8. la modularité. créer des modules indépendants et interchangeables permet de maintenir plus facilement son application. notion de design patterns
  30. 30. 9. la solidité. l’application doit être user-proof et doit pouvoir revenir à son état précédant une erreur de manipulation.
  31. 31. 10. la performance. Peu importe la plateforme, le langage ou la méthode employée, l’application doit être fluide, dynamique et sobre en ressources.
  32. 32. Les 5 grandes lois du design applicatif
  33. 33. Loi de Fitts le temps de déplacement vers un item est fonction de sa taille et de son emplacement.
  34. 34. Loi de proximité Posez vos items rationnellement.
  35. 35. Souhaitez-vous aller à la slide suivante ? Annuler Oui
  36. 36. La règle des trois tiers Une grille ordonnée guide le regard et permet de focaliser l’attention sur le centre d’intérèt.
  37. 37. Loi de Hick Plus vous donnez de choix, plus long est le processus de décision.
  38. 38. Le syndrome de Pareto 80 % de vos utilisateurs n’utiliseront que 20 % de votre application.
  39. 39. Les 5 grands métiers du design applicatif
  40. 40. L’ux designer est au centre de l’interaction entre les utilisateurs et le point de contact du métier (application, packaging, web, …)
  41. 41. L’ui designer crée les interfaces, les structures et les schémas qui définissent la relation entre l’utilisateur et sa machine.
  42. 42. L’ixd designer (design d’interactions) a une vision transverse des applications et traduit le branding vers des plateformes diverses (montres, mobiles, PC, consoles, iot)
  43. 43. Le SD designer (le solution designer) Est l’acteur majeur de la transformation numérique permettant de transposer un contexte industriel en un contexte digital (dématérialisation, social networking, …)
  44. 44. L’ergonome Apporte une valeur scientifique et incontestable à l’analyse du comportement d’un utilisateur vis- à-vis d’un support d’information.
  45. 45. Les tendances actuelles du design
  46. 46. Le flat design a gagné cette bataille
  47. 47. Lisibilité de l’information Orientation mobile & touch first Génération web content
  48. 48. Mais avec des nuances propres…
  49. 49. Et une évolution intrinsèque…
  50. 50. Et des gimmicks générationnels…
  51. 51. Mais avec des guidelines communes:
  52. 52. https://developer.apple.com/library/ios/documentation/UserEx perience/Conceptual/MobileHIG/ https://developer.android.com/design/index.html https://dev.windows.com/en-us/design
  53. 53. Et avec ça ma brave dame ? Vous auriez des logos trendy ? Il m’en faudrait 300 gr …
  54. 54. Mono-script Facettes
  55. 55. Lignes Pompons
  56. 56. Liaisons Géométriques
  57. 57. Hexagones Dynamiques
  58. 58. Pour s’inspirer et pour finir, les interfaces foutraques du cinéma
  59. 59. Oblivion
  60. 60. Gardians of the galaxy
  61. 61. Age of Ultron
  62. 62. Ender’s game
  63. 63. Prometheus
  64. 64. Alien
  65. 65. L’influence des jeux vidéos
  66. 66. Le design applicatif @rousseau_michel

×