Qu’est-ce que l’UI Design ?

L’UI Design (User Interface Design), est l’étape de conception de l’interface utilisateur. L’UI (User Interface), littéralement “interface utilisateur” permet l’interaction avec le produit et contribue en cela à l’UX globale. L’expérience utilisateur est en effet directement liée au design graphique de l’interface (UI) qui a pour rôle de permettre une expérience agréable. L’UI Designer collabore donc avec l’UX Designer, garant de l’expérience utilisateur, avec qui il élabore la version graphique de l’interface.

Définition UI Design

UI est l’acronyme anglais de ”User Interface”. L’UI Design désigne la conception de l’interface utilisateur pour une application, un logiciel ou tout dispositif digital. Le design est le processus qui permet de concevoir l’interface homme-machine. Dans sa définition, l’UI Design englobe donc tout ce qui s’apparente au graphisme, à l’aspect et à l’agencement. On y trouve :

• Logo
• Grille de mise en page
• Typographie
• Polices de caractères
• Icônes
• Couleurs
• Disposition des boutons de navigation
• Charte graphique…

L’UI Designer doit concevoir une interface qui réponde aux besoins des utilisateurs, en renvoyant une image positive de l’entreprise. Cette mission implique de travailler en équipe avec les UX designers, les intégrateurs et les développeurs.

Les concepteurs d’interfaces – applications mobiles, sites web, bornes interactives etc. – participent à leur manière à élaborer l’identité visuelle de la marque.

L’UI Design peut se définir sous deux angles essentiels et complémentaires :

• “Ce qui se perçoit” : vue, toucher, audition, ressenti – avec ce que cela implique d’émotionnel (interface agréable et esthétique, design émotionnel, dimension humaine de l’écran…). On parle d’ailleurs de Design émotionnel
• “Ce qui optimise l’interaction avec l’utilisateur du produit” : fonctionnalités requises, qualité des contenus, parcours de navigation intuitif, architecture de l’information…

Ce résultat nécessite de la créativité et des compétences techniques en design graphique. Le design d’interface repose sur des principes, des règles et des bonnes pratiques, à apprendre et à respecter. Voir à ce sujet notre formation UI Design, design graphique des interfaces.

Public concerné : Toute personne souhaitant acquérir les bons réflexes pour concevoir graphiquement une interface.

Durée : 2 jour(s)

Prix : 1 000 €

Prochaines dates : 23-24 avril 2024

Quelle est la formation d’un UI Designer ?

Le métier de “Concepteur de l’interface utilisateur”, en tant que tel, est assez récent. Les UI Designers actuels occupent ce poste après des parcours extrêmement variés. Certains ont commencé par faire des études orientées graphisme, informatique ou multimédia. D’autres se sont orientés initialement vers des formations plus généralement centrées sur l’UX et l’UI Design et ont décidé de se spécialiser. Il existe aujourd’hui différentes formations pour exercer le métier d’UI Designer, ou savoir intégrer l’UI design dans un projet d’ergonomie. Voici quelques exemples de parcours possibles, du plus long au plus rapide :

• Rejoindre une école de création digitale via une spécialisation webdesign après des études multimédia ou informatique, un master en design d’interfaces… (Formation bac+5)
• Passer un diplôme d’école d’art publique, d’école de design et de multimédia…
• S’inscrire dans une licence professionnelle à l’Université ou valider un master pro (arts et technologies de l’image, création et ingénierie numérique, design d’interfaces…)
• Opter pour un BTS Design graphique ou un DUT portant sur les métiers du multimédia et de l’internet (2 ans et 4 à 6 mois de stage en entreprise)
• Obtenir un certificat supérieur de formation professionnelle avec une formation certifiante UX/UI Design d’une durée de 10 jours à 1 an selon le centre de formation : établissement d’enseignement supérieur privé, agence UX, etc.
• Suivre une formation courte UI Design, durant 2 à 5 jours

Chez Usabilis, nous proposons 2 formations expertes pour acquérir les compétences nécessaires en graphisme web, logiciel, ergonomie et UX :

• Une formation Design graphique des interfaces de 2 jours, accessible à tous pour savoir élaborer un parcours visuel, définir une stratégie de communication, créer une grille de mise en page, manier les éléments graphiques, évaluer une interface…

• La certification UX/UI Design (User eXperience/User Interface Design), via une formation courte, conçue pour permettre aux professionnels (webdesigners, chefs de projet, etc.) de faire reconnaître leurs compétences.

L’UI, c’est quoi ?

L’UI est l’Interface Utilisateur (User Interface). Il peut s’agir de l’interface d’une application mobile, d’un site internet ou de tout appareil ou service interactif. C’est donc le point de rencontre entre les utilisateurs et le produit numérique, mais également entre l’entreprise et ses clients. En somme, l’interface joue le rôle d’intermédiaire. Plusieurs niveaux et éléments servent à instaurer un dialogue humain-machine : clavier, souris, manettes de jeu, écran, audio etc. La prise en compte de leurs spécificités dans le cadre d’usage détermine la qualité de l’expérience.

Qu’est-ce qu’une “bonne” UI ?

De manière générale, une bonne UI présente des caractéristiques communes :

• C’est une interface utilisateur intuitive, facile à comprendre
• Les actions de l’utilisateur du site ou du logiciel entraînent le résultat escompté
• La navigation et les éléments graphiques sont fluides et pertinents
• Le design est conçu de manière cohérente par rapport à l’image et aux valeurs de la marques
• Et bien d’autres critères : voir à ce sujet les fameurs Critères ergonomiques de Bastien et Scapin qui donnent une bonne idée du comportement attendue d’une interface.

L’objectif n’est donc pas uniquement de faire “beau”, bien que l’esthétique participe de la motivation à utiliser l’interface, et ne puisse être dissociée totalement de l’utilisabilité. L’UI designer ne se définit pas comme un artiste, même s’il est incontestablement créatif.

Stéphanie Walter l’explique très bien dans une formule très synthétique : un « joli » template ne suffira pas à rendre votre produit utilisable.

Les Frameworks offrent des composants utilisables pour le développement web ou mobile. Les Templates sont des thèmes graphiques. Ces solutions présentent des avantages incontestables. Outre la rapidité et l’intérêt économique, chaque membre de l’équipe partage un code et une base en commun.

Mais le risque est d’en oublier l’importance d’une bonne expérience utilisateur. En effet, avant de choisir un framework, il faut :

• S’intéresser aux besoins de l’utilisateur
• Retracer le parcours utilisateur ou parcours client
• Travailler l’architecture de l’information
• Maintenir la communication développeur/designer

Dans cette autre conférence, l’UX au service de la performance de vos interfaces, Stéphanie Walter donne des exemples de contraintes techniques primordiales. L’importance du travail d’équipe entre concepteurs et développeurs, sans perdre de vue les retours utilisateurs, est de nouveau soulignée.

Rapide histoire de la conception graphique d’interfaces utilisateurs

Différentes conceptions de l’UI existent à ce jour mais historiquement, nous pouvons les diviser ainsi :

• Jusqu’à la fin des années 1960 : interface en lot ou Batch Interface avec une communication homme-ordinateur basée sur l’utilisation de cartes perforées
• Entre 1969 et 1980 : En ligne de commande (Command Line Interface/CLI), l’UI des premiers ordinateurs
• Pendant la même période, les environnements en mode texte se développent : Text User Interface ou Textual User Interface (TUI)
• De 1980 environ à maintenant : Interface utilisateur graphique (GUI), à l’origine des premières UI accessibles au grand public, avec des icônes, des boutons et dès 1979, une liste déroulante
• Depuis le début des années 1990, avènement des interfaces tactile à l’ère de l’informatique ubiquitaire (ubicomp) et des systèmes connectés : smartphone, tablette, etc.
• Interface utilisateur naturelle (NUI) : auditif, gestuel, etc. par exemple la Voice User Interface (VUI) : Siri avec Apple, Cortana avec Windows, etc., ou encore la Perceptual User Interface (PUI) encore en développement

Une bonne interface devant s’adapter aux habitudes de chacun, le design graphique a évolué. Certaines tendances sont représentatives des usages :

• Le skeuomorphisme – premières versions de l’iOS d’Apple – utilisait des représentations familières, réalistes, pour faciliter l’utilisation de fonctionnalités encore assez méconnues des utilisateurs
• Puis le Flat Design (Windows 8, iOS 7) marque un changement vers un design plat, où les boutons en relief deviennent des formes géométriques
• Enfin le Material Design de Google, lancé en 2014, conserve l’esprit du Flat Design tout en intégrant du mouvement et des ombres pour évoquer le papier

Le Material Design n’est pas qu’une tendance, c’est aussi une boîte à outils proposée aux développeurs d’applications. Ces dernières ont accès à des règles de design et à des bonnes pratiques. En somme, il s’agit d’un UI Kit.

Un UI Kit, c’est quoi ?

L’UI Kit est un ensemble de composants graphiques et de ressources. Tous les éléments pouvant faciliter la conception des UI y sont regroupés. Les designers peuvent y piocher :

• Boutons Call To Action
• Éléments de navigation
• Barre de progression
• Widgets
• Palette de couleurs
• Icônes système…

Une documentation complète souvent l’ensemble. Les kits d’interface mobile, web, etc., offrent un gain de temps et facilitent la modification du design. Il est possible d’utiliser un kit d’interface utilisateur gratuit, ou d’en réaliser un conformément au cahier des charges de l’entreprise.

De manière générale, les kits favorisent la création rapide de maquettes et wireframes d’interfaces responsive. Certaines précautions doivent toutefois être prises pour maintenir la cohérence d’un design en adéquation avec l’image de marque.

Comme elle le souligne, les critères ergonomiques de Bastien et Scapin doivent être pris en compte lors du maquettage.

L’intégration de la charte ergonomique et de la charge graphique aboutit à la création d’un Design System. Toute l’équipe peut s’y référer à chaque étape, pendant la création de site, la refonte d’application métier, etc.

L’UI Design fait partie de l’UX

Avant de concevoir le design d’une interface, le designer doit savoir répondre à certaines questions :

• Qui sont les utilisateurs finaux ?
• Comment vont-ils utiliser ce produit ?
• Pourquoi ? Quelles sont les tâches à accomplir ?
• Quel est leur niveau d’expertise ?

La recherche utilisateur (UX Research) permet précisément d’analyser les usages et finalités associés à l’application web, au site, etc. Les données récoltées pendant cette phase d’enquête et d’observation vont influencer les choix en termes de conception graphique. On peut également utiliser le storytelling pour créer de l’empathie avec les utilisateurs cibles. Ces phases du processus relèvent de l’UX Design.

La qualité de l’expérience utilisateur (UX), lors de l’utilisation de l’UI, dépendra surtout des critères suivants, paramétrés par l’UI Designer :

• Les fonctionnalités et éléments visuels
• La facilité d’utilisation de l’interface de l’outil
• La rapidité d’affichage et d’exécution
• La lisibilité des informations
• L’esthétique et ce qu’elle doit véhiculer

La conception centrée utilisateur est déterminante pour l’ergonomie de l’interface. L’objectif est de trouver le meilleur équilibre entre efficacité, utilisabilité, adaptabilité et attrait de l’UI. La complémentarité UX/UI est dès lors évidente.

UI Design Is a Part of UX – Source

Quelle différence entre UX Design et UI Design ?

Définir l’UI Design oblige à préciser la différence entre UI Design et UX Design, tant la confusion entre les deux disciplines reste fréquente. Pour concevoir une expérience, il faut se représenter le ressenti utilisateur à travers l’interaction globale vis-à-vis :

• De l’interface utilisateur web
• Des produits, objets, dispositifs, services
• De l’entreprise

L’UX va au-delà de la création d’une interface.

L’expression User eXperience Design renvoie à toutes les méthodes et outils mis en œuvre pour offrir une meilleure expérience utilisateur. Les tâches de L’UX Designer dépendent du projet. Dans un environnement numérique, ses activités pourront être diverses :

• Étudier les comportements et attentes des personnes qui utilisent le produit (personas, des cartographies UX, des parcours utilisateurs…)
• Travailler sur la structure de l’application, la hiérarchisation des informations
• Élaborer les maquettes schématiques, mockups, wireframes…
• Participer aux prototypes en collaborant avec l’équipe (graphisme, développement)
• Organiser des tests utilisateurs et proposer des solutions aux problèmes détectés

Il n’y a pas une définition homogène de ce métier en pratique. En l’occurrence, l’important réside dans la collaboration entre l’UX et l’UI Designer. Le concepteur de l’interface (L’UI Designer) s’appuie sur les propositions de l’UX Designer pour travailler sur l’aspect visuel. Enfin, par définition, l’UI Design est exclusivement un métier du numérique.

Pour approfondir cette question, vous pouvez (re)lire notre définition de l’UX L’expérience utilisateur. Par ailleurs, en dépit des différences entre UX Design et UI Design, une même formation peut préparer aux deux métiers.

Public concerné : Toute personne intervenant dans la conception d’interface.

Durée :

Prix :

Prochaines dates :

Ce ne sont pas les articles et vidéos qui manquent pour expliquer à l’envie les fameuses différences entre UX et UI !

Qu’est-ce qu’un (bon) UI Designer ?

Un (bon) UI Designer est un professionnel qui possède certaines qualités humaines :

• Créatif, avec une sensibilité artistique
• Curieux et ouvert d’esprit
• Organisé et sérieux dans l’accomplissement de ses tâches
• Avec le sens du contact et du relationnel

Cette dernière caractéristique est primordiale puisqu’il devra communiquer avec l’équipe de développement et de marketing, le product owner, etc. Les UI Designers ont aussi des compétences plus techniques :

• Culture web
• Intérêt pour les nouvelles technologies
• Connaissances des tendances web en graphisme
• Utilisation des logiciels de création bitmap, vectorielle…
• Compétences en prototypage, maquettage et wireframing
• Maîtrise des systèmes de gestion de contenu (CMS)

Les designers d’interfaces utilisateurs peuvent être des consultants freelances, ou travailler dans des entreprises. Les agences de communication ou de webmarketing les recherchent aussi. La qualité des interfaces utilisateurs est prise en compte par les moteurs de recherche, et impacte donc le référencement des sites internet.

Quels outils pour les UI designers ?

Actuellement, les principaux outils pour les UI Designer sont :

• Figma : application web qui permet à plusieurs personnes de travailler ensemble pour prototyper des interfaces graphiques. Voir à l’occasion notre formation à l’application Figma.

Public concerné : Tout professionnel souhaitant maîtriser un logiciel de design graphique d’interfaces web, mobiles, responsive.

Durée : 2 jour(s)

Prix : 990 €

Prochaines dates : 13-14 juin 2024

• Axure : logiciel, disponible sur Mac et PC, pour créer des prototypes et des wireframes.

Public concerné : Concepteurs, designers, webdesigners, webmasters, développeurs front-end, PO, chefs de projets AMOA.

Durée : 2 jour(s)

Prix : 792 €

Prochaines dates :

• Sketch : sur Mac, le logiciel de conception incontournable pour les UI/UX Designers
• Adobe XD: application desktop concurrente de Sketch pour la conception d’interfaces
• inVision : pour rendre interactives les maquettes et créations réalisées sous Photoshop ou Sketch, et permettre aux parties prenantes de se réunir à distance (designers, développeurs, collaborateurs…)
• inVision Studio: fait partie de la suite inVision mais s’axe spécifiquement sur le prototypage et l’animation avec un franc succès
• Principle : outil axé iOS qui présente la caractéristique d’animer les maquettes, susceptible d’intéresser les Designers UX et UI et les designers d’interaction, notamment pour présenter un projet à leurs clients

Il existe de nombreuses autres solutions, gratuites ou payantes pour faciliter la création d’une interface utilisateur simple et intuitive. Les concepteurs doivent toutefois veiller à ne pas être victimes du syndrome PowerPoint. Autrement dit, l’outil n’a de sens que s’il est au service de l’expérience utilisateur ou de l’expérience client.

Conclusion

UI Design signifie littéralement “conception de l’interface utilisateur” (User interface Design). Par définition, l’UI est le point de rencontre – point de contact – visible entre l’utilisateur et le produit. Il faut donc soigner l’UI pour offrir la meilleure expérience utilisateur. UX et UI designers travaillent ainsi de pair. Le premier réfléchit à l’expérience dans sa globalité, le second se concentre sur l’interface tout en respectant l’identité de la marque. Leur association et l’union de leurs compétences respectives sont les clés d’un design réussi, centré sur l’utilisateur.

Bibliographie

UX Design et Ergonomie des Interfaces, de Jean-François Nogier – 7ème édition – Dunod

Le livre “UX Design et Ergonomie des Interfaces” s’adresse à tous les professionnels impliqués dans la conception et le développement des applications digitales. Qu’il s’agisse d’applications mobiles ou tactiles, de logiciels ou de sites web, cet ouvrage sur l’UX design et l’ergonomie des interfaces est utilisé quotidiennement par les éditeurs de logiciels, responsables R&D, directeurs marketing, chefs de produit, designers et, bien sûr, les ergonomes UX ou UI.

“…Ouvrage est très structuré … il est lui-même bien illustré, avec une maquette remarquable de clarté mettant parfaitement en valeur les différents niveaux de texte….” Le Monde informatique.fr

La phase de recherche en web design de Erika Hall, Editions Eyrolles

Étape trop souvent négligée par les web designers, le travail de recherche préalable à la conception d’un site web est pourtant un élément clé de la réussite de ce dernier. Une recherche fructueuse nécessite de poser les bonnes questions et de porter un regard critique sur les réponses obtenues, en impliquant tous les acteurs du projet.

Erika Hall, responsable de la recherche dans une agence web, vous livre ici toute son expérience en la matière, en vous apprenant à reconnaître vos avantages concurrentiels, à identifier vos partis pris et préjugés, pour ensuite comprendre et exploiter au mieux les résultats obtenus.

Responsive web design de Ethan Marcotte Editions Eyrolles

Découvrez le responsive web design et apprenez à concevoir des sites qui anticipent et répondent aux besoins de vos utilisateurs. Dans cette seconde édition de son ouvrage phare, Ethan Marcotte décrit les principes qui sous-tendent le responsive design – grilles fluides, images flexibles et media queries – et démontre comment proposer une expérience de qualité, quelle que soit la taille de l’écran.

Dans cette nouvelle édition : de nouveaux trucs et astuces pour la prise en charge des navigateurs, des solutions pour servir des images, rôle de l’amélioration progressive dans le design web, meilleures méthodes pour gérer la bande passante, etc. De nouveaux exemples et des listings de code méticuleusement révisés.

Depuis sa parution qui a révolutionné le monde du web design en 2011, Responsive web design est resté une ressource fondamentale pour quiconque travaille sur le Web.

Expérience utilisateur mobile, sous-titré UX Design pour smartphones et tablettes de Amélie Boucher, Editions Eyrolles

Un livre de référence pour les concepteurs de services mobiles

Vous avez un projet mobile ? Que ce soit pour développer votre première application, parfaire vos connaissances ou acquérir des bases théoriques et pratiques, ce livre vous aidera à vous démarquer dans la jungle des services mobiles. L’auteur, véritable référence en ergonomie web, décrypte dans ce nouvel ouvrage les codes spécifiques de l’UX pour smartphones et tablettes.

Cet ouvrage illustré vous propose d’apprendre par l’exemple : rien de tel pour comprendre ce qui détermine une UX mobile réussie. On y découvre ainsi comment les champions du mobile parviennent à créer des expériences engageantes : Airbnb, Capitaine Train, Spotify, Waze et bien d’autres…

“Amélie nous éclaire sur les principes de l’UX mobile en y apportant la théorie. Accessible à tous, ce livre répond largement aux questions que l’on peut se poser lors de la conception d’interfaces.”
Aurélia Ramalli – Chef de produit mobile, La Française des Jeux

“Quand la magie opère, quand tout est fluide, naturel, un lien très fort peut alors se nouer entre un utilisateur et un service. Construit comme un catalogue pratique de tous les aspects de l’expérience mobile, cet ouvrage montre les exemples à suivre, les écueils à éviter. Un manuel de référence.”
Édouard Andrieu – Directeur Nouveaux Écrans, Le Monde

Mémento – Ergonomie web de Amélie Boucher, Editions Eyrolles

Indéchirables et imperméables, les mémentos Eyrolles sont des aides-mémoire pratiques pour le travail quotidien : chaque mémento reprend l’essentiel d’une technologie sous la forme d’un dépliant de 14 pages.

Comment rendre votre site web plus attractif, plus percutant, plus fonctionnel ? Comment apprécier son utilisabilité et sa capacité à fidéliser vos visiteurs ?

Amélie Boucher, spécialiste en ergonomie web, livre dans la 3e édition mise à jour de ce mémento les points clés à retenir pour réaliser un site performant et dynamique et auditer son ergonomie.

Amélie Boucher est experte en UX design. Elle pratique depuis 12 ans l’expérience utilisateur web et mobile pour des missions variées : e-commerce, éditorial, réseaux sociaux, logiciels et applications métier… En 2003, son master d’ergonomie en poche, elle lance le site www.ergolab.net, précurseur de l’essor de la discipline en France. Avec cette même volonté de faire connaître l’UX à tous ceux qui créent des sites web, elle écrit l’ouvrage Ergonomie web ainsi qu’un ouvrage d’études de cas, Ergonomie web illustrée, tous deux parus aux éditions Eyrolles. Amélie intervient régulièrement dans des conférences pour porter la voix de l’expérience utilisateur et diffuser ses bonnes pratiques.

Articles

• Une excellente liste de ressources par Newflux
• Designers interactifs propose sa sélection de livres : Design d’interfaces (UI) : 10 livres indispensables
• En livres de poche, plus axé sur le Webdesign : Livres : Comment apprendre le webdesign ?
• Opquast nous propose dans sa série Mémento : Mémento Sites Web : les bonnes pratiques – 4ᵉ édition
• Tous les sites d’inspiration et de références en design d’interface

Lire aussi

• Conception d’interface : Créer une véritable expérience digitale (UX)
• Design graphique : Créer l’identité visuelle de votre interface
• Maquettage d’interface : La maquette interactive “wireframe” est l’outil le plus concret pour construire l’UX
• Refonte d’interface (UI), Rajeunir l’interface
• UI Designer : entre créativité et rigueur
• Panorama des métiers de l’UX/UI Design
• Design system, le design en kit pour les UI/UX designer
• Interface invisible, NoUI, NUI… L’UI menacée ?
• Les clés d’une collaboration UX / UI réussie
• 10 références inspirantes en UI design
• Design des tableaux de données : quels enjeux UX/UI ?
• 3 bonnes raisons de vous former à l’UI Design

Voir notre formation Adobe XD pour concevoir des maquettes UX/UI

Crédit image à la Une : Designed by Freepik