Salut à tous!
Aujourd’hui je bosse toujours sur les box de l’écran d’accueil, et j’ai travaillé notamment à la création d’une box “parfaite”.
L’objectif étant d’écrire des guidelines dans la documentation 
J’ai pris la box “User Presence” qui affiche qui est à la maison et qui est absent.
La box ressemble à ça:
Je vous mets ici le contenu que je vais mettre dans les guidelines.
Gestion des erreurs
La box doit gérer les erreurs et afficher un message approprié:
- En langage naturel (pas de dump de l’erreur JS)
- Dans la langue de l’utilisateur (via l’internationalisation native Gladys 4)
- Le message d’erreur doit être riche, pour chaque type d’erreur possible (erreur réseau, périphérique indisponible, etc…)
- L’erreur doit indiquer à l’utilisateur comment résoudre l’issue: La marche à suivre doit être claire, et ne doit pas emmener l’utilisateur vers les logs où vers des manipulations techniques. Si l’erreur n’est que temporaire, et qu’aucune actions n’est à prendre, indiquez-le.
- L’erreur doit être affichée dans le cadre de la box, et pas en dehors, afin que l’utilisateur comprenne le contexte de l’erreur.
Exemple:
Gestion des temps de loading
L’utilisateur doit savoir quand quelque chose se passe en arrière-plan. Si vous lancez une requête, vous devez l’indiquer dans l’UI avec le loader de Gladys 4 standard.
- Le loader doit être dans la box
- Attention, la box doit avoir une taille minimale pour que le loader ne soit pas compressé en haut de la box en petit.
- Pensez à retirer le loader si la requête échoue. Le loader ne se substitue pas au message d’erreur.
Exemple:
Gestion du live
Une box doit non seulement afficher des données, mais faire en sorte qu’elle reste à jour tout au long de son cycle de vie.
Le dashboard Gladys a pour objectif d’avoir un cycle de vie long, ainsi certaines boxs resteront affiché plusieurs jours/semaines/mois si l’utilisateur laisse l’onglet en pleine écran sur une tablette au mur.
Chaque box doit faire usage des web-sockets, ou à minima se rafraichir de façon périodique afin de rester à jour.
Exemple d’un rafraichissement live:
Taille de la box
Votre box affiche un ensemble de données qui sont probablement dynamiques. Faites attention aux tailles minimales et maximales des données.
Si vous affichez une liste, prenez soin de donner une taille maximale à la box et de demander au navigateur de mettre une scroll bar si la liste est trop longue. Cela évitera que votre box soit gigantesque si l’utilisateur a une installation de grande taille.
Si votre box est systématiquement trop longue, pensez à changer le concept de votre box, et permettez par exemple à l’utilisateur de sélectionner une sous-partie des données dans la configuration de la box.
Exemple de scroll bar :
Etats à vide
Si votre box peut-être vide, pensez à créer un état spécial en indiquant la marche à suivre pour que la box soit remplie.
Exemple:
Voilà, c’est les guidelines que je veux poster dans la documentation développeur
Au final, ces guidelines sont valables pour l’ensemble de Gladys, mais bon les box sont un bon exemple.
N’hésitez pas si vous trouvez des manquements à ces guidelines!