Webmardi: Trucs & astuces UX pour les développeurs

Preview:

DESCRIPTION

 

Citation preview

user experience architects

webmardi – 5 juillet 2011

Trucs et astuces UX pour développeurs

ratio

“User experience is the quality of experience a person has when interacting with a specific artifact”

“User experience is the quality of experience a person has when interacting with a specific artifact”

Make things for people.

Those people aren’t you.

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

emailssystè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é

pas d’action primaire

EnvoyerAnnuler

Message

primaire vs secondaire

Envoyer

Message

Annuler

désactiver après click

Envoyer

Message

Annuler

désactiver + loader

Envoyer

Message

Annuler

primaire vs secondaire

primaire vs secondaire

devenirmeilleur

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.