WebDesign : Examen janvier 2022

Quiz n°1
Parmi les méthodes suivantes laquelle est une méthode d’évaluation ?
Test utilisateur.
Parmi les méthodes suivantes laquelle est une méthode de synthèse ?
User journey

Lors d’un audit, quelle est la manière appropriée de décrire une observation ?
Description factuelle, conséquence pour l'utilisateur, recommandation, alternative (s'il y en a).

L’affordance c’est :
Le fait qu’un élément comme un call-to-action soit immédiatement visible.
Parmi les méthodes suivantes, laquelle est une méthode de recherche utilisateur :
Persona ou questionnaire exploratoire
Parmi les méthodes suivantes, laquelle est une méthode de synthèse ? :
Atelier de co-création.
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)
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 retrecit.
Les 5 étapes de la démarche centrée utilisateur sont ? (Attention à l’ordre)

Quiz n°3
Expliquez le critère d’ergonomie « adaptabilité » :

L’adaptabilité est la capacité de l’interface à s’adapter selon le contexte et l’expérience de l’utilisateur. Cela permet à l’utilisateur
d’avoir une expérience unique et personnalisée. Comment faire : Flexibilité et Prise en compte de l’'expérience de l’'utilisateur

Expliquez le critère d’ergonomie « contrôle explicite » :

Le système prend en compte les actions explicites des utilisateurs et le contrôle qu’ils ont sur leur le traitement de leurs actions.
L’objectif est que l’utilisateur obtienne une meilleure compréhension de l’application. Il doit être persuadé qu’il a un contrôle sur
le système. Car cela renforce la confiance dans le système et c’est facteur important d’acceptation de l’application.

Expliquez le critère d’ergonomie « Compatibilité » :

La compatibilité est la capacité d’une application à s’intégrer dans l’activité réel de l’utilisateur. Il s’agit de parler le langage de
l’utilisateur, présenter les informations de manière cohérente par rapport à d’autres support de travail. Rendre compatible l’accès
aux commandes avec la tâche de l’utilisateur. Les objectifs sont d’améliorer l’expérience utilisateur globale, la mémorisation et
facilité l’apprentissage.

Expliquez le critère d’ergonomie « signifiance des codes et dédonination » :

Expliquez le critère d’ergonomie « gestion des erreurs» :

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.

L’expliquez la différence entre client et utilisateur, lequel des deux est l’interlocuteur principale de l’UX design ? :

Le client en webdesign est celui qui déclenche l’ajout des nouvelles fonctionnalités. C’est celui qui commande un site web ou une
application. Alors que l’utilisateur est celui qui va utiliser l’application, le site, …
C’est l’interlocuteur principale de l’UX design est l’utilisateur.

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.

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. Dans les audits d’ergonomie la méthode passe en
revue de manière systémique chaque page (site) ou écran (application) pour vérifier le respect des critères d’ergonomie, c’est
moins couteux et rapide. Mais on court le risque des faux positifs/négatifs. Au niveau du cheminement cognitif, on parcourt le
chemin de l’utilisateur et on cherche tous ce qui pourrait ruine à sa tâche ou à sa compréhension. C’est une méthode qui
fonctionne comme un audit, mais en plus rapide. Le risque est qu’on pourrait oublier des problèmes non liés à une tâche
prioritaire.

Les méthodes utilisateurs sont les tests utilisateurs et les questionnaires standardisés, dans les tests utilisateurs, on demande à un
panel d’utilisateur de réaliser des tâches et on observe chaque problème, chaque difficulté. C’est la méthode la plus fiable, mais
elle nécessite une certaine expertise. Pour le questionnaire standardisé, on donne un questionnaire préétabli et validé
scientifiquement à des utilisateurs pour mesurer l’ergonomie ou l’expérience utilisateur perçue. C’est une méthode très rapide et
peu couteuse. Mais c’est basé sur des ressenti difficilement exploitables hors appli/site.

Expliquez les critères d’ergonomie « Gestion d’erreur » :

La gestion d’erreurs consiste à regrouper les différents moyens visant à protéger l’utilisateur des erreurs et à lui permettre de les
corriger. L’objectif est de réduire les interruptions dues aux erreurs. En résumer c’est : éviter les erreurs, permettre une correction
aisée erreurs et faciliter l’exploration et l’apprentissage du système.

Expliquez avec vos mots en un persona diffère d’un segment :

Un segment un groupe de personne ou entreprise (B2B) 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.

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.

Sur le site https://moonpie.com/about/contact . Décomposez la grille que le webdesigner a utilisé. Vous vous aiderez des notions
de lignes, colonnes et marges. En quoi cela améliore t’il le processus de composition graphique ?

Quiz n°2

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.

Un besoin n'est pas :Une demande, Une envie, Une solution

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.

Associez chaque élément du nuancier Bpost :

Couleur neutre à Texte, arrière-plans, panneaux, contrôles de formulaire,... Presque toutes les interfaces utilisent du gris et pas du
noir !
Couleur primaire àUne ou deux couleurs : Détermine l’aspect général du site (ex : Facebook et le bleu)
Couleur secondaire à Accentuation, mettre en avant le contenu Boutons, CTA,...
3 types de couleurs :
Couleurs chaudes : chaleur, confort, sensation d’accueil
Couleurs froides : fraicheur, sérénité, calme et discrétion (vert)
Couleurs neutres : blanc, noir et gris

2 gris : Couleur neutre

2 bleus : Couleur primaire
2 rouges : Couleur primaire
Vert : couleur secondaire

Associer chaque élément du nuancier Spotify ? :

Black : Couleur neutre
White : Couleur neutre
Green : Couleur froide

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 :

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.

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 :
PNG :

Vous devez réaliser une mission en respectant les différentes phases du design thinking, comment faites-vous ? Une seule réponse
possible.

Design thinking: cycle de conception d'un système interactif, allant de l'exploration d'un sujet jusqu'à l'évaluation d'une solution.

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 recueillies, vous pouvez alors définir une digital strategy
pour ensuite l'appliquer.

En HTML, pour attribuer une couleur à un texte, vous pouvez écrire...

Choisissez la meilleure option.
le code hexadécimal.

Laquelle de ces étapes ne fait pas partie du déroulement d'une campagne d'entretiens semi-dirigés:
O Réaliser un audit de l'existant pour identifier les pain points (points faibles).
O Tester le guide d'entretien et le dispositif technique lors d'un entretien à distance
O Définir les modalités de passation.
O Identifier des sujets à traiter/formuer des hypothèses.

Les 5 étapes de la démarche centrée utilisateur sont : Attention à l'ordre des étapes !
O Entretiens, synthèse, idéation, prototypage, tests utilisateur.
O Exploration, synthèse, idéation, implémentation, évaluation.
O Exploration, idéation, synthèse, implémentation, évaluation.
O Étude qualitative, étude quantitative, analyse de l'environnement, stratégie, développement

Trouvez la bonne définition d'une image vectorielle ?

O Une image vectorielle est un « objet » numérique constitué de formules mathématiques définit par un
ensemble de points reliés entre eux et formant une grille statique. Le nombre de pixels qui composent les
images matricielles est fixe.
O Une image vectorielle est un « objet » numérique constitué de formules mathématiques définit par un
ensemble de points reliés entre eux. Elle ne perd pas en définition si on l'agrandit ou la rétrécit.
O Une image vectorielle est un «objet» numérique constitué de pixels c'est à dire des carrés de couleurs
formant une grille statique. Le nombre de pixels qui composent les images matricielles est variable c'est à
dire il augmente si on agrandit l'image.
O Une image vectorielle est un « objet » numérique constitué de pixels c'est à dire des carrés de couleurs
formant une grille statique. Le nombre de pixels qui composent les images matricielles est fixe
O Une image vectorielle est un «objet » numérique constitué de pixels c'est à dire des ronds de couleurs
formant une grille statique. Le nombre de pixels qui composent les images matricielles est fixe.
Page

La méthode expert ne fait pas intervenir l'utilisateur contrairement à la méthode utilisateur

Lors d'un audit, quelle est la manière appropriée de décrire une observation ?
O Critère d'ergonomie non-respecté, recommandation, alternative (s'il y en a).
O Référentiel, critère d'ergonomie en infraction, solution.
O Nom de l'outil utilisé, listes des règles non respectées, explication.
O Description factuelle, conséquence pour l'utilisateur, recommandation, alternative (s'il y en a)

Vous venez de réaliser une série d'entretiens semi-dirigés. Pour réaliser des personas, que faites-vous ? 2 réponses
possibles.
Vous identifiez des groupes de comportements ou de données similaires
Vous définissez les consommateurs les plus intéressants pour le business
Vous répartissez et découpez les transcriptions des entretiens afin de créer des regroupements.
Vous créez un guide d'entretien, planifier des rendez-vous et réaliser des entretiens.

Vous devez réaliser une charte graphique pour votre équipe. Quelles informations y ajoutez-vous ? Une seule réponse
possible.
Les différentes utilisations du logo.
Les polices utilisées avec leur taille en points.
Les polices utilisées avec leur taille en pixels, points ou em.
Toutes les réponses présentes.
Des informations sur l'entreprise.
Les différentes couleurs utilisées et l'explication.

Quels sont les ingrédients "techniques" qui définissent le responsive design selon Ethan Marcotte ?
le contexte, le device et le scoubidoubidou aaah.
le support, la largeur minimum et la largeur maximum.
des colonnes, des lignes, des gouttières.
Une grille fluide, des images adaptatives et des requêtes médias.

Lors d'un entretien semi-dirigé, quel est le rôle habituel d'un designer UX expérimenté ?
Mener l'entretien.
Donner les consignes au designer UX junior.
Gérer le timing et les sujets abordés.
Modifier le guide d'entretien pour les prochains interviews.

C'est quoi un pixel ?

L'unité de base qui permet la construction de tout un Univers. Soit l'ADN de ton voisin ou de
ton chat (et probablement à toi aussi, sauf si tu viens de la planète Krypton) ou tel Iron Man
dans le MCU.
Un pixel est une forme ronde, la plus petite mesure d'une image numérique. On peut y
associer une couleur ou un niveau de gris et une intensité de couleur.
Un pixel est une brique carrée d'une image numérique. On peut y associer une couleur ou un
niveau de gris et une intensité de couleur.
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.
Un pixel est une brique carrée d'une image imprimée. On peut y associer une couleur ou un
niveau de gris et une intensité de couleur.

Expliquez en quoi cette image utilise correctement une grille

Expliquez avec vos mots en quoi un persona differe d'un segment. Donnez un exemple pour chacun.

Quelle est la différence entre les methodes expertes et les méthodes utilisateurs ? Expliquez’
Au cours d une mission, en vue de preparer un test utilisateur, votre equipe réalise un audit du site web de votre client. Comment
devez.

Comment allez-vous choisir les couleurs de votre site web ? Donnez un exemple concret et n'hésitez pas à nommer des outils.

Vous venez de réaliser une série d'entretiens semi-dirigés. Pour réaliser des personas, que faites-vous ? 2
réponses possibles.
O Vous répartissez et découpez les transcriptions des entretiens afin de créer des regroupements.
O Vous identifiez des groupes de comportements ou de données similaires
O Vous créez un guide d'entretien, planifier des rendez-vous et réaliser des entretiens.
O Vous définissez les consommateurs les plus intéressants pour le business

Quelle est la différence entre UX et UI. Donnez un exemple pour chacun.

User Interface (UI) = une interface par laquelle une personne peut contrôler un logiciel ou un hard-ware spécifique. Idéalement,
les interfaces utilisateurs doivent être conviviales et faciles d’utilisation pour rendre l’interaction aussi instinctive et intuitive que
possible. Pour les logiciels, on parle d’une interface utilisateur graphique. Exemples : filtrer des données pour les utilisées, casque
VR (si environnement virtuel OK mais si juste spectateur NON), montre connectée et portée qui reçoit un appel (appuyer pour
répondre ou raccrocher = interaction),...

User Expérience (UX) = recouvre la façon dont un site web ou une application est perçue et ressentie par ses utilisateurs en
fonction de ses qualités ergonomiques, de navigation et de contenu. Joue un rôle très important dans l’efficacité d’un site web ou
d’une application mobile e constitue également un facteur de fidélisation : on ne parle pas ici de client mais d’UTILISATEURS.

Expliquez le critère d'ergonomie « Signifiance des codes et dénominations »

Expliquez le critère d'ergonomie « Gestion des erreurs

Expliquez la différence entre client et utilisateur, lequel des deux est l'interlocuteur principal de l'UX designer ?
Le client est une personne qui effectue l'achat alors que l'utilisateur est une personne qui utilise le produit/service sans forcément
être le client. Attention : l'utilisateur ne devient pas toujours un client.
L'UX designer, est le fait d'insérer dans une expérience utilisateur, du storytelling afin de créer de l'émotion. L'UX designer
permet l'optimisation de l'expérience utilisateur.

Quels sont les points forts et les points faibles d'un audit ?
L'audit est une méthode professionnelles permettant de vérifier le respect des critères d'ergonomie.
Les points forts sont que c'est une méthode assez rapide et peu couteux.
Au niveau des points faibles, les résultats ne sont pas 100% fiable.

Votre site web a de mauvaises performances en termes de temps de chargement des pages. Que faites-vous ? 2 réponses
possibles.
O Vous utilisez un des outils de Google, style PageSpeed Insight, pour noter ce qui est problématique.
Vous sauvez toutes vos images via Photoshop en 'sauver pour le web' pour économiser en taille.
O Vous pleurez c'est trop bête
Terminer le te
Temps restant
Vous sauvez toutes vos images en format Webp, qui vous permet d'avoir des images de bonne qualité mais plus
légères.