UX, UI, quelle est la différence?

5 Avril 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 en 3 phases :

Steps of the different steps that follows a UX designer

 

PHASE D’ANALYSE

Difference UX UI design - Phase d'analyse
Lors de 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és, 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…).

Exemples de missions  :

  • État de l’art
  • Benchmark
  • Persona ou proto-persona


PHASE DE CONCEPTION
Idéation 

Difference design UX UI - Phase de conception

L’idéation est le processus d’émergence d’idées. L’être humain étant plus créatif en groupe qu’individuellement, il s’agit plutôt d’organiser des ateliers avec des designers UI, développeurs, chefs de projets, et autres acteurs du projet, afin de 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 par la suite.

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 ?

Exemples de missions  :

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

PHASE DE TEST

 Difference design UX UI - Phase de test

Pendant cette phase, le designer UX décèle les différents points de friction 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.

Exemples de missions  :

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

Les missions du designer UI

Différence design UX UI - phase conception

{: .center-content}

 

Il agit également en 3 phases : 

ux ui design quelle difference ?

CONCEPTIONDifférence UX UI - phase de 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.

Exemples 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.

Exemples 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.

Exemples de missions  :

  • Prototype
  • Transitions
  • Micro-interactions

Start-up, grand groupe, 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 vos objectifs. Contactez-nous !