J’aurais l’occasion de revenir plus en détails sur cette définition mais je voulais partager avec vous quelques exemples de petits (de tout petits) détails mis en place sur certains sites web ou applications et qui contribuent à créer une véritable expérience utilisateur. Vous ne les avez peut-être jamais remarqués, ou n’y avez jamais fait attention mais pourtant c’est souvent grâce à ces petits détails que vous avez eu l’impression que le site en question était fun, cool, intuitif ou encore efficace. Petite sélection.

1. Le logo de CNN change
2. Détection automatique de la carte de paiement
3. Regroupement visuel des calques
4. Le logo change au fur et à mesure de la lecture de la vidéo
5. Illusion de vitesse sur une barre de chargement
6. Un clic droit sur le logo propose le téléchargement du logo
7. Le logo indique à l’internaute où il sera redirigé
8. L’image prend la forme du conteneur
9. Le contenu de la page s’adapte en fonction de la hauteur de l’écran
10. Le rollover est de la couleur de l’icône de l’application
11. La taille de police de l’email s’adapte à sa longueur
12. La carte zoome en suivant le curseur de la souris
13. Surligner du contenu dans une page
14. Pré-charger les prochains résultats d’une recherche
15. Afficher immédiatement l’avatar lors de la saisie du login

#1 – Le logo de CNN change

En fonction de la rubrique visitée, le globe terrestre présent dans le logo de CNN tourne pour se positionner sur la zone en cours.

Le logo de CNN change

#2 – Détection automatique de la carte de paiement

GitHub détecte automatiquement le type de carte que vous êtes entrain d’utiliser pour régler l’achat d’un de leur plan.

Détection automatique de la carte de paiement

#3 – Regroupement visuel des calques

Le logiciel de retouches photos et d’édition d’image Pixelmator regroupe visuellement les calques qui appartiennent au même groupe en les empilant.

Regroupement visuel des calques

#4 – Le logo change au fur et à mesure de la lecture de la vidéo

Lors de la lecture d’une vidéo Dailymotion, le logo en bas à droite change en fonction de la progression de lecture de la vidéo, comme une barre de progression.

Le logo change au fur et à mesure de la lecture de la vidéo

#5 – Illusion de vitesse sur une barre de chargement

En fonction de l’animation mise en place dans une barre de chargement ou de progression, l’impression (ou l’illusion) de vitesse peut être bien différente !

Cliquer ici pour voir la vidéo.

#6 – Un clic droit sur le logo propose le téléchargement du logo

Lorsque l’on clique avec le bouton droit sur le logo du site Askimet, une popup propose de télécharger le logo du service en haute définition.

Un clic droit sur le logo propose le téléchargement du logo

#7 – Le logo indique à l’internaute où il sera redirigé

Sur le site d’Amazon, un simple survol du logo indique à l’internaute qu’il pourra ainsi revenir sur la page d’accueil. Petite subtilité : cette fonctionnalité est désactivée sur l’accueil du site.

Le logo indique à l'internaute où il sera redirigé s'il clique dessus

#8 – L’image prend la forme du conteneur

Sur Tumblr, certaines images sont mises en avant dans la colonne de droite en prenant la forme d’une info-bulle (y compris la flèche)

#8 - L'image prend la forme du conteneur

#9 – Le contenu de la page s’adapte en fonction de la hauteur de l’écran

La page d’accueil du site Tumblr adapte sa mise en page en fonction de la taille de l’écran ou du navigateur. Cela fonctionne même en live en redimensionnant la taille de la fenêtre du navigateur.

Le contenu de la page s'adapte en fonction de la hauteur de l'écran

#10 – Le rollover est de la couleur de l’icône de l’application

Dans Windows 7, les boutons de la barre des tâches prennent automatiquement la couleur de l’icône de l’application quand on les survole.

Le rollover est de la couleur de l'icône de l'application

#11 - La taille de police de l’email s’adapte à sa longueur

Dans le formulaire de connexion de mobile.me, le champs de saisi de l’identifiant adapate la taille de sa police pour permettre d’afficher le maximum de caractères.

La taille de police de l'email s'adapte à sa longueur

#12 – La carte zoome en suivant le curseur de la souris

Sur une page d’une photo géolocalisée Flickr, la carte zoome au fur et à mesure que la souris avance sur la carte.

La carte zoom en suivant le curseur de la souris

#13 – Surligner du contenu dans une page

Le site du New York Times a mis en place un système permettant via des paramètres passés dans les URLs de surligner une partie du texte d’un article. Des exemples concrets ici, là ou encore là. En appuyant deux fois sur « shift » (= touche majuscule) un raccourci apparaît devant chaque paragraphe.

Surligner du contenu dans une page

#14 – Pré-charger les prochains résultats d’une recherche

Lorsque l’on page à la page suivante sur une recherche Amazon, les 3 prochains résultats sont immédiatement affichés sur la page pendant que le reste du contenu se charge.

Pré-charger les prochains résultats d'une recherche

#15 – Afficher immédiatement l’avatar lors de la saisie du login

Quora charge immédiatement l’avatar du compte correspondant au login (une adresse email) que vous venez de saisir lors d’une connexion et cela avant même que le mot de passe est été saisi.

Afficher immédiatement l'avatar lors de la saisie du login

Sources : Pour compiler ces quelques exemples, j’ai trouvé plusieurs références sur Little Big Details ou dans ma veille quotidienne. Si vous en trouvez d’autres, je les publierai rapidement !

Je découvre avec plaisir le travail de Luke Wroblewski, spécialiste en ergonomie et design d’applications. Parmi ces différents travaux, Luke a consolidé de nombreuses recherches sur les interactions tactiles (Touch Gesture) qui gagnent peu à peu notre quotidien via les smartphones et autres tablettes. Il a ainsi rédigé un guide complet sur toutes les actions tactiles possibles en essayant de normaliser les noms donnés à ces gestes (en anglais) : Tap, Drag, Flip, Press and Tap, etc.

Au delà de ce guide complet que vous trouverez ci-dessous, Luke a mis en ligne également plusieurs ressources sur le sujet comme :

• les tailles optimales pour les zones de clic
• les différents diagrammes sur les actions tactiles
• les parts de marché du tactile dans l’industrie

A noter également que tous les schémas et illustrations sont disponibles en version EPS, OmniGraffle ou encore Visio (super pratique pour les mockups !) sur cette page.

Le guide de référence des interactions tactiles

via

Comme vous pouvez le voir, lors du clic sur le bookmarklet « Wp Toolbar », un petit menu apparaît par dessus votre blog (quelque soit la page où vous vous situez) avec toutes les principales fonctions que vous trouvez habituellement directement dans votre interface d’administration.

Qu’est-ce qu’un bookmarklet ?

Petit rappel pour ceux qui se demandent ce qu’est un bookmarklet, il s’agit en fait d’un favoris (que l’on positionne dans sa barre de signets sur Firefox ou Safari) et qui n’ouvre pas un site web comme attendu mais exécute une fonction javascript sur la page en cours. Dans le cas présent, il affiche via jQuery le menu de l’admin WordPress. Il existe de nombreux bookmarklet pour tout un tas d’usage et le site http://www.bookmarklets.com/ en récence plus de 150…

Comment installer ce bookmarklet ?

Comme tous les bookmarklets, il suffit de glisser et déposer le lien : WP Toolbar que l’on trouve sur la page de l’auteur.

Article intéressant et bien illustré sur 10 erreurs à ne pas faire lorsque l’on construit une interface web. La plupart sont des classiques pour ceux qui utilisent le web souvent mais une petite piqure de rappel ne fait jamais de mal ^^

→ Voir le site

Découvert sur le très bon WeLoveMac.net, uQuery est un moteur de recherche qui vous permet de trouver une application pour iPhone non plus depuis iTunes mais directement dans son interface web.. à découvrir et à tester

→ Voir le site

Vous avez très certainement déjà vu la démo d’un site proposant un magazine en lecture numérique via une interface en Flash reproduisant un journal réel : vous pouvez tourner les pages à la main, zoomer/dézommer sur du contenu, etc. A ce sujet, je viens de découvrir MegaZine 3 :un moteur de rendu en Flash permettant de réaliser ce genre d’interface. Le tout est développé en AS3, paramétrable via du XML et gratuit !

→ Voir le site

Webdesigner Depot nous proposait au mois de mars dernier un article retraçant l’histoire des interfaces des systèmes d’exploitation depuis 1981 (avec Xerox Alto) à 2009 avec MacOsX & Vista… Il y manque Windows 7 et très bientôt (enfin pas avant 2010 quand même) le tout nouveau Google Chrome OS annoncé ce matin… Bref il est intéressant de voir comment nos usages des ordinateurs ont évolué dans le temps.. Finalement l’arrivée des icônes et de la souris a révolutionné les interfaces (merci Apple) mais depuis ??

→ Voir le site