L’UX au service de la performance de vos interfaces

Slide 1

Slide 1 text

L’UX au service de la performance de vos interfaces WeLoveSpeed 2018 — Stéphanie Walter - UX & UI Designer

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Temps psychologique (perçu par notre cerveau) Temps objectif (mesurable sur l’horloge)

Slide 4

Slide 4 text

La perception du temps par les humains

Slide 5

Slide 5 text

Des facteurs extérieurs affectent notre perception du temps qui passe

Slide 6

Slide 6 text

Attente avant la 1e interaction avec le contenu

Slide 7

Slide 7 text

État psychologique Profil de la personne Une audience jeune est plus impatiente L’attente est perçue comme moins longue pour les utilisatrices détendues Google and Awwwards study

Slide 8

Slide 8 text

La situation - ROI de l’attente

Slide 9

Slide 9 text

La perception de la vitesse impacte la satisfaction

Slide 10

Slide 10 text

Temps de réponse visuelle des interfaces

Slide 11

Slide 11 text

0 - 300ms Réponse visuelle instantanée

Slide 12

Slide 12 text

Réponse visuelle et micro interactions

Slide 13

Slide 13 text

Prévoir les différents états fait partie du travail de designer

Slide 14

Slide 14 text

300ms - 1 secondes Le délai est tolérable

Slide 15

Slide 15 text

2 - 5 secondes Indicateurs de progression indéterminés pour rassurer sur le bon fonctionnement du système

Slide 16

Slide 16 text

“Tout fonctionne le système travaille ”

Slide 17

Slide 17 text

Faites preuve de créativité

Slide 18

Slide 18 text

C’est le moment de faire montrer la personnalité de votre marque !

Slide 19

Slide 19 text

Plus de 5 secondes Indiquer précisément la progression pour faire patienter

Slide 20

Slide 20 text

๏ Proposer une indication précise de la progression

Slide 21

Slide 21 text

๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps

Slide 22

Slide 22 text

๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps ๏ Montrer la progression effectuée

Slide 23

Slide 23 text

๏ Proposer une indication précise de la progression ๏ Expliquer ce qui va prendre du temps ๏ Montrer la progression effectuée ๏ Si possible, éviter de bloquer les utilisatrices

Slide 24

Slide 24 text

(Nielsen, 1994; Bouch, 2000) 10 seconds is about the limit for keeping the user's attention focused “

Slide 25

Slide 25 text

La mouette comme   indicateur d’attente

Slide 26

Slide 26 text

“ Nous avons optimisé la moindre ligne de code mais les utilisatrices avec des grandes requêtes se plaignent encore de la lenteur “

Slide 27

Slide 27 text

L’indicateur de chargement classique a été remplacé par une mouette - grosse adoption chez les utilisatrices et utilisateurs

Slide 28

Slide 28 text

Affichage d’informations utiles pendant que les utilisatrices et utilisateurs attendent

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Ça “semble” rapide - transitions et animations

Slide 31

Slide 31 text

Animer les transitions de page

Slide 32

Slide 32 text

Animer les arrivées et sorties de l’écran via Val Head

Slide 33

Slide 33 text

Voir la barre de progression accélérer à la fin est plus satisfaisant (Harrison, Amento, Kuznetsov et Bell - 2007 )

Slide 34

Slide 34 text

Des nervures à contre sens augmentent la perception de vitesse (Harrison, Yeo et Hudson - 2010 )

Slide 35

Slide 35 text

De la vidéo de monitoring à la demande

Slide 36

Slide 36 text

Discuter des contraintes techniques avec l’équipe de development 1.

Slide 37

Slide 37 text

Comment ça fonctionne Camera takes the video and sends it to the server Server reencodes the video and sends it to the app The app displays the video and users can play it

Slide 38

Slide 38 text

Déconstruire le temps d’attente milliseconde par milliseconde. 2.

Slide 39

Slide 39 text

Interface Transition 300ms 2s 3 - 8s Video player components load on the screen with a fade in transition Indeterminate waiting indicator Video plays as soon as loaded

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Communiquer les spécifications avec l’équipe de développement 3.

Slide 42

Slide 42 text

Animation écran par écran dans Photoshop

Slide 43

Slide 43 text

Document de specifications pour les développeuses

Slide 44

Slide 44 text

Faire semblant - optimistic UIs

Slide 45

Slide 45 text

Des “likes” optimistes sur twitter

Slide 46

Slide 46 text

Changement optimiste   du status de l’alarme

Slide 47

Slide 47 text

Avoir confiance dans son API (et serveur) et proposer un retour visuel instantané 1.

Slide 48

Slide 48 text

Ne pas attendre le retour serveur pour changer visuellement le statut

Slide 49

Slide 49 text

“Mais quelle est la conséquence d’un échec coté utilisatrice ?”

Slide 50

Slide 50 text

Identifier et prévoir en fonction des cas d’échec possibles. 2.

Slide 51

Slide 51 text

Informer les utilisatrices de l’échec (et leur proposer des solutions) 3.

Slide 52

Slide 52 text

En cas d’échec - retour à l’état précédent et notification

Slide 53

Slide 53 text

Distraire intelligemment les utilisatrices

Slide 54

Slide 54 text

GVBeestje crocodiles par Daniel Disselkoen dans le metro à Amsterdam

Slide 55

Slide 55 text

Charger les photos en tâche de fond pendant que l’utilisatrice fait autre chose début du chargement

Slide 56

Slide 56 text

“Skeleton screens” et affichage progressif du contenu

Slide 57

Slide 57 text

Pinterest has some really nice colorful interface placeholders

Slide 58

Slide 58 text

Attention aux sauts de contenu et aux mises à jour des gabarits de page

Slide 59

Slide 59 text

Evitez la sur optimisation

Slide 60

Slide 60 text

Chargement d’image progressif sur une application d’atelier automobile

Slide 61

Slide 61 text

Vidéo Privé Frontal Le mécanicien prend des photos des réparations supplémentaires 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35

Slide 62

Slide 62 text

Comprendre le contexte et le flux utilisateurs pour améliorer l'expérience. 1.

Slide 63

Slide 63 text

๏ La connexion dans un atelier de réparation peut être très lente et le wifi est souvent mauvais. ๏ Les mécaniciens manquent parfois des informations à cause de la latence. ๏ Certains mécaniciens partagent le même appareil.

Slide 64

Slide 64 text

Discuter et comprendre les exigences techniques. 2.

Slide 65

Slide 65 text

๏ Les médias sont supprimés de l'appareil une fois l’intervention envoyée ๏ La taille, le type de media et nombre sont envoyés dans un fichier Json, ๏ Les vignettes sont chargées à partir d'Amazon S3 00:35 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35

Slide 66

Slide 66 text

Construire la galerie d’image pas à pas 3.

Slide 67

Slide 67 text

Un “Skeleton screen” basé sur le nombre de médias Nouvelle Image Nouvelle Video Medias Précédent Suivant

Slide 68

Slide 68 text

Une galerie d’indicateurs d’attente n'est jamais une bonne solution

Slide 69

Slide 69 text

Des vignettes du type de média pour remplir le squelette Nouvelle Image Nouvelle Video Medias Précédent Suivant

Slide 70

Slide 70 text

Une animation “pulse” comme indicateur de chargement

Slide 71

Slide 71 text

Affichage progressif des medias au fur et à mesure qu'ils se chargent

Slide 72

Slide 72 text

Icône d’indication en cas de dépassement du délai d'attente et d'échec du chargement. 00:35 Nouvelle Image Nouvelle Video Medias Précédent Suivant 00:35

Slide 73

Slide 73 text

Pas d'interruption des actions de l’utilisatrice

Slide 74

Slide 74 text

Communiquer ce qui est attendu des développeuses 4.

Slide 75

Slide 75 text

๏ Maquettes statiques ๏ Timer pour passer d'un écran à l'autre ๏ Très limité :/ Prototype invision pour les dévelopeuses

Slide 76

Slide 76 text

๏ Une animation vidéo du rendu attendu (Flinto) ๏ Des maquettes statiques remplacées par des GIFs préparés dans Photoshop

Slide 77

Slide 77 text

Des prototypes interactifs Invision un peu trop réalistes pourraient se retourner contre vous lors des tests utilisateurs...

Slide 78

Slide 78 text

๏ N'utilisez pas le même prototype Invision pour les dévelopeuses et les tests utilisateurs. ๏ Si possible, testez les performances sur un prototype codé avec une vrai connexion. Ce que j'ai appris

Slide 79

Slide 79 text

Documentation pour les développeuses :  ๏ Prototype cliquable Invision ๏ Animation vidéo des transitions et interactions ๏ Spécifications écrites.

Slide 80

Slide 80 text

Hum, et si on ralentissait un peu…

Slide 81

Slide 81 text

Est-il toujours nécessaire de rendre notre interface plus rapide ?

Slide 82

Slide 82 text

"Ça ne peut pas être si rapide, il doit y avoir un truc quelque part" - moi, la première fois que j'ai vu la notification N26 1minute après avoir payé dans un magasin.

Slide 83

Slide 83 text

Ralentissement artificiel de la connexion via scanner rétinien car perçue comme trop rapide et non sécurisée.

Slide 84

Slide 84 text

"L'illusion du travail " - on accorde plus d'importance aux choses lorsque l’on pense qu’un effort a été fait pour les obtenir.

Slide 85

Slide 85 text

Ralentir le temps de réponse et ajouter un indicateur de frappe pour rendre les conversations avec les chatbots plus naturelles . Image via Shan Shen

Slide 86

Slide 86 text

Au final…

Slide 87

Slide 87 text

Nous concevons et développons dans des environnements privilégiés. Nous avons besoin d'un retour à la réalité de nos utilisatrices.

Slide 88

Slide 88 text

Le “Network conditioner” permet de simuler une mauvaise connexion sur l'iPhone

Slide 89

Slide 89 text

Construire un produit performant est un travail d'équipe !

Slide 90

Slide 90 text

Conceptrices et développeuses doivent communiquer et travailler ensemble pour trouver les meilleures solutions possibles.

Slide 91

Slide 91 text

La performance perçue n'est hélas souvent pas la première priorité. Soyez patientes, commencez petit, une étape à la fois.

Slide 92

Slide 92 text

Nous n’avons pas toutes et tous le budget d’Instagram, Twitter or Pinterest… Mais ce n’est pas une fatalité, il est possible de faire des choses même sur des plus petits budgets.

Slide 93

Slide 93 text

UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie