UX

Creating distraction-free reading experiences

Distractions have always been a natural constituent of our lives. But with the rise of mobile technology, a circus of notifications, and all the noise going on around us, it’s become harder and harder to focus on a task at hand. On the web, we are confronted with an unprecedented amount of distractions that gave birth to various tools like Readability, Instapaper, Adblocker, etc. Attention span shortens while the quality of reading experiences declines; ultimately leaving a lot of great content out there undiscovered, unloved, unshared and unread by most. This is not how we imagined the web to be. It’s our job as designers to bring clarity back to the digital canvas by crafting reading experiences that put readers first.

Making password managers play ball with your login form

Password managers are essential to secure internet usage, so making our login fields work with them is extremely important. This will mostly happen automatically if you follow best practices. The autocomplete attribute can make it easier for password managers to recognise your fields. Using hidden attributes can make password managers fail altogether. This can be hacked around, but I do not recommend doing so, unless absolutely necessary.

Laisser les champs mot de passe en clair

J’avais découvert chez Luke Wroblewski que la galère historique des mots de passe masqués dans les champs de formulaires Web n’est pas une fatalité, et je découvre aujourd’hui qu’il n’était pas le premier à y penser ni le mettre en œuvre. Voilà quelques ressources sur le sujet fournies par quelques-uns qui ont répondu à mon appel à références sur Twitter.

Lâchez prise !

Le Firefox de mon MacBook Pro HD est configuré avec une taille de texte par défaut de 18px. Sur mon Mac mini branché à la TV de mon salon, c’est 24px. Si votre site m’impose une taille de texte illisible de 11px ou son design est complètement cassé bien que respectant ma préférence de taille de texte, ne comptez pas sur moi pour y rester…

Retrouvons nous à Web UX et Sud Web les 26 et 27 mai

Vous le savez sans doute si vous me lisez régulièrement, sur ce blog ou via mes tweets, je suis dingue de Web, et toujours intéressé par ses moyens de mise en œuvre, usages et acteurs, et donc très intéressé par tout événement permettant de mixer tout cela. Cette année, en plus de l’incontournable rendez-vous annuel Paris Web en octobre, vous pourrez me croiser fin mai à Nîmes pour Web UX et Sud Web.

Donner des noms explicites aux fichiers en téléchargement

De nombreux sites proposent de télécharger des fichiers. Qu’il s’agisse de documents bureautiques, de programmes ou de tout autre format, le nom du fichier sur le serveur sera presque tout le temps conservé tel quel par l’utilisateur sur son ordinateur. L’utilisateur sera peut-être amené à conserver ce fichier parmi d’autres, pour utilisation ultérieure. Il est donc important que son nom soit explicite.

Un tri incompréhensible des fuseaux horaires sur txtst.com

La géolocalisation est un service de plus en plus tendance, notamment au sein des applications Web sociales. La solution Fire Eagle de Yahoo! permet par exemple de centraliser la localisation d’une personne, et de rendre cette information disponible à toutes sortes de services. Mike Bukhin a ainsi créé Fire Eagle Badge qui permet par exemple à un blogueur d’afficher une petite carte Yahoo! Maps sur son blog pour montrer en temps réel où il se trouve.

Respecter les usages courants

L’innovation, ça a du bon, ça fait avancer. Mais à trop innover, on perd les utilisateurs en chemin, parce qu’on leur impose de nouvelles choses qui ne sont pas identiques aux habitudes qu’ils ont prises. Comme le disait Voltaire, « le mieux est l’ennemi du bien ».

Un menu de navigation toujours visible

Depuis quelques jours, le menu de navigation principal de Gastero Prod reste visible en permanence même si vous descendez dans la page. Cela peut vous sembler un caprice de g33k qui tente des trucs un peu sexy, mais à l’usage, je suis extrêmement content de ce rapide ajout ergonomique !

En ergonomie, le choix des bons symboles est primordial

Si vous devez opter pour des métaphores visuelles pour représenter des données ou des actions réalisables, faites bien attention à ne pas laisser d’ambiguïté possible, qui pourrait conduire à une mauvaise interprétation ou utilisation, et donc une perte de confiance de l’utilisateur.

Ergonomie à revoir : Clio Renault Sport

Bon, là je sais, on va me dire que je suis trop perfectionniste, que ça frise le harcèlement, mais que voulez-vous, il y a des choses qu’il serait tellement simple de faire comme il faut, et qui sont pourtant baclées…

Ergonomie à revoir : SOA.com

La société SOA Software, comme son nom l’indique, est un éditeur de logiciel appartenant à la grande tendance SOA actuelle. Mais peut importe, les défauts d’ergonomie que l’on peut relever sur leur site ne sont pas liés à leur activité.

Ergonomie à revoir : Rowenta

Je suis tombé dernièrement sur un four imaginé par Rowenta qui m’a un peu surpris. Je dis bien « imaginé », parce que je n’ai jamais rien vu de semblable.

Ergonomie à revoir : CashStore.fr

A priori, avant même de penser à ses contenus et à leur présentation, il n’est pas franchement difficile de suivre quelques règles simples d’ergonomie pour assurer à l’internaute une navigation aisée et donc une satisfaction minimale. C’est pourtant trop souvent qu’un site propose une ergonomie bâclée, gênante, voire même parfois bloquante…

Un problème d’ergonomie chez les petits Swiss

Le site de la compagnie aérienne suisse Swiss International Airlines présente un défaut d’ergonomie bien incompréhensible au niveau de la sélection des langues de navigation. Surtout s’agissant du site d’une compagnie d’un pays multilingue.

Other tags to explore

3D 404 500px 62.5% API Algolia AlwaysData Android Apple Blogmarks CSS Canon Chrome Clever Age Cloudinary CrashPlan Daft Punk Diigo DotClear Drobo FeedBurner Firefox Firefox OS Flickr Free GIF Gandi Gastero Prod Google Greasemonkey HD HTML HTTPS Hong Kong IndieWeb Internet Internet Explorer JAMstack JPG Magazine Jan Kounen JavaScript Jekyll KISS Les Nuls Linux Mac Mastodon Medium Microsoft Montessori Mozilla NetBook New York Opquast PEAR PHP POSSE PWA Paris Web Phototrend PicLens Pinboard RATP RWD RewriteRule SAV SEO SNCF SPIP SVG Safari Service Worker Sony Sud Web TGIF TV TinEye Twitter URL UX Venise W3C Web Web 2.0 Web Services Web UX WebPerf Webmention WiFi Windows Yahoo a11y accessibility advertisement agenda animal animation astuce backup bag blog book bookmarks browser bug cinema comic comments commerce computer concert conference couleur creation design dessin animé diving download droit développement e-commerce ebook em empathy esviji extension fail feed fichier financement participatif flexbox font formulaire fun game gear geolocation humour hébergement iOS iPad iPhone iPod Touch iTunes icon image informatique innovation jQuery layout life littérature livre loisirs macOS macro mail marketing me media misc mobile moi movie music night offline opensource password phone photo phpHeaven phpMyChat plugin portrait privacy progressive enhancement push quality qualité quote religion rem search security semantic series social network society software spam sport standards statistics tag talk test time-lapse travel video video game viewport vocabulary wiki