Réaliser des interfaces ergonomiques et réfléchies

Objectifs (1/2)

• Décrire les éléments clés qui composent une interface ergonomique et réfléchie
• Identifier dans une interface quels sont les éléments ergonomiques et réfléchies ou non
• Lister les outils qui permettent de concevoir une interface ergonomique et réfléchie

Objectifs (2/2)

• Lister les outils qui permettent de valider qu'une interface est accessible et ergonomique

Avertissement

• Développer des interfaces ergonomiques et réfléchies est un métier à part entière
• Longues années d'études et d'expérience
• Nous ne sommes pas des experts
• De ce fait, nous allons vous transmettre dans ce cours est une introduction à ce domaine

Qu'est-ce qu'une interface ergonomique et réfléchie ? (1/2)

• Une interface qui est facile à utiliser et à comprendre
• Une interface qui est agréable à utiliser et accessible à tous
• Minimise les erreurs et maximise la satisfaction et l'engagement

Qu'est-ce qu'une interface ergonomique et réfléchie ? (2/2)

Basé sur quelques principes de design (bon sens/subjectifs):

Comment réaliser une interface ergonomique et réfléchie ?

On peut utiliser la méthode suivante pour réaliser une interface ergonomique et réfléchie :

1. Définir les besoins de l'utilisateur
2. Définir les objectifs et fonctionnalités de l'application
3. Définir les éléments, structure et design, de l'interface
4. Définir les interactions de l'interface
5. Définir les tests utilisateurs et accessibilité

Exemples d'interfaces que nous ne trouvons pas ergonomiques et réfléchies

Voici quelques exemples d'interfaces que nous ne trouvons pas ergonomiques et réfléchies.

Nous allons les analyser ensemble.

Garmin Connect

Les points positifs

• Beaucoup de statistiques
• Interface simple pour créer des entraînements

Les points négatifs

• Interface peu intuitive
• Navigation peu efficace

Discord

Les points positifs

• Application complète et riche en fonctionnalités

Les points négatifs

• Interface très chargée
• Difficulté à trouver ce que l'on cherche

X/Twitter

Les points positifs

• Application simple et efficace

Les points négatifs

• Sans compte, l'application est quasi inutilisable
• "Nagging" pour créer un compte

Exemples d'interfaces que nous trouvons ergonomiques et réfléchies

Voici quelques exemples d'interfaces que nous trouvons ergonomiques et réfléchies.

Nous allons les analyser ensemble.

WhatsApp

Les points positifs

• Application très simple et très efficace : réalise une seule tâche à la perfection

Les points négatifs

• Peu de possibilité de personnaliser l'interface

CFF

Les points positifs

• Application très sobre et bien structurée

Les points négatifs

• Difficulté à acheter des billets internationaux
• Trop de types de billets

Loading Artist

Les points positifs

• Interface simple et efficace pour consulter des bandes dessinée

Les points négatifs

• Interface très simple, mais peut-être trop chargée ?

Outils pour concevoir une interface ergonomique et réfléchie

• Papier et crayon (old-school mais souvent le plus efficace)
• Figma
• Penpot (une alternative open-source à Figma)
• Balsamiq
• Wireframe.cc
• Adobe Illustrator
• Adobe Photoshop

Outils pour valider qu'une interface est accessible et ergonomique

• Contrastes
• Palettes de couleurs / Charte graphique
• Accessibilité

Validation des contrastes et palettes de couleurs

• Poline : palette de couleurs et validation des contrastes
• Geenes Accessibility Editor : éditeur de couleurs et validation des contrastes

Outils généraux d'accessibilité web

• WAVE Evaluation Tool : analyseur d'accessibilité web
• PageSpeed Insights : analyseur de performance et d'accessibilité web

À vous de jouer !

• Prendre connaissance du support de cours
• Poser des questions si nécessaire

Sources (1/3)

• Illustration principale par Samule Sun sur Unsplash
• Illustration par Aline de Nadai sur Unsplash
• Illustration par Bernard Hermant sur Unsplash
• Illustration par Nikita Kachanovsky sur Unsplash
• Illustration par Elena Mozhvilo sur Unsplash
• Illustration par Elena Mozhvilo sur Unsplash