UX, UI, quelle est la différence?

29 Mars 2019

Le design d’expérience utilisateur n’en étant qu’à ses balbutiements en France, les métiers de designer UX (eXpérience Utilisateur) et designer UI ( Interface Utilisateur) sont encore fréquemment confondus. Pour éclaircir les choses, nous vous proposons un article bref mais concis sur les missions de chacun.

Précisons les bases. Une interface lie l’humain et la machine en leur permettant de communiquer par lorganisation d’éléments graphiques et textuels. Pour faire simple : par le design.

Si l’amalgame est fréquent, ce n’est pas par hasard : les deux experts visent un objectif commun, celui d’optimiser l’interface utilisateur. Ce n’est que par leurs moyens d’action (leurs missions) qu’ils se dissocient.

Les missions du designer UX

Le designer UX maîtrise un ensemble de méthodologies pour connaitre l’utilisateur final puis étudier la qualité de l’expérience utilisateur.

Il agit donc en 3 phases :

 

PHASE D’ANALYSE

Pour la phase d’analyse, l’UX designer devient à la fois enquêteur et sociologue, voire même psychologue. Pour commencer ses recherches, il collecte des informations auprès des utilisateurs ou du service. Cela passe notamment par des observations sur le terrain (shadowing, fly on the wall…), des entretiens individuels, des workshops (warm up, achat de fonctionnalité, focus group, value proposition design) et des travaux de synthèses (personas, états de l’art, rapports d’études, résumé de données analytiques…).

Example de mission  :

  • États de l’art
  • Benchmark
  • Persona ou proto-personna

PHASE DE CONCEPTION

Idéation 

L’idéation est le processus d’émergence d’idées. L’être humain étant plus créatif en groupe qu’individuellement, il s’agira plutôt d’organiser des ateliers avec des designers UI, développeurs, chefs de projets, et autres acteurs du projet, afin générer un grand nombre d’idées innovantes.

Ce tourbillon d’idées permet ainsi de choisir les idées les plus convaincantes et pertinentes pour les développer.

Design

La mise en forme d’une interface, peu importe sa nature (site web, application…), nécessite de hiérarchiser les données. Le designer UX va donc concevoir notamment une arborescence, un user flow, des wireframes, un prototype, etc. C’est à ce moment qu’il travaille en relation étroite avec le designer UI.

Il se met à la place de l’utilisateur et imagine des scénarios possibles d’utilisation : que va-t-il faire lorsqu’il arrive sur la page d’accueil ? Où va-t-il cliquer ? Que cherche-t-il ?

Example de mission  :

  • Brainstorming
  • Tri de carte
  • Achat de fonctionnalité
  • Spécifications fonctionnelles
  • Arborescence
  • User journey
  • Six-to-one
  • Crazy Eight
  • User flow
  • Crash test
  • Wireframes
  • Prototype

 

PHASE D’ÉVALUATION

 

Pendant cette phase, le designer UX décèle les différents points de frictions des utilisateurs et tente de comprendre leurs attentes et objectifs. Il met donc en place, par exemple, des tests d’utilisabilité, des questionnaires, des entretiens, de l’A/B testing, des audits ergonomiques.  À l’issue de ces travaux, l’équipe pourra itérer rapidement pour optimiser l’interface.

Example de mission  :

  • Guerilla testing
  • Questionnaires SUS
  • Tests d’utilisabilité
  • Thinking aloud
  • UX KPI
  • Perfection game
  • Audits ergonomiques

Les missions du designer UI

Le rôle du designer UI est de mettre en place des méthodes de design pour concevoir des interfaces à la fois structurées, cohérentes et élégantes. C’est lui qui va utiliser les logiciels de création comme Sketch, Adobe XD, InVision…

Il agit également en 3 phases : 

UI design Schema

 

CONCEPTION

Avant de commencer à concevoir des écrans, le designer UI va se nourrir des travaux du designer. Ils vont travailler ensemble pour s’accorder sur des wireframes. De son côté, le designer UI va aussi réaliser un moodboard, planche tendance qui servira de base lors de l’élaboration du Design System.

Exemple de missions :

  • Architecture de l’information
  • Moodboard
  • Wireframes

MAQUETTAGE

Le designer UI possède une culture visuelle forte qui va de la colorimétrie, à la typographie, en passant par la composition et l’esthétique. Ces qualités lui permettront de créer des interfaces modernes et efficaces. Il prendra aussi en compte les bonnes pratiques en termes de responsivité, d’accessibilité, de charte graphique… C’est lui qui mettra à disposition les maquettes graphiques aux développeurs lorsque celles-ci seront prêtes.

Exemple de missions :

  • Design system
  • Maquettes graphiques
  • Déclinaisons responsive

PROTOTYPAGE

Une fois les maquettes terminées, le designer UI crée un prototype grâce à des logiciels comme Flinto ou InVision. Sans développement, cela permet au client de naviguer sur son produit, et au designer UX de réaliser les premiers tests d’utilisabilité. C’est aussi à ce moment que le designer UI va concevoir les effets de transition et les éventuelles micro-interactions.

  • Prototype
  • Transitions
  • Micro-interactions
     

Start-up, grand groupes, vous avez un projet de site ou d’application ? Vous souhaitez présenter une version MVP (Minimal Viable Product) à des investisseurs ? L’équipe design de Beyowi choisira pour vous les missions les plus adaptées à votre projet pour vous accompagner dans votre objectif.