B1 · Episode 6 · 5:05
Camille, UI/UX designer (6): Explaining UX, UI, and A/B testing
Camille distinguishes UX (structural planning, like house blueprints) from UI (aesthetic implementation), and explains A/B testing as a method to validate design effectiveness by comparing two live versions with real user interactions.
Source：Qu'est-ce que Tu GEEKes ? · License：CC BY-SA 4.0
Transcript
Chouette, merci beaucoup Camille.
Great, thank you very much Camille.
Merci à vous. Hop hop hop, ne partez pas.
Thank you. Hop hop hop, don’t leave.
Du jargon informatique s'est glissé dans cette interview, notre invitée vous
Some IT jargon has slipped into this interview; our guest will explain everything to you
explique tout.
explain it all.
Ça veut dire quoi UX design?
What does UX design mean?
Alors UX design, c'est le design de l'expérience utilisateur,
UX design is user experience design,
donc ça va être tout ce qui va être.
so it covers everything that will be.
Les prototypes en fait des pages, comment on agence les contenus sur une page,
the prototypes—actually, of pages—how we arrange content on a page,
où est- ce qu'on définit la place d'un bouton, où est- ce qu'on définit la place
where we define the position of a button, where we define the position
d'un texte sur une page,
of text on a page,
pour faire en sorte que l'expérience de l'utilisateur soit optimale et que ce soit
to ensure the user experience is optimal and it’s not difficult for them to find
pas difficile pour lui de chercher les informations dont il a besoin sur un site ou
the information they need on a website or
une app. Ou d'ailleurs sur des produits physiques également,
an app. Or indeed on physical products as well,
c'est pas que digital.
it’s not just digital.
Ça veut dire quoi UI?
What does UI mean?
Alors UI pour le coup, c'est plutôt tout ce qui va être interface,
So UI, in this case, is actually everything related to the interface,
donc UI c'est interface utilisateur, donc ça va être une fois qu'on a défini en fait
so UI stands for user interface—meaning, once we’ve actually defined
le placement de tous ces éléments sur cette page, le but c'est de faire en sorte que
the placement of all these elements on this page, the goal is to ensure
la navigation, elle soit aussi esthétique et fluide.
navigation is both aesthetically pleasing and smooth.
Et donc on va rajouter en fait une couche, en fait c'est comme si
And so we’ll actually add a layer—essentially it’s as if
j'ai une métaphore qui est
I have a metaphor that
pas mal pour UX/ UI, c'est de se dire que bon en fait le UX,
works quite well for UX/UI: think of UX as
ça va être quand vous construisez une maison, ça va être les plans,
when you build a house, it’s the floor plans—
où est- ce que vous comptez placer les meubles, donc où est le salon,
where you plan to place furniture—so where the living room is,
où est la chambre, où est- ce qu'on met le canapé dans le salon,
where the bedroom is, where the sofa goes in the living room,
où est- ce qu'on met la lampe à côté du canapé, voilà.
where the lamp goes beside the sofa—exactly.
Donc c'est vraiment placer tous les éléments et savoir comment on va circuler entre
So it’s truly about placing all elements and knowing how one moves between
les pièces, donc là sur la page, et le UI ça va être en fait quelle peinture on va
the rooms—so here, on the page—and UI is actually which paint we’ll use, which flooring we’ll use.
mettre, quel sol on va mettre.
which paint we’ll use, which flooring we’ll use.
Est- ce qu'on préfère du parquet ou de la moquette?
Do we prefer hardwood or carpet?
Voilà, c'est vraiment tout ce qui va être plutôt lié au ressenti et à l'expérience,
Here it is—this is truly all that will be more closely tied to perception and experience,
au ressenti, au sentiment qu'on veut transmettre à nos utilisateurs quand ils
to perception, to the feeling we want to convey to our users when they
naviguent. Ça veut dire quoi CMS?
navigate. What does CMS mean?
Alors les CMS, c'est des outils qui permettent, ça c'est Content Management System,
So CMSs are tools—that’s Content Management System,
donc de faire de la gestion de contenu automatisée.
so it means automated content management.
Donc c'est des outils, alors pour moi c'est une définition qui est un peu double
So they’re tools—well, for me, this definition is somewhat dual,
parce que j'entends parler de CMS pour parler des bases de données derrière que je
because I hear people refer to CMS when talking about the backend databases I’ll prepare to generate dynamic pages.
vais préparer pour avoir des pages dynamiques.
And then there’s the broader CMS,
Et puis il y a le CMS un peu plus
And then there's the CMS, a bit more
global comme on l'entend qui est WordPress qui permet justement de gérer des pages
global, as commonly understood—like WordPress—which precisely enables managing dynamic pages.
dynamiques. Du coup, pour revenir juste un peu en arrière, donc c'est des
So, circling back just a bit—these are platforms that allow creating content
plateformes qui permettent de créer des contenus
without needing to do all the design or coding—it’s pre-coded.
sans avoir besoin de faire tout le design, de coder, c'est pré- codé.
But consequently, this generates constraints—so it’ll be WordPress.
Mais du coup, ça génère des
But consequently, this generates
contraintes, donc ça va être WordPress.
constraints, so it’ll be WordPress.
Wix, Shopify, il y en a plein.
Wix, Shopify, there are many.
Ça permet à n'importe qui de pouvoir créer un site sans avoir les compétences
It enables anyone to create a website without having technical skills.
techniques. Par contre, ça crée des contraintes en termes de design,
However, it creates constraints in terms of design,
de ce qu'on aimerait faire sur la plateforme, on peut pas tout faire avec ces
regarding what we’d like to do on the platform—we can’t do everything with these tools.
outils- là. Et ça permet de gérer des pages dynamiques.
And it enables managing dynamic pages.
Donc en fait, on va ajouter du contenu dans ce qu'on appelle un back office,
So in fact, we’ll add content into what’s called a back office,
qui est une sorte de page d'administration, où on va mettre les contenus,
which is a kind of administrative page where we’ll input the content,
et puis derrière, ça va générer des pages avec
and then, behind the scenes, it will generate pages with
des contenus qui se mettent à jour tout seuls.
content that updates automatically.
Ça veut dire quoi PM?
What does PM mean?
Alors, c'est le product manager, donc c'est la personne qui va gérer le produit,
It’s the product manager—the person who manages the product,
le produit digital en l'occurrence, donc ça va être le
the digital product in this case, so it will be the
site ou l'app, et c'est en fait un métier qui est transverse,
which serves as a bridge between technical teams and marketing teams,
qui va faire le pont entre les équipes techniques, les équipes
and who essentially oversees everything.
marketing, et qui lui va chapeauter en fait.
and who essentially oversees everything.
qui sont vraiment entre ces deux équipes.
that truly exist between these two teams.
Alors je sais que c'est un poste qui peut s'appeler product owner aussi,
So I know this position can also be called product owner,
qui a plus une dimension technique là pour le coup, et dont le rôle dépend un peu de
which, in this case, has more of a technical dimension, and whose role depends somewhat on
la structure des entreprises, mais pour moi c'est ça en tout cas,
the structure of the companies, but for me, that’s it,
c'est faire le lien entre les besoins business et les
is to bridge the gap between business needs and
besoins tech. Ça veut dire quoi A/ B testing?
technical needs. What does A/B testing mean?
Alors l'A/ B testing, c'est justement quand on crée des design,
So A/B testing is precisely when we create designs,
souvent il y a plusieurs solutions qui peuvent nous paraître bonnes.
and often there are several solutions that may seem good to us.
Et en tout cas, en tant que designer, on nous demande toujours de tester nos design,
And as designers, we’re always asked to test our designs,
parce qu'il n'y a jamais de solution parfaite et tant qu'on n'a pas les retours des
because there’s never a perfect solution, and until we get feedback from
utilisateurs, on ne sait pas si ce qu'on a fait est pertinent ou pas.
users, we don’t know whether what we’ve done is relevant or not.
On ne peut pas se baser que sur notre propre ressenti.
We can’t rely solely on our own feelings.
Du coup, il y a une méthodologie de test qui s'appelle l'A/ B testing,
Therefore, there’s a testing methodology called A/B testing,
qui permet de tester en parallèle deux versions, en fait par exemple deux versions
which allows us to test two versions in parallel—e.g., two versions
d'une page d'accueil de site, et on va les
of a website's homepage, and we will
mettre en ligne en même temps.
put them online simultaneously.
Par contre, on va la diffuser
However, we will broadcast it
qu'à x% de notre, enfin de, je sais pas, sur un
only to x% of our, well, of, I don’t know, on a
serveur, ça sera cette page, sur l'autre, ça sera celle- ci.
server, it will be this page; on the other server, it will be this one.
Et en fait, on va voir comment les
And in fact, we’ll see how the
personnes interagissent.
people interact.
Ça peut marcher avec des newsletters aussi, par exemple, on envoie à 50% de notre
email list also works, for example, we send to 50% of our
base de.
database.