formation ux design, introduction et tour d'horizon

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