La semaine en pixels – 23 juin 2019

Stéphanie Walter

Senior UX Designer - Mobile Expert

Senior UX Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

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.

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *