Les nouveaux curseurs : les bonnes pratiques

L’uni­vers de la concep­tion d’in­ter­face ne cesse de nous surprendre par son évolu­tion !

Les tendances annuelles du design et ses sphères, s’ancrent plus ou moins dans nos réflexions et nos manières de conce­voir.

Utili­sa­bi­lité, clarté, lisi­bi­lité et créa­ti­vité sont les grandes lignes direc­trices de concep­tion, mais une autre domi­nante se hisse de plus en plus au sommet: l’ex­pé­rience. Les micro-inter­ac­tions, anima­tions, expé­rience immer­sives, ne cessent d’ap­pa­raitre un peu partout. Et l’on assiste à la nais­sance de sites de plus en plus enga­geants pour les utili­sa­teurs.

Une des tendances du design se concentre sur ce petit élément que l’on tend à oublier tant il est omni­pré­sent et indis­pen­sable: notre curseur.

Avant tout un peu d’his­toire !

Le curseur est un outil d’in­ter­face utili­sa­teur graphique, prenant la forme d’un repère pour nous montrer la zone de l’écran sur laquelle on navigue grâce à notre souris. Il nous permet de nous montrer les éléments avec lesquels on peut inter­agir.

Pas de curseur, sans souris

La souris a été inven­tée et mise au point en 1964 par l’amé­ri­cain Douglas Engel­bart du Stan­ford Research Insti­tute (SRI). Le brevet ne fut déposé qu’en 1970, et fut repris par de nombreuses socié­tés dont Xerox et Apple. À l’époque, elle était plus connue sous le nom « Indi­ca­teur de posi­tion XY pour un système d’af­fi­chage ».

Le tout premier modèle de souris était un boîtier en bois conte­nant deux disques perpen­di­cu­laires: un pour mesu­rer les mouve­ments hori­zon­taux, l’autre les verti­caux. Le tout relié à l’or­di­na­teur grâce à une paire de fils torsa­dés. Depuis la souris n’a cessée d’évo­luer grâce à des inno­va­tions tech­no­lo­giques: d’abord avec le Roll­ku­gel (base du méca­nisme sphé­rique), puis la souris de l’Alto (premier ordi­na­teur de bureaux), le modèle optique Mouse Systems (premier modèle de souris optique), la Micro­soft Intel­liMouse (molette de défi­le­ment et système de track­ball), la souris sans fil de Logi­tech… jusqu’à nos modèles actuels.

Mêlant tech­nique, concep­tion et design, de grands noms et entre­prises s’em­parent de l’ap­pa­rence de ces souris: Philippe Starck et sa souris optique par S + ARCK, Apple, Micro­soft, Logi­tech, etc..

Le saviez-vous : Pourquoi notre curseur est-il penché ?

A ses tout débuts le curseur poin­tait vers le haut, mais la qualité médiocre de réso­lu­tion des écrans de l’époque, permet­tait diffi­ci­le­ment de le remarquer et même souvent se confon­dait avec le texte.

La solu­tion ? Le centre de recherche de la compa­gnie améri­caine Xerox Parc, berceau de l’in­ter­face graphique, l’a trou­vée: pencher le curseur vers la gauche de 45°.Il devient alors facile de lire simple­ment son texte sans le confondre avec un carac­tère typo­gra­phique. Cette forme devient défi­ni­ti­ve­ment une norme lorsque Bill Gates et Steve Jobs l’im­plantent dans leur inter­faces.

Et le curseur de nos jours ?

Il est toujours omni­pré­sent et indis­pen­sable. Malgré les possi­bi­li­tés de le custo­mi­ser (en objet ou animal, grâce à des exten­sions gadget) il a long­temps été laissé de côté par les desi­gners… jusqu’à récem­ment ! Toujours plus immer­sifs, les sites, appli­ca­tions et diverses plate­formes tendent à impliquer plei­ne­ment l’uti­li­sa­teur dans son univers. Et quoi de mieux, que cet élément présent depuis l’ap­pa­ri­tion de la première inter­face.

Une des grandes tendances est la trans­for­ma­tion du curseur en forme circu­laire qui se déve­loppe au survol d’un élément cliquable : gros­sis­se­ment, effets, anima­tions, appa­ri­tion de textes pour n’en citer quelques uns.

La custo­mi­sa­tion du curseur trans­forme la navi­ga­tion de l’uti­li­sa­teur en jeu, où l’on a envie d’ex­plo­rer, de cliquer, de suivre les indi­ca­tions et forcé­ment d’en voir plus.

Les bonnes pratiques pour custom un curseur

• Tips 1: L’uti­li­sa­tion de ces curseurs est à utili­ser sur des sites à forte immer­sion, propo­sant une expé­rience à part entière ou un univers très marqué. Atten­tion à ne pas en abuser, le curseur doit être un plus ou un complé­ment de l’ex­pé­rience ! Lors de sa concep­tion pensez au côté ludique.
• Tips 2: Pour conce­voir votre curseur, pensez à tous les états et anima­tions qui seront néces­saire : Tout d’abord son design initial “normal” , celui au survol des diffé­rents éléments (CTA, liens, images), et au clic sur un éléments. Bonus: les états de dépla­ce­ments.
• Tips 3: Pour les appa­ri­tions de textes, préfé­rez l’uti­li­sa­tion de verbe qui incite à l’ac­tion, utili­sez des termes simple et limpide ( Exemple : Démar­rer, Créer, parti­ci­per, en savoir plus, etc)
• Tips 4: Votre curseur doit se déta­cher du fond et être iden­ti­fiable, sans pour autant nuire visuel­le­ment. Pensez toujours à l’ac­ces­si­bi­lité ;)

Et bien sur: lais­sez parler votre créa­ti­vité !