Module 322 - Concevoir et implémenter une interface utilisateur
Introduction
Modalités d'examen
- Examen en deux parties :
- partie 1 : Définitions théoriques et compréhension sur un examen papier
- partie 2 : Exercice pratique sur votre machine
- L'examen se fait au stylo et sur ordinateur
- L'examen dure 2h15, à vous de gérer votre temps
- Matériel à disposition : 1 feuille A4 recto-verso manuscrite pour la partie 1. Pour la partie 2 vous avez droit à tout sauf une connexion internet.
Qu'est-ce que l'UX et l'UI ?
Temps à disposition : 5 minutes
Connectez-vous à : https://app.wooclap.com/LNPUSL
Objectifs du cours
- Différencier l'UI et l'UX
- Expliquer l'importance du contexte de l'UX
- Illustrer un processus de création
UI - User Interface
Les interfaces concernées peuvent être :
- des sites web
- des applications mobiles
- des jeux vidéo
- des programmes d’ordinateurs.
La conception d’interface, également connue sous le terme anglais interface design, est le processus de création d’interfaces dans les logiciels ou les appareils électroniques
UI - User Interface
- Partie visuelle et interactive d'un produit (Boutons, icônes, couleurs, police, image)
- Tout élément graphique avec lequel l'utilisateur interagit
- L'objectif est de créer des interfaces esthétiques et intuitives
Exemples de mauvaise UI
UX - User Experience
- Qualité globale et ressenti de l'interaction de l'utilisateur avec le produit ou service (digital ou non)
- Conception centrée sur l'utilisateur
- Apporter un sentiment positif à l'utilisateur
- Éviter les frustrations et difficultés d'utilisation
Reconnaître une bonne expérience utilisateur
Le design de la porte fait comprendre explicitement la manière de l'utiliser
On ne risque pas de se tromper en essayant de tirer une porte battante qui n'a pas de poignée
Reconnaître une bonne expérience utilisateur
À gauche, il faut savoir la signification du symbole (problème de pression des pneus), et l'on ne sait pas lequel des 4 !
À droite, le tableau de bord de la voiture interprète le dysfonctionnement du véhicule dans la langue de l'utilisateur
UX vs UI
- L'UX n'est pas de l'UI, mais l'UI est une part de l'UX
- Ils doivent fonctionner ensemble pour créer une bonne UX
UX vs UI
- En informatique, l'UX c'est la structure/navigation/parcours utilisateur, l'UI c'est la mise en évidence/aide à l'utilisation/esthétisme
- L'expérience utilisateur globale découle de l'association de ces deux domaines.
UX vs UI
UX vs UI
Temps à disposition : 2 minutes
Connectez-vous à : https://app.wooclap.com/LNPUSL
UX vs UI
- Objectif fonctionnel identique
- Chaque UI provoque sa propre UX
Quand l'UX et UI sont en désaccords...
Bien que ce chemin soit esthétique et symétrique ; le parcours utilisateur prévu n'est pas adapté. Au fil du temps, les gens ont tracé leur propre parcours qu'ils estimaient plus pratique.
Quand l'UX et UI sont en désaccords...
Dans cet exemple, bien que l'interface soit simple et explicite (deux symboles, monter/descendre), il est impossible d'être certain du rôle des boutons lumineux !
Le sens de lecture pourrait être mal interprété par l'utilisateur (gauche/droite - droite/gauche - haut/bas - bas-haut ?).
Vaut mieux prendre les escaliers...
Quand l'UX et UI sont en désaccords...
- Par groupe de 2, répondez à la question ci-dessus
- À l'aide du fichier "CP01"
- Écrivez vos arguments sur votre choix (+ Pourquoi ?)
- ... et les raisons pour lesquells vous n'avez pas choisi l'autre (- Pourquoi pas ?)
Cas pratique
Effectuez le Cas pratique 1 - UX vs UI
Temps: 10 minutes
Le contexte et l’utilisateur au centre de l’UI et l’UX
- Les temps changent
- Les cibles (utilisateurs) peuvent varier
- Une UX "agréable" = une cible, un scénario, et un contexte particulier !
- Chaque expérience a son profil adapté
L'expérience utilisateur n'est jamais figée dans le temps ou dans le marbre, elle se réinvente sans cesse. Ceci car les gens changent et les époques également. Les attentes et préoccupations d'aujourd'hui ne seront pas forcément celles de demain.
Le contexte et l’utilisateur au centre de l’UI et l’UX
Processus de conception
Temps à disposition : 5 minutes
Connectez-vous à : https://app.wooclap.com/LNPUSL
Processus de conception
- Design Thinking (conception créative)
- User-Centered Design (conception centrée sur l'utilisateur)
Design Thinking
- Approche centrée sur l'humain
- Groupe de travail diversifié
- Prise en compte de différents points de vue
- Processus généraliste et multi-contextes
Un mauvais design thinking
User-Centered Design
- Processus itératif en étapes où chacune vise à garantir une satisfaction utilisateur optimale
- Axé sur le développement et amélioration de produits numériques.
- Priorité mise sur l'expérience utilisateur
Processus
Fiche de travail
Effectuez l'exercice 1 de la Fiche de travail - Processus de création
Temps: 20 minutes
Sandra, enseignante passionnée, consacre beaucoup de temps et d’argent à trouver et acheter du matériel pédagogique et décoratif pour sa classe. Aujourd’hui, ce processus est chronophage, dispersé et peu optimisé, ce qui l’empêche de se concentrer pleinement sur son métier. Le défi est de concevoir une plateforme simple et intuitive permettant aux enseignants de rechercher, comparer, commander et suivre facilement leurs fournitures scolaires, tout en tenant compte de leurs préférences et de leur budget. L’objectif est de transformer cette tâche en une expérience rapide, personnalisée, collaborative et même créative.
PROJET
Contexte 1
Julien, jeune adulte actif, pratique régulièrement le sport pour rester en forme et se préparer à des défis personnels ou compétitifs. Il utilise une application pour suivre ses performances mais recherche avant tout un accompagnement personnalisé, motivant et adapté à son emploi du temps chargé. L’enjeu est de concevoir une application intelligente qui propose des entraînements sur mesure, suit ses progrès de manière valorisante et l’aide à rester motivé sur le long terme. L’objectif est d’intégrer facilement le sport dans son quotidien tout en l’accompagnant vers la réalisation de ses objectifs de santé, de performance ou de compétition.
PROJET
Contexte 2
Léa, jeune étudiante au budget limité, souhaite manger sainement sans perdre de temps à cuisiner. Elle recherche une plateforme de livraison rapide qui lui propose une grande variété de repas végétariens, véganes ou sans allergènes, adaptés à ses préférences et à son mode de vie. Le défi est de concevoir une application intuitive qui offre diversité, personnalisation et accessibilité financière, tout en rendant la commande simple et rapide. L’objectif est d’accompagner les jeunes utilisateurs vers une alimentation équilibrée, variée et compatible avec leurs contraintes de temps et de budget.
PROJET
Contexte 3
PROJET
Projet 1
Créer une plateforme centralisée et intuitive pour aider les enseignants à acheter, comparer et gérer facilement leurs fournitures scolaires et décoratives..
Projet 2
Concevoir une application sportive personnalisée qui adapte les entraînements, motive les utilisateurs et les accompagne dans leurs objectifs de santé ou de performance.
Projet 3
Développer une plateforme de livraison de repas sains, variés et abordables, adaptée aux jeunes utilisateurs avec des préférences alimentaires spécifiques et peu de temps.
Temps à disposition : 2 minutes
Connectez-vous à : https://app.wooclap.com/LNPUSL
Wooflash
Répondez aux différentes questions liées à la matière enseignée
Connectez-vous à : https://app.wooflash.com/join/Z3DVCPV1