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 !

Cette infographie présente les éléments composant un design de site web sur lesquelles jouent les web designer pour créer un site au design inédit. On se rend compte qu’en fait ces caractéristiques sont relativement peu nombreuses, même si cela ne rend pas le domaine facile. D’ailleurs si vous voulez voir la puissance de cela, je vous propose de vous rendre sur Zen Garden qui propose un contenu identique mais avec des designs différents. Les résultats sont surprenants!

Le numérique a beau prendre de plus en plus de place dans nos vies, certains bouts de papier restent encore irremplaçables. Je pense aujourd’hui aux cartes de visites, les fameuses business cards que l’on s’échange à tour de bras lors de réunions ou de conférences.

Et il faut bien dire que le jour où vous devez créer vos propres cartes de visite, la question se pose forcément : quel design ?!? Quelle couleur, quelle typo, quelles informations vais-je choisir pour illustrer celui que je suis vraiment ? Je vais essayer ici de résumer les best pratices en la matière compilée depuis plusieurs lectures et retours d’expériences. Je finirai l’article par inclure XXX exemples

Le contenu : quelles informations ?

La fonction première d’une carte de visite est de transmettre une information : votre identité. Il faut donc s’assurer que la personne à qui vous offrez votre carte récupère ainsi l’ensemble des informations qu’elle s’attend à recevoir d’une part, mais aussi les données que vous souhaitez lui communiquer.

Le minimum légal

Sans parler de norme, il y a un minimum d’informations qu’un interlocuteur s’attend à trouver sur une carte de visite. Les omettre serait une erreur. Alors n’oubliez pas :

• votre prénom et nom
• votre société
• éventuellement votre poste ou titre dans cette société
• votre numéro de téléphone mobile
• votre adresse email

Les freelances remplaceront évidemment la société et le poste par le nom de leur activité principale.

Les autres informations

Une fois le minimum indiqué sur votre carte, il y a de nombreux autres indications qui peuvent y figurer. Tout dépend de votre situation et du message que vous souhaitez faire passer mais vous pourriez par exemple y ajouter :

• l’adresse de votre site internet ou celui de votre société
• votre adresse ou celle de votre société
• un logo
• un numéro de téléphone fixe
• un compte Twitter
• un compte Skype

Mais par pitié évitez…

…oui par pitié évitez ces informations que plus personne ne regarde et qui ne font qu’alourdir une carte de visite où l’espace est déjà suffisamment réduit :

• un numéro de fax : 2010 ? un fax ? non sérieusement, plus personne n’utilise ce genre de moyen de communication ! Quand bien même un interlocuteur chercherait à vous joindre par fax, votre carte de visite est le dernier endroit sur lequel il en chercherait le numéro…
• votre photo : sauf si votre image est votre fond de commerce, une photo n’a vraiment rien à faire sur une carte de visite. Privilégiez plutôt un design singulier et propre (vori ci-dessous).
• votre curriculum vitae : non une carte de visite n’est pas votre CV ! Inutile donc d’y faire figurer vos expériences ou vos qualités.

La forme : quel style ?

On l’a dit, la carte de visite est là avant tout pour donner des informations. Mais au delà de cette fonction première, son but est aussi de marquer la personne qui l’a reçoit, que cette personne se souvienne de vous. Une carte de visite avec un design trop classique, trop simple, ne parviendra pas à ce second objectif et ne servira donc que de pense-bête à votre interlocuteur. En revanche, avec un style soigné et propre, vous permettez à votre interlocuteur d’associer la carte de visite à votre identité mais aussi de marquer son esprit avec une pointe d’originalité.

Un style classique, unique ou folklorique ?

Ce qu’il ne faut surtout pas oublier quand on choisit un style pour ses cartes de visites, c’est la lisibilité de votre carte. Quelque soit le design que vous allez choisir, il est primordial que vos informations soient facilement lisibles et identifiables sur la carte.

Le style, le design de votre carte de visite reflète aussi qui vous êtes ou l’esprit de votre société. Tout va dépendre de votre secteur d’activité et des interlocuteurs que vous visez : un graphiste peut se permettre plus de choses qu’un avocat par exemple. Certains préfèreront choisir un style classique, facilement lisible et sans fioriture. D’autres préfèreront demandez à un graphiste de dessiner une carte de visite unique pour justement se démarquer de la concurrence par exemple.

Dans tous les cas, je pense qu’il ne faut pas aller trop loin. Un design trop peu conformiste peut provoquer une mauvaise impression chez votre interlocuteur et nuire à termes sur vos relations. A l’inverse, un design trop classique ne marque pas assez votre personnalité et votre carte risque de se perdre au milieu de dizaines d’autres cartes du même style. Le juste milieu est donc souvent la meilleur solution, charge à vous de l’imaginer !

Une mise en page simple

Il y a le style, le design et la mise en page. Après avoir choisi une couleur de fond, une couleur de police, une famille de police, une taille pour les textes, il reste à positionner les éléments sur la carte. Là encore tout dépend de votre carte et de votre design mais il est de bonne pratique d’aligne le texte à gauche de manière simple, les éléments les uns en dessous des autres. Evitez les textes qui ondulent ou écrit verticalement. Encore une fois, la lisibilité doit rester votre objectif n° 1.

Un format standard… ou pas !

La taille standard et la plus répandue d’une carte de visite est  8,5 cm de long sur  5,4 cm de large. Il correspond à la taille d’une carte bancaire et sera donc propice à s’insérer dans n’importe quel portefeuille. La plupart des services en ligne permettant de commande et d’imprimer vos cartes de visite vous proposeront d’ailleurs ce format par défaut. Rien n’empêche ensuite de positionner son contenu dans un format paysage ou pourquoi pas portait (même si le format paysage reste le plus classique).

Une autre possibilité est d’opter pour l’originalité et de choisir un format différent pour justement « marquer » un peu plus votre interlocuteur. Les célèbres MiniCards de Moo sont un exemple de format inhabituel : 7 cm sur 2,8 cm. Le format carré est de plus en plus utilisé aussi. D’autres encore choisissent un format plus grand que le classique. Ils sortent peut-être ainsi de l’ordinaire mais risquent aussi souvent de voir leur carte pliée ou jetée. Il s’agit donc là encore de trouver un compromis entre l’originalité et l’efficacité. Je vous laisse seul juge

Recto verso ?

Une carte de visite, c’est petit, il n’y a pas beaucoup de place mais il y a deux faces ! Beaucoup choisissent donc de profiter du recto et du verso pour ajouter du contenu sur leur carte de visite. Là encore, tout dépend du nombre d’informations que vous souhaitez faire apparaître et donner à votre interlocuteur. Généralement, l’ensemble des informations de base sont rassemblées sur le recto. Le verso peut trouver un côté pratique si vous avez des éléments pratique à ajouter comme un plan d’accès, un carnet de rendez-vous (pratique pour les médecins par exemple) ou encore une présentation de produits. Néanmoins, il n’est pas toujours judicieux de vouloir trop en mettre. Un verso vierge ou avec uniquement un logo ou une baseline peut largement suffire et renforcer le côté simple de carte en mettant en avant le contenu présent sur le recto.

La finition : quelle qualité ?

Vous avez choisi le contenu que vous allez mettre sur vos cartes de visites ? Vous vous êtes décidé sur un style et une mise en page ? Parfait ! Il ne reste plus qu’à faire fabriquer vos cartes de visites. Oubliez l’idée de les imprimer vous même chez vous ! De nombreux professionnels existent sur ce secteur : beaucoup ont pignons sur rue mais de plus en plus de service fleurissent sur le web comme OvernightPrints.fr (je passe personnellement par eux depuis des années et j’en suis ravi !), MOO, Ooprint ou encore VistaPrint.

Vous allez vite vous rendre compte que là encore les choix sont nombreux pour les finitions de vos cartes de visites : type de papier, type d’encre, finition souhaitée, etc. Pour vous y retrouver, je vous propose là encore quelques conseils personnels :

• Mat ou brillant ? Avec une finition mat vous allez avoir un rendu plus doux, plus agréables au toucher avec des couleurs moins vives. Avec une finition brillante, les couleurs ressortiront ce qui met en avant le design de vos cartes.
• Type de papier ? Privilégiez un gramage important, supérieur à 250 voir 300 grammes au m². La carte sera ainsi rigide et résistante.
• Vernis ? Certains imprimeurs proposent en option d’appliquer une coche de vernis sur les cartes. Si la couche est uniforme vous obtiendrez une carte brillante et plus résistante à la lumière et l’humidité. En revanche, votre interlocuteur aura du mal à écrire dessus. Le vernis sélectif permet quant à lui de mettre en valeur certains éléments clés de votre carte de visite : logo, photo ou texte.

90 exemples de cartes de visites réussies ou originales

sources :

• Décoder une carte de : visite Mode d’emploi
• Comment réussir ses cartes de visite en 8 points
• http://www.2expertsdesign.com/inspiration/78-most-creative-and-top-rated-business-cards-designs/
• http://naldzgraphics.net/inspirations/60-most-beautiful-and-creative-business-cards-design/
• http://naldzgraphics.net/inspirations/30-business-card-designs-that-will-inspire-you/

Il existe de nombreux outils en ligne pour « jouer » avec les couleurs et trouver des gammes chromatiques ou les bonnes couleurs à accorder avec la couleur de son choix. Parmi ces outils, j’ai découvert ce week-end le très simple et efficace Elvan Online. Il s’agit d’un générateur de thèmes chromatiques. A partir d’une couleur au hasard ou de la couleur de votre choix, l’outil vous fournit les couleurs en harmonie correspondantes et différentes variations. Le genre d’outil pratique pour les designers ou les simples curieux qui cherchent quelles gamme de couleurs utiliser avec une couleur de base. Dans le même genre, je vous avais déjà présenté l’excellent outil d’Adobe : Adobe Kuler.

Vous en connaissez d’autres ?