digital creative morning 2

RETOUR D’EXPERIENCE PARIS WEB

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.

Penser l’expérience utilisateur mobile

1

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

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

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.

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

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

Que peut y faire le designer ?

Tempsd’attenteréel

Tempsd’attenteperçu≠

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

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

Hello les splash screens !

Hello les splash screens !

Hello les splash screens !

Le temps d'attente perçu augmente avec :

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

Le temps d'attente perçu augmente avec :

Un contexte d'utilisation stressantEx : Google Maps

Le temps d'attente perçu augmente avec :

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

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.

Instagram

Instagram

Instagram

Instagram

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

Principe de gestion de l'attente

2.

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

Monoprix

Principe de gestion de l'attente

3.

Détourner l’attention du loader

Google drive

Google drive

Google drive

Google drive

Goodreads

Goodreads

Goodreads

Principe de gestion de l'attente

4.

Donner de l’information précise

Path Transit Monoprix Ibotta

Principe de gestion de l'attente

5.

Varier les patienteurs

Pinterest

Savoir aussi prendre le temps...

Quand j'ai le temps

WWF

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

Yummly

Yummly

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

Yummly

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

Yummly

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

Mais aussi

Moins de clics mais pas sur tout

Aller jusqu'au bout de ces choix

Hiérarchiser les contenus

Inhiber les distracteurs

...

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.

La théorie du flow

ou l’expérience optimale

2

Le « cognitive flow »

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

Mihály Csíkszentmihályi.

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

• 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

Les jeux vidéosLes rois du flow

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

• 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

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 !

• 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

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.

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 !

Expérience Optimale

Conclusion

+

+

=

Plaisir (esthétique)

Engagement (quelque chose de plus grand que soi),

Sens (quelque chose d’important)

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

• 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

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

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)

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)

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)

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/)

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

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)

Comment ?

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

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)

SourcesVideo / Article / Slideshare

Un petit pas pour l'em,un grand pas pour le Web

Nicolas Hoizey

Co-fondateur & directeur de l’innovation de Clever Age

4

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)

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.

« 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. »

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

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

Taille par défaut de 16px

Responsive Web Design élastique

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.

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.

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 !

Merci