Expérience Utilisateur – Creative Juiz https://www.creativejuiz.fr/blog Tutoriels HTML5, CSS3, JavaScript, WordPress Thu, 22 Oct 2020 19:17:40 +0000 fr-FR hourly 1 https://wordpress.org/?v=5.5.1 Créer un Design System dans une société d’assurance centenaire https://www.creativejuiz.fr/blog/retours-experience/creer-design-system-societe-assurance-centenaire https://www.creativejuiz.fr/blog/retours-experience/creer-design-system-societe-assurance-centenaire#respond Thu, 22 Oct 2020 19:12:59 +0000 https://www.creativejuiz.fr/blog?p=7567 The post Créer un Design System dans une société d'assurance centenaire first appeared on Creative Juiz.

Dans le cadre du Meetup UX Design Brest, j’ai eu l’occasion de proposer un retour d’expérience sur la construction d’un Design System pour la société Groupe Foyer, la première société d’assurance luxembourgeoise. Voici une vidéo ainsi qu’un partage des slides, et même un PDF téléchargeable. Avant d’attaquer le sujet de mon intervention, j’avais également proposé […]

The post Créer un Design System dans une société d'assurance centenaire first appeared on Creative Juiz.

]]>
The post Créer un Design System dans une société d'assurance centenaire first appeared on Creative Juiz.

Dans le cadre du Meetup UX Design Brest, j’ai eu l’occasion de proposer un retour d’expérience sur la construction d’un Design System pour la société Groupe Foyer, la première société d’assurance luxembourgeoise. Voici une vidéo ainsi qu’un partage des slides, et même un PDF téléchargeable.

Avant d’attaquer le sujet de mon intervention, j’avais également proposé une sélection d’outils pour vous aider à construire un Design System. N’hésitez pas à aller y jeter un œil !

Créer un Design System… sur SpeakerDeck

Les slides sont disponibles sur SpeakerDeck sans le bénéfice de ses magnifiques animations 😜 Que voici en version embarquée.

 

Création de ce Design System en vidéo

Pour les personnes qui sont plus sur le format vidéo et pour entendre ma voix qui saute parfois en plus de la présentation de ces slides, voici une video Youtube proposée par le Meetup. Merci à eux pour le fabuleux travail de préparation et traitement !

J’ai l’intention de proposer un sous-titrage dès que possible de cette vidéo en français (corrigé) et anglais. À venir prochainement donc.

Accessible avec liens en PDF

Pour bénéficier d’une version plus accessible, textuelle, et avec le bénéfice des liens dans la slide des ressources à lire, voici la version PDF téléchargeable.

Télécharger le PDF

Besoin de conseil dans la construction d’un Design System ?

Mon expérience chez Foyer a été très fructueuse et je serais ravis, si la présentation ne vous a pas suffit, de vous aider dans votre démarche. N’hésitez pas à me suivre sur Twitter ou LinkedIn pour suivre mes partages et actualités, et entamer une discussion sur le sujet.

Pour une collaboration plus fine, je suis persuadé que mon employeur serait ravis d’offrir une manière de collaborer. Discutons-en 😊

D’ici là, bon visionnage !

The post Créer un Design System dans une société d'assurance centenaire first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/retours-experience/creer-design-system-societe-assurance-centenaire/feed 0
Code Unique de Vérification : compatible avec les suggestions du clavier https://www.creativejuiz.fr/blog/tutoriels/code-unique-sms-code-verification-suggestion-clavier-smartphone https://www.creativejuiz.fr/blog/tutoriels/code-unique-sms-code-verification-suggestion-clavier-smartphone#respond Sun, 21 Jun 2020 11:14:40 +0000 https://www.creativejuiz.fr/blog?p=7481 The post Code Unique de Vérification : compatible avec les suggestions du clavier first appeared on Creative Juiz.

Les expériences les plus douloureuses sur le mobile sont très certainement celles sur les formulaires en ligne qu’il faut remplir ici et là. Et si vous optimisiez ces expériences étape par étape ? Aujourd’hui, je vous propose une solution pour la saisie d’un code unique temporaire : Vous recevez le SMS avec un code, votre […]

The post Code Unique de Vérification : compatible avec les suggestions du clavier first appeared on Creative Juiz.

]]>
The post Code Unique de Vérification : compatible avec les suggestions du clavier first appeared on Creative Juiz.

Les expériences les plus douloureuses sur le mobile sont très certainement celles sur les formulaires en ligne qu’il faut remplir ici et là. Et si vous optimisiez ces expériences étape par étape ? Aujourd’hui, je vous propose une solution pour la saisie d’un code unique temporaire : Vous recevez le SMS avec un code, votre clavier vous le suggère – un seul tap, c’est fait ! Ok, c’est parti !

Généralement, lorsque je propose un formulaire, court ou long, je veux optimiser l’expérience pour la rendre la moins douloureuse possible. Pour ce faire, j’étudie le comportement de mes utilisateurs en testant des solutions et en profitant des fonctionnalités que les terminaux (mobiles notamment) apportent avec les nouvelles versions, d’un point de vue matériel et logiciel.

Même si cet article ressemble à un article technique, il est en partie une réponse après de la recherche utilisateur et de certaines règles d’ergonomie :

  • Le champ correspond à la longueur des données attendues,
  • La forme du champ aide à la découverte et facilite l’intention,
  • Aide à la saisie en guidant l’utilisateur,
  • Anticipation des erreurs par la prévention des erreurs de formatage.

La démonstration

« Un clic, c’est fait ! », oui, vous avez raison de ne pas me faire confiance, mais voici comment vous pouvez le tester.

  • Allez sur la page de démo sur CodePen: One Time Code Demo.
  • Envoyez-vous un SMS avec le texte suivant :
    Your verification code is 133-742
    The SMS text
  • Retournez à la page de démonstration et touchez l’un des champs.
  • Votre clavier doit vous suggérer le dernier code reçu.

Note : Parfois, android ne se soucie pas de tout ça, cela dépend de la surcouche de votre fournisseur ou constructeur, ou du clavier que vous avez installé et de ses paramètres. Mais si vous êtes sur la dernière version d’iOS, vous devriez pouvoir gérer cela comme un pro.

Comment le code unique par SMS fonctionne ?

Pour que la magie opère, le système d’exploitation expose le dernier code SMS reçu pour qu’il soit utilisé par des applications comme votre clavier. Si le formulaire actuel demande ce code, votre clavier s’adapte et propose le code comme suggestion.

Keyboard Code Suggestion The autocompleted fields

D’accord, mais comment demander ce code ? C’est assez simple, mais vous ne pouvez pas le deviner si vous ne connaissez pas les possibilités de HTML5. Parmi les nombreuses connaissances peu communes, on trouve les attributs de autocomplete et ses nombreuses valeurs. Son utilisation n’est pas si difficile, vous devez correspondre à la valeur d’une liste existante de valeurs standard qui ne cesse de s’allonger.

<label for="otc">SMS Code Received</label>
<input type="text" autocomplete="one-time-code" id="otc" name="otc" aria-label="Enter the 6 Digits code you received by SMS">
A One Time Code example

Une fois que vous avez fait cela, votre champ SMS One Time Code est prêt. Pas besoin d’en faire plus ici.

Mais comme je vous l’ai dit, j’aime être complet dans ma proposition d’interface, et j’ai décidé d’aller plus loin avec une forme à 6 entrées.

Formulaire en forme de code SMS à 6 chiffres

J’ai décidé d’utiliser un formulaire à 6 champs, mais avec un formulaire à 1 entrée proposant un design comme si c’était 6 champs côté ) côté aurait aussi pu suffire. Comme je le dis souvent, c’est la magie du HTML/CSS et du JS, 1 solution, plusieurs façons d’y parvenir.

Pourquoi ferais-je cela ? Parce que lorsque l’utilisateur reçoit son code SMS, le format est assez clair : 3 chiffres, 1 tiret, 3 chiffres. Je veux que mon formulaire ressemble au code reçu.

<form class="otc" name="one-time-code" action="#">
	<fieldset>
		<legend>Validation Code</legend>
		<label for="otc-1">Number 1</label>
		<label for="otc-2">Number 2</label>
		<label for="otc-3">Number 3</label>
		<label for="otc-4">Number 4</label>
		<label for="otc-5">Number 5</label>
		<label for="otc-6">Number 6</label>

		<div>
			<!-- https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element -->
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" autocomplete="one-time-code" id="otc-1" required>

			<!-- Autocomplete not to put on other input -->
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-2" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-3" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-4" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-5" required>
			<input type="number" pattern="[0-9]*"  value="" inputtype="numeric" id="otc-6" required>
		</div>
	</fieldset>
</form>
The HTML Form

Comme vous pouvez le voir, j’ai utilisé un fieldset pour regrouper les champs sous une même legend. Chaque entrée a son propre label lié grâce aux attributs for et id, comme il est recommandé pour des raisons d’accessibilité. Malgré toutes ces attentions, je ne suis pas sûr que la solution soit si bonne pour les lecteurs d’écran (peut-être un peu trop lourde à lire), je vais essayer de faire d’autres tests après la publication et je reviendrai vers vous plus tard.

Pour l’instant, vous ne devriez pas avoir la forme la plus sexy de votre vie. Les champs numériques et toutes ces étiquettes… Mais passons maintenant à la partie CSS.

.otc label {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}
This hides label visually

La première chose que j’ai faite est de cacher les label visuellement, mais pas pour les lecteurs d’écran. Code proposé par ffoodd et utilisé dans tous mes projets depuis un certain temps.

.otc {
	position: relative;
	width: 320px;
	margin: 0 auto;
	font-size: 2.65em;
}

.otc fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.otc div {
	display: flex;
	align-items: center;
}

.otc legend {
	margin: 0 auto 1em;
	color: #5555FF;
}
Global Form width and fieldset styling

J’ai ensuite donné une dimension à mon formulaire pour le centrer, et j’ai supprimé certains styles par défaut des champs et des légendes (principalement les bordures et les espaces), la mise en page flexbox permet d’anticiper le petit alignement des tirets entre les champs.

input[type="number"] {
	width: .82em;
	line-height: 1;
	margin: .1em;
	padding: 8px 0 4px;
	font-size: 2.65em;
	text-align: center;
	appearance: textfield;
	-webkit-appearance: textfield;
	border: 2px solid #BBBBFF;
	color: purple;
	border-radius: 4px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
Code to style input number

Ce code sert à styliser nos entrées de type number, avec une petite astuce pour notre ami Chrome qui doit être stylisé grâce à des pseudo-classes (l.15). De cette façon, vous devriez déjà avoir quelque chose de plus attrayant : nous avons dimensionné les champs (principalement grâce à la taille de la police) et supprimé les boutons d’incrément. Il ne nous reste plus qu’à « grouper » les champs 3 par 3. Faisons cela, d’accord ?

input[type="number"]:nth-of-type(n+4) {
	order: 2;
}

.otc div::before {
	content: '';
	height: 2px;
	width: 24px;
	margin: 0 .25em;
	order: 1;
	background: #BBBBFF;
}
The little dash in between

Ici j’ajoute un tiret grâce à un pseudo-élément ::before et je crée visuellement 2 groupes. Le pseudo-élément agit comme un autre enfant à côté de toutes les entrées. Si vous ne gérez pas l’ordre grâce à la propriété order, le tiret est à la première position. Pour le faire apparaître à la quatrième place, j’ai dû dire aux 3 derniers champs d’être à la deuxième place (order: 2), le tiret à la première (order: 1) et les autres sont par défaut à la place zéro (order: 0). Ouais, les développeurs vous savez… le 0 est le premier dans cette suite logique 😜

Et voilà !

Mettons du JavaScript pour améliorer l’expérience de l’utilisateur

En divisant un champs en 6 champs, nous avons voulu améliorer l’assistance en guidant l’utilisateur pour qu’il comprenne plus rapidement le format attendu. Une information plus facile à scanner. Mais pour l’instant, le formulaire n’est pas du tout utilisable, nous l’avons rendu pire que mieux si on en reste là.

Nous devons couvrir plusieurs choses ici :

  • Lorsque je remplis un champ, je passe au suivant,
  • Lorsque je supprime un contenu (backspace), je passe au champ précédent,
  • Lorsque je clique sur un champ vide, si le champ précédent est vide, je me place dessus,
  • Lorsque je copie/colle un code dans le premier champ, je dois couper le code et remplir les autres entrées.

Le code JavaScript proposé ci-dessous a un peu évolué si vous le comparez au CodePen. Celui de CodePen est plus avancé et également commenté. Je mettrai à jour l’article prochainement.

Allons-y ! Je vous montre le code et vous l’explique juste après.

let in1 = document.getElementById('otc-1'),
    ins = document.querySelectorAll('input[type="number"]');

ins.forEach(function(input) {
	/**
	 * Control on keyup to catch what the user intent to do.
	 * I could have check for numeric key only here, but I didn't.
	 */
	input.addEventListener('keyup', function(e){
		// Break if Shift, Tab, CMD, Option, Control.
		if (e.keyCode === 16 || e.keyCode == 9 || e.keyCode == 224 || e.keyCode == 18 || e.keyCode == 17) {
			 return;
		}
		
		// On Backspace or left arrow, go to the previous field.
		if ( (e.keyCode === 8 || e.keyCode === 37) && this.previousElementSibling && this.previousElementSibling.tagName === "INPUT" ) {
			this.previousElementSibling.select();
		} else if (e.keyCode !== 8 && this.nextElementSibling) {
			this.nextElementSibling.select();
		}
	});
	
	/**
	 * Better control on Focus
	 * - don't allow focus on other field if the first one is empty
	 * - don't allow focus on field if the previous one if empty (debatable)
	 * - get the focus on the first empty field
	 */
	input.addEventListener('focus', function(e) {
		// If the focus element is the first one, do nothing
		if ( this === in1 ) return;
		
		// If value of input 1 is empty, focus it.
		if ( in1.value == '' ) {
			in1.focus();
		}
		
		// If value of a previous input is empty, focus it.
		// To remove if you don't wanna force user respecting the fields order.
		if ( this.previousElementSibling.value == '' ) {
			this.previousElementSibling.focus();
		}
	});
});

/**
 * Handle copy/paste of a big number.
 * It catches the value pasted on the first field and spread it into the inputs.
 */
in1.addEventListener('input', function(e) {
	let data = e.data || this.value; // Chrome doesn't get the e.data, it's always empty, fallback to value then.
	if ( ! data ) return; // Shouldn't happen, just in case.
	if ( data.length === 1 ) return; // Here is a normal behavior, not a paste action.
	
	for (i = 0; i < data.length; i++ ) {
		ins[i].value = data[i];
	}
});
The JavaScript to make this form smart

De la ligne 11 à 13, je ne fais plus rien avec les touches Shift, Tab, CMD, Option, Control pour éviter les problèmes. De la ligne 16 à 20, je gère les fonctions Précédent/Suivant. De 29 à 43, je m’occupe du focus sur les champs. L’idée ici est que si je tape/clique sur un champ autre que le premier, je force le focus sur le premier champ. C’est surtout pour les utilisateurs de smartphones. Mais pour être plus intelligent, si certains champs sont déjà remplis, nous mettons le focus sur le premier champ vide.

Les dernières lignes de JavaScript sont là pour gérer un copier/coller, ou l’autosuggestion du clavier d’un smartphone. Dans ce cas, tout le contenu du code est placé dans ce premier champ. Nous prenons la valeur de ce champ et la divisons pour distribuer les valeurs dans les champs suivants.

Code Unique : à retenir

Ok, nous l’avons fait. Mais n’oubliez pas que c’est un pattern issu d’un de mes besoins, elle n’est peut-être pas parfaite, mais pour mon cas d’utilisation, elle est suffisante. Quelques petites choses à rappeler et à emporter avec vous.

  • Utilisez autocomplete="one-time-code" pour déclencher l’autosuggestion de votre smartphone.
  • Utilisez une combinaison de pattern="[0-9]*" et inputtype="numeric" pour déclencher le clavier numérique de votre smartphone.
  • Lorsque vous créez des formulaires complexes, essayez de dimensionner/styliser le champ en fonction des données attendues.
  • N’oubliez pas de tester vos formulaires en y naviguant avec le clavier uniquement, et avec un lecteur d’écran.

Merci pour votre lecture. Je suis ouvert aux suggestions les commentaires ou sur Twitter.
Merci à Laurent pour les tests sur iOS.

The post Code Unique de Vérification : compatible avec les suggestions du clavier first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/tutoriels/code-unique-sms-code-verification-suggestion-clavier-smartphone/feed 0
Il n’y a pas de « Mythes sur l’accessibilité des couleurs » https://www.creativejuiz.fr/blog/ux-experience-utilisateur/mythes-accessibilite-couleurs-constraste-wcag https://www.creativejuiz.fr/blog/ux-experience-utilisateur/mythes-accessibilite-couleurs-constraste-wcag#respond Mon, 01 Jun 2020 12:40:48 +0000 https://www.creativejuiz.fr/blog?p=7438 The post Il n'y a pas de "Mythes sur l'accessibilité des couleurs" first appeared on Creative Juiz.

Lorsque vous devez travailler sur des interfaces, le contraste des couleurs est une réalité dont vous devez tenir compte pour la rendre accessible. Vous avez le droit de craindre de perdre une partie de l’esthétique de votre interface, notamment si vous êtes habitué à un mauvais rapport de contraste. L’accessibilité a ses contraintes, mais finalement […]

The post Il n'y a pas de "Mythes sur l'accessibilité des couleurs" first appeared on Creative Juiz.

]]>
The post Il n'y a pas de "Mythes sur l'accessibilité des couleurs" first appeared on Creative Juiz.

Lorsque vous devez travailler sur des interfaces, le contraste des couleurs est une réalité dont vous devez tenir compte pour la rendre accessible. Vous avez le droit de craindre de perdre une partie de l’esthétique de votre interface, notamment si vous êtes habitué à un mauvais rapport de contraste.

L’accessibilité a ses contraintes, mais finalement pas beaucoup plus que l’UX Design (User Experience Design) qui consiste à tenir compte des besoins utilisateur, pour ne la réduire qu’à cet aspect qui m’intéresse dans cet article. Car au final, nous pouvons parler de contraste autant qu’on le souhaite, si l’utilisateur n’est pas au centre de nos attentions, les discussions ne serviraient qu’à peu de choses.

Définitions

Je voudrais commencer par mes définitions de l’accessibilité et de l’expérience de l’utilisateur. Je sais que la définition des deux est assez complexe et n’est pas toujours partagée par les experts, alors désolé pour l’aspect incomplet, je vais tout de même m’y essayer.

Expérience Utilisateur (UX)

L’expérience de l’utilisateur est l’ensemble des actions, tentatives, sentiments, réussites, frustrations, etc. qu’une personne a d’un produit ou d’un service. Selon l’objectif que vous souhaitez atteindre, cette expérience peut être bonne ou mauvaise. Même dans l’idée d’atteindre une mauvaise expérience, elle peut être totalement voulue par le concepteur de cette expérience. Souvent, en tant que designer, vous avez tendance à fournir une expérience mémorable positive pour que vos utilisateurs comprennent, utilisent et aiment le produit/interface. Rendre les interfaces utilisables implique la nécessité de comprendre un groupe spécifique de personnes afin de les aider à accomplir une tâche précise avec efficacité, efficience et satisfaction.

Accessibilité

Dans notre domaine, l’accessibilité est la pratique consistant à rendre les sites web ou les applications utilisables par le plus grand nombre de personnes possible. Nous pensons souvent qu’elle ne s’applique qu’aux personnes handicapées, ce qui est par définition le cas, mais elle profite certainement à d’autres groupes de personnes dans certains cas ou contextes spécifiques. On attend alors de ces interfaces qu’elles soient perceptibles, exploitables, compréhensibles et robustes, les 4 principes de l’accessibilité.

Là où l’expérience de l’utilisateur tend à satisfaire un groupe précis de personnes, l’accessibilité tend à inclure le plus grand nombre possible de personnes dans une expérience positive, mais les deux ne s’excluent pas mutuellement, loin de là.

Les mythes sur l’accessibilité des couleurs

Cet article est une réponse et un argumentaire à l’article éponyme en anglais. De manière générale, je vous invite à prendre le contenu de ce site avec des pincettes car il s’agit principalement de l’avis d’un unique individu sans aucune recherche ni parfois aucun fondement. Vous verrez par la suite pourquoi.

J’aimerais cependant remercier Anthony (l’auteur de l’article cité) d’avoir mis en évidence certaines choses qui semblent être des mythes dans la communauté des designers. J’ai personnellement découvert certains d’entre eux en lisant l’article.
Le problème n’est peut-être pas tant ce qu’Anthony dit que la façon dont il le dit – il vous fait penser que vous ne devriez pas faire confiance à l’une des guidelines d’accessibilité les plus connues (WCAG), parce que ce n’est pas ce dont les utilisateurs ont besoin.

L’article guide les lecteurs à travers plusieurs exemples visuels avec une solution qui est censée être accessible et une autre qui est censée être inaccessible, en faisant valoir que la solution inaccessible est préférée par les personnes handicapées. Cela vous amène à une conclusion faussement risquée : la solution inaccessible pourrait-elle être une meilleure (la meilleure ?) solution ?

Je veux travailler et vous guider sur une meilleure voie : analyser la question et trouver une meilleure solution pour chaque exemple présenté par Anthony. Ce guide vous aidera à comprendre un peu mieux le principe de contraste, les solutions possible et surtout la validation d’une hypothèse en la testant réellement auprès d’utilisateurs, puisqu’au final c’est bien cela qui nous intéresse.

Mythe 1 : Les exigences des WCAG sont toujours optimales

En effet, elles ne le sont pas. Comme leur nom l’indique, les WCAG ne sont que des lignes directrices destinées à aider les concepteurs et les développeurs à construire de meilleures interfaces. Lorsque vous commencez à construire votre design avec des couleurs, les goûts des gens et les besoins des utilisateurs vont certainement perturber votre sens de la beauté et vos sentiments personnels sur ce qui est agréable à l’œil ou non.

Peu importe, le design n’est pas une question de préférences ou de goûts. C’est une question de convivialité et d’adéquation aux besoins de l’utilisateur. La plupart du temps, la couleur n’est pas essentielle en termes de convivialité. Commencez par des nuances de gris, si vous arrivez à faire une interface utilisable ainsi, la couleur ne devrait être qu’une « couche de peinture » (je suis le premier à détester cette expression 😋) vous raccrochant à l’identité de votre marque.

Certains amis et confrères vont bien plus loin que moi : ils font leur design complètement en noir et blanc. (wink wink Inclusive-Components.design par Heydon)

Les couleurs testées

Mais revenons à nos moutons colorées.
Lorsque vous devez concevoir des interfaces accessibles avec des couleurs, deux choses ne sont pas importantes :

  • votre égo, même si nous aurons besoin d’un peu de votre goût et de votre expertise pour composer l’interface et trouver l’harmonie,
  • les couleurs de la marque: si celles-ci ne sont pas accessibles, changez-les. Je ne veux pas dire que vous devez changer la couleur originale de la marque, mais choisissez une couleur proche mais plus contrastée pour votre interface. Ici, nous pourrions utiliser vos goûts pour choisir la bonne 😀
    Mais je sais que ce n’est pas toujours possible. Une autre idée pourrait être une feuille de style alternative, mais pour moi c’est la dernière solution pour satisfaire à la fois les utilisateurs et les gens de la marque.

Prenons le même exemple qu’Anthony.

Two buttons next to each other, one with white text on blue background, one with dark text on the same blue

J’ai utilisé un fond blanc et un fond sombre sur cette illustration parce qu’Anthony a eu l’idée de faire un sondage en utilisant l’image sombre, mais en argumentant ensuite sur le contraste des couleurs sur son billet de blog avec un fond blanc.
Juste pour que vous le sachiez : le contexte change la façon dont vous percevez et dont vous lisez les éléments colorées. Mais c’est un autre sujet (j’y reviendrai plus tard dans cet article). Pour le reste de l’article, je vais étudier les boutons avec un fond clair. Je ne vais pas jouer avec toutes les couleurs de fond, je suis sûr que vous aurez compris l’idée avec un exemple.

Voici les données sur les contrastes entre couleur de texte et couleur de fond (bleu). Les tests sont effectués avec une taille de police de 16px et une graisse de police « medium », car ces deux styles de texte sont importants dans l’analyse :

  • blanc sur bleu
    Blanc : #FFF, Bleu : #57ACF9
    Font-size : 16px – Font-Weight : medium.
    Ratio de contraste : 2.5:1 (minimum 4.5:1)
  • foncé sur bleu
    Foncé : #2D2D2D, Bleu : #57ACF9
    Ratio de contraste : 5.6:1 – (attendu 4.5:1)

D’après la « source » d’une enquête, le texte blanc est préféré par les personnes qui ont répondu.

Bien ! J’ai un problème avec ça. Considérant le simple fait que près de 4% des personnes dans le monde sont daltoniennes (pour les dépistées, on monte à beaucoup plus en incluant le syndrome d’Irlen), et que 29% des personnes ayant répondu au sondage préfèrent la version accessible… Je ne veux pas transposer ou comparer les chiffres, mais potentiellement les personnes ayant répondu sont daltoniennes, et même si elles ne le sont pas, certaines d’entre elles préfèrent la version accessible… beaucoup d’entre elles.

Une autre chose est que vous ne pouvez pas trouver la bonne solution en demandant « préférez-vous A ou B ». Vous devez demander : « Combien de personnes lisent facilement A ? » puis, sur une autre question séparée, « Combien de personnes lisent facilement B ? Et idéalement, au lieu d’une question binaire « facilement lisible », vous devriez probablement utiliser une échelle d’évaluation.

Dans le cas du sondage d’Anthony, je dirais que les deux solutions ne sont pas acceptables ici, mais pourquoi ?

Peut-être parce que les WCAG utilisent les mathématiques pour calculer des choses qui ne sont à la base que perception, et c’est un vrai problème. Cela a même été enregistré comme une issue sur le répertoire WCAG.

Pour aller plus loin, Anthony a totalement oublié l’intensité lumineuse et les différences de couleur, qui sont très importantes dans l’analyse du « contraste » des couleurs. Il couvre un autre aspect de la perception des couleurs, également connu sous le nom de syndrome d’Irlen : ce syndrome concerne la sensibilité aux contrastes élevés. Je dirais que le WCAG parle de « contraste des couleurs », mais il ne s’agit pas vraiment de contraste mails plutôt de différence de luminance entre 2 couleurs.

Bref. L’intensité lumineuse n’a rien à voir avec le contraste, elle est liée à la perception de la lumière. C’est pourquoi analyser le contraste là où la luminosité agit est une sorte de non-sens.

Revenons à notre jeu de couleurs.

  • blanc sur bleu
    Différence d’intensité lumineuse : 107 (minimum 125)
    Différence de couleur : 277 (minimum 500)
  • foncé sur bleu
    Différence d’intensité lumineuse : 103 (minimum 125)
    Différence de couleur : 353 (minimum 500)

Les deux ont un manque de différences. C’est pourquoi le bleu foncé ne suffit toujours pas à créer une réelle différence quand on interroge les gens. Ils seront plus enclins à répondre en fonction de leurs préférences personnelles.

Donc oui, le WCAG utilise la mauvaise mesure, mais les solutions proposées ne sont pas du tout correctes. Trouvons ensemble comment améliorer un peu la lisibilité de nos boutons.

Comment corriger le contraste des couleurs ?

Si la combinaison préférée semble être le blanc sur bleu, vous préfèrerez certainement garder le blanc comme couleur de texte et changer pour un meilleur fond bleu afin d’améliorer votre contraste et la différenciation des couleurs.

J’adore jouer avec Color.review, un outil utile qui vous donne des indicateurs pour vous aider à choisir le bon ensemble de couleurs accessibles, avec une projection du rendu. Les courbes vous aident également à mieux comprendre la perception de la couleur.

Color Review Contrast Tool

En jouant un peu avec le bleu, je trouve enfin quelque chose qui respecte les exigences du niveau AA (niveau intermédiaire dans le référentiel d’accessibilité), et de bien meilleures différences de couleur et d’intensité lumineuse.

Le nouveau bouton entre les 2 premières propositions

Avec ce nouveau fond bleu, nous obtenons de nouvelles données qui sont très proches des exigences attendues en matière de WCAG :

  • Blanc sur bleu PAS accessible
    Blanc : #FFF, Bleu : #57ACF9
    Ratio de contraste : 2.5:1 (minimum 4.5:1)
    Différence d’intensité lumineuse : 107 (minimum 125)
    Différence de couleur : 277 (minimum 500)
  • Blanc sur bleu accessible
    Blanc : #FFF, Bleu : #0B77D8
    Ratio de contraste : 4.5:1 (minimum 4.5:1)
    Différence d’intensité lumineuse : 158 (minimum 125)
    Différence de couleur : 419 (minimum 500)

Et pour confirmer qu’il s’agit d’une véritable solution et non d’une question de goût personnel, j’ai construit un questionnaire sur les préférences des gens en matière de lisibilité, et j’ai également demandé aux répondants s’ils étaient daltoniens. Voir la section suivante pour plus de détails sur les chiffres.

Mesures comparatives

Ce n’est pas une surprise : si vous demandez séparément ce qui est le plus lisible, les gens seront plus enclins à vous donner la réponse « lisibilité » et pas seulement leur goût en termes de couleur. Quoi qu’il en soit, voici quelques données extraites.

Pour chaque proposition visuelle d’un bouton, j’ai posé la même question : « Pouvez-vous facilement lire le texte de ce bouton ? ». Pour chacune d’entre elles, la même réponse était disponible sous la forme d’une note entre 1 et 5, où 1 est « Pas facilement [lisible] », et 5 est « Oui, je le lis facilement ».

Sur les graphiques suivants, vous verrez des chiffres entre 1 et 5 sur l’axe horizontal, qui sont la notation de la proposition visuelle. Sur l’axe vertical, vous trouverez le nombre de réponses.

Proposition 1 : Bouton avec texte blanc et fond bleu

Results for the 1st button (detailed just after)

Les gens sont assez à l’aise avec ce contraste, même si beaucoup (31,2%) notent encore moins de 4/5 ce visuel.

Proposition 2 : Bouton avec texte sombre et fond bleu clair

Results for the 2nd button (detailed just after)

Les réponses sont éparses ici, avec une note de 3 prédominante. Cette solution n’est pas du tout bonne si nous voulons atteindre notre objectif. (53,5% en dessous de 4)

Proposition 3 : Bouton avec texte blanc et fond bleu accessible

Results for the 3rd button (detailed just after)

Cette solution ne fait pratiquement l’objet d’aucun débat. Je pense que nous avons fait notre travail de designer. (10,5% sous la note de 4)

Proposition 4 : Bouton avec texte ombré en blanc et fond clair en bleu

Results for the 4th button (detailed just after)

Ce dernier essai voulait résoudre le problème de contraste grâce à une ombre portée sous le texte tout en gardant l’ensemble de couleurs non-accessibles. Cela n’a pas eu l’effet attendu.

Arbitrairement, je prendrai pour « assez lisible » le pourcentage de personnes incluses dans la fourchette supérieure (4 et 5 points) pour pouvoir comparer nos solutions.

  • Le bouton le plus lisible
    1. Proposition 3 – Le proposition que je fais de bouton contrasté.
      Satisfaction : 89.5%
    2. Proposition 1 – L’inaccessible bleu clair avec un texte blanc d’Anthony .
      Satisfaction : 68.8%
    3. Proposition 4 – La version avec texte et ombre portée.
      Satisfaction : 56,6%
    4. Proposition 2 – La version accessible avec un texte sombre d’Anthony.
      Satisfaction : 46,5%
  • Préférences pour les daltoniens
    1. Proposition 3 – Le proposition que je fais de bouton contrasté.
      Satisfaction : 90%
    2. Proposition 1 – L’inaccessible bleu clair avec un texte blanc d’Anthony .
      Satisfaction : 80%
    3. Proposition 4 – La version avec texte et ombre portée.
      Satisfaction : 50%
    4. Proposition 2 – La version accessible avec un texte sombre d’Anthony.
      Satisfaction : 50%

Le résultat est ici une question d’accessibilité : nous avons réussi à proposer une solution qui rend le bouton lisible par 89,5% de la population si nous ne gardons que les notes 4 et 5, et 90% des personnes daltoniennes. (les scores auraient probablement été assez proches avec davantage de votants)

Statistics for colorblind people (91.1% not colorblind, 5.1% are colorblind, 3.4% don't know, 0.4% don't tell)

N.B. : il s’agit probablement d’un pourcentage de la population qui n’utilise pas de lecteur d’écran pour lire le contenu. Gardez à l’esprit qu’il y a beaucoup de degrés de handicap visuels différents, mon sondage ne demandait pas plus d’informations pour se concentrer sur la couleur.

Même si vous ne trouverez probablement jamais une solution qui fonctionne à 100 %, votre travail de concepteur consiste à inclure autant de personnes que possible – et si vous n’êtes pas sûr, donnez-leur le contrôle de votre interface.

Aller plus loin avec le contraste des couleurs

Lorsque les gens pensent à l’accessibilité des couleurs, ils ont généralement l’idée que leur design finira par être laid. Je ne sais pas vraiment d’où vient cette idée, mais je suis vraiment curieux de mieux comprendre pourquoi.

En tant que designer, vous savez déjà que le design consiste toujours à travailler dans un certain cadre avec plein de types de contraintes

  • un budget plus ou moins précis
  • un certain type de matériel
  • un espace limité (smartphone, tablette, petites surfaces si vous êtes dans le home staging par exemple)
  • etc.

L’accessibilité ne devrait être qu’une considération de plus, et comme les autres, elle devrait être considérée comme source de créativité et non comme un obstacle.

Daryl Koopersmith et Wilson Miner ont écrit un très bon article sur le sujet « Designing Accessible Color Systems« . C’est un bon exemple de la façon dont vous pouvez travailler sur votre système de couleurs pour le rendre accessible et construire des composants efficaces avec.

PS. J’ai entendu des choses sur le fait que Stripe n’est pas accessible aux lecteurs d’écran. C’est un autre sujet, un pas après l’autre est mieux que rien.

A propos de contexte : Interface foncée ou claire

Je vous ai dit plus tôt que les boutons testés étaient sur fond blanc, mais je vous ai volontairement montré deux fonds différents.

Le contexte peut changer la perception de la couleur et notamment son interprétation par vos yeux et votre cerveau. La perception des couleurs est une chose complexe référencée sous l’abréviation HVS (Human Visual System model).

Two buttons next to each other, one with white text on blue background, one with dark text on the same blue

Pour expliquer rapidement mon propos ici, quand vous avez une interface claire, un bouton bleu et un texte blanc, votre œil n’a pas vraiment besoin de s’adapter. À l’inverse, si vous travaillez avec un texte sombre sur le bouton, votre œil devra s’adapter un peu plus et sera perçu comme plus difficile à lire. C’est ce que l’on suppose. C’est un peu comme lorsque vous êtes dans une pièce lumineuse et que vous passer dans une pièce sombre, vos yeux mettent un certain temps à s’adapter au peu de lumière pour commencer à dessiner les contours des objets.

Comme je l’ai dit, la perception et le cerveau sont des choses complexes.

Mythe 2 : Le texte doit répondre à l’exigence de l’AAA, ou il est inaccessible

Malgré le fait que je n’ai jamais entendu parler de ce mythe auparavant, le minimum requis pour la plupart des sites web de l’administration européenne est AA.

[…] dans les États membres de l’UE sont tenus par la loi de veiller à ce que les informations qu’ils publient soient soumises à des normes d’accessibilité, en particulier les normes AA des Web Content Accessibility Guidelines (WCAG).
Source

Patrick H. Lauke, se décrivant lui-même comme le raton laveur des WCAG, expert en matière de normes et d’accessibilité du Web, a tenté de m’expliquer en termes très simplifiés, que je vous partage avec son accord :

Le point essentiel des « A »/AA/AAA est qu’ils constituent des niveaux de conformité distincts, et qu’ils couvrent des choses différentes en fonction de la population concernée et de l’importance d’une défaillance d’un critère. Un critère « A » affecte beaucoup de gens et sera un problème très préjudiciable/critique. Un critère AAA affectera un pourcentage relativement plus faible de la population, serait probablement moins un obstacle et plus un problème surmontable mais ennuyeux qui affectera de manière disproportionnée cette population d’utilisateurs particulière. En outre, les AAA sont généralement des critères qui nécessitent des changements plus fondamentaux (dans la conception/la mise en page, etc.) pour les traiter. Le mythe n’a donc raison d’être que dans la mesure où vous devez satisfaire aux exigences de l’AAA si vous voulez revendiquer la conformité à l’AAA et être accessible au plus large public. L’AA est généralement accepté comme la base de référence. L’AAA va plus loin, pour aider les personnes souffrant de troubles visuels plus graves.

Là encore, le but avec le minimum est d’encourager les gens à faire un effort pour les personnes dans le besoin d’une meilleure lisibilité. Si le WCAG comporte 3 niveaux d’exigences, c’est pour vous encourager à aller plus loin et à apprendre les avantages d’être accessible. Si vous couvrez toutes les exigences du niveau simple A, c’est déjà un bon travail. Prochaine étape AA 😊

Si on vous dit que les exigences de l’AAA ne concernent que les personnes âgées (parce qu’elles sont « pour la plupart » les seules à avoir une perte de vision de 20/80) et les personnes qui n’utilisent pas de lecteur d’écran, juste pour vous donner une excuse pour ne pas répondre à ces exigences, alors vous ne faites pas les choses de manière inclusive.

En outre, ma source semble indiquer que le nombre de personnes souffrant de troubles de la vision est de plusieurs millions aux États-Unis. En 2017, 3 894 406 personnes ont une déficience visuelle de moins de 20/40, 1 483 703 personnes de moins de 20/60 et 1 082 790 de 20/200 ou moins. Et ces déficiences prennent en compte les personnes de plus de 45 ans.

Il y a deux bonnes raisons pour faire du niveau AA au minimum, ou de l’AAA si vous le pouvez :

  • Vos recherches sur les utilisateurs vous l’ont appris.
  • Vous voulez être accessible et inclusif par défaut.

Utilisez les études mondiales pour vous donner une tendance, mais ne vous y arrêtez pas : faites vos propres recherches pour votre population/utilisateurs.

Mythe 3 : le texte en gris et les boutons sont inaccessibles et ont l’air désactivés.

Ça dépend.

Lors de nos récents tests d’utilisateurs que j’ai effectués au Foyer, la première compagnie d’assurance du Luxembourg, 100% de nos testeurs se sont retrouvés avec le même comportement : penser que les boutons gris étaient désactivés malgré le contraste effectif.
Malheureusement, je ne peux pas vous fournir les enregistrements ou les statistiques ici, mais je peux certainement vous donner le même conseil : l’affordance est liée à de nombreux paramètres contextuels.

Souvent, les boutons gris sont utilisés pour des actions secondaires ou des actions d’annulation, des actions qui sont volontairement moins accrocheuses pour aider l’utilisateur à se concentrer sur ce que nous attendons de lui.

Pour ce faire, vous pouvez utiliser un autre ensemble de combinaisons stylistiques, par exemple :

Propositions for secondary actions with less eye-catching contrast but still accessible

Vos limites de bouton (la bordure ou le fond par exemple) n’ont pas besoin de correspondre à un bon rapport de contraste tant que le texte sur le fond de la page respecte ce contraste.

Si un bouton avec texte a également une bordure colorée, puisque la bordure ne fournit pas la seule indication, il n’y a pas d’exigence de contraste au-delà du contraste du texte.
WCAG 1.4.3 – Contrast (Minimum)

Encore une fois, faites vos propres recherches et n’oubliez pas que vous ferez des erreurs, et c’est très bien ainsi ! Tirez les leçons de ces erreurs.

Mythe 4 : L’utilisation d’une couleur ne suffit pas à elle seule pour transmettre l’information

Ce n’est pas un mythe, ce sont les bases de l’accessibilité, c’est même une connaissance de base de l’utilisabilité et l’ergonomie. Cette section prend en compte Use of Colors comme référence, mais aussi les handicaps logiques et cognitifs.

Vous ne pouvez pas prendre le thème des couleurs séparément d’autres thèmes de l’accessibilité ou de l’ergonomie. L’accessibilité de vos couleurs n’est qu’une petite partie du domaine et doit être combinée avec d’autres types de sujets comme les troubles cognitifs, de mobilité ou la déficience auditive.

Les exigences d’accessibilité stipule que :

“La couleur ne doit pas être utilisée comme le seul moyen visuel pour transmettre une information, indiquer une action ou distinguer un élément.”

Toutefois, cette norme ne s’applique que dans les cas où les différentes couleurs ont une signification spécifique pour informer l’utilisateur. En d’autres termes, si vous utilisez des différences de couleur pour transmettre des informations, vous avez besoin d’un indice supplémentaire. C’est important pour les déficiences visuelles mais aussi pour les déficiences cognitives.

« Mais si vous utilisez les couleurs claires et sombres pour transmettre des informations, vous n’avez pas besoin d’un indice supplémentaire tant que la différence de contraste est suffisamment élevée », explique Anthony (l’auteur de l’article critiqué). Qu’est-ce que cela signifie ?
J’ai essayé de retravailler la formulation mais je n’y arrive pas : utiliser la différenciation des couleurs pour apporter des significations ne suffit pas, point final. Vous pouvez utiliser la luminance et les contrastes si vous voulez, c’est toujours jouer avec des choses qui n’ont pas de sens du tout.

Donc oui, techniquement, Anthony a raison, à la lecture stricte du WCAG. Mais de manière concrète, ce n’est pas suffisant : il en résulte toujours une confusion potentielle pour les utilisateurs.

2 toggle tokens with 1 blue and 1 gray

Pour reprendre l’exemple de cet élément t’interface proposant une sorte de boutons radio activable, le problème est que si vous n’avez pas assez d’objets, vous ne savez pas quel est l’état initial des boutons – s’ils sont activés ou non. De même, si par défaut tous les éléments sont gris, vous ne savez pas ce qui est coché et ce qui ne l’est pas.

3 toggle tokens with 2 blue and 1 gray

Avec un élément supplémentaire, votre cerveau peut vous guider en définissant un pattern. Les éléments d’apparence similaire ont le même état et vous pouvez commencer à deviner l’état de chaque élément. Mais arrêtons de deviner et commençons à utiliser des indices visuels auxquels les gens sont habitués, et qui sont en faits pour dire « celui-ci est sélectionné ». Une autre partie de l’accessibilité regroupe les handicaps cognitifs. Faire deviner aux gens ce que vous voulez dire finit parfois mal, c’est encore plus vrai avec les personnes souffrant de handicaps cognitifs.

Toggle Tokens with checked icons

Et voilà ! Je veux dire, ça coûte quoi ?
La couleur, c’est pour la décoration, l’ambiance, le thème. Elle doit soutenir votre message, et non pas être le seul moyen de le transmettre. Les couleurs n’ont pas de réelle signification malgré les nombreuses interprétations purement culturelles que vous pouvez facilement trouver sur le web. Bien sûr, vous utiliserez la couleur rouge pour les erreurs, mais la vraie signification est celle des mots que vous mettez sur vos messages, et l’indicateur visuel à côté. (icônes, images, par exemple)

Mais même là, les icônes sont facilement interprétables, mais c’est un autre sujet.

Astuces à retenir

Je sais que je vous ai donné beaucoup d’informations, parfois en contradiction avec ce que d’autres experts peuvent crier haut et fort. Voici quelques éléments « à emporter » :

  • Faites toujours vos propres tests avec vos utilisateurs.
  • Ne laissez pas votre ego tuer les feedback des utilisateurs.
  • Les WCAG ne sont pas toujours corrects à 100 %, ils travaillent à l’amélioration de leurs méthodes de calcul de contraste, ils ne sont pas en tort pour autant.
  • Si vous pensez à l’accessibilité, vous en faites déjà plus que beaucoup de designers, essayez maintenant de pratiquer et de rester ouvert aux commentaires.
  • Si vous vous sentez perdu, demandez à des experts, il existe une communauté pour vous aider.
  • Il y a toujours quelque chose de plus à faire de mieux, il faut savoir quand s’arrêter.

Je suis disponible : commentaires et Twitter sont faits pour cela 🙂
A grand merci à Patrick H. Lauke pour son expertise et ses nombreux conseils.

Sources et liens externes

The post Il n'y a pas de "Mythes sur l'accessibilité des couleurs" first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ux-experience-utilisateur/mythes-accessibilite-couleurs-constraste-wcag/feed 0
Dossier de Soins Partagés (DSP) : illusion de la sécurité et expérience utilisateur https://www.creativejuiz.fr/blog/ux-experience-utilisateur/dossier-soins-partages-dsp-luxembourg-lillusion-securite-ux https://www.creativejuiz.fr/blog/ux-experience-utilisateur/dossier-soins-partages-dsp-luxembourg-lillusion-securite-ux#comments Fri, 24 Apr 2020 15:35:10 +0000 https://www.creativejuiz.fr/blog?p=7358 The post Dossier de Soins Partagés (DSP) : illusion de la sécurité et expérience utilisateur first appeared on Creative Juiz.

Connu sous le nom du DMP (Dossier Médical Partagé), le DSP (Dossier de Soins Partagé) est sa version Luxembourgeoise. Il s’agit d’un outil de centralisation des informations de santé d’un patient pour permettre un meilleur suivi global, notamment via le partage d’informations sur un espace supposé être sécurisé. Cet article porte sur l’illusion de la […]

The post Dossier de Soins Partagés (DSP) : illusion de la sécurité et expérience utilisateur first appeared on Creative Juiz.

]]>
The post Dossier de Soins Partagés (DSP) : illusion de la sécurité et expérience utilisateur first appeared on Creative Juiz.

Connu sous le nom du DMP (Dossier Médical Partagé), le DSP (Dossier de Soins Partagé) est sa version Luxembourgeoise. Il s’agit d’un outil de centralisation des informations de santé d’un patient pour permettre un meilleur suivi global, notamment via le partage d’informations sur un espace supposé être sécurisé.

Cet article porte sur l’illusion de la sécurité, mais part de mon expérience avec l’ouverture d’un DSP au Luxembourg. Pour les personnes qui n’aiment pas le storytelling, les takeways sont plus bas dans l’article, je commence par un petit récit.

Oui, c’est un article coup de gueule aussi, car ce service est proposé par le Gouvernement du Grand-Duché du Luxembourg. Un tel niveau de qualité n’est pas acceptable pour un service national.

Ouverture d’un Dossier de Soins Partagés

À Luxembourg, il y a eu 2 manières, à ma connaissance, de recevoir une invitation à l’ouverture d’un DSP : après avoir suivi un parcours santé de type consultation d’un spécialiste, ou hospitalisation, le médecin peut en faire la demande pour vous ; ou plus récemment systématiquement car la chose se généralise au niveau du Grand-Duché.

J’ai donc reçu aujourd’hui un courrier de l’Agence eSanté Luxembourg me présentant l’entrée en vigueur d’un réglement Grand-Ducal dans un premier temps, puis la gratuité du service dans un second temps. Ce n’était pas sans me rappeler le hameçonnage à la sauce Caisse de Retraite qui vous font croire qu’en ouvrant une micro-entreprise en France vous avez l’obligation de souscrire à leur caisse. Même structure de texte, même sentiment d’arnaque.

Illusion de la sécurité : le courrier postal

Le premier contact se fait par courrier postal. Surprise et découverte : je n’ai jamais fait de demande pour ce type de dossier, et n’ayant aucune confiance en les outils gouvernementaux, je n’étais pas rassuré de savoir qu’un dossier avait été créé à mon nom, et déjà publié sur leur système.

La partie code du courrier

Mais peu importe, la vraie question c’est  : pourquoi m’envoyer un courrier avec une clé d’activation et la clé de présence —c’est la clé que vous partagez au personnel de santé pour lui donner accès à votre dossier— dans le même courrier ?
Il y a 2 jours j’ai reçu le courrier de mon voisin dans ma boîte à lettres, ce qui veut dire que potentiellement une autre personne aurait pu recevoir mes 2 codes, en même temps, par erreur.

Non, le courrier postal n’est pas une manière sécurisée de faire transiter une information supposée sécuriser un espace en ligne. Je dirais presque moins sécurisée qu’une adresse e-mail, mais ça dépend certainement de votre sensibilité vis à vis de votre propre sécurité en ligne.

Mais passons à la suite, il y a certainement une manière de sécuriser l’activation du dossier en ligne qui m’échappe pour le moment. Même si ces premières étapes ne me donnent pas confiance.

Illusion de la sécurité : Le site web esante.lu

Je tape donc https://esante.lu et je tombe sur, une page morte. Je vérifie sur le courrier reçu, il est bien mentionné esante.lu… Ah non, pardon, www.esante.lu. Cette fois cela fonctionne avec les www. On est en 2020 les loulous, il serait temps de prendre en compte ce critère ergonomique simple de rendre accessible votre site web avec ou sans www.
Connaissant techniquement ce qu’il suffit de faire pour prendre cela en charge, j’ai encore moins confiance en leur site web et la qualité du code qui est censé sécuriser mon espace santé.

Design totalement dépassé du site esante.lu

Je tombe alors sur ce site web.
Je vous avoue que j’ai revérifié l’URL écrite sur mon courrier en voyant le design. Censé être un site web pour un service relativement récent, j’ai eu l’impression de tomber sur un outil datant des années 2009, à l’époque où j’ai commencé à bosser dans le domaine, ce style commençait déjà à être dépassé, et me rappelle cruellement les sites web codés avec les pieds où la sécurité laissait elle aussi à désirer.

Mais pour le moment aucun risque pour moi, je continue en cherchant l’accès Patient.
Bon point, la page d’activation m’explique les prochaines étapes, mais le fait que je puisse me connecter avec mon numéro de sécurité social et le code reçu par courrier ne me rassure pas : deux informations relativement facile à obtenir qui permettraient d’accéder à un dossier déjà disponible sur leur site.

Je demande un accès et je me fais rejeter car je n’ai pas accepter les conditions d’utilisations. Ha ! Je n’avais pas vu la case à cocher (ergonomie tout ça…). Du coup je prends le temps de lire les conditions d’utilisation… Eh oui, je suis comme ça.

La perte de sa qualité de Professionnel de santé, Patient ou Agent de Santé entraîne pour l’Utilisateur la perte de son droit d’accès respectivement comme Professionnel de santé, Patient ou Agent de Santé.

Ok, donc sur des critères propres à l’Agence de santé, en plus de me créer mon espace sans me demander mon avis, je peux prendre le risque de stocker des informations de santé en ligne, donner accès à des professionnels, et me faire jeter de mon accès selon des critères obscures. Je ne sais pas ce que ça donne d’un point de vue respect des directives européennes sur l’accès aux données me concernant, mais ça m’a fait froid dans le dos de lire cela.

Nous ne sommes clairement plus ici sur une illusion de sécurité, car il n’y a pas de risque, mais il n’y a plus d’illusion non plus, il n’y a qu’un sentiment de malaise et d’insécurité, entre le design visuel du site, les erreurs techniques et les conditions d’utilisation.

Illusion de la sécurité : l’espace privé

Je continue à avancer, parce que pour le moment je souhaite juste accéder à mon espace privé pour voir quelles données sont déjà enregistrées et diffusées sans mon accord.

Je parcours le formulaire d’entrée, plutôt simple sur les premières étapes, et je me rends compte que celui ci n’est pas accessible (cliquer sur un label ne me fait pas rentrer dans le champs à remplir), je plains les personnes en situation de handicap, que j’imagine bien plus concernées que moi par l’accès à ce type de service. Soit dit en passant : encore un site du Gouvernement Luxembourgeois pas accessible. Mais passons, je sais aujourd’hui qu’il y a des gens biens qui travaillent sur cet aspect !

Processus étape 1

La première étape propose un Captcha. Je vous laisse lire cet article sur le sujet pour m’éviter de vous résumer cela par « c’est de la merde ».

Etape du mot de passe à l'aveugle

La deuxième étape me propose de taper un mot de passe. Aucun moyen de savoir ce que j’ai écrit et je me suis trompé une première fois. D’autant plus qu’à Luxembourg, tu as vite fait de passer d’un clavier AZERTY, à un clavier QWERTY ou QWERTZ. Passons à nouveau sur l’ergonomie, n’est-ce pas.

Demande de numéro de téléphone

En troisième étape je dois rentrer mon numéro de téléphone pour sécuriser mon espace. Alors là c’est la grosse blague, car si je suis un « man in the middle » qui a intercepté le courrier, jusque là je peux facilement passer ces étapes en étant le « hacker ».

Je pense que je me suis trompé dans mon numéro de téléphone, car je n’ai jamais reçu de SMS. J’aurais bien vérifié quel téléphone j’ai entré, mais je ne peux pas, il est remplacé par des astérisques :

Le numéro de téléphone est remplacé par des étoiles alors que je viens juste de le taper

Je souhaite revenir en arrière, mais je ne peux pas non plus : ergonomie de merde sérieux !

Obligé de tout recommencer. Cette fois le numéro de téléphone semble être le bon. J’arrive à l’étape 4 « autres moyens d’authentification » qui me permet de connecter mon compte à un service fort d’authenfication double facteur. Cette étape est optionnelle…
OPTIONNELLE !? La seule étape sécurisante de votre processus est une étape optionnelle ?

La seule étape sécurisée est optionnelle

Ok, je passe à l’étape suivante sans ajouter ce moyen d’authentification, car s’il est optionnel c’est clairement que tout le reste est purement illusoire. Ce site web n’est pas sécurisé. Ma seule envie est de vérifier ce qui est en ligne et le supprimer.

Dernière étape, je peux me connecter. Donc jusque là une personne qui a intercepté mon courrier peut se connecter à ma place et gérer mon espace. Puisque cette personne aura mis son numéro de téléphone et que c’est le seul moyen nécessaire mis en place pour s’authentifier.

Sur mon espace privé, je retrouve mon nom complet avec mes différents prénoms, un moyen de changer les informations déjà renseignées. Mais aucun moyen de supprimer mon espace ni ces informations.

En ouvrant mon dossier, je me rends compte que celui-ci est ouvert par défaut ce qui est en contradiction avec les informations précédentes données ci et là qui me demandaient d’activer le dossier pour l’ouvrir. J’ai donc demandé à le fermer et j’en ai profité pour demander une clôture et un retrait des informations me concernant de ce site web, comme le prévoit la réglementation.

Qu’est-ce que l’illusion de la sécurité ?

Le principe de l’illusion est de faire croire en quelque chose par les apparences pour vous leurrer, volontairement ou involontairement. On adore cela lorsqu’il s’agit de spectacles de magie, beaucoup moins lorsqu’il s’agit de mensonge sur la qualité d’un produit.

Le problème quand il s’agit de sécurité, c’est qu’une illusion vous insécurise totalement. Prenons par exemple la situation de COVID19 actuelle : certains d’entre vous portez des gants, et avez l’illusion d’être protégés grâce à eux. J’ai vu certains d’entre vous porter des gants, toucher des objets, toucher votre nez, vos yeux, retoucher votre téléphone, prendre une pomme sur une étale dans un supermarché. Au final vous pensez être protégés donc vous faites n’importe quoi et en oubliez les gestes essentiels.
Au final vous avez utilisé un pattern connu de spécialiste de santé (porter des gants), et mis de côté de qui vous protège vraiment, à savoir votre conscience, votre connaissance et votre attention aux gestes de sécurité.

Quand il s’agit de la sécurité —mais ça marche aussi dans le domaine de l’ergonomie web ou l’expérience utilisateur— il y a des patterns ou des a priori qui vous font croire en un système sécurisé (comme l’histoire des gants), mais qui appliqués n’importe comment ne sont qu’illusion. Pour reprendre l’expérience précédente, voici certains de ces a priori.

Penser que le courrier est un moyen sécurisé

« Utiliser un courrier postal permet de s’assurer de l’identité de la personne » : c’est faux. Puisque il y a plusieurs interventions humaines entre l’émission et la réception, il y a autant de risque d’erreur, ou de « man in the middle » qui intercepterait la communication.

De même faire transiter en même temps un identifiant et un mot de passe, ou ici un code d’activation qui est le seul nécessaire pour s’authentifier est un très gros risque.

Alors comment fallait-il faire pour sécuriser à cette étape ?

  • Éviter le courrier reste le plus simple. Votre service est en lien direct avec un besoin de partage des informations de santé. Passer par un personnel de santé et une présence physique de la personne qui bénéficie des soins semble être le plus optimal : contrôlez l’identité de la personne, renseignez son numéro de téléphone et son adresse e-mail, donnez lui un code d’accès, et le tour est joué.
  • Si le courrier est le seul moyen d’atteindre certaines personnes, proposez un identifiant et un mot de passe dans des courriers séparés. Cela limitera le risque « man in the middle« .
  • Si vous pouvez combiner ces deux informations avec une information que seul le destinataire supposé connait, c’est encore mieux. Il devra alors l’utiliser en combinaison des 2 autres informations pour se connecter (au moins la première fois).

Penser que demander un numéro de téléphone est suffisant

Lorsque vous souhaitez mettre en place une double authentification par téléphone, demander le numéro de téléphone alors que vous n’êtes pas certain de l’identité de la personne est contre-productif. En effet, dans mon récit d’expérience précédent, partant du principe qu’une tierce personne a intercepté mon courrier, demander un numéro de téléphone à cette personne ne sert à rien, elle ne me rendra pas accès à mon espace alors volé.

Alors comment fallait-il faire pour sécuriser cette étape ?

  • Si l’étape précédente (première connexion) permet d’assurer l’identité de la personne, vous êtes libres de demander un numéro de téléphone.
  • Si ce n’est pas le cas, il faut arriver à collecter cette information lorsque vous pouvez vous assurer de l’identité de la personne, dans notre exemple :
    • lors d’une consultation médicale par exemple,
    • grâce aux données que le Gouvernement possède déjà (c’est un service national)
    • grâce à l’authentification Luxtrust (un système de token unique local)

L’expérience utilisateur et la sécurité

Une autre chose que vous avez certainement remarqué lors de mon expérience avec eSanté était mes doutes initiaux et ma perte de confiance au fur et à mesure du parcours. Plusieurs choses ont perturbé mon parcours et érodé ma confiance :

  • Le courrier ressemblait à un scam (une arnaque),
  • Le courrier me présentait le dossier comme déjà ouvert, créant une sensation de perte de contrôle de données m’appartenant (Fear of missing out)
  • Le courrier est arrivé sans que je fasse la demande explicite d’un service.
  • Le site web n’était pas accessible sans www. Ce problème technique me fait dire que l’aspect code n’est pas maitrisé par les personnes qui ont produit le site web. Ne pas mettre en œuvre une chose aussi simple techniquement ne me rassure pas sur le prise en charge de l’aspect sécurité d’un point de vue code, qui demande beaucoup d’attention et une grosse expertise.
  • L’aspect du site web qui te donne l’impression d’être resté en 2009 est important aussi : qu’on soit clair sur le sujet, l’apparence d’un site web ne joue pas sur sa qualité technique ou la sécurité, je parle ici uniquement de la sensation et de l’impression global. L’aspect joue clairement sur la confiance que l’utilisateur peut porter en un service, mais on va dire que c’est un biais de designer, je le prends sur moi 😉
  • L’étape 4, cette étape qui est la seule sécurisante dans le processus est optionnelle. Je n’en dis pas plus là dessus, c’est totalement inadmissible.
  • Je me suis trompé 1 fois dans le formulaire, j’ai dû recommencer l’ensemble des étapes précédentes. Rien à voir avec la sécurité, bien que ça peut jouer à l’étape de choix de mot de passe : un utilisateur exaspéré a plus de chance de faire des erreurs. Et refaire un truc qu’on a déjà fait est exaspérant.
  • Une fois connecté il m’est précisé que mon dossier est déjà ouvert : aux étapes précédentes le site me disait que mon dossier n’étais pas ouvert par défaut. Un mensonge a tendance à retirer toute confiance. C’est le cas ici.

Les gens parlent

Un ami m’a dit avoir activé son dossier et n’avoir jamais réussi à l’utiliser pour y glisser des documents. D’après ce qu’il m’a dit, aucun médecin n’a jamais réussi à l’utiliser non plus puisqu’il n’a jamais retrouvé aucun document dedans.

Pour moi c’est parfait : un projet qui a certainement dû coûter beaucoup d’argent à Grand-Duché et qui n’est ni accessible ni suffisant ergonomique pour être utilisable, et qui en plus n’est pas sécurisé. Je ne perds rien à avoir demandé la fermeture du dossier et la suppression de mes données personnelles.

Je suis persuadé que ce projet de dossier médical centralisé peut être d’une précieuse aide pour la transmission d’informations entre les professionnels de santé, mais avec un tel projet pilote, fort à parier que l’adoption et les évolutions vont être très compliquées.

Ma demande de clôture étant accompagnée d’un message décrivant mon expérience à l’Agence eSanté Luxembourg, un conseiller du service m’a appelé 10 min après pendant que je rédigeais cet article. Il a été incapable de me renseigner pour la suppression de mes données personnelles et m’a fourni le nom et numéro de téléphone de leur DPO.

The post Dossier de Soins Partagés (DSP) : illusion de la sécurité et expérience utilisateur first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ux-experience-utilisateur/dossier-soins-partages-dsp-luxembourg-lillusion-securite-ux/feed 2
Les bons outils pour construire un Design System https://www.creativejuiz.fr/blog/ux-experience-utilisateur/bons-outils-construire-design-system https://www.creativejuiz.fr/blog/ux-experience-utilisateur/bons-outils-construire-design-system#respond Sun, 08 Mar 2020 13:42:29 +0000 https://www.creativejuiz.fr/blog?p=7248 The post Les bons outils pour construire un Design System first appeared on Creative Juiz.

Vous savez déjà qu’un Design System n’est pas seulement un fichier CSS partagé ou un ensemble de bibliothèques Figma/Sketch. Un système de conception est composé à 80% d’humains (relations, partage, travail quotidien) et à 20% de documentation, d’outils et de bibliothèques. Je souhaite vous aider pour ces 20%. Pour vous aider avec ces 20%, j’ai […]

The post Les bons outils pour construire un Design System first appeared on Creative Juiz.

]]>
The post Les bons outils pour construire un Design System first appeared on Creative Juiz.

Vous savez déjà qu’un Design System n’est pas seulement un fichier CSS partagé ou un ensemble de bibliothèques Figma/Sketch. Un système de conception est composé à 80% d’humains (relations, partage, travail quotidien) et à 20% de documentation, d’outils et de bibliothèques. Je souhaite vous aider pour ces 20%.

Pour vous aider avec ces 20%, j’ai fait une petite liste d’outils qui m’ont aidé et continuent à m’aider au quotidien, et également quelques uns qui pourraient être intéressants pour vous même si je n’utilise pas ces outils. C’est un très bon ajout à la liste des outils de Design UX/UI que j’ai faite pour vous plus tôt.

Je vais détailler un peu l’usage que je fais de chaque outil que j’utilise, et pour ceux que j’ai essayé une fois mais que je n’utilise pas au quotidien, je serai plus bref, même s’ils ont attiré mon attention à un moment donné.

Je vais essayer de séparer les outils de bibliothèque visuelle des outils de Composant côté code, même si, vous le verrez, la séparation est parfois assez difficile.

Design System – Bibliothèque visuelle

Lors de ma première expérience de construction d’un Design System, j’ai commencé avec l’application Sketch mais au bout d’un moment, la bibliothèque était trop grande pour ce pauvre petit Sketch et elle commençait à être trop lente pour pouvoir fonctionner convenablement.
C’est pourquoi, après quelques tests effectués par un de mes collègues, nous avons rejoint la communauté Figma.

Figma – Un Design System évolutif

Figma est bien connu de la communauté de design, et il vous permet de construire un Design System efficace et de partager des bibliothèques visuelles. J’ai testé d’autres solutions comme Adobe XD ou Sketch, mais la compatibilité entre les systèmes d’exploitation et la façon dont elle fonctionne correspondent à ma façon de travailler sur un Design System.

Les fonctions de « Team » sont vraiment utiles pour intégrer les personnes dans une équipe de designers. Il existe des bibliothèques partagées qui peuvent être activées dans l’ensemble de l’équipe pour forcer les gens à utiliser des composants principaux (symboles dans Sketch) dans la composition de leurs design.

Capture d’écran du Design System de Foyer – Bibliothèque visuelle

Ces différentes bibliothèques peuvent être activées sur l’ensemble de l’équipe, mais sont toutes facultatives. Cela signifie que lorsque vous créez votre fichier pour travailler sur une interface en utilisant votre Design System, vous pouvez désactiver les bibliothèques dont vous n’avez pas besoin. Je ne sais pas pourquoi vous voudriez faire cela, mais vous pouvez le faire 😀
Notre Design System actuel est assez gros, mais je n’ai jamais remarqué de latence dans son utilisation ou dans la recherche parmi la grande quantité de composants maîtres.

Il existe également la Collaboration en direct, qui permet de travailler exactement sur le même objet dans le même fichier. C’est un moyen de sauver des vies lorsque vous devez vous précipiter sur un design pour une raison quelconque.

Une démo de 3 personnes qui travaillent sur le même fichier (source)

Les visiteurs et les contributeurs peuvent laisser des commentaires directement sur l’espace de travail, ajoutant ainsi plusieurs niveaux de contribution.

Un commentaire sur un composant de Design System

Le fait que tous les fichiers soient dans le Cloud, vous ne pensez même pas à la sauvegarde ou au service de Cloud où vous devez sauvegarder votre travail régulièrement et penser à un outil de versionning. Tout est inclus dans Figma : contrôle de version, outil de blâme, fichiers sauvegardés dans le cloud. Et oui, vous pouvez travailler hors ligne dès que vous avez déjà chargé votre travail, l’outil enregistrera localement votre travail et le poussera en ligne lorsque votre connexion sera rétablie.
Pour les entreprises, si vous avez besoin d’une sécurité renforcée, Figma permet SAML SSO.

Figma est aussi une affaire de communauté autour d’elle : Des plugins et des fichiers partagés réalisés gratuitement par la communauté sont disponibles et peuvent être facilement activés pour tous les membres de votre équipe. L’intégration pour construire un plugin est si simple que j’en ai fait un pour préparer vos exports d’icônes PWA.

La page Communauté de Figma

Figma est gratuit pour 2 éditeurs et 3 projets au maximum, ce qui est vraiment suffisant pour les étudiants ou les petites équipes de designers. Mais tant que vous aurez besoin de construire des bibliothèques partagées, vous devrez payer 12 $/mois/éditeur.

Découvrir Figma

ZeroHeight – documentation Design et code

Zeroheight est un CMS pour gérer une documentation, un site web qui est disponible pour vous et vos collaborateurs. L’avantage de cet outil est que vous pouvez synchroniser vos fichiers de design pour maintenir la documentation à jour. Il fonctionne à merveille avec Figma qui offre une API puissante.

Lorsque j’ai construit le site web du Foyer Design System, je l’ai fait avec de simples fichiers HTML, il m’a fallu un peu de temps juste pour le modèle et l’aspect responsive du site web. La structure était basée sur le Design System interne existant que nous avons au Foyer (c’est le nom de la société) pour notre documentation complète. Oui, le site web public ne représente même pas 5 % de la documentation complète.

Lorsque j’ai commencé à travailler sur le Design System CapitalatWork pour nos besoins internes (applications internes), j’avais besoin de quelque chose d’efficace avec une configuration rapide. Zeroheight m’a permis de construire plusieurs pages de documentation en une matinée.

L’outil permet de construire une documentation visuelle ainsi qu’une documentation technique. Il synchronise votre fichier de design ; dans mon cas Figma avec les frames, composants ou styles importés que j’ai décidé d’importer et de documenter. Il y a des blocs de contenu pré-fabriqués qui peuvent facilement couvrir 90% de vos besoins pour une structure et un contenu de Design System de grande qualité.

Lorsque les designers ou les développeurs se joindront à moi pour compléter la documentation, nous pourrons l’écrire en collaboration, en même temps.

Zeroheight est gratuit pour un éditeur, suffisant pour commencer, et commence à 15 $/mois/éditeur pour une version premium collaborative. C’est aussi :

  • Des Design Tokens toujours à jour,
  • Des assets et fichiers de Design toujours synchronisés
  • Une possibilité d’inspecter les détails des composants
  • Un historique de version (Company offer)
  • Un nom de domaine personnalisé (Company offer)
  • Un système de contenu privé protégé par mot de passe (Company offer)
  • SAML SSO + User Permissions (Enterprise offer)

Découvrir ZeroHeight

Superposition – Design Tokens

Superposition est une application qui vous permet de parcourir littéralement vos Design Tokens existants. Il suffit d’entrer l’URL de votre site web ou d’une page et vous obtenez :

  • Les couleurs,
  • La typographie,
  • Les espacements,
  • Les valeurs d’angles arrondis,
  • Les valeurs d’ombrage,
  • La valeur de transition et animation,
  • Et les assets.

Cette liste peut être exportée dans plusieurs formats pour CSS, Sass, JS, android, et Swift devrait arriver bientôt.

Superposition - Design Tokens Generator

La superposition est un excellent outil pour démarrer un Design System dans un environnement existant. Que vous ayez un seul projet ou plusieurs projets utilisant (en quelque sorte) les mêmes codes, c’est un bon point de départ pour lister tous vos tokens afin de mieux estimer le travail à faire pour fusionner ou simplifier cette liste.

Cet outil a des plugins compatibles avec Adobe XS et Figma, je ne peux que vous conseiller de l’utiliser si vous jouez avec des projets existants. Cet outil est gratuit.

Découvrir Superposition

UI Kit et Outils de code

Voici quelques-uns des outils de développement que j’ai trouvés ou que j’utilise avec mon équipe sur nos Design Systems. Encore une fois, il n’est pas facile de séparer le design et le développement sur ce sujet, mais ces outils parleront beaucoup plus aux développeurs.

Storybook – Bibliothèques de composants

Storybook est fait pour documenter et créer un terrain de jeu pour les développeurs front-end. L’outil permet de construire une bibliothèque de composants avec une variation infinie. L’objectif est de permettre aux développeurs de construire des variations qui correspondent aux cas d’utilisation réels du ou des projets qu’ils construisent.

C’est un bon outil pour garder la cohérence et faire évoluer les composants en fonction des besoins du projet, sans casser les versions précédentes.

Les pages du composant sont bien construites et vous permettent d’ajouter autant d’onglets et d’informations que vous jugerez utiles pour votre équipe, comme : la documentation technique, les notes, les conseils d’accessibilité, la documentation des événements, l’histoire autour du composant, etc. Vous pouvez facilement obtenir des instantanés de vos composants pour voir les changements visuels en fonction de l’éditions de code.

L’objectif de cet outil est de créer un outil technique collaboratif qui peut également être transformé en un guide de style complet. La partie importante de cette phrase est « collaboratif ». Il aide les gens à travailler ensemble, mais ce n’est qu’un outil 😉
Je vous le dis parce que j’ai connu une équipe qui a travaillé avec Storybook, mais c’était un « book » fait par un seul homme, le lien était partagé par e-mail aux collaborateurs, et personne n’a plus jamais entendu parler de ce Storybook après cela. Utilisez l’outil que vous voulez, mais n’oubliez pas de parler aux êtres humains qui vous entourent.

Quoi qu’il en soit, Storybook fonctionne bien avec du HTML brut, React, React Native, Vue, Angular, Mithril, Marko, Ember, Riot, Svelte. Toute la documentation de ces frameworks est bien documentée.

Cet outil est Open Source et gratuit, et il existe de nombreux Addons qui rendront votre système vraiment puissant.

Découvrir Storybook

StencilJS – Composants réutilisables

StencilJS est un outil puissant pour construire des composants réutilisables compatibles avec un grand nombre de cadres techniques. Il est idéal lorsque vous travaillez dans un environnement où React et Angular font partie de vos projets, et pas seulement de ceux-ci. C’est un outil qui fonctionne avec plusieurs frameworks.

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

StencilJS est compatible avec JSX et est construit de manière à être à l’épreuve du temps : composants Web natifs avec polyfill, qui apportent un support pour tous les types d’environnement.

StencilJS

Il apporte également de la simplicité :

  • Comparaison visuelle : Diff. entre l’interface utilisateur et la capture d’écran,
  • Documentation : avec doc de composant généré automatiquement et variables CSS,
  • Environnement de développement : Serveur de développement intégré pour le rechargement instantané des modules.

Nous avons décidé au début de la construction de notre Design System que nous n’écrirons jamais de JavaScript tant que nous serons entourés d’environnements différents (PHP, WordPress et Angular). Nous n’écrivons que du HTML et du CSS.
Lors de la construction de notre Design System interne, un besoin est apparu : unifier l’interaction au sein de certains composants plus complexes, afin de maintenir la cohérence de l’expérience utilisateur. Un membre de la Core Team de notre Design System a décidé d’essayer StencilJS, et cela a plutôt bien fonctionné.

Découvrir StencilJS

CodeSandBox – Expérimentation de combinaisons

Je n’ai jamais eu l’occasion de l’utiliser mais cet outil semble parfait pour tester des choses dans un environnement pré-construit. CodeSandBox vous permet de le faire :

  • Utiliser des modèles de code prédéfinis (JS vanilla, React, Angular, Vue, Nuxt, Gasby, etc.)
  • Créez vos propres modèles prédéfinis,
  • Utilisez les modèles communautaires pour commencer,
  • Synchronisez avec Github,
  • Voir les changements en direct grâce au rechargement Hot Module,
  • Support NPM directement dans l’outil.

CodeSandBox

Vous pouvez même intégrer vos bacs à sable, ce qui peut être très pratique si vous construisez un système interne avec des exemples riches. Vous pouvez également tester la compatibilité d’un tiers avec votre système existant avant de vous lancer dans une solution.

Découvrir CodeSandBox

React Styleguidist – Guide de style pour React

Si votre équipe travaille avec React, React Styleguidist est un excellent outil pour construire un outil de type Storybook et jouer avec la documentation en direct de vos composants.

React Styleguidist

L’outil génère un guide de style et vous permet de construire des systèmes cohérents avec des variations de composants.

Je n’ai jamais utilisé cet outil, mais pour moi, il est proche de ce que vous pouvez faire avec Storybook, mais ici, il est convivial et construit uniquement dans ce but.

Découvrir React Styleguidist

Connaissances HTML & CSS

Oui, je sais, c’est un peu bizarre de considérer HTML et CSS comme des outils, mais ils le sont vraiment. Vous ne pourrez pas construire des modèles accessibles et solides sans ces connaissances.

Aujourd’hui, je vois de plus en plus de « développeurs frontaux » qui ne sont que des utilisateurs du framework JS (ouais, utilisateurs), comme des enfants qui jouent avec des morceaux de LEGO dont ils ne comprennent même pas la vraie nature. Pour construire un système de conception, vous avez besoin de quelqu’un travaillant sur du HTML brut, ayant une bonne compréhension de Role-ARIA et capable de tester les composants sur un grand nombre de navigateurs et de technologies d’assistance.
Vous avez besoin de quelqu’un capable d’improviser des lignes de code CSS personnalisées pour ajuster les composants et construire des variantes de ceux-ci, en conservant le même HTML (article de @shadeed9) pour éviter de retravailler du côté de l’implémentation.

Vous avez besoin de quelqu’un qui maîtrise le HTML et le CSS uniquement parce qu’être capable de gérer toutes sortes de situations de mise en page complexes est un travail à plein temps, parfois bien plus difficile que de jouer avec des morceaux de LEGO.

Si vous voulez en savoir un peu plus sur les composantes inclusifs, je vous conseille cette excellente lecture : Incluse Components par Heydon Pickering.

Construire un Design System est une affaire d’être humains

N’oubliez pas que la construction d’un Design System ne consiste pas à rassembler les bons outils, mais à rassembler les bonnes personnes autour de la table, à communiquer et à comprendre les besoins.

De gauche à droite : Matthieu, Bastien, Laurent, Steven B., Florentin, Jordan, Julie, Geoffrey, Steven L., Léa — Photographe : Kaorianne

Les outils sont là pour vous aider à établir une relation solide entre au moins les développeurs et les designers. Ils sont censés les aider à parler le même langage, en comblant le vide entre ces deux domaines, et servir un objectif commun : apporter une cohérence au sein des interfaces pour une meilleure expérience utilisateur.

Choisir le bon outil n’est pas toujours facile, vous devrez vous écouter les uns les autres pour comprendre les besoins des designers et des développeurs. Pour améliorer votre Design System, vous devez faire exactement la même chose que pour les autres produits : écouter les utilisateurs, recueillir leurs besoins et leurs difficultés, et élaborer des solutions.

Ça, ce sont les 80% restant. 😊

The post Les bons outils pour construire un Design System first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ux-experience-utilisateur/bons-outils-construire-design-system/feed 0
User Task Canvas – Collecter les activités & besoins de vos utilisateurs https://www.creativejuiz.fr/blog/ressources-telechargements/user-task-canvas-collecter-activites-taches-utilisateurs https://www.creativejuiz.fr/blog/ressources-telechargements/user-task-canvas-collecter-activites-taches-utilisateurs#comments Thu, 26 Dec 2019 13:05:20 +0000 https://www.creativejuiz.fr/blog?p=7002 The post User Task Canvas - Collecter les activités & besoins de vos utilisateurs first appeared on Creative Juiz.

Il n’est parfois pas toujours facile de récupérer l’ensemble des besoins de vos utilisateurs, notamment lorsque vous ne connaissez pas nécessairement bien le contexte d’usage ou le domaine dans lequel ils travaillent. C’est pourquoi nous avons créé ce canvas téléchargeable et imprimable. Contexte de recherche des besoins Julie et moi-même avons travaillé pour CapitalatWork Foyer […]

The post User Task Canvas - Collecter les activités & besoins de vos utilisateurs first appeared on Creative Juiz.

]]>
The post User Task Canvas - Collecter les activités & besoins de vos utilisateurs first appeared on Creative Juiz.

Il n’est parfois pas toujours facile de récupérer l’ensemble des besoins de vos utilisateurs, notamment lorsque vous ne connaissez pas nécessairement bien le contexte d’usage ou le domaine dans lequel ils travaillent. C’est pourquoi nous avons créé ce canvas téléchargeable et imprimable.

Contexte de recherche des besoins

Julie et moi-même avons travaillé pour CapitalatWork Foyer Group, une société de gestion discrétionnaire. L’objectif de notre intervention était de comprendre pourquoi leurs outils existants ne répondaient pas aux besoins des gestionnaires de portefeuille (nos utilisateurs finaux).

Mais avant de nous pencher sur la question du « pourquoi », nous avions besoin de comprendre un peu mieux le contexte et de relever leurs habitudes de travail tout en comprenant mieux leur quotidien. Ainsi nous aurions des bouts de « quoi », « qui » et « comment » nous permettant très certainement de trouver des pistes sur le « pourquoi ».

Nous voulions rendre la tâche un peu plus aisée pour nos utilisateurs, et un peu plus fun également, c’est pourquoi nous nous sommes penchés sur la création assez rapide d’un jeu de cartes pour aider nos gestionnaires à nous accompagner dans cet exercice.

Le premier prototype que nous avons testé sur un collègue

Il nous a fallu une journée pour les conceptualiser, les pré-tester, les faire, les imprimer, les découper et les tester le lendemain.

Le prototype testé à gauche, le premier jeu imprimé à droite

Utilisation des User Task Cards

Afin d’aider nos gestionnaires, nous avons organisé un petit atelier en réunissant deux de nos utilisatrices, bloquant 1h pour l’exercice. A posteriori l’heure n’était pas suffisante et nous avons dépassé de 15 min, là où il aurait plutôt fallu 1h30 pour être à l’aise.

Présenter le concept

Lorsque vous faites quelque chose d’inhabituel avec vos utilisateurs, il est important de présenter le contexte.

  1. Rappelez le contexte de l’atelier (à savoir collecter leurs habitudes de travail pour les aider)
  2. Annoncez que vous allez utiliser des cartes pour les accompagner.
  3. Présentez les différentes cartes : Task, Actions/Decisions, Objects/Tools, Interactions/Dependencies. Nous n’avons volontairement pas présenté les Pain PointsMagic Changes et Meta-cartes tout de suite (elles ne sont pas toutes dans les images précédentes d’ailleurs) .
  4. Présentez ensuite un exemple assez simple à comprendre extrait du quotidien. Nous avions déroulé l’exemple de « Prendre une douche » qui parle généralement à tous nos utilisateurs.

Lorsque vous déroulez votre exemple il vous faudra rappeler ce que chaque carte implique et proposer un ordre pour présenter ces cartes. Ordre qui ne sera pas nécessairement respecté par vos utilisateurs et ce n’est pas grave.

  1. Task : il s’agit de la tâche que vous avez besoin de réaliser. Vous avez normalement rempli cette carte d’un « Je dois prendre une douche ».
  2. Actions/Decisions : il s’agit de définir ce que vous faites pour accomplir cette tâche, et les décisions que vous devez prendre pour accomplir la tâche. « Je fais couler l’eau », « J’attends l’eau chaude », « Je règle le type de jet », sont des options possibles.
  3. Tools/Objects : il s’agit de préciser les outils et objets qui vous servent à accomplir la tâche. « Un gant de toilette », « Du savon », « Une éponge » ou « Une serviette » peuvent être des objets utiles.
  4. Interactions/Dependencies : il s’agit ici d’apporter plus de contexte à votre tâche en vous rappelant des gens ou autres activités dont vous dépendez. « La chaudières », « La propreté de la serviette », « Le bon entretien du siphon » peuvent être des dépendances.

Notre erreur initiale était de penser que nos utilisateurs pourraient remplir les cartes Pain Points et Magic Changes plus tard. En réalité ils ont eu besoin assez tôt d’exprimer ce qui les gêne. Donnez-leur assez tôt cette carte en la présentant dès le début, préservez la carte Magic Changes pour plus tard.

  1. Pain Points : elle représente les points bloquants ou irritants lors de la réalisation de la tâche. Généralement elle se remplit presque toute seule lorsque vous évoquez les outils, objets, interactions et dépendances. « La douche glisse », « L’eau est froide », « L »humidité monte vite » peuvent être des points de friction.

Déroulé de l’atelier

Une fois les présentations faites, nous avons proposé aux gestionnaires de remplir quelques cartes de tâche pour les lister.

Utilisateurs remplissant les cartes de tâches

Cependant, au fur et à mesure qu’ils en remplissaient, ils se rappelaient de dépendances et d’outils qu’ils utilisaient. Nous avons fini par leur laisser libre accès à l’ensemble des cartes pour qu’ils s’expriment librement. Ils ont vite pris en main l’outil, d’abord à deux en travaillant ensemble.

Colones de tâches et de leur contexte

Afin de les aider, nous complétions, tout en les écoutant, les meta-cartes proposant plus de contexte. Nous n’avions que la carte « Rhythm » à ce moment, mais nous nous sommes vite rendu compte du besoin du « Where » et de la durée. Ces cartes apportant plus d’informations sur le contexte de l’action sont primordiales pour une meilleure compréhension des points de frictions, et surtout pour apporter une solution mesurée. Nous les placions au-dessus de la carte d’activité bleue.

Au bout d’un moment, et parce qu’il arrive qu’une personne prenne la direction de l’exercice au sein de groupe, nous avons fini par séparer les deux gestionnaires pour obtenir davantage de tâches et permettre à chacun de faire appel à sa propre mémoire.

En fin d’atelier, nous avons offert la carte « Magic Changes » pour que l’utilisateur imagine sa propre solution aux Pain Points rencontrés. A ce moment nous avons repris l’exemple de la douche pour leur présenter le concept, en proposant des solutions. « Avoir un petit réchaud d’appoint », « Fond de douche poreux » ou « une ventilation motorisée » peuvent être des solutions aux points de friction de notre histoire de douche.

Bien plus de tâches organisées par colonnes

Une fois que c’est fini, regroupez vos colonnes en petites piles pour accéder rapidement aux informations d’une tâche. Nous avons utilisé des petites pinces en bois bien plus pratiques que des trombones ici.

Piles des tâches de nos utilisateurs

Nous n’avions clairement pas tout anticipé pour cet atelier, voici donc quelques petits conseils complémentaires.

Quelques conseils

Ces conseils sont assez génériques. En fonction de vos utilisateurs et du contexte de vos travaux vous aurez certainement besoin d’adapter un peu l’exercice. Quelques petites choses que nous avons pu constater.

  • Prévoyez au moins 1h30 avec deux utilisateurs qui travaillent avec vous.
  • Soyez au moins 2 designers, c’est plus facile pour accompagner les utilisateurs et ne rien oublier. Notamment si vous souhaitez prendre des notes sur la session.
  • Présentez l’ensemble des cartes dès le début, y compris les Pain Points, mais exceptée la carte Magic Changes, à garder pour la fin.
  • Rangez bien les tâches par colonne ou ligne pour faciliter la complétion de chaque tâche.
  • Vous pouvez aider au remplissage des cartes de contexte : duration, where, rhythm sans aucun risque tout en écoutant vos utilisateurs.
  • Vos utilisateurs vont s’approprier le jeu, et probablement en faire ce qu’ils veulent. A moins que vous ne perdiez trop de matière à cause de cette appropriation « pirate », laissez-les faire et soyez flexibles. L’important et de rendre la chose plus ludique et de créer un automatisme tout en n’oubliant rien.

Retour d’expérience

Chez Foyer (la société avec laquelle je travaille), nous travaillons dans un contexte Agile. Nous développons des fonctionnalités au fur et à mesure, et nous les testons à chaque itération avec nos utilisateurs finaux. Chaque développement est issue d’un besoin que nous avons découverts notamment grâce à ce type d’atelier et un story mapping approprié.

Après quelques mois de développement et plusieurs semaines d’utilisation, les retours sont plus que positifs et l’adoption de l’outil est sans équivoque : excellente. L’un des nombreux verbatim de nos utilisateurs qui m’a le plus apporté en tant que chercheur est :

C’est surprenant, vous avez réussi à comprendre notre métier sans rien connaître à la base.
— une utilisatrice

Télécharger gratuitement les User Task Cards

Vous trouverez la dernière version des cartes téléchargeables gratuitement ici même. Attention à la licence.

User Task Canvas Cards

Télécharger les cartes

Il s’agit d’une version 1.0 que je mettrais à jour au fil du temps suivant les retours et améliorations qui nous viennent.

Un guide d’entretien

Après avoir fait une première session avec ces cartes, j’ai présenté le prototype à Stéphanie Walter qui en a modifié l’usage pour créer un guide d’entretien. Ce guide propose une adaptation intéressante du jeu de carte que nous allons voir ensemble.

Présentation du guide d’entretien utilisateur

Le format « guide d’entretien » se présente sous forme d’un petit livret A5 à imprimer et divise en deux parties:

  • La couverture du livret qui permet de récolter les information sur la personne interviewée : role, quotidien, outils (et une partie questions ouvertes).
  • Des planches A4 qui vous permettent de réunir en une feuille les éléments associés à la tâche.

Le format est donc un peu différent que celui des cartes, et pour cause : il est fait pour un entretien 1 à 1 et ne demande pas nécessairement à plusieurs utilisateurs de travailler simultanément. Il permet à plusieurs personnes de la même équipe des faire passer des entretiens utilisateur structurés de la même façon afin d’ensuite comparer les résultats de recherche.

Guide d'entretien imprimé et plié

Comment utiliser le guide d’entretien

Voici quelques conseils d’utilisation pour le guide. Tout d’abord rappelez vous : il s’agit d’un entretien, les règles de recherche utilisateur d’un entretien classique s’appliquent aussi. Posez autant que possible des questions ouvertes, essayez de ne pas biaiser vos utilisatrices, etc.

  1. Imprimer une fois la 1e page (la grise) par utilisatrice et utilisateur interviewé. Elle servira de couverture. Pliez la en deux.
  2. Imprimez plusieurs planches d’entretien et glissez les dans la couverture pour créer une sorte de guide A5. (Stéphanie: « D’expérience il m’en a fallut entre 3 et 6 par utilisateur sur mon dernier projet »)
  3. Commencer l’interview par la première avec les quelques questions de la couverture grise. Cela permet de mieux comprendre la personne mais aussi de la mettre dans le « bain » pour la suite.
  4. Pour chaque tâche de cette personne, utilisez et remplissez une planche A4. (Stéphanie : « Le but est d’utiliser ce template comme guide, mais rappelez vous qu’il s’agit d’une interview donc d’une discussion, replissez les cases au gré de la conversation. Encore mieux si vous pouvez avoir une personne qui prend des notes en remplissant le template et une autre qui mène la discussion c’est parfait »)
  5. A la fin de l’interview, revenez sur la page de couverture pour quelques questions ouvertes.
  6. Lorsque vous avez terminé, n’oubliez jamais de remercier les utilisatrices et utilisateurs pour leur contribution et aide. Pliez vos feuilles de tâches sous la première d’interview pour créer une chemise et ne rien perdre. (Stéphanie : « En plus je conseille de les scanner pour être sure de VRAIMENT rien prendre »)

Planche A4 remplie

Et voilà ! Vous retrouverez rapidement les infos sur cet utilisateur.

N’oubliez pas d’identifier vos utilisatrices et utilisateurs soit avec un nom, soit avec un numéro si vous anonymisez la donnée, en renseignant l’identifiant sur toutes les pages. (un encart est prévu à cet effet).

Télécharger gratuitement le guide d’entretien

Vous trouverez la dernière version du guide téléchargeable gratuitement ici même. Attention à la licence.

User Task Canvas Interview Guide

Télécharger le guide

Il s’agit également d’une première version.

N’hésitez pas à commenter et nous partager vos cas d’utilisation, ici ou sur Twitter avec Stéphanie Walter ou moi-même. Nous vous invitons même à partager votre expérience tout en citant cet article pour toujours mentionner la source d’origine. D’ailleurs petit point licences.

Licence des fichiers

Quelques règles simples à respecter. Ces fichiers sont sous licence CC SA-BY 4.0. Merci de lire les détails de la licence et les points suivants.

  • Vous pouvez utiliser gratuitement et librement ces fichiers, même dans un contexte commercial.
  • Vous pouvez modifier ces fichiers et les adapter, mais vous avez l’obligation de préciser les modifications effectuées afin de ne pas les attribuer aux auteurs originaux.
  • Vous avez l’obligation de citer les auteurs originaux de ces fichiers (Stéphanie Walter, Julie Muller et Geoffrey Crofte) et de lier cet article ou le lien en pied de page des PDFs téléchargeables.
  • Vous avez l’obligation de partager votre création et vos modifications sous la même licence libre.
  • Vous n’êtes pas autorisé à appliquer des conditions légales ou des mesures techniques qui restreindraient légalement autrui à utiliser l’Oeuvre dans les conditions décrites par la licence.

Merci pour nous et amusez-vous bien !

Obtenir vos goodies

Dites-moi quel type de contenu vous souhaitez recevoir,  je vous enverrai ces freebies et 2 autres freebies supplémentaires par e-mail.

Type de contenu que vous souhaitez :

The post User Task Canvas - Collecter les activités & besoins de vos utilisateurs first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ressources-telechargements/user-task-canvas-collecter-activites-taches-utilisateurs/feed 4
Les outils pour UX/UI Designer https://www.creativejuiz.fr/blog/ressources-telechargements/outils-ui-ux-designer-collaboratifs https://www.creativejuiz.fr/blog/ressources-telechargements/outils-ui-ux-designer-collaboratifs#comments Fri, 04 Jan 2019 19:42:43 +0000 https://www.creativejuiz.fr/blog?p=6463 The post Les outils pour UX/UI Designer first appeared on Creative Juiz.

Voilà maintenant plus d’un an que l’UX et l’UI occupe une majeur partie de mon quotidien et que mon background de développeur front-end me sert presque uniquement à communiquer mes recommandations de parcours et micro-interaction, et faire monter en compétences certaines équipes. Petite rétrospective avec cette liste d’outils qui m’ont servi pour certains ou que […]

The post Les outils pour UX/UI Designer first appeared on Creative Juiz.

]]>
The post Les outils pour UX/UI Designer first appeared on Creative Juiz.

Voilà maintenant plus d’un an que l’UX et l’UI occupe une majeur partie de mon quotidien et que mon background de développeur front-end me sert presque uniquement à communiquer mes recommandations de parcours et micro-interaction, et faire monter en compétences certaines équipes. Petite rétrospective avec cette liste d’outils qui m’ont servi pour certains ou que j’ai découvert pendant mes recherches pour d’autres.

Le but n’est pas de vous détailler l’interface et l’usage que je fais de chaque outil, mais plutôt de vous les présenter rapidement afin que vous vous fassiez une idée de chaque service. Chaque outil peut-être utilisé différemment de l’utilisation que j’en ai personnellement. L’espace de commentaire est à votre disposition si vous avez des questions sur un outil ou un autre.

Concept et recherche

En phase de recherche, vous avez plus que jamais besoin de mettre les idées à plat et faire collaborer plusieurs personnes de plusieurs domaines entre elles. Elles sont parfois même géographiquement éloignées, des outils collaboratifs en ligne sont donc des solutions parfaites pour vous faciliter la vie.

Wireflow

Wireflow

Wireflow est un outil de wireframing/prototyping collaborative Open Source gratuit. Il regroupe un ensemble de fonctionnalités permettant à différents profil de collaborer sur un flow.

  • Collaboration en temps réelle,
  • Gestion des permissions utilisateur,
  • Un Live Chat pour échanger rapidement,
  • Une bibliothèque d’éléments graphiques riches. (10 catégories, 113 éléments graphiques)
  • Open Source pour vous permettre de l’installer chez vous ou d’améliorer son code.

Je n’ai jamais eu l’occasion de l’utiliser mais l’outil était dans ma liste des outils à tester un jour. Je vous laisser jouer avec.

Découvrir Wireflow

Realtimeboard

Realtimeboard

Realtimeboard est un outil collaboratif payant, mais avec une version gratuite vous permettant tout de même de tester l’outil assez loin. Vous pouvez globalement faire un peu ce que vous voulez avec cet outil. Il permet notamment d’organiser vos idées en phase de réflexion dans la conception d’un produit ou de fonctionnalités. Mind Map, User Story Map, Kanban, Flowchart, etc.

Pour l’utiliser régulièrement, cet outil est vraiment pratique pour exposer une réflexion auprès de décideur, faire collaborer des gens à distance sur une réflexion en cours, ou encore créer un moodboard pour collaborer avec un designer/DA.

Découvrir Realtimeboard

Milanote

Milanote ressemble un peu à l’outil Realtimeboard : il s’agit d’un canvas blanc sur lequel vous allez pouvoir agréger plusieurs types de contenu dans le but de créer un moodboard, écrire des notes ou des todo-list. Pratique pour organiser collaborativement les premières idées autour d’une solution, ou pour faire émerger des concepts.

Pour l’avoir utilisé, de simples glisser-déposer et quelques clics permettent de composer des moodboards collaboratifs vraiment pratiques pour idéer efficacement.

Découvrir Milanote

Phase de décision

Lorsque vos phases de recherche ont abouti à quelque chose de convenable pour commencer à structurer des solutions potentielles, il est temps de vous projeter sur des parcours un peu plus précis.

Uxpressia

Uxpressia

Uxpressia vous permet de créer des personas, des User Journey Maps et des Impact Maps en ligne sur des modèles préconçus laissant assez de liberté pour personnaliser l’ensemble des présentations. Visualisez, exportez et collaborez en ligne directement sur l’outil.

Je n’ai pas eu l’occasion de le tester en équipe mais les quelques fonctionnalités de base permettent de composer très rapidement des personas et User Journey Maps.

Découvrir Uxpressia

Smaply

Un peu comme Uxpressia, Smaply permet de dessiner le parcours de vos utilisateurs existants ou à venir suivant vos données ou vos résultats de recherche. Créez des personas et des Customer Journey Maps et Stakeholder Maps pour maximiser la compréhension des utilisateurs et de leurs attentes à travers toute l’équipe.

Il s’agit d’un service payant que je n’ai pas eu l’occasion de tester. Mais vous avez 14 jours d’essais, n’hésitez pas à me faire vos retours sur les commentaires si jamais vous testez.

Découvrir Smaply

Phase de test

Une fois que la phase de création est effectuée, vous allez vouloir tester assez rapidement vos théories et hypothèses grâce à des tests utilisateurs. Voici quelques outils qui peuvent vous y aider.

Lookback

Lookback est un outil de test utilisateur distant ou en présentiel. Il vous permet de filmer en simultané l’écran, les interactions de l’utilisateur ainsi que son visage pour recouper ses actions avec ses mimiques faciales. Le son également enregistré pour vous permettre de repasser les enregistrements des tests, revenir sur des points précis de la vidéo et les annoter pour y revenir plus tard.

Très pratique même en physique, fonctionne sur mobile en screencasting du mobile ou en passant par un enregistrement via Quicktime d’un téléphone connecté par exemple, pour l’avoir déjà utilisé dans les deux situations. L’interface est vraiment de qualité, je vous conseille vraiment cet outil (payant).

Découvrir Lookback

Evalyzer

Evalyzer

Evalyzer rejoint Lookback sur l’idée de proposer un moyen d’enregistrer vos tests utilisateurs en ligne et de les re-visionner plus tard. En plus de cela vous aurez la possibilité de préparer vos protocoles directement sur l’outil et partager un lien de test unique sur différents média sociaux. Je doute de l’intéret de ce genre de diffusion, mais il y a certainement des cas d’usage que je n’ai pas encore eu l’occasion d’explorer.

Un système de statistique plus ou moins automatisé vous permet ensuite de générer un rapport de test assez détaillé pour vous aider dans la prise de décision. Je n’ai pas eu l’occasion de tester l’outil car il n’est pas facile d’accès (il faut contacter le support pour y avoir accès), mais il est ressorti lors de ma recherche d’outils. J’utilise personnellement Lookback. 🙂

Découvrir Evalyzer

Appear.in

Appear.in

Appear.in est un outil de discussion entre personne un peu à la Skype mais utilisant une API HTML5 de P2P pour partager de la vidéo et son écran. Pour vulgariser il s’agit d’une version native de screensharing et partage de vidéo sur votre navigateur directement. Dans notre cas, il permet gratuitement de passer des interviews avec vos utilisateurs, voire partager l’écran pendant un test.

Il existe une version desktop mais reste disponible sous forme d’applications natives sous android et iOS. Son côté light et gratuit pour 1 room et jusqu’à 4 utilisateurs simultanés rend la solution assez intéressante pour d’autres choses que des tests utilisateurs 🙂

Découvrir Appear.in

Phase de production & qualité

Une fois que tout votre produit est réfléchi, et même souvent pendant cette réflexion et après avoir posé les premières briques et testé vos idées, il vous faut documenter et regrouper la connaissance. Il faut également la maintenir à jour pour faciliter l’onboarding de nouvelles personnes dans vos équipes.

Marvel App

MarvelApp

Marvel App permet de publier des vues (visuels graphiques) d’une application ou d’un site web et de simuler la navigation sur ce site grâce à des liens créés via Sketch (fonction prototype native) ou via directement sur l’application Marvel App. Les applications natives android et iOS permet de charger les vues et la fonction de visualisation du prototype directement sur smartphone.

La fonction d’inspection du code (Handoff) permet de transmettre des informations de styles aux développeurs (CSS) tout en naviguant dans les vues.

Une fonction de design permet de designer en live des prototypes simples, mais je ne l’ai jamais eu l’occasion de l’utiliser.

Enfin une vue « Userflows » permet de visualiser globalement le mapping d’un écran à un autre pour avoir une visualisation d’ensemble de votre processus ou vos écrans.

Découvrir MarvelApp

Invision App

Invision App

Invision permet de visualiser en ligne un ensemble de vue que vous pouvez séquencer comme vous l’entendez depuis Sketch (grâce à un plugin) ou directement depuis Invision. Depuis maintenant quelques temps vous pouvez également créer tout un système de design ainsi qu’inspecter les éléments graphiques pour en extraire des bouts de codes pour les styles graphiques. (CSS)

Invision propose également un mode « Freehand » qui permet de collaborer sur un tableau blanc pour dessiner et échanger des idées. J’ai personnellement échangé Invision pour Marvel App du fait de la prise en charge native des prototypes de Sketch par Marvel.

Découvrir Invision

Axure

Axure

Axure est un outil de prototyping très avancé, un peu vieillissant mais toujours dans l’écosystème et dont la nouvelle version va certainement apporter un peu de fraicheur : compatibilité Sketch, interface retravaillée, entre autres nouveautés.

Axure vous permet de composer des vues dynamiques et émuler le comportement d’un vrai site web pour tester les fonctionnalités et leur chorégraphie avant de les développer. Cela vous permet d’avoir un cycle de production et tests assez court.

En dehors de Axure, je vous aurais bien parlé de Atomic.io mais l’outil n’est plus disponible pour le moment. À surveiller donc.

Découvrir Axure

Nuclino

Nuclino

Nuclino est un outil permettant de faciliter la communication au sein d’une équipe en réunissant la connaissance en un seul point. Cette « knowledge base » vous permet de centraliser la documentation et les choses à savoir lorsqu’il s’agit des méthodes ou des processus dans la boîte, ou encore de la gestion d’un client, du ton à utiliser, etc.

  • Fonctionne visuellement : créer des groupement de vos connaissances,
  • Fonctionne sur tous les devices,
  • Import/export simple,
  • Outil collaboratif,
  • Recherche très puissante.

Découvrir Nuclino

Sketch

Sketch App

Je ne sais même pas si ça vaut encore le coup de le présenter. Sketch est un outil de création de prototype, wireframe et design graphique d’interface plutôt avancé. Il permet de composer vos éléments, pages et vues sur le principe de l’Atomic Design notamment grâce aux symboles : des composants réutilisables, imbricables, flexibles et dont les occurrences sont personnalisables au cas par cas.

Les styles de calque et de texte permettent aussi d’avoir une sorte de logique de styles proche de CSS, mais sans l’héritage (hélas).

Le système de prototype et de miroir vous permette de simuler l’utilisation de l’interface directement sur votre terminal mobile. Sketch Cloud permet également de profiter du « mirroring » mais à distance. Gros avantage si vous utilisez Marvel App : le système de Prototype est compatible nativement.

Découvrir Sketch

Principle

Principle

Principle est un outil pour Mac qui permet de simuler des interactions et animations pour vous aider à vous projeter dans un fonctionnement ou un autre. Le système de mirroring vous permet de passer votre prototype animé directement sur votre smartphone ou tablette.

L’outil permet aussi bien de valider une idée que de transmettre à un développeur l’interaction et l’animation attendue. En effet vous pouvez facilement régler chaque animation avec des effets de easing et un délai à ma milliseconde près.
Un des points forts de Principle est de pouvoir créer des mini interactions, comme des composants, que vous allez pouvoir réutiliser à plusieurs endroits dans un composant plus gros. Un peu comme le principe de symboles de Sketch.

Découvrir Principle

Flinto

Flinto

Flinto, encore un outil Mac-only, a exactement le même but que Principle mais va beaucoup plus loin dans la prise en charge de mouvement, d’interaction et de gestion des changements d’état. Il est cependant un peu moins rapide à prendre en main.
Si vous venez de Principle, vous allez devoir vous défaire de quelques habitudes. Les deux ont leur fonctionnement et leurs particularités, Principle peut très bien vous suffire pour de petites animations simples, Flinto vous servira pour des interactions beaucoup plus complexes je pense.

Découvrir Flinto

Analyse et amélioration continue

C’est bien de mettre en production, mais c’est encore mieux de voir comment vos utilisateurs se servent de l’interface que vous leur mettez à disposition. Pour ça il faut analyser les changements que vous faites continuellement.

Hotjar

Hotjar

Hotjar est un outil assez puissant vous permettant plusieurs choses :

  • Enregistrer des sessions de tracking visuel de vos utilisateurs (vidéo), très pratique pour comprendre ce que vos utilisateurs font sur l’interface et où ils abandonnent,
  • Récupérer des heatmaps pour comprendre des comportements plus globaux,
  • Analyser des tunnels de conversion et les comportements sur vos formulaires pour comprendre ce qui coince.

Globalement ces outils vous permettrons de comprendre le comportement de vos utilisateurs sur différents terminaux (prise en charge du responsive) avec des données qualitatives.

Découvrir Hotjar

Ressources pour monter en compétences

Dans la liste des outils qui m’ont été utiles, il y a ceux qui m’ont permis de monter en compétence par moi-même.

  • UX Tools – Vous propose une liste d’outils communs pour travailler au quotidien en UX/UI avec un comparatif des fonctionnalités et prix pour chacun. Vraiment pratique pour sélectionner vos prochains outils selon vos propres critères.
  • 18F Methods – Vous propose une liste de méthodes utilisables pour chaque étape de votre recherche et analyse. Vraiment pratique pour vous aider à utiliser la bonne, au bon moment avec une aide à la mise en place.
  • User Research Service Manual – Un « manuel d’utilisation » de la recherche utilisateur. Un manuel détaillé partant de l’explication de l’intérêt de la recherche utilisateur, à comment la mettre en place pour finir par l’analyse et le partage des résultats.
  • Laws of UX – Quelques lois ergonomiques vous permettant de mieux comprendre le fonctionnement du cerveau humain, mais également d’avoir des arguments scientifiques pour justifier vos décisions. J’aime rappeler aux parties prenantes que je ne fais pas que colorer des prototypes et que le design c’est aussi de la science.

Voilà, je ne vous partagerai pas encore mes méthodes parce qu’elles sont loin d’être suffisamment exercées, mais peut-être prochainement un bout du workflow que nous avons dans mon équipe actuelle.

N’hésitez pas à partager vos outils également 🙂

The post Les outils pour UX/UI Designer first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ressources-telechargements/outils-ui-ux-designer-collaboratifs/feed 5
Améliorer la performance : entre réalité et ressenti https://www.creativejuiz.fr/blog/tutoriels/ameliorer-performance-entre-realite-ressenti-paris-web https://www.creativejuiz.fr/blog/tutoriels/ameliorer-performance-entre-realite-ressenti-paris-web#respond Fri, 13 Oct 2017 07:40:23 +0000 https://www.creativejuiz.fr/blog?p=6358 The post Améliorer la performance : entre réalité et ressenti first appeared on Creative Juiz.

La semaine dernière j’ai eu l’occasion de donner une conférence lors de l’événement Paris Web. Il s’agissait de ma première intervention en solo sur une thématique que je n’ai pas l’habitude d’aborder même à l’écrit : l’expérience utilisateur avec comme sujet la performance ressentie. Voici un transcript de la conférence donnée. La vidéo de la conférence […]

The post Améliorer la performance : entre réalité et ressenti first appeared on Creative Juiz.

]]>
The post Améliorer la performance : entre réalité et ressenti first appeared on Creative Juiz.

La semaine dernière j’ai eu l’occasion de donner une conférence lors de l’événement Paris Web. Il s’agissait de ma première intervention en solo sur une thématique que je n’ai pas l’habitude d’aborder même à l’écrit : l’expérience utilisateur avec comme sujet la performance ressentie. Voici un transcript de la conférence donnée.

La vidéo de la conférence

J’ai tenté de retranscrire de tête mes propos en complétant quelque peu dans cet article. Vidéo et article sont donc complémentaires.

Pourquoi parler de performance ?

Il est évident que nous n’avons pas tous la même définition de performance, il est donc important de définir quelques notions et termes, mais aussi des objectifs, dont un principal : la satisfaction de l’utilisateur·rice.

Les utilisateur·rice·s n’attendent pas

Les études montrent que 53% des utilisateur·rice·s abandonnent un site qui met plus de 3 secondes à se charger sur mobile. En sachant que le temps moyen de chargement d’un site web en 3G est de 19 secondes, cela ne laisse que peut de chance à vos visiteurs de finir (voire commencer) leur navigation sur mobile. (source: Soasta)

Les utilisateur·rice·s attendent de moins en moins

La durée moyenne d’attention passe de 12 secondes (en 2000) à 8.25 secondes (en 2015). La baisse est vraiment importante en site peu d’années entre la première prise de mesure et 2015. Pour l’anecdote c’est une seconde de moins que la durée d’attention d’un poisson rouge. (source : StaticBrain)

Cette information nous permet quand même d’estimer la perte d’attention de l’utilisateur·rice (voire l’utilisateur·rice lui·elle-même) alors qu’il n’est pas encore arrivé à 10s d’attente.

La notion de temps

Le temps est certainement l’une des dimensions les plus difficiles à appréhender. Il ne s’agit pas juste de la mesure (et encore même là c’est compliqué), mais aussi d’un ressenti.

Il existe plusieurs temps

Le temps objectif est celui qui est mesurable grâce à une montre. C’est la durée d’une action, d’un chargement de page, c’est les secondes écoulées encore un début et une fin.

Le temps psychologique ou également le temps ressenti est plus difficilement mesurable et va dépendre de plusieurs paramètres liés au contexte et à la personne.

Les deux peuvent servir dans le cadre de la performance, mais nous allons surtout aborder le deuxième.

Les durées psychologiques

Plusieurs études croisées ont permis de définir des intervalles de temps approximatifs qui permettent de classer les délai suivant des ressentis.

  • de 0,1 à 0,2s : aucun délai n’est ressenti par la personne, c’est le bon interval pour placer des animations très courtes qui donnent une impression de fluidité dans les transitions.
  • de 0,5 à 1s : il s’agit d’un délai immédiat proche d’une réponse d’humain à humain, un échange rapide où aucun indice ne laisse à penser qu’il y a une attente.
  • de 2 à 5s : c’est le délai optimal pour une tâche, une activité, dont on attend une réponse. Le sentiment qu’une action à eu lieu et que l’attente aura été raisonnable.
  • de 5 à 10s : c’est la durée maximale d’attention d’un utilisateur·rice pour une tâche donnée.

Perception non linéaire

Cette semaine est passée super vite, je n’ai pas vu le temps filer. —Quelqu’un, parfois.

La perception du temps n’est pas linéaire, dans le sens où un même temps objectif peut avoir un temps psychologique complètement différent.
Ce ressenti du temps qui passe dépend de plusieurs paramètres comme :

  • Le type et la complexité de la tâche : au plus la tâche en elle-même est complexe, au plus l’utilisateur·rice va prendre du temps pour la faire, mais également y porter beaucoup d’attention et possiblement ne pas voir le temps qui passe.
  • L’expérience de la personne sur des tâches similaires : lorsque la personne est habituée à une tâche proche de celle qu’il accomplit, il l’a fait plus rapide, mais peut également en perdre l’envie et la motivation et avoir le sentiment de s’ennuyer.
  • La disposition de la personne : le stress, la fatigue, l’âge peuvent également être des facteurs.

Comment améliorer la perception de l’attente ?

On va pouvoir jouer sur différents leviers :

  • La stimulation : ce sont les indices qui rappellent l’attente à l’utilisateur·rice, comme par exemple une animation cyclique, une interface qui fige, etc.
  • La durée : la vraie durée d’une action, ou celle ressentie.
  • L’attention : l’occupation du cerveau à une tâche (la principale) ou à une autre (un détournement).

Pour cela on va manipuler la personne à plusieurs niveaux, notamment sur le temps objectif en optimisant réellement le temps de chargement, sur les indicateurs de l’attente en fournissant un indicateur adapté au type d’attente, sur le détournement de l’attention de l’utilisateur·rice grâce à quelques feintes, et enfin sur mon préféré : un simple mensonge. :p

Ce que vous avez déjà fait

J’espère que c’est le cas, car le but n’est pas de trainer sur l’aspect technique.

La solution serveur (à jour)

Nginx, Apache… testez et retenez le meilleur pour vos besoins. Nginx par exemple est meilleur (2 fois plus rapide qu’Apache) pour servir des documents statiques là où Apache et Nginx s’équivalent sur l’aspect dynamique.

Le fait de conserver votre solution (système) à jour vous permet aussi de rester performant. Des mises à jour de sécurité sont souvent disponibles avec les mises à jour de performance. Un site hacké offline n’a plus vraiment besoin d’être performant finalement…
PHP7 par exemple est presque 2 fois plus performant que PHP 5.6 (sa version précédente). Apache entre sa version 2.2 et 2.4 est environ 40% plus performant.

Rien qu’en maintenant votre système à jour vous pouvez gagner de précieuses secondes.

La mise en cache

On en parle mais il y a encore pas mal de sites web qui tournent sans solution de mise en cache. Je parle de deux caches différents : le cache serveur et le cache navigateur.

  • Le cache serveur : Évite à votre machine de refaire les calculs en créant des fichiers statiques régénérés régulièrement.
  • Le cache navigateur : Stocke des fichiers dans le navigateur client pour les servir plus rapidement puisqu’ils sont stockés localement.

Les deux combinés vous permettront de gagner énormément de temps de chargement.

Retirez les publicités

Les publicités et scripts de réseaux sociaux sont parfois les plus lourdes ressources d’une page. Trouvez une alternative, retirez-les. Cela peut paraître radical, mais si vous dépendez entièrement de la publicité, peut-être qu’il est temps de trouver une alternative à votre business-model.

Dareboost, l’outil de mesure de performance de votre site web vous propose de faire des mesures comparatives avec et sans ces ressources, vous devriez essayer, cela pourrait vous faire voir la performance d’un autre œil.

Pensez à votre Progressive Web App

Profiter des avantages des Service Workers pour bénéficier d’aspects comme :

  • Offline / Connexion bas débit : permet d’accéder à des ressources même hors-ligne. Les informations sont alors mises à jour dès qu’une connexion est trouvée et peuvent l’être au compte-gouttes.
  • Rapidité : une partie des fichiers étant stockée sur la machine de l’utilisateur·rice, la web app est chargée quasiment instantanément.

Mais sans oublier…

Parce qu’on ne peut pas tout voir là maintenant ensemble, pensez aussi à :

  • HTTP/2,
  • CSS Critical Path,
  • local/sessionStorage,
  • Optimiser vos bases de données,
  • Optimiser vos images (formats, compression),
  • Minifier et concaténer CSS et JS
  • CDN Géolocalisé
  • etc.

Les réponses immédiates

L’interface doit faire ressortir les réponses immédiates. Ce sont les réponses que l’utilisateur·rice attend au survol, focus ou activation d’un élément par exemple, ou encore lors d’une action instantanée traitée en JS sans forcément avoir besoin d’une réponse serveur.

Proposez un changement d’état visuel permet de confirmer auprès de la personne que l’action s’est bien déroulée. Comme par exemple sur cette copie de clé dans l’interface web de SecuPress.

Pour cet exemple précis, il y a un tutoriel sur ce blog pour créer un « copy to clipboard » en JS avec une jolie animation.

Faire patienter l’utilisateur·rice

Pour faire patienter un utilisateur·rice, rien de mieux que de lui indiquer qu’une action est en cours par un indice visuel, notamment s’il doit attendre entre une et plusieurs secondes.

Il existe plusieurs manières de procéder pour faire patienter une personne, plusieurs indices visuels qui n’expriment pas la même chose.

  • Le spinner : Ce petit truc qui tourne indéfiniment, idéal pour les courtes attente.
  • La barre de chargement : Qui propose un début et une fin, idéal pour les durées définies.
  • Les faux contenus : Pour aider à la projection et la découverte de l’interface.
  • Les mots : Pour expliciter le pourquoi du comment, sous la forme de phrases claires.

Le spinner

Pratique pour une attente courte, par exemple lorsqu’un traitement d’une information dure entre 2 et 8 secondes. En dessous de 2 secondes vous risquez de provoquer la sensation e bug visuel : votre spinner se met en place, l’utilisateur·rice commence à calculer qu’il est censé attendre puis pouf ! Le spinner disparait rapidement. Si votre traitement dure moins de 2 secondes, proposez également un visuel pour la fin de traitement, affiché plus longtemps, comme le fait Stripe lors du processus de paiement.

N’oubliez pas qu’un indicateur doit être placé proche de la zone activée par l’utilisateur·rice pour que sa découverte soit facilité.

N’hésitez pas également à être originaux sur l’aspect de vos spinners. En effet cela vous permet d’intégrer les moments d’attente à votre identité graphique : animation du logo ou d’un élément de la charte. Cela permet de créer des boucles animées un poil plus longue, délecter l’utilisateur·rice si l’animation est sympa et augmenter sa capacité d’attente et sa satisfaction.

Si la situation vous le permet, ajoutez un brin d’humour ou de « kawai », comme par exemple cette petite collection de chats :p

La barre de chargement

Pour une attente quantifiable moyenne, c’est l’indicateur idéal. En effet, la barre de chargement propose un début et une fin de tâche définis par sa section complète et la jauge interne qui évolue. Cela permet à l’utilisateur·rice d’estimer le temps restant pour lui permettre de faire autre chose en attendant, ou d’estimer si l’attente vaut le coup.

Des recherches ont permis de suggérer que l’accélération en fin de chargement de la barre provoqué un sentiment positif, puisque celle-ci fini par proposer un processus plus rapide qu’estimé initialement.

De la même manière, une animation de défilement inversé dans la jauge elle-même provoquerait une sensation de vitesse positive.

Sur-optimisation ou pas, ces études sont à prendre en compte dans le ressenti de vos utilisateur·rice·s. Faites vos tests 😉

Les faux contenus

Les faux contenus, nommés aussi placeholder permettent de mettre en place l’interface petit à petit et de projeter l’utilisateur·rice dans ce qu’elle sera une fois entièrement chargée. Animés, ces faux contenus peuvent permettre de faire patienter l’utilisateur·rice tout en le faisant passer en phase de découverte préalable de l’interface, ce qui facilitera grandement sa progression dans celle-ci une fois tous les éléments chargés.

Vous pouvez utiliser ces faux contenus pour l’ensemble de l’interface, ou pour les éléments secondaires par exemple, laissant ainsi la priorité aux contenus principaux pour se charger.

Paroles, les Paroles…

Et parfois, ajouter simplement une information claire avec des mots, des phrases, peut largement arranger votre affaire. Cela peut sembler bête dit ainsi, mais ça rassurer et souvent les designers l’oublient.

Vous pouvez par exemple expliquer le processus en cours, donner les étapes accomplies du processus, faire un décompte des tâches restantes, etc. Donner cette lecture à l’utilisateur·rice le met dans une position d’attente active, au lieu de rester passif. Je vais vous expliquer ça.

Détourner l’attention de l’attente

Quand l’utilisateur·rice est occupé à une autre tâche que celle de l’attente il passe d’attente passive à active. Son cerveau est occupé sur autre chose que les indicateurs de l’attente, il a l’impression que le temps passe plus rapidement.

Cette activité proposée à la personne peut être ludique ou utile, selon vos envies ou vos besoins.

Proposer de la lecture

Vous pouvez par exemple donner de la lecture en offrant aux utilisateur·rice·s les news de votre blog, des astuces sur l’interface, raconter une anecdote ou blague.

Ce screenshot de HearthStone pendant la mise en place du jeu propose plusieurs textes : de l’humour, une astuce sur le jeu ou l’interface, et le temps d’attente estimé avant le début de la partie.

Proposer une activité

Proposer une activité utile ou ludique à l’utilisateur·rice est encore un bon moyen de détourner son attention. Par exemple sur Youtube, lorsque vous envoyez une vidéo, l’interface propose d’afficher le temps d’attente avec plusieurs indicateurs, mais vous invite également à renseigner une foule d’informations sur votre vidéo, vous faisant passer à une tâche utile le temps du chargement de la vidéo.

Autre cas, celui d’un compte utilisateur·rice à valider par un administrateur. Imaginons qu’un utilisateur·rice vienne de s’inscrire sur votre site et que tous les comptes soient validé manuellement. Pendant l’attente de sa validation, laissez à l’utilisateur·rice la possibilité de compléter son profil, ne le bloquez pas. D’autant plus qu’il vous est impossible ici de lui fournir un indicateur d’attente. Sur un projet sur lequel je travaille actuellement, voici ce que nous avons proposé comme message.

Une autre activité distrayante est la possibilité d’échanger avec une communauté. Je reprends un exemple dans le monde du vidéoludique car les interfaces sont souvent assez bien travaillées lorsque le jeu est abouti. Sur League Of Legend par exemple, lors de la sélection des champions, plusieurs indicateurs d’attente sont en place (autour des avatars des champions un spinner tourne), un décompte du temps restant figure en haut de l’écran, et une fenêtre de discussion est disponible en bas à gauche, en plus de votre tâche de sélection de champion. De quoi faire patienter un peu le temps que le jeu se mette en place.

Mentir sur le temps d’attente

J’aime bien cet aspect, mais pour le bien de votre visiteur. En effet, il n’a pas besoin de toujours tout savoir sur les processus et le moteur présent sous le capot (sous l’interface).

Fake It Until You Make It

C’est l’idée de la positive attitude : partir du principe que dans 95 ou 99% des cas votre système va répondre positivement (succès) à votre utilisateur·rice. Vous déclenchez donc au plus tôt une réponse positive sur votre interface grâce à un indice visuel. Puis si jamais dans les 1% des cas restants vous devez intervenir, affichez un message d’erreur pour alerter l’utilisateur·rice. Ainsi votre application/site web paraitra performant dans 99% des cas.

C’est ce que fait Twitter lors d’une action de like (anciennement mise en favori).

À gauche dans la vidéo, la fenêtre d’un tweet sur laquelle je vais faire un like. Vous voyez d’abord le coeur réagir. A droite, sur la vue Network, on voit à quel moment la réponse serveur est faite. À ce moment seulement le chiffre du nombre de like est incrémenté.

Mensonge par omission


C’est un peu ce que fait Instagram également.

Le principe est de ne pas tout vous dire sur le processus en cours et de le cacher en tâche de fond. Lorsque vous chargez une image sur Instagram, pendant la phase où vous renseignez votre description de photo, la photo est chargée en tâche de fond. Lorsque vous publiez cette photo, elle l’est instantanément car elle a eu le temps de se charger sur les serveurs du site.

Si la photo n’est toujours pas chargée, l’interface s’affiche quand même avec une photo floue et un loader dessus, comme sur l’image de gauche ici, permettant de faire patienter l’utilisateur·rice.

C’est également ce que nous avons entrepris lors du travail sur Imagify. Lorsque l’utilisateur·rice embarque le plugin pour la première fois sur son site web, il est invité à suivre un processus d’inscription et paramétrage en 3 étapes. Pendant ce processus, nous lançons un travail de calcul dans la bibliothèque des médias de WordPress afin de connaître ses habitudes de consommation en mega octets. Ainsi lorsqu’il arrive sur la page de réglage du plugin, s’il souhaite ajuster son offre, nous lui proposons rapidement une offre adaptée à ses besoins et l’informons même si la version gratuite lui suffit.

Ici sur la partie haute de l’écran, les chiffres affichés on été calculés en tâche de fond.

Du contenu à la demande

Une bonne technique pour ne pas faire attendre l’utilisateur·rice pour le contenu principal, c’est de charger le contenu secondaire ou plus bas dans la page uniquement quand c’est nécessaire. La technique du Lazyload permet de faire ça pour les images, les iframes ou d’autres composants de votre page.

C’est ce que fait Medium par exemple pour ses images, en proposant une version floue basse qualité de l’image pour commencer à la mettre en place dans la page, puis en affichant la version complètement une fois chargée.
C’est également ce que fait Netflix. C’est le principe de la Early Completion : commencez avec un chargement rapide et court, et proposez un début de contenu, pendant ce temps Netflix s’occupe de charger le reste de la vidéo. La plupart des solutions de service vidéo en ligne propose ce principe.

Netflix va plus loin puisqu’il arrive en général à ne pas vous couper le bénéfice du service lorsque votre connexion flanche. En effet la vidéo va baisser en qualité pendant un moment le temps que votre connexion reprenne du poil de la bête. Une fois fait, la vidéo repasse en pleine qualité.

Cacher derrière une animation

Une autre manière de cacher un peu la poussière sous le tapis c’est de cacher un processus derrière une animation pour gagner quelques centièmes de secondes et même quelques secondes parfois. Par exemple, votre utilisateur·rice clique sur un lien dans votre application, une vidéo doit s’afficher et se jouer. Entre le moment du clic et le moment où la vidéo va se lancer, effectuez une animation vers cette vidéo, puis des éléments de l’interface de lecture, le temps de gagner 1 à 2s pour pré-charger les premières secondes de vidéo.

Et si on prenait notre temps ?

Parfois, il faut savoir prendre son temps. J’aime raconter l’anecdote du restaurant. Elle est courte, vous verrez.
Vous commandez un plat dans un restaurant, 4 min après vous êtes servi. Ok, il y a un souci, on est d’accord ? 4 minutes pour préparer un plat ce n’est plus signe de performance, mais plutôt de mauvaise qualité (cuisine au micro-onde, plat pré-pérarer)

En parlant de qualité, que penseriez-vous d’un plugin de sécurité pour votre site WordPress qui vous proposerez un résultat de scan et des résolutions de problème en 1 étapes et en moins de 10 secondes ? Performant ? Peu qualitatif ? C’est un peu la question que nous nous sommes posée lors de notre travail sur le plugin SecuPress. Prendre son temps, diviser les interventions de l’utilisateur·rice en 4 étapes, prendre du temps à expliquer ce qui va être fait et pourquoi, permet de restaurer la confiance et donner de la plus value à un achat immatériel (SecuPress ayant une version grauite et payante).

Ci-dessous la phase de scan (accélérée pour la démo).

Comme vous le voyez pendant l’attente, nous avons une barre de progression, le bout de la barre clignote pour informer de la tâche en cours. Un pourcentage et affiché ainsi qu’un compte des points de sécurité scannés.

Ci-dessous la deuxième étape d’un processus actif de 3 étapes, la 4ème étant un compte rendu.

Lâchons le chronomètre

Et si au lieu de faire gagner du temps à l’utilisateur·rice, nous travaillions à ne pas lui en faire perdre.

Soyez prévoyant·e·s

Imaginez que vous soyez en train de remplir un formulaire, puis votre navigateur freeze. Vous êtes obligé de le redémarrer, à moins qu’il ne crash comme un grand. Vous revenez sur la page en redémarrant le navigateur (qui propose de vous rouvrir vos onglets j’espère). Le formulaire est vide, il vous faut tout recommencer :/
Ok, si vous aviez pensé à utiliser localStorage pour stocker temporairement les informations renseignées localement sur la machine de l’utilisateur·rice, vous auriez pu pré-remplir les champs, en informant l’utilisateur·rice de ce fonctionnement pour éviter de le surprendre.

C’est ce que nous avons fait avec mon frère lors d’un projet pour un client : le médecin remplit un compte rendu pour un patient, si son navigateur crash, nous lui proposons de le restaurer, car un compte rendu ça peut être très long à rédiger.

Le médecin à alors le choix entre restaurer son compte rendu, ou conserver l’actuel (qu’il peut comparer plus bas dans l’interface). Il a toujours le choix, rien n’est imposé.

Ne demander que l’indispensable

Les formulaires sont un point noir dans les sites web, sur desktop et encore plus sur mobile. Par exemple lorsque vous demandez à un utilisateur·rice d’entrer ses informations de paiement, c’est une étape critique, demandez-lui le moins de choses possible (on peut même scanner une carte aujourd’hui… pourquoi pas).

La détection du type de carte peut être faite automatiquement grace aux premiers numéros. Profitez-en pour ne pas avoir à lui demander cette information et la détecter.

Pour information, 35% des abandons du processus de commande ont lieu car un compte est nécessaire pour passer commande, 27% des abandons sont dus a un trop grand nombre de de champs à remplir. C’est énorme, il faut faire gagner du temps à l’utilisateur·rice ici.

Amazon va même plus loin en vous proposant d’enregistrer vos cartes bancaires dans son service. D’autres services le proposent, mais Amazon va plus loin en ne vous demandant plus aucune autre information pour passer commande.

Sur la photo ci-contre, j’ai fait un achat « en 1 clic » sur mobile, Acheter > Swipe sur le bouton jaune et c’est fini.

Vous n’êtes pas obligés de vous limiter uniquement aux données bancaires, mais à toute forme de données qui pourraient être stockées de manière sécurisée et réutilisées au bon endroit au bon moment. Bien sûr, prenez toujours le temps d’en informer l’utilisateur·rice et ne le faites jamais dans son dos lorsqu’il s’agit de données sensibles.

Proposez une alternative

Quoiqu’il arrive, si un processus risque de s’éterniser, proposez toujours une alternative à l’utilisateur·rice. WebPageTest, le service de test de performance de page web propose de mettre en queue un processus d’analyse et de revenir plus tard sur votre page (qui a un identifiant unique). Vous pouvez même fermer le navigateur et revenir plus tard, votre résultat sera proposé une fois le processus terminé.

Une autre solution peut simpler être de proposer une annulation du processus en cours, ou une pause dans le processus, si vous le pouvez. Le choix offert à l’utilisateur·rice lui donnera meilleure satisfaction, surtout s’il s’agit d’une porte de sortie.

Quelques ressources

Pas mal de ressources m’ont servi pour la composition de ma conférence et de cet article, en voici quelques unes.

Slides de la conférence

Les slides de la conférence sont disponibles en PDF, sur Slideshare ou sur Speakerdeck suivant votre préférence, mais les animations proposées sur la keynote originale ne seront pas disponibles.

N’hésitez pas si vous avez des questions, l’espace de commentaires est là pour ça.

The post Améliorer la performance : entre réalité et ressenti first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/tutoriels/ameliorer-performance-entre-realite-ressenti-paris-web/feed 0
Design Tactile de Josh Clark https://www.creativejuiz.fr/blog/conseil-critique-livre/design-tactile-de-josh-clark https://www.creativejuiz.fr/blog/conseil-critique-livre/design-tactile-de-josh-clark#respond Mon, 13 Jun 2016 11:37:35 +0000 https://www.creativejuiz.fr/blog/?p=5883 The post Design Tactile de Josh Clark first appeared on Creative Juiz.

J’ai eu la chance de lire la version Française de Designing for touch de l’excellent Josh Clark : Design Tactile, des éditions A Book Apart traduit par Eyrolles. (Charles Robert) Le numéro 14 des A Book Apart se concentre sur les problématiques rencontrées par les designers (et intégrateurs également) sur les terminaux tactiles. Le livre […]

The post Design Tactile de Josh Clark first appeared on Creative Juiz.

]]>
The post Design Tactile de Josh Clark first appeared on Creative Juiz.

J’ai eu la chance de lire la version Française de Designing for touch de l’excellent Josh Clark : Design Tactile, des éditions A Book Apart traduit par Eyrolles. (Charles Robert) Le numéro 14 des A Book Apart se concentre sur les problématiques rencontrées par les designers (et intégrateurs également) sur les terminaux tactiles.

Le livre n’aborde pas uniquement l’aspect web, il n’aborde pas non plus uniquement l’aspect application native, mais tente de recouper les deux à travers une vision large des terminaux tactiles et hybrides à notre disposition.

L’auteur

Josh Clark est le fondateur de Big Medium, agence de design spécialisé dans les objets connectés, l’expérience mobile et le responsive web design, et qui offre ses services aux entreprises les plus innovantes. Josh a écrit quatre autres livres, notamment Tapworthy: Designing Gret iPhone Apps (O’Reilly, 2010) et donne des conférences sur le futur des interfaces numériques dans le monde entier. En 1996, Josh a créé un type d’interface utilisateur unique : le programme d’entraînement Couch-to-5K (C25K), qui a aidé des millions d’allergiques au sport à se mettre au jogging. (Sa devise est la même pour le fitness que pour l’UX : no pain, no pain)

Le Livre

Comme pour les bons films, je ne vais pas vous spoiler le contenu de ce bouquin, mais sachez qu’il est vraiment bon et que j’ai été très agréablement surpris par la qualité de son contenu.

Connaissant Josh Clark pour la précision et la qualité de son travail et de ses études, je m’attendais à un contenu intéressant, certes, mais j’ai trouvé des choses qui ont carrément contredites mes pensées et mes préjugés sur certains comportements des utilisateurs. Je me trompais, sans être complètement dans le faux, je n’étais pas pour autant suffisamment dans le vrai. Vrai qui évolue en plus en fonction du type d’interface et de public.

En effet, au sein de cet ouvrage, vous découvrirez entre autres des répartitions intéressantes des comportements des utilisateurs en fonction des terminaux qu’ils ont en main(s), et parfois même des totales incompatibilités des solutions dites « tactiles » entre un format smartphone et un format tablette, ou encore ordinateur portable tactile. (oui parce qu’il faut aussi penser à ces derniers !)

Sans s’arrêter uniquement aux usages, Josh prend le temps également de vous donner des exemples et contre-exemples sur des sites web qui ont réussi à apporter des solutions à leurs problèmes ergonomiques, tactiles ou non.
Il prend également le temps de faire un crochet du côté de la technique (JavaScript notamment) afin de vous donner les bonnes bases de recherche pour créer des scripts efficaces et cohérent par rapport à certains besoins ergonomiques.

Enfin, ce bouquin est riche en ressources disponibles en ligne, avec des articles complémentaires, des scripts qui peuvent vous sauver du temps de développement, etc.

Je vous ai fait un avis de lecture propre intégré directement au contenu que vous trouverez dans ce bouquin. Si vous avez des questions n’hésitez pas à me laisser un petit commentaire. Voici également deux liens vers des boutiques proposant ce livre.

Design Tactile chez Amazon Design Tactile chez Eyrolles

Très bonne lecture à vous !

The post Design Tactile de Josh Clark first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/conseil-critique-livre/design-tactile-de-josh-clark/feed 0