Application de bureau
Design d'application de tableau de sprint
Le design d'application Northwind Sprint Board réunit l'état du sprint, les responsables des tickets, les estimations et les blocages dans un espace de travail desktop lisible d'un coup d'œil.
Cas d'usage d'une application de tableau de sprint
- Planification de sprintExaminer le travail par statut, estimation, responsable et priorité.
- Opérations d'ingénierieMettre en évidence les tickets actifs, les bugs, les tâches de maintenance et les dépendances de revue.
- Revues de charge de travail de l'équipeComparer les points de contribution à côté du tableau du sprint en cours.
Points forts du design de l'espace de travail de sprint
- Workflow en quatre étapesBacklog, en cours, revue et terminé partagent une même vue.
- Vue d'ensemble de Sprint PulseL'avancement, les contributeurs et les blocages se trouvent à côté du travail en cours.
- Contexte au niveau du ticketChaque carte combine type, titre, responsable, points et identifiant.
- Blocage visibleNW-205 reste relié à sa dépendance de relecture du texte.
Le tableau de sprint, panneau par panneau
1 / 3
Tableau de sprint Northwind
Cet exemple officiel OpenDesign présente la Northwind Growth Squad pendant le Sprint 38, jour 6 sur 10. L'espace de travail desktop place le tableau au centre et garde une barre latérale Sprint Pulse visible à droite, ce qui permet de lire ensemble le travail opérationnel et le contexte de synthèse.
La barre supérieure pose le périmètre avant les cartes : « NORTHWIND / GROWTH SQUAD » est associé à « Sprint 38 · Day 6 of 10 ». Search tickets, Filter et New apparaissent à l'autre extrémité. Cet ordre facilite le passage de l'identification du sprint en cours à la recherche ou à l'ajout de travail, tout en réservant la zone principale à la comparaison des tâches.
Une barre de filtres sépare les contrôles du contenu des tâches. Les initiales des membres, les libellés Active sprint, Bug, Feature et Research, ainsi que les contrôles Group · Status et Sort · Priority rendent explicite l'organisation d'exemple du tableau. Le compromis est la densité : de nombreux choix de contrôle restent visibles, mais l'utilisateur comprend le regroupement prévu sans ouvrir un autre écran.
Revue de la charge de travail et des blocages
Ce design convient à une équipe qui examine ce qui attend, avance, est en revue ou est terminé. Les cartes suivent une structure répétée : une bande colorée de type de travail, un titre de tâche, un avatar de responsable, une estimation en points et un identifiant de ticket comme NW-241. Cette répétition permet de comparer des travaux différents sans perdre l'identité du ticket.
Les données d'exemple montrent aussi différents types de travail dans une même file. « Add empty-state illustration to onboarding step 2 » côtoie « Interview 5 new Enterprise admins about 2FA enforcement », tandis que « CSV export drops emoji from project names » fait apparaître un défaut comme une classe distincte. Les bandes de type distinguent Feature, Design, Research, Chore et Bug, mais l'anatomie commune des cartes garde ces catégories comparables.
Cette disposition privilégie le balayage visuel plutôt que la discussion détaillée d'un ticket. Une équipe voit que l'élément de recherche vaut 5 pts et que le problème d'export CSV vaut 1 pt, mais le tableau n'explique ni les règles d'estimation ni les critères d'acceptation. Ces détails nécessiteraient une vue de tâche plus approfondie dans une application en production ; ils sortent du design visible.
Le statut d'abord
La position dans la colonne indique l'état du workflow avant que le lecteur n'examine les métadonnées de chaque ticket.
Estimation et responsabilité
Les pastilles de points et les initiales rendent visibles la responsabilité et l'effort relatif au niveau de la carte.
Blocage avec pistes d'action
La barre latérale nomme NW-205, sa dépendance de relecture du texte et deux actions suivantes proposées.
Du tableau au Sprint Pulse
L'espace de travail se lit de gauche à droite : Backlog, In progress, In review et Done. Les badges affichés sont 5, 4, 3 et 6. Les trois premiers correspondent au nombre de cartes visibles, mais Done ne contient que quatre cartes malgré son badge de 6. La séquence de gauche à droite distingue toujours les étapes du workflow ; l'écart dans les compteurs d'exemple devrait être résolu avant d'utiliser le tableau comme donnée opérationnelle.
Des barres de progression n'apparaissent que sur plusieurs cartes In progress, notamment TOTP enrollment UI in member settings, Recovery codes, Fix focus-trap regression in command bar et 2FA challenge step. Leur présence sépare visuellement la progression active des cartes simplement affectées à un état. Comme le visuel ne définit pas ce que mesure la barre, il faut la lire comme un indice de progression illustratif et non comme une mesure d'avancement vérifiée.
La barre latérale change l'échelle de lecture, des tickets vers un résumé de sprint d'exemple. Elle affiche Completed 22 of 38 pts et liste Devon Park à 9 pts, Mira Reddy et Priya Banerjee à 5 pts chacune, et Caleb Renner à 3 pts. Ces valeurs de contributeurs totalisent 22, mais les quatre cartes Done visibles ne totalisent que 11 points. La source n'explique pas cet écart ; la barre latérale et le tableau ne doivent donc pas être traités comme un rapport de performance réconcilié.
Le dernier bloc de la barre latérale explicite le lien entre statut et dépendance. « 1 ticket needs unblock » identifie NW-205, décrit comme en attente d'une relecture du texte par Brand, avec « Mention @Sasha or move it back to backlog » comme consigne de suivi visible. Placer cela à côté du tableau rend la dépendance plus difficile à manquer, même si la barre latérale occupe un espace permanent qui pourrait sinon élargir la zone des tâches.
| État | Badge affiché | Cartes visibles | Rôle de lecture |
|---|---|---|---|
| Backlog | 5 | 5 | Travail en attente de démarrage actif |
| In Progress | 4 | 4 | Travail à l'étape active avec barres de progression illustratives |
| In Review | 3 | 3 | Travail en attente de revue ou de décision |
| Done | 6 | 4 | Cartes d'exemple terminées ; le badge ne correspond pas au nombre visible |
Limites du design visible
Cet artefact est un exemple de design d'application pour ordinateur, avec des noms, chiffres, contenus de tâches et affirmations illustratifs. Les captures établissent la composition visible, les libellés, le codage couleur, l'ordre et l'état d'exemple. Elles n'établissent pas l'existence d'un service de production connecté, d'un stockage persistant, d'une recherche opérationnelle, d'un filtrage, d'une création de tickets ou de mises à jour en temps réel.
Pour une adaptation, conservez la relation précise entre les quatre colonnes de workflow et la barre latérale Sprint Pulse. Une implémentation utile exigerait une définition explicite des totaux de points, des barres de progression, des actions sur les blocages et des changements d'état avant de les présenter comme des données opérationnelles. La source montre le contrat d'interface assez clairement pour prototyper ces états, mais pas assez pour affirmer que les contrôles les exécutent déjà.
Comment créer un design d'application de tableau de sprint dans OpenDesign
Définir le cadre de l'espace de travail
Créez un espace de travail desktop de sprint avec un en-tête Northwind Growth Squad, le contexte Sprint 38 et Day 6 of 10, les contrôles de recherche, Filter et New en haut à droite, une barre de filtres, quatre colonnes de workflow et une barre latérale droite persistante.
Ajouter les données du cas
Utilisez la structure d'exemple visible : les colonnes Backlog, In progress, In review et Done avec les compteurs affichés ; des cartes contenant le type de travail, le titre de la tâche, les initiales du responsable, l'estimation en points et l'identifiant du ticket ; et un récapitulatif Sprint Pulse avec l'avancement, les contributeurs et le blocage NW-205.
Invite suggéréeCréez un design d'application desktop de tableau de sprint pour la Northwind Growth Squad. Affichez Sprint 38 · Day 6 of 10, une barre de contrôles supérieure avec Search tickets…, Filter et New, une barre de filtres pour les membres et les libellés Active sprint, Bug, Feature et Research, quatre colonnes nommées Backlog, In progress, In review et Done, et une barre latérale droite Sprint Pulse. Utilisez des cartes illustratives avec type de travail, titre, initiales du responsable, points et identifiants. Incluez des barres de progression visibles uniquement sur certaines cartes de la colonne In progress et un blocage pour NW-205 en attente d'une relecture du texte. Considérez la recherche, le filtrage, la création, le stockage et les mises à jour comme des comportements proposés et non comme des services opérationnels.
Affiner la lisibilité et les indices d'état
Vérifiez que l'ordre des colonnes, les bandes de type colorées, les avatars des responsables, les pastilles de points, les identifiants de tickets, les filtres sélectionnés, les barres de progression et le panneau de blocage rose restent bien distincts sur des largeurs desktop. Gardez la barre latérale informative sans laisser croire que les totaux d'exemple sont des performances d'équipe mesurées.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception de wireframe de tableau de bord analytique
Un tableau de bord greybox OpenDesign cartographie un espace de travail analytique au moyen d’une barre latérale, de quatre emplacements KPI, d’un graphique schématique, de cinq lignes de tableau et d’annotations de mise en page bleues.
Application de bureau
Design d’application de boîte de réception de revue de code
Ce design d’application réunit demandes de revue, échecs CI, tickets assignés et activité dans un espace de travail lisible d’un coup d’œil pour le tri quotidien.
Application de bureau
Design de tableau de bord de performance des contenus
Un tableau de bord de contenus sombre relie les aperçus par plateforme à l’examen des graphiques, à la planification des brouillons et à une analyse approfondie des signaux d’audience et de conversion.
Application de bureau
Design de planificateur d'excursion à la journée
Planifiez six étapes minutées dans la ville fictive de Solara Bay, avec une carte illustrée, des estimations de marche et des avertissements utiles sur l'itinéraire.
Application de bureau