UI/UX
Contexte
2 sites doivent être déployés, un destiné au personnel de l'AFD, l'autre au grand public. La seule différence entre les 2 sites web étant que le site interne devra afficher en plus l’information au niveau Direction Régionale ("DR", organisation propre à l’AFD). Pour rappel, une direction régionale n'est qu'un groupe de pays.
Il devra y avoir le moins de différences possible entre les 2 sites au niveau du développement afin de ne pas engendrer du travail supplémentaire et/ou dédié à chaque site. Il faudra donc pouvoir paramétrer au dernier moment, au déploiement, cette option DR.
- L'application Python doit permettre de visualiser les mêmes données que l'application Shiny.
- Les données consistent en des séries temporelles par pays, issues de différentes sources (API DBnomics et fichiers CSV statiques).
- La visualisation de ces séries prend différentes formes ("indicateurs") : carte et graphique (ligne, pyramide des âges...)
Interface
L'appli Shiny (captures d'écran) doit être utilisée comme modèle général pour l'interface. Les principaux points de différences sont liés au besoin supplémentaire d'afficher sous forme de graphique les séries pour chaque pays, une "vue graphique" qui n'existe pas dans l'appli Shiny.
L'interface est composée d'une navbar en haut, d'une sidebar à gauche et le reste de l'écran sert à afficher la vue en cours.
- Navbar : nom de l'appli ("Tout Afrique"), logos, divers liens...
- Sidebar : contient la liste complète des catégories et des indicateurs au sein de ces catégories (voir liste ici).
- Vue : chaque vue affiche l'indicateur sélectionné dans la sidebar, sous forme de carte ou de graphique.
Indicateurs (Sidebar)
La sidebar avec la liste des indicateurs, groupés par catégorie, est fixe dans toute l'application. C'est le menu principal de navigation au sein de l'application.
L'utilisateur clique sur un indicateur pour le sélectionner/déselectionner :
- Au moins un indicateur doit être sélectionné (par défaut le premier dans la liste donnée par l'API).
- Dans la vue "Carte", un seul indicateur peut être sélectionné.
- Dans la vue "Graphique", plusieurs indicateurs peuvent être sélectionnés.
La plupart des indicateurs peuvent être sélectionnés et visualisés partout. Quelques exceptions :
- L'indicateur "Pyramide des âges" de par sa nature unique ne peut être affiché que dans la vue "Graphique".
- Certains indicateurs ne peuvent pas être affichés dans la vue "Carte" par DR.
Le cas échéant, si la sélection est faite, il faudra afficher un message indiquant que cet indicateur ne peut pas être visualisé de cette façon.
Vues
2 vues :
- Carte
- Graphique
Un menu permet de passer d'une vue à l'autre, par exemple sous forme d'onglets au bas de l'UI, de façon similaire à l'exemple suivant :
Vue carte
Ticket dédié : #2 (closed)
Vue graphique
Ticket dédié : #3 (closed)