Anatomie d’un Lego

Un homme met 26 ans à résoudre un Rubik’s Cube

Alors que certains y arrivent en 7 secondes 08, certains y passent leur vie : 26 ans pour résoudre un Rubik’s Cube.

Budapest à 360 degrés

La réponse à la question ultime

Tout simplement.

Vous savez sans doute que le bouton de Google « J’ai de la chance » leur coûte $110 millions par an ? Et bien, un autre bouton lui vole la vedette! Je vous présente le bouton qui vaut 300 millions de dollars!

Ca se passe en 2004. Il s’agit d’un redesign très léger dans le processus d’achat d’un site de e-commerce. Les deux acteurs sont Best Buy et Luke Wroblewski (Interface Designer dont le blog est excellent).

Un problème de formulaire

Le problème : beaucoup d’internautes ont du mal à finaliser leurs achast à cause du formulaire qui apparaît en début de processus. Ce formulaire consiste en 5 éléments:

• 2 champs : Email et Mot de passe
• 2 boutons : Se connecter et S’inscrire
• 1 lien : Mot de passe oublié

Tout le monde avait des problèmes :

• les nouveaux arrivants étaient réticents quant à l’idée d’avoir à s’inscrire avant de faire quoique ce soit
• certains nouveaux arrivants ne savaient pas si ils étaient déjà venus auparavant et tentaient de se connecter avec leur adresse mail
• même les habitués avaient du mal à se souvenir de leurs informations

Le formulaire, qui était là pour aider les gens (parce qu’il permettait de garder ses infos si on revenait régulièrement), était au final un obstacle à l’achat.

Une solution toute simple

La solution s’est avérée être particulièrement simple (du moins, dans son application) : le bouton « S’inscrire » a été remplacé par un bouton « Continuer » suivi d’un message.

Vous n’avez pas besoin de créer un compte pour faire des achats sur notre site. Cliquez simplement sur « Continuer » pour accéder au paiement. Pour accélérer vos achats futurs, vous pouvez créer un compte pendant le processus de paiement.

BAM! $300 millions de gagnés.

Je n’ai pas de meilleur commentaire que le premier du site :

Wow, so close, yet… so far, far away… 🙂

Ça ne vous arrive jamais de lire un article très intéressant sur un site, où l’auteur copie-colle des url dans son texte sans qu’elles soient cliquables ? Ma phrase n’étant pas très explicite, je vous offre un exemple :

http://www.monsupersite.com

Vous voudriez cliquer sur ce lien qui a la syntaxe et l’apparence d’un lien mais qui n’est malheureusement pas cliquable. Il faut sélectionner fastidieusement le lien, le copier, ouvrir un nouvel onglet, coller et appuyer sur Entrée. Rhaaa!

Deux solutions :

• modifier ces liens non cliquables en liens cliquables sur tous les sites de l’Alpha à l’Omega
• télécharger l’addon Text Link pour Firefox qui rend ces liens accessibles en double-cliquant dessus

Personnellement, j’ai choisi mon camp. J’ai déjà modifié 8432 liens.

DO WANT !!!

J’ai remarqué ce matin une refonte des boutons Gmail. Je pensais d’abord à une mise à jour de Chrome qui stylerait différemment les input « button ». Mais en regardant sous Firefox, j’ai constaté le même redesign.

J’apprécie particulièrement les boutons « Move to » et « Labels » qui se débarassent de leur scroll irritant.

Depuis le temps que je veux en faire un… Voici enfin mon portfolio. Il m’aura fallu :

1. Regrouper et trier mes travaux en 3 catégories (web, graphisme, intégration)
2. Créer une interface simple mais sympa
3. L’intégrer sous forme de page et sous-page WordPress (en essayant de garder un maximum dynamique)
4. Trouver un système de galerie léger et sympa : slideViewer
5. Créer des images pour cette galerie (en cours)

Voici le résultat :

L’excellent site du NY Times propose un prototype de présentation différente de l’information.

Petit à petit, KDE semble devenir la distribution l’environnement de bureau à absolument adopter pour Linux. Que ce soit au niveau fonctionnel ou au niveau graphique, comme avec le thème AIR par Pinheiro :

Pour fêter la diffusion du 1er épisode HD des Simpsons, la série s’offre un nouveau générique.

Cela faisait 19 ans que le générique des Simpsons n’avait pas changé!

Regardez par exemple tout ce qui se passe sur cette image.

Les jeux vidéo sont une grande source d’inspiration pour beaucoup de graphistes. Le côté culte couplé aux talents de dessinateurs offrent souvent d’incroyables rendus, comme ces wallpapers d’Orioto :

Ces créations, mêmes statiques, me laissent espérer que les développeurs (notamment la Sonic Team…) s’en inspireront fortement. Je doute que les capacités actuelles de hardware soient insuffisantes pour arriver à ce rendu.

Imaginez que cette image de Zelda soit tirée d’un véritable gameplay? Ce serait délicieusement envoûtant…

Source : Lifehacker

Sebastian Vettel explique, dans cette magnifique vidéo, la nouvelle règlementation de la Formule 1 qui rentrera en vigueur cette année. Ludique et informatif.

Il y a notamment un bouton « Turbo » qui permet une augmentation ponctuelle de la puissance de la voiture.

En uploadant une image sur le Colors Palette Generator de CSS Drive, vous obtenez un 4 nuanciers différents, ainsi que des fichiers CSS et .aco (pour Photoshop) associés.

Un exemple en utilisant une de mes photos prises récemment à New York:

Si vous désirez créer un menu avec des <ul> et des CSS, voici le site qu’il vous faut : CSS Menus. Il regorge de plusieurs types de menus (horizontal, vertical, déroulant…) et les proposent même en téléchargement gratuit. Accessoirement, ce site constitue un bon moyen d’apprendre à créer des menus soi-même.

J’ai failli poster l’article qui disait que le magenta n’était pas une couleur. Mais il me paraissait un peu bancal. Et l’article, qui date d’il y a quelques semaines, à fait l’objet d’un buzz pas possible ces derniers jours.

Je poste aujourd’hui la réponse à cet article : le Magenta est une couleur.

En résumé, le premier article définissait une couleur comme étant une longueur d’onde particulière dans le spectre lumineux. Le second interprète cette définition comme réductive: la couleur est avant tout une interprétation de la lumière par notre cerveau et ne peut se restreindre à ce que l’on peut voir dans le spectre lumineux. (Corrigez-moi si je me suis trompé…).

Bref, je trouvais cette « bataille » assez sympathique car elle montre qu’un sujet aussi peu couvert habituellement, peut très vite apparaître au premier plan simplement parce que les internautes se l’approprient (comme moi) sans trop savoir la pertinence des propos (d’un côté ou de l’autre).

Le développement de logiciel est une tâche ardue, à en croire les programmeurs eux-mêmes : 13 citations de programmeurs.

I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone.

Pour les Mac users d’entre vous (je sais qu’il y en a au moins un… 🙂 ), un fond d’écran spécialement conçu pour vous.
Bien sûr, vous pouvez l’installer sous Windows mais l’esprit y est moins…

Via SimpleBits

Je viens de découvrir sur 2803 que Axa avait fait une refonte de son site. Ce qui m’a le plus surpris dans le post de 2803, c’est que ce soit un post sponsorisé (traduisez par « post subjectif et honteusement élogieux »). Parce que la nouvelle version du site d’Axa ne manque pas de lacunes.

Un carrousel bien lourd

Malgré le fait que Flash gère le streaming, l’internaute doit attendre d’avoir bien chargé les 7 livres virtuels pour voir s’afficher quelque chose (presque 10 secondes d’attente). Même si l’effet « carrousel » est sympathique à voir, il est très loin d’être pratique. Et si les pages derrière ne suivent pas en terme de design et d’ergonomie, je ne vois pas l’intérêt d’inciter l’internaute à cliquer si ce n’est pour le perdre à la page suivante.

Pourquoi un menu en Flash ?

L’élément qui m’a surpris en premier est le menu de gauche, en Flash. Pourquoi en Flash? Pour le pivoter bizarrement et le rendre presque illisible (lisez-vous « Entrer vos mots clés » qui d’ailleurs devrait être « Entrez vos mots clés »)? Le fait qu’il soit pivoté suggère qu’il n’est pas intéractif, alors qu’il l’est.

Et le champ de recherche prédictif qui fait partie de ce que l’on peut considérer comme « l’état de l’art de ce qui peut se faire en terme d’interfaces riches » (si je reprend les mots du post de 2803) aurait facilement être réalisé en JS, et il en aurait été bien plus lisible.

Disposition bancale des éléments de navigation

Axa est à la fois banque et assurance. On peut accéder à l’un ou à l’autre en cliquant sur l’un des liens placés au-dessus du carrousel. Au lieu de dire « placés » je devrais dire « flottants » parce qu’ils semblent avoir été déposés là malencontreusement. Il faut d’ailleurs attendre que le carrousel ait été chargé en entier pour enfin voir ces liens qui a priori sont primordiaux. Et ne cliquez pas sur « Banque » car vous vous retrouverez sur un autre site (sans que cela soit indiqué…).

Et le reste…

Les pages intérieures du site mériteraient que l’on s’y penche très longuement. Les erreurs d’ergonomie sont multiples : checkboxes utilisées à mauvais escient, mauvaise présentation de l’information, incohérence du contenu…

Ce qui me choque le plus est qu’un bon blog comme 2803 ai décidé de jouer au jeu du post sponsorisé, qui n’est rien d’autre qu’une fenêtre de communication privilégiée, où la charte habituelle du blog s’efface devant les intérêts de l’entreprise commanditaire. Je continuerai bien sûr de lire 2803 qui regorge de très bons articles, mais j’espère vraiment ne plus voir ce genre de post.

PS: ne désactivez surtout pas JS pour aller sur le site d’Axa… Vous verrez ceci :

Il y a souvent par ci, par là, des posts traitants de cartes de visite originales. Card Observer en regroupe sous forme de galerie. Le site est simple et sympa, même si j’aurais apprécié une navigation plus originale et plus pratique entre chaque carte (avec au moins un aperçu).

Le Teenager Audio Test permet de vérifier si vous avez moins de 25 ans… en vous faisant écouter un bruit (infernal) que seules les personnes ayant moins de 25 ans peuvent entendre. C’est un dispositif qui a été mis en place dans certains centres commerciaux pour garder à l’écart les petits « voyous » que représentent les « jeunes »…

J’ai passé le test (ça me rassure sur la qualité de mon audition, sachant que j’ai 22 ans…).

Pour faire patienter les impatients, le site Watchmen propose un jeu d’arcade: Watchmen Arcade Game.
Le jeu est un beat’m up à la Double Dragon ou Golden Axe, mais il est très loin d’en avoir le gameplay, même partiellement. C’est bien dommage.

C’est quoi ?

Si vous trouvez que le web est difficile à lire, que ce soit à cause de la taille, la police, les couleurs, les marges… voici un outil qui peut vous faciliter la vie. Readability est un bookmarklet qui transforme n’importe quelle page web en un texte bien présenté.

Exemple

Exemple avec un article de A List Apart :

Readability enlève tout le contenu annexe, contextuellement (navigation) et visuellement (images), pour ne laisser que l’essentiel de la page : le corps du texte.

Prendre A List Apart n’est peut-être pas particulièrement pertinent car la présentation du site est déjà excellente en soi, mais j’ai pris cet exemple parce que le contenu y est long et intéressant, et c’est la cible de l’outil Readibility.

Stylez et bookmarklettez

Vous pouvez choisir le style de vos pages, en jouant sur la typographie, les couleurs, la taille et les marges. Puis vous drag-droppez le bookmarklet pour l’utiliser dès que vous visitez une page au contenu intéressant mais mal présenté.

Instapaper-like

Ca me rappelle forcément Instapaper, cet outil qui, en un clic, sauvegarde une version texte de la page pour la rendre disponible par la suite, sur le site, et en offline sur l’iPhone. Un must (gratuit qui plus est).

Je viens de tomber sur un site assez fou: iconPot.

Ce site recense des packs d’icônes gratuites et utilisables à des fins commerciales. Une mine d’or pour les web designers freelance!