web-dev-qa-db-fra.com

Afficher un tas de boutons sur une seule page

Je développe actuellement une application dans UWP et je dois afficher quelques boutons sur une page. Tous ces boutons sont nécessaires et je les veux sur la même page car ils sont destinés à la maintenance/au débogage d'un appareil connecté via le port série.

Donc, fondamentalement, j'ai un tas de boutons que je dois en quelque sorte afficher. Mais je ne veux pas les mettre côte à côte car je ne trouve pas cela très beau/convivial.

Existe-t-il un moyen possible de les afficher de manière conviviale?

Salutations, Daniel

ÉDITER:

Les boutons sont actuellement sur deux pages différentes. Je me suis d'abord concentré sur les fonctions des boutons, mais comme ils sont terminés, je dois apporter un peu d'ordre/design.

Je ne suis pas du tout un designer ou une personne créative. J'écris normalement du code ...

Page 1: enter image description here

Page 2: enter image description here

5
Daniel

Avant de présenter un concept sur la façon de trier ces boutons, je voudrais commenter votre "Je ne suis pas un designer ou une personne créative du tout. J'écris normalement du code ... " excuse. Hors sujet, donc dans une boîte.

Pensez à votre logiciel de cette façon - vous voulez que les gens l'utilisent, n'est-ce pas? Ensuite, vous devriez rendre l'interface utilisateur attrayante car vous ne voulez pas entendre les commentaires "le logiciel fonctionne bien mais l'interface utilisateur est horrible" ou même "je ne pouvais pas passer à travers l'interface utilisateur hostile donc je ne sais pas si le logiciel est utile". Certaines personnes peuvent avoir la patience de découvrir votre flux mental (exprimé dans l'interface utilisateur proposée), d'autres non. Croyez-moi, j'y suis allé, je l'ai fait et je ne reviendrai jamais. Et ce site est un excellent endroit pour obtenir un aperçu de la conception d'applications conviviales.

Revenons maintenant à votre question d'origine. Comme je l'ai mentionné dans le commentaire, vous pouvez regrouper les boutons. Dans la première page, je vois deux groupes: Demandes et Connexion . Il existe également un bouton général Annuler toutes les tâches qui, je suppose, annule toutes les tâches de demande. Utilisez la règle DRY (ne vous répétez pas)) et ajoutez une certaine dépendance dans les boutons activés pour présenter quelque chose comme cette:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Maintenant, les informations d'état indiquent si l'appareil est connecté ou non et le bouton (un au lieu de deux) change sa fonction entre Connect et Déconnectez en fonction de l'état.

Tous les boutons qui n'ont pas de fonctionnalité pour le moment doivent être désactivés (grisés), c'est-à-dire que si l'appareil est déconnecté, il n'est pas possible de demander les Noms , Marges etc. (si j'assume correctement la logique de votre appareil). La même chose s'applique à Annuler toutes les tâches - s'il n'y a aucune tâche en attente, le bouton doit être désactivé.

Cela donne à l'utilisateur des informations supplémentaires sur l'état du logiciel. Vous pouvez demander "pourquoi un état général de l'appareil a-t-il été signalé au tout début?" - Je trouve ce statut crucial pour le fonctionnement du logiciel et c'est pourquoi il doit être signalé au tout début.

Et maintenant pour la deuxième page, encore une fois les boutons qui se contredisent, comme Life test et Stop life test peut être combiné en un seul qui change son étiquette en fonction de l'état de l'appareil. Le reste peut être regroupé logiquement, par exemple comme ceci:

mockup

télécharger la source bmml

Cette fois, je me suis abstenu de DRY règle un peu pour une raison - pour les paramètres, la suppression des "paramètres" Word sur chaque bouton les rendrait un peu sans ambiguïté - au nouvel utilisateur ou La réinitialisation à l'utilisateur peut être trompeuse.

Peut-être une idée pour répéter les boutons (demander les protocoles 1 et 2) - s'il y aura plus de protocoles à l'avenir, pourquoi n'utilisez-vous pas une zone de liste déroulante (liste déroulante) pour sélectionner le protocole à demander?

De même, les boutons qui apportent des modifications irréversibles (comme la suppression de tous les protocoles) doivent être nommés explicitement afin que l'utilisateur sache ce qu'ils font.


J'espère que non seulement vous pourrez poursuivre votre projet mais aussi vous aurez une idée sur la façon d'aborder la partie visible du développement en général.

11
Mike