BOLT.DIY : Lancez, exécutez, éditez et déployez des applications web complètes à l’aide de n’importe quel LLM !
| | | |

BOLT.DIY : Lancez, exécutez, éditez et déployez des applications web complètes à l’aide de n’importe quel LLM !

📌 BOLT.DIY vous permet d’installer une instance de BOLT sur votre ordi et ainsi pouvoir le requeter de manière illimitée, avec le modèle de votre choix.

ARTICULATING DESIGN DECISIONS : Comment dialoguer efficacement avec les parties prenantes, préserver votre bien-être mental et offrir la meilleure expérience utilisateur.
|

ARTICULATING DESIGN DECISIONS : Comment dialoguer efficacement avec les parties prenantes, préserver votre bien-être mental et offrir la meilleure expérience utilisateur.

📌 ARTICULATING DESIGN DECISIONS de Tom Greever présente l’importance de la communication dans le design, une compétence trop souvent sous-estimée. Il explique que la différence entre un bon designer et un excellent designer réside non seulement dans leur capacité à résoudre des problèmes avec leurs créations, mais aussi à communiquer efficacement leurs décisions.

CHROME TABS GROUP : Enregistrez des groupes d’onglets par thème

CHROME TABS GROUP : Enregistrez des groupes d’onglets par thème

📌 Découvrez comment organiser efficacement vos onglets sur Chrome en créant, gérant et enregistrant des groupes d’onglets. Optimisez votre productivité et votre expérience de navigation via cette astuce !
Que vous ayez plusieurs projets en cours ou simplement besoin de mieux gérer vos onglets au quotidien, cette fonctionnalité peut grandement améliorer votre efficacité sur le navigateur. Nous allons donc explorer comment créer, gérer, mais surtout ENREGISTRER des groupes d’onglets sur Chrome pour optimiser votre productivité et votre expérience de navigation.

Les gens ne lisent pas en ligne, ils scannent. Voici comment écrire pour eux – 9 modèles de balayage oculaire, 10 façons d’adapter le texte pour une lisibilité maximale.

Les gens ne lisent pas en ligne, ils scannent. Voici comment écrire pour eux – 9 modèles de balayage oculaire, 10 façons d’adapter le texte pour une lisibilité maximale.

📌 TRADUCTION d’un article for interessant sur les différentes manières qu’ont les utilisateurs de “scanner” et parcourir vos écrans. Cela me rappelle mes études de psychologie ou l’on parlait beaucoup de la lecture en F ou en T.

Critères ergonomiques de Nielsen & Molich mais aussi les 8 règles d’or de Shneiderman
|

Critères ergonomiques de Nielsen & Molich mais aussi les 8 règles d’or de Shneiderman

📌 LES CRITERES ERGONOMIQUES CE BASTIEN ET SCAPIN restent mon réferentiel numero 1 en terme de conception. Ils permettent de conserver à l’esprit les exigeances auxquelles mon interface doit répondre ainsi que le niveau d’éxigeance dans le détail de la conception, en ne s’arretant pas au cas nominal !

Ci dessous la traductions de 2 autres grilles de critères heuristiques, plutot connus, mais une petite piqure de rappel ne fait pas de mal 😉

GOOGLE CACHE VIEWER : Passez les paywalls de vos sites préférés
|

GOOGLE CACHE VIEWER : Passez les paywalls de vos sites préférés

📌 GOOGLE CACHE est une fonctionnalité de Google qui permet de enregistrer une copie d’une page web. Si comme moi vous cherchez à lire un article d’un site d’informations bloqué par un paywall (comme les articles Medium par exemple), vous pouvez utiliser Google Cache pour lire l’article. Pour ce faire, il suffit de taper l’adresse de l’article sur ce site ou de cliquer sur l’icône de l’extension si dessous 😉

Les nouveaux Power Bookmarks de Chrome reçoivent une nouvelle “vue visuelle” pour vous permettre de trouver les choses plus rapidement

Les nouveaux Power Bookmarks de Chrome reçoivent une nouvelle “vue visuelle” pour vous permettre de trouver les choses plus rapidement

📌 POWER BOOKMARK est une nouvelle fonctionnalité de Chrome, via son programme CHROME FLAGS, qui facilitera l’organisation et l’enregistrement de vos favoris internet.

Le moyen le plus rapide de convertir des images dans d’autres formats sur Mac.
|

Le moyen le plus rapide de convertir des images dans d’autres formats sur Mac.

📌 Petit TIPS aujourd’hui sur une fonctionnalité méconnue de MacOS.
Saviez-vous que vous pouvez convertir des images d’un format à un autre en mode natif sur votre Mac, et ce, sans utiliser de logiciel d’édition d’images en ligne ou d’outils d’édition de bureau comme Photoshop ou Gimp, etc.

CHROME FLAGS : scroller dans vos multiples onglets chrome
| |

CHROME FLAGS : scroller dans vos multiples onglets chrome

📌 SCROLLABLE TABS est une fonction chrome vous permettant de scroller dans vos multiples onglets chromes. Si comme moi, vous avez beaucoup trop d’onglets ouverts, alors vous pouvez avoir l’envie régulière d’accéder à des onglets qui ne sont plus accessibles horizontalement dans la barre d’onglet. Cette fonctionnalité chrome vous permet de pouvoir scroller via votre trackpad ou souris pour accéder aux onglets “masqués”.

Déplacer automatiquement des fichiers d’un dossier à un autre sur macOS
|

Déplacer automatiquement des fichiers d’un dossier à un autre sur macOS

📌 La mise en place d’un transfert automatique de fichiers est relativement facile sur macOS.
En effet, vous n’avez besoin d’utiliser qu’une seule application pour écrire ainsi que pour planifier votre script sur un Mac et il s’agit de l’application #AUTOMATOR, installé par défaut sur votre système et que vous pourrez utiliser pour automatiser de nombreuses tâches sur votre Mac.

CHROME FLAGS : comment activer le mode Lecteur ?
| |

CHROME FLAGS : comment activer le mode Lecteur ?

📌 LE MODE LECTURE de google chrome est une option à activer dans les google flags et qui vous permettra de reformater le contenu d’une page pour n’en afficher que le principal, sans distraction, dans une mise en page épurée où texte et images sont isolés du reste du contenu pour un meilleur confort de lecture.

Shortcut2
| |

KEYBOARD SHORCUT : Raccourcis chrome personnalisés

📌 KEYBOARD SHORTCUT est une #extension #chrome vraiment utile.
Si comme moi il vous manque quelques #raccourcis pour chrome (dupliquer un onglet par exemple) et/ou que vous souhaitez personnaliser ceux existant par défaut, alors cette extension vous rendra un fier service
#Plugin #Shortcut #cmondary

DesignPrinciple
|

The Design Principles Workshop

📌 ARTICLE présentant l’organisation d’ateliers de design Thinking sur MIRO.
L’idée est de présenter un processus standard en 5 étapes pour trouver les principes directeurs de votre business. Comment trouver les principes qui comptent réellement pour votre entreprise et qui devraient guider votre équipe ? C’est précisément, ce à quoi tente de répondre cet atelier.
#cmondary

SessionLab
|

SESSION LAB : Librairie d’ateliers UX

📌 SESSION LAB est un #librairie proposant une aggregation d’un ensemble de #ressources pour #UX / #facilitateurs / #animateur d’atelier.
Une véritable mine d’or tant pour sa section #Library qui décrit pleins d’atelier, que pour ça section #Template qui vous propose le #timing précis de chacun des #ateliers
Tout simplement génial !
#Resources #cmondary

NormanPoster
| | |

Usability Heuristics : posters

📌 ARTICLE proposant un petit #toolkit sous forme de poster : les Critères ergonomiques heuristiques d’utilisation pour la conception d’interfaces utilisateur.
Les 10 principes de Jakob #Nielsen pour la conception d’interactions sont appelés “heuristiques” parce qu’il s’agit de règles générales et non de directives spécifiques d’utilisation.
#toolkit #ergonomie #usability #cmondary

Overload
|

OVERLOAD : Extension pour vos recherche Google

📌 OVERLOAD est une #extension #chrome qui vous permettra de faire des recherches avancés sur #google, même si vous ne connaissez pas les #keywords correspondants.
vous pourrez donc :
– Exclure certains termes ( – )
– Rechercher au sein d’un domaine précis ( site: )
– Chercher un type de fichier par son extension ( filetype: )
etc …
#Tips #cmondary

Score2
| |

UX : Evaluation des compétences

📌 ARTICLE proposant un toolkit assez sympa d’évaluation des compétences des membres de vitre équipe. Le tableau est décomposé en 16 compétences en 4 catégories.
Les scores saisies dans la feuille de travail sont affichés dans une carte de pointage en lecture seule. La carte de pointage présente le score mais également le score minimum estimé pour chacun des postes afin que les individus puissent facilement voir le delta entre leur situation actuelle et celle qu’ils devraient atteindre, puis fixer des objectifs spécifiques pour passer au niveau supérieur.
#skill #cmondary

Dontsay2
|

19 chose à ne pas dire à un UX researcher

📌 ARTICLE sympa, sur un ton décalé des 19 choses à ne pas dire à un UX Researcher : 
1/ “Nous n’avons pas besoin d’un rapport”
2/  “Cette méthode est trop coûteuse et trop longue”
3/ “Utilisons une salle à miroirs sans tain”
4/ “Avez-vous demandé à l’utilisateur ce qu’il aime dans le produit ?”
5/ Faisons des NPS (net promotor score)
6/ “Tout le monde peut lire un script et prendre des notes”
7/ “Je vous montrerai mon design quand il sera terminé”
8/ “Utilisons nos propres employés comme participants”
9/ “On peut juste faire une enquête”
10/ “Organisons plutôt un focus group”
11/ “Avez-vous demandé à l’utilisateur s’il achèterait ce produit / service”
12/ “Les gens ne scroll pas autant, les résultats de recherche ne peuvent pas aider. Mettons le CTA ailleurs”.
13/ “Lire les protocoles de recherche aux participants mot pour mot”
14/ “J’ai pensé que nous pourrions nous rencontrer tous ensemble” – L’utilisateur veut passer l’interview avec ses collègues / amis
15/ “Faisons juste quelques tests d’utilisabilité, pas besoin de recherche”
16/ “Nous ne pouvons rien obtenir de valable en parlant à un si petit nombre de personnes”.
17/ “Il suffira de le tester auprès des utilisateurs à la fin du projet”
18/ “Nous n’avons pas besoin d’un paneliste pour trouver des utilisateurs”
19/ “Nous sommes une startup, nous n’avons pas encore besoin de recherche sur les UX…”
(pour voir l’ensemble des conseils, sur ce qu’il convient dire à la place, je vous invite à lire l’article 😉 )
#UXResearch #cmondary

static1
|

GUIDE : From Sketch / Figma to After Affect

📌 ARTICLE très complet sous forme de guide pas à pas pour créer de petites animations, et micro-intéractions sous after effect après importation des sources Sketch / Figma.
L’idée est simplement d’utiliser les animations sous #AfterEffect pour donner vie à votre interface et montre comment toutes les éléments doivent se comporter et interagir.

Wireframes
|

Faster Wireframes

📌 ARTICLE proposant un petit #tips sympa pour créer rapidement des #wireframes de #landing pages. L’astuce est bien évidemment réplicable au delà des landing pages, et je dois avouer m’en être déjà plusieurs fois servi pour obtenir des proportions nikels blocs / textes / espacement, très rapidement.
L’idée est simple mais efficace :
1/ Faites une capture d’écran de vos sites préférés
2/ Reproduisez un wireframe de ces pages, par dessus vos screenshots
#tips #cmondary

critics
| |

Design Critics : Comment mieux recevoir les remarques concernant votre travail

📌 ARTICLE super intéressant sur DesignCritics.
Personnellement je plaide pour la confrontation de ses idées, conceptions auprès de ses pairs, tant pour valider / invalider les choix de conception que pour renforcer son argumentaire lors de la présentation de notre travail.
Je pense que le bon format est le Design Critics, lors de Daily Meetings.
Ici l’auteurs quelques conseils avec lesquels je suis en parfait accords, et que je vous liste ici : 
– Demandez un feedback très tôt et régulièrement
– Demandez à être poussé hors de votre zone de confort
– Considérez vos collègues comme vos clients
– Présentez d’abord vos données, argumentez en partant de votre analyse
– Clarifier le “pourquoi” d’une critique, chercher à comprendre les raisons qui amène votre interlocuteur à formuler ce type de feedback.
– Ne prenez rien personnellement (et voyer le gain en qualité de votre proposition, votre argumentaire, votre expertise) 
Je reprendrais également la citation de Elon Musk ici : 
“Rechercher constamment la critique. Une critique bien pensée de ce que vous faites est aussi précieuse que de l’or”.
– Elon Musk

Jenga
|

Que signifie être vraiment “Agile” en tant que designer ?

📌 ARTICLE très intéressant sur l’agilité et l’adaptation du designer au manifeste Agile.
Fonction de la maturité du client mais également des enjeux de communications, les choses ne sont pas toujours simples. Je partage tout de même assez les conseils de l’auteur !
1/ Etablir un vocabulaire commun entre les différentes parties prenantes (communiquer efficacement niveau 1 😉 )
2/ Comprendre puis concevoir en gardant à l’esprit les enjeux business et les contraintes techniques
3/ Concevoir et maintenir des modules réutilisables (voir maintenir un design system)
4/ Délivrer à court terme, mais conserver toujours une vision à long terme
5/ Prendre des décisions stratégiques au bon moment et épauler le ProductOwner (communiquer efficacement niveau 2 😉 )
6/ Éviter d’être (trop) un puriste quant au process
7/ Soyez un coéquipier efficace, mais aussi et surtout un bon négociateur (communiquer efficacement niveau 3 😉 )
#tips #cmondary

Share
|

Tips : Partager votre écran avec messenger

📌 TIPS : Saviez vous que vous pouviez désormais partager votre écran mobile (#iOS ou #Android) directement depuis l’application Facebook #Messenger.
Cela peut être super pratique pour venir en aide à un de vos proches, mais également pour éventuellement recueillir du #feedback de vos utilisateurs !
1/ démarrer un appel vidéo sur votre smartphone
2/ sélectionner l’option “partager votre écran”
3/ cliquer sur le bouton “démarrer le partage”
4/ vous pourrez mettre fin au partage d’écran en revenant à la conversion et en cliquant sur le bouton “arreter le partage”
#Tips #cmondary

Google Chrome Keyboard Shortcuts
|

9 Raccourcis clavier utiles pour CHROME

📌 ARTICLE sur les 9 raccourcis les plus importants sur Google Chrome.
Personnellement ce sont réellement ceux que j’utilise tous les jours.
Spécialement le combo :
1/ ⌘ + L  pour séléctionner la barre d’adresse
2/ ⌘ + C pour copier l’adresse
3/ ⌘ + Shift + N pour ouvrir une page en mode incognito
4/ ⌘ + V pour coller l’adresse
(tout ceci est super pratique si vous souhaitez continuer a lire vos articles medium une fois la limite atteinte 😉 )
1. Nouvelle fenêtre Incognito Mode
Windows: Ctrl + Shift + N
Mac: ⌘ + Shift + N
2. Ré-ouvrir le dernier onglet fermé
Windows: Ctrl + Shift + T
Mac: ⌘ + Shift + T
3. Fermer l’onglet en cours
Windows: Ctrl + W
Mac: ⌘ + W
4. Passer d’un onglet à l’autre
Windows: Ctrl + PgDn (onglet suivant) et Ctrl + PgUp (onglet précédent)
Mac: ⌘ + Option + flèche droite (onglet suivant) et ⌘ + Option + flèche gauche (onglet précédent)
5. Minimiser la fenêtre en cours
Windows: Ctrl + M
Mac: ⌘ + M
6. Ouvrir l’onglet “Téléchargement”
Windows: Ctrl + J
Mac: ⌘ + Option + L
7.  Ouvir l’onglet “Bookmarks Manager”
Windows: Ctrl + B
Mac: ⌘ + Option + B
8. Sélectionner la barre d’adresse
Windows: Ctrl + L
Mac: ⌘ + L
9. Effacer les données de navigation
Windows: Ctrl + Shift + Delete
Mac: ⌘ + Shift + Delete
Pour la liste exhaustive des #shortcuts en français sur la page officielle google, c’est par ici :
https://support.google.com/chrome/answer/157179?hl=fr
#Tips #cmondary

Calendar
|

7 conseils pour gérer votre temps

📌 ARTICLE sur comment gérer son temps de travail en 7 conseils plutôt smarts 😉
L’auteur propose de mieux gérer son temps afin de retrouver du temps pour le design. Evidemment ces #tips sont valables même si vous n’êtes pas Designer.
Personnellement les conseils 5 et 7 son pour moi ceux qui sont les plus efficaces !!!
1/ Bloquer vous du temps pour designer, directement dans votre #agenda 
2/ N’ayez pas peur de refuser des réunions
3/ Proposer de décaler les réunions à des heures ou jours qui vous conviennent mieux
4/ Respectez votre temps (Exigez un ordre du jour, un objectif et une durée pour vos réunion, et lors des réunions ne perdez pas de temps)
5/ Ne commencez pas la journée avec vos mails ou Slack / Teams / etc !!!
6/ Faire des pauses
7/ Ne choisissez pas la fréquence hebdomadaire par défaut (Privilégier de courtes reunions quotidienne plutôt qu’hebdomadaire, comme un daily stand up meeting 😉 )

Environment centered design
| |

Environment centered design : Actant Mapping Canvas

📌 ARTICLE super intéressant sur ce nouveau cadre de conception appelé : la conception centrée sur l’environnement (Environment centered design) qui se propose de réfléchir une #conception centrée non plus uniquement sur l’utilisateur, mais sur l’ #environnement !!
Sachant que nous dépassons assez habituellement les limites environnementales de la Terre : qu’est-ce qui est en danger pour tous les êtres vivants si nous, les humains, continuons à ne pas tenir compte des besoins, des limites et des préférences de la Terre dans le processus de conception et de fourniture des produits et des services que nous contribuons à construire.
Je trouve le concept et la démarche franchement intéressante, dans l’air du temps et engagée !!
L’article porte sur une première #méthode, un premier #Canvas : Le ACTANT MAPPING CANVAS.
Le #canvas aide à cartographier tous les acteurs humains et non humains (“actants”) d’un produit ou d’un service que vous (re)concevez et – idéalement – vous fait commencer à sympathiser avec eux par le biais d’éléments actionnables dans votre processus décisionnel.

BOX
|

Hacking BOX

📌 VIDEO super sympa sur le détournement volontaire de fonctionnalité !
Reflexion personnelle sur le #hack :
Le hacking désigne l’activité qui consiste à modifier l’un des éléments d’un matériel / logiciel afin que celui-ci puisse avoir un comportement (une utilité) autre que celui (celle) pour lequel il a été conçu.
Trop souvent assimilé au piratage, le Hacking n’est pas toujours une activité illégale (Black hat VS White hat). Parfois traduit par #bidouillage en français, je pense que cette définition n’est guère mieux, car ne reflette pas l’expertise bien souvent nécessaire !
et vous qu’en pensez vous ? Voyez vous le hacking comme de la #piraterie ? le détournement de fonctionnalité vous est il bénéfique dans votre métier ? vous rend-t-il plus créatif ?
#Skills #cmondary

sprint 1
|

Workshop de 2h : KickOff Meetings

https://uxdesign.cc/this-2-hour-workshop-is-better-than-your-average-kickoff-meeting-dfaafa2931e4
📌 ARTICLE proposant un #Workshop de 2h pour remplace vos #KickOff Meetings.
En résumé :
1/ Introduction (5min)
2/ Apprendre à connaître l’entreprise, le produit et les utilisateurs (20min)
3/ Que voulez vous réellement ? (10min)
4/ Décrire le processus de conception (10min)
5/ Cartographier la solution existante (30min)
6/ Redéfinir le problème (20min)
7/ Lightning demos (10min)
8/ Synthèse et prochaines étapes (5min)

inbox
| |

INBOXZERO

📌 ARTICLE sur le #INBOXZERO.
J’utilise la méthode depuis de nombreuses années, a tel point que mon outil principal est vraiment ma boite #mail. je m’en sert également comme #Todo-List.
Cependant contrairement à l’auteur de l’article je ne parviens pas à utiliser l’option MULTIPLE INBOX dont je trouve l’expérience utilisateur très mauvaise.

founder
| |

Arguments sur l’importance de l’ UX

📌 ARTICLE sur les #arguments clés pour #convaincre de l’importance de l’ #UX au coeur de votre Business
Partie 1. Un parcours utilisateur fluide et sans friction
Partie 2. La quête de la performance et de l’amélioration continue
Partie 3. Tirer parti des données utilisateurs
Partie 4. Simplifier
Partie 5. Définir une expérience identitaire : le produit, c’est l’expérience.
Partie 6. Pivoter, revoir la copie from scratch
Partie 7. Prototyper tester, itérer…
Partie 8. Ne pas sous-estimer le temps d’adoption et la courbe d’apprentissage

Empty
|

Empty states

https://jeremiahlam.com/blog/why-empty-states-should-never-be-neglected
📌 ARTICLE sur la nécessité de ne pas négliger le status “vide” de vos écrans qui peuvent “être utilisés pour guider vos utilisateurs sur les actions a réaliser, leur apprendre à connaître votre application ou simplement renforcer l’identité de votre marque.”
#EmptyState #Application #Interface #UX #UI #Tips #cmondary

Anim

Animation TIPS

📌 ARTICLE très intéressant sur les caractéristiques d’une bonne animation, d’un bon design d’interaction. Toujours à garder à l’esprit : – Les animations doivent être pertinentes – L’animation doit soutenir l’interaction – L’animation ne doit jamais ralentir l’expérience – L’animation doit être naturelle – L’animation doit refléter l’image de marque – L’animations doit tenir compte de la faisabilité technique