B1 · Episode 7 · 4:55
Camille, UI/UX designer (7): Design patterns and user personas
Camille defines 'patterns' as recurring, familiar interface elements (e.g., newsletter signup in footers) and 'personas' as synthesized, realistic user profiles built from qualitative and quantitative research to guide design decisions.
Source：Qu'est-ce que Tu GEEKes ? · License：CC BY-SA 4.0
Transcript
le voir, cette news et 50% l'autre news et on voit celle qui a généré plus de clics.
see it, this news and 50% the other news and we see the one that generated more clicks.
En fait, l'objectif c'est de faire des analyses pour éliminer le design le plus
In fact, the goal is to conduct analyses to eliminate the weaker of the two designs.
faible des deux, entre guillemets.
weaker, in quotes.
Ça veut dire quoi pattern?
What does 'pattern' mean?
Les patterns, c'est, comment le
Patterns are, how to say in French
dire en français?
say?
En fait, c'est des éléments qu'on
In fact, they are elements we
retrouve un peu partout dans des designs.
find everywhere in designs.
Mon livre est en anglais en plus, donc ça ne peut pas m'aider.
And my book is in English, so it can’t help me.
Et j'ai fait ma formation en anglais, donc c'est pour ça que j'ai beaucoup
And I did my training in English, so that’s why I have a lot
d'anglicismes quand je raconte tout ça.
English loanwords when I talk about all this.
En fait, c'est des éléments répétitifs, les patterns, c'est des choses qui peuvent
In fact, patterns are repetitive elements, things that can
se reproduire, j'allais dire des
reproduce themselves, I was going to say
templates, mais du coup c'est en anglais aussi.
'templates', but that’s English too.
J'ai une colle.
I have a puzzle.
Non, mais l'objectif c'est de se dire qu'il y a des choses qui sont très répétitives
No, but the goal is to realize that there are many highly repetitive things
sur le web et des usages qu'on revoit fréquemment.
on the web and usage patterns we frequently encounter.
Par exemple, un exemple très
For example, a very
basique pour le coup en termes de design, mais la newsletter,
basic design example—namely, the newsletter signup—
elle est souvent en bas de page ou dans le footer, donc qui est vraiment le bas de
is often placed at the bottom of the page or in the footer—the very bottom section appearing on every page of the site.
la page qui se retrouve sur toutes les pages du site.
And this, in fact, is a pattern—and it means users,
Et bien ça, c'est un pattern en fait, et ça veut dire que les utilisateurs,
when arriving at a site, will instinctively first look for
s'ils arrivent sur un site, le premier endroit où ils vont penser naturellement à
if they arrive on a site, the first place they’ll naturally think to
aller chercher la newsletter, ça va être en bas de la page.
go to look for the newsletter will be at the bottom of the page.
Du coup, l'idée c'est de faire comprendre aux designers que ça sert à rien de mettre
So the idea is to help designers understand that placing the newsletter
la newsletter.
there serves no purpose.
au milieu de la page perdu.
lost in the middle of the page.
Pourquoi? Parce que l'utilisateur a déjà enregistré pour lui que l'emplacement
Why? Because users have already mentally registered that location
c'était celui- là.
as that one.
C'est comme un bouton, il y a un petit ombrage derrière ou il est d'une autre
It’s like a button—it has subtle shadowing behind it, or is colored differently,
couleur, c'est pas juste un texte, sinon on sait pas que c'est un bouton,
color—it's not just text, otherwise we wouldn't know it's a button,
parce que c'est enregistré dans
because it's recorded in
les usages du web.
web usage conventions.
Ça veut dire quoi benchmark?
What does 'benchmark' mean?
Benchmark, pour le coup, c'est aller faire de la
Benchmarking, in this case, means conducting
veille concurrentielle ou de la veille sur un secteur, c'est pas forcément analyser
competitive or sectoral monitoring—not necessarily analyzing
ce que la concurrence fait, mais c'est justement analyser un peu les usages sur un
what competitors do, but rather specifically analyzing user practices within the same field of activity or sector,
même domaine d'activité ou sur un même secteur, pas
not just at competitors',
juste chez la concurrence, mais se dire bon bah voilà, là je travaille pour une
but rather thinking: okay, I'm currently working for a client in consulting—how are the websites of people
cliente qui fait du conseil, comment sont faits les sites internet de personnes qui
client who does consulting—how are the websites of people who
proposent du conseil en ligne?
offer online consulting services?
Est- ce qu'il y a justement des patterns, des usages qu'on retrouve un peu partout
Are there indeed patterns or practices that recur across these sites?
sur ces sites?
across these sites?
Et ce qui m'aidera à mieux.
help me better
la cible derrière.
understand the target audience behind it.
Ça veut dire quoi persona?
What does persona mean?
Les personas en fait c'est le client type.
Personas are, in fact, the typical customer.
En design c'est quelque chose qu'on utilise énormément parce qu'on veut
In design, it’s something we use extensively because we want
designer pour certes pour
to design—certainly to design for
une cible on va dire qui a tel âge, qui est de tel sexe, telle situation familiale,
a target—let’s say someone of a certain age, gender, family situation,
on va essayer de préciser le plus possible, mais ça reste encore assez flou quand on
we’ll try to specify as precisely as possible, but it remains quite vague when we
design et quand on design on a envie de designer pour quelqu'un qui est au plus
design—and when we design, we want to design for someone who is as close as possible to
proche d'une personne qui pourrait exister et qui pourrait consulter le site.
an actual person who could exist and might visit the site.
Et c'est pour ça qu'on va utiliser les personas.
And that’s why we’ll use personas.
Donc les personas c'est une personne qu'on
So a persona is someone we
va imaginer qui est fictive mais qui représente au plus proche la cible.
will imagine—fictional, yet representing the target as closely as possible.
Donc le persona on va en faire une petite fiche, c'est tout simple avec sa photo,
So we’ll create a simple profile card for the persona, with their photo,
son nom, c'est comme sa carte d'identité avec en plus ses hobbies,
name—it’s like their ID card—with, additionally, their hobbies,
les difficultés qu'il rencontre par rapport
the service we’re working on, and what they’d like.
au service sur lequel on travaille et ce qu'il aimerait.
the difficulties they encounter regarding
Le persona, on ne le crée pas de n'importe où, on ne l'invente pas.
The persona isn’t created out of thin air, nor is it invented.
On va utiliser des verbatims, donc c'est des citations en fait,
We’ll use verbatims—so these are actual quotes,
pour l'enrichir.
to enrich it.
On va utiliser un âge
We’ll use an age,
qu'on n'aura pas sorti de nulle part non plus, mais qui sera basé sur toutes les
an age we won’t pull from nowhere either, but one that will be based on all the
analyses quantitatives et qualitatives qu'on aura fait en amont.
quantitative and qualitative analyses conducted upstream.
Donc l'objectif, c'est que ce soit la synthèse
So the goal is for it to be the perfect synthesis
parfaite de toutes les personnes qu'on a pu interroger en faisant passer un guide
of all the people we’ve interviewed using an interview guide or through interviews.
d'entretien ou en faisant des interviews
through interviews.
pour designer pour lui.
to design for him.
Et par la suite, on ne designerait plus pour les 25-35, on designerait pour Léo
And subsequently, we wouldn’t design for 25–35-year-olds anymore—we’d design for Léo,
qui a 32 ans et qui travaille dans tel domaine.
who is 32 years old and works in a certain field.
Voilà, c'est pour être au plus proche de la réalité.
That’s how we stay as close as possible to reality.
Voilà pour cette interview, merci de l'avoir écoutée.
That’s it for this interview—thanks for listening.
Si ça vous a plu, comme d'hab, abonnez- vous, commentez, poucez en l'air,
If you enjoyed this, as usual, please subscribe, comment, and thumbs-up!
soutenez- nous sur Utip, etc.
support us on Utip, etc.
Il y a cinq autres interviews qui vous attendent, vous trouverez leur lien dans la
There are five other interviews waiting for you; you’ll find their links in the
description. C'était Flo pour Qu'est- ce que tu giques?
description. It was Flo for Qu'est-ce que tu giques?
Salut!
Hi!