Tout ce qui bougeVeille et réflexion sur la technologie, ses usages et mésusages.2024-04-21T18:38:55Zhttps://toutcequibouge.netBaptiste RoullinNouveautés dans les éléments HTML natifs2024-04-21T18:38:55Zhttps://toutcequibouge.net/blog/2024/04/nouveautes-dans-les-elements-html-natifs/
Si vous consultez la liste des éléments, à moins d’être expert vous pouvez être à peu près sûr d’en découvrir un certain nombre. (Les plus fascinants pour moi ? <ruby> et kbd.)
Si on étend la liste à tous les éléments proposés pour ajout à la norme HTML, elle sera bien plus longue. Et cela soulève des débat passionnants : quel pattern mérite d’être un élément à part entière, ou juste un attribut d’un élément existant, ou juste un Composant Web fourni par une bibliothèque ?
Plus fondamentalement la question : quel sont les mots de base du langage qu’est le web ? Est-ce qu’un toaster est suffisamment commun et standardisé pour mériter un élément ? et un bloc de spoiler ? Comme tout langage, il faut partir des usages réels ; le groupe de travail OpenUI a d’ailleurs fait un travail impressionnant de recensement en ce sens. Mais il faut aussi ajouter une dose de prescription : y a-t-il vraiment besoin d’ajouter une mauvaise idée telle qu’un accordéon exclusif sous prétexte qu’on peut trouver quelques occurrences ? <spoiler> Pour moi, non </spoiler>.
Éléments récemment ajoutés dans les navigateurs modernes
Sauf erreur de ma part il y en a deux.
Recherche
Similaire à un élément <nav> mais pour un composant de recherche, l’élément <search> ajoute un point de repère à la page (landmark, utile notamment pour les technologies d’assistance), comme si on ajoutait role=search à un conteneur. À tester pour vérifier si c’est bien reconnu par les lecteurs d’écran, donc il faut mieux doublonner <search role="search"> comme pour main.
L’élément dialog permet d’afficher un panneau modal au sein d’une page, avec juste un peu de Javascript et de bons comportements par défaut (notamment la navigation au clavier). Exemple :
Allez je triche et j’ajoute le pas tout jeune mais méconnu élément <details>, pratique pour ajouter un accordéon basique si vous n’avez pas besoin de personnalisation. Exemple :
Il semble y avoir deux propositions différentes : l’une pour qu’un interrupteur soit un type particulier de case à cocher, l’autre pour créer un nouvel élément plus complet et personnalisable. Le cas d’usage étant de représenter des paramètres à prise d’effet instantanée, à l’opposé des cases à cocher d’un formulaire déclaratif.
<inputtype="checkbox"switch><!-- VERSUS --><switch><track><toggled></toggled><untoggled></untoggled></track><thumb></thumb></switch>
Menu déroulant stylable
Il y avait une proposition pour créer un nouvel élément, indépendant du <select> actuel qui serait conservé pour des raisons de rétro-comptabilité : selectmenu ou selectlist.
Finalement la proposition parait être d’ajouter un attribut au <select> et qui ouvrirait plein de possibilités de personnalisation.
Permet d’embarquer une version non-interactive d’une page dans une autre page, typiquement pour afficher une prévisualisation de la page au clic sur un lien.
À ne pas confondre avec <fencedframe>, qui est en gros la version moderne et sécurisée du bon vieux iframe.
Mentionnons aussi rapidement <model>, utilisé pour afficher des modèles 3D et standardiser certains comportements (interactivité, etc.). C’est la partie émergée d’une initiative plus large pour apporter la réalité virtuelle et augmentée sur le web.
Techniquement ce n’est pas un élément mais un attribut et une API mais Firefox vient de rejoindre les navigateurs compatibles et ça s’annonce sacrément utile. La fonctionnalité permet d’ajout un panneau non-modal en gérant finement le positionnement ainsi qu’en facilitant la gestion de la fermeture, de la navigation au clavier et du z-index.
Panorama de techniques CSS parfois méconnues des designers2024-04-20T14:55:58Zhttps://toutcequibouge.net/blog/2024/04/panorama-de-techniques-css-parfois-meconnues-des-designers/
On dirait que pas mal de techniques CSS ne sont pas assez connues de nombreux designers. Voici donc un compilation que j’alimenterai au cours du temps.
Je me suis limité à :
Des techniques relativement simples, parce que l’implantation demande quelques lignes de CSS ou que c’est une amélioration locale et additive.
scroll-snap : enfin une manière de guider le mouvement de scroll, sans le prendre en otage et casser les habitudes et comportements natifs. A la fin d’un mouvement de scroll, la position d’un item dans une liste scrollable est ajustée.
Deux valeurs possibles :
mandatory : probablement trop agressif
proximity : préférable, le « magnétisme » se produira uniquement si la bordure de l’item est proche de la bordure du conteneur.
On peut faire énormément de choses en terme de post-processing d’images. La terminologie est assez proche de celle de Photoshop : les filtres permettent de modifier une image et les modes de fusion spécifient l’interaction entre plusieurs couches. Avec mix-blend-mode, les couches sont plusieurs éléments HTML et avec background-blend-mode elles sont plusieurs background CSS dans un même élément.
text-box-trim permet de centrer le texte et les pictos dans un conteneur quelconque en supprimant l’espacement vertical généré et spécifique à chaque police de caractères. Ca arrivera pas tout de suite, mais on peut espérer. A ne pas confondondre avec margin-trim.
Faut-il justifier le texte sur une page Web ? Non, mais2024-01-24T00:00:00Zhttps://toutcequibouge.net/blog/2024/01/faut-il-justifier-le-texte-sur-internet-non-mais/
Voici le résultat de quelques recherches et réflexions sur la question du texte justifié, car beaucoup de ressources en ligne à ce sujet sont très datées. En résumé : oui il faut continuer à ferrer à gauche le texte de labeur mais la question mérite d’être posée et mieux étudiée, surtout avec le support de la césure automatique sur les navigateurs. Retours et critiques bienvenus.
Peu d’études
Il y a très peu d’études empiriques spécifiques sur ce sujet. J’ai trouvé deux papiers de Ling & Van Schaik, vieux mais intéressants (résumés ici). Ils confirment que le texte aligné à gauche est plus lisible. Plus précisément :
Le panel était composé de gens sans troubles de l’apprentissage (ou en tout cas pas plus que dans la population générale). On peut supposer que l’effet serait pire sur un panel de dyslexiques.
Les gens préféraient spontanément le texte justifié même s’ils étaient plus efficaces avec du texte ferré à gauche (question d’habitude et d’aspect « rangé », j’imagine).
Je n’ai rien trouvé de sérieux sur la dyslexie, alors que c’est le coeur du sujet (il y a peut-être d’autres dys concernées mais je vais me concentrer sur la dyslexie pour pas parler dans le flou). Même les articles en apparence bien documentés reprennent des recommandations tirées d’autres articles pas plus étayés, si bien qu’on tourne vite en rond : les designers invoquent des universitaires qui invoquent des guides institutionnels qui invoquent des designers.
Si j’ai loupé des ressources intéressantes, dites-le moi.
Bref les choix typographiques ont un gros effet sur la capacité de lecture des dyslexiques, mais on nage à vue : entre la taille des caractères, la longueur des lignes, l’interlignage et l’alignement, qu’est-ce qui gêne le plus ?
Plus encore, il faudrait décorréler la question de la justification dans l’absolu de celle de son implémentation, qui est très mauvaise historiquement sur le web. Il n’y a pas d’études comparant la lisibilité d’un texte ferré à gauche à celle d’un texte correctement justifié. Au hasard en se basant sur une page imprimée et composée manuellement par un pro sous Indesign.
Mais au fait, pourquoi le ferrage à gauche ?
À ma connaissance, il y a deux arguments contre la justification : l’irrégularité des espaces et la difficulté à distinguer les lignes entre elles.
1. Espaces irrégulières
Ça fait varier la taille des espaces et donc perturbe les trajectoires oculaires. Celles-ci sont déjà rendues erratiques par la dyslexie, c’est justement un des gros symptomes. Voir cet article passionnant.
Voici deux graphiques (source) assez parlants comparant les trajectoires d’une personne non-dyslexique (à gauche) et dyslexique (à droite). Les lignes horizontales représentent une fixation sur un point, les lignes verticales représentent des mouvements en avant ou arrière dans le texte. Le graphique du bas est beaucoup plus irrégulier, avec des retours en arrière plus fréquents.
Mentionnons aussi que la justification peut créer des lézardes/rivières (enchainement vertical de larges espaces), mais c’est surtout notable avec un colonnage réduit.
Mais ces problèmes de mise en page sont largement réduits en coupant les mots. Cette fonctionnalité de césure est maintenant supportée en français par tous les navigateurs modernes et sur tous les OS.
On est d’accord que ce n’est pas parfait :
les espaces restent un peu irrégulières, les algorithmes « H&J » (hyphenation & justification) des navigateurs restant plus basiques que ceux des deux stars du domaine (InDesign et Latex).
La césure elle même est problématique. Elle complexifie la lecture et peut être gênante dans des contextes de basse vision (source).
Il est probable que les évolutions techniques réduisent le premier problème :
Une spécification est à l’étude pour ajouter des paramètres CSS supplémentaires, semblables aux paramètres manuels que l’on trouve dans inDesign.
Des expérimentations existent avec les polices variables pour jouer sur un critère supplémentaire : la largeur des caractères. On arrive à des variations d’espaces très faibles, tandis que l’ajustement des caractères est à peine remarquable. Le passage essentiel de la conférence est vers 20m40.
Le créateur d’un site peut remplacer coté client l’algorithme du navigateur par un autre.
2. Le dentelage comme indice visuel
Second argument contre la justification : l’aspect « dentelé » des fins de ligne permet au lecteur de se repérer. Chaque petite différence de longueur constitue autant d’indices visuels pour enchainer les lignes sans se tromper ou hésiter.
Intuitivement ça me parait un bon argument. Cette fois-ci, ce n’est pas un problème d’implémentation ou de compromis, c’est inhérent à l’effet visuel.
J’aimerais juste avoir plus de détails : ce n’est pas un argument cité souvent, à quel point est-il avéré et compris ? Encore une fois, on nage à vue.
Résumé
On continue à aligner le texte par défaut – et on continuera, tant qu’il n’y aura pas de grosse évolution technique et qu’il n’y aura pas de preuve béton que la justification ne crée aucun problème.
Cela n’empêche pas de proposer aux lecteurs une option pour changer de style et activer la justification.
Cela n’empêche pas non plus de continuer à expérimenter. Les limites du web et des livres électroniques en matière de typographie par rapport à l’édition ne sont pas inéluctables.
Note sur le RGAA : il y a juste le critère (1.4.8) (AAA, non obligatoire donc) qui oblige à avoir le texte à gauche par défaut ou via option.
2021~PDF~RésuméIndividuals with dyslexia present with reading-related deficits including inaccurate and/or less fluent word recognition and poor decoding abilities. Slow reading speed and worse text comprehension can occur as secondary consequences of these deficits. Reports of visual symptoms such as atypical eye movements during reading gave rise to a search for these deficits’ underlying mechanisms. This study sought to replicate established behavioral deficits in reading and cognitive processing speed while investigating their underlying mechanisms in more detail by developing a comprehensive profile of eye movements specific to reading in adult dyslexia. Using a validated standardized reading assessment, our findings confirm a reading speed deficit among adults with dyslexia. We observed different eye movements in readers with dyslexia across numerous eye movement metrics including the duration of a stop (i.e., fixation), the length of jumps (i.e., saccades), and the number of times a reader’s eyes expressed a jump atypical for reading. We conclude that individuals with dyslexia visually sample written information in a laborious and more effortful manner that is fundamentally different from those without dyslexia. Our findings suggest a mix of aberrant cognitive linguistic and oculomotor processes being present in adults with dyslexia.
2020~RésuméIn a world with different readers with varying needs, the idea that readers might be given the option of text formatting their own text in advance seems very appealing. In this research, differences between reading speed, reading comprehension, and reading comfort were compared with the pre-set and self-set texts. The respondents read paragraphs and identified illogical words contained therein, while reading two comparable blocks of self-set and pre-set texts. The differences in the number of paragraphs read and the mistakes made in a limited timeframe were compared using a web test that was based on the Tinker’s test. The results showed that the respondents encounter different difficulties while reading digital text. We statistically proved that people with dyslexia chose larger type sizes more frequently than people without dyslexia, whereas no such statistically significant trend was observed for all other variables (typeface, tracking, and leading). We did not observe any significant differences between the reading speed associated with pre-set and self-set texts; however, the reading speed was higher in the group of people without dyslexia. A significant difference was observed in reading comprehension, because reading comprehension was better in the case of self-set text used.
2017~PDF~RésuméThe presentation of a text has a significant effect on the reading speed of people with dyslexia. This paper presents a set of recommendations to customize texts on a computer screen in a more accessible way for this target group. This set is based on an eye tracking study with 92 people, 46 with dyslexia and 46 as control group, where the reading performance of the participants was measured . The following parameters were studied: color combinations for the font and the screen background, font size, column width as well as character, line and paragraph spacings. It was found that larger text and larger character spacings lead the participants with and without dyslexia to read significantly faster . The study is complemented with questionnaires to obtain the participants’ preferences for each of these parameters, finding other significant effects. These results provide evidence that people with dyslexia may benefit from specific text presentation parameters that make text on a screen more readable. So far, these recommendations based on eye tracking data are the most complete for people with dyslexia.
2016~PDF~RésuméPurpose of review<br>
We review current knowledge about the nature of reading development and disorders, distinguishing between the processes involved in learning to decode print, and the processes involved in reading comprehension.<br>
<br>
Recent findings<br>
Children with decoding difficulties/dyslexia experience deficits in phoneme awareness, letter-sound knowledge and rapid automatized naming in the preschool years and beyond. These phonological/language difficulties appear to be proximal causes of the problems in learning to decode print in dyslexia. We review data from a prospective study of children at high risk of dyslexia to show that being at family risk of dyslexia is a primary risk factor for poor reading and children with persistent language difficulties at school entry are more likely to develop reading problems. Early oral language difficulties are strong predictors of later difficulties in reading comprehension.<br>
<br>
Summary<br>
There are two distinct forms of reading disorder in children: dyslexia (a difficulty in learning to translate print into speech) and reading comprehension impairment. Both forms of reading problem appear to be predominantly caused by deficits in underlying oral language skills. Implications for screening and for the delivery of robust interventions for language and reading are discussed.
2007~RésuméThis research investigated the effects of text presentation on online behaviour and preferences in order to generate design guidelines for the production of web pages. Previous research has indicated that method of text presentation has a significant impact on usability. The present research found that varying text presentation had a significant effect on task performance, with wider line spacing leading to better accuracy and to faster reaction times. Left-aligned text led to better performance, although participants preferred justified text. Implications of these results for the design of web pages are discussed and recommendations given.
2006~RésuméMost web sites are heavily text-based. Previous research has indicated that the way in which this text is presented may have a significant impact on usability. This paper reports findings from two experiments that explored the influence of font type and line length on a range of performance and subjective measures. Experiment 1 used a visual search task and Experiment 2 examined information retrieval. Overall, there was little impact of font on task performance, although the effect of line length was significant, with longer line lengths facilitating better scanning (Experiment 1) and shorter line lengths leading to better subjective outcomes (Experiments 1 and 2). Implications of these results for the design of web pages are discussed and recommendations given.
1981~RésuméDyslexics have been found to exhibit during reading erratic eye movement (EM) patterns and characteristics, which are different from those of all other readers. The present study shows that the dyslexics’ erratic EM’s are present not only in reading but also in the simple sequential task of trying to follow light sources each of which is illuminated sequentially. These results could manifest a central malfunction in dyslexics, namely sequential disability and/or oculomotor malfunction.<br>
Résumé<br>
On a constaté chez les dyslexiques qu’il existait des types erratiques de mouvements oculaires (MO) dans la lecture; leurs caractéristiques les différenciaient de ceux des autres lecteurs. Cette étude montre que les MO erratiques existent non seulement dans la lecture mais également dans une tâche séquentielle simple consistent à suivre des sources lumineuses dont chacune est illuminée successivement. Ces résultats paraissent témoigner d’un dysfonctionnement central chez les dyslexiques à savoir une incapacitéà réaliser des séquences et/ou une dysfonction oculomotrice.<br>
Zusammenfassung<br>
Geben Augenbewegungen den Schlüssel zur Dyslexie? Dyslektische Patienten führten beim Lesen unregelmäβige Augenbewegungen aus, die von denen aller anderen Leser unterschiedlich waren. Die hier vorgelegte Untersuchung zeigt, daβ diese Art von Augenbewegungen nicht nur beim Lesen, sondern auch bei einer einfachen sequenti ellen Aufgabe vorliegen, bei der Lichtquellen verfolgt werden sollen, von denen eine nach der anderen erleuchtet wird. Diese Ergebnisse könnten eine zentrale Funktionsstörung bei Dyslektikern anzeigen, eine Sequenzstörung und/oder eine okulomotorische Funktionsstörung.
Des langages pour le mouvement2023-09-05T00:00:00Zhttps://toutcequibouge.net/blog/2023/09/des-langages-pour-le-mouvement/
Une marotte des philosophes et autres théoriciens, c’est d’inventer un langage parfait et universel. Puisqu’il est doit être parfait, ce language s’abstrait souvent des écritures courantes et invente son propre système graphique.
Il y a le LoCos inventé par Yukio Ota, l’Isotype de Neurath, la sémantographie de Bliss… J’avais fait un petit fil à ce sujet.
Exemples de symboles en LoCos : chose, ceci, cela, pensée, matin, après-midi…Je veux aller au cinéma en sémantographie
De la danse…
Il y a aussi des langages pas universels et dédiés au mouvement. L’idée est beaucoup utilisée pour la danse. Dès le 17e siècle, on trouve des premiers systèmes basiques.
Au 18e siècle, la danse baroque d’inspiration française est une part importante de la vie sociale dans les cours européennes et plusieurs systèmes de notation apparaissent et deviennent populaires. Ils se font concurrence et cela va jusqu’au procès. Les plus connus sont ceux de Feuillet en France puis Tomlinson en Angleterre. Il semble que ces systèmes n’nont pas qu’un simple rôle de transcription. Etant donné leur popularité, ils influencent aussi les tendances. Leurs limites (notamment pour encoder autre chose que le mouvement des pieds) deviennent la limite des mouvements dansés.
Au 20e siècle apparaissent des systèmes beaucoup plus complets. Il semble que les principaux soient la cinétographie de Laban et la choréologie de Benesh.
… À l’industrie
Au début du 20e, l’idée de codifier le mouvement est appliquée à un tout autre domaine : l’organisation scientifique du travail. Les époux Gilbreth créent un les therbligs, une liste de 18 symboles pour décrire toutes les actions effectués par un ouvrier. L’idée n’est pas d’encoder toute la subtilité des mouvements mais plutôt de normaliser et synthétiser les opérations élémentaires que doit réaliser un ouvrier sur son environnement, dans une optique d’amélioration de la productivité. Un pur produit du taylorisme.
Liste de symboles avec un nom associé : chercher, sélectionner, porter, assembler…
Fidèle à l’esprit scientifique de l’époque, les Gilbreth ont une approche empirique, notamment en enregistrant les mouvements de travailleurs. Ils baptisent « chrono-cyclographes » ces photos à exposition longue où des petites lampes sont attachés aux membres.
Notons que l’influence des méthodes des Gilbreth se fait encore sentir aujourd’hui en facteur humain et en ergonomie, notamment dans l’usage de diagramme pour l’analyse de l’activité.
Et au-delà ?
On trouve quelques travaux récents, notamment pour faciliter la conception d’interfaces de reconnaissance gestuelle.
Archiver des fils Twitter : panorama des possibilités2022-12-20T00:00:00Zhttps://toutcequibouge.net/blog/2022/12/archiver-des-fils-twitter-panorama-des-possibilites/
EDIT : Ma technique utilisée ici est maintenant impossible (ou prohibitive) depuis l’énorme serrage de vis sur les API de Twitter par leur nouveau PDG (son nom m’échappe…).
EDIT 2 : J’ai développé Tweet To Toot pour republier des fils sur Mastodon à partir d’une archive. Ça a quelques limites par rapport à l’ancienne technique, mais aussi l’énorme avantage que les fils peuvent maintenant vivre sur une nouvelle plateforme.
Pour archiver des fils de votre compte, l’export fourni par Twitter ne suffit pas. Chaque tweet est isolé, sans les messages auquel il répond. Plus fondamentalement, la notion de « thread » n’existe pas dans l’API.
Il faut se tourner vers des outils externes.
Pour exporter un fil récent, on peut utiliser cet outil en ligne, très simple puisqu’il suffit d’entrer l’URL d’un tweet. Mais ne marche pas avec de vieux messages.
Avec un export officiel, on peut utiliser cet outil un peu compliqué ou celui-ci, plus simple. Tous deux créent un mini-site web avec l’intégralité des tweets, issus de fils ou non.
Il y a aussi cette expérimentation en ligne qui simule un navigateur scrollant Twitter pour générer un PDF, à des fins de notarisation et de preuve d’authenticité.
Et à ma connaissance, c’est tout. A cause des limites de l’API, il n’existe pas d’outils respectant les critères suivant :
Pas besoin de télécharger l’export officiel si le fil évolue ;
Marche avec des vieux threads ou des threads couvrant une longue période ;
Marche à partir du premier tweet d’un fil, pas uniquement le dernier ;
Du coup j’ai codé un truc. Bon c’est moins complet que les autres et ça respecte pas le troisième critère (impossible avec l’API), mais en gros vous lui donnez un token d’accès à l’API et une liste de threads (un titre et l’ID d’un tweet de départ) et ça recrache un fichier JSON avec en gros :
Le contenu des tweets eux-même
Le contenu des tweets cités, même d’autres auteurs, souvent indispensable à la compréhension d’un fil.
Un aperçu des liens avec titre, image, etc.
Le script est pensé pour tourner régulièrement et alimenter mon blog. Si aucun nouveau tweet n’est détecté, il s’arrête et réutilise les anciennes données en cache.
Par ailleurs, mon blog génère automatiquement une page listant tous les fils et une page pour chacun d’entre eux.
Archives de classiques de l'animation Flash2022-11-20T00:00:00Zhttps://toutcequibouge.net/blog/2022/11/archives-de-classiques-de-lanimation-flash/
La disparition de Flash entraine de gros risques de perdre tout un pan de l’histoire du web. Des initiatives se sont créées, comme cette archive de jeux vidéo. Il y a aussi ce projet d’émulation.
Il y a quelques temps, j’ai utilisé cette bibliothèque pour héberger et rendre accessible quelques classiques de l’animation en ligne qui ont bercé ma (post-) adolescence.
Entretemps, le projet a publié des extensions pour les principaux navigateurs. Si vous l’installez et arrivez à trouver une animation Flash basique et encore en ligne, vous devriez pouvoir ouvrir cette animation directement dans votre navigateur.
Une meilleure représentation des tailles de navigateur populaires avec Google Analytics2022-08-15T00:00:00Zhttps://toutcequibouge.net/blog/2022/08/une-meilleure-representation-des-tailles-de-navigateur-populaires-avec-google-analytics/
Vous voulez savoir si vos utilisateurs ont des petits ou des gros smartphones ? Des laptops ou des écrans externes ? La taille de la fenêtre de leur navigateur, indépendamment de l’écran ?
Everything Everywhere All At Once est un film extraordinaire. Et comme j’ai une légère fascination pour les séries visuelles (exemples ici ou là), voici une mosaïque interdimensionnelle de toutes les Evelyn, l’héroïne jouée par Michelle Yeoh.
Et c’est tout.
Faire des slides comme un dev quand on est designer2022-02-05T00:00:00Zhttps://toutcequibouge.net/blog/2022/02/faire-des-slides-comme-un-dev-quand-on-est-designer/
Un retour sur mon expérience d’écrire un gros support de cours avec Reveal.js/Asciidoc et dans un éditeur de texte. Ainsi que sur le petit kit de démarrage que j’en ai tiré.
Récemment, j’ai donné un cours d’introduction au design UX. La question des diapos s’est tout de suite posée : rédiger et mettre en forme des dizaines de slides, importer texte et images de précédents supports… Même avec un template, c’est fastidieux. Et justement, je n’en avais pas sous la main.
J’ai donc pensé à Reveal.js, une bibliothèque permettant de générer des slides en HTML. Vous voyez la grande bannière sur leur page d’accueil ? Elle est interactive, c’est un exemple de slides.
L’intérêt de Reveal.js ?
C’est du web : le résultat est un fichier HTML léger et lisible n’importe où. Pas de risques d’être prisonnier d’un format ou d’un logiciel particulier. Le code généré est potentiellement accessible à un lecteur d’écran (plus qu’un Google Slide en tout cas). La boite spécialisée Acess42 utilise un système comparable pour ses présentations.
Des transitions classes entres slides, sans ressembler à un Prezi circa 2010.
Une métaphore spatiale intéressante pour structurer le cours : on peut créer des groupes de slides qui vont défiler verticalement.
Avec quelques plugins, une navigation puissante : table des matière automatique, recherche dans le texte, ou mode panorama.
Problème : la rédaction reste très verbeuse. On doit écrire dans le fichier HTML directement et même en tirant parti du support de Markdown on se retrouve vite avec ce genre de charabia [1] :
<sectiondata-markdown><scripttype="text/template">
- Item de liste qui va apparaitre d'abord <!-- .element: class="fragment" data-fragment-index="2" -->
- Item de liste qui va apparaitre ensuite <!-- .element: class="fragment" data-fragment-index="1" --></script></section><sectiondata-markdown><scripttype="text/template"><!-- .slide: data-background="#ff0000" -->
## Tralala pouet pouet
[Ceci est un lien](https://p.eertu.be/w/ebe5cf34-b30b-414f-90f6-789adb859d75)
</script></section>
Arrive Asciidoc. C’est un format un peu plus ancien que Markdown, et aussi un peu plus riche (donc complexe). Une extension permet de générer une présentation complète à partir d’un fichier. L’avantage est d’écrire dans un éditeur de texte, sans se soucier de mise en forme ni de détails techniques. Dans VS Code ça donne quelque chose ça :
Chaque titre est un slide. La hiérarchie de titres, signifiée par le nombre de =, permet de générer la table des matières à gauche et aussi de créer les rubriques « verticales » mentionnées plus haut. Globalement, c’est assez génial pour réfléchir à l’enchainement des idées et déplacer rapidement du contenu d’un endroit à l’autre.
Pour autant, après avoir écrit 375 diapos avec, est-ce que je recommande le machin ? Ca dépend pour qui. Si vous trouvez déjà Markdown compliqué ou que vous n’aimez pas bricoler avec plusieurs outils interconnectés, fuyez. Ou bien utiliser l’éditeur graphique vendu par le créateur de reveal.js.
Mais si vous êtes plus éditeur de texte que Powerpoint, plus texte qu’image, que l’idée d’ajuster le placement de dizaines de blocs vous hérisse et que vous aimez les slides minimalistes, testez donc.
Réinsistons sur les avantages de la portabilité :
Mes supports sont présentement une simple page en ligne.
J’ai pu les réviser sur mon téléphone.
Exporter trois slides de consigne en une seule page imprimable m’a littéralement pris quelques clics.
Mais il faut aussi détailler certains inconvénients :
Il y a une courbe d’apprentissage assez raide, que j’ai tenté d’alléger avec ce kit.
Même avec un bon outillage, ce n’est pas du WYSIWYG. On n’est jamais à l’abri de faire une erreur de syntaxe.
Des mises en page qui prendraient deux secondes dans un logiciel classique peuvent se révéler compliquées. Il faut ajouter quelques classes au slide pour servir de « hook » (cf. cet exemple), écrire du CSS et le rendre adaptable à du texte et des images de taille différentes. Le lien précédent montre quelques possibilités prédéfinies, mais elles restent limitées. J’imagine que créer un thème complet peut être un investissement rentable si on est un conférencier régulier.
À long terme c’est pratique d’avoir toutes les médias dans un dossier, mais en attendant, intégrer une image à un slide est fastidieux puisque il faut l’enregistrer dans le bon dossier, insérez la balise image::nomDeFichier[], sans se tromper de nom. Alors qu’avec Powerpoint/Keynote/Slides je copie l’image dans le presse-papier et la colle dans le slide, sans jamais gérer de fichier. Mais un peu d’outillage améliore la situation.
On peut écrire le markdown dans un fichier à part, mais il faut un fichier par slide, c’est impraticable. ↩︎
Motifs de Truchet, histoire de l'art et génération procédurale2021-08-08T00:00:00Zhttps://toutcequibouge.net/blog/2021/08/motifs-de-truchet-histoire-de-lart-et-generation-procedurale/
Quand un post comprend une jolie image, je la spécifie comme « mise en avant » et elle se retrouve en vignette dans la page de liste. Que faire quand il n’y a pas d’image ? Laisser un vide ou avoir une image par défaut, toujours la même, ne serait pas très élégant. Pour obtenir des images variées mais avec une unité de style, la génération procédurale est l’approche parfaite. Elle permet de générer des formes en alliant une trame de base et des paramètres aléatoires. On va l’appliquer à une technique bien connue en histoire de l’art : le pavage d’un espace en le remplissant avec des carreaux de base.
Ici on utilise des motifs dits de Truchet, du nom du savant éponyme : Sébastien Truchet, ingénieur hydraulique, mathématicien, typographe… Rien que ça. Il est notamment à l’origine des eaux de Versaille, du premier point typographique et de Times News Roman, au moins partiellement et indirectement.
L’idée d’origine
Revenons à notre pavage. Chez Truchet, il y avait quatre carreaux de base :
Comme on le voit, c’est une variation toute bête autour d’un simple triangle. Mais avec ça, il obtenait déjà des formes variées, en les regroupant en bandes, en losange, ou en alternant noirs et blancs.
Chez bibi
Je reprends une idée de Cyril Harvey Smith : uniquement deux carrés, comprenant des quarts de cercle.
Si on ajoute de manière concentriques plusieurs arcs de cercle et des dégradés de couleur, c’est encore plus joli.
La trouvaille pour apporter du rythme, c’est l’absence de rupture : que quelque soit l’orientation des blocs, chaque arc est connecté à un arc voisin. Le tout forme un motif de labyrinthe, alors que le placement des blocs est purement aléatoire. La seule chose qui ne l’est pas, c’est la couleur de fond qu’on devine au centre des cercles.
Essayez vous-même : cliquez sur un carreau pour le faire pivoter et voir que ça ne rompt pas l’enchainement.
Autres exemples
Voici d’autres résultats très différents, obtenus uniquement en jouant sur quelques paramètres. Pour essayer vous-même, aller voir cet outil interactif. (À qui j’ai beaucoup emprunté, techniquement et visuellement). L’auteur ajoute en plus des paramètres pour délier chaque arc concentrique et ainsi créer un effet de « tressage » plus ou moins échevelé, suivant à quel point on pousse les paramètres twist et scramble.
Pour aller plus loin
Sur l’histoire des ornementations, voir cet article et cette galerie sur le livre La Grammaire de l’ornement, cette page sur le pavage et celle-ci sur les carreaux.
Pour une analyse psychologique de notre goût pour les motifs, voir le livre The sense of order : a study in the psychology of decorative art (accessible en ligne), par le grand historien de l’art Ernst Gombrich. Résumé grossier (j’en suis seulement à l’intro) : on aime un certain compromis entre ordre et chaos, car on est cognitivement câblé pour chercher des structures dans le monde changeant qui nous entoure.
Sur les affinités naturelles entre informatique, génération procédurale et motifs, voir le livre collectif 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 (accessible en ligne). Oui c’est le titre. C’est une ligne de Basic générant un labyrinthe étonnamment semblable au motif originel de Smith plus haut.
Étant donné l’expressivité de ce genre de pavage, vous ne serez pas étonné d’apprendre que c’est un domaine d’exploration en mathématiques. Des pavés plus complexes sont même utilisés comme modèles de calcul. Après tout, l’informatique exotique est un genre en soi.
Au-delà du carré de base et du visuel du triangle, on peut utiliser bien des formes. Voici le travail d’un chercheur qui fait même des motifs en 3D. Voici aussi des exemples avec plus de degrés de symétrie, avec des motifs enchassés…. Et pourtant, il y a quelque chose de spécial avec le triangle : c’est le plus simple des polygones et pourtant il peut tout représenter. En image de synthèse, c’est une brique de base pour tout modéliser, au point que les polygones plus complets sont souvent convertis en triangles.
Quand on lit l’article où Smith introduit la variante que j’utilise, on s’aperçoit qu’il en parle à peine, négligement et toute à la fin. C’est ironique, vu la popularité de cette variante. L’article est plus général, c’est une méditation sur la notion de structure visuelle : comment elle nait de la composition de formes de simples, d’alternance de fond/figure, de changements de densité. Comment l’exploration visuelle de ces structures est intrinsèquement temporelle de. Le texte est dense, parfois incompréhensible et quasi-mystique. Extraits :
All tilings combine aspects of lines-of-progress and cyclical closures, but they differ in their relative emphasis on internal or boundary balance: pattern depends less upon the fit of any definable polygons with their immediate neighbors than upon the whole hierarchy of directions. The eye enjoys the alternating perception of boundaries that enclose or exclude or are themselves regions of which the inner structure is remembered and does not need further analysis.
[…]
The structure of matter devolves ultimately into the intimate coexistence of something like corpuscles of nothing and atoms of something, segregating through the accidents of history to yield regions differing in density intimately interwoven on different scales. The existence of the world as well as human perception and analysis of any part of it is a matter of the angular scale of resolution and of the time necessary for making comparison between the different parts. Both the stability of material structures and human perception of them involve the tracing of directions and terminations, the formation and the finding of closed boundaries surrounding regions of substructure, that may be similar or different in the density or shape and orientation of the parts. Without such variations and without time to compare remembrances of them, nothing can be experienced.
Détails techniques
Ce blog est statique : les pages sont crées à l’avance par un serveur Node qui tourne juste le temps de la génération, pas quand vous visitez le site. Lors de cette phase de compilation, les motifs de Truchet sont générées. Ceux de la section « Chez Bibi », eux, sont créés à la volée par votre navigateur. D’ailleurs ce ne sont pas des fichiers d’image mais des éléments <canvas>.
Dans les deux cas, le cœur du code est le même : truchet_core.ts. C’est tout l’intérêt d’utiliser Javascript pour le front et le back. D’ailleurs, pour pouvoir dessiner des pixels sur un <canvas>, il faut l’API Canvas. De base, Node ne sait pas ce que c’est : c’est une technologie de navigateur dont il n’a pas besoin. De même, il ne sait pas ce qu’est un élément <img> ou un click de souris. Pas grave, Canvas a été ré-implémenté pour Node.
Intégrer dans un blog Eleventy des listes d'articles tirées de Zotero2021-08-06T00:00:00Zhttps://toutcequibouge.net/blog/2021/08/integrer-dans-un-blog-eleventy-des-listes-darticles-tirees-de-zotero/
Zotero est un logiciel de gestion documentaire, plutôt pensé pour le monde académique mais qui peut s’adapter à pas mal de types de documents et d’usages.
J’essaye d’y enregistrer et classer des papiers et articles de blog sur des sujets qui m’intéressent.
Zotero a une interface en ligne et si un profil est public, tout le monde peut consulter les listes établies par ce profil. Mais comment faire si je veux intégrer à un post que j’écris une liste spécifique (par exemple une combinaison de catégories et de tags), en appui d’un propos quelconque ? Il y a quelques plugins, notamment pour Wordpress, mais je suis sous Eleventy.
C’est là qu’intervient l’API de Zotero et ce client en Javascript qui facilite le dialogue avec celle-ci.
J’ai écrit un script, à invoquer simplement dans le corps d’un post avec un « shortcode » (un raccourci qui exécute un script), de la sorte :
… Et hop il me génère une liste d’articles avec le titre, l’URL source, le résumé et si disponible un PDF de l’article complet. Un exemple ici.
Potentiellement on pourrait remonter pas mal d’autres attributs, les formater comme dans une bibliographie universitaire… mais dieu merci je ne suis qu’un humble blogueur indépendant. :p
Utiliser un shortcode Nunjuncks dans un fichier de texte Markdown nécessite de spécifier markdownTemplateEngine: njk dans la config globale Eleventy.
Ce shortcode appelle zotero.js, qui récupère de l’API les données et les transmet sous forme de tableau d’objets à zotero.njk, le bout de template qui se charge de génèrer le HTML.
Le shortcode est asynchrone pour permettre les requêtes à l’API externe.
On fait 3 salves de requêtes
Comme l’API ne permet pas de requêter le contenu d’une collection par son nom, il faut d’abord requêter toutes les collections et trouver l’ID de la bonne collection.
On requête ensuite les articles eux-même. Potentiellement ça nécessite un lot de requêtes, si le nombre d’articles dépasse les limites de l’API.
Enfin on récupère les pièces jointes de chaque article pour en tirer l’URL directe d’un PDF. Zotero a l’air assez doué pour dénicher ce lien.
Bibliographie sur le consentement et la vie privée2021-08-02T00:00:00Zhttps://toutcequibouge.net/blog/2021/08/bibliographie-sur-le-consentement-et-la-vie-privee/
Une compilation d’articles, principalement académiques, sur le sujet du consentement dans le cadre du RGPD et du respect de la vie privée.
RésuméLe laboratoire d’innovation numérique de la CNIL (LINC) publie son 6ème cahier Innovation et prospective, La Forme des choix - Données personnelles, design et frictions désirables : une exploration des enjeux du design dans la conception des services numériques, au prisme de la protection des données et des libertés.
RésuméPrivacy is a right to the appropriate flow of information. A third area where researchers may struggle is privacy. As Lowrance (2012) put it quite succinctly: “privacy should be respected because people should be respected.” Privacy, however, is a notoriously messy concept (Nissenbaum 2010, chap. 4), and, as such, it
2020~RésuméGood news: we removed all cookie banners from GitHub! 🎉 No one likes cookie banners. But cookie banners are everywhere. So how did we pull this off? Well, EU law requires you to use cookie
2015~RésuméThis paper describes two privacy patterns for creating privacy transparency: the Personal Data Table pattern and the Privacy Policy Icons pattern, as well as a full overview of privacy transparency patterns. It is a first step in creating a full set of privacy design patterns, which will aid software developers with the realization of privacy by design. Privacy design patterns are design solutions to recurring privacy problems; as such they can facilitate the development of privacy-by-design solutions. Privacy design patterns as such exist, but a complete, uniform and readily applicable overview does not exist. This paper presents such an overview for privacy transparency patterns: they focus on solutions on how to create privacy transparency. Two privacy transparency patterns are fully described: the Personal Data Table pattern and the Privacy Policy Icons pattern.
RésuméIn this second part of the series, we’ll look into notorious GDPR cookie consent prompts, and how we can design the experience around them better — with our users’ privacy in mind, of course.
RésuméIn experience design, friction is usually the opposite of being intuitive or effortless. However, that doesn’t mean that it’s always bad for the users. In this article, you’ll learn when and how friction can be an efficient tool to actually design better experiences.
RésuméDark Patterns are tricks used in websites and apps that make you buy or sign up for things that you didn’t mean to. The purpose of this site is to spread awareness and to shame companies that use them.
2020~RésuméThe picture superiority effect refers to the phenomenon in which pictures and images are more likely to be remembered than words. This effect has been demonstrated in numerous experiments using different methods. It is based on the notion that « human memory is extremely sensitive to the symbolic modality of presentation of event information ». Explanations for the picture superiority effect are not concrete and are still being debated.
2016~RésuméDesigning privacy controls that are intuitive for end users involves several challenges. Graphic representations could certainly contribute to tackle such challenges, however, a visual vocabulary for privacy solutions is currently lacking. To contribute to that end, in this paper we report a review of online images related to privacy. We identify graphic representations that illustrate privacy objects, mechanisms and actions, and categorize them according to the concepts covered. Seeking to develop a set of icons to illustrate privacy concepts, we analyze online contents publicly available from social media and extract representations that commonly refer to privacy concepts. The contributions of this paper include: (1) a set of graphics that represent privacy mechanisms, objects and actions; and (2) a vocabulary for such graphic representation. The evidence is drawn from the analysis and discussion of 241 images selected by the authors from ten online image repositories.
2010~RésuméEarlier work has shown that consumers cannot effectively find information in privacy policies and that they do not enjoy using them. In our previous research we developed a standardized table format for privacy policies. We compared this standardized format, and two short variants (one tabular, one text) with the current status quo: full text natural-language policies and layered policies. We conducted an online user study of 764 participants to test if these three more-intentionally designed, standardized privacy policy formats, assisted by consumer education, can benefit consumers. Our results show that standardized privacy policy presentations can have significant positive effects on accuracy and speed of information finding and on reader enjoyment of privacy policies.
2009~PDF~RésuméWe used an iterative design process to develop a privacy label that presents to consumers the ways organizations collect, use, and share personal information. Many surveys have shown that consumers are concerned about online privacy, yet current mechanisms to present website privacy policies have not been successful. This research addresses the present gap in the communication and understanding of privacy policies, by creating an information design that improves the visual presentation and comprehensibility of privacy policies. Drawing from nutrition, warning, and energy labeling, as well as from the effort towards creating a standardized banking privacy notification, we present our process for constructing and refining a label tuned to privacy. This paper describes our design methodology; findings from two focus groups; and accuracy, timing, and likeability results from a laboratory study with 24 participants. Our study results demonstrate that compared to existing natural language privacy policies, the proposed privacy label allows participants to find information more quickly and accurately, and provides a more enjoyable information seeking experience.
RésuméDatenschutzerklärungen sind meist langatmige Texte, deren Kernaussagen sich nicht unbedingt leicht erschließen lassen. Webdienste werden international genutzt. Persönliche Daten werden in immer komplexeren Strukturen gespeichert und verarbeitet. Aber wer liest schon die Datenschutzerklärung, geschwe
RésuméBuilt for Mobile from The Ground Up<br>
ACT | The App Association has developed the Privacy Dashboard, an open source privacy policy display optimized for the small screens of smartphones and tablets. With a graphical interface familiar to mobile device users, the Privacy Dashboard provides a simple way for consumers to review
RésuméA new tool and web site launched today purports to clear some of the fog around the issue of online privacy. PrivacyChoice has analyzed more than a thousand of the most trafficked web sites to score them on a scale of 1 to 100 in their collection and use of personal data, as well as the collection and use practices of the third-party companies that they allow to track users on their sites.
2020~RésuméIn this article, Professor Daniel Solove deconstructs and critiques the privacy paradox and the arguments made about it. The “privacy paradox” is the phenomenon where people say that they value privacy highly, yet in their behavior relinquish their personal data for very little in exchange or fail to use measures to protect their privacy. Commentators typically make one of two types of arguments about the privacy paradox. On one side, the “behavior valuation argument” contends behavior is the best metric to evaluate how people actually value privacy. Behavior reveals that people ascribe a low value to privacy or readily trade it away for goods or services. The argument often goes on to contend that privacy regulation should be reduced. On the other side, the “behavior distortion argument” argues that people’s behavior isn’t an accurate metric of preferences because behavior is distorted by biases and heuristics, manipulation and skewing, and other factors. In contrast to both of these camps, Professor Solove argues that the privacy paradox is a myth created by faulty logic. The behavior involved in privacy paradox studies involves people making decisions about risk in very specific contexts. In contrast, people’s attitudes about their privacy concerns or how much they value privacy are much more general in nature. It is a leap in logic to generalize from people’s risk decisions involving specific personal data in specific contexts to reach broader conclusions about how people value their own privacy. The behavior in the privacy paradox studies doesn’t lead to a conclusion for less regulation. On the other hand, minimizing behavioral distortion will not cure people’s failure to protect their own privacy. It is perfectly rational for people — even without any undue influences on behavior — to fail to make good assessments of privacy risks and to fail to manage their privacy effectively. Managing one’s privacy is a vast, complex, and never-ending project that does not scale; it becomes virtually impossible to do comprehensively. Privacy regulation often seeks to give people more privacy self-management, such as the recent California Consumer Privacy Act. Professor Solove argues that giving individuals more tasks for managing their privacy will not provide effective privacy protection. Instead, regulation should employ a different strategy — focus on regulating the architecture that structures the way information is used, maintained, and transferred.
2019~RésuméConsent permeates both our law and our lives — especially in the digital context. Consent is the foundation of the relationships we have with search engines, social networks, commercial web sites, and any one of the dozens of other digitally mediated businesses we interact with regularly. We are frequently asked to consent to terms of service, privacy notices, the use of cookies, and so many other commercial practices. Consent is important, but it’s possible to have too much of a good thing. As a number of scholars have documented, while consent models permeate the digital consumer landscape, the practical conditions of these agreements fall far short of the gold standard of knowing and voluntary consent. Yet as scholars, advocates, and consumers, we lack a common vocabulary for talking about the different ways in which digital consents can be flawed.This article offers four contributions to improve our understanding of consent in the digital world. First, we offer a conceptual vocabulary of “the pathologies of consent” — a framework for talking about different kinds of defects that consent models can suffer, such as unwitting consent, coerced consent, and incapacitated consent. Second, we offer three conditions for when consent will be most valid in the digital context: when choice is infrequent, when the potential harms resulting from that choice are vivid and easy to imagine, and where we have the correct incentives choose consciously and seriously. The further we fall from these conditions, the more a particular consent will be pathological and thus suspect. Third, we argue that out theory of consent pathologies sheds light on the so-called “privacy paradox” — the notion that there is a gap between what consumers say about wanting privacy and what they actually do in practice. Understanding the “privacy paradox” in terms of consent pathologies shows how consumers are not hypocrites who say one thing but do another. On the contrary, the pathologies of consent reveal how consumers can be nudged and manipulated by powerful companies against their actual interests, and that this process is easier when consumer protection law falls far from the gold standard. In light of these findings, we offer a fourth contribution — the theory of consumer trust we have suggested in prior work and which we further elaborate here as an alternative to our over-reliance on consent and its many pathologies.
2014~RésuméThis Article is the first in a series on the legal and sociological aspects of privacy, arguing that private contexts are defined by relationships of trust among individuals. The argument reorients privacy scholarship from an individual right to social relationships of disclosure. This has implications for a wide variety of vexing problems of modern privacy law, from limited disclosures to “revenge porn.” The common everyday understanding is that privacy is about choice, autonomy, and individual freedom. It encompasses the individual’s right to determine what he will keep hidden and what, how, and when he will disclose to the public. Privacy is his respite from the prying, conformist eyes of the rest of the world and his expectation that the things about himself that he wants to keep private will remain so. These ways of understanding privacy are variations on the same theme: that privacy is a tool of the individual “against the world.” None of them adequately protect personal privacy where sharing personal information with others is a precondition of modern life. This Article argues that privacy is really about trust. Rather than accept the traditional division between public and private, and rather than begin and end the discussion of privacy as an individual right, this Article bridges social science and the law to argue that disclosures in contexts of trust are private. Trusting relationships are determined by the presence of experience, strong overlapping networks, identity sharing, and other indicia derived from the totality of the circumstances. This conceptualization of privacy, and its related ways of defining when invasions of privacy occur, more effectively protects privacy in a modern digital world.
2014~RésuméChoice can be an extraordinary benefit or an immense burden. In some contexts, people choose not to choose, or would do so if they were asked. For example, many people prefer not to make choices about their health or retirement plans; they want to delegate those choices to a private or public institution that they trust (and may well be willing to pay a considerable amount for such delegations). This point suggests that however well-accepted, the line between active choosing and paternalism is often illusory. When private or public institutions override people’s desire not to choose, and insist on active choosing, they may well be behaving paternalistically, through a form of choice-requiring paternalism. Active choosing can be seen as a form of libertarian paternalism, and a frequently attractive one, if people are permitted to opt out of choosing in favor of a default (and in that sense not to choose); it is a form of nonlibertarian paternalism insofar as people are required to choose. For both ordinary people and private or public institutions, the ultimate judgment in favor of active choosing, or in favor of choosing not to choose, depends largely on the costs of decisions and the costs of errors. But the value of learning, and of developing one’s own preferences and values, is also important, and may argue on behalf of active choosing, and against the choice not to choose. For law and policy, these points raise intriguing puzzles about the idea of “predictive shopping,” which is increasingly feasible with the rise of large data sets containing information about people’s previous choices. Some empirical results are presented about people’s reactions to predictive shopping; the central message is that most (but not all) people reject predictive shopping in favor of active choosing.
2013~RésuméNowadays individuals are often presented with long and complex privacy notices routinely written by lawyers for lawyers, and are then requested to either ‘consent’ or abandon the use of the desired service.The over-use of notice and consent presents increasing challenges in an age of ‘Big Data’.These phenomena are receiving attention particularly in the context of the current review of the OECD Privacy <a href="http://Guidelines.In">Guidelines.In</a> 2012 Microsoft sponsored an initiative designed to engage leading regulators, industry executives, public interest advocates, and academic experts in frank discussions about the role of individual control and notice and consent in data protection today, and alternative models for providing better protection for both information privacy and valuable data flows in the emerging world of Big Data and cloud computing.
2009~RésuméThis paper scrutinizes the use of ‘notice and consent’ to address privacy concerns in online behavioral advertising (OBA). It is part of a larger project with Dan Boneh, Arvind Narayanan, and Vincent Toubiana to evaluate the social, political, and ethical standing of OBA and to develop a system (PRIVADS) for privacy- preserving OBA. We develop a distinction between the ethical implications of the (1) tracking that is required to develop user profiles to be used in the (2) targeting of individual users with particular ads. We show how tracking and targeting present both distinct and overlapping ethical concerns and how existing mitigations tend to treat these concerns as one and the same, even when they seem to address different problems. Anonymization, for instance, attempts to defuse the privacy concerns of tracking by excluding ‘personally identifiable’ or ‘sensitive’ information, but offers little to quell concerns over targeting. On the other hand, policy solutions, particularly notice and consent, attempt to render participation a matter of choice, but generally fail to explain whether a user agrees or disagrees to tracking, targeting, or both. Moreover, we show how various types of complexity render current notice mechanisms practically and inherently insufficient. This is due to (1) the confusing disconnect between the privacy policies of online publishers and the tracking and targeting third parties with whom they contract, each of whom have their own privacy policies; (2) the fickle nature of privacy policies, which may change at any time, often with short notice, and (3) the ever-increasing number of players in the ad network and exchange space, resulting in flows of user data that are opaque to users. To the extent that meaningful notice remains illusory under such conditions, we conclude that even an opt-in regime would lack legitimacy.
2004~PDF~RésuméAlthough a relatively recent phenomenon, the role of informed consent in human research is central to its ethical regulation and conduct. However, guidelines often recommend procedures for obtaining informed consent (usually written consent) that are difficult to implement in developing countries. This paper reviews the guidelines for obtaining informed consent and also discusses prevailing views on current controversies, ambiguities and problems with these guidelines and suggests potential solutions. The emphasis in most externally sponsored research projects in developing countries is on laborious documentation of several mechanical aspects of the research process rather than on assuring true comprehension and voluntary participation. The onus for the oversight of this process is often left to overworked and ill-equipped local ethics review committees. Current guidelines and processes for obtaining informed consent should be reviewed with the specific aim of developing culturally appropriate methods of sharing information about the research project and obtaining and documenting consent that is truly informed. Further research is needed to examine the validity and user friendliness of innovations in information sharing procedures for obtaining consent in different cultural settings.
2020~RésuméIn economics, hyperbolic discounting is a time-inconsistent model of delay discounting. It is one of the cornerstones of behavioral economics and its brain-basis is actively being studied by neuroeconomics researchers.The discounted utility approach states that intertemporal choices are no different from other choices, except that some consequences are delayed and hence must be anticipated and discounted (i.e., reweighted to take into account the delay).<br>
Given two similar rewards, humans show a preference for one that arrives sooner rather than later. Humans are said to discount the value of the later reward, by a factor that increases with the length of the delay. In the financial world, this process is normally modeled in the form of exponential discounting, a time-consistent model of discounting. Many psychological studies have since demonstrated deviations in instinctive preference from the constant discount rate assumed in exponential discounting. Hyperbolic discounting is an alternative mathematical model that agrees more closely with these findings.According to hyperbolic discounting, valuations fall relatively rapidly for earlier delay periods (as in, from now to one week), but then fall more slowly for longer delay periods (for instance, more than a few days). For example, in an early study subjects said they would be indifferent between receiving $15 immediately or $30 after 3 months, $60 after 1 year, or $100 after 3 years. These indifferences reflect annual discount rates that declined from 277% to 139% to 63% as delays got longer. This contrasts with exponential discounting, in which valuation falls by a constant factor per unit delay and the discount rate stays the same.<br>
The standard experiment used to reveal a test subject’s hyperbolic discounting curve is to compare short-term preferences with long-term preferences. For instance: « Would you prefer a dollar today or three dollars tomorrow? » or « Would you prefer a dollar in one year or three dollars in one year and one day? » It has been claimed that a significant fraction of subjects will take the lesser amount today, but will gladly wait one extra day in a year in order to receive the higher amount instead. Individuals with such preferences are described as « present-biased ».<br>
The most important consequence of hyperbolic discounting is that it creates temporary preferences for small rewards that occur sooner over larger, later ones. Individuals using hyperbolic discounting reveal a strong tendency to make choices that are inconsistent over time – they make choices today that their future self would prefer not to have made, despite knowing the same information. This dynamic inconsistency happens because hyperbolas distort the relative value of options with a fixed difference in delays in proportion to how far the choice-maker is from those options.
2020~PDF~RésuméDécouvrez les premiers chiffres de notre Baromètre 2020 RGPD & Cookies et inscrivez-vous sur notre site pour recevoir le baromètre complet.
2020~RésuméPrivacy literature in recent years has emphasized the role of context and situation in individuals’ privacy regulation. While most research is focused on understanding situational effects on self-disclosure, the role of situational factors in users’ decision to consent for third-party access to information, a common practice with significant privacy implications, has been barely investigated. The current study bridges this gap by adopting the framework of situational privacy to examine the effect of the purpose for information collection on participants’ consent. An online experiment examined users’ consent to allow access to their Facebook profile to an unknown entity, with requests distinguished by the framing of the purpose for collecting information as related to security, commercial or academic research. Contrary to the study’s hypothesis, consent rate was similar between groups and purpose was non-significant in explaining participants’ decisions. Furthermore, in all three groups- compensation amount and general willingness to disclose information explain user consent, regardless of purpose. However, some specific factors significantly correlate with consent in each group separately. The study concludes that due to blurring boundaries and uncertainties regarding real uses of information, when it comes to consent for third-party access, predetermined attitudes and preferences are main factors influencing users’ decisions, thus a situational framework is partly adequate for explaining variations in user consent decisions.
2020~PDF~RésuméNew consent management platforms (CMPs) have been introduced to the web to conform with the EU’s General Data Protection Regulation, particularly its requirements for consent when companies collect and process users’ personal data. This work analyses how the most prevalent CMP designs affect people’s consent choices. We scraped the designs of the five most popular CMPs on the top 10,000 websites in the UK (n=680). We found that dark patterns and implied consent are ubiquitous; only 11.8% meet the minimal requirements that we set based on European law. Second, we conducted a field experiment with 40 participants to investigate how the eight most common designs affect consent choices. We found that notification style (banner or barrier) has no effect; removing the opt-out button from the first page increases consent by 22–23 percentage points; and providing more granular controls on the first page decreases consent by 8–20 percentage points. This study provides an empirical basis for the necessary regulatory action to enforce the GDPR, in particular the possibility of focusing on the centralised, third-party CMP services as an effective way to increase compliance.
2020~PDF~RésuméThe European Union’s General Data Protection Regulation (GDPR) requires websites to ask for consent to the use of cookies for \emph{specific purposes}. This enlarges the relevant design space for consent dialogs. Websites could try to maximize click-through rates and positive consent decision, even at the risk of users agreeing to more purposes than intended. We evaluate a practice observed on popular websites by conducting an experiment with one control and two treatment groups ($N=150$ university students in two countries). We hypothesize that users’ consent decision is influenced by (1) the number of options, connecting to the theory of choice proliferation, and (2) the presence of a highlighted default button ("select all’'), connecting to theories of social norms and deception in consumer research. The results show that participants who see a default button accept cookies for more purposes than the control group, while being less able to correctly recall their choice. After being reminded of their choice, they regret it more often and perceive the consent dialog as more deceptive than the control group. Whether users are presented one or three purposes has no significant effect on their decisions and perceptions. We discuss the results and outline policy implications.
2019~RésuméWe’ve seen quite a range of interpretations from digital publishers of how consumer consent for data processing should be collected under the EU’s general data protection regulation (GDPR) which […]
2019~PDF~RésuméSince the adoption of the General Data Protection Regulation (GDPR) in May 2018 more than 60 % of popular websites in Europe display cookie consent notices to their visitors. This has quickly led to users becoming fatigued with privacy notifications and contributed to the rise of both browser extensions that block these banners and demands for a solution that bundles consent across multiple websites or in the browser. In this work, we identify common properties of the graphical user interface of consent notices and conduct three experiments with more than 80,000 unique users on a German website to investigate the influence of notice position, type of choice, and content framing on consent. We find that users are more likely to interact with a notice shown in the lower (left) part of the screen. Given a binary choice, more users are willing to accept tracking compared to mechanisms that require them to allow cookie use for each category or company individually. We also show that the wide-spread practice of nudging has a large effect on the choices users make. Our experiments show that seemingly small implementation decisions can substantially impact whether and how people interact with consent notices. Our findings demonstrate the importance for regulation to not just require consent, but also provide clear requirements or guidance for how this consent has to be obtained in order to ensure that users can make free and informed choices.
2019~PDF~RésuméBecause of increased technological complexities and multiple data-exploiting business practices, it is hard for consumers to gain control over their own personal data. Therefore, individual control over personal data has become an important subject in European privacy law. Compared to its predecessor, the General Data Protection Regulation (GDPR) addresses the need for more individual control over personal data more explicitly. With the introduction of several new principles that seem to empower individuals in gaining more control over their data, its changes relative to its predecessors are substantial. It appears, however, that, to increase individual control, data protection law relies on certain assumptions about human decision making. In this work, we challenge these assumptions and describe the actual mechanisms of human decision making in a personal data context. Further, we analyse the extent to which new provisions in the GDPR effectively enhance individual control through a behavioural lens. To guide our analysis, we identify three stages of data processing in the data economy: (1) the information receiving stage, (2) the approval and primary use stage, and (3) the secondary use (reuse) stage. For each stage, we identify the pitfalls of human decision-making that typically emerge and form a threat to individual control. Further, we discuss how the GDPR addresses these threats by means of several legal provisions. Finally, keeping in mind the pitfalls in human decision-making, we assess how effective the new legal provisions are in enhancing individual control. We end by concluding that these legal instruments seem to have made a step towards more individual control, but some threats to individual control remain entrenched in the GDPR.
2019~RésuméSmartphone users engage extensively with their devices, on an intermittent basis for short periods of time. These patterns of behaviour have the potential to make mobile gambling especially perseverative. This paper reports the first empirical study of mobile gambling in which a simulated gambling app was used to measure gambling behaviour in phases of acquisition and extinction. We found that participants showed considerable perseverance in the face of continued losses that were linearly related to their prior engagement with the app. Latencies between gambles were associated with the magnitude of reinforcement; more positive outcomes were associated with longer breaks between play and a greater propensity to end a gambling session. Greater latencies were associated with measurements of problem gambling, and perseverance with gambling-related cognitions and sensation-seeking behaviour.
2014~RésuméWhile much attention is given to young people’s online privacy practices on sites like Facebook, current theories of privacy fail to account for the ways in which social media alter practices of information-sharing and visibility. Traditional models of privacy are individualistic, but the realities of privacy reflect the location of individuals in contexts and networks. The affordances of social technologies, which enable people to share information about others, further preclude individual control over privacy. Despite this, social media technologies primarily follow technical models of privacy that presume individual information control. We argue that the dynamics of sites like Facebook have forced teens to alter their conceptions of privacy to account for the networked nature of social media. Drawing on their practices and experiences, we offer a model of networked privacy to explain how privacy is achieved in networked publics.
2014~RésuméVous connaissez les 3 facteurs classiques de l’UX que sont le système, l’utilisateur et le contexte ? Ajoutez dès aujourd’hui la temporalité à votre liste de priorités ! En effet, s’il est possible…
2013~RésuméDefaults have such powerful and pervasive effects on consumer behavior that they could be considered “hidden persuaders” in some settings. Ignoring defaults is not a sound option for marketers or consumer policy makers. The authors identify three theoretical causes of default effects—implied endorsement, cognitive biases, and effort—to guide thought on the appropriate marketer and policy maker responses to the issues posed for consumer welfare and consumer autonomy, including proposals for benign “nudges” of behavior. Defaults can be a preferred form of decision architecture; that is, other nonconscious influences on choice and an absence of established preferences can mean that active choice is not always the better alternative. The authors propose “smart defaults” as welfare-enhancing and market-oriented alternatives to the current practice of generally ignoring default effects. Their analysis highlights the importance of considering the process as well as the outcomes of consumer decision making and taking responsibility for consumers’ mistakes arising from misuse of defaults. The authors conclude by reflecting on the ethical and policy implications of techniques that influence consumer choice without awareness.
2013~RésuméTerms and conditions are central in acquiring user consent by service providers. Such documents are frequently highly complex and unreadable, placing doubts on the validity of so called ‹ informed consent ›. While readability and web accessibility have been major themes for some time in HCI, the core principles have yet to be applied beyond webpage content and are absent from the underpinning terms and conditions. Our concern is that accessible web pages will encourage consent, masking the complexities of the terms of usage. Using the SMOG readability formula and UK Energy services as a case study, we observed that a series of supplier terms and conditions were far beyond what a functionally literate adult could be expected to understand. We also present a browser based plug-in which compares SMOG readability scores to popular books. The intention is to use this plug-in to assist in surfacing the hidden complexities underpinning online consent.
2012~RésuméWe present results of a 45-participant laboratory study investigating the usability of nine tools to limit online behavioral advertising (OBA). We interviewed participants about OBA and recorded their behavior and attitudes as they configured and used a privacy tool, such as a browser plugin that blocks requests to specific URLs, a tool that sets browser cookies indicating a user’s preference to opt out of OBA, or the privacy settings built into a web browser. We found serious usability flaws in all tools we tested. Participants found many tools difficult to configure, and tools’ default settings were often minimally protective. Ineffective communication, confusing interfaces, and a lack of feedback led many participants to conclude that a tool was blocking OBA when they had not properly configured it to do so. Without being familiar with many advertising companies and tracking technologies, it was difficult for participants to use the tools effectively.
2009~RésuméMy husband John had done everything the Human Subjects Committee asked. He reviewed the study with his departmental ethics representative, completed
2006~RésuméShould people be considered organ donors after their death unless they request not to be, or should they not be considered donors unless they request to be? Because people tend to stay with the default in a variety of domains, policymakers’ choice of default has large and often important effects. In the United States, where the organ-donation policy default is “not a donor,” about 5,000 people die every year because there are too few donors. Four experiments examined two domains—being an organ donor and saving for retirement—where default effects occur and have important implications. The results indicate that default effects occur in part because policymakers’ attitudes can be revealed through their choice of default, and people perceive the default as indicating the recommended course of action. Policymakers need to be aware of the implicit messages conveyed by their choice of default.
2000~PDF~RésuméMany investigations showed that the semantic characteristics of a request could lead to more<br>
compliance. A feeling of freedom is also a factor favoring compliance to numerous types of<br>
requests. An experiment was carried out, in which the evocation of freedom was formulated<br>
verbally, following a demand for money made by confederates. Results show that the verbal<br>
incentive used (demand for money + « but you are free to accept or to refuse ») increased the<br>
rate of subjects’ compliance as well as the average amount of granted gifts. The semantic<br>
activation of the feeling of freedom is discussed within the framework of numerous paradigms<br>
of research on compliance.
RésuméOver the past two months, 90% of consumers have consented to GDPR requests from publishers and marketers, according to adtech outfit Quantcast which has processed 1bn of them.
2019~PDF~RésuméObtaining meaningful user consent is increasingly problematic in a world of numerous, heterogeneous digital services. Current approaches (e.g. agreeing to Terms and Conditions) are rooted in the idea of individual control despite growing evidence that users do not (or cannot) exercise such control in informed ways. We consider an alternative approach whereby users can opt to delegate consent decisions to an ecosystem of third-parties including friends, experts, groups and AI entities. We present the results of a study that used a technology probe at a large festival to explore initial public responses to this reframing – focusing on when and to whom users would delegate such decisions. The results reveal substantial public interest in delegating consent and identify differing preferences depending on the privacy context, highlighting the need for alternative decision mechanisms beyond the current focus on individual choice.
Dataphys : toucher la donnée, de -3000 à nos jours2021-05-16T00:00:00Zhttps://toutcequibouge.net/blog/2021/05/dataphys-toucher-la-donnee-de-3000-a-nos-jours/
Panorama foutraque de ce que l’on appelle parfois la physicalisation de données : visualiser des données par un support physique non-numérique.
La dataviz en 3000 avant JC
On n’a pas attendu l’informatique pour représenter des données. Les premières traces de l’écriture c’est un peu ça : un jeton pour une vache, un deuxième pour une seconde vache. Les systèmes graphiques plus aboutis étaient utilisées avec des buts similaires, puisqu’on retrouve beaucoup d’inscription parlant de taille de troupeaux, d’aire de parcelles ou de volumes de récoltes. Parfois en utilisant à plein la spatialité de la surface, comme en témoignent ces deux tablettes babyloniennes : un problème de géométrie et le plan d’un grand bâtiment.
Plan d’un bâtiment de six pièces, un sanctuaire ou une maison privée. Fin du IIIe millénaire. Source.
Ces exemples sont impresionnants parce qu’anciens, mais vous allez dire qu’ils restent assez classiques. Voici un autre spécimen qu’on cite souvent : les cartes utilisées par les marins des îles Marshall, dans l’océan Pacifique. Les îles y sont représentées notamment par des coquillages (en blanc) et les trajectoires aidées par la houle par les tiges. Chaque carte était idiosyncrasique dans la manière dont il fallait l’interpréter et surtout utilisée par son créateur.
Citons aussi les cartes tactiles des Inuits, sculptées dans du bois. Celle de gauche est une carte côtière et celle de droite représente une succession d’îles. Elle étaient apparemment plus utilisées comme support de récit qu’aide à la navigation.
Il y a plein de manières compréhensibles et mémorables d’encoder des informations dans des objets. Voici une longue compilation de ces « visualisations physiques de données », avec aussi pas mal d’expérimentations récentes. Sans rentrer dans un débat théorique ou une quête de définition, l’idée est en gros de ne pas utiliser l’écriture, ou de manière plus secondaire et auxiliaire.
3D
Si on saute aux XIX et XXe siècles, la création de modèles en relief est un cas d’utilisation relativement fréquent. En 1874, Maxwell illustra avec un modèle en plâtre les liens entre l’évolution de trois variable : volume, entropie et énergie.
Source. Voir Wikipedia pour des photos du modèle en plâtre et d’autres infos.
Datant de 1913, cette carte montre le nombre de passagers transportés par le métro de Frankfort. La quantité était représenté par le nombre de lamelles de bois collées et empilées.
Datant des années 50, cette courbe montre l’évolution de la consommation d’électricité en Grande-Bretagne, suivant les heures de la journée, entre 1951 et 1954. Chaque jour est représenté par une feuille de carton et des poignées permettaient d’élargir le dispositif pour ajouter des feuilles.
Au début du XXe, le volume de données produites explose. Comment les récupérer, les manipuler et les visualiser facilement ?
Par exemple, comment présenter un enchainement de graphiques à un auditoire, quand on n’a même pas de rétroprojecteur ? C’est pas compliqué : créer une véritable bibliothèque de diapositives sous la forme de grands panneaux de bois imprimés et montés sur rail. J’en ai déjà parlé ici.
1919 : première version.1950 : version plus évoluée.
Autre exemple : ce système de fiches décrit dans un traité de 1914 (!) : Graphic methods for presenting facts. L’idée était d’utiliser plusieurs fiches représentant des graphiques et les mettre bout à bout horizontalement ou verticalement, pour comparer ou enchainer plusieurs années. Parler de « dashboard interactif », comme le fait l’article en lien, est sans doute exagéré, mais pour l’époque l’idée apportait sans doute un grand confort. Avoir des masses de données bien organisées, prêtes à l’emploi et lisibles facilite grandement l’analyse et la discussion, c’est un premier degré d’interactivité entre l’utilisateur et le système.
D’autant que le système était pensé de bout en bout. Il y avait des « méta-fiches » pour indexer le contenu et le retrouver facilement, la partie gauche était laissée vide si l’utilisateur voulait ajouter une annotation et chaque fiche avait un bleu (blueprint) pour la dupliquer et la partager facilement.
Ouvroir de dataviz potentielles
Finissons par un exercice sous contraintes intéressant : des « photoviz » qui utilisent des objets triviaux pour figurer des quantités et liés au thème de la donnée représentée. Garanti sans triche ni redimensionnement.
Plein de posts dédié à Brinton, auteur du traité de 1914 évoqué et qui avait à l’époque déjà recensé pas mal d’exemples.
RGPD : l'intérêt légitime, cette porte ouverte à toutes les fenêtres2021-05-12T01:06:05Zhttps://toutcequibouge.net/blog/2021/05/rgpd-linteret-legitime-cette-porte-ouverte-a-toutes-les-fenetres/
Pour recueillir une info personnelle auprès d’un particulier, il faut une raison. Vous pouvez le faire parce que vous avez son accord, parce que la loi vous y oblige, parce qu’elle est nécessaire pour lui fournir un service (pour lui livrer un produit vous avez besoin de son adresse)… Ces raisons sont au nombre de six, ce sont des bases légales, bien expliquées ici par la CNIL.
En gros, si une entreprise a un objectif commercial dont elle peut justifier le caractère précis et licite, que pour accomplir cet objectif elle a besoin d’une information, que ce besoin est proportionné et nécessaire (c’est-à-dire qu’elle ne peut pas faire autrement), alors elle peut recueillir cette information sans demander le consentement de l’utilisateur.
C’est un raisonnement utilisé dans les politiques de confidentialité d’un nombre important et, dirait-on, croissant de sites web. Je ne sais pas si les juristes attendaient d’y voir plus plus clair, mais j’ai l’impression que c’était un recours beaucoup moins fréquent juste après la mise en place du RGPD.
Par exemple chez Nestle Belgique, c’est une base légale invoquée dans chacune des lignes du tableau. La dernière colonne apporte quelques détails : « gagner en efficacité », déterminer les types de consommateurs pour les nouveaux produits et services", etc. Ce sont des choses banales et je ne vois pas ce qui justifie une base légale exceptionnelle.
Si seulement il y avait un moyen de rendre les notices de cookie encore plus imbuvables…
Première complication : il faut croiser cette base légale avec le principe d’opposition : le visiteur peut quand même s’opposer à cette récolte. Certains sites incluent même une case à cocher pour ça, sélectionnée par défaut. C’est tordu : l’intérêt légitime devient dans une espèce de consentement dédoublé, mais en opt-out et plus ou moins planqué. Dans les deux exemples ci-dessous, il est demandé pour chaque info si on consent au recueil ET si on s’y oppose. Bref, deux fois la même question, sous un angle techniquement différent.
C’est une conception totalement scolaire du droit où on imbrique chaque pièce sans souci de la logique d’ensemble, pour aboutir à une usine à gaz. On pourrait presque croire que c’est une forme de grève du zèle pour rendre ce genre de popin encore plus imbuvable.
Un bien sombre motif
Ces techniques peuvent passer du byzantin au total dark pattern . Par exemple chez Bloomberg vous avez deux choix si vous voulez refuser certains partages de données :
Vue 2: Cliquer sur le bouton « manage cookies », arriver sur une liste et tout refuser.
Vue 1 : Cliquer sur le minuscule lien « right to object » dans le dernier paragraphe et arriver sur une liste d’infos quasi-identiques, cette fois cochées par défaut.
Donc on peut tout refuser, au titre du consentement, sans savoir si ça décoche les cases pour l’intérêt légitime, planquées derrière le lien. On suppose que non. D’ailleurs, la vue 1 a un bouton retour mais pas la vue 2 : si on a refusé certaines choses on ne peut pas aller voir la vue 1 pour voir si son choix a été respecté.
Une pratique de toute façon pas légale
On ne contourne pas le RGPD si facilement. Tout bêtement :
Les bases légales ne peuvent être cumulées pour une même finalité. Un même traitement de données peut poursuivre plusieurs finalités, c’est-à-dire plusieurs objectifs, et une base légale devra alors être définie pour chacune d’elles.
Une même donnée peut servir à plusieurs objectifs, mais chaque objectif doit être justifié légalement de manière distincte et spécifique. Donc tous les exemples de finasserie montrés sont de toute façon illicites. Notez que la confusion entretenue entre consentement et intérêt légitime fut un des motifs retenus par le conseil d’état pour coller 50M€ d’amende à Google.
Ce blog existe depuis fiou, 2012. Les sources sont même sur Github. Documentation et réflexions à venir.
Au doigt de pied et à l'oeil — contrôler un ordinateur avec les pieds2021-02-17T00:00:00Zhttps://toutcequibouge.net/blog/2021/02/au-doigt-de-pied-et-a-loeil-controler-un-ordinateur-avec-les-pieds/
Lors de deux moments importants pour l’histoire de l’informatique, on trouve une personne assise à une machine et utilisant autant ses pieds que ses mains.
Première date de publication : Avril 2018
D’abord, le métier Jacquard nécessitait l’emploi d’une pédale, comme d’autres métiers à tisser avant lui. Cette invention inspirera le proto-ordinateur de Babbage et Lovelace. Ensuite, Engelbart est connu pour être le premier, dès 1968, à proposer un système cohérent comprenant interface graphique, souris et collaboration à distance. Ce qui est moins connu, c’est que pour lui le succès de la souris fut presque accidentel. Lui croyait plus dans le potentiel du clavier à accords et avant ça avait expérimenté avec des dispositifs où la position du pointeur était transmise par un casque, ou encore par la position… du pied et du genou !
Ensuite, le pied se retrouve un peu partout. Si vous ne me croyez pas, je vous conseille la lecture de cette somme sur le sujet (trente pages, une véritable somme podologique !). Il identifie notamment une gamme de gestes, utilisés principalement dans des expériences artistiques ou académiques. De manière plus populaire, on retrouve les tapis des jeux de danse, les pédaliers des jeux de course, mais aussi différents plateaux d’équilibre, initiés dès 1982 par le Joyboard d’Amiga (en photo plus haut).
Quoi d’autre ? On peut parler de l’industrie, où les risques d’activation intempestive (analysés ici) exigent des pédales avec des clapets et autres garde-fous.
Pédale industrielle
Les utilisateurs avec des problèmes de posture ou de motricité peuvent utiliser toute sorte de « souris à pied », comme cette fascinante Souris-Sandale.
Souris-sandale ou toe-mouse
La première machine à écrire à être largement utilisée comprenait une pédale pour la touche Entrée. Toujours dans l’édition de texte, la VIM Clutch constitue un exemple intéressant de convergence entre matériel et logiciel. L’éditeur de texte VIM fonctionne par modes : un mode normal, un pour l’insertion, un pour la sélection de texte, etc. Ça parait bizarre mais c’est beaucoup plus sensé que ça n’en a l’air. Un maitre-nerd a donc bricolé une pédale qui permet, tant qu’on la maintient, de rester dans le mode le plus courant. Ça rappelle un peu les pédaliers de piano et c’est assez logique d’avoir une touche dédiée et accessible à part pour une action aussi fondamentale.
Le meilleur pour la fin : par deux fois, des petits malins ont essayé de tricher au casino en portant un ordinateur qui communiquait des informations à un complice (source 1, source 2). Comment le tricheur faisait-il pour saisir ces informations ? En tapant du pied. Un bel exemple d’habitronique, dès 1960 et à nos pieds.
« Habitronique », parfaitement.
Ajout 2021
Incorporer un calculateur à une chaussure peut aussi être glorieusement vain. Admirez cette paire de sneakers ornée d’une carte graphique. Pourquoi une carte à 700 boules sur une chaussures ? Est-ce qu’elle a une vraie fonction ? Mystère. Les coopérations entre constructeurs informatiques et marques de mode, c’est toujours quelque chose.
Sinon, via ce tweet de Maxime Quijoux, je découvre que la retranscription de paroles enregistrées, activité chronophage s’il en est, est parfois musclée par le recours à un pédalier spécifique. J’ai d’abord cru que c’était un accessoire de guitariste (Olympus est une marque qui fait dans la musique) mais non, c’est bien un outil dédié.
Que ce soit pour la retranscription ou pour un autre but, écouter attentivement et de manière répétée de longues paroles est une activité assez étrange, tour à tour hypnotique et agressive, surtout avec un appareil très tactile comme un pédalier ou une roulette de montage accentue certainement l’effet. On est enveloppé et immergé dans la voix des locuteurs, alors qu’on la contrôle et l’interrompe sans cesse, au point de la disloquer et de lui faire perdre son flot.
Ajout 2023
Via cette fascinante émission, je découvre aussi le pédalie des stations de chirurgie assistée par ordinateur.
Soyez patient pour le premier chargement, car l’hébergeur (Heroku version gratuite) éteint le serveur après 30 min d’inactivité.
C’est quoi ?
Une mosaïque des livres, jeux, films… que je « pratique », filtrables par année et catégorie. Un variateur permet de changer la taille des vignettes, pour avoir une vue panoramique ou au contraire très détaillée.
Mais pourquoi ?
Dématérialisation oblige, ma bibliothèque ou ce qui traine sur ma table basse (d’où le nom du bidule) ne sont plus guère représentatifs de mes pratiques culturelles. Je cherchais un joli palliatif.
Les données viennent de mon profil Sens Critique et sont mises à jour nuitamment. Malgré tous ses défauts, je ne connais pas d’autre site permettant de consigner des œuvres de médias variés et potentiellement françaises.
Et soyons francs, c’était l’occasion de bidouiller. Quelques remarques :
Fluidité
J’ai essayé d’avoir une grille avec le minimum de valeurs prédéfinies. Les gouttières, la taille des images et le nombre de colonnes dépendent de la taille de la fenêtre et de la valeur du zoom. C’est sans doute overkill et donne un CSS plein de valeurs magiques, m’enfin.
Détails :
L’intensité de l’effet au survol est inversement proportionnelle à la taille de l’image.
Les différences de ratio des affiches sont réglées à coup de object:cover-fit, sauf pour celles en paysage où on ajoute un effet de « letterbox » floutée. (J’ai d’ailleurs découvert que pas mal de jeux vidéo indés récents reviennent récemment au format paysage)
Pour qu’au survol les images ne sortent pas du cadre, on change la transform-origin de celles positionnées en bordure de fenêtre.
Typescript
En tant qu’autodidacte habitué aux langages dynamiques et interprétés,iu j’ai trouvé ça génial. On résume Typescript à un surcroit de lourdeur très acceptable vu le gain de sûreté, pourtant j’ai trouvé son usage souvent plus fluide que Javascript, pas moins.
Un langage de programmation permet un dialogue avec la machine, c’est… un langage. La boucle d’interaction peut être très courte (comme avec une ligne de commande) ou très longue (insérer des cartes perforées et attendre la nuit pour voir le résultat). Avec Typescript, l’ordinateur est plus bavard, me parle en direct et m’a beaucoup facilité la prise en main de grosses bibliothèques.
Puppeteer
Les joies du scraping : il y a une info importante que, dans un contexte, on ne peut pas récupérer sur Sens Critique sans authentification. Du coup j’utilise Puppeteer, qui lance et contrôle automatiquement un navigateur entier. Bonjour, artillerie lourde et sur-ingénierie. En prod cette dépendance prend à elle les 2/3 du stockage.
C’est fascinant de lancer Puppeteer en mode graphique et de l’observer ouvrir une fenêtre, scroller et cliquer tout seul.
CDN
Un content delivery newtork, ai-je appris, n’est pas juste un serveur dédié et optimisé pour les images et vidéos. Les CDN modernes fournissent plein de services liés, parfois accessible simplement en ajoutant un paramètre à l’URL : génération à la demande de variantes d’une image (dimensions, format de fichier…), analyse intelligente (OCR, crop en se concentrant sur le contenu « intéressant », détection des visages…), et cetera.
Bref
Je vous passe plein de péripéties et de nouveautés (Heroku, Postgres…). J’ai fait des mauvais choix techniques, pas anticipé plein de trucs, dû changé d’orientation… Bref un vrai projet. (ノ°Д°）ノ︵ ┻━┻
Pour paraphraser Musset :
J’ai souffert souvent, je me suis trompé quelquefois, mais j’ai codé.
C’est un minuteur. il décompte le temps. Enfin, pas tout le temps. Il compte le temps pendant un certain temps, que justement vous définissez, c’est le but. Il ne décompte pas le temps jusqu’à la fin des temps. Enfin, vous pouvez essayer de le régler à une valeur très très haute et attendre très très longtemps jusqu’à la mort thermique de l’univers, mais vous risquez d’attendre pour rien, ou de vous tromper dans votre estimation et de rater la fin à deux minutes près. Ce serait ballot.
Mais il est parfait pour minuter du collage de post-it.
Il est pensé pour être bien visible, par exemple projeté en réunion ou en formation, pas sur téléphone ou dans un coin de votre écran.
Les touches espace et entrée permettent de lancer et d’arrêter le minuteur.
Si vous les acceptez, des notifications natives apparaitront à 50, 25, 10 et 0% du temps.
D’après mes tests, il fonctionne même sans réseau.
Via Chrome, il peut être installé en cliquant sur l’icône « plus » dans la barre d’adresse et apparaitra comme n’importe quelle application locale.
Pourquoi ?
Ce n’est pas sans utilité.
C’était l’occasion de s’initier à Vue.js.
Comme il y a plusieurs manières de modifier le temps, c’est un bon exercice de conception technique pour la gestion des états.
Il y aussi des choix de conception à faire sur des actions d’apparence anodines. Par exemple : faut-il autoriser l’ajout de minutes en cours de route, sans même faire pause ? Pour moi oui, c’est un cas d’usage en pleine formation. OK, mais alors l’action de remise à zéro doit-elle réinitialiser à la durée d’origine, ou à cette durée assortie des minutes ajoutées ? Plein de petites questions comme ça.
Détails techniques
App en Vue.js, avec vue-cli et le module cli-plugin-pwa qui se charge d’une bonne partie de la transformation en PWA.
PWA : progressive web application. Un ensemble de technologies permettant d’enrichir une page web de fonctions réservées traditionnellement à des applications natives et locales. Notifications, fonctions hors-ligne, accès aux périphériques, etc,
L'héritage de Larry Tesler au-delà du copier-coller2020-02-23T00:00:00Zhttps://toutcequibouge.net/blog/2020/02/lheritage-de-larry-tesler-au-dela-du-copier-coller/
Larry Tesler, décédé récemment, est associé à l’invention du copier-coller. De même qu’Engelbart a inventé bien plus que la souris, son influence est vaste : les premières interfaces graphique chez Xerox Parc et Apple, SmallTalk, le PDA Newton… Vice a fait un bon portrait de son parcours.
Comme avec Engelbart, ce qui est intéressant au-delà du catalogue de ses accomplissements, c’est de comprendre la vision qui les a motivé. En plus et comme souvent, Tesler est moins un inventeur solitaire que le synthétiseur d’une effervescence collective. Dans l’article je m’efforce de citer ses inspirations.
Mais commençons pas du concret.
Le génie du copier-coller
Les actions de couper, copier et coller font partie de ces idées omniprésentes qui ont pourtant été créées un jour. Les barres de défilement, l’auto-complétion… j’ai continué ici une liste d’inventions commencée par Dan Saffer.
Tesler a inventé en fait plusieurs choses.
1. Une sélection intuitive du texte
A l’époque, la crurseur était placé sous le caractère (ou derrière, en couleur inversée), ce qui introduisait de l’ambiguïté : si j’insère une lettre, va-t-elle être placée avant ou après le caractère sélectionné ?
NLS, le système d’Engelbart était plus avancé et utilisait une souris comme pointeur, mais n’avait pas de curseur permanent. La souris servait littéralement de pointeur, pour indiquer par exemple le début et à la fin d’une sélection de texte.
Larry Tesler (avec Peter Deutsch) inventa alors le curseur placé entre les caractères que l’on connait aujourd’hui.
2. Le remplacement des modes par le presse-papier et les menus
Se débarrasser des modes était le grand combat de Tesler. Qu’est-ce qu’un mode ? C’est un état global du système que l’utilisateur enclenche et qui permet ou interdit d’autres actions. Par exemple appuyer sur la touche VERR MAJ permet de taper des lettres capitales mais interdit les minuscules. Appuyer sur MAJ serait un quasi-mode (selon la terminologie de Jef Raskin) qui oblige à maintenir la touche pour rester actif.
Les éditeurs de texte étaient massivement modaux, c’est-à-dire qu’il y avait un mode pour naviguer, un pour insérer, un pour supprimer… La présence de modes complexifie les interactions (dans quel mode suis-je ? Comment en sortir ?) mais élargit la palette d’actions. Par exemple en mode Naviguer, chaque touche du clavier peut être un raccourci, ce qui permet des actions fines du genre « avancer de trois paragraphes ». L’éditeur Vim, encore populaire aujourd’hui, fonctionne essentiellement ainsi.
C’est aussi l’héritage d’une époque où les éditeurs de texte étaient conçus pour un télétype (c’est-à-dire concrètement une imprimante), pas pour un écran. On désignait une ligne, on faisait une modification et on imprimait le résultat en croisant les doigts pour ne avoir fait d’erreur. Dans un contexte aussi peu interactif, des modes étaient nécessaires.
Les créateurs d’Unix utilisant un PDP-11 avec un terminal télétype
Même NLS, le système d’Engelbart avec clavier et souris n’était pas plus simple. Voici la procédure pour déplacer du texte :
Touche M (pour Move)
Touche T (pour Text)
Pointer le début puis la fin du texte souhaité
Pointer la destination
Valider
Inspiré par Pentti Kanerva, Tesler abolit ces modes en inversant le modèle d’interaction : au lieu de désigner d’abord l’action (effacer) puis son objet (tel groupe de mot), on sélectionnait du texte puis on agissait dessus. Le clavier ne servait plus qu’à une chose, taper du texte. Les commandes ont d’abord été attribuées à des touches spéciales puis au menu déroulant « éditer », inventé juste après.
La complexité a été ainsi déplacée des modes au presse-papier : celui-ci stocke de l’information sans l’afficher à l’utilisateur, ce qui occasionne parfois des surprises. Mais globalement, copier et coller étant souvent concomitants, on a beaucoup gagné au change.
La dernière pièce du puzzle a été de rassembler le déplacement et la duplication. Suivant l’action précédente, coller peut couper ou bien copier. Cela n’allait pas de soit : encore aujourd’hui Mac OS permet de copier un fichier mais pas de le couper, car le déplacement est vu comme une action bien distincte. On a finalement trois actions réunies par une même métaphore, celle du papier.
La méthode Tesler
Quelle approche a suivi Tesler pour faire tout ça ?
1. Tester, tester et tester
Malgré ses fortes convictions (qui allaient jusqu’à avoir une plaque d’immatriculation anti-modale), Tesler n’a jamais succombé à l’illusion de connaitre les utilisateurs et a donc très tôt mené des tests.
My observations of secretaries learning to use the text editors of that era soon convinced me that my beloved computers were, in fact, unfriendly monsters, and that their sharpest fangs were the ever-present modes. The most common question asked by new users, at least as often as « How do I do this?, » was « How do I get out of this mode? »
Before doing it he decided that he wanted to observe a user, and used a technique similar to his“guided fantasy.” He describes working with a secretary who had just started at PARC and was not yet influenced by the programs that were being used:I sat her down in front of a screen, and did what’s now called a“blank screen experiment.”
“Imagine that there is a page on the screen, and all you’ve got is this device that you can use to move a cursor around, and you can type,” I said. “You’ve got to make some changes to this document. How would you do it?”I gave her a paper document with lots of markups on it for reference, and asked her to imagine that is was on the screen. She just designed it right there!“I would point there, and then I would hit a delete key,” she said.To insert, she would point first and then start typing. She’d never been contaminated by any computer programs before, so I wrote all this down, and I thought, “That sounds like a pretty good way to do it!”
Ce qui m’impressionne, c’est sa capacité très tôt dans sa carrière à argumenter et théoriser ses choix. Dès 1981, son disours contre les modes est solide et construit. En 2010 il réalise ce schéma pour montrer qu’il faut moins d’étapes pour corriger une erreur avec une interface amodale. Voir ces enjeux nécessitait de s’abstraire du fonctionnel et de modéliser des interactions. Cela va plus loin que compter le nombre de clics et relève de la sémantique : les opérations de l’utilisateur sont composées de verbes et de noms, l’ordre nom-verbe est-il supérieur à l’ordre inverse, pourtant plus proche de l’anglais ? Les tests lui ont montré que oui.
L’opposition de Tesler à Engelbart fut parfois frontale et révèle une différence fondamentale dans leurs visions. Pour schématiser, le premier visait le grand public et le second des experts.
Engelbart développait un système ambitieux et complet pour inventer de nouvelles manières de travailler collaborativement et même de raisonner. Plusieurs ordinateurs étaient connectés entre eux et équipés d’un clavier, d’une souris à trois boutons et d’un clavier-accord. Ce dernier, à gauche sur la photo, résume bien la complexité de l’ensemble, puisque chaque combinaison de touches exécutait une action différente.
Il se préoccupait plus d’utilité que d’utilisabilité. Mettre des mois à apprendre à maitriser le système n’était pas vraiment un problème si ça valait le coup. A la fin l’utilisateur pouvait manipuler de grandes quantités d’informations, raisonner sur des problèmes complexes ou résoudre des défis scientifiques. Engelbart avait cette vision de l’ordinateur comme nouveau medium cognitif capable « d’accroitre notre intellect ».
Le problème est qu’il voulait créer un instrument merveilleux comme le violon alors que pas grand monde ne prendra le temps d’apprendre à jouer du violon, pour reprendre une formule d’Alan Kay cité par Bardini, p. 215)
Tesler, à l’inverse, voulait créer des logiciels simples à comprendre par le plus grand nombre :
[Avec un collègue] ils rédigèrent une note interne à Xerox décrivant ce qu’ils appelèrent IT, pour « Intuitive Typewriter » [machine à écrire intuitive]. Ils décidèrent que la facilité d’utilisation était importante, en réalisant que ce serait un « désaccord majeur avec Engelbart ».
Pour Engelbart, un nouveau medium appelait de nouvelles conventions, tant pis si cela rompait avec les habitudes. Pour Tesler c’était l’inverse :
Il fallait adapter l’interface à la manière dont les gens travaillent et pas utiliser l’interface pour les forcer à apprendre à travailler mieux et différemment.
Idem
Dès le début des années 70 est donc née cette opposition entre deux philosophies. Elle reste prégnante dans la conception de logiciels : élitisme ou démocratisation, puissance ou facilité, respect des habitudes ou nouveauté. Présentée ainsi, l’opposition tend à la caricature et il y a sans doute de la place pour tous les types de logiciel. D’aucuns ont cependant argué qu’une vision a écrasé l’autre et a tué dans l’œuf tout un champ d’outils exigeants et avancés.
Quoiqu’il en soit, voici quelques personnes qui chacun à leur manière tentent de combler ce fossé et de faire avancer le medium.
J’évoque dans cet article les éditeurs de texte des années 70. Il s’avère que l’un d’entre eux fut longtemps l’éditeur par défaut d’Unix et fut durement critiqué dans un article de Don Norman : The truth about Unix: The user interface is horrid (PDF).
L’article date de 1981 et fut apparemment très populaire. C’est le premier d’un longue série de textes qu’il consacre à l’informatique.
Le Chant du loup : sous-marin, PQ et cognition2020-02-09T00:00:00Zhttps://toutcequibouge.net/blog/2020/02/le-chant-du-loup-sous-marin-pq-et-cognition/
Le Chant du loup suit l’épopée de l’équipage d’un sous-marin et de son “oreille d’or”, un analyste acoustique. Ce film est une mine d’or sur l’esprit humain et ses interactions avec la machine. Voici pêle-mêle ce que j’ai trouvé intéressant.
On y trouve beaucoup d’exemples des approches appelées facteur humain, c’est-à-dire en gros de la manière dont humains, technique et organisations sont intriqués dans des gros machins impénétrables appelés systèmes socio-techniques complexes.
C’est aussi une parfaite illustration de la cognition incarnée[1], une nébuleuse de programmes de recherche qui postule, pour schématiser :
Que l’esprit est inséparable du corps.
Que nos représentations existent par et pour l’action. Notre vision ne doit pas être pensée comme la construction d’une image mais comme une activité d’exploration du monde par boucles incessantes entre gestes et perception.Deux références : un livre d’Alva Noe (PDF de résumé et un de Kevin O’Regan Même nos capacités plus abstraites peuvent être pensées comme orientées vers certaines pratiques comme la communication et l’argumentation.
Qu’il n’y a pas de limite précise entre l’esprit, le corps et son environnement immédiat. Par exemple si je dessine des schémas pour m’aider et structurer ma pensée et que j’y reviens fréquemment dans un carnet de notes, c’est une manière d’externaliser ma mémoire et on peut même dire que ce carnet fait partie de mon esprit, de manière étendue.
Le Chant du loup m’a fait notamment penser aux travaux d’Edwin Hutchins. Ce chercheur a passé du temps sur des ponts de frégates et dans des cockpits d’avion pour étudier leur organisation. Son livre Cognition in the wild s’ouvre sur une longue description d’un navire ayant échappé de justesse à une grave collision.
Il explique que l’intelligence doit être vue comme un phénomène intrinsèquement collectif, surtout dans ces cas d’équipages travaillant dans un environnement codifié et soudés autour d’un objectif commun. Les informations circulent à toute vitesse, chacun a un rôle précis pour analyser une information ou effectuer une action, si bien que l’équipe fonctionne presque comme une seule entité. Ou disons au moins qu’il y a un continuum entre individu et collectif.
Outils cognitifs
Dans un environnement aussi avancé et précaire qu’un sous-marin, l’usage de l’écrit peut étonner, alors qu’il est partout.
Il y a d’abord la table de navigation, utilisée avec feutre effaçable, rapporteur et compas. Le navigateur y calcule des modifications de trajectoire pour les proposer au commandant, qui peut voir le résultat directement. Quelques exemples, tirés du Chant du loup et d’autres films.
Ce genre de réflexion effectuée directement sur papier a été qualifiée « d’action épistémique » (PDF) par Kirsch et Maglio, qui ont étudié le comportement de joueurs face à Tetris. Ces actions n’ont pas d’autre but que d’aider à la résolution de problème, par exemple pour vérifier si une pièce va s’adapter aux autres il est plus simple de la pivote à l’écran que dans sa tête.
Des zoids tout à fait mignons dessinés à la main en 1994
Admirez aussi le tableau lumineux, les feuillets suspendus et le rouleau de scotch pré-dévidé.
Cet usage du papier est aussi documenté dans les cockpits d’avion, voir ce papier (PDF) écrit par Nomura, Hutchins (encore lui) et Holder.
Papier… et papier-toilette
Dans À la poursuite d’Octobre rouge, on voit ce qui ressemble fort à un rouleau de papier-toilette à droite de l’écran. Pourquoi ?
Réponse : un analyste utilise un sonar passif, c’est-à-dire pas un sonar classique qui émet des sons pour détecter leur réverbération sur l’environnement. Il écoute, tout simplement. Et il regarde : le spectre sonore ci-dessous représente le temps en ordonnées et la direction en abscisses (parfois il s’agit de la fréquence). A l’époque, pour suivre une trace sonore il devait le faire à la main. Ou plutôt au feutre. D’où le rouleau qui permettait d’essuyer ces marques. Ma source.
Oreille d’or
La tâche principale d’une oreille d’or : moins écouter que classer. Comparer à une base de données de signaux connus. Ce bruit est-il biologique ? Marin, sous-marin ? Ami, ennemi ? Si le bruit ne rentre pas dans une case, il est bien embêté. Dans le film : c’est trop silencieux pour venir d’un bateau mais en même temps aucun sous-marin en activité n’a d’hélices à quatre pales. Il faut forcément une réponse, tu as littéralement cinq personnes sur le dos qui doivent décider d’une trajectoire.
L’oreille d’or a le trackball dans une main, le casque sur une seule oreille pendant les phases de veille et sur les deux pendant les phases d’analyse intense. Une seule oreille car il doit rester attentif à ce qu’il se passe sur le pont. Parole de spécialiste :
Pour la veille, on n’utilise effectivement qu’une seule oreille. En effet, un veilleur sonar ne doit pas être devant son écran pour uniquement tourner la boule de son curseur audio: il doit savoir ce qui se passe dans le CO, pourquoi on change de route par rapport à une force, savoir ce qu’on cherche en priorité, le secteur de la menace. Il n’y a pas vraiment d’oreille préférée: le veilleur sonar de coque écoutera plutôt avec l’oreille gauche, car la table traçante (là où sont prises les décisions par le pacha ou le chef de quart) est à sa droite, alors que le veilleur ALR, qui est de l’autre côté, laissera plutôt son oreille gauche libre. Après, par exemple pendant un transit, c’est à dire lorsqu’il n’y a pas vraiment d’activités, on choisit l’oreille suivant le confort. Ensuite, on mettra les deux écouteurs quand on veut se concentrer sur un contact qui nous pose par exemple des soucis de classif ou de comptage.
Voici quelques interfaces montrées dans le film (probablement non-contractuelles). Mais c’est la partie émergée de l’iceberg. D’une certaine manière dans un sous-marin tout est interface entre l’être humain et des fonctions critiques. Tout est pensé pour aider les sous-mariniers à écouter et exécuter des ordres, à marcher, se tenir, ou respirer. Par exemple quand l’atmosphère est compromise, ils peuvent se brancher à intervalle régulier à des arrivées d’air.
Dans cet écosystème entièrement artificiel, tout a été conçu. L’équipage aussi : comment s’organiser, qui doit faire quoi à quel moment, le language codifié, tout a été réfléchi. Plutôt que l’histoire d’un humain réduit à un rouage dans la machine, le film nous montre un monde où l’opposition entre humain et système n’a pas de sens.
Photo : Olivier Monge pour Libération, à bord du sous marin nucléaire Casabianca à quai à Toulon. Toulon, le 9 aout 2018
J’utilise le terme le plus large mais comme le montre la section « Voir aussi » de Wikipedia, il y a d’autres approches, globalement convergentes : cognition étendue, située, distribuée, énactivisme, phénoménologie, externalisme, psychologie écologique, etc. ↩︎
