Étude de cas · Documentation utilisateur
Documentation par tâches pour mobohubb
J’ai structuré et rédigé une documentation par tâches pour les quatre applications de mobohubb. Le portail sépare la configuration administrative des tâches de terrain et propose six parcours de prise en main à travers 86 guides.
- Auteur
- Christian Arango
- Rôle
- Rédacteur technique et ingénieur documentaire
- Site en ligne
- mobohubb.readme.io
- Capture
- Site public, 13 octobre 2026
Le problème
Quatre applications, plusieurs tâches de lecture
mobohubb aide les équipes mobiles à gérer les plannings, le pointage, les tâches, les formulaires et les points de contrôle QR/NFC. Ses lecteurs vont des administrateurs dans un portail web aux équipes de terrain sur un téléphone ou un kiosque partagé.
86 guides par tâches répartis entre quatre applications
941 captures placées étape par étape sur 83 pages sur 86
74 guides rédigés sous forme de procédures numérotées
~40k mots d’explications publiées
Architecture de l’information
Organiser l’aide par application, puis par tâche
Les lecteurs arrivent en sachant quelle application ils utilisent, pas quelle fonctionnalité il leur faut. Chaque application a donc sa propre barre latérale, calquée sur ses menus.
Les versions ReadMe comme sélecteur d’applications
Chaque application vit dans sa propre version ReadMe, si bien que l’en-tête remplace toute la barre latérale sans maintenir quatre projets.
Séparer l’administration du travail de terrain
La configuration reste dans Portal, si bien que les équipes de terrain ne parcourent jamais de réglages inutiles.
Produit bilingue, documentation en anglais
Le portail fonctionne en espagnol ou en anglais ; les guides traitent le changement de langue comme une tâche à part entière.
Voir les sections et le nombre de guides de chaque application
| Application | Sections | Guides |
|---|---|---|
| Portal/docs | Prise en main · Tableau de bord · Profil · Administration du site · Configuration · Configuration des rapports · Productivité · Planning · Collaboration | 52 |
| Mobile app/v1.2/docs | Prise en main · Profil · Fonctionnalités · Menu latéral · Planning · Alertes | 27 |
| Web app/v1.3/docs | Aperçu · Connexion · Prise en main | 3 |
| Kiosk app/v1.4/docs | Aperçu · Connexion · Prise en main pour administrateur de site · Prise en main pour utilisateur | 4 |
Voir comment la page d’accueil a été construite
Un seul bloc HTML sur la page d’accueil de ReadMe, avec sa propre feuille de style limitée à ce bloc. Il ne pose qu’une question : « Quelle application utilisez-vous ? » Quatre grandes cartes y répondent et ouvrent le premier guide de chaque application.
Une marque sans budget de thème
Un dégradé doux et des cartes en verre dépoli rehaussent l’apparence standard de ReadMe sans développer de thème personnalisé.
Pleine largeur dans ReadMe
Des overrides sur le conteneur de contenu ReadMe retirent sa largeur et son padding pour que le fond s’étende d’un bord à l’autre.
Pied de page aux couleurs de la marque
Logo, copyright et liens sociaux dans la couleur du produit, puis une pile centrée sous 600 px.
/* Frosted-glass app cards */
.card {
background: rgba(255, 255, 255, 0.6);
border: 2px solid rgba(234, 241, 251, 0.3);
border-radius: 20px;
backdrop-filter: blur(8px);
transition: transform 0.2s;
}
.card:hover { transform: translateY(-4px); }Rédaction
Garder les instructions au plus près de la tâche
Les équipes de terrain lisent sur leur téléphone, pendant leur service, souvent pour une seule tâche. Chaque guide les aide à trouver leur étape et à la comparer à l’écran.
- 63 sur 86
Le résultat d’abord
Les guides commencent par « In this guide you’ll learn » : le lecteur sait en quelques secondes qu’il est sur la bonne page.
- 941 captures
Un écran pour chaque étape
Les captures de téléphone restent étroites, comme l’appareil ; celles de Portal sont larges.
- Style
Mettre en évidence l’élément à toucher
Des étapes à l’impératif, avec le libellé exact de l’interface en gras : touchez Take a break.
- 42 guides
Des notes là où surviennent les erreurs
Un callout à l’étape exacte où le lecteur peut se tromper, par exemple sur les informations de connexion à utiliser.
Voir le début du guide Time Clock, en Markdown
# Time Clock
Discover how to use the **Time Clock** feature in mobohubb to log work
hours and manage breaks.
**In this guide you'll learn**
* How to **clock in** and **clock out** with the Time Clock
* The differences between **automatic**, **manual**, and **no-break** modes
* How to record **breaks** and review a summary of hours worked
## Clock in
1. Tap the **Time Clock** icon in the footer.
2. (Optional) add a note.
3. Press and hold the clock button until the **green ring** completes (≈ 5 s).
<Image align="center" border={true} width="30%" src="…" />Prise en main
Un point de départ pertinent pour chaque public
Au lieu d’une seule page de démarrage, le portail propose six parcours rapides, chacun rédigé pour un public et une tâche.
Des liens croisés plutôt que des répétitions
Les parcours rapides renvoient aux guides complets au lieu de les répéter.
Des onglets pour les visites d’interface denses
Les écrans chargés se visitent une zone à la fois, avec les onglets ReadMe.
Un contenu tenu à jour
La plupart des guides ont été mis à jour entre mars et juin 2025, avec des modifications jusqu’en mai 2026 au fil des changements d’interface.
Voir les six parcours rapides et ce que couvre chacun
| Public | Guide | Ce qu’il permet de réaliser |
|---|---|---|
| Nouvelles organisations | New Users: Quick Start Guide | L’assistant de configuration, puis cinq étapes suivies — Branding, Scan Point, Task, Form/Checklist et Invite your team —, chacune associée à l’indicateur de progression 1/5–5/5 du portail. |
| Clients existants | Existing Users: Quick Start Guide | Passer du portail classique au nouveau : se connecter avec ses identifiants actuels et retrouver les outils connus dans la nouvelle interface. |
| Équipes de terrain | Mobile App: Quick Start Guide | Se connecter, scanner des codes QR, utiliser la pointeuse, accomplir des tâches et remplir des formulaires. |
| Personnel de bureau | Web App: Quick Start Guide | Se connecter, choisir un site, naviguer et travailler sur des formulaires et brouillons dans le navigateur. |
| Administrateurs de site | Kiosk: Site Administrator Quick Start | Transformer une tablette ou un iPad en borne d’enregistrement partagée et la configurer pour chaque site. |
| Utilisateurs du kiosque | Kiosk: User Quick Start | Pointer les arrivées, les départs et les pauses sur un appareil partagé avec un code PIN et une photo. |
Le résultat
Ce que démontre le portail publié
Analyse des publics
Des parcours séparés pour les administrateurs, le personnel de bureau, les équipes de terrain et les utilisateurs du kiosque.
Rédaction procédurale et visuelle
74 guides pas à pas avec résumé du résultat, libellés exacts de l’interface et 941 captures dimensionnées selon l’appareil représenté.
Front end sur une plateforme hébergée
Une page d’accueil HTML/CSS personnalisée dans ReadMe, avec les versions réutilisées comme sélecteur d’applications.
Maintenance
Des guides alignés sur une refonte du produit plus d’un an après le lancement.
Documentation obsolète
Lien rompu
Guide manquant