Module 322 - Concevoir et implémenter une interface utilisateur

Conception et implémentation d'une interface utilisateur

Revue de l'exercice CP06

des volontaires ?

Règles et normes de conceptions

Règles en matière de design

  • Ensemble de principes aidant à créer des interfaces utilisables

 

  • Il n'existe pas de règlement "défini", mais on retrouve souvent :
    • La cohérence
    • La simplicité
    • La visibilité
    • Le feedback

Guide de style

  • Document standardisant les éléments visuels et interactifs d'une interface utilisateur

 

  • Permet d'assurer une cohérence visuelle et fonctionnelle

 

  • Essentiel pour la collaboration entre les designers et les développeurs

Guide de style

  • Un guide style se compose souvent des éléments suivants :
    • Les couleurs
    • La typographie
    • L'iconographie
    • Les grilles et mises en page
    • Les composants UI

 

  • Permet de clarifier les attentes en termes de design
  • Permet de s'assurer que le graphisme sera homogène

Guide de style

Critères ergonomiques (ISO)

  • Les normes internationales de standardisation (ISO) fournissent des recommandations pour les interfaces

 

  • Vise à minimiser l'effort cognitif et renforce la compréhensibilité des interfaces

Critères ergonomiques (ISO)

  • ISO 9241
    • Ergonomie des systèmes interactifs
    • Efficacité, productivité, confort d'utilisation
    • Minimiser l'effort cognitif
  • ISO 16982
    • Accessibilité
    • Facilité d'utilisation pour tout types d'users
    • Recommandation d'intégration de fonctionnalités pour personnes malvoyantes
  • ISO 25010
    • Qualité des logiciels
    • "Utilisabilité"

Pour approfondir...

Laws Of Ux

Cartographie des interactions

Diagramme de cas d'utilisation

Diagramme de cas d'utilisation

 

  • Concept utilisé en développement logiciel et en design de produit ou services

 

  • Décrit comment un système peut être utilisé pour effectuer certaines tâches

 

  • Montrer l'interaction entre l'utilisateur (acteur) et le système

Diagramme de cas d'utilisation

  • Vulgarisation, simplification des fonctionnalités

 

  • Planification des fonctionnalités prioritaires

 

  • S'assurer que l'interface va répondre aux besoins des utilisateurs

Diagramme de cas d'utilisation

  • Acteurs
    • ​Donner des noms significatifs
    • Les acteurs principaux sont à gauche du diagramme
    • Les acteurs n'interagissent pas entre eux
  • Use case
    • ​Les use case commencent par un verbe
    • Le nom doit être descriptif (Imprimer --> Imprimer une facture)
    • Ordonner les actions logiquement
    • Les use case internes au système doivent être intégrés dans un rectangle représentant le système en question

Diagramme de site

Maquettage

Maquettage

  • Processus fondamental dans la conception d'interfaces digitales
  • Visualiser et organiser les éléments d'une interface
  • 3 étapes clés
    • Wireframe
    • Maquette
    • Prototype
  • Garantir une harmonie entre ergonomie, design et UX
  • Faciliter la collaboration

Wireframes

  • Représentation statique de basse fidélité d'un site web ou application
  • Définit la structure et architecture de l'information
  • Donne une vue d'ensemble des interactions prévues
  • Sans détails graphiques !
    • Squelette du futur design
  • Peut être réalisé de 2 façons
    • Sur papier
    • Sur logiciel

Wireframes

Maquette

  • Ajout d'éléments graphiques
    • Couleurs
    • Typographies
    • Images
  • Donne une perspective visuelle du produit final
  • Concevoir une interface plaisante respectant l'ergonomie
  • Identifier certains détails manquant ou incohérence sur l'incompatibilité graphiques
  • Utilisation d'outils ciblés (Figma / Lunacy)

 

Maquette

Prototype

  • Représentation graphique haute-fidélité
  • Simulation du projet final
  • Tester les interactions et hypothèse d'expérience utilisateur
  • Aussi appelé "prototype cliquable"
  • Tester si le site web sera adapté aux utilisateurs
  • Imite les interactions que rencontrera l'utilisateur
  • Permet d'identifier les erreurs de parcours ou d'utilisabilité
  • Analyser en condition proche de la réalité les interfaces et trouver des problèmes
  • Utilisation d'outils de prototypage (Figma / Adobe Xd)

Prototype

CAS PRATIQUES

  • CP07
    • ​Réaliser un diagramme de cas d'utilisation pour un système de gestion bibliothécaire
    • https://draw.io/
    • Rendre le fichier .draw.io et .pdf

 

Module 322 - Concevoir et implémenter une interface utilisateur

Conception et implémentation d'une interface utilisateur

partie 2

Aujourd'hui...

  • Pas de théorie

 

  • Atelier de prototypage

 

  • Conception itérative
    • Wireframe
    • Maquette
    • Prototype

CP09

 

  • Conception itérative d'une petite application mobile
    • ​Wireframes
    • Maquette
    • Prototype
  • Par groupe de 4
    • ​COLLABORATION !!!!!!!!

CP09

 

  • Wireframe
    • Brainstorming
    • papier / stylo
    • sketch / squelette de l'application
  • Maquette
    • Création graphique du wireframe
    • Écrans statiques
    • couleurs, typo, icônes, ...
  • Prototype
    • ​​Prioriser un scénario d'utilisation
    • Transition, Animation, interactivité des maquettes

CP09

 

  • 2h15 pour le tout

 

  • Prévenez moi à la fin de chaque partie et je valide

 

  • Travaillez ensemble
    • ​Brainstorming
    • Projet collaboratif sur Figma
    • Séparez-vous le travail !

CP09

 

  • L'application
    • ​Application mobile simple permettant à l'utilisateur de se localiser sur une map et de voir les toilettes aux alentours
    • L'utilisateur peut choisir les toilettes et effectuer un itinéraire jusqu'à celles-ci
    • Il peut soit cliquer sur des toilettes sur la map, soit voir une liste de toilettes à proximité
    • L'utilisateur peut ouvrir un menu de l'application lui proposant les options "Mon compte" et "Support"