ratio         user experience architectsTrucs et astuces UX pour développeurs          webmardi – 5 juillet 2011
“User experience is thequality of experience a personhas when interacting with aspecific artifact”
“User experience is the ple.        of hin gs fo r pa o                        equality e texperience person  Mak         ...
good ux
style
DésirableDécouvrable EfficaceEconomique  TactileRécupérable
un butcommun
clientproject managerux designerdéveloppeursgraphiste
clientproject managerux designerdéveloppeursgraphiste
responsabilité  partagée
ux   ?   dev
le concept                         AJAX              défini en 2005par Jesse James Garretthttp://www.adaptivepath.com/ideas...
5 ans plus tôt
© 2000 Jesse James Garett
© 2000 Jesse James Garett
queldéveloppeur êtes-vous?
“c’est le job du  graphiste.”
“je sais pas faire ça.”
“je m’en fous.”
überdeveloper   concept      ux  graphisme     code
qui fait le ux chez  vous?
graphisteproject manager développeur     client  ux designer   personne
trucs &astuces
formulaires
message peu précis
message clair
prévenir l’erreur
prévenir l’erreur
erreur claire
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
twitter sign up
validation inline
champ trop long
champ de bonne longueur
mauvais nom
choisir    pourl’utilisateur
bons défauts
bons défauts
critères les plus utilisés
progressive disclosure
progressive disclosure
trop d’info à remplir
plusieurs étapes
utiliser sans compte
utiliser sans compte
utiliser sans compte
utiliser sans compte
utiliser sans compte
feedback
feedback + explications
feedback + explications
consistance
ajax: feedback visuel
ajax: feedback visuel
ajax: feedback visuel
ajax: feedback visuel
blank slate
“this section is empty”
“no data”
exemple de contenu
tutoriel
call-to-action
call-to-action
call-to-action
“no search result”
text
text
suggérer + expliquer
anticiper
anticiper
anticiper
emailssystème
emails par défaut desframeworks et cms sont        mauvais.
Sorry friend! You sent a message toWufoo No-Reply!The message you just replied to wasfrom Wufoos mail server. That meansyo...
1) You can copy/paste the message youjust wrote into a new email with theperson you want to respond to in theTo: fieldOR2)...
Heres a link about that in thedocumentation: http://wufoo.com/docs/notificationsHope that helps and if you needanything el...
links &buttons
lien normal non visité      lien visité      lien actif    lien en hover
zone de sensibilité
Message            Annuler   Envoyerpas d’action primaire
Message             Annuler   Envoyerprimaire vs secondaire
Message             Annuler   Envoyerdésactiver après click
Message             Annuler   Envoyer désactiver + loader
primaire vs secondaire
primaire vs secondaire
devenirmeilleur
faire du supportobserver des utilisateurs remettre en question
lire des livres
lire online  http://www.useit.com/ http://www.uxmag.com/
utiliser des design      patterns         http://ui-patterns.com/    http://www.welie.com/patterns/
faire des prototypes
copier.
@ratio  www.8ratio.ch  info@8ratio.ch +41 79 724 16 32Rue de Bourg 11/13  1004 Lausanne
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Webmardi: Trucs & astuces UX pour les développeurs
Upcoming SlideShare
Loading in …5
×

Webmardi: Trucs & astuces UX pour les développeurs

1,959
-1

Published on

Published in: Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,959
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Webmardi: Trucs & astuces UX pour les développeurs

  1. 1. ratio user experience architectsTrucs et astuces UX pour développeurs webmardi – 5 juillet 2011
  2. 2. “User experience is thequality of experience a personhas when interacting with aspecific artifact”
  3. 3. “User experience is the ple. of hin gs fo r pa o equality e texperience person Mak ou. oplehas when interacting n’t y a arewith Thos e pespecific artifact”
  4. 4. good ux
  5. 5. style
  6. 6. DésirableDécouvrable EfficaceEconomique TactileRécupérable
  7. 7. un butcommun
  8. 8. clientproject managerux designerdéveloppeursgraphiste
  9. 9. clientproject managerux designerdéveloppeursgraphiste
  10. 10. responsabilité partagée
  11. 11. ux ? dev
  12. 12. le concept AJAX défini en 2005par Jesse James Garretthttp://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
  13. 13. 5 ans plus tôt
  14. 14. © 2000 Jesse James Garett
  15. 15. © 2000 Jesse James Garett
  16. 16. queldéveloppeur êtes-vous?
  17. 17. “c’est le job du graphiste.”
  18. 18. “je sais pas faire ça.”
  19. 19. “je m’en fous.”
  20. 20. überdeveloper concept ux graphisme code
  21. 21. qui fait le ux chez vous?
  22. 22. graphisteproject manager développeur client ux designer personne
  23. 23. trucs &astuces
  24. 24. formulaires
  25. 25. message peu précis
  26. 26. message clair
  27. 27. prévenir l’erreur
  28. 28. prévenir l’erreur
  29. 29. erreur claire
  30. 30. twitter sign up
  31. 31. twitter sign up
  32. 32. twitter sign up
  33. 33. twitter sign up
  34. 34. twitter sign up
  35. 35. twitter sign up
  36. 36. twitter sign up
  37. 37. twitter sign up
  38. 38. twitter sign up
  39. 39. twitter sign up
  40. 40. twitter sign up
  41. 41. twitter sign up
  42. 42. twitter sign up
  43. 43. twitter sign up
  44. 44. twitter sign up
  45. 45. twitter sign up
  46. 46. twitter sign up
  47. 47. validation inline
  48. 48. champ trop long
  49. 49. champ de bonne longueur
  50. 50. mauvais nom
  51. 51. choisir pourl’utilisateur
  52. 52. bons défauts
  53. 53. bons défauts
  54. 54. critères les plus utilisés
  55. 55. progressive disclosure
  56. 56. progressive disclosure
  57. 57. trop d’info à remplir
  58. 58. plusieurs étapes
  59. 59. utiliser sans compte
  60. 60. utiliser sans compte
  61. 61. utiliser sans compte
  62. 62. utiliser sans compte
  63. 63. utiliser sans compte
  64. 64. feedback
  65. 65. feedback + explications
  66. 66. feedback + explications
  67. 67. consistance
  68. 68. ajax: feedback visuel
  69. 69. ajax: feedback visuel
  70. 70. ajax: feedback visuel
  71. 71. ajax: feedback visuel
  72. 72. blank slate
  73. 73. “this section is empty”
  74. 74. “no data”
  75. 75. exemple de contenu
  76. 76. tutoriel
  77. 77. call-to-action
  78. 78. call-to-action
  79. 79. call-to-action
  80. 80. “no search result”
  81. 81. text
  82. 82. text
  83. 83. suggérer + expliquer
  84. 84. anticiper
  85. 85. anticiper
  86. 86. anticiper
  87. 87. emailssystème
  88. 88. emails par défaut desframeworks et cms sont mauvais.
  89. 89. Sorry friend! You sent a message toWufoo No-Reply!The message you just replied to wasfrom Wufoos mail server. That meansyou just emailed a machine (his name isFred!) and probably not the intendedrecipient. Youve got two options, butup front, we want you to know that thesecond one is better:
  90. 90. 1) You can copy/paste the message youjust wrote into a new email with theperson you want to respond to in theTo: fieldOR2) Set it up in Wufoo so that when youhit the reply button on ournotification emails, that youautomatically reply to an email addressyoure collecting on your form. You canset this up in the NotificationSettings under the Set Reply To option.
  91. 91. Heres a link about that in thedocumentation: http://wufoo.com/docs/notificationsHope that helps and if you needanything else, please let us know!Love,The Wufoo Team
  92. 92. links &buttons
  93. 93. lien normal non visité lien visité lien actif lien en hover
  94. 94. zone de sensibilité
  95. 95. Message Annuler Envoyerpas d’action primaire
  96. 96. Message Annuler Envoyerprimaire vs secondaire
  97. 97. Message Annuler Envoyerdésactiver après click
  98. 98. Message Annuler Envoyer désactiver + loader
  99. 99. primaire vs secondaire
  100. 100. primaire vs secondaire
  101. 101. devenirmeilleur
  102. 102. faire du supportobserver des utilisateurs remettre en question
  103. 103. lire des livres
  104. 104. lire online http://www.useit.com/ http://www.uxmag.com/
  105. 105. utiliser des design patterns http://ui-patterns.com/ http://www.welie.com/patterns/
  106. 106. faire des prototypes
  107. 107. copier.
  108. 108. @ratio www.8ratio.ch info@8ratio.ch +41 79 724 16 32Rue de Bourg 11/13 1004 Lausanne
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×