CONFÉRENCE UXINITIATION ET TOUR D’HORIZON
Par Timothée ROUSSILHE - Synerg’hetic
lundi 19 novembre 12
QUI SUIS-JE?
Étudiant en H4 à HETICResponsable projets à Synerg’hetic
Stage chez DDB en stratégie.
Intérêt pour l’ UX, la technique et le processus créatif.
@timroussilhetimothee-roussilhe.com
lundi 19 novembre 12
POURQUOI CETTE CONFÉRENCE ?
lundi 19 novembre 12
C’EST QUOI L’EXPÉRIENCE UTILISATEUR?
lundi 19 novembre 12
L’UX C’EST QUOI ?
QUOI
QUAND
OU
POURQUOI
COMMENT
UTILISE-T’ON NOTRE PRODUIT?lundi 19 novembre 12
MAIS AUSSI :
QUOI
QUAND
OU
POURQUOI
COMMENT
UTILISE NOTRE PRODUIT?
QUI
lundi 19 novembre 12
DÉFINITION :
UX : Tout ce qui affecte l'interaction d’un utilisateur avec le produit.
USER CENTRIC DESIGN
lundi 19 novembre 12
DÉFINITION :
UXBESOINBUSINESS
BESOINDE
L’UTILISATEUR
lundi 19 novembre 12
WHIT GREAT UX DESIGN COMES GREAT RESPONSIBILITY !
lundi 19 novembre 12
POURQUOI L’UX C’EST IMPORTANT?
lundi 19 novembre 12
LE WEB CHANGE ET SE COMPLEXIFIE, LE NOMBRE DE DEVICES SE MULTIPLIE
L’UX VA NOUS PERMETTRE DE RÉPONDRE AU BESOIN DE L’UTILISATEUR
CELA VA PERMETTRE D’AMELIORER NOTRE PRODUIT : Taux de conversionTaux d’enregistrementLe nombre d’abandonAugmenter le taux d’utilisation du produitSauver du temps Réduire les erreurs
lundi 19 novembre 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
5 RAISONS DE SE METTRE À L’UX !
lundi 19 novembre 12
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
5 COMPÉTENCES QUI FONT UN BON UX DESIGNER.
lundi 19 novembre 12
CROQUIS
STORYTELLING
LA CRITIQUE
PRÉSENTER
FACILITER
Le meilleur ami de l’UX designer
lundi 19 novembre 12
C’EST QUOI CONCRETEMENT L’UX ?
lundi 19 novembre 12
lundi 19 novembre 12
FAUXlundi 19 novembre 12
EN PARTIE FAUX
lundi 19 novembre 12
SURFACE
Design visuel
STRATÉGIEStratégie
Objectifs du produitsÉtudes et attentes des utilisateurs
STRUCTUREDesign d’interaction
Architecture de l’information
OSSATURE
Design d’interfaceDesign de navigation
Design de l’information
SCOPESpécifications fonctionnelles
Contenu
ÉLÉMENTS DE L’UX
lundi 19 novembre 12
STRATÉGIE
DEUX QUESTIONS À SE POSER :Quels sont les objectifs du produit.Quels sont les attentes de l’utilisateur.
lundi 19 novembre 12
OBJECTIFS DU PRODUIT
Objectifs de l’entreprise
Identité de la marque
Mesurer l'efficacité
lundi 19 novembre 12
ATTENTES DES UTILISATEURS
Segmentation des utilisateurs
Utilisabilité et recherche
Personas & customer journey
lundi 19 novembre 12
FOCUS : PERSONA
AVANTAGESDéfinir des hypothèses Concentrer son attention sur l’utilisateurDéfinir une version commune de «Pour qui» on conçoit le produit.Prendre des décisions «plus humaines» et moins abstraiteDéfinir les besoins avant de rentrer dans les détails du produit.
DÉFINITION
INCONVÉNIENTSN’aide pas à concevoir le produit.Ne valide pas les hypothèses.Ça ne remplace pas les recherches et les tests.
lundi 19 novembre 12
lundi 19 novembre 12
lundi 19 novembre 12
SCOPE
DÉFINIR LE CONTENU ET FONCTIONNALITÉS.
lundi 19 novembre 12
STRUCTURE
FONCTIONNALITÉS & CONTENU
Design d’interaction & Architecture de l’information
lundi 19 novembre 12
DESIGN D’INTERACTION
1980Émergence du numérique auprès du grand publicNécessité de simplifier les interactions homme-machine
Bill MoggridgeCo-fondateur de l’agence IDEO
DÉFINITIONDeux niveaux d’interactions : soit entre un utilisateur et un système,soit entre des utilisateurs, “interaction sociale”
lundi 19 novembre 12
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
LE CAS DE LA CARTE D’EMBARQUEMENT
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
http://passfail.squarespace.com/
ARCHITECTURE DE L’INFORMATION :CAS CONCRET
lundi 19 novembre 12
OSSATURE
Design d’interface + Design de navigation + Design de l’information
lundi 19 novembre 12
OSSATURE : ZONNING & WIREFRAME
Meilleurs outils d’un UX Designer :
http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/
lundi 19 novembre 12
OSSATURE : ZONNING & WIREFRAME
lundi 19 novembre 12
OSSATURE : SCÉNARIO
lundi 19 novembre 12
OSATURE : SCÉNARIO
lundi 19 novembre 12
OSSATURE : PROTOTYPE
LE RÔLE D’UN UX DESIGNER ET DE CONCEVOIR PUIS DE TESTER
DO DON’T
Travailler de façon collaborative
Eviter le piège du «prototype»
Mettre en place des délais de réponses
Réutiliser ses ressources ( templates, modèles, patterns...)
Lors des test bien se rappeler et informer les utilisateurs sur le but d’un prototype
Ne pas prototyper de fonctionnalités qui ne peuvent être implémenter. Ne pas prendre en compte chaque requêtes qui résultent des tests.
Ne pas trop cadrer les tests.
Ne pas être perfectionniste.
Ne pas tout prototyper.
lundi 19 novembre 12
TEST UTILISATEUR
DEUX TYPES DE TEST UTILISATEURS :
QUALITATIF QUANTITATIF
Tri par carte
Tests individuels
Groupes participatifs
Test oculaires
Test in situ
Sondages
Analytics
A/B Testing
lundi 19 novembre 12
LES OUTILS
BALSAMIQ MOCKUP ILLUSTRATOR OMNIGRAFFLE MOCKINGBIRD
SimplicitéRapiditéEffet Sketch
Personnalisation et configuration Nombreuses bibliothèque de modèle
Interface optimiséeVersion en ligne gratuitePrototype : création de lien entre les pages
Outil complet : navigation, diagramme, wireframe...Nombreuses bibliothèque de modèle et possibilité de créer/importer les siens.
lundi 19 novembre 12
LES OUTILS : Prototype
AXURE HTML ( Twitter Bootstrap) Proto.io Codiqua
Outil complexe.Possibilité de faire des prototypes et des animations poussées.Export html
Rapide à configurer et à mettre en place.Framework assez complet : grille, responsive...
Jquery MobileRapiditéPossibilité d'héberger en ligne
Interface intuitiveTransformer ses maquettes en prototype
lundi 19 novembre 12
RÉSUMÉ ET LIVRABLES
STRATÉGIE STRUCTURE OSSATURESCOPE SURFACE
PERSONAS ÉTUDESUTILISATEUR
ÉTUDESMARCHÉ & ANALYTICS
INVENTAIRE DES CONTENUS
SPÉCIFICATIONSFONCTIONNELLES
PARCOURSUTILISATEUR
PRÉSENTATION
CARTE DES CONCEPTS
NAVIGATION WIREFRAME PROTOTYPE
ANALYTICSA/B TESTING
TESTSUTILISATEURSCÉNARIO
UTILISATEUR
lundi 19 novembre 12
RESSOURCESBLOG GÉNÉRALISTES :
http://www.uxmag.com/
http://www.uxbooth.com/
http://uxdesign.smashingmagazine.com/
http://www.usabilitypost.com/
http://www.90percentofeverything.com/
http://uxmastery.com/
BLOG SPÉCIALISÉ :www.lukew.com
http://www.useit.com/
PRÉSENTATION :
http://prezi.com/aafmvya6bk7t/understanding-information-architecture/http://fr.slideshare.net/nickf/user-experience-best-practices
http://fr.slideshare.net/Kristen_hardy/what-is-ux-design
http://www.ixda.org/
http://informationarchitects.net/blog/
lundi 19 novembre 12
RESSOURCESLIVRES
lundi 19 novembre 12
MERCI DE VOTRE ATTENTION
lundi 19 novembre 12