Portfolio: tableau de bord pour mobile

Le contexte: il s’agit au départ d’une interface existante assez riche, adaptée pour les grands écrans. J’ai créé une maquette qui s’adapte automatiquement au format mobile.

L’application existante (grands écrans)

Pour voir la maquette en action, cliquer ici. Pour voir la version mobile, réduire la taille du navigateur.

L’application se présente comme un tableau de bord. J’ai essentiellement repris le style de l’application existante. Les différentes parties sont détaillés dans le deuxième écran.

Actions possibles de l’utilisateur

• Lorsque l’utilisateur clique sur une rangée dans la liste des clients, les informations relatives à ce client s’affichent dans la partie droite et inférieure du tableau de bord

• Le panneau de statut est toujours visible. Il lui donne en permanence une vue globale de la situation, et ce quel que soit le détail de la vue qu’il a couramment sélectionné. Le panneau donne des évaluation sur les fonctions essentielles à surveiller. L’utilisateur peut aussi l’ouvrir pour voir les causes ou un détail concernant les statuts affichés:

• les différentes rubriques dans le panneau de statut sont des liens vers différents tableaux de bord (non implémenté dans la maquette).
• l’utilisateur peut se loguer/déloguer

Passage au mobile

On voit qu’on a une grande quantité d’information sur un seul écran, et l’application s’étend sur plusieurs écrans.

D’abord le tableau de statut doit être visible à tout instant. Pour ce faire j’ai mis une barre en bas de l’écran:

A faire: rajouter une image de fond discrètes sur les cellules (derrière le texte) pour les daltoniens

Quand l’utilisateur clique dessus, ça fait apparaitre un pop-up:

Pour sélectionner un dashboard, l’utilisateur peut soit:

• faire une sélection dans la liste déroulante en haut de la première page
• scroller vers le bas dans la liste
• ou bien cliquer dans l’un des items du pop-up

Une fois le dashboard Missing Work sélectionné, on voit la liste des clients.

On peut sélectionner les colonnes à afficher en cliquant sur le bouton Colonnes.

A noter la navigation en haut: on peut remonter vers la page d’accueil.

Quand on clique sur un client dans la liste, on va vers un troisième écran: