Formation UX Design (User eXperience Design) du 19 novembre 2012 organisée par Synerg'hetic et animée par Timothée Roussilhe, étudiant en 4e année à HETIC.
Formation UX Design, introduction et tour d'horizon
1. CONFÉRENCE UX
INITIATION ET TOUR D’HORIZON
Par Timothée ROUSSILHE - Synerg’hetic
lundi 19 novembre 12
2. QUI SUIS-JE?
Étudiant en H4 à HETIC
Responsable projets à Synerg’hetic
Stage chez DDB en stratégie.
Intérêt pour l’ UX, la technique et le processus créatif.
@timroussilhe
timothee-roussilhe.com
lundi 19 novembre 12
11. L’UX VA NOUS PERMETTRE DE RÉPONDRE AU BESOIN DE L’UTILISATEUR
LE WEB CHANGE ET SE COMPLEXIFIE, LE NOMBRE DE DEVICES SE MULTIPLIE
CELA VA PERMETTRE D’AMELIORER NOTRE PRODUIT :
Taux de conversion
Taux d’enregistrement
Le nombre d’abandon
Augmenter le taux d’utilisation du produit
Sauver du temps
Réduire les erreurs
lundi 19 novembre 12
12. L’UX est devenu un élément différenciant qui peut faire le succès d’un service ou d’un site.
Exemples :
lundi 19 novembre 12
13. 5 RAISONS DE SE METTRE À
L’UX !
lundi 19 novembre 12
14. VOUS ÊTES DÉJÀ EN TRAIN D’EN FAIRE
C’EST UN PROCESS
C’EST PAS DIFFICILE
C’EST FUN
HETIC EST UNE BONNE PLACE POUR DEVENIR UX DESIGNER
lundi 19 novembre 12
21. ÉLÉMENTS DE L’UX
SURFACE
Design visuel
OSSATURE
Design d’interface
Design de navigation
Design de l’information
STRUCTURE
Design d’interaction
Architecture de l’information
SCOPE
Spécifications fonctionnelles
Contenu
STRATÉGIE
Stratégie
Objectifs du produits
Études et attentes des utilisateurs
lundi 19 novembre 12
22. STRATÉGIE
DEUX QUESTIONS À SE POSER :
Quels sont les objectifs du produit.
Quels sont les attentes de l’utilisateur.
lundi 19 novembre 12
23. OBJECTIFS DU PRODUIT
Objectifs de l’entreprise
Identité de la marque
Mesurer l'efficacité
lundi 19 novembre 12
24. ATTENTES DES UTILISATEURS
Segmentation des utilisateurs
Utilisabilité et recherche
Personas & customer journey
lundi 19 novembre 12
25. FOCUS : PERSONA
DÉFINITION
AVANTAGES
Définir des hypothèses
Concentrer son attention sur l’utilisateur
Définir une version commune de «Pour qui» on conçoit le produit.
Prendre des décisions «plus humaines» et moins abstraite
Définir les besoins avant de rentrer dans les détails du produit.
INCONVÉNIENTS
N’aide pas à concevoir le produit.
Ne valide pas les hypothèses.
Ça ne remplace pas les recherches et les tests.
lundi 19 novembre 12
28. SCOPE
DÉFINIR LE CONTENU ET FONCTIONNALITÉS.
lundi 19 novembre 12
29. STRUCTURE
Design d’interaction & Architecture de l’information
FONCTIONNALITÉS & CONTENU
lundi 19 novembre 12
30. DESIGN D’INTERACTION
1980
Émergence du numérique auprès du grand public
Nécessité de simplifier les interactions homme-machine
Bill Moggridge
Co-fondateur de l’agence IDEO
DÉFINITION
Deux niveaux d’interactions :
soit entre un utilisateur et un système,
soit entre des utilisateurs, “interaction sociale”
lundi 19 novembre 12
31. ARCHITECTURE DE L’INFORMATION
DÉFINITION
4 COMPOSANTES DE L’AI :
L’organisation des contenus
Définition des systèmes de navigation
Terminologie et labels
Systèmes de recherche
lundi 19 novembre 12
32. ARCHITECTURE DE L’INFORMATION :
CAS CONCRET
LE CAS DE LA CARTE D’EMBARQUEMENT
http://passfail.squarespace.com/
lundi 19 novembre 12
44. OSSATURE : PROTOTYPE
LE RÔLE D’UN UX DESIGNER ET DE CONCEVOIR PUIS DE TESTER
DO DON’T
Travailler de façon collaborative Ne pas prototyper de fonctionnalités
qui ne peuvent être implémenter.
Eviter le piège du «prototype»
Ne pas prendre en compte chaque
Mettre en place des délais de requêtes qui résultent des tests.
réponses
Ne pas trop cadrer les tests.
Réutiliser ses ressources ( templates,
modèles, patterns...) Ne pas être perfectionniste.
Lors des test bien se rappeler et Ne pas tout prototyper.
informer les utilisateurs sur le but d’un
prototype
lundi 19 novembre 12
45. TEST UTILISATEUR
DEUX TYPES DE TEST UTILISATEURS :
QUALITATIF QUANTITATIF
Tri par carte Sondages
Tests individuels Analytics
Groupes participatifs A/B Testing
Test oculaires
Test in situ
lundi 19 novembre 12
46. LES OUTILS
BALSAMIQ MOCKUP ILLUSTRATOR OMNIGRAFFLE MOCKINGBIRD
Simplicité Personnalisation et Outil complet : navigation, Interface optimisée
Rapidité configuration diagramme, wireframe... Version en ligne
Effet Sketch Nombreuses Nombreuses bibliothèque de gratuite
bibliothèque de modèle modèle et possibilité de Prototype : création
créer/importer les siens. de lien entre les
pages
lundi 19 novembre 12
47. LES OUTILS : Prototype
AXURE HTML ( Twitter Bootstrap) Proto.io Codiqua
Outil complexe. Rapide à configurer et à Interface intuitive Jquery Mobile
Possibilité de faire mettre en place. Transformer ses Rapidité
des prototypes et Framework assez maquettes en Possibilité
des animations complet : grille, prototype d'héberger en ligne
poussées. responsive...
Export html
lundi 19 novembre 12
48. RÉSUMÉ ET LIVRABLES
PRÉSENTATION
ANALYTICS
A/B TESTING
STRATÉGIE SCOPE STRUCTURE OSSATURE SURFACE
PERSONAS INVENTAIRE PARCOURS WIREFRAME PROTOTYPE
ÉTUDES NAVIGATION UTILISATEUR
UTILISATEUR DES CONTENUS
CARTE DES TESTS
ÉTUDES SCÉNARIO SPÉCIFICATIONS UTILISATEUR
MARCHÉ & CONCEPTS
UTILISATEUR FONCTIONNELLES
ANALYTICS
lundi 19 novembre 12
49. RESSOURCES
BLOG GÉNÉRALISTES :
http://uxdesign.smashingmagazine.com/
http://www.uxmag.com/
http://www.uxbooth.com/
http://uxmastery.com/
http://www.usabilitypost.com/
http://www.90percentofeverything.com/
BLOG SPÉCIALISÉ :
www.lukew.com
http://www.useit.com/
http://www.ixda.org/
http://informationarchitects.net/blog/
PRÉSENTATION :
http://fr.slideshare.net/nickf/user-experience-best-practices
http://prezi.com/aafmvya6bk7t/understanding-information-architecture/
http://fr.slideshare.net/Kristen_hardy/what-is-ux-design
lundi 19 novembre 12