UI Design et ergonomie - Le design d'interface centré utilisateur

Jour 1

Qu'est-ce que l'UI Design ?

• Définition du terme UI Design
• Le rôle de l'UI Designer
• Comparaison avec l'UX Design
• Contexte des approches user centric (UI, IxD, UX, CX, HX)

Les tendances design

• Historique des interfaces homme-machine
• Interfaces monochromes
• Le fenêtrage
• Le skeuomorphisme
• Le flat design
• Le neumorphisme

Les éléments de base d'une interface

• Analyser et définir une palette de couleurs
• Règles et valeurs évocatrices des typographies
• Mise en page et ergonomie
• Images et visuels
• Dialoguer avec les boutons et les interactions
• Hiérarchisation des contenus
• Le sens de lecture
• Harmonie et contraste
• La cohérence graphique
• Moodboard, Guide UI et Design System

Rappels sur les formats de fichier

• Fichier bitmap vs vectoriel
• Formats pour le Web

Les étapes du design d'interface

• Les étapes de conception dans un projet digital
• Le maquettage : sketching, zoning, wireframe, prototype
• Les outils de prototypage (Figma, Sketch, Invision, Balsamiq...)
• Test and Learn

Exemples de travaux pratiques (à titre indicatif)

• Atelier : préparation des matières premières
• Création d'un trend board, moodboard et art board
• Création d'une palette de couleurs (Adobe Color)
• Recherche iconographique
• Elaboration d'un guide UI
• L'approche Atomic Design

Les kits d'interface

• Les wireframes
• Apple iOS
• Google Material Design
• Microsoft Windows
• Trouver l'inspiration avec les kits UI

Jour 2

Règles de base de l'ergonomie

• Définition de l'ergonomie d'interfaces pour écrans
• Les normes ISO 9241-210 et Afnor 267
• Le principe d'utilisabilité
• Les critères de Bastien et Scapin
• Les heuristiques de Jakob Nielsen
• Les lois de la Gestalt
• Distinction
• Proximité
• Similarité
• Continuité
• Clôture
• La loi de Hick
• La loi de Fitts
• La notion d'affordance
• Ergonomie par l'exemple
• Pattern de lecture
• Formulaires
• Boutons
• Tableau de données...

Exemples de travaux pratiques (à titre indicatif)

• Atelier : Evaluer l'ergonomie d'une interface
• Utiliser une grille d'analyse
• Recueil des informations
• Recommandations et pistes d'amélioration

Concevoir trois interfaces pour le responsive

• Comprendre les enjeux du responsive
• La mécanique du responsive
• Anticiper les contraintes du développeur
• Les bonnes pratiques
• Méthodologie de travail

User Flow

• Savoir interpréter un parcours utilisateur
• Méthodologie de travail pour la création d'un ensemble d'écrans
• Enjeux et risques

Exemples de travaux pratiques (à titre indicatif)

• Atelier : création d'interface utilisateur
• A partir du guide UI élaboré dans le premier atelier
• Elaborer un prototype papier puis digital
• Les bonnes questions à se poser
• Atelier d'idéation (card sorting et 6to1)

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des productions
• Et, en fin de formation, par un questionnaire d'auto-évaluation