Décryptage

Les clés pour dynamiser votre interface avec l’UI design

Le 8 novembre 2018

Par Colline Marabese, assistante chef de projet

Partager cet article

La première chose à savoir sur l’UI (User Interface), c’est qu’elle est indissociable de l’UX. Elle constitue la deuxième phase du processus de création de tout support (site internet, application mobile, etc.), la première étant l’aspect fonctionnel matérialisé par l’UX.

Pour faire simple : si l’UX est un produit, l’UI correspond à son packaging. L’UI désigne tout simplement l’enveloppe graphique des composants d’une interface.

Après vous avoir dévoilé les tendances UX du moment, c’est au tour des tendances UI d’être passées au crible pour que votre veille graphique soit irréprochable.

Un habillage graphique efficace

Le Material Design pour aller droit au but

Il y a quelques années, on passait du Skeuomorphisme (un nom un peu barbare pour désigner un mode de représentation mimant nos objets du quotidien pour conceptualiser une interface) au Flat Design (en français « design plat » se traduisant par une simplification drastique des icônes en se concentrant sur l’essentiel afin d’éviter une trop grande charge cognitive auprès de l’utilisateur).

Voilà qu’on passe aujourd’hui du Flat Design au Material Design, une tendance tout droit issue du Flat Design à laquelle on a ajouté une touche de profondeur (sans pour autant repasser au Skeuomorphisme, rassurez-vous !). Les contenus digitaux ont alors été enrichis d’ombres pour créer de la profondeur dans l’interface, d’animations pour rendre l’interface fluide et naturelle dans son utilisation (vous savez, comme le produit sélectionné qui saute dans votre panier), etc.

Des effets attrayants

Capter l’attention à tout prix !

Tous les moyens sont bons pour attirer l’œil de l’utilisateur :

  • Des couleurs vives et acidulées pour se démarquer des sites plus traditionnels et faire en sorte que votre site marque l’utilisateur
  • Des dégradés plutôt que des aplats pour donner plus de personnalité à des fonds ou pour donner du caractère à une image.
  • Des motifs à formes abstraites, organiques ou géométriques pour créer du mouvement
  • Des ombres portées pour donner une impression de profondeur

Ces procédés viennent rythmer les compositions graphiques et enrichir l’expérience visuelle de l’utilisateur sur un support.

Illustration

Le titrage comme élément graphique

Des typographies plus assumées

Depuis quelques temps, nous utilisons de plus en plus de typographies plus travaillées : rondes, grasses, voluptueuses, à empattements, etc. Leur utilisation permet d’affirmer une identité visuelle singulière et assumée.

Ce type de police d’écriture est notamment utilisé pour la hiérarchisation des titres : elles marquent une réelle rupture entre les titres et le contenu, apportant ainsi un rythme et facilitant la lecture.

Grâce à l’évolution de la qualité et de la résolution de nos écrans, nous avons par exemple pu observer une plus large utilisation des typographies à empattements. De meilleures résolutions d’écran ouvrent donc de nombreuses possibilités en termes d’UI, mais aussi en termes de positionnement pour une marque (les typographies à empattement peuvent connoter un positionnement haut de gamme, par exemple).

La typographie devient alors un élément pictural, un composant graphique à part entière, au même titre qu’un visuel, par exemple.

Un menu plus accessible

La Tab Bar comme alternative au menu burger

Le menu burger, généralement matérialisé dans son iconographie par 3 barres empilées horizontalement, est majoritairement utilisé sur les interfaces d’applications mobiles ou tablettes. Alors qu’il a d’abord rencontré un franc succès dû au peu de place qu’il prenait et aux grandes surfaces libres qu’il laissait sur l’interface, il est aujourd’hui remis en question. Les webdesigners s’interrogent sur l’avenir de ce menu, parfois incompris des utilisateurs qui ne le perçoivent pas toujours comme un outil de navigation.

Facebook, Youtube ou encore Spotify ont donc abandonné le menu burger dans leurs applications au profit de la Tab Bar. La Tab Bar désigne un menu situé en haut ou en bas de l’écran dont les rubriques sont matérialisées par de petites icônes. La Tab Bar constitue une alternative solide au menu burger, en étant bien plus accessible et intuitive pour la navigation. Selon un article de TechCrunch, Spotify a d’ailleurs constaté une augmentation de 30% de clics sur les items du menu depuis son adoption de la Tap Bar.

Cependant, alors que l’abandon de ce menu sur les applications est relativement facile, ce n’est pas le cas pour les sites web qui ont une arborescence bien plus difficilement adaptable aux Tab Bars.

Résumer une idée efficacement

Des illustrations pour dynamiser le contenu

Les illustrations se démocratisent de plus en plus dans le secteur du numérique depuis quelques années. Même les illustrations les plus simples, comme le Flat Design, peuvent représenter une idée ou faire passer un message de manière très précise et très efficace (les infographies, par exemple).

Ces illustrations, si elles sont créées sur-mesure, peuvent même s’inscrire dans la continuité des autres supports de communication d’une entreprise en s’intégrant à sa charte graphique.

Par ailleurs, les illustrations permettent de créer du rythme dans une page : alterner contenu et illustrations rendra la page plus « vivante » et la lecture bien plus agréable à votre cible.

On ne vous a pas menti : UX et UI vont de pair. Les tendances UI évoluent au gré des tendances UX qui, elles-mêmes, évoluent en fonction des nouveaux usages. Comme pour l’UX Design, l’utilisateur est au centre de la conception UI. L’enjeu consiste à créer une interface fonctionnelle qui suscitera une émotion particulière et qui inspirera confiance.

Nos designers suivent ces tendances de près, voire en anticipent certaines, de manière à proposer des interfaces à la fois fonctionnelles, agréables et actuelles.

Illustration

Démarrons ensemble

L'UI design au cœur de nos préoccupations

Notre agence accorde une attention toute particulière à la création d’interfaces qui séduiront vos utilisateurs et qui rempliront vos objectifs. Nos experts en UI sauront comprendre votre besoin et le transformer en une interface singulière qui respectera les tendances du web. Contactez nos consultants à Strasbourg, Paris, Lyon ou Aix Marseille pour en discuter !

Nous confier un projet

Projets

Nos réalisations

Airbus

Airbus - Aéronautique

Airbus - Aéronautique

Fusionner deux sites web Airbus en mettant l'utilisateur et la génération de leads au centre de la conception

UI / UX DesignCadrageUX ResearchStrapiAudit ergonomique/UXAccompagnement stratégique

Majeur•e•s

Majeur•e•s - Culture

Majeur•e•s - Culture

Concevoir le 1er annuaire inclusif des professionnel·les de la musique et lutter contre les inégalités de genre

UX WritingWordPressUI / UX DesignReact JSAteliers co-conceptionBenchmark UXTests utilisateurs

Maisons Vivalia

Maisons Vivalia - Construction

Maisons Vivalia - Construction

Se démarquer de la concurrence grâce à un configurateur de maisons immersif

Ateliers co-conceptionWordPressIdentité visuelleRecherche utilisateurAudit ergonomique/UXUX WritingStratégie éditorialeUI / UX DesignBenchmark UX

Liebherr Électroménager

Liebherr Électroménager - E-commerce

Liebherr Électroménager - E-commerce

Digitaliser la vente en direct par la création d’un site e-commerce haut de gamme

UX WritingSymfonyAudit ergonomique/UXE-commerceAteliers co-conceptionUI / UX DesignAudit des datasStratégie éditorialeExpérience client (CX)Benchmark UX

Nos compétences créatives

Pour vous accompagner

atelier-co-conception

Ateliers de co-conception

Faire émerger des solutions innovantes pour créer ensemble un produit « qui marche ».
En savoir plus
prototypage

Prototypage et tests

Évaluer les performances de votre solution et tester son efficacité sur un prototype interactif.
En savoir plus
ux-writing

Rédaction UX et SXO

Communiquer efficacement avec vos cibles en utilisant les bons mots et le bon ton.
En savoir plus
design-system

Design system

Harmoniser vos supports digitaux grâce à une charte graphique solide et efficace.
En savoir plus
desing-interface-ui

Design d'interface (UI)

Produire le design de vos interfaces utilisateurs et créer une expérience émotionnelle positive.
En savoir plus
design-interaction

Design d'interaction (IxD)

Favoriser le dialogue entre vos utilisateurs et votre produit pour maximiser l’engagement.
En savoir plus

L'agence

Découvrir
adeliom-agence

Nos réalisations

Découvrir
adeliom-realisations