Creative Juiz https://www.creativejuiz.fr/blog Tutoriels HTML5, CSS3, JavaScript, WordPress Mon, 26 Oct 2020 17:42:22 +0000 fr-FR hourly 1 https://wordpress.org/?v=5.5.1 PWA – Ajouter des raccourcis d’application https://www.creativejuiz.fr/blog/tutoriels/pwa-ajouter-raccourcis-application-longtouch https://www.creativejuiz.fr/blog/tutoriels/pwa-ajouter-raccourcis-application-longtouch#respond Sun, 25 Oct 2020 13:06:06 +0000 https://www.creativejuiz.fr/blog?p=7545 The post PWA - Ajouter des raccourcis d'application first appeared on Creative Juiz.

Il vous est certainement déjà arrivé d’utiliser ces raccourcis disponibles au « force touch » ou « long touch » sur vos icônes d’application mobile ? C’est une manière d’accéder à des raccourcis à l’intérieur de votre application afin d’accéder rapidement à une section, ou entamer directement une action plus précise. Il est désormais possible de le faire pour […]

The post PWA - Ajouter des raccourcis d'application first appeared on Creative Juiz.

]]>
The post PWA - Ajouter des raccourcis d'application first appeared on Creative Juiz.

Il vous est certainement déjà arrivé d’utiliser ces raccourcis disponibles au « force touch » ou « long touch » sur vos icônes d’application mobile ? C’est une manière d’accéder à des raccourcis à l’intérieur de votre application afin d’accéder rapidement à une section, ou entamer directement une action plus précise. Il est désormais possible de le faire pour vos Progressive Web App (PWA).

Attention ! À l’heure d’écriture de ces lignes, cette fonctionnalité n’est pas encore fonctionnelle sur tous les navigateurs. Seule la version 86+ de Chrome Android, et Edge semble embarquer cette fonctionnalité.

À quoi ressemblent les PWA Shortcuts ?

Les PWA Shortcuts, ou raccourcis d’application web progressive, sont un bon moyen de permettre un accès rapide à quelques fonctions bien définies de votre Progressive Web App.
J’ai travaillé dessus encore récemment pour un petit site web d’un plugin WordPress de boutons de partage afin d’effectuer quelques tests. J’y ai implémenté 2 raccourcis dont voici l’aspect en image et vidéo.

Voici deux vidéos des PWA Shortcuts en action, l’une lorsque vous actionnez un des raccourcis, l’autre qui vous montre que des PWA Shortcuts fonctionnent comme les versions natives des applications : vous pouvez les mettre en page d’accueil de votre téléphone, et elles peuvent même posséder leurs propres icônes.

Comment créer un PWA Shortcut ?

La création d’un raccourci pour une Progressive Web App se fait via le manifest.json (ou site.webmanifest) qui déclare déjà plusieurs éléments essentiels pour votre application web, comme par exemple : le nom de l’application, sa couleur de thèmes, des screenshots, la notion de start_url, etc.

Webmanifest pour créer un raccourci PWA

Dans cette liste, il faut donc ajouter la notion de shortcuts, si vous en ressentez le besoin pour vos utilisateur·rice·s, bien entendu.

{
    "name": "Nobs - Share Buttons",
    "short_name": "Nobs",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        }
    ],
    "theme_color": "#067FA5",
    "background_color": "#ffffff",
    "display": "standalone",
    "start_url": "https://sharebuttons.social/",
    "url" : "https://sharebuttons.social",
    "lang": "English",
    "screenshots" : [
        {
            "src": "/assets/img/screenshot-1.jpg",
            "sizes": "1280x800",
            "type": "image/jpg"
        },
        {
            "src": "/assets/img/screenshot-2.jpg",
            "sizes": "1280x800",
            "type": "image/jpg"
        }
    ],
    "categories" : [
        "navigation",
        "lifestyle",
        "personalization",
        "productivity",
        "social",
        "utilities"
    ],
    "shortcuts": [
        {
            "name": "Features", 
            "description": "A list of plugin features.",
            "url": "/features.html",
            "icons": [
                {
                    "src": "/assets/img/picto-feat.png",
                    "type": "image/png",
                    "purpose": "any"
                }
            ]
        },
        {
            "name": "Pricing", 
            "description": "The plugin offers",
            "url": "/free-plugin.html",
            "icons": [
                {
                    "src": "/assets/img/picto-price.png",
                    "type": "image/png",
                    "purpose": "any"
                }
            ]
        }
    ] 
}
Nobs - Social Share Buttons .webmanifest file

Comme vous pouvez le voir sur les lignes de code surlignées dans ce fichier extrait du site dont je vous parlais en début d’article, il s’agit d’un tableau au format JSON vous permettant de lister les raccourcis que vous souhaitez déclarer. Vous y retrouvez, pour chaque item :

  • name : le label texte apparaissant sur le raccourci lui-même il doit être court et utiliser un verbe d’action s’il permet de créer quelque chose ou effectuer une action dans l’application.
  • shortname : c’est optionnel, mais le shortname peut être un nom raccourci de votre action name, utilisé s’il n’y a pas assez de place pour afficher ce premier.
  • description : un texte pouvant être utilisé comme information complémentaire par certains clients. (pas encore constaté, probablement une infobulle plus tard sur desktop)
  • url : la base du web, mais aussi la base de votre action sur l’application. Vous pouvez proposer une URL avec des paramètres ici. Toute structure d’URL valide est acceptée à ma connaissance.
  • icons : un tableau d’icônes servant à représenter l’action à produire. Chaque icône propose un ensemble de propriétés à déclarer également :
    • src : le chemin vers votre icône,
    • type : le type MIME de votre image (image/png, image/jpeg, image/svg+xml, etc.)
    • purpose : la manière dont le navigateur doit traiter l’icône. Il existe 3 valeurs aujourd’hui, la défaut étant any, il existe également maskable et monochrome. (W3C Documentation)

Design des icônes PWA Shortcut

Les icônes de raccourci peuvent être très simple : proposer exactement la même que celle ce votre application. Cependant, je vous conseille de créer une icône différente par action, tout en prenant en compte les aspects suivants :

  • clarté : l’icône doit être suffisamment compréhensible, même si le raccourci est associé à un texte, essayez d’avoir une icône explicite qui l’accompagne.
  • dark mode : n’oubliez pas que l’icône est insérée dans l’interface de l’utilisateur (le cadre qui supporte les raccourcis), ce cadre peut être personnalisé en couleur, souvent soit clair (blanc) soit foncé (noir ou gris très foncé) suivant les préférences light ou dark mode. Le mieux est d’insérer votre icône dans un conteneur coloré dont vous en déciderez la couleur de base.
  • monochrome : même si Safari ne supporte pas encore ce format, il utilise beaucoup le monochrome pour créer des « éléments épinglés ». Pensez donc à faire une version avec 1 unique couleur de votre icône.
Light & Dark mode

J’ai personnellement choisi une forme ronde pour ces icônes, tout en adoptant exactement les mêmes couleurs que l’icône de l’application.

Limitations techniques et conceptuelles des PWA Shortcuts

Les raccourcis viennent avec quelques contraintes, pas uniquement technique, qu’il vaut mieux garder en tête pour éviter d’en abuser.

Rester dans le scope

Pour des raisons de sécurité, l’ensemble des actions et raccourcis doivent se faire dans le scope de l’application. J’avais par exemple tenté de faire un accès direct à mon compte Twitter pour ce fameux plugin, de la sorte.

{
    "name": "Nobs on Twitter", 
    "description": "Our Twitter account.",
    "url": "https://twitter.com/wpsharebuttons",
    "icons": [
        {
            "src": "/assets/img/picto-twitter.png",
            "type": "image/png",
            "purpose": "any"
        }
    ]
}
Tentative de lien vers Twitter

Mais bien sûr, ça ne fonctionne pas 😜

Éviter de mettre des PWA Shortcuts partout

D’un point de vue design, ne pensez pas mettre des raccourcis juste parce que c’est techniquement possible. Dans un premier temps, commencez par vous demander si vous utilisateur·rice·s en ont vraiment besoin.

Je n’ai pas de réponse toute faite pour vous, il vous faudra mener votre propre enquête, notamment grâce à l’aide d’un UX Designer ou Product Designer. Mais dans un premier temps, si vous avez déjà des statistiques de visite sur votre outil, prenez le temps d’analyser :

  • les pages les plus visitées lors d’une première ouverture sur site/app (landing pages)
  • vérifier les actions de création (ouverture d’une action vierge) les plus fréquentes
  • limitez vous à 3 items maximum, au-delà, la prise de décision va être plus difficile et la clarté des actions proposées va en prendre un coup.

Cela devrait vous donner des pistes de réflexion pour ces premiers raccourcis.

Dans mon cas, je n’ai pas d’actions à faire sur mon petit site web. Les pages proposées en raccourcis sont les plus visitées, tout simplement. Je me suis limité à 2 pour me laisser la place d’une action supplémentaire à terme.

Compatibilité

L’adoption par les navigateurs est progressive. J’ai pu tester le bon fonctionnement sur Windows 10 avec Edge et Chrome en plus de Chrome Android dernières version. (au jour de l’écriture de ces lignes)

Comme vous pouvez le voir, les icônes ne sont pas présentes dans ce mode, les raccourcis prennent l’icône du navigateur avec lequel vous avez installé et lancé la PWA.

Une pensée sur le sujet, un partage d’expérience ? Venez me voir sur Twitter ou n’hésitez pas à poster un commentaire !

The post PWA - Ajouter des raccourcis d'application first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/tutoriels/pwa-ajouter-raccourcis-application-longtouch/feed 0
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
[Terminé] Gagnez 1 accès Tuto.com en illimité jusqu’à la fin de l’année 2020 https://www.creativejuiz.fr/blog/tutoriels/gagnez-1-acces-tuto-com-illimite-annee-2020 https://www.creativejuiz.fr/blog/tutoriels/gagnez-1-acces-tuto-com-illimite-annee-2020#comments Mon, 27 Apr 2020 06:22:50 +0000 https://www.creativejuiz.fr/blog?p=7398 The post [Terminé] Gagnez 1 accès Tuto.com en illimité jusqu'à la fin de l'année 2020 first appeared on Creative Juiz.

Rester enfermé et réduire les temps de trajet m’a donné pas mal de temps pour me remettre à d’autres activités : le jeu vidéo, musique, mais aussi des tutoriels dans des domaines que je ne connais pas toujours bien. Tuto.com, se joint à moi pour vous occuper jusqu’à la fin de l’année en apprenant de […]

The post [Terminé] Gagnez 1 accès Tuto.com en illimité jusqu'à la fin de l'année 2020 first appeared on Creative Juiz.

]]>
The post [Terminé] Gagnez 1 accès Tuto.com en illimité jusqu'à la fin de l'année 2020 first appeared on Creative Juiz.

Rester enfermé et réduire les temps de trajet m’a donné pas mal de temps pour me remettre à d’autres activités : le jeu vidéo, musique, mais aussi des tutoriels dans des domaines que je ne connais pas toujours bien. Tuto.com, se joint à moi pour vous occuper jusqu’à la fin de l’année en apprenant de nouvelles choses.

Tuto.com est le partenaire de CreativeJuiz depuis maintenant pas mal de temps, et c’est grâce à eux que je peux vous proposer de nombreuses heures d’occupation pendant ces temps d’isolement, mais également après et jusqu’à la fin de l’année 2020.

En fait ça sera 12 mois d’abonnement illimité offerts. Changement de plans ! Merci tuto.com 😊

Tuto.com vous propose donc de gagner 1 accès illimité à l’ensemble des tutoriels pendant 12 mois !

Le concours est terminé, le gagnant est Bonnemberger. Félicitations à lui et merci à tout·e·s pour votre participation !

Tuto.com offre des formations vidéos complètes proposées par des formateurs experts dans leur domaine. Spécialisé dans des domaines variés (web, vidéo, photographie, infographie, 3D, droit, dessin, bureautique, audio, domotique, etc.) vous pouvez acquérir ces formations en vidéo sur Tuto.com en achetant directement le tutoriel ou via un système d’abonnement ou encore via un système de crédits que vous pouvez conserver et dépenser lorsqu’un tutoriel vous intéresse..

Tuto.com

La plateforme de formation propose également des vidéos gratuites. Par ailleurs, nous avons un partenariat en cours vous faisant bénéficier de tutoriels vidéos gratuits sur le blog.

Concours : le lot

Tuto.com vous offre 1 abonnement en accès illimité pendant 1 an à leur service de tutoriels vidéo. Cela veut dire que 1 lecteur de Creative Juiz pourra accéder depuis quasiment tous les terminaux (ordinateur de bureau, tablette) pendant 12 mois non stop à toutes les vidéos du catalogue de tutoriels !
Un lot d’une valeur de 339 TTC au total, et d’une valeur bien plus grande avec tout ce que vous pourrez apprendre 🙂

Concours : comment participer ?

Icon Bulle Pour participer à ce concours, vous devez utiliser Twitter (dans l’idéal) ou votre réseau social préféré et suivre les instructions qui figurent juste après.

Icône Marqueur Le concours prendra fin le vendredi 13 mai 2020 à 13h37 (heure française), l’heure d’envoi de votre commentaire faisant foi. (pas de panique si votre commentaire reste en attente de validation)

Les étapes à suivre :

  1. passez le mot en tweetant ceci (cliquez ici pour tweeter) :

    Concours : Remportez 1 abonnement illimité d’un an à Tuto·com sur http://bit.ly/tutocom2020 (via @geoffreycrofte et @tutofr) #concours

  2. suivez Tuto.com et mon compte sur Twitter,
  3. renseignez le lien de votre tweet (vous l’obtenez en cliquant sur la date de publication de votre tweet) dans un commentaire à la suite de ce billet

Pour les utilisateurs d’autres réseaux

  1. Passez l’information sur votre réseaux favori, (LinkedIn, Mastodon, etc.), l’important étant d’avoir partagé le bon lien : http://bit.ly/tutocom2020
  2. Récupérez le lien unique qui permet d’identifier votre partage et placez-le dans un commentaire à la suite de cet article.

Désignation du vainqueur

Icône personne Un tirage au sort sera effectué parmi les participations validées afin de sélectionner le·a gagnant·e du concours. Ce tirage au sort sera effectué sur random.org par une main innocente.

À noter : le gagnant ne peut renoncer au lot en contre-partie d’un équivalent quel qu’il soit. L’abonnement proposé est le lot, si le gagnant y renonce, celui-ci pourra éventuellement être remis en jeu par un second tirage au sort parmi les participant·e·s.
Ce lot est accessible sans obligation d’achat.

Merci pour votre participation !
Tuto.com et Creative Juiz vous souhaitent bonne chance et un bon courage pour ces périodes d’isolement !

The post [Terminé] Gagnez 1 accès Tuto.com en illimité jusqu'à la fin de l'année 2020 first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/tutoriels/gagnez-1-acces-tuto-com-illimite-annee-2020/feed 13
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
Illustrations gratuites : 15 ressources libres de droit https://www.creativejuiz.fr/blog/veille-graphique/illustrations-gratuites-libres-droit https://www.creativejuiz.fr/blog/veille-graphique/illustrations-gratuites-libres-droit#comments Fri, 13 Mar 2020 18:06:41 +0000 https://www.creativejuiz.fr/blog?p=7259 The post Illustrations gratuites : 15 ressources libres de droit first appeared on Creative Juiz.

Les illustrations sur une page web ou une application apportent un effet très intéressant sur l’utilisateur·rice : elles permettent de créer une connexion, de faire écho aux émotions et sentiments et permettent également d’affirmer votre identité. Mais parfois pour commencer, faire appel à un kit d’illustrations gratuit peut être utile pour vous lancer rapidement sans […]

The post Illustrations gratuites : 15 ressources libres de droit first appeared on Creative Juiz.

]]>
The post Illustrations gratuites : 15 ressources libres de droit first appeared on Creative Juiz.

Les illustrations sur une page web ou une application apportent un effet très intéressant sur l’utilisateur·rice : elles permettent de créer une connexion, de faire écho aux émotions et sentiments et permettent également d’affirmer votre identité.

Mais parfois pour commencer, faire appel à un kit d’illustrations gratuit peut être utile pour vous lancer rapidement sans faire l’impasse sur l’aspect visuel de votre produit.

Woobro – Free Vector Illustrations

Les illustrations gratuites proposées par Woobro ont un style très assumé. Ces illustrations sont habillées de dégradés violet, mauve et bleu, proposant une scène enveloppée dans un blob, ces petites patates qui servent de support visuel ou de conteneur.

Woobro Illustrations

Ces illustrations sont en SVG mais sont également packagées en PNG, Sketch et Illustration. Elles sont libres de droit pour tout type d’utilisation, la seule contre partie sera de devoir citer l’auteur ou le site web (CC 4.0 Attribution)

  • Style : aplat et dégradés de couleurs
  • Format : SVG, Sketch et Illustrator
  • Licence : CC 4.0 Attribution – Libre de droit pour utilisation personnelle et commerciale, obligation de citer le site web.

Voir les illu de Woobro

Undraw – Illustrations Vectorielles

Undraw est une des premières bibliothèques d’illustration de ce type que j’ai connu, c’est également de loin ma préférée. Créée par Katerina Limpitsouni ces illustrations couvrent des domaines assez variés que vous pourrez explorer très facilement grâce à une recherche par mot clé.

Undraw Illustrations

Ces illustrations sont proposées en vectoriel (SVG) et propose une possibilité de personnalisation de la couleurs principales. Cette fonction est très utile pour personnaliser rapidement le fichier vectoriel à la couleur de votre marque.

Personnellement j’utilise ce type d’illustration sur des projets professionnels dans le but d’ajouter rapidement un contenu visuel plus agréable. N’étant pas spécialisé du tout en illustration, même si j’ai la capacité de faire des compositions grâce à ces illu, cela permet d’égayer rapidement certains bouts d’interface, en attendant que les client·e·s, si besoin, contactent un·e illustrateur·rice pour du sur mesure.

Les fichiers SVG proposent des tracés assez simples, à tel point qu’il m’a été facile pour un test de mettre les choses en mouvement. Voir l’exemple d’animation Undraw créée avec SVG et CSS.

  • Style : aplat, ligne
  • Format : SVG (compatible tout logiciel)
  • Licence : MIT License – Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Undraw

Illustrations.co – 100 awesome illustrations

Vijay Verma s’est lancé dans une série de 100 jours de création d’illustrations et propose aujourd’hui un site web les regroupant. Ces illustrations sont principalement d’un style aplat, colorées, mais pas toujours super cohérentes entre elles.

Illustrations.co

Ce type de contenu est plutôt utile dans le cadre de besoins ponctuels pour illustrer un propos ou décorer une affiche par exemple (ou faire l’image à la une de cet article :D). Elles sont disponibles en AI, SVG, PNG, EPS et également Figma, pour profiter du live de ce dernier 😀

  • Style : aplat, ligne, rétro
  • Format : AI, SVG, PNG, EPS, Figma
  • Licence : MIT License – Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Illustrations.co

Lukas Zadam – Free illustrations

Lukas Zadam est un illustrateur de profession mettant à disposition une partie de ses créations dans le but de partager à sa communauté et la faire grandir. Je ne peux que vous conseiller de la rejoindre si ce type de communauté vous intéresse.Illustrations Lukas Zadam

Les illustrations proposées ne sont pas toujours toutes cohérentes entre elles, et sont parfois proposées sous la forme de scènes, ou de sorte de kits d’icônes sur un sujet bien précis. Le style est assez classique : aplats et lignes, peu de dégradés.

  • Style : aplat, ligne, bubble
  • Format : SVG (compatible avec tout logiciel)
  • Licence : MIT License – Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Lukas Zadam

DrawKit.io – Free Flat Illustrations

DrawKit, proposé par James illustrateur de profession, affiche un double style graphique : trait noir et blanc et aplat coloré pour presque toutes les illustrations représentant principalement des humains dans leurs activités et habitats naturels.

Drawkit

Ces illustrations sont rangées par catégories assez riches et sont trouvables facilement grâce à une recherche par mot clé. Les scènes et objets proposés sont tous plutôt cohérents les uns avec les autres. La bibliothèque d’illustrations disponibles permet de recomposer des scènes riches adaptées à votre thématique.

  • Style : aplat, ligne, noir et blanc, couleurs
  • Format : SVG (compatible avec tout logiciel)
  • Licence : MIT License – Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de DrawKit

Humaaans – Une bibliothèque dynamique

Pablo Stanley a créé un bibliothèque d’illustrations remarquables capable de proposer des illustrations modulables sur lesquelles vous pouvez changer certains éléments de l’illustration comme le visage de la personne, ses vêtements ou les fonds des scènes.

Humaaans Illustrations

Le style de ces illustrations est en aplat, avec des formes plutôt « blobesques ». L’aspect des personnages est vraiment simple mais très efficace : pas d’ombrage ou de lumière riche, rendant le dynamisme des personnages et fonds possible.

Les illustrations sont disponibles pour Sketch, Figma, InVision Studio, Adobe XD et libre de droit pour utilisation personnelle et commerciale.

  • Style : aplat, couleurs, dynamique
  • Format : Sketch, Figma, InVision Studio, Adobe XD (probablement SVG)
  • Licence : CC0 – Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Humaaans

Icons8 Ouch – Bibliothèque d’illustrations

Ouch propose une bibliothèque d’images dont les sujets sont vraiment très variés, il y a une liste complète sur l’accueil du site d’Icons8.

Icons8 Ouch

Les styles sont assez variés, certains sets proposent des dégradés de couleur là où d’autres proposent des aplats plus ou moins explosifs en couleur. Certains se basent uniquement sur de l’aplat, d’autres sur un mélange aplat et lignes. Il faudra faire votre tri suivant votre style.

Chaque set d’illutration propose son nom et son style bien à lui, même si certains sont assez proches pour être complémentaires.

Attention, le format PNG est gratuit, si vous souhaitez accéder à la version SVG il vous faudra payer $19/mois.

  • Style : aplat, couleurs, trait, divers
  • Format : PNG (gratuit), SVG (payant)
  • Licence : Divers, mais payant ($19/mois) ou attribution obligatoire.

Voir les illu de Ouch

Whoosh – Illustration Kit

Ce set d’illustrations très colorées propose des scènes vraiment simples pour agrémenter les interfaces que vous designez sur des sujets assez classiques de l’usage des sites web : code, securité, livraison, empty states, etc.

Whoosh Illustration

Le format PNG est gratuit, mais il vous faudra payer la modique somme de $29 pour accéder à une bibliothèque compatible avec Figma, Sketch, Adobe XD ou le format EPS.

Whoosh Customization

Avec ces versions payantes, une palette de couleurs est fournie vous permettant de changer l’ensemble des couleurs des illustrations.

  • Style : aplat, couleurs
  • Format : PNG (gratuit), SVG (payant)
  • Licence : Divers, mais payant ($29) ou attribution obligatoire.

Voir les illu de Whoosh

Absurd Design – Illustrations

Ces illustrations d’un style dessiné en noir et blanc proposent un effet très assumé et un peu « brouillon » très apprécié (j’aime ce style personnellement).

Absurd Design Illustrations

Les illustrations proposées sont sous format PNG avec attribution obligatoire pour la version gratuite. Si vous souhaitez accéder à une version pro, vous devrez payer $57 par trimestre.

  • Style : trait, ligne, noir et blanc
  • Format : PNG (gratuit), SVG (payant)
  • Licence : Divers, mais payant ($57 par trimestre) ou attribution obligatoire.

Voir les illu de Absurd

Stubborn – Personnages personnalisables

Stubborn propose des personnages, décors et objets personnalisables, ainsi que des exemples de compositions graphiques pour vous aider à composer vos propres scènes.

Stubborn Illustration

Est proposé également un générateur de scène/image permettant de personnaliser gratuitement ces illustrations.

  • Style : aplat, personnalisable
  • Format : SVG
  • Licence : Divers, gratuit mais limité en nombre d’images. Version pro pour $99/an.

Voir les illu de Stubborn

OpenPeeps – Sur mesure noir et blanc

OpenPeeps propose une bibliothèque d’illustrations de personnages personnalisables vous permettant un nombre de combinaisons assez remarquable.

OpenPeeps IllustrationsLe style proposé par l’illustrateur Pable Stanley est un tracé noir et blanc avec quelques pleins pour les éléments de surface (tissu, objet). Ce kit de personnages devrait être facile d’utilisation d’un point de vue légal : CC0 – Libre de droit pour utilisation personnelle et commerciale.

La bibliothèque propose du PNG et SVG. Ce dernier format vous permettra facilement de changer la couleur principale de vos illustrations.
Une version multicolor existe également si le noir et blanc ne vous enchante pas.

L’illustrateur ne vous fait rien payer par défaut, mais je vous invite grandement à payer un petit quelque chose si les finances vous le permettent, ça le soutiendra dans sa démarche.

  • Style : tracé noir et blanc (option couleurs également), aplat, personnalisable
  • Format : SVG, PNG
  • Licence : CC0 – Libre de droit pour utilisation personnelle et commerciale.

Voir les illu d’OpenPeeps

Smash Illustrations – Scènes personnalisables

Usesmash.com propose une bibliothèque d’illustration très colorés en aplat de couleurs.

Smash Library

Le style assez prononcé affiche des personnages avec des longs et gros membres : bras et jambes sont volontairement exagérés offrant une certaine dynamique aux personnages et scènes ainsi composées.

Une offre gratuite expose plus de 250 objets et personnages et plus de 20 scènes, tout en vectoriel, compatible Figma et Sketch, mais également tout proposant le support de SVG. La licence, même en gratuit, est libre de droit pour un usage personnel et commercial.
Pour 99$ par an vous accédez à bien plus, en plus des outils de création de Craftwork Design.

  • Style : aplats colorés, personnalisable
  • Format : SVG
  • Licence : Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Smash

Black Illustrations – les « blacks » à l’honneur

BlackIllustrations propose de mettre en avant les personnes noires avec une nouvelle variété de scènes, coupes de cheveux et couleurs de peau. Cette diversité, c’est un travail qui est assez peu souvent effectué dans les autres bibliothèques, c’est bon d’avoir un kit dédié.

Black Illustrations

Cette bibliothèque d’illustration de personnes « black » vous permettra d’ajouter à vos projets une nouvelle couche d’inclusivité, le tout gratuitement et libre de droit, notamment avec ce kit. Un autre kit vous est proposé au prix assez ridicule de 25$ incluant de nouvelles scènes, couleurs et personnages, et centrées sur le mode de vie.

D’un point de vue technique, cette bibliothèque vient avec des fichiers SVG, totalement compatible avec l’ensemble des softs modernes de design.

  • Style : aplats colorés, scènes préconçues
  • Format : SVG
  • Licence : Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de BlackIllu

Shape – Illustrations et icônes animées

Shape n’est pas uniquement une bibliothèque d’illustrations, mais également d’icônes animées et d’élément d’UI personnalisables.

Shape Illustrations

Le service propose un soft permettant de sélectionner icônes et illustrations, choisir si celles-ci seront animées ou pas, choisir la palette de couleurs parmi un nombre pré-déterminé, mais également en personnalisant chacune des couleurs personnalisables. Puis au final, exporter sous un format code (SVG) ou PNG une image de votre composition.

Une version gratuite propose un accès limité à la bibliothèque, aux PNG et à du code. L’offre pro en lifetime est à 60$ en ce moment, avec une promesse d’accès illimité à vie aux prochaines mises à jour de la bibliothèques.

  • Style : aplats colorés, tracés, personnalisables, animées.
  • Format : SVG, PNG, et code
  • Licence : Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Shape

Blush – Groupement d’illustrateurs

Blush est un site web et un plugin Figma proposant un regroupement d’illustrations d’une communauté d’illustrateurs hétéroclites.

Cette diversité vous permet de parcourir un ensemble d’illustrations dont certains styles vous seront familiers puisque l’on retrouve certains des illustrateurs cités plus haut dans cet article.

Tout est gratuit et libre de droits, pour un format en PNG. Un format SVG est disponible pour les utilisateurs payants.

  • Style : varié
  • Format : PNG (SVG payant)
  • Licence : Libre de droit pour utilisation personnelle et commerciale.

Voir les illu de Blush

Le travail d’illustrateur

Petit rappel pour les personnes qui se disent que $99 font un peu cher pour des illustrations, pour ne prendre que cet exemple : le travail d’illustrateur est quelque chose de très compliqué, entre la difficulté de conserver une cohérence graphique, d’assumer et conserver un choix pour coller à une l’identité d’une société, ou même simplement la composition vectorielle en elle-même.

Je ne vais pas m’étendre là-dessus car ce n’est pas mon métier, même si j’ai déjà composé quelques mini-sets ou quelques illustrations vectorielles payantes (parfois hyperréaliste comme la mode de l’époque) il y a bien longtemps, mais croyez-moi, même un set à 400$ ne serait pas cher du tout compte tenu du temps nécessaire pour les créer.

J’en profite pour glisser ici le lien de la page de description et des choix d’utilisation, des choix graphiques, des illustrations de Foyer (mon employeur actuel) juste pour vous montrer ce qui se cache derrière 3 personnages. Imaginez des scènes complètes 😉
Le style et les choix graphiques sont issus d’un travail fabuleux de notre illustratice en chef Léa.

Amusez-vous bien avec ces illu !

The post Illustrations gratuites : 15 ressources libres de droit first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/veille-graphique/illustrations-gratuites-libres-droit/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
Image SEO – Plugin WordPress pour optimiser vos images https://www.creativejuiz.fr/blog/wordpress/image-seo-plugin-wordpress-optimiser-images https://www.creativejuiz.fr/blog/wordpress/image-seo-plugin-wordpress-optimiser-images#respond Thu, 20 Feb 2020 07:54:00 +0000 https://www.creativejuiz.fr/blog?p=7153 The post Image SEO - Plugin WordPress pour optimiser vos images first appeared on Creative Juiz.

Tout le monde a déjà entendu parler de SEO lorsqu’il s’agit d’optimiser sa visibilité sur les moteurs de recherche. Cependant très peu de personnes prêtent attention au référencement de ses images, et ça commence par des choses pourtant très simples, mais rarement mise en place. Image SEO peut vous y aider. Image SEO est un […]

The post Image SEO - Plugin WordPress pour optimiser vos images first appeared on Creative Juiz.

]]>
The post Image SEO - Plugin WordPress pour optimiser vos images first appeared on Creative Juiz.

Tout le monde a déjà entendu parler de SEO lorsqu’il s’agit d’optimiser sa visibilité sur les moteurs de recherche. Cependant très peu de personnes prêtent attention au référencement de ses images, et ça commence par des choses pourtant très simples, mais rarement mise en place. Image SEO peut vous y aider.

Image SEO est un plugin WordPress proposant des fonctionnalités d’optimisation de vos images pour un meilleur référencement de votre contenu illustré, photographique ou imagé. Voyons ensemble les points clés de ce plugin pour mieux comprendre son fonctionnement.

Cet article propose des liens affiliés qui n’influencent en rien le propos de l’article. Pour une meilleure transparence, je vous invite à lire ma politique à ce sujet.

Ce que Image SEO propose

Image SEO vous promet un meilleur référencement de vos images en travaillant tout particulièrement sur 2 aspects :

  • Le nom de l’image
  • Le contenu de l’attribut alt

Pour le premier aspect, vos images bizarrement nommées en Screenshot-2020-01-19.png seront renommées par exemple : plante-verte-fleur.png automatiquement au chargement de l’image sur votre médiathèque WordPress.

Pour que la magie opère, Image SEO fait appelle à de la reconnaissance automatique des contenus de vos images afin de vous proposer des mots-clés adaptés.

Concernant l’attribut alt il s’agit d’un petit élément dans le code HTML de l’image servant à afficher un contenu alternatif si l’image ne se charge pas, mais sert également pour l’accessibilité numérique. Alternativement (;p) il est utilisé pour optimiser la sémantique de l’image pour le référencement.
De la même manière que pour le nom de l’image, le plugin va vous proposer des mots-clés intéressants pour votre image.

Les fonctionnalités d’ImageSEO

Maintenant que nous avons vu le coeur d’Image SEO et son fonctionnement sur vos images. Voici ce que le plugin propose en fonctionnalités principales.

Optimisation SEO en masse de vos images

Parce que vous avez certainement une bibliothèque d’images déjà bien remplie, il peut être pratique d’optimiser massivement les images existantes.

Après quelques réglages dans l’interface :

  • activer la validation manuelle,
  • choisir la langue des mots-clés,
  • choisir e type d’image que vous voulez optimiser,
  • le nombre de mots-clés à inclure et le format de texte à adopter,
  • inclure ou non l’optimisation de l’attribut alt,

il vous sera possible de lancer l’optimisation massive. Celle-ci peut prendre du temps suivant le nombre d’images que vous avez en stock.

Optimisation du SEO des nouvelles images

Lorsque vous avez activé le plugin et que votre quota d’images vous le permet, les nouvelles images sont optimisées automatiquement. J’ai fait quelques essais et c’est globalement assez bluffant.

Optimisation d’une image d’un de mes sites web

Sur l’image précédente illustrant l’un de mes sites web sur Flexbox, l’outil a titré CSS Flexible Box Layout - Responsive Web et a renommé l’image css-flexible-box-layout.jpg. C’est plutôt précis et adéquat.

Social banners & Optimisation Pinterest

L’outil propose également une option d’optimisation de votre image sur les réseaux sociaux, proposant de compléter le format OpenGraph et Twitter Card pour vous, générant le code nécessaire pour être reconnu par les réseaux sociaux comme Facebook, Twitter, ou même Pinterest.

Vous pouvez régler l’image par défaut de votre bannière sociale, mais également le template des futures bannières. Le plugin est compatible avec Yoast SEO et SEO Press pour ne pas rentrer en conflit avec ces derniers.

D’ailleurs en parlant de Pinterest, il vous sera possible d’éditer individuellement les informations de chaque image à destination de Pinterest dans les medias.

Utilisabilité d’Image SEO

Une chose qui me tient à cœur en général lorsque j’utilise un plugin est son utilisabilité. Lorsque je mets en place ce type d’outil sur mon blog, je tiens à ne pas passer trois heures à le paramétrer et je souhaite me concentrer sur la qualité de mon contenu.

De ce côté, Image SEO se débrouille vraiment bien. J’ai pu installer le plugin sans avoir à télécharger une version en dehors du répertoire officiel de WordPress. 1 clic et c’était installé, 1 autre pour l’activation et un 3e pour arriver dans la page des settings.
L’outil me propose alors de me créer un compte pour pouvoir commencer à optimiser le SEO de mes images. La magie s’opère quand il récupère tout seul comme un grand la clé API dont il a besoin pour fonctionner.

C’est plié, je peux commencer à utiliser le plugin qui propose une interface bien plus sympa que l’austère habituelle de WordPress. Les quelques pages de réglages sont rapidement parcourues, d’autant qu’il n’y en a qu’une seule liée au le cœur du plugin. La section Social Banner permet en effet de créer un template de bannière sociale dont les réglages par défaut sont plutôt propres. Mais j’ai décidé de l’optimiser pour le fun comme vous l’avez vu avant.

L’ensemble de ces étapes d’onboarding ont dû me prendre 5 min à tout casser. Puis je suis allé voir à droite et à gauche dans les posts et medias les nouvelles options et commandes qui s’offraient à moi. Vraiment facile à prendre en main.

Image SEO est gratuit pour 10 images par mois et vous demandera 5 € pour une centaine d’image par mois. Compte tenu du gain de temps que ça permet d’obtenir, les offres « one shot » pour optimiser d’un coup un nombre donné d’image, suivi de l’offre gratuite ou d’entrée à 5€ est suffisante pour un blogueur occasionnel, voire professionnel, suivant la nature de vos contenus.

Pour information, Image SEO n’optimise pas le poids de vos images. Mais vous pouvez regarder du côté de Imagify pour cela.

Et l’accessibilité dans tout cela ?

On notera cependant que l’outil ne parle à aucun moment de l’impact de peupler les attributs alt de mots clés. Vous avez certainement entendu parler d’accessibilité, et si ce n’est pas le cas, sachez que cet attribut que les experts SEO aiment blinder de mots clés est en fait bien pratique pour les personnes souffrant de handicaps liés à la vue.

En effet certains terminaux appelés des lecteurs d’écran parcours votre page web en lisant le code source de celle-ci et retranscrive son contenu à voix haute. Lorsque ces lecteurs d’écran parcours une image, il est évident qu’il n’y a rien à lire sur cette image (en tout cas dans le code source), sauf si l’éditeur du contenu a renseigné l’attribut alt prévu pour décrire le contenu de l’image et aider le mal-voyant à imaginer son contenu.

L’usage des attributs alt pour le SEO de manière abusive n’est donc pas recommandé pour des raisons d’accessibilité. En effet, si une image est purement décorative et n’apporte pas de contenu au propos textuel, il est recommandé de laisser l’attribut alt vide.

L’équipe du plugin me signale à l’oreillette qu’une prochaine version du plugin apporterait l’option « Il s’agit d’une image de décoration » afin de laisser l’attribut vide lors de l’optimisation de l’image pour le SEO. Et si vous en avez besoin, ce n’est pas pour bourrer l’attribut de mots-clés, mais pour décrire l’image.

Cependant l’optimisation du nom de l’image est déjà un bon point positif pour ce plugin et votre SEO d’image 🙂

Fonctionnalités futures de Image SEO

En discutant avec la petite équipe de développement du plugin, on me fait savoir que des fonctionnalités à venir sont déjà à l’étude ou en cours de développement :

  • Un contrôle d’image cassée : l’outil pourra vous remonter quelles images semblent manquantes. En effet Google pénalise la mauvaise qualité de liens internes ou externes (erreurs 404)
  • Un sitemap d’images : pour indexer vos images plus pro-activement.
  • Prévention sur les catégories d’image sensible : proposer une alerte sur le niveau de sensibilité des images analysée, notamment pour les images typées comme « Adult-Related« , contenu pour adultes.
  • Marquage des images de décoration : comme je le disais à propose de l’accessibilité, il sera possible de marquer des images comme décorative pour accepter l’attribut alt vide.

Sachez également que Image SEO n’est pas juste un plugin WordPress, mais un service avec une API qui permet son intégration dans n’importe quel CMS ou développement personnalisé.

Découvrir Image SEO

The post Image SEO - Plugin WordPress pour optimiser vos images first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/wordpress/image-seo-plugin-wordpress-optimiser-images/feed 0
Les Ressources du Web #45 https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-45 https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-45#respond Sun, 02 Feb 2020 14:58:18 +0000 https://www.creativejuiz.fr/blog?p=7146 The post Les Ressources du Web #45 first appeared on Creative Juiz.

Cela fait un moment que je n’ai pas fait de sélection. En voici une grande avec un ensemble de ressources sur l’UX Design et la recherche utilisateurs, mais aussi des outils SXO, SEO, UI Design et des outils amusants pour composer des palettes de couleurs, une démo JavaScript et CSS pour apprendre à faire des […]

The post Les Ressources du Web #45 first appeared on Creative Juiz.

]]>
The post Les Ressources du Web #45 first appeared on Creative Juiz.

Cela fait un moment que je n’ai pas fait de sélection. En voici une grande avec un ensemble de ressources sur l’UX Design et la recherche utilisateurs, mais aussi des outils SXO, SEO, UI Design et des outils amusants pour composer des palettes de couleurs, une démo JavaScript et CSS pour apprendre à faire des choses animées, ainsi que des ressources et des articles sur l’accessibilité.

Vous pouvez restés à jour en me suivant sur Twitter. Je tweet un petit peu tous les jours pour partager toutes ces ressources.

Si je devais n’en retenir qu’un

LeonardoColor.io est un outil qui vous aide à construire des palettes de couleurs et des systèmes cohérents en améliorant l’accessibilité de votre interface.

Leonardo Color Contrast Tool

UX Design et Recherche Utilisateur

L’UX Design consiste à connaître ses utilisateurs, mais aussi à se connaître soi-même, et s’identifier comme une personne biaisée qui essaie d’obtenir un peu d’empathie. Voici quelques ressources pour vous aider à faire tout cela.

  • User Task Canvas – Auto-promotion avec ce canvas pour vous aider à saisir les tâches et les activités des utilisateurs afin de mieux comprendre leurs besoins.
  • UX Starter Crash Course – Un retour d’expérience et un kit de démarrage à télécharger pour bien démarrer votre recherche d’utilisateurs.
  • Design Better Forms – Quelques bons conseils à emporter pour construire de meilleurs formulaires.
  • BatUX – Utilisation d’un procédé UX pour redessiner la tenue classique de Batman. Un bon moyen d’apprendre et d’expliquer le processus de design.
  • BravoStudio – Transformer les prototypes Figma en applications natives.
  • SEO and SXO Links Collection – Une collection de liens pour l’hiver 2019-2020 par Myriam Jessier.
  • 52 UX Cards to Discover Cognitive Biases – Apprenez à utiliser ces cartes et téléchargez-les.

UI Design et Visual Design

D’excellents outils pour vous aider à construire des interfaces colorées et contrastées et à les agrémenter d’illustrations et de superbes images vectorielles.

  • Smooth Shadow – Un outile pour créer de belles ombres, douces et travaillées. Un plugin pour Figma est aussi disponible.
  • Think about color – Comment le Cloudflare apporte de la cohérence dans leur système de couleurs.
  • WooBro Vector Images – Images et scènes vectorielles gratuites pour un usage commercial.
  • Illustrations.co – Création de 100 illustrations pendant les 100 jours du défi d’illustration.
  • The Icon Kaleidoscope – Redessiner plus de 100 icônes avec de nouvelles couleurs, effets et finitions.
  • Happy Hues – Vous ne savez pas quelles couleurs utiliser dans vos dessins ou où les utiliser ? Happy Colors est un site d’inspiration sur les palettes de couleurs qui proposer des exemples concrets sur la façon dont les couleurs peuvent être utilisées dans vos projets de design.
  • LeonardoColor.io – Créer une palette de couleurs adaptative pour de meilleurs contrastes.
  • How to make a dark mode favicon – Une astuce pour vos favicons SVG qui fonctionne très bien.
  • Pantone Color of the year – Nous avons la couleurs 2020 😀
  • Mobile UI Design Trends in 2019 – Quelques exemples inspirants de desing d’interface utilisateur.

Animer et styler en CSS

Beaucoup de ressources sur les propriétés personnalisées (alias variables CSS), mais aussi des ressources pour apprendre l’animation et les styles RTL.

JavaScript et PWA

Apprenez comment fonctionne JavaScript et comment apprendre le JS moderne en construisant un jeu Tetris.

  • PWA : Adaptive inc support – Un nouveau format d’icône permettant d’utiliser des icônes adaptatives sur les plateformes prises en charge.
  • CSS-in-JS Performance Cost – Les coûts invisible de la performance des bibliothèques modernes CSS-in-JS dans les applications React.
  • Learning modern JS with Tetris – Une bonne étude de cas pour apprendre le JavaScript moderne.
  • The JavaScript Engine – Découvrez comment le moteur JavaScript fonctionne avec votre code.
  • Flowy – Un bibliothèque minimale pour construire des organigrammes.

Accessibilité et qualité

Certains pensent que la construction d’interfaces accessibles est réservée aux « extrémistes de l’accessibilité ». Vous seriez heureux d’apprendre que cela fait partie du travail d’un bon designer. De bonnes lectures à suivre.

Amusez-vous bien et bonne lecture !

The post Les Ressources du Web #45 first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-45/feed 0
Les meilleurs éditeurs de contenu WYSIWYG https://www.creativejuiz.fr/blog/ressources-telechargements/meilleurs-editeurs-texte-wysiwyg https://www.creativejuiz.fr/blog/ressources-telechargements/meilleurs-editeurs-texte-wysiwyg#comments Tue, 28 Jan 2020 15:51:40 +0000 https://www.creativejuiz.fr/blog?p=6683 The post Les meilleurs éditeurs de contenu WYSIWYG first appeared on Creative Juiz.

Lorsque vient le besoin de se concentrer sur la rédaction de textes à destination d’une page web, les éditeurs WYSIWYG permettent de se projeter dans ce que sera votre texte une fois publié sur votre page, ou en tout cas vous en offrir un bon aperçu. Voici une sélection d’éditeurs qu’il est possible d’installer dans […]

The post Les meilleurs éditeurs de contenu WYSIWYG first appeared on Creative Juiz.

]]>
The post Les meilleurs éditeurs de contenu WYSIWYG first appeared on Creative Juiz.

Lorsque vient le besoin de se concentrer sur la rédaction de textes à destination d’une page web, les éditeurs WYSIWYG permettent de se projeter dans ce que sera votre texte une fois publié sur votre page, ou en tout cas vous en offrir un bon aperçu. Voici une sélection d’éditeurs qu’il est possible d’installer dans vos projets web.

Cette sélection est issue d’une recherche fin 2018. Il est probable que certains script aient évolué avec le temps. Certains également sont payants. Je vais essayer d’être le plus explicite possible sur la description de chacun pour vous donner un tour d’horizon des fonctionnalités disponibles de ces éditeurs de texte WYSIWYG.

Selection d’éditeurs WYSIWYG

QuillJS

Quill JS est un éditeur WYSIWYG Open Source gratuit disponible sur Github avec plus de 23k d’utilisateurs actifs. L’éditeur se veut multiplateforme et construit sur la logique API Driven Design.

QuillJS Éditeur Wysiwyg

L’éditeur propose pas mal de fonctionnalités, les classiques pour les styles en ligne comme gras, souligné, barré, italique, les styles de paragraphe et structures de titre, mais également les listes, bloc de code (intéressant pour les personnes qui tiennent un blog technique) ainsi que les images et vidéos, ou encore les formules mathématiques.
Vous pouvez utiliser les formats JSON aussi bien en entrée qu’en sortie.
On regrètera l’absence d’un éditeur léger « inline » (quand l’outil propose quelques raccourcis sous la souris après une sélection de texte par exemple)

  • Prix : Gratuit
  • Open Source : Oui
  • Documentation
  • Thémable : Oui
  • Éditeur « inline » : Non
  • Édition sans distraction : Non
  • Accessibilité : N/C
  • Extensible : Oui

Visiter QuillJS

Froala WYSIWYG Editor

Froala se veut être un concurrent sérieux de TinyMCE, proposant un design épuré et une certaine facilité d’installation pour les développeurs.

Froala Wysiwyg Editor

Méthodes, options et événements sont accessibles via une API plutôt bien documentée. Vous retrouvez les classiques d’un éditeur WYSIWYG avec en plus quelques options plutôt pratiques comme l’éditeur « inline », la possibilité d’extraire un PDF de l’éditeur ou de passer en fullscreen. La possibilité d’éditer des tableaux et bien plus encore grâce à plus de 30 plugins disponibles.

Tester Froala

Trumbowyg

La force de Trumbowyg Editor est sa légèreté. Il s’agit d’un plugin jQuery de seulement 20ko (8 ko gzip) dont l’objectif est d’apporter des fonctionnalités simples d’édition de contenu en essayant de ne pas proposer d’impasse.

Trumbowyg Editor

Cet éditeur propose également les grands classiques de l’édition de texte, mais apporte en plus quelques outils inhabituels comme : l’insertion d’image base64, la possibilité de proposer un upload, la possibilité de redimensionner vos images, la possibilité d’utiliser MathML, l’accès à la bibliothèque Giphy ou aux emojis. Une de ses forces réside dans la possibilité de créer et réutiliser des templates HTML.

  • Prix : Gratuit
  • Open Source : Oui
  • Documentation
  • Thémable : Oui
  • Éditeur « inline » : Non
  • Édition sans distraction : Oui avec option fullscreen
  • Accessibilité : N/C
  • Extensible : Oui

Visiter Trumbowyg

EditorJS WYSIWYG

EditorJS propose un éditeur qui se veut « clean data » et « pluggable » grâce à son API. Le format de sortie propose du JSON et l’éditeur est Open Source. Contrairement aux autres éditeurs, EditorJS propose d’éditer des blocs de contenu que vous allez pouvoir bouger et réordonner, un peu comme le propose aujourd’hui l’éditeur Gutenberg de WordPress.

EditorJS

Le format atypique de cet éditeur est de vous proposer une édition par bloc de contenu avec des options bien précises pour chaque type de bloc : au clic sur un bloc vous obtiendrez les options disponibles pour ce bloc, à la sélection d’un contenu textuel vous obtiendrez les options pour ce texte, notamment des styles inline.

En dehors de l’aspect éditorial que je trouve assez pratique, cet éditeur propose des options classiques d’édition, mais possède également très fort potentiel d’extensibilité, notamment grâce à son système de bloc réutilisable.

  • Prix : Gratuit
  • Open Source : Oui
  • Documentation
  • Thémable : Oui
  • Éditeur « inline » : Oui, uniquement (style-block editor)
  • Édition sans distraction : Non
  • Accessibilité : Navigation clavier
  • Extensible : Oui

Visiter Editor.JS

TinyMCE Bootstrap Plugin

TinyMCE est un des éditeurs les plus connus du marché, mais également l’un de ceux qui a le plus évolué avec le temps et qui prend en compte les retours d’expérience de ses utilisateurs. Je ne vais pas vous vendre ses mérites ici, mais vous proposer cette extension liée à Bootstrap.

Bootstrap est l’un des frameworks CSS les plus utilisés aujourd’hui, et même si je ne vais pas revenir sur l’avantage ou non de ce type d’outil, force est de constater qu’un éditeur approprié utilisant ce framework dans le contenu web généré semble être une bonne idée.

TinyMCE Bootstrap plugin

Ce plugin compatible TinyMCE 5 et Bootstrap 4, à l’heure d’écriture de ces lignes, propose donc un accès à un éditeur avancé avec l’ensemble des éléments de mise en page (marge, colonne), composants (tableau, boutons, alertes, etc) et variables (couleurs, graisses, bordures, background) etc.

Télécharger TinyMCE Bootstrap Plugin

WYSIWYG HTML Editor Pro – PHP version

A l’ère du tout-JS, il m’a été demandé plusieurs fois des solutions viables proposant un petit script d’éditeur compatible PHP avec upload d’image. Je n’avais pas de réponse jusqu’à récemment où il m’a été conseillé cet éditeur payant.
Je ne l’ai personnellement pas testé mais je fais confiance à la personne qui me l’a recommandé et n’hésiterai pas à mettre à jour cet article le jour où je le teste.

WYSIWYG HTML Editor
Exemple de l’action « Insert Image » avec une bibliothèque d’images disponibles.

Télécharger WYSIWYG HTML Editor Pro

Des éditeurs WYSIWYG oubliés ?

Comme je le disais en introduction, ces éditeurs et plugins sont tombés dans mes résultats de recherche sur des critères spécifiques. Si vous connaissez des éditeurs qui vous sont utiles au quotidien ou utilisant des techno que je n’ai pas cité, n’hésitez pas à les partager en commentaire.

Auto-promotion autorisée bien sûr, si vous avez écrit un script, c’est le moment de le partager. Ceux qui auront particulièrement retenus mon attention seront ajoutés à la liste 🙂

Merci et bonne rédaction !

The post Les meilleurs éditeurs de contenu WYSIWYG first appeared on Creative Juiz.

]]>
https://www.creativejuiz.fr/blog/ressources-telechargements/meilleurs-editeurs-texte-wysiwyg/feed 3
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