Module 322 - Concevoir et implémenter une interface utilisateur

Introduction

Présentation de l'enseignant

Thomas Tirole

 

Expériences professionnelles

2016-2019 - Écoles primaires de Delémont

2021-2024 - Service informatique de la Ville de Delémont

 

Formations

2016 - 2019 -          CFC Employé de commerce (EPCD)

2019 - 2021 -          École supérieure d'informatique de Gestion (ESIG)

2021 - présent -    Bachelor en informatique de gestion (HEG-Arc)

2023 - présent -    Formation SPARC en cybersécurité

 

TEACHER

Parlez-moi de vous !

 

  • Nom, prénom, centres d'intérêts, ...
  • Pourquoi l'informatique ?
  • Quelle orientation vous intéresse ?
  • Dans quel domaine aimeriez-vous travailler plus tard ?
  • Vos attentes pour ce cours ?

Organisation du cours

Modalités d'examen

  • 2h15 d'examen à disposition
    • Parthie théorique
      • Durée : 45' (estimation)
      • Ressource à disposition : Une feuille A4 manuscrite recto/verso
      • Au stylo, sur les notions vues en cours (QCM, questions ouvertes, ...)
    • Partie pratique
      • Durée : 1h30 (estimation)
      • Ressource à disposition : PC portable sans connexion internet
      • Cas pratique, création d'une maquette Figma selon les bonnes pratiques apprises en cours
  • ​​La partie pratique ne peut être commencée qu'une fois la partie théorique rendue.

Qu'est-ce que l'UX et l'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

UI - User Interface

  • Partie visuelle et interactive d'un produit
    • Boutons, icônes, couleurs, police, ...
  • 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

https://web.archive.org/web/20190528205834/http://fc-cornol.ch/

https://goulartnogueira.github.io/BadUI/

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
  • En IT, UX c'est la structure/navigation/parcours utilisateur, 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

Sur la base de la vidéo, pourquoi cette image est fausse ?

UX vs UI

  • Objectif fonctionnel identique
  • Chaque UI provoque sa propre UX

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...

CAS PRATIQUE (10')

  • 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 ?)

Quelle est la bonne et quelle est la mauvaise expérience utilisateur ?

Mise en commun

 

Une question de contexte !

  • Les temps changent

 

  • Les cibles (utilisateurs) peuvent varier

 

  • Et les cas d'utilisation... aussi

 

  • Une UX "agréable" = une cible, un scénario, et un contexte particulier !

 

  • Chaque expérience a son profil adapté

Une question de contexte !

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.

Analyser les caractéristiques de l'utilisateur, l'environnement et les problèmes à résoudre

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

 

Empathize (Empathie)

  • Observer, comprendre l'utilisateur cible
  • Se mettre à sa place
  • Se détacher de ses propres opinions

 

  • Quelles sont les frustrations et les soucis de l'utilisateur ?
  • Quels sont les besoins par rapport à notre produit ?

Define (Définition)

  • Définir la problématique prioritaire et contraignante
  • Utiliser les informations obtenues à la phase d'empathie

 

  • Comment pouvons-nous répondre à cette problématique
  • Qu'est-ce qui pourrait améliorer ce qui existe déjà sur le marché ?

Ideate (Idéation)

  • Début du développement de la solution
  • Favoriser le collectif pour le partage d'idées
  • Laisser part à la créativité et prendre toutes les idées
  • Brainstorming

Prototype

  • Tester les idées apparues à la phase d'idéation
  • Prototypes physiques ou virtuels (maquettes wireframes)
  • Assez détaillés pour des tests réalistes
  • Évolution du prototype au fil des itérations

Test (Test utilisateur)

  • Faire tester les utilisateurs la version finale du prototype
  • Recevoir un maximum de feedbacks
  • Analyser le comportement de l'utilisateur

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

Research (Recherche utilisateur)

  • Analyser et définir les besoins des utilisateurs
  • Comprendre qui sont les utilisateurs, leurs objectifs, comportements et défis
  • Utilisation d'interviews, observations ou sondages
  • Recueillir des informations qui seront utilisées dans les décisions de conceptions futures.
  • Début d'élaboration des prototypes
  • Les designs ne doivent pas être finalisés, mais contenir des idées et esquisses qui serviront de base
  • Traduire les besoins utilisateurs en solutions potentielles

Concept

  • Amélioration des concepts précédents en design détaillés
  • Les prototypes initiaux sont simplifiés
  • Augmentation de la fidélité du prototype au fil du temps
  • Le but est de s'approcher du produit final en termes de fonctionnalités et de design visuel.

Design

  • Transformation du prototype en produit fonctionnel
  • Prendre en compte les spécifications définies dans les phases précédentes pour la construction du produit
  • Éviter le maximum de risques en assurant un design fonctionnel et bien implémenté
  • Processus collaboratif impliquant plusieurs acteurs

Develop

  • Produit testé par des utilisateurs réels une fois développé
  • S'assurer qu'il réponde aux besoins et exigences
  • Garantir que le produit est utilisable, accessible et agréable à utiliser
  • Les feedbacks servent à identifier les problèmes ou améliorations
  • Processus itératif d'amélioration continue

Test

FICHE DE TRAVAIL - 15-20'

  • Par groupe de 2

 

  • Remplissez la fiche de travail "FT01 - Les méthodes"

 

  • Aidez-vous du support de cours

Testez vos connaissances !

 

  • Objectif : +60% de juste !
    • recommencer le questionnaire si < 60%
  • À terminer pour la semaine prochaine

 

  • À disposition en cas de questions ou d'incompréhension !