Est-il acceptable de placer un bouton d'action sur une barre d'onglets?
Envisagez une vue à deux onglets, dans ce cas, les tâches et les participants, dans laquelle, dans la vue des tâches, vous pouvez afficher les fiches des tâches. Dans ces fiches de tâches, vous pouvez modifier le contenu et les affecter aux participants.
Il serait également nécessaire de créer de nouvelles tâches et c'est là que se pose la question: Est-il acceptable d'avoir le bouton 'créer une nouvelle tâche' sur l'onglet de navigation 'Tâches'?
Voici le visuel où le bouton bleu marine de la barre d'onglets ajoutera une nouvelle tâche:
Je suis réticent à utiliser le bouton d'action flottant (FAB) parce que:
- l'ajout d'une tâche n'est pas nécessairement l'action la plus courante dans cette vue et
- le FAB n'est pas si couramment utilisé sur iOS, ni dans les directives iOS.
Cette conception est destinée aux plates-formes mobiles Android et iOS), de sorte que la réponse doit prendre en compte les deux pratiques de l'interface utilisateur.
Vous devez séparer les deux actions. Utilisez des onglets uniquement pour la sélection et pour ajouter une tâche, vous devez coller l'action au bas de la zone visible. Vos tâches peuvent être consultées en faisant défiler les onglets et en ajoutant une action
Voici la structure filaire du concept expliqué ci-dessus.
La catégorie de sélection et son action peuvent être distinctes, car elles risquent de dérouter la plupart des utilisateurs. Une séparation claire entre eux sera plus claire et c'est aussi une pratique standard pour les mobiles. Vous pouvez également envisager d'autres actions dont les utilisateurs pourraient avoir besoin à l'écran et les regrouper. Ont rapidement modifié le wireframe partagé précédemment par 'Shaz' pour expliquer la même chose. 
Sur mobile, il est préférable d'éviter d'enfermer un élément tactile dans un autre élément tactile.
Les différences d'affichage, de capteurs tactiles et d'anatomie de l'utilisateur peuvent rendre difficile pour certains utilisateurs d'activer la région souhaitée de manière cohérente.
Les mises en page de Shaz et Yobuddy adhèrent à ce principe, donc je pencherais vers l'un ou l'autre. La mise en page de Shaz est plus simple, mais la mise en page de Yobuddy sera plus propre si vous prenez en charge une interaction au-delà 'créer une nouvelle tâche' là-bas.
J'ai deux suggestions à considérer, veuillez donc lire attentivement et considérer les arguments pour chacune.
Bouton d'action flottant
Un bouton d'action flottant fournit l'action principale de l'écran sur lequel il apparaît. Je recommande fortement cette approche, mais vous avez exprimé votre inquiétude quant à leur utilisation dans la question, alors permettez-moi de les aborder:
- l'ajout d'une tâche n'est pas nécessairement l'action la plus courante dans cette vue
Bien que ce ne soit évidemment pas l'action la plus courante qui existe dans la vue, elle peut être l'action la plus importante pour une liste de tâches. Effectuez chacune des autres actions et examinez à quoi elles s'appliquent, comme je le ferai pour votre maquette:
- onglets Ils font partie de la structure de navigation de niveau supérieur, ils permettent à l'utilisateur d'accéder à la liste mais ils ne le font pas s'appliquent à la liste
- carte de tâche L'utilisateur peut cliquer directement sur la carte de tâche pour modifier ou afficher cette tâche individuelle, il s'agit d'une propriété de la tâche dans la liste car elle permet l'utilisateur doit changer la carte mais ne le fait pas modifier la liste (sauf pour mettre à jour le résumé affiché)
- attribuer comme le point précédent, cela permet de modifier la carte des tâches plutôt que la liste
Bien qu'il existe plusieurs actions que l'utilisateur pourrait entreprendre (et des actions susceptibles d'être utilisées plus que l'ajout de tâches), la création d'une nouvelle tâche peut être la seule action qui soit un comportement de la liste, plutôt qu'une action spécifique à une tâche particulière. S'il s'avère que c'est la seule propriété qui s'applique directement à la liste, alors un bouton d'action flottant est probablement l'outil le plus important pour le travail, sinon considérez la "Navigation inférieure" ci-dessous.
- le FAB n'est pas si couramment utilisé sur iOS, ni dans les directives iOS
S'il est vrai que ce n'est pas encore courant, il est utilisé et devient plus populaire à mesure que la conception matérielle se répand dans le domaine d'Apple, ainsi que depuis les applications Android conservant une conception d'interface unique. Plusieurs réponses sur cette question montre que le bouton d'action flottant est utilisé dans les applications iOS, y compris Spotify, l'interface Gmail actuelle (mise à jour pour suivre l'interface matérielle) et l'application iOS 11 Notes.
Notez également que, comme dans le cas Spotify ci-dessus, un bouton d'action flottant n'est pas nécessaire pour s'asseoir dans le coin inférieur droit. Les documents matériels en ont de bons exemples, mais à moins qu'un autre alignement ne rentre dans votre interface, je recommanderais la position ordinaire par souci de familiarité.
Navigation en bas
Ceci est une extension sur la grande réponse de Shaz pour fournir une alternative. Si mon offre précédente ne répond pas à vos préoccupations concernant l'utilisation d'un bouton d'action flottant ou si vous trouvez que vous avez besoin d'actions supplémentaires sur votre liste (telles que le tri/filtrage du contenu), je seconde la suggestion de shaz de placer l'option en bas de l'écran .
Je recommanderais d'utiliser la barre navigation du bas pour cette fonctionnalité. Ceci est destiné à la navigation, même s'il peut être judicieux de naviguer vers un écran de "nouvelle tâche", il peut être inapproprié de "trier" cette barre. Une solution ici pourrait être d'utiliser une feuille pour fournir des options de tri/filtrage, de sorte que le bouton "navigue" vers la feuille à cet effet.
Dernières pensées
Le bouton d'action flottant est l'approche la plus matérielle pour inclure cette option et peut ne pas être aussi déplacé dans ce but que vous le pensiez. La navigation en bas, tout en n'étant pas strictement l'utilisation correcte du composant, rendra l'option convenablement visible pour les utilisateurs d'iOS ou d'Android. Si aucune de ces options ne suffit un simple trois points men dans la barre d'outils (comme illustré dans onglet exemples mobiles ) serait toujours plus en ligne avec la conception du matériau que le placement l'action à l'intérieur de la navigation.
J'aime ton idée mais je dirais "ça dépend".
Si vous prévoyez d'avoir les onglets visibles à tout moment et faites défiler les tâches dans l'onglet (je suppose qu'il y a plus de tâches qu'un écran peut contenir) sans en-tête dans l'onglet lui-même, alors l'onglet est le bon endroit. Si vous voulez diminuer la surprise des utilisateurs avec la fonction du bouton (beaucoup peuvent s'attendre à ajouter un nouvel onglet, pas une action dans un onglet), vous pouvez ajouter une bulle avec un simple message "Ajouter une nouvelle tâche" (peut être difficile pour une application mobile).
Pensez également au placement de la tâche nouvellement créée - sont-elles triées la plus récente en haut ou l'inverse? Dans ce dernier, vous pouvez immédiatement faire défiler jusqu'à un formulaire sur place pour la création de tâches.
Si, cependant, vos onglets se redimensionnent pour accueillir le contenu complet de toutes les tâches, l'en-tête disparaîtra avec le défilement (pas clair si vous demandez une application autonome ou une page Web), alors à moins que vous ne soyez au sommet, ce n'est pas possible d'ajouter une nouvelle tâche.
Je conviens que vous devez vous éloigner de FAB - Je connaissais récemment une application de comptabilité et lorsque je l'utilise sur l'appareil mobile, le bouton, même s'il est placé en bas de l'écran, masque en partie la liste des articles.
Acceptable peut-être, mais je ne le recommande pas.
Si les gens recherchent un moyen d'ajouter une nouvelle tâche, cela pourrait être difficile à trouver car le bouton n'a pas d'étiquette ni d'indice contextuel. Cette conception peut être sujette à la cécité inattentionnelle: les gens ne verront pas l'icône plus car ils n'ont pas besoin du commutateur de tabulation. Cela peut être le cas pour les personnes qui savent qu'elles peuvent ajouter une nouvelle tâche et les personnes qui ne le savent pas encore.
Un simple défilement peut coûter moins d'efforts que de numériser chaque détail à l'écran pour trouver quelque chose qui pourrait être le bouton. Cela peut sembler exagéré pour quelque chose qui est bien en vue et une icône qui semble évidente, mais ne soyez pas surpris si ce n'est pas le cas! Faire défiler jusqu'à la fin de la liste des tâches et voir un bouton directement visible avec une étiquette claire pourrait être la meilleure solution. Puisque vous avez mentionné que ce n'est pas l'action la plus importante, il est probablement acceptable qu'elle ne soit pas toujours à portée de vue. Même si les utilisateurs ont déjà ajouté des tâches dans le passé; laissez-les se rappeler comment le faire en effectuant la même recherche, cela pourrait être mieux que de leur rappeler où/quoi était le bouton.
Je vois un problème dans le sens de cet endroit.
Un bouton d'action sur un onglet suggère que vous pouvez interagir avec l'onglet lorsque l'onglet est inactif.
L'exemple le plus courant est le bouton de fermeture de l'onglet dans un navigateur. Une autre option est le nouveau bouton d'onglet à la fin de la barre d'onglets d'un navigateur. Un autre bouton possible sur un tel onglet serait "onglet en double".
Lorsque vous souhaitez avoir l'action "Ajouter une tâche" (dans la liste des tâches de cet onglet), ce n'est probablement rien qui devrait être fait silencieusement en arrière-plan lorsque vous travaillez dans un autre onglet, mais quelque chose qui nécessite de passer à l'onglet des tâches.
J'opterais donc pour une autre solution comme suggéré dans les autres réponses.
Je suggérerai d'avoir à chaque niveau de tâche un espace d'identification le permet, ainsi que le titre suivant (qui est dans votre conception) et comme la suggestion de Shaz de rester en bas comme un seul bouton.
Je vais juste mettre la solution que j'ai finalement trouvée pour ce problème car elle diffère de la réponse acceptée.
J'en suis venu à la conclusion que je regardais le problème dans le mauvais sens et que j'aurais dû me concentrer initialement sur les onglets à l'origine du problème et non sur le bouton d'action "Ajouter un nouveau".
En tant que tel, j'ai décidé de fusionner les onglets "participants" et "tâches" en une seule page et de dédier les parties supérieure et inférieure de la page aux sections respectives.
Voici la solution à laquelle je suis parvenu:
Quel est le problème avec l'utilisation d'un simple bouton plus dans la barre d'action comme ceci:
Le bouton Plus peut ajouter une tâche ou un participant en fonction de l'onglet actuel. Vous pouvez également masquer le bouton plus s'il n'est pas nécessaire dans l'onglet participant.