# Principes de design

Papillon est un projet né d'un besoin critique d'**expérience utilisateur**. A l'ère ou nos appareils sont dotés d'interfaces toujours plus claires, inclusives et intuitives, le monde de l'éducation prend encore du temps à rattrapper son retard. C'est pourquoi l'interface de Papillon et de ses services se construit autour de principes simples.

### Informer en un minimum d'actions

En un minimum de clics, l'utilisateur doit avoir accès à l'information. Pour cela, on peut distinguer plusieurs types d'informations :&#x20;

<details>

<summary><i class="fa-circle-info">:circle-info:</i>  <strong>L'information</strong></summary>

C'est ce pour quoi l'utilisateur ouvre l'app.

* Une moyenne générale
* Un devoir a rendre
* La salle ou se trouve son prochain cours
* Le solde de son compte cantine.

Tout cela est une information. Dans la mesure du possible, les informations les plus évidentes et les plus sensibles à la durée doivent être visibles dans l'immédiat.

Les informations secondaires, qui rentrent dans le détail, doivent elles être catégorisées intelligemment sous un composant représentant l'information primaire.

</details>

<details>

<summary><i class="fa-computer-mouse-button-left">:computer-mouse-button-left:</i>  <strong>Les actions</strong></summary>

C'est ce que l'utilisateur peut faire à un instant donné. Les actions clés doivent idéalement être visibles sans aucune intéraction préalable afin de maximiser la valeur perçue de l'interface.

</details>

<details>

<summary><i class="fa-triangle-exclamation">:triangle-exclamation:</i>  <strong>Les contraintes</strong></summary>

Ce sont des points de vigilance auxquels l'utilisateur doit être informé pour pouvoir agir en conséquence :&#x20;

* Si la fiabilité d'une information n'est pas garantie (moyenne estimées)
* Si une erreur s'est produite
* Si une intégration repose sur un service externe

</details>

### Faire comme chez soi

Papillon est une application multiplateforme. Cependant, pour familiariser l'utilisateur avec l'environnement de l'application, elle doit appliquer les principes de design de sa plateforme hôte.

* Sur iOS, elle peut adopter le Liquid Glass, les animations non-linéaires, les ombres portées, ainsi que les composants natifs SwiftUI
* Sur Android, elle peut adopter les palettes de couleur Material You, les animations cubiques, les élevations, ainsi que les composants natifs Jetpack Compose

Il faut pouvoir identifier en un coup d'oeil sur quel appareil fonctionne l'application.

### Rester honnête

Ne pas mentir. Ne pas complexifier. Ne pas contourner.

Si une information risque d'avoir une conséquence majeure pour l'utilisateur, il faut qu'elle soit expliquée de la manière la plus claire possible. Aucun modèle de design ayant pour intérêt de dévier l'utilisateur de son intention principale doit être utilisé dans l'application.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.papillon.bzh/design/principles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
