L'UX est dans la rue !

UX PARIS // 07_avril_2010

l’UX est
dans la rue
Le design des interactions
du quotidien : cas d’étude, méthodes
... et quelques questions

Giuseppe Attoma Pepe

GIUSEPPE ATTOMA UX PARIS // 07_avril_2010 3

à propos d’Attoma
une plate-forme de compétences
en études, conseil et design,
pour traiter la problématique de
la complexité au “point de
contact” avec les utilisateurs.


USER EXPERIENCE HERE


COURTESY © LEA MARZLOFF

COURTESY © LEA MARZLOFF GIUSEPPE ATTOMA UX PARIS // 07_avril_2010 11


WORK
Hi. I’m Human!

TIME
MIND

MONEY

BODY

COMMUNITY


Étude d’observation Plateau de Saclay
– Observation participante de 9 voyageurs
dans leur déplacement domicile-travail
– Analyse et cartographie des stratégies et de
l’expérience cognitive
– L’objectif : révéler les failles des systèmes
d’information voyageurs et les stratégies de
substitution mis en œuvre par les voyageurs


10:37

RER Guichet

Neurospin

RER Cité Universitaire

Châtelet M

8:20
Name: Valérie
Age: 30
Company: Neurospin
Job: Research Engineer
Goncourt M
Starting point: 23 Boulevard de la Villette,
North of Paris
Destination: Saclay. RER M BUS


Trip Plan

M RER RER

Artefacts

PERSONAL ITEMS

INSTITUTIONAL
INFORMATION
SYSTEMS

INFORMAL
MILESTONES

Physiological Load

COGNITIVE LOAD

EXECUTIVE
ATTENTION
AUTOMATION

ANTICIPATION /
SIMULATION

PHYSICAL EFFORT

8h20 9h20 10h20


Institutional Information conflicts sparks off
stress and additional cognitive efforts

Artefacts

PERSONAL ITEMS

INSTITUTIONAL
INFORMATION
SYSTEMS

INFORMAL
MILESTONES

Cognitive Load
EXECUTIVE
ATTENTION
AUTOMATION
ANTICIPATION /
SIMULATION

8h50 9h50


No more Shops avalaible

Valérie’s Trip

M RER RER

8h20 9h20 10h20


Physical Effort

VALÉRIE’S TRIP
Calories burned: 331

12

0 cal

SWIMMING Calories burned: 331

0h 20 min 1h 2h


Outward Journey

Physiological Load
COGNITIVE LOAD

EXECUTIVE
ATTENTION
AUTOMATION
ANTICIPATION /
SIMULATION

PHYSICAL EFFORT

8h50 9h56


Backward Journey

Physiological Load
COGNITIVE LOAD

EXECUTIVE
ATTENTION
AUTOMATION
ANTICIPATION /
SIMULATION

PHYSICAL EFFORT

18h30 19h24


Overall UX : le tout et ses parties
– UX Design, quel périmètre ?
– Quel sens donner à des notions comme
«satisfaction», «engagement»... quand
on parle d’usages contraints ?
– Quelle valeur et quelle pertinence
de la notion de «brand» dans l’espace
urbain ?
– ... UX Design ou Design de services ?


IHM de bornes de «services
du quotidien» : trois
cas d’étude


IHM des bornes Navigo pour la RATP

Innovations d’usage
et UX Design :
un cas d’étude
fondateur pour
l’agence Attoma...
et un enjeux
stratégique pour la
RATP


De la création de la méthodologie...
Une approche «taylor-made» :
– accompagnement stratégique et facilitation
– création d’un modèle global du projet
– définition des critères de performance attendus
et du protocole de tests
– conception du modèle logique d’interaction
– conception de l’approche sémantique
(ton de voix, wording)
– conception de l’interaction et du L & F
– réalisation du cahier de spécifications et suivi


Modélisation des «Performances Attendues»
Attoma | RATP / Design d’interfaces Télébilletique

Comparatif de la qualité d’interaction

3 Rapidité / Performance

2,5

2

1,5

1

0,5

0

Guichet

Agences

Amplitude de l’offre vs besoins Souplesse / Fiabilité





2,5

ADUP mixte
2

1,5

1

0,5

0

Guichet

Agences






2,5 Automate de service

ADUP mixte
2

1,5

1

0,5

0

Guichet

Agences






2,5 Automate de service

gain
ADUP mixte
2

1,5

1 gap

0,5

0

Agences



Modélisation du «Concept racine»
Vue logique

”Achat”

Sélection des titres

Reserve de parcours

Réconduction de
Paiement Chargement
l’abonnement le
plus récent

Sélection d’un
abonnement
]

]
e

e

Chargement
langu

langu

abonnement annuel
eil]

de la

de la
[Accu

[Fin]
[choix

[choix

Reçu

Consultation
Co Impression
Im
Données
du passe

Consultation détaillée


Conception du dialogue «homme/service»
S_01 / Renouvellement COM en cours de validité S_02 / Achat abonnement différent

DIALOGUE AUTOMATE TÂCHES UTILISATEUR DIALOGUE AUTOMATE TÂCHES UTILISATEUR

A_01 Invitation à déposer A_01 Invitation à déposer
le passe [ACCUEIL] le passe [ACCUEIL]

A_02 [Choix de la langue] A_02 [Choix de la langue]

Je dépose mon passe U_01_01 Je dépose mon passe U_02_01

A_03 Rappel données passe A_03 Rappel données passe
(consultation simple) (consultation simple)

A_04 Proposition consultation A_04 Proposition consultation
détaillée détaillée

A_05 Proposition A_05 Proposition renouvellement
renouvellement COM abonnement récent ou
(+ rappel dates et prix) Je valide le renouvellement U_01_02 chargement abo. annuel

A_06 Sélection d’un abonnement A_06 Proposition choix d’un
ou réserve de parcours abonnement ou réserve
de parcours Je sélectionne un U_02_02
abonnement
A_07 Proposition choix zones

Je sélectionne la zone U_02_03
(ou aide au choix de zones)

A_10 Invitation à inserer CB A_10 Invitation à inserer CB
(+ rappel produit et prix) (+ rappel produit et prix)
J’insère ma CB U_01_03 J’insère ma CB U_02_04

A_11 Invitation à taper le code A_11 Invitation à taper le code

Je tape et je valide mon code U_01_04 Je tape et je valide mon code U_02_05

A_12 Validation transaction A_12 Validation transaction
(+ chargement) (+ chargement)

A_14 Proposition impression reçu A_14 Proposition impression reçu

A_16 Invitation à retirer CB A_16 Invitation à retirer CB

Je retire ma CB U_01_05 Je retire ma CB U_02_06

A_17 Invitation à retirer passe A_17 Invitation à retirer passe
[FIN] [FIN]
Je retire mon passe U_01_06 Je retire mon passe U_02_07



S_01 / Renouvellement COM en cours de validité

DIALOGUE AUTOMATE TÂCHES UTILISATEUR

A_01 Invitation à déposer
le passe [ACCUEIL]

A_02 [Choix de la langue]

Je dépose mon passe U_01_01

A_03 Rappel données passe
(consultation simple)

A_04 Proposition consultation
détaillée

A_05 Proposition
renouvellement COM
(+ rappel dates et prix) Je valide le renouvellement U_01_02

A_06 Sélection d’un abonnement
ou réserve de parcours



S_02 / Achat abonnement différent

DIALOGUE AUTOMATE TÂCHES UTILISATEUR

A_01 Invitation à déposer
le passe [ACCUEIL]

A_02 [Choix de la langue]

Je dépose mon passe U_02_01

A_03 Rappel données passe
(consultation simple)

A_04 Proposition consultation
détaillée

A_05 Proposition renouvellement
abonnement récent ou
chargement abo. annuel

A_06 Proposition choix d’un
abonnement ou réserve
de parcours Je sélectionne un U_02_02
abonnement
A_07 Proposition choix zones

Je sélectionne la zone U_02_03
(ou aide au choix de zones)


Navigation : une logique sémantique orientée besoin
Wireframes / première session de tests
Je choisis ...
English Español Station Gare de Lyon (zone 1)
Vendredi 24 Mai 2002 - 12h10

Mon Passe contient
- Abonnement mensuel, Mai
> Abonnement mensuel, Juin / zones 1-4 (73,45 E) zones 1-4

> Autres titres

> Livraison d’un abonnement prépayé

Quitter Consultation détaillée


L&F : un signe urbain, une expérience utilisateur unique


Version pour les déficients visuels


IHM des TPV
TOTAL
ou : comment
une expérience
peut en cacher
une autre...


Faire son plein : architecture de l’expérience


Faire son plein : architecture de l’expérience

– L’opportunité, qui guide le choix de la station
(besoin, proximité, temps disponible...)
– Le bénéfice immédiat perçu, qui guide le choix de la
file (la queue la moins longue)
– Le besoin de réassurance, qui pousse le client à
vérifier qu’il s’agit de la bonne file (type de carburant)
– L’avantage secondaire perçu : la présence d’une
borne automatique
– La réalisation de la tâche sur la borne


Une expérience globale à optimiser

– L’expérience d’interaction avec l’IHM de la borne est
globalement appréciée par les clients
– Néanmoins, la satisfaction liée à la tâche de choix
et paiement du carburant n’est pas la garantie d’une
perception positive de l’expérience client dans sa
totalité
– Au-delà de quelques optimisations à la marge de
l’IHM, il est donc nécessaire de viser l’optimisation
de l’expérience globale du client


IHM des TPV Parkeon : concevoir
une syntaxe d’interaction pour une
nouvelle génération d’horodateurs
tout en anticipant l’expérience du
stationnement de demain...


Identiﬁers Other Products
Other Services Fine ID License Plate Etc.
Select
Product Pay Fine Buy Credit Etc
Sign In
Card Number Password Etc.

Select Payment Modify Payment

Parking Identiﬁers

Sign In Status / Privilege License Plate

Parking Space ID Transaction Code

Select Product

Select
Fixed–Rate Products Payment Payment Methods
Select
Product [Hours] [Days] [Months]
Modify Product Recap
Product
Price
Customize
Start Time & Date

End Time & Date
Custom Product
Select
Price Payment
Insert Cash Bank Card
Cash Start Time & Date
Modify
Product Online
End Time & Date Kiosk Card
Account

Modify Confirm Pay

Old Price New Price Payment prompt

Old Start New Start
Add / Take
Subtract
Old End New End

Printout and/or Receipt


pour un stationnement immédiat

pour un stationnement différé

pour un RTP

pour la création d'un e-Wallet

dans le cas d'un P&D pour la catégorie "Résident" pour le règlement d'une amende
dans le cas d'un utilisateur non-identifié
dans le cas d'un P by Space pour la catégorie "Employé"
dans le cas d'un utilisateur identifié pour le Reload d'une pre-paid card

dans le cas d'un P by Plate pour la catégorie "Livreur"…
pour un Add-TIme

pour Pick-Up online product

pour le reload e-wallet

pour consulter solde ou historique


grâce à une puce RFID

grâce à une carte pré-payée
grâce à un pass numérique
ou magnétique
grâce à un e-wallet
grâce à une CB


01. JEAN-LOUIS 02. ETIENNE 03. NINA 04. ALEXANDRE 05. EMILE 06. HECTOR 07. PIERRE 08. MARIA 09. ROMAIN 10. MATHIEU 11. GILLES

P&D PAY BY SPACE PAY BY ID

VEILLE CHOIX DU SERVICE VALIDATION PAIEMENT DISTRIBUTION

stationnement

écran de veille abonnement
récapitulatif CHOIX RÈGLEMENT

amende S'IDENTIFIER
retour valider valider
solde, historique
titre stationnement,
reçu amende, solde historique
MODE DE PAIEMENT
CHOIX RÈGLEMENT
pièce, monnaie
stationnement CB

abonnement

amende _
durée

+
3h = 15€ D'ABONNEMENT
solde, historique
ok
CHOIX RÈGLEMENT
pièce, monnaie

CB

PLACE
stationnement

abonnement

n°22 durée

IDENTIFICATION
amende
solde, historique
ok
_ +
3h = 15€
ok

IDENTIFICATION
RAPPEL
- nom, numero
MERCI
stationnement retour
abonnements

abonnement / recharg

amende 7j= 40€
solde, historique
ok
IDENTIFICATION

RAPPEL
- nom, numero
MERCI

retour
stationnement
code amende ?

abonnement

amende
solde, historique IDENTIFICATION
CODE
RAPPEL
- nom, numero
MERCI

retour

stationnement

abonnement

amende IDENTIFICATION
solde, historique RAPPEL
- nom, numero
MERCI

retour


P&D

-




stationnement


amende S'IDENTIFIER
solde, historique

CHOIX RÈGLEMENT
pièce, monnaie
stationnement CB

abonnement

amende _
durée

+
solde, historique
ok
CHOIX RÈGLEMENT
pièce, monnaie

CB

PLACE
stationnement

abonnement

amende
solde, historique
n°22 ok
_
durée

+
3h = 15€
ok

IDENTIFICATION
RAPPEL
- nom, numero
MERCI
abonnements


amende 7j= 40€
solde, historique
ok
IDENTIFICATION

RAPPEL
- nom, numero
MERCI

retour
stationnement
code amende ?

abonnement

amende
CODE
RAPPEL
- nom, numero
MERCI

retour

stationnement

abonnement

- nom, numero
MERCI

retour


P&D




stationnement


amende S'IDENTIFIER
solde, historique

CHOIX RÈGLEMENT
pièce, monnaie
stationnement CB

abonnement

amende _
durée

+
solde, historique
ok
CHOIX RÈGLEMENT
pièce, monnaie

CB

PLACE
stationnement

abonnement

amende
solde, historique
n°22 ok
_
durée

+
3h = 15€
ok

IDENTIFICATION
RAPPEL
- nom, numero
MERCI
abonnements


amende 7j= 40€
solde, historique
ok
IDENTIFICATION

RAPPEL
- nom, numero
MERCI

retour
stationnement
code amende ?

abonnement

amende
CODE
RAPPEL
- nom, numero
MERCI

retour

stationnement

abonnement

- nom, numero
MERCI

retour


Étape 1 Étape 2 Étape 3 Étape 4
Orbit affiche les offres forfaitaires de Suite au choix du produit forfaitaire Suite au choix de «Payer», Orbit affiche Suite à mon choix de payer par « Carte
« Stationnement ». Les formules sont « Ticket 2h », Orbit affiche l’écran de un récapitulatif du produit acheté (deux bancaire », Orbit me propose d’insérer
organisées par durée : heures, jours, choix de la durée de stationnement avec heures de stationnement pour 4 €). ma carte bancaire dans le lecteur dédié.
mois, durée personnalisée. une durée de droit de stationnement de
deux heures. Orbit me demande de sélectionner un
Je souhaite acheter deux heures à partir moyen de paiement.
de maintenant. Je choisis le produit Satisfait de la prise en compte de mon
forfaitaire qui correspond à mon besoin : choix de droit de stationnement, je Je choisis de payer par « Carte
« Ticket 2h ». choisis de «Payer». bancaire ».

Parkéon | Orbit | Storyboard | Attoma | 15 janvier 2010 page 5 / 25


Suite au choix de « Modifier » l’heure de Satisfait de mon choix horaire, je choisis Je choisis de « Modifier » l’heure de fin de Je choisi « +1 Heure » pour avancer
début de mes droits de stationnement, de « Valider » le début de mes droits. mes droits de stationnement. l’heure de fin d’une heure, à 21h30 au
Orbit ouvre un module d’interaction lieu de 20h30.
dédié à la configuration du début des
droits de stationnement.

Le reste de l’interface n’est plus active.

Je choisi « +1 Heure » pour avancer
l’heure de début d’une heure, à
19h30 au lieu de 18h30. Orbit modifie
l’heure de début affiché dans le champ
correspondant. L’heure de fin des droits
est également avancée en conséquence.



Suite au choix de « Modifier » l’heure de Satisfait de mon choix horaire, je choisis Satisfait de mon choix de droits de Suite au choix de «Payer», Orbit affiche
fin de mes droits de stationnement, Orbit de « Valider » la fin de mes droits. stationnement, je choisis de «Payer». un récapitulatif du produit acheté (deux
ouvre un module d’interaction dédié à heures de stationnement pour 4 €).
la configuration de la fin des droits de
stationnement. Orbit me demande de sélectionner un
moyen de paiement.
Le reste de l’interface n’est plus active.
Je choisis de payer par « Carte
Je choisi « +1 Heure » pour avancer bancaire ».
l’heure de fin d’une heure, à 20h30 au
lieu de 19h30.



Êtes-vous agile ou débordé ?
Ou : l’explosion de la méthode.


Que le temps passe vite !
– 2001 : IHM Navigo/RATP = 4 ans de projet
– 2009 : IHM Orbit/Parkeon = 6 mois de projet


Qui dit mieux ?
– Scénario 1 : le développement d’abord,
le design après (le rêve de l’ingénieur)
– Scénario 2 = l’UX Design d’abord, le
développement après (le rêve du designer...)
– Scénario 3 = le développement comme
processus de prototypage de la conception
(le rêve du project manager...)


Les principes de la conception agile
– Davantage l’interaction avec les personnes
que les processus et les outils.
– Davantage un produit opérationnel qu’une
documentation pléthorique.
– Davantage la collaboration avec le client
que la négociation de contrat.
– Davantage la réactivité face au changement
que le suivi d'un plan.


Parlons modèles...


SCRUM, un modèle de gestion de projet «agile», orienté
développement

Different designers manage // 07_avril_2010of design in different ways. But when we
GIUSEPPE ATTOMA UX PARIS the process 73
studied the design process in eleven leading companies, we found striking
similarities and shared approaches among the designers we talked to. In this
...et son copain (?) Double Diamond, process, and give more detail on
section we show one way of mapping the design «Design Thinking Oriented»
the key activities in each of the process's four stages.

The 'double diamond' design process model
The double diamond diagram was developed through in-house research at the
Design Council in 2005 as a simple graphical way of describing the design
process.

Divided into four distinct phases, Discover, Define, Develop and Deliver, it maps the
divergent and convergent stages of the design process, showing the different modes of
thinking that designers use.

Discover
The first quarter of the double diamond model marks the start of the project. This begins
with an initial idea or inspiration, often sourced from a discovery phase in which user
needs are identified. These include:

— Market research
— User research


modèles masculins vs modèles féminins ?


Oui d’accord... mais comment
ça s’emboîte ?


Trois types de modélisation pour un même projet...


Et votre modèle à vous ?


merci !

L'UX est dans la rue !

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (19)

L'UX est dans la rue !