UX / site manager
description
Transcript of UX / site manager
UX / SITE MANAGER
Simon White, 23/05/2011revu 05/04/2012
1
VISION D’ORIGINE PARTAGÉ AVEC JFO
implementé en partie
AXES AMÉLIORATION PROCESS : UX <-> VSCT DE 2009 Intégrer intelligemment les acteurs IHM
– Etablir une voie de communication avec les architectes IHM. Leur appréciation de certaines demandes permet d’articuler le design sur une voie moins coûteuse mais tout aussi efficace. Les développeurs IHM sont une mine de créativité technique – notamment sur l’interactivité - aujourd’hui sous exploitée.
Fluidifier les process lourds– Lutter contre l’actuelle volonté d’avoir les maquettes finies pour l’ensemble des
états de pages; le premier jalon a déjà été posé – la généralisation de l’outil Axure.– Accompagner un processus de design « agile » avec itérations combinant design
graphique et design interactif au fil des devs (cf. bench Darwin à Levallois)– Embarquer la recette utilisateur en amont pour apprécier l’esprit d’une nouvelle
interface à travers le processus de design et non avec des maquettes à plat Travailler ensemble sur une vision CMS
– La gestion de contenu n’a rien à voir avec l’outil. Tout est à voir avec le discours qu’on veut porter sur le site, et l’industrialisation du contenu pour animer le site de façon efficace, friendly et humain.
3
implementé en partie
LOVETEAM / QUALITÉ + UX
Site Management : prendre « ownership » des sujets de petites évolutions souvent appelés « quick win »– Assurer une cohérence dans l’ensemble des modifications
• Gérer un site map, proposer une élagage et mise en cohérence de la navigation transverse
• Planifier mieux les interventions UX et améliorer la visibilité de l’état des demandes– Assurer le respect des référentiels (charte graphique, charte accessibilité, best
practices UX en place, charte iconographique) Centraliser le savoir & formaliser les annonces de MEP
– Remonter les informations de modifications de façon structuré en reporting hebdomadaire
– Suivre les évolutions et leur impact sur l’expérience client• Exemple 1 : mise en place de bouton « acheter un billet de train » dans le compte client
=> augmentation direct de nombre de réservations par clients connectés• Exemple 2 : rajout d’un lien « modifier d’autres critères » dans la zapette en page de
proposition => 70.000 clics/jours• => Réduction de clients insatisfaits « je dois tout reprendre depuis le début »
Créer un lien fort avec la recette
4
LE ZONE DU MURET
IHM• Suivi de prod
Marque
FoncUX
5
Zone « muret »
Casser le muret
Équipes multi-disciplinaires, nouvelle organisation d’espace ? (exemple: Bench Darwin)
IDÉES ET INSTANCES POUR MISE EN PLACE
Rôle site manager à créer (cf. orga déjà discuté) UX / Design day à planifier avant grandes vacances. Ateliers & présentations
en cours d’élaboration. Audience : key players VSC / VSCT Création d’une espace design / salle de réu polyvalente avec disposition
chaises / écran / whiteboard plus propice aux sessions « design collaboratif » Recentrer la méthodologie design. Avec une équipe correctement staffé et la
notion de site manager on est aptes à pouvoir bien faire avancer
Takehomes Design methodology saves money and improves results AB testing & usability testing will become a focus Better planning for the team will increase productivity Better centralisation of change requests & mockups / prototypes will help us
move forward
6
SCHEMA DIRECTEUR STRUCTURE ÉQUIPE
7
UX Design Visual Design Site Management
Architecture d’Information
Ergonomie
Direction Artistique
Design d’Interaction
Edito
Planning
Con
nais
sanc
e cl
ient
, Etu
des
(+ R
eche
rche
Inno
vatio
n)
IHM
Customer Experience
Stratégique Tactique
DeliveryConcept
SCHEMA DIRECTEUR STRUCTURE ÉQUIPE
8
UX Design Visual Design Site Management
David Serrault
CDI Ergonome (à
recruter)
Fabien Quinaud
CDI Graphiste (à recruter)
Site Manager (à recruter)
Chef de projet graphique jnr (à recruter)C
onna
issa
nce
clie
nt, E
tude
s(+
Rec
herc
he In
nova
tion)
IHM
Customer Experience
Stratégique Tactique
DeliveryConcept
+ Budget prestataires (mobile notamment) et débordement graphique+ Budget études (web analytics, testing)
D’UNE PRESENTATION STUDIO
9
Co-écriture
Ergonomie
ORGANISATION STUDIO
10
Marketing Stratégique
UX & Design
Contenu Concepts
Architecte Information Designer d’Interaction / DA
Graphiste CDI
Stagiaire
+ Freelances / Prestas / Agences spécialisés
Image M
arqueÉdito
& To
n
PROMESSES
Assurer la cohérence de nos graphismes vis-à-vis de la charte
Challenger les couts et les créations agence
Permettre aux équipes marketing une plus grande souplesse de travail et donc une meilleure réactivité.
Elargir le champs d’action et la créativité graphique
Savoir déborder chez les ressources externes au besoin pour soutenir ces promesses
Travailler avec le marketing stratégique pour améliorer la rédaction des briefs
11
Concept
•Business sponsor ou merch manager (et agences)
Rédaction Brief
•Besoin accompagnement projet?
Correction brief & soumission
créa
•Basecamp
Retour User Ex
•Validé business sponsor
Intégration HTML
•Version / Suivi Prod
Publication
PROCESS D’UNE CRÉA SITE
User testing / pistes alternatives externes
Input business + Charte Web
+ Calendrier merch
NORMES DE CRÉATION
13
Utilisation de Photoshop CS4 ou CS5 pour la création de maquettes graphiques
Respect de la charte sans rentrer les éléments à la chausse-pied – de nouveaux contextes / nouveaux éléments graphiques et design à valider avec le DA
Concepts approuvés en amont; créas « master » approuvés par DA en v1 et visés en version définitive; déclinaisons à gérer par l’équipe marketing sans besoin de chaîne de validation longue.
Brief en amont très important : le processus de création de briefs est à optimiser. Pas de livraison graphique avant brief clair avec wordings quasi définitives. La réactivité du studio pour faire beaucoup d’itérations ne doit pas se
substituer aux manquements d’un brief paresseux !
D’UNE PRESENTATION UX
14
QU’EST-CE QUE L’EXPERIENCE UTILISATEUR ? L’expérience utilisateur représente la qualité d’une expérience globale perçue
par une personne (utilisateur) qui interagit avec un système. Cette expérience d’un produit/service/interface se fait sur une relation durable
et donc globale car elle tient compte de TOUS les moments d’utilisation, avant/pendant/après l’acte d’achat : la prise de conscience, la découverte, la commande, l’achat, l’installation, le service, le support, l’évolution, la fin d’utilisation…– http://www.use-design.com/fr/design/experience_utilisateur.php
L’équipe est un maillage de plusieurs disciplines & expertises. Les prochaines slides listent les disciplines suivi d’un maillage équipe.
Une bonne expérience utilisateur ne laisse pas de trace en mémoire
15
ARCHITECTE DE L’INFORMATION
Un constat : avec le grossissement des sites Web, l'augmentation de la quantité d'information qu'ils contiennent, et la complexification des techniques, il est devenu clair que concevoir un site Web efficace échappe à la compétence des seuls techniciens ou graphistes.
Un chaînon manquant apparaît, à l'intersection de La production de contenu (compétences éditoriales) et La mise en oeuvre technique et graphique (compétences informatiques
et design).
Ce chaînon manquant, c'est l'architecte de l'information.
http://www.figoblog.org/document195.php
16
ERGONOME Multidisciplinaire, l'ergonomie prend sa source aussi bien dans le domaine de la
médecine qu'en psychologie, en sociologie ou en linguistique (sciences cognitives) . Ce qui fait la spécificité de l'ergonomie est son objectif, à savoir : Modifier les outils pour qu'ils soient plus adaptés à leurs utilisateurs.
Le travail de l'ergonome sera guidé par l'idée de concevoir pour un cible :– le plus grand nombre d'utilisateurs, ou – pour un groupe d'utilisateurs donné avec des caractéristiques propres.
Au-delà de cette définition générale, on peut distinguer plusieurs types de questions en ergonomie. – ergonomie physique (adaptation de l'outil aux caractéristiques physiologiques et
morphologiques de l'être humain ou d'une certaine population), – ergonomie organisationnelle (organisation du travail collectif ou individuel - prévenir
les difficulté d’adaptation, les erreur, les incidents) – ergonomie cognitive (adaptation des outils au fonctionnement cognitif ou
représentations mentales des utilisateurs).http://www.ergolab.net/articles/ergonomie-informatique.php
17
DESIGNER GRAPHIQUE D’INTERACTION
Avec de bonnes notions de design et graphisme, le rôle du designer graphique va au-delà du simple créateur de maquette : il est influencé par l’architecture de l’information et l’ergonomie (d’où « design d’interaction »).
Il emprunte de la direction artistique, applique les principes d’une charte graphique, mais travaille également de pair avec les autres disciplines d’expérience utilisateur.
La spécificité du « designer d’interaction » est sa capacité non seulement à faire preuve de créativité mais aussi à porter une attention particulière à l’usager et au client, à appréhender son expérience, à prendre en compte ses besoins et à s’assurer de la bonne prise en main des outils numériques qui lui sont destinés– « Les metiers du design numérique 2009 » Designers Interactifs p.9
A noter qu'en francophonie, le terme web design est souvent utilisé à contre-sens de son acception initiale et confondu avec la seule création graphique. Or ce qui le définit n'est pas tant l'expression visuelle et/ou artistique que la formalisation de l'interaction dans la page-écran.
– http://fr.wikipedia.org/wiki/Web_design18
MAILLAGE ÉQUIPE
ARCHITECTE D’INFORMATION Le rôle leader au niveau du design est en l’occurrence l’architecte de
l’information, mais ce titre s’allie à plusieurs autre disciplines :– directeur artistique interactif– directeur de création
C’est-à-dire qu’il définit ou collabore au niveau de la méthodologie, la planification; prévoit les interventions en amont, co-définit et maintient la stratégie design, et porte une expertise métier voyage
DESIGNER GRAPHIQUE D’INTERACTION Gardien et référent de la charte graphique, il aide son évolution en collaboration
avec les interlocuteurs marque. Il s’allie également aux disciplines croisés avec l’architecte de l’information :– directeur artistique interactif– designer d’interaction
19
MAILLAGE ÉQUIPE IICONSULTANT ERGONOME Actuellement (et historiquement) un rôle d’expert en prestation, qui apporte un
bénéfice d’expérience dans divers disciplines et travaille de pair avec l’architecte de l’information & le designer d’interaction
L’ergonome étudie en détail les cinématiques, a une affinité forte avec l’architecte de l’information, et se repose surtout sur l’adaptation des interfaces aux attentes utilisateurs et propose des méthodologies de test
INTERACTIONS / TEMPORALITE
20
Architecte de l’information
Ergonome
Designer d’interaction
Contenu + Concept (formalisé dans un brief)
temps
Outputs
Wireframe
Wireframe interactif
Design final
PROFIL : RESPONSABLE EXPERIENCE UTILISATEURMétier Assurer la responsabilité du Pôle Expérience Utilisateur
Organisation Responsabilité fonctionnelle de l’effectif du Pôle UX & Design Encadrement direct de l’architecte de l’information, le designer graphique et l’ergonomeTravail en relation avec les acteurs tiers / définition des relations dans le Pôle avec les acteurs tiers
Activités exercées Assiste aux kick off projets avec modules expérience utilisateur; filtre les demandes Chiffrage macro de ressources requises puis Allocation de ressources en fonction d’expertise requise Suit l’ensemble des projets expérience utilisateur aux COPIL, Go/NoGo et autres Communique les méthodologies « design centré utilisateur » aux acteurs de projets
Aptitudes Bon relationnel Bonne capacité à communiquer et à négocier Esprit critique et esprit de proposition d’amélioration Bonne capacité à travailler en équipe (obligatoire) Bonne capacité à s’engager et à s’impliquer (obligatoire) Prêt à se battre pour communiquer sur sa discipline et avoir de l’adhérence transverse
Compétences Bonne capacité à diriger une équipe et à évaluer ses performances (obligatoire) Management de projets (obligatoire) Connaissance méthodologique et outils de design (Outils de wireframing & design graphique) Bonne connaissance de technologies web « front office » (HTML, CSS, Javascript) et techniques d’interactivité (AJAX, Flash, etc) par rapport à leur application en projets de design web Compétences en analyse web et testing A/B et multivarié
Expérience souhaitée
Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande
Métier Assurer l’organisation de l’information dans les pages / gabarits / squelettes d’écran
Organisation Dépend du responsable de l’expérience utilisateur Travail en relation avec les acteurs tiers / avec le designer graphique et l’ergonome
Activités exercées Récolte les inputs projet (brief, expression de besoins) Fait de la veille sur l’état du métier, identifie des méthodologies design, benchmarks
Aptitudes Prend en compte les aspects, marketing, l’identité de marque, la communication, la sémantique, le design visuel, les profils utilisateurs, l’ergonomie et la technologie. Traduit le comportement des utilisateurs en solutions de conception et formalise de manière conceptuelle et schématique des livrables tels que l’arborescence, le story-board ou encore les scénarios d’usage. Définit et défend les principes design
Compétences Connaissance méthodologique et outils de design (Outils de wireframing & design graphique) Bonne connaissance de technologies web « front office » (HTML, CSS, Javascript) et techniques d’interactivité (AJAX, Flash, etc) par rapport à leur application en projets de design web
Expérience souhaitée
Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande
PROFIL : ARCHITECTE DE L’INFORMATION
Métier Assurer le respect des principes design (charte graphique) et la création de maquettes d’interface « haute def »
Organisation Dépend du responsable de l’expérience utilisateur Travail en relation avec les acteurs tiers / avec l’architecte de l’information et l’ergonome
Activités exercées Récolte les inputs projet (brief, expression de besoins) Fait de la veille sur l’état du métier, identifie des tendances design Fait de la création d’éléments de nouveaux projets de fonctionnalité (maquettes, croquis) et supervise le courant graphique VSC
Aptitudes Il collabore avec une variété d’intervenants : des concepteurs-rédacteurs, des architectes de l’information, des chefs de produit et merchandising et des développeurs IHM.Il définit les orientations graphiques structurantes et la direction artistique pour les autres designers, les collaborateurs juniors, indépendants et stagiaires sur tous les projets.Il s’assure que l’équipe projet utilise les méthodes de travail pertinentes et les meilleurs outils afin d’être compétitive. Il aide à planifier la production des équipes et à améliorer le processus de création.Il répartit dans l’équipe les différentes tâches de production. Il s’appuie sur l’équipe pour décliner le design visuel, le contenu, l’interface graphique et la structure des sites, les campagnes interactives et les autres types de projets interactifs.Il fait la promotion du design auprès des autres collaborateurs de la société, leur montre les bénéfices de la discipline et la charte graphiqueCollabore étroitement avec les équipes marketing, les chefs de produit et l’ingénierie afin de définir le positionnement d’un produit. Il œuvre pour une traduction visuelle en adéquation avec les objectifs de l’expérience utilisateur
Compétences Connaissance méthodologique et outils de design (Outils de wireframing & design graphique notamment Photoshop, Illustrator) Bonne connaissance avec techniques d’interactivité (cinématiques) pour décliner les états de pages
Expérience souhaitée
Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande
PROFIL : DESIGNER GRAPHIQUE D’INTERACTION
Métier Assurer le respect des principes design (charte graphique) et la création de maquettes d’interface « haute def »
Organisation Dépend du responsable de l’expérience utilisateur Travail en relation avec les acteurs tiers / avec l’architecte de l’information et le designer graphique
Activités exercées Récolte les inputs projet (brief, expression de besoins) Fait de la veille sur l’état du métier, identifie des tendances ergonmiques qui sont d’usage pour le marché cible
Aptitudes Le consultant ergonome fait circuler l’information et notamment rend compte aux personnes participant au projet des travaux menés en termes d'utilisabilité pour en assurer la réussite. Il se charge de la formation des équipes en ergonomie, les initie à la discipline afin qu’ils en comprennent la pratique et les bénéfices.Il traduit les spécifications du produit en documents de travail (sous Axure) utilisables par l’équipe de développeurs. Il s’assure avec le designer graphique que la partie visible de l'interface est facile à utiliser et cohérente. Il vérifie avec les rédacteurs que tous les libellés (navigation, bouton et étiquettes des champs) sont clairs, concis et facilement utilisables. Il s’assure que les point critiques de l’expérience utilisateur de l’application sont identifiés et communiqués à la direction de projet. Enfin, il défend la démarche de recherche utilisateur et contribue à faire reconnaître la valeur de la conception centrée utilisateur
Compétences Connaissances des processus cognitiifs Connaissance méthodologique et outils de design (Outils de wireframing notamment Axure) Connaissance de méthodes de testing (card sorting, tests quali, etc)
Expérience souhaitée
Avoir réalisé une ou plusieurs missions avec responsabilité d’équipes design / expérience utilisateur Avoir travaillé avec des méthodologies de testing utilisateur, de préférence dans une organisation de taille moyenne ou grande
PROFIL : CONSULTANT ERGONOME