CN2 • Les tendances du web design et l'expérience utilisateur

CARREFOUR NUMÉRIQUE 30E FORUM DE LA COMMUNICATION
PUBLIQUE ET TERRITORIALE
4.5.6 Décembre 2018 LYON
Les tendances du webdesign
et l’expérience utilisateur
Sylvain Léauthier – La Fabrik à Click
Florent Jaouali – We Love Users
Coordonné par Pierre Bergmiller – Ville & Eurométropole de Strasbourg

30E FORUM DE LA COMMUNICATION
Les carrefours numériques
• CN 1 : utilisation des stories sur les réseaux sociaux
Mercredi 5/12 à 14h30
• CN 2 : les tendances du webdesign et l’expérience utilisateur
Mercredi 5/12 à 16h30
• CN 3 : digitale thérapie, les 8 questions qui vous empêchent de dormir
Jeudi 6/12 à 9h30
• CN4 : gestion de la relation usager, quels outils numériques
et quelles relations avec la DSI
Jeudi 6/12 à 15h00

CARREFOUR NUMÉRIQUE 30E FORUM DE LA COMMUNICATION
Les tendances du webdesign
et l'expérience utilisateur
Rendez-vous en terre inconnue…
Sylvain Léauthier - sylvain@lafabrikaclick.com

LA FABRIK A CLICK
Stratégie de contenus & digitale
Expérience utilisateur humains & robots (SEO)
4

PLAN DE L’EXPOSÉ
• Initiation à l’archéologie #indianajones
• Petit traité d’ethnographie #levistrauss
• Essai de prophétie #pacorabanne

Généalogie de la page d’accueil
Un voyage dans le temps via planète Paris

Le web de service

Le web de l’histoire

Web de service // web de l’histoire
• De l’UX dans les deux
• Des contenus dans les deux
– Orienté pratique dans le web de service
– Orienté storytelling dans le web de l’histoire

2 web qui cohabitent…ou pas
• Web de service : site web principal
• Web de storytelling :
– Site web dédié, événementiel
– Plateformes externes : medium, instagram
• Parfois les 2 cohabitent :
– Exemples sur les pages d’accueil

On est passé d’un web du discours
à un web du service et de l’histoire

Un changement de paradigme
• Pour le communicant : du décorateur à
l’architecte / l’ingénieur
• Pour l’utilisateur : une exigence de plus en plus
forte sur la qualité de l’expérience et du service

Ut abore iuntis (niv titre 1)
Ut abore iuntis (niv titre 2)
• Pis de plique re porem aut re non rest, tectur sus
et
• ate venihilit venihil (texte courant).
• Vius atemolupti ut lacespis rendit velesti animin
• excerum faciam, doluptaepel tectur sus)

Interfaces WIMP (Windows, Icons, Menus and Pointing device)

Interfaces tactiles

Interfaces vocales

Les interfaces vocales ne vont pas remplacer les
interfaces WIMP et tactiles !
Elles couvrent un contexte d’usage qui n’était pas jusqu’alors
couvert par les autres interfaces (mains occupées, device éloigné)
• Interfaces WIMP : Années 80
• Interfaces tactiles : Années 2000
• Interfaces vocales : Années 2010

Le web des sens
• Web qui se regarde (sites vitrines)
• Web qui se lit (web de contenu)
• Web qui s’écoute (web vocal, podcasts)
• Web qui se touche (design d’interactions)
• Web qui se sent ?

L’influence des outils sur le design
• Images & vidéos full screen
– Permises par l’augmentation de la résolution des appareils photos
et caméras, et l’amélioration des formats de compression et de
diffusion (streaming)
• Sites standardisés en terme de design
– Permis par les CMS, la concentration sur ce marché (dominé par
Wordpress), par l’entrée de nouveaux acteurs qui proposent des
sites clés en main (Wix, Bubble)

Content Is King !
Avec la standardisation du design, l’enjeu de l’expérience
utilisateur est de plus en plus déterminé par le contenu
• « Mettez 70% de votre budget de
fonctionnement sur les contenus et seulement
30% sur la maintenance des sites/app »
• ROI et efficacité des refontes de site web :
– Sortir du « Launch & leave » > amélioration continue

Les 8 raisons de ne
pas faire de l’UX
(bonnes ou mauvaises)
«

1. On a pas le temps
« On a passé 100K€ et 1 an et demi dans le
projet web, c’est pas pour tout refaire 6 mois
après »

Si j'avais 8 heures pour couper un arbre,
je passerais 6 heures à aiguiser la lame.
Abraham Lincoln

Faire de l’UX, c’est aiguiser sa lame !
Choisir les bons outils = avoir les bonnes données :
• Analytics
• Focus group
• Entretiens individuels
• Tests utilisateurs
• Enquête en ligne
• Card Sorting
• …
• Et l’intuition !!

Sortir du « launch and leave »…
…et rentrer dans une logique d’amélioration continue !
• Monitorer l’UX
– Scoring
– Évolution tous les 2 ans, après une refonte

2. On connaît déjà nos
publics
« On a même fait des personas »

3. Les analytics, ça
nous suffit
In Google Analytics We Trust

Pages les + vues
Page
1 /
2 /en/
3 /programmes/
4 /candidats/admissions/
5 /programmes/programme-grande-ecole/admissions/
6 /programmes/masters-science/programme-grande-ecole/admissions/
7 /decouverte/
8 /services-etudiants/campus-paris/
9 /programmes/programme-grande-ecole/programme-master/
10 /en/programs/
11 /programmes/masters-science/programme-grande-ecole/programme-master/
12 /candidats/
13 /services-etudiants/campus-lyon/
14 /services-etudiants/calendrier-academique/
15 /payment
16 /programmes/programme-grande-ecole/programme-bachelor/
Google Analytics : Top 100 des requêtes - barre de
recherche (2015 - 2018)
Terme de
recherche
Nombre
total de
recherches
uniques % du total: 100,00 %
1 calendrier 419 0,94%
2 alternance 382 0,86%
3
portes
ouvertes 358 0,81%
4
frais de
scolarité 339 0,76%
5 admission 303 0,68%
6 associations 300 0,68%
7 association 274 0,62%
8 fees 265 0,60%
9 calendar 249 0,56%
Termes de recherche les +
fréquents

Tasks 🇫🇷
1 Connaître les débouchés du programme choisi (poste, domaine, salaire moyen)
2 Connaître les possibilités d'échanges à l'étranger
3 Connaître les conditions d'admission
4 Obtenir des infos sur les frais de scolarité
5
Connaître la position de l’école dans les classements
6 Connaître le nombre et la durée du stage du parcours
7 Trouver des infos sur les procédure de candidature
8 Connaître la date limite d'inscription en ligne / calendrier d'inscription
9 Avoir des infos sur les salaires à la sortie des études
10 Savoir comment est structurée l'année (calendrier académique)
11 Accéder à l'inscription en ligne
12 Savoir quels élements doit constituer mon dossier de candidature
13 Se renseigner sur les labels officiels
Top tâches

4. On a déjà fait des
focus group
Oui Monsieur

Opinion ≠ usage ≠ usabilité
Décalage souvent fort entre l’usage déclaré et l’usage constaté
• Opinion : qu’est ce que vous pensez du site ?
– Morale, biais sociaux
• Usage : que venez vous faire sur le site ?
• Usabilité : comment les utilisateurs utilisent notre site
?

Faites de l’ethnographie !
• Test utilisateur
• Articuler les bonnes données
• Le « comment » est fondamental :
– Recrutement et choix du panel
– Instructions et animation des sessions

5. C’est moi l’expert
« J’ai 10 d’expérience dans le digital, Monsieur,
ce n’est pas Mme Michu qui va m’apprendre
comment le web fonctionne »

Changement de « mindset »
Point fondamental
• L’expertise ne se construit plus sur un savoir
théorique ou auto-centré, mais sur l’expérience, qui
découle elle-même de l’observation
• Sortir de la logique organisationnelle / interne :
process, langage…
– On écoute trop les personnes en interne, pas assez les
utilisateurs !

6. C’est dur de trouver et
mobiliser les utilisateurs
« Excusez-moi, vous auriez 10min pour participer
à un test utilisateur ? »

On n’aime pas demander un service aux gens
• Ce n’est pas une démarche facile mais :
– C’est de l’humain !
– C’est extrêmement gratifiant et instructif !
• Très structurant en interne :
– Production de contenus et évolutions des fonctionnalités
– Justifier des choix en interne (et ne plus devoir arbitrer de manière
subjective (et donc souvent conflictuelle) des demandes internes
– Justifier des orientations à la direction et reporter des données chiffrées
et objectivées (renforce la crédibilité des service communication)

7. Ca coûte cher
« J’ai tout dépensé dans la charte graphique »

Le ROI est très rapide…et long-terme
• Un bouton d’action bien positionné, des choix
éditoriaux pertinents > Source d’économies
en interne

8. On a peur d’être
évalués
« On fait quoi si les tests utilisateurs montrent que
notre site délivre une mauvaise expérience
utilisateur ? »

Évaluer, c’est progresser
• On n’évalue pas les personnes mais un site ou une
application
• Monitorer la performance des sites, c’est très gratifiant et
structurant
– Les sites s’améliorent et les équipes progressent en terme de
compétences

Le communicant de demain sera un :
• Ethnographe (observer, comprendre, analyser)
• Architecte (structurer)
• Conteur (raconter)

Merci ;)
Sylvain Léauthier
Consultant web
@sleauthier
06 80 87 20 04
sylvain@lafabrikaclick.com
64

échangez sur
#CAPCOM18

CN2 • Les tendances du web design et l'expérience utilisateur

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à CN2 • Les tendances du web design et l'expérience utilisateur

Similaire à CN2 • Les tendances du web design et l'expérience utilisateur (16)

Plus de Cap'Com

Plus de Cap'Com (20)

CN2 • Les tendances du web design et l'expérience utilisateur