Exotech.biz

Web, Technology & life by Bastien Labelle

Aller au contenu | Aller au menu | Aller à la recherche

Readability, améliorez votre expérience lecture sur le web

J'ai récemment lancé mon blog personnel en anglais, où j'ai fait un travail particulier en termes d'UI et d'expérience utilisateur (UX). En me basant sur le principe KISS (NDLR: keep it simple, stupid), j'ai essayé de concentrer mes efforts sur le contenu. En ressort une interface simple et minimaliste pour un blog centré sur son contenu.

Une chose est intéressante: il n'y a absolument pas de sidebar, de widget ou autre contenu qui peuvent géner la lecture du contenu principal. J'avais déjà évoqué le sujet de l'anxiété de l'information en prenant pour exemple notamment le site de 20 minutes qui est plus que surchargé. Je trouve que c'est aussi le cas sur exotech.biz, où l'on peut être facilement distrait par la sidebar.

Readability, avant et après

Arrivé dans mon Delicious via un contact bien intentionné, Readability vient pallier ce problème d'anxiété de l'information. Il s'agit en fait d'un bookmarklet qui permet de s'abstraire de tout ce qu'il y a autour du contenu d'une page web, et de ne donner en rendu que le contenu d'un article par exemple. Ainsi, cela permet de se concentrer sur le contenu, et la lecture devient bien plus aisée.

Le bookmarklet est customisable, et permet d'afficher plusieurs styles différents qui plairont j'en suis sûr à tous les gouts. Ce petit bout de script est magique, et offre un confort de lecture exceptionnel. Readability ne marche malheureusement pas partout, mais fournit d'assez bon affichages dans de nombreux cas. Cependant, cela me fait penser qu'il faudrait vraiment standardiser les blogs autour d'un micro-format.

User experience: ces petits riens qui changent la vie

Je ne sais pas vous, mais moi, moins je me sers de ma souris (de mon trackpad multitouch en réalité), plus je suis heureux. Peut-être que c'est par fénaiantise de déplacer un poil ma main alors qu'elle est confortablement installée sur le clavier, mais il faut avouer que les raccourcis clavier, c'est du bonheur! C'est peut-être aussi ça que j'ai toujours aimé sur les Mac, car même à l'époque de ce bon vieux Performa 6300, "Pomme + Q" existait déjà, et c'était loin d'être le seul raccourci disponible!

La navigation au clavier, c'est un vrai plus en terme de productivité, et ils sont nombreux à l'avoir adopté: Netvibes, GReader, Gmail, etc. Un autre exemple plus récent, celui de ffffound, qui permet de naviguer comme on le veut en appuyant sur des touches du clavier. La souris devient donc quasiment inutile.

Et aujourd'hui, c'est Tumblr qui se dote de la navigation au clavier. Un petit rien qui change la vie, qui permet de naviguer entre les pages de votre dashboard en appuyant sur les flèches directionnelles droite et gauche. KISS. Ne manque plus qu'ils intègrent tout ça façon ffffound avec des raccourci clavier pour rebloguer et mettre un petit coeur, et Tumblr devient vraiment un must en termes d'user experience.

En ajoutant la navigation au clavier et l'app iPhone Tumblrette (récemment rebrandée en tant qu'app officielle) à la simplicité du service et à toutes les petites features déjà en place, la start-up New-Yorkaise est vraiment en train de devenir ma start-up préférée!

Crédit photo: Flickr user wZa HK

Website stencil kit par Design Commission

On a beau être avoir accès à des technologies extrêmement avancées comme iPlotz (qui a l'air d'être un excellent outil gérant très bien le feedback) pour faire du wireframing et du UI design, mais parfois, il faut avouer que rien ne vaut un crayon et de papier. Cela est valable pour un UI designer, mais aussi pour quelqu'un qui fait de la programmation, pour noter des algorithmes ou pour modéliser des bases de données.

Si vous êtes plutôt du genre à bosser façon 37 Signals, que vous n'aimez pas perdre de temps sous Photoshop, et que vous codez directement les brouillons des UI que vous avez dessiné sur papier, le website stencil kit proposé par Design Commission devrait vous plaire. Un bloc-note où est imprimé la barre de navigation de Firefox, un crayon, et un trace lettre (vous savez, ces règles qui permettent de dessiner des lettres, sauf que là ce sont des icônes).

J'ai découvert ce kit sur le Tumblr de Soxiam (l'UI designer chez Vimeo) qui publie de temps en temps des brouillons d'interfaces, et j'avoue avoir été séduit de suite. C'est l'arme parfaite de l'UI designer, et ça coute environ $20 sur le shop Design Commission. Ne serait-ce que pour le bloc note façon Firefox, je me tate presque à m'en acheter un!

UI Design: source de confiance et de sérieux?

Lire la suite...

Striped Backgrounds, générateur de fonds, et plus encore

Si vous aimez les bandes verticales comme celles qu'on peut trouver sur les mouchoirs ou les cravates Paul Smith, alors Striped Backgrounds est une webapp de Sam Herbert qui va certainement vous plaire. Il s'agit d'un Stripe Generator en version ight, qui permet de créer des fonds à bandes, uniquement verticales.

Striped Backgrounds

Striped Backgrounds a tout de même quelques avantages par rapport à Stripe Generator: il permet de créer des fonds d'écrans, de nombreuses résolutions sont d'ailleurs disponibles, allant du format iPhone (320*240) au format Widescreen WUXGA (1920*1200), en passant par des formats plus classiques 4:3 (jusqu'à 1600*1200) ou encore des formats plus originaux tel que le format HDTV (1080p).

Mais ce qui m'a le plus marqué sur cette webapp que je considère désormais comme un must-have pour les webdesigners, c'est la possibilité la fonction Random, qui permet de choisir les couleurs au hasard. Et force est de constater que Striped Background peut servir d'outil pour inventer des palettes de couleurs, que vous pourrez poster sur d'autres sites comme Colour Lovers (ce n'est malheureusement pas automatisé), car le site affiche les codes hexadécimaux des couleurs générées.

A noter aussi la version iPhone qui permet de générer des fonds au format iPhone directement.

Comment faire un bon formulaire de connexion

L'utilisabilité d'un formulaire HTML fait partie de ces petits riens qui sans le vouloir changent la vie. Nombreux sont les utilisateurs expérimentés qui comme moi n'utilisent pas la souris pour remplir un formulaire, mais plutôt la touche tabulation du clavier. Ainsi, la souris ne doit servir que dans un cas "exceptionnel". Cela peut avoir l'air d'un simple détail, et pourtant cela joue énormément dans l'expérience utilisateur.

Il m'est souvent arrivé de tomber sur un blog et de vouloir déposer un commentaire, d'appuyer sur la touche tabulation après avoir rempli mon nom, mon e-mail et mon site web, et de tomber de suite après sur le formulaire de recherche plutôt que sur la textbox du commentaire.

Il en va de même pour les formulaires de connexion. Toujours concernant l'enchainement des éléments, il y a à mon avis un ordre à respecter, il suffit simplement d'analyser le scénario classique, qui définit l'ordre des éléments. Ainsi, dans un formulaire de connexion, on retrouvera dans l'ordre ces éléments.

  1. Identifiant, E-mail, Login
  2. Mot de passe
  3. Case à cocher pour rester connecté
  4. Bouton de validation
  5. Lien Mot de passe oublié
Formulaire Connexion Hello Coton

Et peu importe le positionnement de ces éléments, il est à mon avis essentiel qu'ils soient accessible dans cet ordre là. HelloCoton, l'exemple illustré ci-dessus, est un des meilleurs (le meilleur?) que j'ai pu trouver car il montre très bien que l'on peut désynchroniser l'enchainement et le positionnement, en ayant un positionnement d'éléments beaucoup plus logique (lien mot de passe oublié à côté du champ mot de passe), et tout en gardant un scénario d'enchainement des éléments logique et efficace. Il y en a d'autres qui sont aussi très bons, celui de Feedburner notamment.

C'est là qu'on se rend compte que le web, c'est vraiment un métier!