Digital Creative Morning 2

132
RETOUR D’EXPERIENCE PARIS WEB

description

Retour d'expérience PARIS WEB 2013

Transcript of Digital Creative Morning 2

Page 1: Digital Creative Morning 2

RETOUR D’EXPERIENCE PARIS WEB

Page 2: Digital Creative Morning 2

10, 11 et 12 octobre 2013

650 participants 64 orateurs 41 conférences 21 ateliers

Paris Web, la conférence francophone des gens qui font le web.

Elle explore les thèmes de l'accessibilité Web, du design numérique et des standards ouverts.

Page 3: Digital Creative Morning 2

Penser l’expérience utilisateur mobile

1

Page 4: Digital Creative Morning 2

Notre job n’est pas (seulement)de fournir une belle expérience utilisateur

Page 5: Digital Creative Morning 2

C'est (aussi) travaillersur les moments dégradés de l’expérience

Page 6: Digital Creative Morning 2
Page 7: Digital Creative Morning 2
Page 8: Digital Creative Morning 2
Page 9: Digital Creative Morning 2
Page 10: Digital Creative Morning 2
Page 11: Digital Creative Morning 2
Page 12: Digital Creative Morning 2
Page 13: Digital Creative Morning 2
Page 14: Digital Creative Morning 2
Page 15: Digital Creative Morning 2
Page 16: Digital Creative Morning 2
Page 17: Digital Creative Morning 2
Page 18: Digital Creative Morning 2

Ce que Fraisse & Orsini nomment

la conduite temporelle " l'activité n'est plus dirigée vers l'acte à accomplirmais vers l'adaptation au délai. "

Etude des conduites temporelles. I. L'attenteIn: L'année psychologique.1955 vol. 55, n°1. pp. 27-39.

Page 19: Digital Creative Morning 2

Or les usagers sont très volatilesencore plus en situation de mobilité,et d'autant plus qu’ils ont le choix

Page 20: Digital Creative Morning 2

La preuve !"More than one-quarter say they will visit a competitorsite (28%) or not trust the website (27%)if the site takes too long to load."

SOASTA 2013 Website and Mobile App Report

Page 21: Digital Creative Morning 2

Que peut y faire le designer ?

Page 22: Digital Creative Morning 2

Tempsd’attenteréel

Tempsd’attenteperçu≠

Page 23: Digital Creative Morning 2

Conseils pour réduirele temps d'attente perçu

Page 24: Digital Creative Morning 2

Principe de gestion de l'attente

1.

Attendre avant d'entrer dans le systèmesemble plus long qu'attendre une fois entré dans le système

Page 25: Digital Creative Morning 2

Hello les splash screens !

Page 26: Digital Creative Morning 2

Hello les splash screens !

Page 27: Digital Creative Morning 2

Hello les splash screens !

Page 28: Digital Creative Morning 2

Le temps d'attente perçu augmente avec :

La criticité ou sensibilité de l'information recherchéeex : Ratp, Shazam, Skype

Page 29: Digital Creative Morning 2

Le temps d'attente perçu augmente avec :

Un contexte d'utilisation stressantEx : Google Maps

Page 30: Digital Creative Morning 2

Le temps d'attente perçu augmente avec :

La répétition de l'attenteEx : Meteo France (Splash screen + Intersticiel pub)

Page 31: Digital Creative Morning 2

La solution !

Simuler l'entrée dans le systèmeen affichant le maximum de chosesUtiliser les squelettes d'écran pour donner l'impression d'avancer.

Page 32: Digital Creative Morning 2

Instagram

Page 33: Digital Creative Morning 2

Instagram

Page 34: Digital Creative Morning 2

Instagram

Page 35: Digital Creative Morning 2

Instagram

Page 36: Digital Creative Morning 2

Un compromisentre image et réduction du tempsd'attente perçu

Page 37: Digital Creative Morning 2

Principe de gestion de l'attente

2.

Une attente occupéeparaît moins longue qu'une attente inoccupée

Page 38: Digital Creative Morning 2

Monoprix

Page 39: Digital Creative Morning 2

Principe de gestion de l'attente

3.

Détourner l’attention du loader

Page 40: Digital Creative Morning 2

Google drive

Page 41: Digital Creative Morning 2

Google drive

Page 42: Digital Creative Morning 2

Google drive

Page 43: Digital Creative Morning 2

Google drive

Page 44: Digital Creative Morning 2

Goodreads

Page 45: Digital Creative Morning 2

Goodreads

Page 46: Digital Creative Morning 2

Goodreads

Page 47: Digital Creative Morning 2

Principe de gestion de l'attente

4.

Donner de l’information précise

Page 48: Digital Creative Morning 2

Path Transit Monoprix Ibotta

Page 49: Digital Creative Morning 2

Principe de gestion de l'attente

5.

Varier les patienteurs

Page 50: Digital Creative Morning 2

Pinterest

Page 51: Digital Creative Morning 2

Savoir aussi prendre le temps...

Page 52: Digital Creative Morning 2

Quand j'ai le temps

WWF

Page 53: Digital Creative Morning 2

Quand c'est peu coûteux et peu fréquent

Yummly

Page 54: Digital Creative Morning 2

Yummly

Quand c'est peu coûteux et peu fréquent

Page 55: Digital Creative Morning 2

Yummly

Quand c'est peu coûteux et peu fréquent

Page 56: Digital Creative Morning 2

Yummly

Quand c'est peu coûteux et peu fréquent

Page 57: Digital Creative Morning 2

Mais aussi

Moins de clics mais pas sur tout

Aller jusqu'au bout de ces choix

Hiérarchiser les contenus

Inhiber les distracteurs

...

Page 58: Digital Creative Morning 2

Crédits

Cette présentation est un résumé de la conférence d’Amélie Boucher.

Director of User Experience chez Viadeo,consultante en Ergonomie, Architecture de l ’information et UX Design et diplômée du Master d’Ergonomie de l’Université René Descartes (Paris 5)Amélie Boucher lance en 2003 le site éditorial www.ergolab.net.

Page 59: Digital Creative Morning 2

La théorie du flow

ou l’expérience optimale

2

Page 60: Digital Creative Morning 2

Le « cognitive flow »

(ou « flux cognitif »)est un concept formalisé en 1970 par le psychologue hongrois

Mihály Csíkszentmihályi.

Page 61: Digital Creative Morning 2

Selon lui, notre disposition émotionnelle est directement influencéepar le rapport entre la difficulté d’une tâche et notre niveau de

qualification.

Buts concretset règlescompréhensibles

Exigencesintéractives etcapacités del’utilisateur

Feedback clairet temporellementpertinent

Réduireles distractionsextérieures

+ + +

=

Cognitive flow

Page 62: Digital Creative Morning 2
Page 63: Digital Creative Morning 2

• Grande concentration

• Impression de contrôle

• Sensation de maîtrise de ce qu’il faut faire et comment y arriver

• Perte de conscience de soi , extase

• Distorsion de la perception de l’écoulement du temps

• Conviction que la tâche elle-même est la seule justification nécessaire à son accomplissement (activité autotélique )

Les caractéristiquesde l’état de flow

Page 64: Digital Creative Morning 2

Les jeux vidéosLes rois du flow

Page 65: Digital Creative Morning 2

Application & Best practicesWeb-documentaires et autres sites de consultation de médias

Page 66: Digital Creative Morning 2

• Clair (compréhension rapide des règles et des buts)

• Qui permet l’exploration (série d’expériences gratifiantes)

• Qui sert la non-linéarité du propos documentaire (n’abandonne pas le spectateur)

• Qui permet la prise de décision en connaissance de causes

• Qui aide à re-créer du sens documentaire(rhétorique interactive) et de l’engagement (extase)

Design de l’interfaceButs concretset règlescompréhensibles

Page 67: Digital Creative Morning 2

Exigencesintéractives etcapacités del’utilisateur

• Choix du « niveau de difficulté »Facile (linéaire), intermédiaire (interactif), difficile (participatif)

• Hiérarchisation de la complexité

• Sentiment de progression, de montée en capacités

• Référence au « connu »

• Rassurer l’utilisateur tout en le poussant à sortir de sa zone de confort (règle des 10%)

• Analyse des comportements et adaptation dynamique

S’adapter aux usages,aux capacités, aux habitudes

Playtestez !

Page 68: Digital Creative Morning 2

• Perception spatiale

• Perception temporelle

• Perception de progression narrative

Feedbacks

Donner à l’utilisateur des outils de :

• Jauges de progression, effet grisé / allumé,bruitages, marqueurs de progression…

En utilisant des systèmes de :

Feedback clairet temporellementpertinent

Page 69: Digital Creative Morning 2

FeedbacksFeedback clairet temporellementpertinent

3 règles à respecter

• Ils doivent apparaître tôt dans la consultation, pour que l’utilisateur se familiarise et comprenne rapidement leur intérêt.

• Ils doivent apparaître au bon moment : soit directement après l’accomplissement d’une « tâche » soit à mi-chemin.

• Ils doivent être persistants d’une visite à l’autre. Un système de sauvegarde de la progression (cookie, Facebook connect, inscription…) est dès lors précieux.

Page 70: Digital Creative Morning 2

Réduireles distractionsextérieures

• Proposer le plein écran

• Éviter les liens sortants

• Miser sur la qualité d’image + fluidité du stream

• Faire disparaître l’interface

• Manier l’animation avec précaution

• Laisser partir et faire revenir

• Envisager le multiplateformes (cloud)

Dépolluer !

Page 71: Digital Creative Morning 2

Expérience Optimale

Conclusion

+

+

=

Plaisir (esthétique)

Engagement (quelque chose de plus grand que soi),

Sens (quelque chose d’important)

Page 72: Digital Creative Morning 2

Cette présentation est un résumé de la conférence de Florent Maurin.

Diplômé de l'Ecole supérieure de journalisme de Lille, scénariste interactif de webdocumentaires, et architecte transmedia, il dirige depuis janvier

2013 The Pixel Hunt (http://www.thepixelhunt.com).

Crédits

Page 73: Digital Creative Morning 2

• Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)http://www.paris-web.fr/2013/listening_platforms.pdf

• Le retour sur investissement de la qualité webPrésenté par Muriel de Dona (Consultante qualité Web chez Temesis – co-auteur du livre « Qualité Web »)http://paris-web.fr/2013/spopquast-partnersparis-web20131010-131016060421-phpapp01.pdf

3

Page 74: Digital Creative Morning 2

Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)

Approche globale permettant aux métiers de la marque d’optimiser leurs processus de pilotage des parcours clients et prospects sur les multiples points de contacts.

Customer eXperience Management

Source: Clever Age

Page 75: Digital Creative Morning 2

Source: Clever Age

CXM : Les points de contact traditionnels/numériques

Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)

Page 76: Digital Creative Morning 2

Source: Clever Age

Listening Platforms

Plateformes et services de surveillance d’indicateurs variés tels que : performances, sécurité, compatibilité multi-devices, e-reputation, réseaux sociaux…

Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)

Page 77: Digital Creative Morning 2

Source: Clever Age

Listening Platforms : Les outils du marché actuel

Customer eXperience Management (CXM) et « Listening Platforms »Présenté par Frédéric Bon (CEO Clever Age)

Page 78: Digital Creative Morning 2

Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)

Le ROI de la Qualité Web, c’est quoi ?

|Comment le mesurer ?

|Avec quel référentiel ?

Temesis édite le livre « Qualité Web - Les bonnes pratiques pour améliorer vos sites », développe également un ensemble de méthodes et d’outils pour la maitrise de la qualité Web : Opquast (http://opquast.com/fr/)

Page 79: Digital Creative Morning 2

ROI = (gains – couts) / couts

Les gains

Pour l’utilisateur • rapidité, accessibilité, sécurité

Pour l’agence • Image, RH, Process, business

Pour le client • garanties, économies, satisfaction

Les économies• Coûts de non qualité • Micro-coûts cachés• Dette technique = impact sur

maintenance (délais/coûts)

Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)

Les coûts• Management / Responsable qualité • Audit• Mise en conformité• Outils d’analyse et suivi• Formation

Page 80: Digital Creative Morning 2

Opquast, c’est :• Des bonnes pratiques (Livre & checklists)• Des outils• Des entreprises partenaires comme Clever Age

Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)

Page 81: Digital Creative Morning 2

Comment ?

Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)

Page 82: Digital Creative Morning 2

Référentiel

Les objectifs du référentiel sont :• sélection des bonnes pratiques ayant un potentiel supposé de ROI• sans oublier la satisfaction utilisateur

Méthodologie

• Première sélection de critères• Itérations• Réalisation d’audits tests• Ajustements

Le retour sur investissement (ROI) de la qualité webPrésenté par Muriel de Dona (Temesis)

Page 84: Digital Creative Morning 2

Qu'est-ce qu'un « em » ?

Un peu d'histoire…

Cette unité de mesure, notée em, est appelée « cadratin » en typographie française.

Historiquement, le cadratin correspond à la hauteur d'un caractère de plomb utilisé dans l'imprimerie.

(Source)

Page 85: Digital Creative Morning 2
Page 86: Digital Creative Morning 2
Page 87: Digital Creative Morning 2
Page 88: Digital Creative Morning 2
Page 89: Digital Creative Morning 2

Les nouveaux moyens de navigation sur le Web doivent donc être pris en compte dans la conception des sites.

Les interfaces doivent être adaptées à des conditions de consultations variables

Ces différents appareils ont bien entendu des tailles physiques et formats — paysage ou portrait notamment — très différents.

Page 90: Digital Creative Morning 2
Page 91: Digital Creative Morning 2
Page 92: Digital Creative Morning 2
Page 93: Digital Creative Morning 2
Page 94: Digital Creative Morning 2
Page 95: Digital Creative Morning 2
Page 96: Digital Creative Morning 2
Page 97: Digital Creative Morning 2
Page 98: Digital Creative Morning 2
Page 99: Digital Creative Morning 2

« A DAO Of Web Design » écrit en 2000 par John Allsopp, est un article fondateur de l’intégration Web de qualité :

« C'est la nature du web d'être flexible, et il en va de notre rôle en tant que concepteurs et développeurs d'embrasser cette flexibilité et de produire des pages qui, en étant flexible, sont accessibles à tous. Faire des pages qui s'adaptent aux besoins d'un lecteur, dont la vue est plus qu'imparfaite, et qui souhaitent lire des pages avec une grande taille de police. »

Page 100: Digital Creative Morning 2
Page 101: Digital Creative Morning 2
Page 102: Digital Creative Morning 2
Page 103: Digital Creative Morning 2
Page 104: Digital Creative Morning 2
Page 105: Digital Creative Morning 2
Page 106: Digital Creative Morning 2
Page 107: Digital Creative Morning 2
Page 108: Digital Creative Morning 2
Page 109: Digital Creative Morning 2
Page 110: Digital Creative Morning 2

On trouve une taille par défaut de 16px dans les navigateurs d’ordinateurs, smartphones ou tablettes.

Mais il est important de savoir qu’au delà du fait que certains utilisateurs changent cette valeur par choix, certains appareil et/ou navigateurs sont fournis avec une taille par défaut différente.

La taille par défaut de 16px n’est pas un standard

Page 111: Digital Creative Morning 2

Source : http://lab.gasteroprod.com/rfs/

Taille par défaut de 16px

Page 112: Digital Creative Morning 2
Page 113: Digital Creative Morning 2

Responsive Web Design élastique

Page 114: Digital Creative Morning 2
Page 115: Digital Creative Morning 2
Page 116: Digital Creative Morning 2
Page 117: Digital Creative Morning 2
Page 118: Digital Creative Morning 2
Page 119: Digital Creative Morning 2
Page 120: Digital Creative Morning 2

L’unité rem permet de définir des tailles relatives comme em, mais en prenant la taille de html comme référence plutôt que l’élément parent.

Page 121: Digital Creative Morning 2
Page 122: Digital Creative Morning 2
Page 123: Digital Creative Morning 2
Page 124: Digital Creative Morning 2
Page 125: Digital Creative Morning 2
Page 126: Digital Creative Morning 2
Page 127: Digital Creative Morning 2
Page 128: Digital Creative Morning 2
Page 129: Digital Creative Morning 2
Page 130: Digital Creative Morning 2

Votre objectif est — devrait être — de diffuser un message, un service, et d’atteindre un public le plus large possible en lui proposant une expérience positive.

C’est que vous n’avez pas le choix, qu’il faut lâcher prise…

Respecter son public et s’adapter à ses préférences — tant que possible — est bien évidemment une bonne pratique.

Page 131: Digital Creative Morning 2

L’intégration en Responsive Web Design élastique est — aujourd’hui — le meilleur moyen de choisir vous-même comment votre site s’affiche, tout en respectant les préférences de vos visiteurs.

…mais que cela ne nécessite pas de perdre le contrôle !

Page 132: Digital Creative Morning 2

Merci