{"id":1906,"date":"2020-02-10T10:27:26","date_gmt":"2020-02-10T09:27:26","guid":{"rendered":"http:\/\/pigier-lyon.com\/blogs\/comception\/?p=1906"},"modified":"2020-05-17T11:20:50","modified_gmt":"2020-05-17T09:20:50","slug":"ui-les-termes-de-bases-a-comprendre","status":"publish","type":"post","link":"http:\/\/pigier-lyon.com\/blogs\/comception\/2020\/02\/10\/ui-les-termes-de-bases-a-comprendre\/","title":{"rendered":"UI : les termes de bases \u00e0 comprendre"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

UI : les termes de base \u00e0 comprendre<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Tout d'abord, le designer UI a pour mission de permettre aux personnes qui l'utiliseront de naviguer de mani\u00e8re fluide et simple dans un site internet ou dans une application. L'utilisation et l'exp\u00e9rience client est en effet une \u00e9tape \u00e0 ne pas manquer en 2020. Avec une concurrence importante, les utilisateurs peuvent facilement aller voir ailleurs si leur exp\u00e9rience ne leur plaise pas. Si vous ne connaissez rien \u00e0 ce domaine, il est malgr\u00e9 tout important de conna\u00eetre les termes de base pour pouvoir \u00e9changer avec vos designers UI et UX.<\/p><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

1. UI : Navigation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

En effet, ce sont des techniques et des actions guidant un utilisateur pendant son exp\u00e9rience sur un site internet ou une application. Le but est tout simplement de consulter le produit pour ensuite atteindre son objectif voulu.<\/p><\/a><\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

2. Menu<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Le menu est primordial pour pouvoir naviguer sur un site internet ou une application. C'est le fil conducteur pour que l'utilisateur s'y retrouve et qu'il puisse interagir sur l'ensemble de la plateforme. Visuellement, le design du menu ne doit surtout pas \u00eatre pris \u00e0 la l\u00e9g\u00e8re. Il doit \u00eatre extr\u00eamement bien con\u00e7u pour que les utilisateurs atteignent simplement et rapidement leurs objectifs. <\/span><\/p><\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

3. UI : Barre<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

De plus, cet \u00e9l\u00e9ment est clickable et donne un moyen de conna\u00eetre les diff\u00e9rentes \u00e9tapes de l'interaction avec le produit.<\/p><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

4. Call to action<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

C'est un onglet, un lien ou un bouton qui permet l'utilisateur d'entreprendre une action. Ils sont positionn\u00e9s de fa\u00e7on \u00e0 ce que l'utilisateur ne prenne pas de mauvaises d\u00e9cisions et qu'il ne se perde pas.<\/p><\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

5. UI : Bouton<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Effectivement, le bouton est un \u00e9l\u00e9ment qui donne la possibilit\u00e9 d'interpeller une information au syst\u00e8me afin d'obtenir un retour interactif au besoin. En effet, le bouton va servir \u00e0 communiquer avec le site internet ou l'application. D'autre part, il exige de nombreuses combinaisons et vari\u00e9t\u00e9s de voutons dont les designers UI consacrent \u00e9norm\u00e9ment de temps dans la conception. Le but visuel est que ces boutons se fondent parfaitement dans la plateforme sans trop \u00eatre important. C'est un \u00e9quilibre tr\u00e8s difficile parfois \u00e0 r\u00e9aliser.<\/p>
Les boutons les plus r\u00e9pandu sont le menu hamburger pour \u00e9tendre le menu, le bouton \"+\" pour ajouter et le bouton partager pour bien \u00e9videment partager des \u00e9l\u00e9ments (sur les r\u00e9seaux sociaux par exemple).<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

6. Checkbox<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Le checkbox permet \u00e0 un utilisateur de d\u00e9cider de profiter d'une option en particulier lors d'une navigation. Les cases susceptibles d'\u00eatre coch\u00e9es sont souvent d'un coloris vari\u00e9 pour am\u00e9liorer la clart\u00e9 de l'exp\u00e9rience utilisateur.<\/p><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

7. UI : Liens hypertexte<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Pour finir, les liens hypertexte sont aussi un moyen de passer d'une page \u00e0 une autre. En effet, la diff\u00e9rence est que ce lien est li\u00e9 au texte pour qu'il puisse acc\u00e9der \u00e0 une information.<\/p><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

N'h\u00e9sitez par \u00e0 lire nos autres articles sur notre blog !<\/a><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tCliquez ici<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

UI : les termes de base \u00e0 comprendre Tout d’abord, le designer UI a pour mission de permettre aux personnes qui l’utiliseront de naviguer de mani\u00e8re fluide et simple dans un site internet ou dans une application. L’utilisation et l’exp\u00e9rience client est en effet une \u00e9tape \u00e0 ne pas manquer en 2020. Avec une concurrence… <\/p>\n

En savoir plus<\/a><\/div>\n","protected":false},"author":193,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1906","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/posts\/1906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/comments?post=1906"}],"version-history":[{"count":24,"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/posts\/1906\/revisions"}],"predecessor-version":[{"id":2900,"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/posts\/1906\/revisions\/2900"}],"wp:attachment":[{"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/media?parent=1906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/categories?post=1906"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/pigier-lyon.com\/blogs\/comception\/wp-json\/wp\/v2\/tags?post=1906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}