Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Enjeux	et	outils	
de	l’UX	multi-écran
smartphone,	tablette,	ordinateur,…
Hugo	Labonde	– UX	Designer
Qu’est	ce	que	l’expérience	utilisateur	
multi-écran	?
Pourquoi	cette	étude	?
État	de	l’art,	étude	quantitative	
et	tests	utilisateurs
L’utilisateur	plongé	
dans	un	écosystème	
d’appareils
Etat	de	l’art
• Une	documentation	majoritairement	Nord	Américaine
• Des	études	principalement	quantitatives
Étude	quantita...
appareils	connectés	en	moyenne
par	utilisateur
3,2
Un	écosystème	
d’appareil
Les	utilisateurs	sont	entourés	
d’appareils	qui	communique	 les	uns	
avec	les	autres
Décomposition	de	
l’écosystème
En	%	de	possession	de	chaque	
appareils	
smartphone
tablette
ordinateur
autres
tv	connectée...
Pourquoi	possèder	
plusieurs	appareils	?
Le	Smartphone
« L’incontounable »
La	tablette
« La	casanière »
L’ordinateur
« L’outil	expert »
La	TV	connectée
« L’écran	de	fond »
En	quoi	l’usage	de	plusieurs	appareils	
crée-t-il	une	expérience	utilisateur	
multi-écran ?
des	personnes	interrogées	utilisent	pour	une	même	
activité	plusieurs	appareils	différents	
99%
des	personnes	interrogées	utilisent	simultanément	
plusieurs	appareils.
75%
L’utilisateur	n’est	pas	conscient	
de	son	usage	du	multi-écran
Usage	séquentiel
Pour	une	même	tâche,	utilisation	
d’un	appareil	puis	d’un	autre.
Usage	simultané
• Complémentaire	: réalisation	
d’une	même	tâche	avec	deux	
appareils	en	même	temps.
• Divergent	:	réalisa...
Michal	Levin	“Designing Multi-
Device Experiences”
Les	stratégies	
multi-écran
Stratégie	de	conception	
homogène
Stratégie	de	conception	
continue
Stratégie	de	conception	
complémentaire
« Must	Have »		vs « Nice	to	have »
Des	stratégies
non-exclusives
Résultats	et	analyse	des	tests	
utilisateurs	
7	choses	à	retenir	
pour	concevoir	une	
UX	multi-écran
Les	tests	utilisateurs
• Un	test	exploratoire	sur	l’usage	séquentiel
• 23	utilisateurs
• 3	appareils	différents	:	smartpho...
1.
L’image	permet	la	
reconnaissance	du	
contenu
1.
Une	hiérarchie	de	
l’information	identique
2.
Les	navigations	adaptées	
aux	terminaux
3.
4.
Des	contenus	identiques	
présentés	graduellement
4.a b c
a b c
Appuyer	le	guidage	sur	la	
synchronisation	
5.
Accompagner	la	transition	
d’un	appareil	à	un	autre	
6.
Des	fonctionnalités	
sur-mesure	pour	chaque	
appareil
7.
Outils	du	multi-écran
Accompagner	la	
conception	et	
l’évaluation
Critères	d’évaluation	de	
l’expérience	multi-écran
• Guidage
• Repère	dans	l’appareil	
• Repère	dans	l’interface	
• Continuité
• Homogénéité
• Cohérence
• Architecture	de	l’...
Expérience	map à	partir	
de	données	utilisateurs	
ents ont la possibilité d’accéder à de
euse informations via leur compte...
Tests	utilisateurs	centrés	
multi-écran
Charte	ergonomique	&	
graphique	décrivant	les	
spécificités	et	les	
transitions	des	appareils
1
2
3
Etat	de	l’art,	étude	quantitative	et	tests	utilisateurs
L’utilisateur	plongé	dans	un	écosystème	d’appareils
Michal	L...
◊
Retrouvez	toutes	les	sources	de	l’étude	
sur	notre	Blog
@HugoLabonde
Usaddict
Ressources sur l’ergonomie des interfaces
...
FLUPA UX-Days 2016 - "Enjeux et outils de l'UX multi-écran" par Hugo Labonde
FLUPA UX-Days 2016 - "Enjeux et outils de l'UX multi-écran" par Hugo Labonde
FLUPA UX-Days 2016 - "Enjeux et outils de l'UX multi-écran" par Hugo Labonde
FLUPA UX-Days 2016 - "Enjeux et outils de l'UX multi-écran" par Hugo Labonde
Prochain SlideShare
Chargement dans…5
×

FLUPA UX-Days 2016 - "Enjeux et outils de l'UX multi-écran" par Hugo Labonde

1 039 vues

Publié le

« Je reviens du travail, comme à mon habitude, je suis plongé sur mes réseaux sociaux sur mon smartphone, je bifurque vers un article d’actualité. Avant de louper ma sortie, je range mon smartphone. Une fois rentré chez moi comment puis-je retrouver facilement mon article sur ma tablette ? »
L’expérience utilisateur va au-delà d’une interface sur un appareil, d’autant plus aujourd’hui où les utilisateurs ont en moyenne accès à 3,2 appareils connectés. L’UX s’inscrit dans la continuité d’usage entre les différents écrans. Résultat de 23 tests utilisateurs, nous présentons les retours sur 4 services mettant en scène la continuité d’usage : VOD, réseaux sociaux, actualité et e-commerce.
Le fil conducteur des tests étant la transition d’un appareil à l’autre pour la réalisation d’une tâche. D’un mobile vers un ordinateur, d’une tablette vers un mobile… nous avons identifié de bonnes et mauvaises pratiques pour la conception d’une expérience multi-écran.
Exemple de résultat pour l’e-commerce : les utilisateurs n’identifient pas la synchronisation du panier entre leurs appareils. Le manque de guidage engendre la répétition de la tâche d’ajout du produit au panier.
À partir des retours utilisateurs, nous présentons des outils, la conception et l’évaluation de l’expérience utilisateurs multi-écran.

Publié dans : Design
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

FLUPA UX-Days 2016 - "Enjeux et outils de l'UX multi-écran" par Hugo Labonde

  1. 1. Enjeux et outils de l’UX multi-écran smartphone, tablette, ordinateur,… Hugo Labonde – UX Designer
  2. 2. Qu’est ce que l’expérience utilisateur multi-écran ?
  3. 3. Pourquoi cette étude ?
  4. 4. État de l’art, étude quantitative et tests utilisateurs L’utilisateur plongé dans un écosystème d’appareils
  5. 5. Etat de l’art • Une documentation majoritairement Nord Américaine • Des études principalement quantitatives Étude quantitative • Questionnaire diffusé en ligne • Disponible pendant une semaine (mois de Mai 2015) • 172 réponses enregistrées pour le questionnaire
  6. 6. appareils connectés en moyenne par utilisateur 3,2
  7. 7. Un écosystème d’appareil Les utilisateurs sont entourés d’appareils qui communique les uns avec les autres
  8. 8. Décomposition de l’écosystème En % de possession de chaque appareils smartphone tablette ordinateur autres tv connectée 99 74 99 40 9
  9. 9. Pourquoi possèder plusieurs appareils ?
  10. 10. Le Smartphone « L’incontounable »
  11. 11. La tablette « La casanière »
  12. 12. L’ordinateur « L’outil expert »
  13. 13. La TV connectée « L’écran de fond »
  14. 14. En quoi l’usage de plusieurs appareils crée-t-il une expérience utilisateur multi-écran ?
  15. 15. des personnes interrogées utilisent pour une même activité plusieurs appareils différents 99%
  16. 16. des personnes interrogées utilisent simultanément plusieurs appareils. 75%
  17. 17. L’utilisateur n’est pas conscient de son usage du multi-écran
  18. 18. Usage séquentiel Pour une même tâche, utilisation d’un appareil puis d’un autre.
  19. 19. Usage simultané • Complémentaire : réalisation d’une même tâche avec deux appareils en même temps. • Divergent : réalisation de deux tâches différentes sur deux appareils en même temps.
  20. 20. Michal Levin “Designing Multi- Device Experiences” Les stratégies multi-écran
  21. 21. Stratégie de conception homogène
  22. 22. Stratégie de conception continue
  23. 23. Stratégie de conception complémentaire « Must Have » vs « Nice to have »
  24. 24. Des stratégies non-exclusives
  25. 25. Résultats et analyse des tests utilisateurs 7 choses à retenir pour concevoir une UX multi-écran
  26. 26. Les tests utilisateurs • Un test exploratoire sur l’usage séquentiel • 23 utilisateurs • 3 appareils différents : smartphone, tablette, ordinateur • 4 scénarios sur 4 services différents : actualité, e-commerce, réseaux sociaux, vidéo en ligne • 2 scénarios par utilisateur • Test supporté par des critères d’évaluation
  27. 27. 1. L’image permet la reconnaissance du contenu 1.
  28. 28. Une hiérarchie de l’information identique 2.
  29. 29. Les navigations adaptées aux terminaux 3.
  30. 30. 4. Des contenus identiques présentés graduellement 4.a b c a b c
  31. 31. Appuyer le guidage sur la synchronisation 5.
  32. 32. Accompagner la transition d’un appareil à un autre 6.
  33. 33. Des fonctionnalités sur-mesure pour chaque appareil 7.
  34. 34. Outils du multi-écran Accompagner la conception et l’évaluation
  35. 35. Critères d’évaluation de l’expérience multi-écran
  36. 36. • Guidage • Repère dans l’appareil • Repère dans l’interface • Continuité • Homogénéité • Cohérence • Architecture de l’information • Synchronisation • Conservation de l’information • Décalage (temps de latence) • Feedback • Informer sur la synchronisation • Gestion des erreurs • Hors connexion • Gestion des compatibilités • Flexibilité • Couverture • adaptabilité • Environnement d’usage • Spécificité • Contexte • Sécurité • Protection • Contrôle
  37. 37. Expérience map à partir de données utilisateurs ents ont la possibilité d’accéder à de euse informations via leur compte en ligne. Les clients reçoivent une ou plusieurs factures (papier ou e-facture) au cours de l’année. d’eau Consultation et gestion des E-facturesConsultation du compte en ligne Réception de facture intermédiaires Réception de la facture annuelle - Post-It : B6 - Post-It : B7 - Post-It : B8 - Post-It : B9 temps à arriver ! éduire les travaux jardin ? - J’ai consommé plus que d’habitude ! - Post-It : C6 - J’ai besoin de regarder en détail ma facture d’aout ! - Post-It : C7 - Je me rends compte que je paye plus dans cette ville que dans mon ancienne commune. - Post-It : C8 - Je suis perdu entre ce que je dois payer plus et ce que j’ai déjà payé ! - Les échéances prochaines seront-elles ju - Post-It : C9 eur ndex via TSME sur l’eau via TSME - Traitement des questions posées sur TSME - Post-It : A6 - Traitement des questions posées sur TSME - Post-It : A7 - Envoi des factures intermédiaires - Post-It : A8 - Envoi de la facture annuelle - Post-It : A9 à la télévision sur la sais pas si j’ai adopté - Je vois clairement l’augmentation les relevés disponibles sur site TSME. - Post-It : D6 - C’est très pratique de pouvoir imprimer les factures. - Post-It : D7 - Je suis rassuré par ces factures papier envoyées dans ma boite aux lettres. - Post-It : D8 - J’aimerai payer ce que je consomme plu qu’une prévision échelonnée. - Post-It : D9 ’eau en fonction des es des clients. Prise de connaissance de la consommation d’eau relevée. Visualisation de la E-facture. Selon les clients : stockage dans TSME, stockage sur disque dur, impression pour archivage. Consultation des factures intermédiaires. Consultation de la facture annuell
  38. 38. Tests utilisateurs centrés multi-écran
  39. 39. Charte ergonomique & graphique décrivant les spécificités et les transitions des appareils
  40. 40. 1 2 3 Etat de l’art, étude quantitative et tests utilisateurs L’utilisateur plongé dans un écosystème d’appareils Michal Levin “Designing Multi-Device Experiences” Les stratégies multi-écran Résultats et analyse des tests utilisateurs 7 choses à retenir pour concevoir une UX multi-écran 4 Outils du multi-écran Accompagner la conception et l’évaluation
  41. 41. ◊ Retrouvez toutes les sources de l’étude sur notre Blog @HugoLabonde Usaddict Ressources sur l’ergonomie des interfaces usaddict www.ergonomie-interface.com

×