Tout comprendre de l’ui design

Différences UX et UI design

Premièrement, il faut faire une distinction entre L’UI design et L’UX design. Ces deux termes sont très proches, mais ce sont deux missions bien distinctes. Il n’est pas rare que l’UX designer soit aussi l’UI, cependant la séparation de ces deux métiers permet une meilleure approche utilisateur, car : “Tout seul on va plus vite, ensemble, on va plus loin.”.

définition UX

UX = user experience = expérience utilisateur. L’UX qualifie l’ensemble du parcours de l’utilisateur afin de proposer la meilleure qualité de navigation possible.

définition UI

UI = user interface = interface utilisateur. L’UI qualifie plutôt l’expérience d’interaction et design visuel que propose un service web. 

Quels services utilisateurs nécessitent  une expérience design ?

Offrez la meilleure expérience possible lors de vos créations d’applications mobiles ou de sites Internet. Aujourd’hui, maîtriser l’approche UX est fondamentale lorsque l’on veut mettre au point un produit concentré sur l’interaction avec le mobinaute ou l’internaute. Pour que la navigation dans une interface web/mobile (le point de contact entre l’utilisateur et le produit) soit agréable et efficace. L’UI Designer devra élaborer une stratégie pour optimiser son interface. Il sera tenu de découvrir les exigences et les souhaits de l’utilisateur. La relation avec le produit devra être pratique et fonctionnelle en vue de lui offrir une entière satisfaction, et d’explorer de nouvelles façons qui impliqueront certainement nos sens humains.  

Quels parcours développer pour obtenir une excellente ergonomie ?

Ce qui donne de la valeur aux contenus, c’est la qualité et l’accessibilité de la navigation. Ce sont deux règles fondamentales pour une meilleure structuration de l’interface. L’ergonomie vous facilitera l’utilisation et la manipulation d’un produit. Créer un design fonctionnel qui inspire la confiance permettra à l’utilisateur d’atteindre son résultat. La mise en place de la charte ergonomique d’un projet se fait généralement après avoir réalisé et validé quelques maquettes fonctionnelles. Pour respecter les normes standards des interfaces, la charte ergonomique est indispensable. Quant à l’Expérience Design, elle consiste à imaginer et à construire un site web, ou une interface, de manière à ce que la manipulation soit la meilleure possible. Les interfaces utilisateurs intuitives qui mettent l’accent sur une communication humaine sont plus efficaces, et en définitive, c’est une conversation entre les utilisateurs et la technologie. Des interfaces web bien conçues utilisent le langage de l’interface utilisateur pour communiquer efficacement, et naturellement avec les utilisateurs. Avec l’évolution des nouvelles interfaces, il faudra prendre en considération un large panel de tailles d’écrans et de résolutions (sites web responsives).  

Le principe de cohérence en UI design

La grosse difficulté pour l’UI design, est d’offrir une expérience utilisateur design logique entre toutes les pages du site. En effet, qu’importe la relation entre les pages, le ressenti utilisateur doit être dans une continuité partout sur le site. L’erreur en UI design serait que le style et les interactions changent radicalement ou même progressivement entre les anciens contenus et les nouveaux. Entre attentes et besoins, l’utilisateur du service web serait complètement perdu et risque de mal comprendre l’UI.

Quelques règles sur l’UI design à respecter

Vous comprenez maintenant bien toute l’importance de l’interface design d’un site web ou autre projet digital. Il est nécessaire d’avoir quelques règles de toujours progresser dans la bonne direction.

1. Partir toujours d’un utilisateur qui correspond à votre cible (vos personas) pour réfléchir au design de votre site. Un directeur artistique peut être d’une grande aide.
2. Garder une cohérence globale sur l’entièreté de votre site. Tous vos éléments graphiques doivent avoir un fil conducteur. C’est à la fois plus compréhensible pour l’utilisateur mais, aussi pour votre image de marque.
3. Garder à l’esprit le côté responsive et tactile pour votre UI. En effet, les utilisateurs mobiles ont dépassé les utilisateurs desktop, alors vous devez adapter votre UI à cette dimension.
4. Travailler ouvertement avec l’UX designer pour cibler les problématiques graphiques et trouver les solutions design. 
5. Ne pas hésiter à faire des ateliers de test and learn pour expérimenter vos design afin de se remettre en question constamment. 

Les différents styles de design

Le design d’interface n’a pas de style particulier, au contraire, il fait partie de l’univers du webdesign. Si vous naviguez sur différents sites web, vous serez surpris de la mixité des design. Que ce soit l’utilisabilité, le côté interactif avec le motion design ou encore le travail des différents gradients de couleurs les possibilités sont infini. Le Front-end sera très différent en fonction du secteur d’activité et des personnes ciblés par le service. S’adapter aux potentiels clients est l’objectif principal, le design doit lui aussi s’adapter.

L’Atomic Design

L’atomic Design est sans nul doute une méthode moderne de design. Brad Frost nous explique dans son livre « Atomic Design » que c’est une méthode utilisée par les développeurs depuis longtemps, et qu’il est pressant que les façons de créer une interface et les techniques de développement se rejoignent. L’atomic Design est un raisonnement du graphisme venant d’un livre que l’on a développé pour le web. Aujourd’hui, on ne conçoit plus des pages, mais des modules d’interface qu’il va falloir incorporer dans de petits environnements (smartphones et montres connectées) par exemple, aussi bien que dans de vastes contextes comme la télévision et le projecteur mural. Tout comme le Material Design, il ne faut plus penser en « pages » ou en « écrans », mais en une composition d’éléments modulaires.

Avantage de l’atomic design 

L’Atomic Design permet donc d’imaginer des interfaces en partant du plus petit élément de base : l’atome. Puis de structurer et construire le plus grand :  les molécules. L’atome, qui est un élément isolé, par exemple une image ou une icône, n’a pas de propriétés fonctionnelles. Il ne peut pas être fractionné et il compose la racine graphique de tous les éléments de l’interface utilisateur. Les molécules, quant à elles, constituent des assemblages d’atomes qui forment des composants de l’interface. Par exemple, le logo, le titre, le menu, et l’arrière-plan donneront l’en tête. Ainsi, tous les composants de l’interface présentent une unité harmonieuse. Dès lors, l’Atomic Design est une réflexion sur la construction d’interfaces selon une méthode dynamique, évolutive et vivante (l’atome).  

Inconvénient de l’atomic design

L’atomic design a pour but de mettre en avant une meilleure expérience utilisateur. Cette méthode semble difficile à mettre en place dans les grandes entreprises qui souhaitent une expérience similaire sur leurs différentes applications, logiciels et sites internet. De plus, cette méthode atteint forcément ces limites quand il est difficile de cerner les besoins ou les attentes des utilisateurs de l’application.

Material Design

Le Material Design est un type de design créé par Google axé sur la simplicité et l’interactivité. L’objectif est de mettre l’UI et l’UX au coeur des problématiques tout en fournissant aux développeurs des ressources afin de les aider à intégrer ce design.

Force du Material Design

Si je devais résumer les forces du Material Design en 5 points, ce serait : 

• La simplicité de ce design
• La compréhension logique de l’utilisation
• Les animations discrètes mais utiles 
• Les formes et les couleurs “less is more”
• Le côté mobile first

Faiblesse du Material Design

Au contraire, si je devais citer quelques effets négatifs ce serait plutôt :

• Les animations parfois mal comprises par l’utilisateur
• Le material design serait gourmand en énergie pour les mobiles
• Perte de productivité pour des users qui ont plutôt l’habitude avec des paramètres plus poussés 
• Un design qui cible moins certaines tranches de populations (+50 ans)

Neuomorphism Design

Ce design peut ressembler un peu au material design, mais tout en présentant certaines différences d’UI. Dans ce design, la mise en avant du réalisme des éléments est prioritaire. On parle de ce style comme le “Skeuomorphism 2.0” ou “encore Soft UI”, car il garde un aspect réaliste avec un aspect tout de même assez “Flat Design”

Les avantages du Neuomorphism design

Encore assez nouveau, le Neuomorphisme à déjà certains avantages : 

• Interface UI assez simple et réduite
• Éléments qui demandent des actions sont repérable rapidement
• Le développement du design serait assez simple 
• Un contrat de formes, de couleurs qui rend esthétiquement agréable

Les désavantages du Neuomorphism design

• Peu d’études d’UX sur le Neuomorphisme 
• Parfois trop “futuriste” ce qui peut exclure les personnes pas assez habitué aux nouveaux design UI
• Ce style est assez dur à utiliser et peu polyvalent pour être un style utilisé partout
• Il serait aussi très mauvais en accessibilité
• Essentiellement adapté aux interfaces mobiles
• Peu adapté aux contenu avec beaucoup de textes

Flat design 

Petit tour d’horizon sur le Flat Design, ce style minimaliste à été largement utilisé (encore aujourd’hui). Nous pouvons le retrouver assez souvent dans les interfaces web et mobiles. Alors quels sont les points de vigilance à associer à cette UI ? 

L’importance du Flat design pour votre UI

• Un effet minimaliste apprécié
• Centrer sur la fonctionnalité du produit
• Responsive design simplifié et clair
• Suppressions des éléments superflus ou sans intérêt 
• Optimisation du temps de chargement

Les possibles effets négatifs pour votre design

• Un manque cruel d’affordance, une compréhension complexe ou sans logique.
• Une utilisabilité assez limité
• Mise en avant de l’UI par rapport à l’UX
• Interaction moins logique et moins perceptible
• Design non adapté pour 100 % des projets

Pixel Art design

Assez peu connu car très tourné jeux vidéo et moins webdesign, ce style à eu quelques exemples de design intéressant pour des univers particuliers.

L’utilisation intelligence du Pixel Art dans votre UI : forces

• Un style très apprécié par certaines cibles
• La rareté du pixel art en fait un élément différenciant
• L’utilisateur est plongé dans un monde spécifique
• Les animations pixel sont appréciés

La mauvaise utilisation du Pixel Art dans votre UI : faiblesses

• Design utiles presque exclusivement “retro gaming”
• UI design assez vieux (mais qui peut être une force)
• Les animations n’apportent pas d’utilité UX
• Univers centré UI, mais pas du tout UX

line design

Le line design ou aussi nommé “thin line graphics” est apparu en même temps que le flat design, cependant avec beaucoup moins de succès. Comme son nom l’indique, ce design porte sur des dessins simpliste axé sur des lignes.

L’opportunité du Line design pour votre site

• Un design différent et ultra épuré 
• Des représentations vectorielles très claires
• Une suppression des éléments non-essentiels

Le risque du ligne design pour votre UI

• Un design presque trop épuré
• Une limite de compréhension par les usagers
• Un style qui se perd à cause de sa difficulté d’utilisation 

Quelles compétences maîtriser pour devenir UI Designer ?

L’UI designer est une évolution du poste de Web Designer. L’apparition de ce métier est la conséquence de la complexité graphique des pages internet. Le progrès et l’interaction des plateformes web et mobiles en sont aussi des raisons. L’UI designer améliore et rend plus intuitive l’interface utilisateur. La navigation web est donc tenue d’être plus facile. Il doit aussi répondre à des règles de design et se conformer à la charte graphique. Le travail sur l’interface utilisateur permet d’apporter des changements favorables à l’expérience utilisateur. Afin que les éléments visuels forment un ensemble cohérent avec les objectifs du site web ou mobile, l’UI mettra en valeur les textes, les éléments graphiques et les animations. Par la suite, il pourra travailler l’harmonie de tous ces éléments pour que les contenus soient en accord avec le design et la thématique du site. L’UI faisant partie de l’Expérience Utilisateur (UX), favorise l’amélioration du design dans l’intention de complaire aux utilisateurs en s’adaptant à leurs goûts, à leurs humeurs, et de leur donner envie de revenir. Le travail de l’UX et de l’UI Designer se confronte à différents supports, chacun possédant des particularités et des spécificités différentes. Par exemple, l’ordinateur, le smartphone, et les appareils connectés font apparaître différentes caractéristiques qui devront être prises en considération :

• La navigation qui peut être tactile ;
• la taille de l’écran ;
• la vitesse de chargement…

Finalement, devenir UI designer n’est pas un long fleuve tranquille. Il faut avoir des compétences de graphiste, savoir comment créer un projet web avec une identité visuelle précise ou encore avoir une vue globale de que les développeurs peuvent faire. Pour de nombreux cas, comme en freelance ou en agence, l’UI est fusionné avec l’UX. Cela permet un mixte de compétences déjà très proche pour une vision globale puissante. Enfin plus les  connaissances des métiers du web est forte, plus l’adaptabilité aux projet sera simple et performante. Il est évident qu’une personne qui sera baigné dans diverses compétences web, proposera une qualité du travail supérieur grâce à son vécu digital. La compréhension des  problématiques des autres services (marketing, SEO, etc..) ne sont alors que de simple paramètres à prendre en compte.

Les outils à maîtriser

InVision

Invision est un outil pour les designers d’interface qui permet la création de maquettes, de visuels, etc.. L’objectif est de proposer une représentation d’une web-app / application / site. Vous pouvez travailler sur vos projets à plusieurs, utile si vous avez des clients qui ont besoin de régulièrement voir les avancements.

UXPin

UXPin donne la possibilité de créer des wireframes les plus basiques jusqu’aux maquettes/prototypes animés. La force d’UXPin, c’est de proposer un outil fini avec les interactions ainsi que les transitions pour se rapprocher le plus possible de votre projet final.

Axure

Axure est utilisé pour la réalisation de prototypage et il est assez apprécié des UX designers. Après avoir créé votre projet, vous pouvez lancer des flux d’utilisateurs afin de tester l’interactivité, les fonctionnalités du prototype. Il est donc bien adapté pour réaliser les tests utilisateurs.

Sketch

Sketch est très utilisé par les graphistes et designers (mais disponible uniquement pour OSX). L’outil de maquettage et de design permet d’avoir un terrain d’entente entre UI designer / UX designers / développeurs. Une fois toutes vos maquettes prêtes et validés, vous pouvez exporter vos maquettes en code pour simplifier l’intégration par les équipes de développements. 

Figma

Figma est un outil d’UI certes, mais il axe beaucoup de sa stratégie sur le côté collaboratif. Cet outil gratuit propose de réaliser des design via une interface claire et de collaborer à plusieurs directement dans l’outil. Cela permet de proposer des améliorations et accélérer les retours. 

Adobe XD

Fameux outil de design de la suite Adobe, Adobe XD permet la création et la modification de prototypes à plusieurs. L’objectif de l’outil est d’être rapide, qualitatif et avec une rapidité d’exécution intéressante. Spécialement créer pour les désigner, de nombreux outils sont proposé pour travailler plus efficacement. 

Illustrator

Illustrator fait lui aussi partie de la suite Adobe, un peu moins intéressant pour créer des maquettes, il permet toutefois d’éditer simplement des images vectorielles, des graphiques, etc.. Avec une petite touche d’interactivité sous le format adapté à votre besoin. 

photoshop

Photoshop aussi fait partie de la suite Adobe, autrefois utilisé pour du zoning, du wireframe, etc.. Il est maintenant délaissé pour les outils plus spécifique de la suite. En effet, Photoshop va plutôt aider à la retouche d’image précise pour adapter les illustrations type photographie / gif etc.. 

Principle

Principle est un outil de prototypage axé IOS pour rapidement faire des embryons d’UI en y ajoutant des interactions, etc.. Sa force est la précision des interactions utilisateurs avec les multiples choix de gestes de l’utilisateur sur l’écran. Vous pouvez ensuite tester ça rapidement comme application IOS

Wireframes 

Le Wireframe ou le schéma fonctionnel est une étape obligatoire. En effet, ce maquettage assez flou va permettre de comprendre les contraintes techniques pour la création de site ou la refonte par exemple. Très peu d’informations sont présentes dans ce wireframe, le template est donc facilement modifiable pour la formalisation des besoins. Par exemple, sur un site média numérique le mélange UX/UI présentera sûrement plus de problématiques qu’un site type outil en ligne géré par un développeur. Pour chaque cas, le schéma fonctionnel doit être réfléchie avec l’aide de UX design afin de laisser une marge d’erreur la plus petite possible.

Maquetting 

Du Wireframe au templating nous entamons une grosse phase design. Maintenant que nous avons une bonne visualisation des éléments sur la maquette, il faut l’habiller. Une énorme réflexion devra être prise concernant : 

• Les icônes
• Les mockups
• Les fonts (écritures du site)
• Le choix des couleurs
• Le guide de style graphique pour le long terme
• L’interactivité des éléments du prototype
• Les choix des visuels / images / vidéos 
• Le responsive design et ses spécifications

Après avoir évalué tous ces éléments, certains besoins ergonomiques et d’UI UX doivent encore être analysé.

• Est-ce que le design thinking correspond aux attentes de l’interface web ?
• Est-ce que la décoration créative du site est trop ou pas assez poussé ?
• Est-ce que le cahier des charges est rempli à la lettre ?
• Est-ce tous les éléments permettent à l’intégrateur de respecter les choix design ? 

Enfin, il faudra évidemment tester l’ensemble des choix pour une validation finale ou bien pour des modifications. Mettre l’utilisateur au centre du projet sera peut-être le plus compliqué, en effet, les collaborateurs du projet auront toujours une idée une envie de changer quelque chose. Pensez utilisateur et non pas collaborateur ! Une règle importante pour la viabilité du projet ! 

Soft skills 

Quels sont les soft skills les plus appréciés par les entreprises pour les UI designer ? 

• Un esprit créatif
• Une communication facile 
• Une bonne culture du Web
• Une empathie importante
• Une bonne gestion des contraintes techniques

L’UI designer doit avoir de nombreuses idées créatives pour proposer des créations sous différents supports. Sa communication orale, pour expliquer ses choix doivent aussi passer par une bonne communication visuelle. 

Hard skills

Quels sont les Hard skills sont les plus recherchés par les entreprises ? 

• Bonnes notions de développeurs ( CMS / coder / html css)
• Sociologie humaine (utile pour les tests utilisateurs)
• Maîtrise des compétences de graphisme (et des outils de graphiste)

L’UI designer doit avant tout savoir réaliser des créations design réfléchies et avec des notions de psychologie du webdesign. Sa compétence à comprendre et coder permet aussi une forte implication avec les développeurs et les intégrateurs afin de simplifier les processus. Ces notions de codes sont en général apprises sur des formations courtes ou alors avec un mastère.

Les plateformes de prototypage

Pour un gain de temps considérable, toutes les personnes chargées de créer des produits, de nouveaux concepts graphiques et/ou publicitaires ou d’interface utilisateur peuvent utiliser de nombreux outils disponibles en ligne. Pour la phase de développement, trouver une bonne plateforme de prototypage pour la conception d’interfaces utilisateurs présentent un réel avantage. La diversité des applications disponibles sur la toile est sans mesure. Sur ces plateformes en ligne, un grand nombre d’applications vous permettront d’utiliser des transitions dans le développement de votre création, et de naviguer de façon pratique dans votre appli ou votre site web. Les interfaces sont bien pensées, et permettent au concepteur de créer des mises en pages modulables et adaptables par glisser-déposer (drag-and-drop) dans le projet. À partir de zéro, vous pourrez ajouter n’importe quel élément par le biais d’outils et d’options graphiques pour composer une architecture interactive qu’il sera possible de réutiliser. Concevoir de petites interactions qui reflètent l’ensemble des réactions objectivement observables des utilisateurs et ajouter des transitions dynamiques entre les différents écrans de votre projet seront d’une facilitées déconcertante. Certaines applications en ligne convertissent des images, ou des pages Web entières. Ces outils de conversion concilient donc simplicité et efficacité pour le travail des concepteurs afin de produire un résultat utile. Composer une palette de couleurs harmonieuse est un travail qui pourrait être complexe. Des aides en ligne peuvent être utiles pour imaginer une palette de couleurs cohérente et homogène. Il suffira de copier les codes HEX ou RGB nécessaires en vue de les insérer à votre projet de conception. Pour construire un design à vous couper le souffle, vous aurez besoin d’un brainstorming. Développées pour faire naître des idées, les applications de brainstorming mettront en évidence les détails qui ont de l’intérêt et de la valeur. Pour finir, lorsque votre conception sera terminée, les tests utilisateurs seront de bons moyens pour affiner les améliorations de votre projet. Des candidats testeront et laisseront des commentaires pour que vous puissiez améliorer votre projet.

Les formations pour devenir UI designer

Pour réagir aux besoins des utilisateurs et leur assurer la qualité d’une expérience intuitive, l’UI designer se charge de la conception de l’ensemble de l’interface, de la fluidité de navigation ainsi que de l’optimisation des parcours. De même, il s’occupe de la valeur des contenus, des éléments graphiques et textuels. Des connaissances en programmation, en graphisme et en infographie sont nécessaires pour devenir UI designer. Un BTS design graphique et un master en arts sont conseillés pour débuter dans ce domaine. Issu d’une formation digitale, l’UI Designer fait la plupart du temps ses premiers pas en webdesign ou en marketing. Connaître les caractéristiques techniques des logiciels de création vectorielle et bitmap (comme Illustrator, Photoshop, ou InDesign de la suite Adobe) et des outils pour la création de maquettes, de prototypages sont bien sûr nécessaires. Pour le web, une parfaite maîtrise des langages HTML est assurément requise. Le salaire de UI designer varie généralement entre 35 k€/an et 60 k€/an. Face à l’évolution des technologies, les entreprises recherchent pour renforcer leurs équipes des UI designers. Les perspectives d’avenir sont fréquentes et les plus talentueux auront donc davantage de chances d’être recrutés. L’UI Designer pourra par la suite évoluer vers la profession de chef de projet, ou de directeur artistique.

Etude sur les conditions de travail des UI designer

Il est intéressant de voir que les ui designers sont une profession majoritairement masculine, jeune, salarié, travaillant en agence, habitant paris et ayant niveau d’étude élevé (bac+4). Comme pour tous les emplois, il existe de nombreuses inégalités dans les salaires des UI designers. Selon, la taille, l’expérience et la géographie de l’entreprise, un salarié peut voir sa rémunération être 30% inférieur à la moyenne ou 30% supérieur à cette dernière. Mais, selon le site Glassdoor, un ui designer gagner 39 212 €/an en moyenne et jusqu’à 61 000€/an.

Comment identifier et apprendre l’interface utilisateur ?

Si vous êtes à court d’idées et que vous souhaitez créer des interfaces utilisateur esthétiques, et pratiques, des sites web peuvent vous inspirer pour vous donner plus de créativité. Vous pourrez capturer les pratiques d’interface utilisateur qui ont un plus haut degré de qualité et des idées réutilisables en tant que modèles de conception. Des livres traitant ce sujet peuvent aussi mettre à votre disposition de bonnes stratégies pour vous aider à séduire et à maintenir leur attention. Ainsi, vous apprendrez les principes de base pour la conception d’interfaces web efficaces, et d’interactions sur tous les types d’appareils mobiles. Il sera productif de tenter de savoir ce que présentent vos concurrents et les modèles de design que l’on peut trouver actuellement sur le web. Vous découvrirez vraisemblablement des conceptions qui peuvent être utilisées autrement pour votre propre projet graphique, et apporter de nouvelles sources de modèles qui permettront de reproduire la forme, les dimensions, les couleurs, etc. Nous vous proposons en fin d’article des solutions concrète pour accéder à des ressources pertinentes sur l’interface utilisateur.

Conséquence logique

Aujourd’hui, énormément de sites internet et d’applications mobiles sont disponibles, et votre créativité doit capturer les utilisateurs de manière immédiate. Présentement, avec la disponibilité de toutes ces plateformes,  passez de l’imagination à la création devient un jeu d’enfant. L’UI sera votre allié pour être différent entre toutes les plateformes web et vous distinguera clairement de la masse. La recrudescence des compétences d’User interface sur les demandes d’emploi, prouve encore une fois la nécessité de laisser apparaitre une identité graphique propre et claire. Plus le temps passe et plus cette compétence d’UI prend une importance capitale au sein des différentes entreprises. Si l’UI et l’UX sont très recherchés c’est que la multiplication des offres et des services sont de plus en plus concurrentiels. Elles permettent de proposer un service performant, simple d’utilisation et graphiquement agréable. Ces différents atouts permettent de se positionner plus chère que ses concurrents pour le même service grâce à la plus-value de votre interface graphique et votre travail d’UX. Sinon, vous pouvez vous aligner sur le prix de vos concurrents et démarcher leurs clients pour voler le plus de parts de marché car vous aurez un avantage concurrentiel imparable.

Comment rester un bon UI designer ?

Devenir un bon UI designer est dur, mais le rester ça l’es tout autant ! Au cours des divers chantier impliquant l’interface utilisateur, l’UI designer évoluer. Garder au coeurs de ses projets les utilisateurs, penser à l’ergonomie parfaite, garder en tête le côté responsive notamment avec les mobiles app.. Chaque UI designer semble suivre sa propre voie sur l’UI design, en effet certains deviennent plus compétent sur le story telling de l’image et le parcours utilisateur. D’autres se rapprocheront du poste de chef de projet webdesign permettant de piloter au mieux les stratégies. Finalement, les compétences continuent à évoluer pour l’UI design, malgré les agrégations de nouvelles compétences métier, l’approche centrée utilisateur et l’ergonomie cognitive reste le pilier de l’UI ! 

Pour rester bon et au goût du jour, il est important de garder une veille globale sur le web, mais aussi sur son propre métier. Nombreux sont ceux qui n’hésitent pas à reprendre une formation en design pour se replonger dans les bases de l’ergonomie web. Apprendre n’est pas un sprint, mais un marathon. C’est pourquoi il faut prendre le temps d’apprécier les opportunités d’apprentissage qui s’offre à chacun. 

Pour l’UI design, il n’y a rien de mieux que de créer soit même sa expérience librement. C’est pourquoi, nous retrouvons des sites WordPress avec des designs incroyables mélangeant des compétences de design, de référencement naturel, de conception graphique spécialisé, de notion d’e-commerce etc… Autant de possibilités qui reflètent les expériences et le vécu de chaque professionnel.

Pour rester bon dans son domaine, il n’y a pas de secret : 

• Une veille performante et adaptée à ses besoins
• Un espace de travail personnel pour réaliser du test and learn
• Se former en continu pour rester au goût du jour.

Les tendances en ui design

Je trouve que 2021 présentera plusieurs tendances d’UI design. Déjà votre site internet doit être lui-même un support de communication mélangeant arts graphiques et une mise en page propre. Autre point, votre communication graphique doit passer outre uniquement vos illustrations, ainsi qu’avec les interactions de votre page. Vos design et surtout la base de la maquette de votre site doit être agile pour évoluer en fonctions des tendances et des besoins de l’entreprise. En 2020, nous voyons des styles vraiment intéressant englobant un univers. Outre juste des couleurs, des formes, ou simplement une typographie personnalisée, l’UI design englobe entièrement un style propre pour faire voyager les usagers.

Voici les 6 tendances majeures qui se dessinent fortement pour le futur :

• Le minimalisme, less is more. Il faut savoir sublimer l’existant et faire comprendre les informations à l’internaute afin de diriger ses intentions. Moins de quantité, pour une meilleure compréhension.
• L’animation, proposer des interactions est fondamental. Outre le simple effet “Wahou”, il permet de rendre vivant votre site tout en le dynamisant. Vous permettrez d’impliquer plus l’internaute, ce qui peut être décisionnaire dans un acte d’achat.
• L’expérience tactile, le mobile encore et toujours le mobile ! Cela doit être une priorité ! Que ce soit à cause du SEO avec le mobile first index ou parce que les internautes mobiles sont plus nombreux. Dans les deux cas priorisez une version mobile si cela correspond à votre cible. 
• La personnalisation, proposer la bonne interaction ou le bon design. Il est possible d’ajouter de l’UI en fonction de l’utilisateur, cela demande beaucoup d’effort, mais en même temps cela permet d’impliquer l’utilisateur et lui donner plus de confiance. Un site qui s’adapte à nos besoin, n’est-ce pas merveilleux ? 
• La réalité augmentée, buzzword ou idée de génie ? Le travail qu’implique cette décision est extrêmement complexe car le coût est particulièrement élevé. Cependant dans de nombreux sites e-commerce, l’AR permet de tester en ligne directement un produit. Soyez sûr que votre consommateur sera ravi et passera à l’achat plus facilement.
• L’espace , pourquoi tout le monde souhaite coller ses éléments ? C’est une erreur ! L’espace fait aussi partie de l’UI design ! Il permet à l’utilisateur de respirer, d’avoir une sensation de calme. Les espaces vont permettre de diriger plus simplement l’utilisateur.
• La 3D, elle est de plus en plus présentes sur les sites des meilleures startups. La 3D propose un vrai “wahou”. Par contre, ces illustrations consomment énormément de ressources.

Comment trouver des ressources UI ?

Si vous souhaitez trouver de l’inspiration ou des conseils pour de l’User interface, Vous avez plusieurs solutions. La première solution est d’acheter des livres. Cette solution peut sembler un peu Oldschool pourtant, les livres représentent une mine d’informations essentielles qu’on ne peut avoir seulement avec des articles du web.

Les livres

Voici le top 3 des livres UI / UX que je vous recommande :

• Responsive Web Design, mises en page et grilles – Les techniques modernes de conception web. Livre de 2017 assez récent qui démontre les problèmes de compatibilités, les nouvelles techniques de mises en pages etc.. Ce livre intègre aussi des notions d’UX.
• The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques. Ce livre est en anglais et date de 2007 pourtant, il prend bien en compte les difficultés d’UI que nous avons de nos jours.
• Interactive Design for Screen – 100 Graphic Design Solutions. Ce livre est un mélange d’UI et d’UX pour permettre une meilleure compréhension de ces deux domaines. De l’importance du graphique à la navigation utilisateur, ce livre est ultra complet.

Les comptes Instagram à suivre

Si vous êtes moins lecture de livres, vous avez aussi d’autres possibilités comme vos réseaux sociaux préférés. Sur Instagram, vous avez de nombreux comptes qui proposent de l’inspiration et des idées. Voici 3 grandes comptes ui design à suivre :

• ui_lab
• uidesignpatterns
• ui.mob

 

Les hashtags à suivre sur Instagram

Vous pouvez  diversifier le contenu que vous allez avoir en suivant plutôt un ou plusieurs hashtags tel que :

• #UIUX
• #dailyui
• #ui

Sur LinkedIn et Facebook, des pages spécifiques sont aussi disponibles sur le sujet, vous pourrez même discuter avec d’autres utilisateurs pour apprendre davantage. Pour finir, si vous souhaitez en faire votre métier, vous pouvez toujours vous former en ligne ou bien avec des formations certifiantes par exemple. Mais les prix des formations peuvent varier de 1000 à plus de 3500 euros en fonction du temps de formation etc…

Exemples de sites intéressants en UI design

Malgré toutes ces ressources, vous voulez voir du concret ? Des intégrateurs créatifs ? Voici des exemples que peuvent proposer en portfolio certains designers web ou entreprises connues pour l’user experience et l’interactivité.