[Dossier] Comment l’UI design est rentré dans les moeurs ?

De nos jours, créer un site internet est « presque » à la portée de tout le monde. Il existe des milliards de services en ligne qui permettent de générer un site approximatif et commencer à poser les fondations de votre présence digitale.

Je ne prêche aucunement la fiabilité de ces services car se serait dévaloriser le travail que je fais au sein de ma société. Justement, si j’en crois les différentes évolutions du web depuis sa création. On voit bien que l’expérience utilisateur (UX design) a bel et bien évolué. L’un des point essentiels (et non le seul) a été l’apparition de l’UI design. UI et UX sont 2 notions bien différentes et se complètent dans la création d’un site.

Qu’est ce que l’UI design ?

L’ui Design est l’ensemble des éléments graphiques qui permettent de faciliter l’UX design. L’UI est essentielle pour faciliter la compréhension d’une interface. Elle ne peut plus, aujourd’hui, se différencier du webdesign (elle en fait même partie intégrante). La perception des fonctionnalités, des objectifs doit-être absolument pensée pour l’utilisateur. Elle contribuera largement à la réussite du site, de l’application ou du logiciel.

Je pense répondre aux questions ci-dessous très simplement à cette réponse par : « Parce qu’on le sait« .

Pourquoi une icône de validation doit-être verte et une icône d’annulation doit-être rouge ? (UI de couleurs)

On sait qu’un « check » est le symbole de « valider » et la couleur verte signifie (comme un feu tricolore sur la route) que c’est bon, on peut y aller. Il y a donc une double vérification au niveau du cerveau. Idem pour le rouge , qui a toujours été associé au dangers, aux interdictions.

Pourquoi un player doit ressembler à une flèche vers la droite et un bouton « stop » doit-être un carré ? (UI de forme)

Ces symboles ont été inventé par les premiers constructeurs de hifi, au début, nous avions les  textes de description en dessous. Le triangle de play est une flèche simplifié (« aller vers l’avant »), le carré stop et la double barre pause sont des « obstacles » sur le chemin de la flèche. Le triangle vers le haut de eject est une flèche vers la direction de l’éjection (de la cassette à l’époque). Du coup, aujourd’hui, on continue de les utiliser.

Pourquoi on sait qu’un point d’exclamation dans un triangle est un signe d’alerte ? (Ui de texte)

Le point d’exclamation est un élément de la ponctuation. Ce symbole viendrait de l’exclamation de joie « interjectio » en latin, qui a été abrégée d’un i au-dessus d’un o. »! ». Cette exclamation est donc vouée à interpeller l’utilisateur.

 Des exemples comme ceux-là sont bien nombreux. Les 9 carrés (ou 3 barres) dans un carré qui représente maintenant un menu (comme sur votre Gmail). Un crayon qui représente un mode « édition », on sait que l’on peut prendre la main sur des informations modifiables en cliquant dessus…

Ils sont d’autant plus importants sur la toile que le temps de navigation des internautes sur un site est faible. Il est important de respecter ces règles pour une meilleure expérience utilisateur (Je parlerais d’UX design dans un prochain dossier). L’UI design doit remplacer des explications. Elles sont implicites et permettent de gagner du temps. L’UI doit être simple, claire et conforme aux règles. Il ne pourra cependant pas être utilisé seul.

Si vous voulez creuser un peu le sujet, je vous invite à lire le super article Pixel Perfect Precision