La calculatrice windows 10, c’est quand même le plus bel exemple de comment se planter à prendre en compte les besoins utilisateurs (#ux).
Avec leurs modes Scientifique, Programmeur. Ils empêchent les calculs a virgule en même temps que la vue hexadécimale.
Et ils n’ont pas prévu que switcher de mode conserve les valeurs ou les calculs.
Why #mental_models Matter in Data Visualization
▻https://nightingaledvs.com/why-mental-models-matter-in-data-visualization
My three year-old son once told me, “I know how computers work: when you press a button on the keyboard, it pulls a string inside..
Lignes de désir
▻http://romy.tetue.net/lignes-de-desir
Sinueux est le chemin de l’UX design. Souvent reproduite pour introduire au design d’expérience , l’image suivante illustre bien l’importance de la conception orientée utilisateur (UX design). L’on y voit une personne qui, au lieu d’emprunter le chemin prévu, à angle droit, préfère couper en diagonale, à travers la pelouse, comme bien d’autres avant elle, au point d’avoir tracé un sentier de terre battue. Les urbanistes nomment ligne de désir ces sentiers graduellement tracés par érosion suite au passage…
#Conception_web #LigneDeDesir #DesirePath #UX #UXdesign #OSUoval
Système de Design de l’État
▻https://www.systeme-de-design.gouv.fr
Le tout nouveau design system de l’État français, signalé par @tetue dans son article : ►https://seenthis.net/messages/922369
Avec une charte, des éléments de base, et des composants.
#design_system #conception #web #UX #interface #France
Charte, éléments de base et composants qui sont en discussion sur le logiciel wiki « Confluence » de la société australienne côtée au NASDAQ « Atlassian » (qui a racheté « Trello » il y a quelques années).
Marrant de voir dans l’url du wiki le gouvernement français devenu simple sous-domaine de cette société. Un présage de demain ?
▻https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217251899/Fondamentaux+identit+de+l+tat
et ping @touti pour sa liste de services de l’état qui dépendent de services tiers qui surveillent etc
@touti Il y a aussi celui-ci, avec « Slack ». ▻https://gouvfr.slack.com
The worst volume control UI in the world | by Fabricio Teixeira | UX Collective
▻https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950
A group of bored developers and designers has decided to start a thread on reddit to figure out who can come up with the worst volume control interface in the world:
#interface_utilisateur #gui #ux #volume_sonore #original #absurde #inspiration
Un intéressant article fouillé sur les techniques de #propagande comportementales utilisées par la startup nation. (En dépit du titre, ça ne parle pas que de #nudge.)
▻https://www.franceinter.fr/comment-le-nudge-a-conquis-la-macronie
#UX
▻https://cdn.radiofrance.fr/s3/cruiser-production/2021/06/821554d4-9f65-48da-819c-8c37a0f26bbf/640_doc_2.webp
Oui, après si tu lis le seul exemple complet de notule (4 pages) sur la préparation au reconfinement, fourni dans l’article, tu te rends compte que c’est pas non plus de la manipulation super-élaborée, à base de concepts super-disruptifs qui te manipuleraient au niveau des fonctions cachées de ton subconscient qu’on te cache… c’est un putain de marketing à deux balles, chié par une équipe de pubards qui ont vaguement brainstormé deux heures en se faisant des lignes de coke pour se kickstarter au niveau de la créativité coco.
Je dois avouer que j’ai un peu de mal à percevoir l’aspect innovant et nouveau dans ce document qui numérote 1, 2, 2, 3, 4, et s’autorise pour 5000 euros à titrer un paragraphe « Imager un wording… ».
L’autre aspect (assez classique dans les médias), c’est de développer longuement l’aspect « soft power » d’une forme nouvelle de communication, et de ne jamais aborder les aspects « hard power » qui les accompagne : le masque si tu le portes pas, c’est 135 euros, la bouteille de rosé à la plage c’est 405 euros, la réforme de l’assurance chômage c’est à coup de LBD dans la gueule, et la déclaration des impôts c’est obligatoire et si tu fais pas dans les temps et dans les règles y’a toujours moyen de te coller des pénalités qui font rêver. Alors à côté de ça, l’impact d’imag[in]er un wording disruptif, je demande un peu à voir.
@ARNO* Globalement, le port du masque est assez respecté à Paris mais, même s’il n’y a que 1 % de négligents et d’égoïstes, cela fait du monde et les amendes sont en quantité négligeable (jamais vu de contrôle dans les transports en commun). Donc, des méthodes de « soft power » sont toujours utiles.
« Form design — Best practice, research insights and examples » by Geri Reid
▻https://gerireid.com/forms.html
« Working on a design system for a bank has taught me a lot about forms. I’ve watched testing in our labs. I’ve worked alongside experts from specialist accessibility organisations. I’ve seen forms tested by disabled people and users of assistive technology. I’ve also read a lot of research.
From all this learning I’ve formed my own forms best-practice guidelines. I thought it would be useful start recording it. Here’s my work in progress. I do UI/UX so I’m coming at this from a designer’s perspective. »
#ux #forms #css #webComponents #reference
Système de Design de l’État
▻https://systeme-de-design.gouv.fr
Le « design system » pour les sites officiels gouv.fr
La doc : ▻https://gouvfr.atlassian.net/wiki/spaces/DB/overview
Sur la notion de « design system » voir aussi :
– un petit tour d’horizon : ▻https://www.usabilis.com/design-system
Un Design System s’apparente à une bibliothèque de composants, visuels et principes au code réutilisable. Ce kit évolutif offre un référentiel UX et UI pour les designers et les développeurs
– quelques exemples complets :
. la région Occitanie : ▻https://zeroheight.com/51aa4cb6d/p/29be13-charte-ditoriale
. une compagnie d’assurance : ▻https://www.design.foyer.lu/index.html
– une tentative d’annuaire des design system d’entreprises françaises : ▻https://www.designsystems.fr/liste-des-designs-systems-francais
#design_system #UX #charte_graphique #interface_utilisateur #UI #élément_réutilisable
Quant-UX - Prototype, Test and Learn - 3.0.60
▻https://quant-ux.com/#
Quant UX is a free research, usability & UI prototyping/wireframing tool to quickly test your design and analyse interactive prototypes. Our visual analysis makes it easy for you to find and quickly fix pain points in your UI design.
Un outil open-source de maquettage avec possibilités d’interactions utilisateurs et d’analyses de celles-ci
Le repo Github : ▻https://github.com/KlausSchaefers/quant-ux
#prototype #maquette #web_dev #outil_web #conception #ergonomie #UX #interface #adobe_XD
Beaucoup plus gros que Penpot signalé dernièrement : ►https://seenthis.net/messages/900030
Mais moins tourné vers le travail d’équipe je crois, par contre ça permet de vraiment faire des tests utilisateurices « pro », avec des conditions, des tests à valider, des stats, des heatmaps, etc.
Penpot - Design Freedom for Teams
►https://penpot.app
Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG).
(= un remplaçant d’Adobe XD open-source)
Le repo Github : ▻https://github.com/penpot/penpot (comprend aussi un docker pour installation serveur)
« Les bonnes pratiques Opquast ne sont pas que des bonnes pratiques. Ce sont des règles.
Vous pouvez les respecter ou pas, mais vous devez les connaître. Chaque mot est discuté. Chaque élément est argumenté. C’est du solide, et sauf erreur de notre part il n’y a pas d’équivalent mondial à cette liste de règles (vérifiables, transversales, utiles, universelles, durables). »
▻https://www.opquast.com/la-fin-des-bonnes-pratiques-opquast
Dans l’excellente série « 24 jours de Web » que tous les webmestres lisent (j’espère), le numéro d’aujourd’hui est consacré à démolir ces ridicules formulaires Web écrits par des control freaks fascistes qui vous reprochent votre adresse de courrier électronique, votre prénom, ou votre département de naissance.
▻https://www.24joursdeweb.fr/2020/concevoir-des-formulaires-inclusifs
Tous les articles sur le Calendrier de l’Avent du Web sont très bien mais celui sur les formulaires est parfait, et devrait être lu par tous les développeurs Web :
▻https://www.24joursdeweb.fr/2020/l-homme-qui-hululait-a-l-oreille-des-formulaires
Mobile UX Design : The Right Ways to Ask Users for Permissions | by Nick Babich | UX Planet
▻https://uxplanet.org/mobile-ux-design-the-right-ways-to-ask-users-for-permissions-6cdd9ab25c27
Conseils pour la gestion des demande d’autorisations aux utilisateurs d’une application web (localisation, carnet d’adresses...)
Astuces pour designer une Progressive Web App (PWA)
▻https://www.kaliop.com/fr/comment-designer-une-progressive-web-app
Conseils pour l’organisation de l’interface d’une PWA
« Des #émojis accessibles »
"La synthèse vocale de mon téléphone le lit ainsi : « Singe qui se cache les yeux main avec index et majeur croisé teint clair main avec index et majeur croisé teint clair main avec index et majeur croisé teint clair okok bon bah bon courage visage envoyant un baiser visage envoyant un baiser visage envoyant une baiser »."
▻https://blog.hello-bokeh.fr/2020/07/23/des-emoji-accessibles
DECEIVED BY DESIGN - How tech companies use dark patterns to discourage us from exercising our rights to privacy
▻https://fil.forbrukerradet.no/wp-content/uploads/2018/06/2018-06-27-deceived-by-design-final.pdf
27.06.2018 - Summary
In this report, we analyze a sample of settings in Facebook, Google and Windows 10, and show how default settings and dark patterns, techniques and features of interface design meant to manipulate users, are used to nudge users towards privacy intrusive options. The findings include privacy intrusive default settings, misleading wording, giving users an illusion of control, hiding away privacy-friendly choices, take-it-or-leave-it choices, and choice architectures where choosing the privacy friendly option requires more effort for the users. Facebook and Google have privacy intrusive defaults, where users who want the privacy friendly option have to go through a significantly longer process. They even obscure some of these settings so that the user cannot know that the more privacy intrusive option was preselected.
The popups from Facebook, Google and Windows 10 have design, symbols and wording that nudge users away from the privacy friendly choices. Choices are worded to compel users to make certain choices, while key information is omitted or downplayed. None of them lets the user freely postpone decisions. Also, Facebook and Google threaten users with loss of functionality or deletion of the user account if the user does not choose the privacy intrusive option.
#GAFAM #vie_privée #nudging #Facebook #Google #Microsoft #Android #WIndows_10
Analyse complète et détaillée des pratiques de Facebook, Google et Microsoft pour optimiser le « consentement par défaut » des utilisateurs.
Dark patterns can be described as “...features of interface design crafted to trick users into doing things that they might not want to do, but which benefit the business in question.”, or in short, nudges that may be against the user’s own interest.13This encompasses aspects of design such as the placement and colour of interfaces, how text is worded, and more direct interventions such as putting pressure on users by stating that the product or service they are looking at is about to be sold out.
Une réflexion sur l’#UX de la ligne de commande, à partir de l’exemple #Unix. Est-il normal que les commandes aient de plus en plus d’options ?
▻https://danluu.com/cli-complexity
#CLI
Rematérialisez ce pays !
« Ce matin j’ai voulu faire ma déclaration trimestrielle à l’URSSAF.
L’ancien site Net Entreprises fonctionnait très bien, mais l’URSSAF
reste fidèle à la célèbre devise selon laquelle le mieux est l’ennemi
du bien. C’est donc désormais le Portail des Autoentrepreneurs de
l’URSSAF que je dois utiliser. Voici en gros le résumé des deux
dernières heures.
Je saisis mon login et mon mot de passe pour me connecter.
La connexion échoue.
Je demande l’envoi d’un mot de passe temporaire pour me connecter.
La connexion avec ce nouveau mot de passe échoue.
Je redemande l’envoi d’un mot de passe temporaire.
La connexion échoue encore.
Je réessaie une troisième fois.
La troisième tentative de connexion échoue, et l’interface m’informe
que mon compte restera bloqué pendant 15 minutes suite à un nombre trop élevé de tentatives de connexion.
J’attends 15 minutes.
Je me rends sur la page de connexion alternative qui propose de se
connecter avec les anciens identifiants de Net Entreprises.
La connexion réussit. Je me rends dans la rubrique Déclaration de Ressources.
La déclaration échoue et l’interface m’informe que je dois être
connecté pour faire ma déclaration.
J’appelle le 0811 011 637 pour une assistance téléphonique.
La dame au 0811 011 637 réussit à me débloquer mon compte.
Je me connecte avec mes identifiants provisoires.
Je modifie mon mot de passe, et l’interface m’informe qu’il ne doit
pas dépasser huit caractères.
Je m’apprête à faire ma déclaration, mais le site est saturé.
(…)
Je pourrais citer des exemples similaires ad nauseam, mais je pense
que ce n’est pas la peine de faire un dessin. On est manifestement
face à un malaise suite à la dématérialisation intempestive de tous
les services dans ce pays.
Formulaires papier remplacés par des portails web codés avec les pieds.
Employés de guichet remplacés par des distributeurs et des numéros
0800 au fonctionnement aléatoire.
Conseillers remplacés par des bots automatiques.
Caissières de supermarché remplacées par des douchettes Scan’Lib.
Etc.
J’ai une proposition très simple à faire : arrêtez le délire et
rematérialisez ce pays ! »
Collaborer pour un design plus accessible : l’exemple d’Exodus Privacy
▻https://framablog.org/2019/11/29/collaborer-pour-un-design-plus-accessible-lexemple-dexodus-privacy
Quand on prend conscience qu’un site web destiné au grand public devrait être plus facile à aborder et utiliser, il n’est pas trop tard pour entamer un processus qui prenne en compte les personnes qui l’utilisent… L’association #Exodus_Privacy prend … Lire la suite
#Communs #Contributopia #Interview #Libres_Logiciels #Non_classé #UX-UI #Applications #Maiwann #UX
▻https://www.lemonde.fr/pixels/article/2019/10/15/plongee-dans-l-ux-l-art-de-manipuler-les-joueurs-de-jeu-video_6015608_440899
Entre psychologie cognitive et design informatique, plongée dans l’UX, l’art de manipuler les joueurs de jeu vidéo
Where to put #buttons on #forms
▻https://adamsilver.io/articles/where-to-put-buttons-in-forms
Align the primary button to the left edge of the inputs
illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form."
This layout also helps screen magnifier users to see it without having to pan across.
Les boutons des formulaires de #SPIP seraient mal placés ?
exemple de résultats du « Eye tracking » pour le premier point : ▻https://www.lukew.com/ff/entry.asp?571
Salut @tetue,
▻https://www.slideshare.net/tetue/amliorer-la-lisibilit-typographique
Dans cette présentation où je suis pourtant d’accord avec tes conseils pour le reste, tu dis qu’ il ne faut jamais justifier un texte .
Là, je désapprouve.
Je n’ai pas de preuve à apporter, mais juste une sensation. Mais je suis capable d’en tirer des hypothèses.
Je pense qu’en dessous d’un certain nombre de mots par ligne et d’un minimum de qualité apportée à la justification (règles de typo, césures, largeur de blanc maxi), elle rend plus service qu’elle ne dessert.
J’ai l’impression qu’elle fixe des points de références que l’oeil repère à chaque fin de ligne et le fait que ces points soient alignés produit une habitude pour le mouvement oculaire.
J’ai aussi remarqué que sur papier (donc sans gène de scintillement ni de sur-luminosité) elle permet de fournir moins d’effort que l’équivalent aligné à gauche.
Tu as du contenu qui permettrait de justifier ton assertion ?
#typographie #ux
Kyan Khojandi - L’ addiction (▻https://www.youtube.com/watch?v=D-wMM...
▻https://diasp.eu/p/9309895
Kyan Khojandi - L’ addiction | #addiction #humour #instagram #UX