On se lance dans l’UXD ?!

Cet article est inspiré de l’article « Principles of User Interface Design » de Joshua Porter.

En pleine réflexion sur la création et l'[TBS_TOOLTIP placement= »top » title= »Wikipédia : Une interface est un point à la frontière entre deux éléments, par lequel ont lieu des échanges et des interactions. » style= »border: 1px solid #ddd; padding: 3px; »] interface [/TBS_TOOLTIP] du site internet de Get In Wizz (un side-project en cours de création), la question de l’interface et du design du site vient changer pas mal de choses dans le cahier des charges fonctionnel. C’est pourquoi je me suis inspiré d’un article intéressant qui m’a été utile et que j’adapte pour vous donner mon point de vue sur le sujet.

Pendant la phase de conception de votre interface utilisateur (UXD ou User Experience Design en anglais), voici quelques points que je vous conseille de garder en mémoire.[space height= »25″]

Clareté

Votre interface doit être simple, claire et sans trop d’ornements. La preuve, regardez du côté de windows 8 et la simplicité graphique de son interface « Metro ».

Votre interface doit être un mélange de curiosité, de mystère et de subtilité. Ces petits détails qui font toute la différence. Apple et son slider pour déverrouiller l’écran est curieux de prime abord, innovant et très simple.[quote align= »right » color= »#666666″]La clareté inspire la confiance.[/quote]

Le but d’une interface utilisateur est de permettre l’interaction avec un univers généralement plus complexe. WordPress m’évite de devoir écrire cet article entre des balises <html> avec un tas de styles CSS ; windows vous permet d’éviter d’écrire des lignes de commande pour utiliser un ordinateur, etc.

Vous l’aurez compris, L’interface utilisateur doit donc remplir cette mission d’interface (excusez la redite) entre deux « mondes » pour simplifier notre relation avec un support/environnement complexe.[space height= »25″]

Capter l’attention

Credit photo : Kaybee07
 

Cette chose rare qu’il est de plus en plus difficile de capter. Pour un utilisateur, il faut pouvoir, lors de l’utilisation d’une interface, différencier les éléments qui lui permettront d’atteindre son/ses objectif(s) de ceux qui lui feront perdre son temps ou qui ne lui seront pas utiles… Pour le designer, il faut pouvoir faire passer les messages désirés tout en evitant qu’ils ne se cannibalisent entre eux.

Difficile, sur le web, de lire ou parcourir une page sans avoir une publicité, une demande pour un sondage, ou toute autre distraction. Sachez donc conserver la précieuse attention de vos utilisateurs coûte que coûte. En plus d’améliorer vos résultats, vous aurez des utilisateurs heureux. Elle est pas belle la vie ? :)[space height= »25″]

Simplicité d’utilisation

L’utilisateur doit pouvoir se situer par rapport à l’atteinte de son objectif. « Si je clique ici, où vais-je atterir ? Vais-je arriver là où je le souhaite ? »

[quote align= »center » color= »#666666″]Ce qui vous parait évident ne l’est peut-être pas pour tous les utilisateurs.[/quote]

Nous sommes, en tant qu’utilisateurs et humains, rassurés lorsque l’on sait où on en est. N’hésitez donc pas à rappeler de temps à autre (via un chemin de fer par exemple) où l’utilisateur se situe par rapport à la poursuite normale des étapes d’un flux. Donnez des informations sur l’impacte de ses actions avant le clic (avec l’utilisation de tooltip notamment).

Limitez-vous à une action principale par page avec quelques actions secondaires. Pour garder une phrase simple vous n’exprimez qu’une seule idée principale + quelques informations, faites la même chose avec vos pages/interfaces.

Ces actions principales et secondaires sont liées à la partie suivante sur la « hiérarchie graphique ». Votre interface doit permettre de distinguer rapidement les actions principales des actions secondaires.[space height= »25″]

Hierarchie graphique

Credit photo : Julien Renvoye

Les éléments, leurs actions et leurs dispositions doivent permettre de comprendre rapidement et apprendre la logique graphique de l’interface pour en faciliter l’utilisation.

Même si casser les codes peut s’avérer innovant, ne surprenez pas trop vos utilisateurs pour ne pas altérer leur confort. Si un bouton exécute une action que l’on attendait, l’interface est perçue comme plus agréable. Les éléments de votre interface doivent réagir de manière cohérente avec leur apparence graphique. Par exemple, un texte écrit et souligné en bleu est, dans la tête d’un utilisateur, un lien hypertexte. Ne vous amusez pas à écrire du texte avec ce style sans lien au risque de perturber les habitudes de l’utilisateur. Et ainsi instaurer une certaine distance…

Vos utilisateurs doivent être capable de deviner l’action qui sera exécutée avant de cliquer.[space height= »25″]

Ouverture sur d’autres domaines

Credit Photo : Arno Kathollnig
 

Comme tout bon communiquant, connaissez votre cible et adaptez votre interface en conséquence. Cultivez des connaissances dans d’autres disciplines. Typographie, iconographie, sémiologie de l’image, webdesign, etc. N’oubliez pas également d’aller piocher des idées à gauche et à droite, sur d’autres secteurs, dans d’autres métiers, d’autres styles de vie, bref innovez ! Mais pas trop, gardez votre âme créative pour d’autres activités que la conception d’interface utilisateur.

 

Pour conclure, et même si je suis conscient que cela n’est pas très gratifiant pour les designers, une bonne interface est une interface que l’on ne remarque pas. Celle que l’on utilise avec souplesse et facilité.

 

D’autres sites interessants sur le sujet :

Little Big Details

Blog de Florent Bertiaux

Principles of User Interface Design

 

Si vous avez aimé cet article, vous pouvez le partager sur les réseaux sociaux, vous abonner à notre flux RSS ou à notre newsletter.

Laurent

Laurent

Créateur du blog, j'essaie de partager des contenus créatifs et innovants autours de la communication, la publicité, les médias et la création.
Bonne lecture !
Laurent

Vous aimerez aussi...

publicité-11-septembre-world-trade-center-WWF

Com’ une fin de semaine #57

Com' une fin de semaine #57, c'est une sélection de quelques articles, vidéos, illustrations pour passer un bon week end digital :)

Nos partenaires dans la com’ :


“bandeau-partenaires”

Merci pour le partage !

N'hésites pas à nous suivre sur nos réseaux, sait-on jamais, c'est toujours bon d'avoir un pote dans la com' ;)