WebDesign : Examen janvier 2022

Quiz n°1
1. Parmi les méthodes suivantes laquelle est une méthode d’évaluation ? :
Test utilisateur.
2. Lors d’un audit, quelle est la manière appropriée de décrire une observation ? :
Description factuelle, conséquence pour utilisateur, recommandation, alternative (s’il
y en a).
3. L’affordance c’est :
C’est le fait qu’un élément comme un call-to-action soit immédiatement visible.
4. L’affordance c’est :
Le fait qu’un élément comme un call-to-action soit immédiatement visible.
5. Parmi les méthodes suivantes, laquelle est une méthode de recherche utilisateur :
Persona
6. Parmi les méthodes suivantes, laquelle est une méthode de synthèse ? :
User journey
7. Laquelle de ces étapes ne fait pas partie du déroulement d’une campagne
d’entretiens semi-dirigés ?
Réaliser un audit de l’existant pour identifier les pain point (points faible)
8. Laquelle de ces étapes ne fait pas partie du déroulement d’une campagne
d’entretiens semi-dirigés ?
Réaliser un audit de l’existant pour identifier les pain point (points faible)
9. Trouvez la bonne définition d’une image vectorielle.
Une image vectorielle est un « objet » numérique constitué de formule mathématique
définit par un ensemble de points reliés entre eux. Elle ne perd pas en définition si on
l’agrandi ou la rétrécit.
10. Les 5 étapes de la démarche centrée utilisateur sont ? (Attention à l’ordre)
Étude qualitative, étude quantitative, analyse de l’environnement, stratégie,
développement.
11. En HTML pour attribuer une couleur à un texte, vous pouvez écrire
Le code hexadécimal
12. Lors de l’entretien semi-dirigé, quel est le rôle habituel d’un designer UX
expérimenté.
Mener l’entretien.
13. Pour quel type d’entreprise la police Sofia Pro est-elle idéale ?
Le secteur de l’IT et des nouvelles technologies telle blockchain, NFT
14. C’est quoi un pixel ?
Un pixel est une brique carrée d’une image numérique. On peut y associer plusieurs
couleurs ou niveaux de gris et plusieurs intensités de couleur.
15. Quels sont les ingrédients « techniques » qui définissent le responsive design
selon Ethan Marcotte ?
Une grille fluide, des images adaptatives et des requêtes médias.
16. Vous devez faire une charte graphique pour votre équipe. Quelles informations y
ajoutez-vous ? Une seule réponse possible
Toutes les réponses présentes.

Quiz n°2
1. Un client vous confie une mission, il exprime le besoin d’un intranet. Que faites-
vous ? Une seule réponse est correcte :
Vous discutez avec le client afin de comprendre le contexte et la motivation de la
demande puis vous vous entretenez avec les employés afin de déterminer la solution
adéquate, au-delà de la solution imaginée par le client.
2. Votre site a des mauvaises performances en termes de temps de chargement de
pages. Que faites-vous ? 2 répondes possible :
- Vous sauvez toutes vos images via Photoshop en « sauver pour le web » pour
économiser en taille.
- Vous sauvez toutes vos images au format, Webp, qui vous permet d’avoir des
images de bonnes qualités, mais plus légères.
3. Associez chaque élément du nuancier Bpost :
- 2 gris : Couleur neutre
- 2 bleus : Couleur primaire
- 2 rouges : Couleur secondaire
- Vert : couleur secondaire
4. Associer chaque élément du nuancier Spotify ? :
- Black : Couleur neutre
- White : Couleur neutre
- Green : Couleur unie
5. Vous participez à une campagne de test utilisateur, dans ce cadre quel est le rôle
acceptable de la part du client et comment pouvez-vous réagir à ses demandes ? 2
réponses possibles :
Le client souhaite décider des questions qui figureront dans le guide d’entretien et
participer aux passations. Vous recadrez la mission car seul l’UX designer (vous)
pouvez traduire les interrogations du client en une grille d’interview non biaisée. Vous
assurez que s’il souhaite participer aux entretient, il doit absolument rester en retrait,
silencieux et neutre.
6. Au cours d’une mission, en vue de préparer un test utilisateur votre équipe un
audit du site web de votre client. Comment devez-vous procéder pour réaliser cet
audit ?
Vous parcourez chaque critère référentiel pour chaque page du site, vous formulez une
observation pour chaque point fort et pour chaque point faible, puis vous confrontez
vos résultats avec celui d’autres membres de l’équipe.
7. Associer chaque format d’image à sa caractéristique :
GIF : Format permettant d’assembler des petits clips ou vidéos et d’y ajouter des
éléments graphiques, des filtres, du texte, etc.
SVG : Format vectoriel basé sur du XML. Il permet de définir des éléments
graphiques vectoriels en pure code.
WEBP : Format bitmap permettant une compression plus grande que ses
prédécesseurs pour une qualité optimal avec ou sans fond transparent.
JPEG : Format offrant un maximum de flexibilité en termes de retouche et de
compression, le rendant idéal pour un chargement sur le web.
PNG : Format bitmap pour illustration avec peu de couleur et un fond transparent.
8. Vous devez réaliser une mission en respectant les différentes phases du design
thinking, comment faites-vous ? Une seule réponse possible :
Vous réalisez une analyse de l’environnement (PESTEL, SCAMPER, etc), vous
réalisez une étude quali/quanti et un benchmark de la concurrence. Fort de ces
informations recueillis, vous pouvez définir une digital strategy et ensuite l’appliquer.
 9. Vous venez de réaliser une série d’entretien semi-dirigés. Pour réaliser des
personas que faites-vous ? 2 réponses possibles.
- Vous répartissez et découpez les transcriptions d’entretiens afin de créer des
regroupements.
- Vous identifiez des groupes de comportement ou des données similaires.

Quiz n°3
1. Expliquez le critère d’ergonomie « adaptabilité » :
L’adaptabilité c’est la capacité à réagir selon le contexte, les besoins et les préférences
de l’utilisateur.
2. Expliquez le critère d’ergonomie « contrôle explicite » :
Le contrôle explicite c’est permettre à l’utilisateur de contrôler la plateforme. Par des
actions explicites et une liberté de l’utilisateur.
3. Expliquez le critère d’ergonomie « Compatibilité » :
La compatibilité c’est mettre en accord la plateforme, son interface, ses pages avec les
caractéristiques des utilisateurs et les tâches à accomplir. La compatibilité c’est parler
le langage des utilisateurs.
4. Expliquez le critère d’ergonomie « Signifiances des codes et dénominations » :
La signifiance des codes et dénominations, c’est faire correspondre les symboles et les
mots utilisés dans la plateforme.
5. Quels sont les points forts et faibles d’un audit ? :
L’audit est une méthode professionnelle qui permet de vérifier le respect des critères
d’ergonomie. Les points forts sont que c’est une méthode rapide et peu couteuse. Les
points faibles de l’audit sont que les résultats ne sont pas 100% fiables.
6. L’expliquez la différence entre client et utilisateur, lequel des deux est
l’interlocuteur principale de l’UX design ? :
Le client c’est celui qui paie et l’utilisateur c’est celui qui clique. L’interlocuteur
principale de l’UX design est l’utilisateur.

7. En quoi cette image utilise correctement une grille ? :

La grille est utilisée pour mieux organiser et
harmoniser les éléments sur une page web.
Ce sont des colonnes et des lignes qui sont des
regroupements d’unités qui créent la structure
visuelle d’une page (nombre magique 12 car 3X4).
Cette image utilise correctement la grille car les
éléments sont alignés d’une manière harmonieuse.

8. Quel est la différence entre les méthodes expertes et les

méthodes utilisateurs ? : Les méthodes experts sont les audits d’ergonomies et le
cheminement cognitif. L’avantage est que ce sont des méthodes rapides et peu
couteuses. Le risque est qu’on pourrait oublier des problèmes non liés à une tâche
prioritaire et on pourrait avoir des faux positifs/négatifs.
Les méthodes utilisateurs sont les tests utilisateurs et les questionnaires standardisés.
Ce sont des méthodes qui nécessitent la présence des utilisateurs. Le test utilisateur est
la méthode la plus fiable, mais elle nécessite une certaine expertise. Le questionnaire
standardisé est une méthode très rapide et peu couteuse. Mais c’est basé sur des
ressenti difficilement exploitables hors appli/site.
9. Expliquez les critères d’ergonomie « Gestion d’erreur » :
La gestion d’erreur c’est l’ensemble de moyen permettant de corriger, de réduire et
d’éviter les erreurs. Par la prévention de erreurs, la tolérance aux erreurs (forgiving
format), qualité des messages d’erreurs et la correction des erreurs.
10. Quelle est la différence entre UX et UI. Donnez un exemple pour chacun
L’UX c’est l’expérience utilisateur, c’est le ressenti de l’utilisateur lorsqu’il utilise
notre plateforme. L’UI c’est l’interface utilisateur, le dispositif qui permet à un
utilisateur de manipuler un site web, un smartphone, une tablette.
11. Expliquez avec vos mots en un persona diffère d’un segment :
Un segment un groupe de personne qui ont quelque chose en commun (situation
géographique, sexe, revenue, etc…). Exemple de segment : Un groupe d’adolescent
habitant la même région.
Le persona est un personnage qu’on crée qui représente la personnalité des personnes
dans un segment donné. Les personas sont créé sur base des données que nous
recevons lors d’entretien, de test et de l’analyse des utilisateurs types.
Exemple de persona : l’influenceur.
12. Comment allez-vous choisir la couleur de votre site web ? Donnez un exemple
concret, n’hésitez pas à donner les outils :
Pour choisir la couleur de mon site web, je vais utiliser des outils comme
PaletteDeCouleur.net, qui est outil qui propose plusieurs centaines de couleur
moderne. Je vais faire attention à choisir une palette avec des couleurs qui ne soient
pas seulement esthétique, mais qui attirent aussi l’attention de l’internaute et le pousse
à interagir avec le site. Et il faut que les couleurs soient en concordance avec le type
de site que je crée.
13. Sur le site https://moonpie.com/about/contact .
a. Décomposez la grille que le webdesigner a utilisé. Vous vous aiderez des
notions de lignes, colonnes et marges.
b. En quoi cela améliore t’il le processus de composition graphique ?