Principes de conception d'interface d'application en action : L'interface utilisateur du suivi de tournois de Tim Corey

Démarrer le design de l'UI

Tim commence par dire que l'étape de conception de l'interface utilisateur est la partie amusante du développement d'application parce qu'elle nous permet de voir une version approximative de ce à quoi l'application ressemblera. Il souligne qu'il utilise un tableau blanc ou un bloc-notes pour esquisser les formulaires, même s'il admet qu'il n'est pas un artiste. Tim insiste sur le fait que les dessins n'ont pas besoin d'être parfaits ou proportionnés — ils ont juste besoin de montrer l'idée de base de ce que les formulaires doivent inclure et comment ils doivent fonctionner.

Le point principal de Tim ici est que la phase de design de l'UI concerne la planification, pas la beauté. Il insiste sur le fait que l'objectif est d'identifier quels formulaires/pages sont nécessaires et ce que chacun doit contenir. Cette approche est cruciale pour la clarté et aide les développeurs et les designers à rester alignés pendant le processus de design.

Où commencer à concevoir

Tim aborde une question fréquente : " Où commencer ? " Il explique qu'il n'est pas important par où vous commencez. Si vous n'êtes pas sûr d'une partie de l'application, commencez par la partie dont vous êtes sûr. Une fois que vous avez terminé les parties claires, vous aurez souvent une meilleure idée des sections incertaines.

Il note également que le fait de construire un élan aide — après avoir conçu quelques formulaires, vous vous sentirez confiant et prêt à continuer. Avec cette mentalité, Tim choisit de commencer avec le formulaire de visualisation du tournoi.

Cette méthode supporte de bons flux utilisateur, car elle encourage les designers et les développeurs à se concentrer sur la façon dont les utilisateurs vont naviguer d'un écran à l'autre.

Pourquoi ne pas concevoir dans Visual Studio d'abord ?

Tim explique que vous ne devriez pas commencer à concevoir dans le Windows Form Builder à l'intérieur de Visual Studio. Il avertit que cela entraîne deux principaux problèmes :

1. Vous perdez du temps à peaufiner les mises en page et les contrôles au lieu de planifier le design.

2. Vous court-circuitez le processus de design, ce qui signifie que vous pouvez rater de meilleures options ou laisser des problèmes cachés parce que vous ne voulez pas refaire votre travail.

Tim dit que concevoir sur papier permet d'effacer, d'essayer de nouvelles idées, et même de tester des concepts "farfelus" qui pourraient devenir de grandes solutions. C'est un principe crucial en conception UI car il maintient l'accent sur ce que l'application doit faire, plutôt que sur son apparence dans le premier jet.

Formulaire du visualisateur de tournoi

Tim présente son premier design approximatif de l'UI : le formulaire du visualisateur de tournoi. Il explique que ce formulaire affichera toutes les informations sur un tournoi spécifique.

Formulaire de création de tournoi

Tim passe ensuite au formulaire de création de tournoi, qu'il dit probablement nécessaire après le visualisateur de tournoi.

Formulaire de création d'équipe

Tim conçoit ensuite le formulaire de création d'équipe, qui inclut :

• Nom de l'équipe

• Sélectionner des membres d'équipe

• Ajouter un nouveau membre

Tim souligne l'importance de la cohérence entre les formulaires. Il dit que la mise en page du nom de l'équipe devrait correspondre à celle du nom du tournoi pour créer un design cohérent.

Il explique également que ce formulaire permet aux utilisateurs d'ajouter des membres d'équipe existants depuis une liste ou de créer de nouveaux membres directement dans le formulaire. Tim dit qu'il préfère garder la création de membres au sein du même formulaire pour éviter les couches de navigation profondes (c'est-à-dire ouvrir plusieurs formulaires).

Il explique que l'ajout de plusieurs couches serait déroutant et lent. Par conséquent, il choisit de garder le design compact et convivial. Cela soutient une interface d'application simple et intuitive qui réduit le temps nécessaire aux utilisateurs pour accomplir des tâches.

Formulaire de création de prix

Le formulaire de création de prix de Tim est simple. Il inclut :

• Numéro de place

• Nom de la place

• Montant de prix

• Pourcentage de prix

Tim note que l'un des deux derniers champs seulement doit être utilisé à la fois (soit le montant soit le pourcentage). Il dit que le formulaire nécessitera une logique de validation plus tard, mais qu'à des fins de design, la mise en page est simple. C'est un bon exemple de la façon dont les principes de design aident à créer une interface polie et fonctionnelle.

Formulaire de gestion des tournois

Enfin, Tim discute du formulaire de gestion des tournois, qu'il admet ne pas être complètement satisfait. Il explique le défi : Les applications Windows Forms ont généralement un formulaire principal qui reste ouvert. Si le formulaire principal se ferme, l'application s'achève.

Cela pose un problème pour un suivi de tournoi car les utilisateurs peuvent vouloir plusieurs tournois ouverts à la fois. Tim avait initialement envisagé d'ouvrir automatiquement le formulaire de création de tournoi si aucun tournoi n'existe. Mais il réalisa que fermer le formulaire de création de tournoi mettrait fin à l'application.

Ainsi, Tim conçoit un formulaire de tableau de bord central qui reste ouvert en tout temps. Ce tableau de bord permet aux utilisateurs de :

• Voir les tournois existants

• Charger un tournoi

• Créer un nouveau tournoi

Tim explique que le tableau de bord restera ouvert même si les autres formulaires sont fermés. Il agit comme le point central de navigation de l'application. Alors qu'il admet qu'il pourrait sembler " stupidement simple ", il dit que cela fonctionne, et il pourrait plus tard ajouter des éléments de conception ou des animations pour le rendre plus attrayant visuellement.

Conclusion

Tim conclut la vidéo en soulignant que le but est simplement d'identifier les formulaires nécessaires et de décider ce que chaque formulaire doit afficher. Il dit que, une fois l'UI conçue, l'étape suivante est la planification logique, où il planifiera comment les éléments UI se connectent au modèle de données et au back-end.

Le processus de design UI de Tim montre que concevoir une interface d'application repose sur la planification, la cohérence et la clarté — pas sur la création de visuels parfaits d'emblée. Cette approche aide les développeurs et les designers à rester alignés et assure que l'application finale est facile pour les utilisateurs à naviguer et utiliser.