Concepteur d'interface utilisateur – Conception d'interfaces numériques avec Figma (en ligne) – gratuit

Objectif d'apprentissage : RA2 : Intervenir dans la conception du produit numérique en veillant à l'utilisation des critères de conception universelle et à l'optimisation de l'expérience utilisateur.

Unité 1 – CONCEPTION DE SOLUTIONS

DÉFINITION DES ARCHITECTURES DE L'INFORMATION

Le rôle du concepteur d'interface utilisateur dans le processus de conception numérique

• Structure d'une interface numérique et principes d'utilisabilité

• Lire le cahier des charges et identifier les exigences d'interface

• Destinataires et contexte d’utilisation

• Reconnaissance des produits de référence

• Organiser, regrouper et étiqueter le contenu

• Hiérarchie du contenu

• Conception du flux de navigation • Logique mobile-first

• Environnement de travail et configuration des fichiers : Vue d’ensemble de Figma — zone de conception, cadres, outils principaux, panneaux, ressources

• Organisation et dénomination des fichiers, des pages et de la structure du projet

• Figma Jam pour collecter et organiser des idées

• Premiers flux opérationnels et travail collaboratif

RÉALISATION DU FIL DE FER

• Maquettes filaires basse fidélité des écrans principaux

• Représentation des mécanismes d'interface et des fonctionnalités attendues

• Vérifier la cohérence entre les flux de navigation et les maquettes fonctionnelles.

• Revue des maquettes filaires et transition vers la haute fidélité

- PROTOTYPAGE

• Principes de conception visuelle : palette de couleurs et hiérarchie des significations des couleurs ; typographie et échelle typographique ; hiérarchie visuelle, contraste, cohérence graphique ; rythme et proportions. • Recherche de références et création de planches d’inspiration.

• Gestion des graphismes et des ressources : Outils vectoriels (formes, stylo, tracés), masques et gestion d’images, grilles, colonnes et systèmes d’espacement, exportation et préparation des ressources pour le développement

• Système de conception typographique : variables et collections, types de valeurs et critères de dénomination. Collection typographique divisée en familles serif et sans serif. Association des familles aux styles de texte. Propagation des modifications de la variable aux styles et à l’ensemble du projet.

• Mises en page flexibles et réactives : contraintes et comportement des éléments lors du redimensionnement ; mise en page automatique (espacement, direction, marge intérieure) ; éléments imbriqués et adaptation du contenu ; conception pour les points de rupture et le test du comportement adaptatif

• Système de conception des couleurs : jetons primitifs et construction de l’échelle chromatique. Jetons sémantiques obtenus par regroupement des primitifs. Application aux seuls niveaux des jetons sémantiques. Maintenance et évolution du système chromatique.

• Composants, propriétés et structure du système : composants principaux et instances ; variantes et états des composants (par défaut, survol, clic, focus, désactivé) ; propriétés de variante pour les versions principales et secondaires ; propriétés de texte, propriétés d’échange d’instance pour les icônes, propriété booléenne pour la variation de forme ; attribution de propriétés par renommage des calques ; création d’un ensemble complet de boutons

• Création de prototypes : connexions entre écrans et zones interactives, interactions, états et superpositions • Construction de flux de navigation • Composants interactifs et transitions entre états • Animations intelligentes et micro-interactions • Simulation de comportements réalistes • Exhaustivité des flux et états attendus • Partage du prototype

• Documentation système et ressources du projet : documentation du système de conception (structure, critères d’utilisation des jetons et des composants, règles d’application, exemples d’utilisation correcte et incorrecte), création de bibliothèques et de kits d’interface utilisateur, publication et mise à jour des bibliothèques (fonctionnement et étendue d’utilisation dans les offres professionnelles [démo]), modèles, plugins, widgets et ressources communautaires, vérification des licences et des conditions d’utilisation.

TESTS D'UTILISABILITÉ

• Mise en place d'un test d'utilisabilité sur les wireframes et le prototype : définition des tâches, observation, enregistrement des problèmes critiques

• Résumé et hiérarchie des problèmes détectés

• Vérifier le bon fonctionnement des écrans et des flux

• Examen du projet fondé sur les preuves recueillies

Unité 2 OPTIMISATION DE L'EXPÉRIENCE UTILISATEUR

INTÉGRATION DE LA CONCEPTION DE PRODUITS EN RELATION AVEC L'ERGONOMIE ET ​​L'ACCESSIBILITÉ

• Critères ergonomiques appliqués à l'interface : dimensions minimales des zones interactives

• Distances entre les éléments actifs et prévention des erreurs de sélection

• Zones accessibles pour une utilisation à une main

• Critères d’accessibilité : Les rapports de contraste et le niveau de conformité AA ont été vérifiés sur les jetons de couleur.

• Lisibilité, longueur minimale du texte et des lignes

• Informations ne se basant pas uniquement sur la couleur

• États de concentration, rétroaction et reconnaissance des éléments actifs

• Navigation au clavier et avec les technologies d'assistance

•Vérifier et corriger : contrôle instrumental avec plugin de contrôle du contraste

• Contrôle des zones et états interactifs

• Examen des jetons et des styles suite aux vérifications

L'INTÉGRATION DE LA CONCEPTION DE PRODUITS EN RELATION AVEC LES PRINCIPES DE CONCEPTION UNIVERSELLE

• Origine et finalité de la conception universelle

• Concevoir pour le plus grand nombre de personnes sans solutions dédiées

• Obstacles perceptifs, moteurs et cognitifs liés à l'utilisation d'un produit numérique

• Limitation des contextes d'utilisation : luminosité, bruit, connectivité réduite

• Interfaces standardisées : modèles d’interface reconnaissables et conventions d’utilisation

• Cohérence du comportement entre les éléments ayant la même fonction

• Prévisibilité et tolérance aux erreurs, réversibilité des actions

• Adaptabilité du produit : adaptation à différents appareils et formats d'écran

• Respecter les préférences système de l'utilisateur

• Simplicité et réduction de la charge cognitive

• Documentation des choix de conception universelle adoptés dans le projet

Évaluation des apprentissages : Le module se termine par des tests d’évaluation permettant de contrôler les compétences et les connaissances acquises.

Objectif d'apprentissage : RA3 : Gérer la communication concernant la fonctionnalité et l'utilisation du produit numérique, y compris à partir de la conception de maquettes et de prototypes interactifs, en veillant à leur adéquation (exactitude, exhaustivité, efficacité, disponibilité, etc.).

Unité 1 - Communication

CONCEPTION DE MAQUETTE

• La maquette comme outil de présentation de produit

• Sélection des écrans significatifs en fonction des fonctionnalités à illustrer

• Création de vues de présentation et d'aperçus contextuels

• Séquence des écrans et instructions d'utilisation

• Présentation du projet au client, en commençant par les objectifs et les contraintes

• Réaliser l'évaluation et gérer les retours d'information

• Comparaison avec les promoteurs et vérification de faisabilité

•Transfert de fichiers : tailles, espacement, états, comportements réactifs, ressources

• Documentation des choix de conception

• Vérification de l'exactitude, de l'exhaustivité et de la disponibilité des documents

CRÉATION DE CONTENU DE COMMUNICATION NUMÉRIQUE

• Contenu textuel et graphique illustrant l'utilisation, les caractéristiques, les fonctionnalités et les avantages du produit

• Organisation des contenus en fonction du canal et de l'outil de diffusion • Adaptation des contenus aux formats requis par les différents canaux

• Création d'un site portfolio : reconstruction dans Framer d'un projet de portfolio professionnel assigné — structure du contenu, hiérarchie visuelle, composants, comportement adaptatif

• Transposer la logique apprise dans Figma à l'environnement de publication : analogies et différences opérationnelles

• Différences entre le prototype et le site publié : comportement réel, performances, maintenance, accessibilité en ligne

• Publication du site et mise à disposition du système aux étudiants pour qu'ils l'intègrent ensuite à leurs propres travaux.

CONCEPTION DE STRATÉGIE DE COMMUNICATION

• Identification des outils et canaux appropriés pour la présentation des produits : site web, réseaux sociaux, newsletter, présentations

• Critères de sélection fondés sur les destinataires et les objectifs de communication

• Cohérence du système visuel entre différents canaux

• Application du système de conception aux formats de communication

• Planification du déroulement de la présentation du produit aux utilisateurs externes

• Justification des choix stratégiques et de contenu

Évaluation des apprentissages : Le module se termine par des tests d’évaluation permettant de contrôler les compétences et les connaissances acquises.

Module structuré conformément au décret législatif 81/08 et aux accords entre l'État et les régions

Évaluation des apprentissages : Le module se termine par des tests d’évaluation permettant de contrôler les connaissances acquises.

Il traite du principe d’égalité de traitement économique et réglementaire à l’égard des employés de l’entreprise utilisatrice, des règles du contrat avec l’ agence d’emploi (ApL) et des obligations de diligence, d’obéissance et de sécurité au travail.