SlideShare une entreprise Scribd logo
1  sur  118
Télécharger pour lire hors ligne
ratio




         user experience architects



Trucs et astuces UX pour développeurs


          webmardi – 5 juillet 2011
“User experience is the
quality of experience a person
has when interacting with a
specific artifact”
“User experience is the ple.
        of hin gs fo r pa o
                        e
quality e texperience person
  Mak                        ou.
             ople
has when interacting    n’t y a
                   arewith
  Thos  e pe
specific artifact”
good ux
style
Désirable
Découvrable
 Efficace
Economique
  Tactile
Récupérable
un but
commun
client
project manager
ux designer
développeurs
graphiste
client
project manager
ux designer
développeurs
graphiste
responsabilité
  partagée
ux   ?   dev
le concept
                         AJAX
              défini en 2005
par Jesse James Garrett
http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications
5 ans plus tôt
© 2000 Jesse James Garett
© 2000 Jesse James Garett
quel
dé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?
graphiste
project 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
    pour
l’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
emails
système
emails par défaut des
frameworks et cms sont
        mauvais.
Sorry friend! You sent a message to
Wufoo No-Reply!


The message you just replied to was
from Wufoo's mail server. That means
you just emailed a machine (his name is
Fred!) and probably not the intended
recipient. You've got two options, but
up front, we want you to know that the
second one is better:
1) You can copy/paste the message you
just wrote into a new email with the
person you want to respond to in the
To: field
OR
2) Set it up in Wufoo so that when you
hit the reply button on our
notification emails, that you
automatically reply to an email address
you're collecting on your form. You can
set this up in the Notification
Settings under the Set Reply To option.
Here's a link about that in the
documentation: http://wufoo.com/docs/
notifications


Hope that helps and if you need
anything else, please let us know!


Love,
The Wufoo Team
links &
buttons
lien normal non visité
      lien visité
      lien actif
    lien en hover
zone de sensibilité
Message




            Annuler   Envoyer




pas d’action primaire
Message




             Annuler   Envoyer




primaire vs secondaire
Message




             Annuler   Envoyer




désactiver après click
Message




             Annuler   Envoyer




 désactiver + loader
primaire vs secondaire
primaire vs secondaire
devenir
meilleur
faire du support
observer 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 32

Rue de Bourg 11/13

  1004 Lausanne

Contenu connexe

Similaire à Webmardi: Trucs & astuces UX pour les développeurs

Bonnes pratiques qualité pour le projet Web
Bonnes pratiques qualité pour le projet WebBonnes pratiques qualité pour le projet Web
Bonnes pratiques qualité pour le projet WebElie Sloïm
 
Développer en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx FranceDévelopper en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx FranceSamuel Le Berrigaud
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebValtech Canada
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceMarc Wabnitz
 
comment rédiger une expression de besoins
comment rédiger une expression de besoinscomment rédiger une expression de besoins
comment rédiger une expression de besoinsAlexandre Zermati
 
Barcamp tunisie edition 2010 friendesk
Barcamp tunisie edition 2010 friendeskBarcamp tunisie edition 2010 friendesk
Barcamp tunisie edition 2010 friendeskBarcamp Tunisie
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobileStrasWeb
 
L'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestataires
L'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestatairesL'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestataires
L'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestatairesConcept Image
 
Prédiagnostic site Internet
Prédiagnostic site InternetPrédiagnostic site Internet
Prédiagnostic site InternetCCI 21
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateurLaurent Barbat
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DaySamuel Le Berrigaud
 
Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site webChris Gaillard
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017NiceToMeetYou
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileAudrey CHATEL
 
Toolbox du designer : Useberry
Toolbox du designer : UseberryToolbox du designer : Useberry
Toolbox du designer : UseberryLudivine Dobigny
 

Similaire à Webmardi: Trucs & astuces UX pour les développeurs (20)

Bonnes pratiques qualité pour le projet Web
Bonnes pratiques qualité pour le projet WebBonnes pratiques qualité pour le projet Web
Bonnes pratiques qualité pour le projet Web
 
Développer en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx FranceDévelopper en mode kick-ass à Devoxx France
Développer en mode kick-ass à Devoxx France
 
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVwebExperienceUtilisateur_AnastasiaSimitsis_RDVweb
ExperienceUtilisateur_AnastasiaSimitsis_RDVweb
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
ESG - Lesson 5
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5
 
comment rédiger une expression de besoins
comment rédiger une expression de besoinscomment rédiger une expression de besoins
comment rédiger une expression de besoins
 
Barcamp tunisie edition 2010 friendesk
Barcamp tunisie edition 2010 friendeskBarcamp tunisie edition 2010 friendesk
Barcamp tunisie edition 2010 friendesk
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
L'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestataires
L'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestatairesL'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestataires
L'AMOA web : Un allié pour exprimer vos besoins et choisir vos prestataires
 
Prédiagnostic site Internet
Prédiagnostic site InternetPrédiagnostic site Internet
Prédiagnostic site Internet
 
1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Cv2015
Cv2015Cv2015
Cv2015
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Développer en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum DayDévelopper en mode kick-ass à Scrum Day
Développer en mode kick-ass à Scrum Day
 
Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site web
 
UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017UX & UI Design : les tendances pour 2017
UX & UI Design : les tendances pour 2017
 
UX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur MobileUX Mobile - Experience Utilisateur Mobile
UX Mobile - Experience Utilisateur Mobile
 
Toolbox du designer : Useberry
Toolbox du designer : UseberryToolbox du designer : Useberry
Toolbox du designer : Useberry
 

Webmardi: Trucs & astuces UX pour les développeurs