L’expérience utilisateur, plus importante que jamais: le cas STM.info

Boomerang la conférence, 1er mai 2014

Bonjour !

Jan-Nicolas Vanderveken Associé fondateur, TP1 @nvanderv, @TP1

Nicole Gruslin Conseillère corporative web, STM @ngruslin

#BoomConfSTM

2

Aujourd’hui

Contexte

App ou site?

La carte

Mobilité

Tests

Résultats

Questions ?

3

Contexte

4

Des utilisateurs satisfaitsSite développé en 1996 - 1997

En ligne depuis 1997

90 % de satisfaction

STM.info doit avant tout faciliter les déplacements des usagers et être disponible en tout temps, même dans les périodes de pointe et de crise.

5

Dans ce contexte, pourquoi créer un nouveau site?

6

App ou site?

7

Page 2 de 21

IMAGE EN-TÊTE - Facultative.Utiliser le gabarit prévu(voir détails plus bas).

ANCRES - Possibilité d’ajouter une ancre pour chaque TITRE H2 présent dans la page.

TITRE H2 - Préconiser les titres courts.*pQqUH�DXWRPDWLTXHPHQW�XQ�¿OHW�DX�GHVVXV�GX�titre et une ancre en haut de page.

SOUS-TITRE H3

PARAGRAPHEPossibilité de mettre des mots en gras ou en italique. Les différents liens sont listés plus bas.

Possibilité de centrer le texte.

BOUTONPrivilégier des boutons avec des textes courts.Ajouter un sous-titre au bouton pour indiquer une information secondaire.

LIEN/HV�LF{QHV�SUpVHQWHV�j�OD�¿Q�GHV�OLHQV�VRQW�JpQpUpHV�automatiquement en fonction de la nature de la redirection : - vers un lien externe (non hébergé sur l’URL stm.info);���YHUV�XQ�¿FKLHU�3')����YHUV�XQ�¿FKLHU�TXHOTXRQTXH����YHUV�XQ�¿FKLHU�DXGLR�

les différents styles graphiques

690 x 200 px

Ce qu’on a apprisLe choix entre une approche applicative ou plus traditionnelle se fait en fonction de la nature du contenu.

Le transfert de l’environnement applicatif à l’environnement informatif doit être fluide pour le client.

Il faut développer des outils de gestion efficaces pour maintenir l’intégrité du site après le lancement.

Nous avons, tout au long du projet, considéré STM.info comme un service, et non comme un site web.

17

La carte

18

Google Map vs OpenStreetMap

19

Ce qu’on a apprisLes solutions open source présentent un haut niveau de flexibilité et de personnalisation et un coût moindre.

Faire appel à des experts (Mapgears, dans ce cas).

OpenStreetMap nous a permis de créer une carte designée à l’image de la STM et respectant les codes graphiques auxquels sont habitués les usagers.

21

Mobilité

22

Les grands objectifsOptimiser les activités de déplacement pour les téléphones intelligents (itinéraires, horaires, tarifs et état du service métro et autobus).

Obtenir un design de marque cohérent, pour les trois environnements ciblés par la STM : ordinateurs, tablettes et téléphones intelligents.

Rendre la carte disponible sur les téléphones intelligents.

Créer une solution évolutive tenant compte des grandes tendances du marché et pouvant s’adapter.

23

La solutionOptimisation mobile, en mode adaptatif, pour les sections informationnelles du site.

Développer une application mobile web optimisée pour le plus d’appareils mobiles intelligents possible.

Mettre à profit les API et le CMS développés à ce jour.

Offrir à la clientèle une expérience optimisée et unifiée pour les téléphones intelligents sur l’ensemble du site.

24

ACCUEIL ETTHÈMES DE DÉPLACEMENT

(ADAPTATIF)

ordinateur + tablette

PAGES DE CONTENU(ADAPTATIF)

ordinateur + tablette + téléphone intelligent

ACCUEIL ETTHÈMES DE DÉPLACEMENT

téléphone intelligent

Ce qu’on a apprisIl faut faire des compromis : tout n’est pas noir ou blanc / adaptatif ou optimisé mobile. Une solution hybride peut s’avérer un choix judicieux.

Une app web mobile doit être ultra-légère : la performance est primordiale dans un contexte de mobilité et les impacts ne touchent pas que le UX, le code est aussi impacté.

Chaque fois que c’est possible, effectuer les opérations au niveau du serveur, et non du client.

Prendre les décisions importantes comportant un haut niveau d’incertitude le plus tard possible dans le projet.

40

Tests

41

42

Tests utilisateurs sur

maquettes

fonctionnelles Yu C

entrik

Bet

a pa

nel

clie

nts

(800

0)

TP1

Beta public TP1

Tests utilisateurs sur version alpha

Yu CentrikTe

sts

d’acce

ssibilit

é

Acces

sibilit

éWeb

Yu Cen

trik

Focus group

sur le design

Callosum

Beta pan

el

employé

s (20

00)

STM

Tri de cartes

TP1 / Adviso

Tests

utilisateurs

sur maquettes

fonctionnelles

Yu CentrikBeta

public

TP1

Test

s d’

acce

ssib

ilité

A

cces

sibi

litéW

eb

Yu C

entri

k

Focus group sur le design

Callosum

Tri de cartes TP1 / Adviso

Tests utilisateurs

sur maquettes fonctionnelles

Yu Centrik

Bet

a pu

blic

TP

1

Tests utilisateurs sur version alpha

Yu Centrik

Focus group

sur le design

CallosumTri de c

artes

TP1 / Adv

iso

Tests

utilisa

teurs

sur m

aquett

es

fonctionnell

es

Yu Cen

trik

Tests

utilisateurs sur

version alpha

Yu Centrik

Focus group sur le design

Callosum

Beta panel

employés

(2000) S

TM

Tri d

e ca

rtes

TP

1 / A

dvis

o

Test

s ut

ilisa

teur

s su

r maq

uette

s fo

nctio

nnel

les

Yu C

entri

k

Beta panel

clients (8000) TP

1

Tests utilisateurs sur version alpha

Yu Centrik

Focus g

roup

sur le

design

Callos

um

Beta panel

employés

(2000) STM

Beta panel

clients (8000)

TP1Te

sts

utilisa

teurs

sur

versi

on alpha

Yu Cen

trik

Tests d’accessibilité

AccessibilitéW

eb Yu C

entrik

Focu

s gr

oup

sur l

e de

sign

C

allo

sum

Beta panel employés

(2000) STM

Beta panel clients (8000)

TP1B

eta public TP

1

Test

s ut

ilisa

teur

s su

r ve

rsio

n al

pha

Yu C

entri

kTests

d’accessibilité

AccessibilitéWeb

Yu Centrik

Beta pan

el

employé

s

(2000

)

STM

Beta panel

clients (8000)

TP1Beta public

TP1Te

sts

utili

sate

urs

sur

vers

ion

alph

a

Yu C

entri

k

Tests d’accessibilité

AccessibilitéWeb Yu Centrik

Beta

pan

el

empl

oyés

(2

000)

ST

M

Tri de cartes TP1 / Adviso

Beta pan

el

clien

ts (80

00)

TP1

Beta public

TP1

Tests d’accessibilité

AccessibilitéWeb Yu Centrik

Bet

a pa

nel

empl

oyés

(2

000)

S

TM

Tri de cartes TP

1 / Adviso

Tests utilisateurs

sur maquettes

fonctionnelles Yu C

entrikBet

a pa

nel

clie

nts

(800

0)

TP1

Beta public TP1

Tests

d’acce

ssibilit

é

Acces

sibilit

éWeb

Yu Cen

trik

Tri de cartes

TP1 / Adviso

Ce qu’on a apprisPrivilégier des tests sur des composantes fonctionnelles (mais ce n’est pas toujours possible!)

Faire appel à des experts des tests.

Mettre à profit le personnel de la STM, ce qui a aussi eu comme bénéfice de les mobiliser et de créer un buzz dans l’entreprise.

Miser sur une stratégie de déploiement graduelle.

Impliquer chaque fois que possible les utilisateurs afin d’obtenir leurs commentaires, mais aussi pour faciliter l’acceptation de la nouvelle plateforme lors de son déploiement.

52

Résultats

53

Déplacement du trafic

54

2011

2012

2013

2014*

0% 25% 50% 75% 100%

Site webSite mobileTéléphone et SMS

* Valeurs projetées pour 2014

Applications natives téléchargées

55

* Valeurs projetées pour 20140

250000

500000

750000

1000000

2011 2012 2013 2014 *

iOSAndroid

Satisfaction de la clientèle!

Printemps 2013 (ancien site) : 94 %

Été 2013 (déploiement) : 94 %

Automne 2013 (nouveau site) : 96 %

56

Merci !

57