La force du graphisme dans le design interactif.

CHAPITRE II. LA COMPOSITION DU DESIGN INTERACTIF.

II.1. LES ELEMENTS INTERVENANTS DANS LA COMPOSITION DU DESIGN INTERACTIF.

Le design interactif est l'activité créatrice dédié à la conception des produits et services numériques. Sa fonction est de définir la relation qui existe entre l'utilisateur et le service ou produit consulté et la manière dont ces deux entités, humaine et numérique, se comportent et réagissent de l'une vers l'autre.

Il implique la participation de l'utilisateur. Le design interactif ne s'incarne pas seulement à travers des interfaces et des écrans. Il est présent dans de nombreux objets physiques de notre quotidien, ou de façon moins visible, dans notre environnement. Sites web, logiciels, applications mobiles, bornes interactives, objets connectés, informatique vestimentaire, robots, espaces interactifs... Celle-ci est composé de l'UX design (User eXeperience design en français design d'expérience Utilisateur) et de l'UI design (User Interface design en français design d'interface utilisateur)¹⁵.

II.1.1. UX DESIGN.

UX design signifie User Experience Design. En Français, il s'agit du design de l'expérience utilisateur. Il est souvent confondu avec l'UI design car les deux notions sont proches, même si l'une est complémentaire de l'autre. L'UI design correspond au design de l'interface utilisateur, c'est-à-dire au design en général : les couleurs, la mise en page, les formes, les visuels, etc.

L'UX design n'est pas uniquement focalisé sur le design : la priorité est l'expérience utilisateur. Il s'agit d'anticiper les attentes des visiteurs, de rendre l'interface la plus ergonomique, intuitive, facile d'utilisation possible, en se basant sur les ressentis des users. L'UX design mêle ainsi des objectifs stratégiques, des paramètres technologiques et des problématiques design.¹⁵

¹⁵ https://www.hitpart.fr/ux-ui-design-dinterface/ 15/07/2019 01 :43

Page | 19

Fig 15 :La subdivision de l'Ux design ( google.com)

Alors quand nous parlons de l'UX design de tout ce que l'utilisateur va voir, va ressentir , va expérimenter pendant son parcours , l'idée qu'il se fait en rapport avec le service jusqu'à l'utilisation du produit et la façon il continuera à communiquer avec le service.

1. Le processus de l'UX design.

L'UX englobe tout les aspects d'interactions des utilisateurs, évidemment on a pas seulement un process ou méthode ou encore un logiciel spécifique. Il y a :

- Stratégie de contenu ;

- Personas ;

- Recherche utilisateurs ;

- Tests utilisateurs ;

- Architecture de l'information ;

- Centre utilisateurs ;

- Ergonomie ;

- Wireframe ;

- Prototype.

Page | 20

2. Quel est la place de l'Ergonomie dans l'UX ?

L'expérience utilisateur fait appel aussi bien à l'ergonomie qu'à l'UX Design, mais ces deux termes interdépendants sont souvent confondus et demandent là aussi d'être définis.

L'ergonomie est la recherche d'une meilleure adaptation possible entre une fonction, un matériel et son utilisateur.

Le design UX est une forme spécifique d'expérience humaine qui naît de l'interaction avec une technologie. Le design UX a pour objectif de rendre cette expérience la plus positive possible en pensant l'expérience avant le produit.

L'ergonomie est composée de :

- L'affordance (c'est la capacité d'un objet à traduire ce qu'il vas réellement

faire c.-à-d. principe de lecture et de compréhension de l'interface) ;

- La sérendipité (c'est qui est l'art de trouver quelque chose qu'on a pas

chercher ) ;

- Le matériel design ;

- La facilité d'apprentissage ;

- L'efficience ;

- L'explorabilté ;

- Cohérence.

Il existe des domaines de spécialisation à l'intérieur de la discipline, qui représentent des compétences approfondies sur des attributs humains particuliers ou des caractéristiques de l'interaction humaine. De manière générale, les domaines de spécialisation sont :16

- L'ergonomie physique : elle s'occupe des liens entre les caractéristiques anatomiques, anthropométriques, physiologiques, biomécaniques et l'activité physique des hommes. Les thèmes pertinents comprennent les postures de travail, la manipulation d'objets, les mouvements répétitifs, les troubles musculo-squelettiques, la disposition du poste de travail, la sécurité et la santé.

¹⁶ https://www.preventica.com/dossier-ergonomie-amenagement-postes-travail-definition.php 27/07/2019 07=10

Page | 21

Fig 16 : L'ergonomie ( dataflex.int.com)

- L'ergonomie cognitive : elle s'intéresse aux processus mentaux (tels que la perception, la mémoire, les raisonnements et les réponses motrices) influant sur l'interaction entre les hommes et les autres éléments des systèmes. Les thèmes pertinents comprennent la charge mentale, la prise de décision, la performance experte, l'interaction homme-machine, la fiabilité humaine, le stress professionnel et la formation dans leur relation à la conception personne-système.

- L'ergonomie organisationnelle : elle s'intéresse à l'optimisation des systèmes sociotechniques, ce qui inclut les structures, les règlements et les processus organisationnels. Les thèmes pertinents comprennent la communication, la gestion des ressources des collectifs, la conception du travail, la conception des horaires de travail, le travail en équipe, la conception participative, l'ergonomie communautaire, le travail coopératif, les nouvelles formes de travail, la culture organisationnelle, les organisations virtuelles, le télétravail et la gestion par la qualité.

3. Pratiques de l'ergonomie.

Les ergonomes, praticiens de l'ergonomie, contribuent au développement des entreprises, institutions, associations pour les rendre plus performantes, notamment par la prise en compte du fonctionnement humain et des exigences concrètes des situations de travail, de vie et d'usage dans les choix de conception retenus (organisationnels, techniques, de formation, etc.).

¹⁷ Maurice de Montmollin, L'ergonomie, Paris, Editions La Découverte, coll. « Repères » (no 43), 1990, 3e éd., 123 p. (ISBN 978-2-707-11600-0,

Page | 22

Les ergonomes peuvent être sollicités dans différentes configurations :17

Soit cette sollicitation a pour origine un dysfonctionnement rencontré par la structure en termes de productivité, de qualité, de fiabilité, de santé, de sécurité. L'objectif est alors de mieux comprendre les dysfonctionnements rencontrés par la mise en oeuvre d'une démarche rigoureuse d'analyse ergonomique de situations de travail, de vie, d'usage à partir de laquelle un accompagnement sur mesure est

proposé^ì

par l'ergonome. Cet accompagnement est alors co-construit avec les

acteurs du milieu de l'intervention. On parle d'ergonomie de correction.

Soit, cette sollicitation s'inscrit dans un contexte de conception (d'espaces, d'outils ou dispositifs techniques, de nouvelles organisations, de dispositifs de formation, etc.). L'objectif est alors pour l'ergonome de contribuer à la réussite du projet d'investissement ; il s'agit pour lui d'accompagner la structure pour éviter que soit mis en place des moyens de travail à partir de représentations erronées de l'activité humaine ou tout simplement de représentations fondées sur un existant qu'il n'est pas souhaitable de reproduire. Les ergonomes ne se contentent pas d'apporter des préconisations techniques issues des analyses du travail, ils apportent leurs conseils à la fois sur la manière dont les projets peuvent être conduits et sur le contenu même du projet. On parle d'ergonomie de conception.

Les champs d'application sont multiples (conception industrielle, architecturale, organisationnelle, produit, dispositifs de formation, etc.) dans des domaines variés (aéronautique, automobile, pharmaceutique, hospitalier, agricole, sanitaire et social, militaire, nucléaire, éducation, etc.).

Les techniques et outils de simulation (d'interface de systèmes, d'architecture, d'objets...) qui permettent de visualiser en 3D et avant même le moindre début de réalisation la future interface, ou la future salle de contrôle, le futur poste de travail... ont beaucoup contribué à faire évoluer le métier de l'ergonome, et le regard que portent sur lui les industriels, qui doivent dans les projets industriels, identifier le plus tôt possible les problèmes liés aux futures situations pour les opérateurs.

Page | 23

4. Prototype.

Une idée peut devenir un prototype si le designer comprend l'espace dans lequel il travaille. Les designers doivent réaliser un prototype technique, souvent appelé « preuve de concept » ce prototype permet aux techniciens de démontrer la fiabilité de l'idée.

Fig 17 : Prototype manuelle

Un prototype est une représentation haute fidélité d'un service sans qu'il soit développé. Il montre comment le service fonctionne, ses fonctionnalités principales et les parcours utilisateurs principaux.¹⁸

¹⁸ https://openclassrooms.com/fr/courses/ 01/08/2019 04 :47

Page | 24

Fig 18 : Prototype à haute fidélité d'un interface ( sitepoint.com) II.1.2 UI DESIGN.

L'interface utilisateur (User Interface en anglais) est le nom que l'on donne pour décrire la manière dont les utilisateurs interagissent avec un appareil ou une application. Un graphiste spécialisé en design UI conçoit les interfaces pour qu'elles soient faciles et agréables à utiliser.

Cela comprend tous les éléments avec lesquels les utilisateurs interagissent (écran, clavier, souris), mais dans le contexte du design graphique, il s'agit surtout de l'expérience visuelle sur écran des utilisateurs, c'est-à-dire les boutons, les menus, les micro- interactions, etc. Le travail d'un graphiste UI est de trouver le bon équilibre entre esthétique et fonctionnalité. Les designers UI sont spécialisés en applications mobiles, applications bureau, applications web et jeux. Ils travaillent en étroite collaboration avec les designers UX (« expérience utilisateur »), qui déterminent le fonctionnement des applications.

C'est l'art de bien présenter graphiquement et de rendre une page web facile et agréable à utiliser, par sa présentation et son agencement (Couleurs, typographie, position des éléments dans la page...).¹⁹

¹⁹ https://www.i-com.fr/ux-design-ergonomie 27/07/2019 07:18

Page | 25

UI est l'abréviation d'user interface ou interface utilisateur. L'UI design se rapporte donc à l'environnement graphique dans lequel évolue l'utilisateur d'un logiciel, d'un site web ou d'une application. La mission de l'UI designer consiste à créer une interface agréable et pratique, facile à prendre en main. Ainsi, l'UI design fait partie de l'UX design, en cela qu'il travaille à donner la meilleure expérience possible à l'utilisateur, mais il s'attache plus particulièrement aux éléments perceptibles : éléments graphiques, boutons, navigation, typographie...²⁰

Par TRIONN( Instagram.com) Par CRANK ( Dribbble.com)

Fig 18-19 : Design d'un interface web et d'une application mobile

1. Qu'est-ce qu'un UI Designer ?

L'UI designer est responsable de la conception de l'interface qui lie l'utilisateur au produit. Il se charge de toutes les tâches relatives à la création de l'identité visuelle, parmi lesquelles le design du logo, ainsi que le choix des couleurs et de la typographie. Son objectif est d'offrir aux utilisateurs une interface attractive et très agréable qu'ils prendront plaisir à exploiter chaque jour. Pour y arriver, il travaille en menant plusieurs réflexions et en suivant plusieurs étapes. Et comme UI et UX sont complémentaires, il n'hésite pas à prendre en compte les observations de l'UX designer afin que le résultat final soit à la hauteur des attentes.²¹

2. Les éléments qui composent l'Ui.

À l'origine, le terme « interface utilisateur » s'appliquait à toutes sortes d'interactions homme-machine. Autant que les ordinateurs et les appareils

²⁰ https://www.iesamultimedia.fr/definition-ui-design 30/07/2019 06:45

²¹ https://blog-ux.com/quest-ce-que-lui-design/ 01/08/2019 04 :26

Page | 26

mobiles se sont développés au fil des ans, aujourd'hui ce terme signifie principalement "interface utilisateur graphique".

L'interface utilisateur graphique offre un moyen confortable d'interagir avec les appareils électroniques à travers des icônes, des boutons et d'autres éléments graphiques.

Donc il est composé de :22

? L'identité visuelle : En tant qu'interface, l'aspect visuel d'un site internet est sa première signature et le reflet immédiat de ce qu'est la marque. En reprenant la charte graphique, l'Ui va se nourrir des logos, couleurs, typographies ou pictogrammes qui ont été voulu comme étant différenciant et marqueur d'identité.

? Le Web Design : c'est ici une des raisons pour lesquelles la frontière entre Ui et Ux est si ténue : l'Ui s'intéresse à l'interface Web, ce que fait également l'Ux. Mais ici, on appelle Ui ce qui touche à la construction et l'agencement des pages : mise en forme du menu, alignement des contenus, présentation des pages...

? La charte éditoriale : si l'identité visuelle permet en un coup d'oeil d'identifier l'univers d'une marque, la charte éditoriale est également un marquer fort. Quelques mots lus sur une pub de biscuit au ton résolument décalé et vous ne tardez pas à comprendre qu'il s'agit de Michel & Augustin. Par exemple.

L'ensemble de ces éléments représentent la réflexion Ui, et sont donc partie intégrante de l'Ux car constituante de celle-ci, dans sa dimension visuelle et éditoriale. Les réflexions qui découlent de la mise en place de ces éléments sur une page web sont quant à elle du domaine de l'Ux.

3. Les missions principales de l'Ui designer.

Comme on vous l'a dit, l'Ui et l'Ux ont pour habitude de fonctionner ensemble. De cette collaboration doivent naître des éléments solides pour créer un livrable intéressant aux utilisateurs. Mais cet intérêt ne se décrétant pas, des process permettent d'étayer la réflexion.²³

²² https://blog.limpide.fr/analyse/ui-design-definition/ 30/07/2019. 06 :58

²³ https://blog.limpide.fr/analyse/ui-design-definition/ 30/07/2019 06 :58

Page | 27

Identifier les principaux enjeux de l'applicatif : le design est fortement lié à la vocation future de l'outil. La mise en place d'un site e-commerce ne génèrera pas les mêmes modes d'usages et de navigation de la part des utilisateurs qu'un site d'information en ligne. Taux de rebond, rétention, temps passé par page, durée moyenne de la visite ... Tous ces paramètres sont des traductions de la navigation effective et de réelles pistes de travail pour unUx/Ui Designer. Sur un site de e-commerce, le taux de rebond est très élevé ? Alors les deux experts doivent trouver le moyen de capter l'attention de l'utilisateur pour qu'il reste plus de temps sur le site.

Études qualitatives et quantitatives auprès de vos utilisateurs : vouloir améliorer les choses c'est bien, mais le faire sans consulter vos utilisateurs c'est moins bien. Ce sont eux les utilisateurs numéro 1 de votre plateforme, et c'est à eux qu'elle doit plaire. Ux/Ui Designer prendra donc le pouls directement auprès d'un panel test pour être sûr que les améliorations proposées vont dans le sens des attentes de votre audience cible.

Définition d'un buyer persona : C'est le nerf de la guerre digitale. Concrètement, il s'agit d'écrire l'histoire d'un utilisateur type de votre plateforme en dépassant le cadre de l'utilisation de votre applicatif. Vous devez comprendre qui sont vos utilisateurs type afin d'en dresser un portrait et ainsi découvrir les opportunités qui s'offrent à vous. En identifiant leurs attentes, vous vous offrez la possibilité d'identifier de nouveaux canaux sur lesquels ils seront présents.

Création d'un storytelling en conformité avec l'image de la marque : C'est de créer de l'émotion chez l'utilisateur. Et l'émotion nait de la cohérence entre le discours porté, l'image véhiculé, et la capacité à plonger l'utilisateur dans votre univers à chaque instant du contact entre lui et vous. Il faut que l'expérience soit totale pour qu'elle fonctionne. Donc le tout doit être le fruit d'une réflexion globale. Et devinez qui peut, et doit, vous aider à la mener.

Procéder à des phases d'A/B testing : L'A/B testing est la traduction de l'approche customer centric. L'idée est de proposer à des échantillons définis de votre cible, des variantes d'un même objet. Ainsi, une partie de vos utilisateurs devra cliquer sur un bouton rouge pour passer à l'étape d'après, quand une autre devra cliquer sur un bouton vert. A la fin de la période de

Page | 28

testing, vous étudiez les KPIs et vous tranchez en faveur de la couleur la plus efficace, ou alors vous décidez que ni le rouge ni le vert n'obtient des résultats assez significatif été testez le bouton bleu. Encore un outil à disposition des Ui designers...

On l'aura compris, l'UI est un véritable bras armé de l'équipe de l'Ux designer et c'est de manière conjointe que les réflexions doivent se mener afin de proposer une expérience totale et différenciante à vos utilisateurs.

Sa créativité est son point fort : l'UI designer maîtrise parfaitement les outils du design graphique et les logiciels de PAO, qui lui permettent de proposer des concepts graphiques percutants, pertinents et innovants. Aussi, il doit pouvoir s'appuyer sur une excellente culture artistique, qu'il ne cesse de renouveler par une veille régulière des nouvelles tendances en matière de design numérique. «La créativité de l'UI designer c'est un peu ce petit plus qui va rendre une interface vivante, qui va permettre l'émotion et qui du coup va marquer l'utilisateur.»²⁴

II.1.2.1. L'IDENTITÉ VISUELLE.

Une identité visuelle est constituée par un ensemble d'éléments graphiques permettant d'identifier une entreprise ou une institution. Les éléments graphiques constituant une identité visuelle sont : le nom (marque), le logotype, la griffe, l'emblème, la couleur, la typographie, des pictogrammes, ...

Dans le cas d'une entreprise, tous les éléments graphiques de l'identité visuelle sont détaillés et figés dans un document nommé « charte graphique » (corporate identity code). L'objectif premier de cette charte graphique est de décliner fidélement une identité visuelle sur tous les supports de communication d'une entreprise (site internet, signature de mail, emballage de produits, enseigne, véhicules de société, papier à lettres, cartes de visites, flyers, dépliants, plaquettes commerciales...).²⁵ Le but d'une charte graphique est de vous assurer une cohérence, une harmonisation dans tous vos supports de communication.

1. Le logo.

Il est l'élément fondateur d'une identité visuelle. Il doit être évocateur,

²⁴ http://www.lisaa.com/admin/[job_47]

²⁵ https://www.anthedesign.fr/communication-2/identite-visuelle-entreprise/ 30/07/2019 10:10

Page | 29

intemporel et déclinable. Il doit également être visible, compréhensible et facilement mémorisable. Il doit aussi être utilisable en couleur, en niveau de gris ou en noir et blanc et dans toutes les tailles.

Fig 20-21 : Le logo drink et sa déclinaison

Réalisé par SARAH JEAN WRIGHT SARAHJEANWRIGHT.COM

2. La typographie.

Elle est utilisée pour le logotype, pour le contenu texte de tous les documents officiels et toutes informations diverses.

La charte définit les règles de mise en page et d'utilisation de la typographie dans un document. Le caractère et la personnalité d'une ou plusieurs typographies apportent une signification et peuvent changer la vision et la portée d'un texte en permettant de créer différents niveaux de textes tout en assurant un confort de lecture. En plus bien sûr de participer à la cohérence générale de la communication tant au sein de votre entreprise qu'en dehors.

Fig 22-24 : Les parties d'une typographie, police sans serif et police avec empattement.

Page | 30

3. Les couleurs.

Le choix des couleurs doit être limité pour permettre une meilleure mémorisation et une distinction rapide. Si vous devez imprimer votre logo sur une surface colorée (voiture, farde plastique, etc.), ce qui est permis et ce qui ne l'est pas sera impérativement stipulé dans la charte graphique... certaines couleurs ne sont pas souhaitables avec votre logo.

L'utilisation de vos signes graphiques sera également spécifiée pour le noir et blanc (photocopies par exemple).

Fig 25-26 : Cercle de couleur et la palette de couleur

4. Les formes et les signes.

Les signes et les formes sont des points essentiels de reconnaissance. Des formes précises sont conseillées. Si l'on prend l'exemple d'une flèche, il est conseillé^ì d'utiliser toujours la même pour conserver une cohérence graphique.

Fig 27-29 : la forme carré, triangle et cercle

? Charte graphique des sites internet.

Une charte graphique pour un site internet sera le plus souvent une déclinaison de la charte graphique papier, adaptée aux besoins spécifiques du web. Elle sera préalable au développement du site et servira justement de

Page | 31

guide pour les développeurs et devrait leur permettre de créer une interface belle, pratique et conviviale.

Sur la charte graphique web seront définis l'emplacement des symboles tels que le logo, les éléments graphiques, les couleurs clés, les fontes de caractère et surtout et avant tout permettre une identification rapide de la société dont l'identité graphique du web sera similaire à son identité papier.

Fig 30 : La disposition de l'identité graphique web

Par Benjamin Azevedo ( Pinterest.com)

En bref,

L'identité visuelle sert de repère pour l'ensemble des échanges commerciaux, diplomatiques et autres. Elle doit être reconnaissable facilement, donc identifiable comme étant celle de l'entreprise.

Elle doit également être perçue comme une image marquante dans l'esprit du public pour qu'il s'en souvienne et l'attribut systématiquement à l'entreprise concernée. C'est ainsi que se développe la popularité et la notoriété de celle-ci.

Page | 32