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

• CP08
  • ​Réaliser le diagramme de site pour le site www.divtec.ch
  • https://coggle.it/ --> Diagramme "MindMap"
  • Screen + partage du diagramme en ligne

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"