La semaine en pixels – 23 juin 2019
Chaque semaine, je publie un condensé de ma veille web design, UX (expérience utilisateurs), design d’interface et mobilité, HTML et CSS, mais aussi des outils et ressources et de l’inspiration en tout genre.
Au programme : accessibilité et typographie, signes d’une faible maturité UX, quelques cartes UX pour de l’idéation, un menu responsif, les champs obligatoires dans les formulaires, un outil de prototypage mobile, des tableaux CSS, un avis satirique sur le nouvel élément <toast>, frameworks UI et expérience utilisateur, état du CSS en 2019, UX et illustrations mobiles, biais cognitifs, tests d’utilisabilité, etc.
Pour plus de liens chaque matin vous pouvez me suivre sur twitter. Bonne lecture :)
J’ai publié un truc cette semaine
#UX #UI #Frameworks
Pretty, but not Usable les slides et la vidéo de ma conférence à @cssdayconf où je partage mon expérience et mon processus, quelques conseils de conception/relations dev/designer pour aider à construire un produit centré utilisateur tout en travaillant avec un framework UI.
#UX #Journeymap
Les slides de notre atelier UX in Lux de mercredi sur les User Journey Maps sont en ligne.
tl;dnr, s’il devait n’en rester qu’un ?
#Accessibilité
5 Keys to Accessible Web Typography (5 clés pour une typographie Web accessible)
- taille de la police de base en unités relatives
- couleur & contraste
- polices lisibles avec le test « Milimeter » (j’utilise aussi le test a1iIlL0o)
- la forme des paragraphes, la longueur et la hauteur des lignes
- sémantique et niveaux de titres et hérarchie
Les articles de la semaine
#UX
- Envisioning future user journeys: Tarot Cards as a design tool, des cartes de « tarot telling » comme outil interessant d’idéation
- 5 Signs of Low UX Maturity, 5 Signes de faible maturité des UX : 1. vous devez expliquer la différence entre graphisme et conception d’interface, 2. les tests d’utilisabilité sont effectués tardivement et uniquement sur un design terminé, 3. aucune étude sur le terrain, 4. le designer n’est pas invité aux réunions de produits et 5. seulement 1 ou 2 personnes sont responsables du design d’experience utilisateur
- Effectuer un test d’utilisabilité n’est pas chose facile, voici 5 principes pour vous aider : 5 principles for more accurate user testing
- Should you mark the required fields in a form? Si la plupart des champs du formulaire sont obligatoires, devrions-nous quand même les marquer ? Selon Nielsen, la réponse courte est oui.
- A list of 84 cognitive biases une liste de 84 biais cognitifs expliqués et comment les sites et les applications les utilisent pour « manipuler » (ou persuader) les utilisatrices. Je ne dis pas que vous devriez les utiliser dans vos processus de conception, mais c’est intéressant d’en être conscient.
#Responsive #Menu
“Using Hamburger Menus? Try Sausage Links (scrolling navigation).” Concept intéressant d’une navigation responsive défilante. L’un des problèmes pour moi est la « coupe à débordement » incontrôlée. Un journal français l’a mis en place et sur mon mobile, Culture a été découpée en « Cul » (français pour « Ass »).
#HTML #Specifications
“Introducing the new HTML element – welcome <clippy>!” un regard satirique sur l’état actuel du développement des « standards » du web et Google introduisant l’élément <toast>.
#Illustration
6 Ways Digital Illustration Improves User Experience for Web and Mobile l’illustration, ou 6 façons d’améliorer l’expérience de l’utilisateur pour le Web et le mobile
#Design #Collaboration
Brad Frost and Dan Mall: Rethinking designer-developer collaboration: un podcast intéressant de plus de 50 minutes sur les relations design / développement, l’agile, le design system, etc.
De l’inspiration, du fun et de jolies idées
#HTML #Brutalisme
This page is a truly naked, brutalist html quine, une idée fun de page qui nous ramène à l’époque bizarre et expérimentale des sites webs.
L’actualité webdesign
#Layout #API
The Layout Instability API – Détectez les changements de mise en page inattendus en JavaScript avec l’API Layout
#CSS
State of CSS, 2019 edition, l’état du CSS en 2019, les résultats du sondage
Des ressources outils et plugins pour vous faciliter la vie
#Accessibilité
A11Y with Lindsey : un blog cool avec beaucoup de ressources et d’articles sur l’accessibilité
#Prototype
Origami Studio, un outil pour créer des prototypes interactifs pour des applications mobiles sans avoir besoin de coder. Vous pouvez les tester directement sur Android et iOS
#Tableaux
34 CSS Tables, une liste de tableaux HTML et CSS avec du code et des exemples, des tableaux responsifs aux tableaux de prix, des tableaux périodiques, etc.
#Viewport
Tornis est une bibliothèque JavaScript minimale qui surveille l’état de la fenêtre d’affichage de votre navigateur, vous permettant de réagir chaque fois que quelque chose change.
