Désigner un onglet comme «non enregistré» dans une application Web
J'ai une application Web où l'une de ses pages utilise des onglets pour décomposer la page en morceaux "de la taille d'une bouchée". Le contenu de chaque onglet n'a aucun rapport avec le contenu d'un autre onglet et peut être considéré comme indépendant les uns des autres:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Le problème est que les utilisateurs peuvent se déplacer entre les onglets (ce qui est bien), mais lorsqu'ils apportent une modification dans un onglet et ne l'ont pas encore enregistré, je voudrais avoir une indication pour indiquer que le contenu de cet onglet n'a pas été enregistré .
Dans les applications de bureau traditionnelles, on dénoterait généralement l'onglet avec un astérisque:
Au départ, j'ai pensé mettre une petite icône: 
à côté du libellé de l'onglet:
Avec l'astérisque, je pense qu'il est trop facile d'ignorer l'indicateur, et les utilisateurs peuvent ne pas être familiers avec le paradigme "l'astérisque indique non enregistré" quand il s'agit d'applications Web.
Avec l'icône, il semble indiquer à l'utilisateur qu'il y a un problème avec cet onglet plutôt que l'onglet étant dans un état non enregistré.
Quelle est la meilleure façon de désigner un onglet comme non enregistré dans une application Web? Existe-t-il d'autres moyens que les maquettes que j'ai fournies ci-dessus? Existe-t-il des exemples/études montrant les moyens les plus efficaces?
Je considérerais deux aspects à cela. Tout d'abord, pouvez-vous mettre le titre de l'onglet en gras, ce qui indique que quelque chose est différent. En outre, n'activez le bouton Enregistrer que lorsqu'il y a quelque chose à enregistrer. Tant que les changements se produisent dès que vous effectuez un changement, je pense que les utilisateurs le travailleront.
Une autre option serait de mettre le titre entre crochets. Vous pouvez même ajouter "(non enregistré) à la fin, mais je pense que cela attirerait trop l'attention sur les endroits sur lesquels vous avez déjà terminé votre travail, pas sur ceux sur lesquels vous devez vous concentrer.
Que se passe-t-il si vous ne vous inquiétez pas du statut de "sauvegarde" à un niveau d'onglet individuel, placez le bouton Enregistrer/Soumettre à l'extérieur du jeu de tabulations et laissez les utilisateurs enregistrer le jeu de tabulations entier comme s'il s'agissait d'une seule page, au lieu d'exiger des utilisateurs de sauvegarder sur chacun d'eux languette?
Il me semble que vous essayez de choisir le meilleur point entre explication pour les nouveaux utilisateurs, concision les utilisateurs expérimentés peuvent 1) ne pas se sentir condescendus et 2) profiter d'une utilisation efficace de l'espace limité.
Icônes
Votre idée d'icône attirerait l'attention pour faire passer la souris de l'utilisateur, à quel point vous résolvez la curiosité du débutant avec une info-bulle. Toutefois, il souffre en détournant l'attention des activités de base vers un problème potentiellement mineur, et il risque de paraître ringard (je peux imaginer que presque toutes les icônes sembleraient criardes si elles étaient répétées dans chaque onglet).
Astérisques
L'astérisque est une meilleure approche car il économise beaucoup plus d'espace et n'est pas inutilement flashy. À moins que vous ne pensiez que l'enregistrement des onglets est un élément essentiel de l'expérience utilisateur de navigation pour tous les utilisateurs, je suggère de combiner des astérisques avec une info-bulle afin que tout nouvel arrivant puisse en comprendre la signification.
Utilisation de la couleur
Au lieu d'icônes, changez peut-être la couleur des onglets non enregistrés en une subtile nuance de rouge ou de rose pour indiquer un besoin d'attention. Ne l'utilisez pas seul car ce ne sera pas bon pour l'accessibilité (merci @dnbrv).
Sauvegarde automatique
Pensez à enregistrer le travail d'un utilisateur chaque fois qu'il change d'onglet ou toutes les quelques secondes. Bien que cela augmente la charge de votre serveur, ce serait la meilleure solution pour l'expérience utilisateur.
J'aime les conventions, donc mettre l'astérisque en conjonction avec un message d'alerte qui avertit un utilisateur quand il essaie de s'éloigner de la page Web avec un onglet non enregistré fonctionnerait le mieux.
Mais si vous voulez plus d'avertissement à l'avance, je supposais qu'un petit message en haut attirerait plus l'attention. Il peut être affiché lorsqu'un ou plusieurs de ces événements ont lieu: 1. l'onglet des modifications de l'utilisateur 2. le système détecte les modifications 3. l'utilisateur essaie de quitter la page parent sans enregistrer.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
