Panneau suspendu après un clic de l'utilisateur
Je travaille sur une petite application d'apprentissage des langues, dans laquelle l'utilisateur peut:
enregistrer du texte et de l'audio pour lire et écouter plus tard
cliquez sur un mot pour ajouter des notes et des exemples de phrases
obtenez des statistiques par langue et d'autres fonctionnalités
Je ne sais pas comment je gère l'événement "cliquez sur un mot". Après avoir cliqué sur un mot, L'utilisateur doit pouvoir :
a) Ajoutez une définition si le mot cliqué n'est pas encore défini.
b) Ajoutez des exemples de phrases (autant qu'il le souhaite)
D'une manière ou d'une autre, l'utilisateur devrait également pouvoir modifier les définitions et les exemples de phrases.
L'espace disponible est le panneau de droite. L'utilisateur se concentre sur le texte, donc je ne veux pas changer d'écran ou le distraire de la tâche principale: définir/éditer rapidement des mots et des phrases.
Ma conception actuelle est la suivante (la partie "Ajouter une phrase" n'est pas encore implémentée):
a) avant tout clic sur Word
b) après avoir cliqué sur un mot qui n'est pas encore défini. Cliquez sur "Enregistrer" pour afficher l'élément c) ci-dessous:
c) après avoir enregistré un mot. Cliquez sur "Modifier" pour afficher l'élément b) ci-dessus, avec la zone de texte remplie et ciblée:
Cliquez sur "Annuler" ou "Fermer" pour afficher le message d'instruction. Notez que le mot actuel est souligné en noir sur le panneau de texte.
Éditer
Sur la base de certaines réponses, peut-être qu'une seule fenêtre contextuelle sur le clic résoudrait tous ces problèmes? Cette fenêtre contextuelle apporterait des champs pour ajouter une définition Word et une phrase. Ensuite, je pouvais tout répertorier sur le panneau de droite, permettant l'édition ici.
Qu'est-ce que vous en pensez? D'autres suggestions? Je vous remercie!
REMARQUES:
1- Par clic droit sur un mot , l'utilisateur peut évaluer dans quelle mesure il connaît ce mot, via une popup. Les mots bleus sont "nouveaux" (signifiant pas encore dans cette base de données de langues). Ensuite, du rouge au vert, il couvre "l'apprentissage a commencé" à "presque connu". Aucune couleur avec un soulignement vert signifie "mot bien connu". Aucune couleur avec un soulignement rouge signifie "mot ignoré".
2- Le texte est à l'intérieur d'une div défilante, donc le panneau de droite est toujours visible, quelle que soit la position du texte.
Tout d'abord
Félicitations pour votre choix de couleur, il passe les tests d'accessibilité pour le daltonisme, il semble que vous y ayez fait quelques efforts.
Je ne pense vraiment pas que votre approche soit mauvaise. En fait, je pense que c'est bon. Ça pourrait être mieux? Oui, mais cela dépasse l'objectif de ce site.
N'oubliez pas que votre opinion est subjective. Testez avec de vrais utilisateurs, et si vous voyez qu'il y a un problème, vous pouvez le corriger, mais laissez les données vous raconter l'histoire.
Une approche
Pour les raisons énoncées ci-dessus, ce n'est pas LA démarche, elle n'a pas l'intention d'être la bonne réponse. C'est juste une approche pour vous donner des idées que vous pouvez tester. Les tests diront si cela est correct
Écran 1
J'ai commencé par ajouter de l'espace entre les éléments et supprimer le bruit (comme les bordures de conteneurs) afin que votre conception puisse - respirer un peu afin de transmettre les informations de manière plus détendue. Dans cet écran, vous n'avez AUCUNE COLONNE DROITE.
Remarque: j'ai oublié de l'ajouter à cet écran, mais le contenu dans votre zone de droite devrait être dans la colonne principale, juste au-dessus du contenu à traduire
Écran 2
Après qu'un utilisateur a cliqué sur un mot, une boîte de dialogue modale s'ouvre. La raison en est que vous avez besoin que l'utilisateur interagisse. Voir prise de NN/G à ce sujet:
- Utilisez des boîtes de dialogue modales pour demander des informations qui, une fois fournies, pourraient réduire considérablement le travail ou les efforts des utilisateurs.
Les modaux peuvent fonctionner efficacement lorsque les informations demandées ou présentées sont pertinentes ou peuvent rationaliser la réalisation de la tâche en cours.
Donc, avec cela à l'esprit, vous pouvez faire ce qui suit:
Notez que la boîte de dialogue et le libellé du bouton sont cohérents afin que les utilisateurs soient conscients de leurs interactions et de ce que l'on attend d'eux.
Écran 3
Ici, nous considérons que l'utilisateur a ajouté quelques mots et que la colonne de droite commence à se remplir de contenu. Vous verrez tous les mots ajoutés dans cette session sont répertoriés (vous pouvez ajouter des filtres si vous le souhaitez). Ceci est fait afin de renforcer psychologiquement l'acquisition de la Parole en la visualisant hors du bloc de texte et comme un groupe de mots nouvellement appris. Chaque fois que l'utilisateur ajoute un mot, il verra les précédents de manière consciente ou inconsciente.
Cliquer sur l'icône ouvrira l'écran 4
Écran 4
Si l'utilisateur souhaite modifier un mot, nous conserverons la cohérence, reflétant l'action à la fois dans le titre et l'étiquette du bouton. Cette fois, nous ne sommes pas [~ # ~] ajoutant [~ # ~] , mais [~ # ~ ] éditant [~ # ~] , le titre et l'action reflètent donc ce scénario.
D'ACCORD; ici je vais m'arrêter, j'espère que ça vous aide :)
Changez quelques éléments pour attacher toutes les extrémités ensemble. Dans votre version actuelle, il n'y a pas de flux clair pour vos utilisateurs.
Vous pouvez remplir le panneau de droite avec un "appel à l'action". Dites à vos utilisateurs qu'ils peuvent cliquer sur un mot et ajouter une note. Voir photo un.
Modifiez également le libellé du bouton Enregistrer en "enregistrer et masquer". Dites à vos utilisateurs ce qui se passe lorsqu'ils cliquent dessus. De cette façon, cela aura beaucoup plus de sens. Voir l'image deux.
Après la fermeture, les utilisateurs verront à nouveau l'appel à l'action à partir du point un.
Vous pouvez créer une fenêtre contextuelle pour permettre à l'utilisateur d'ajouter une note. Quant à un appel à l'action, vous pouvez avoir une bannière dans le menu supérieur suggérant que l'utilisateur peut ajouter une note sur n'importe quel mot en cliquant simplement. En outre, je suggérerai de conserver une simple option d'enregistrement automatique si vous utilisez une fenêtre contextuelle pour la saisie. Vous ne voulez pas que l'utilisateur perde des informations s'il clique mal en dehors de la fenêtre contextuelle.
Modifier: Pour vous donner une idée, cochez le bouton Partager dans cette réponse ou votre question. Une fois que vous avez cliqué sur le bouton Partager, il ouvre une fenêtre contextuelle, que vous pouvez fermer en cliquant sur "Fermer" ou en cliquant n'importe où en dehors de la fenêtre contextuelle.
Modifier: Ma suggestion précédente est lorsque l'utilisateur clique sur l'option de notes pour un montant limité, dites 10 mots par page. Si c'est vraiment un montant élevé, conservez votre style existant.
Quant à l'instruction, vous pouvez la conserver et déplacer des informations supplémentaires dans ce panneau. Un peu comme le panneau latéral droit dans cette fenêtre.
Peut-être que si vous le souhaitez, vous pouvez afficher tous les mots déjà traduits, dans une liste. L'utilisateur peut cliquer sur le mot traduit pour modifier à nouveau la traduction, vous avez donc une possibilité supplémentaire pour accéder à l'option d'édition. **
Idée 1: Maintenant, à propos de votre question, vous pourriez avoir un bouton sur la barre de navigation supérieure qui ouvre votre panneau de droite. Ainsi, votre panneau de droite est ouvert en cliquant sur un mot ou sur ce bouton.
Une fois que les utilisateurs ont fini de travailler sur un mot, ils peuvent fermer le panneau de droite et un numéro peut être ajouté à l'icône de ce bouton, comme un numéro de panier ou peut-être plus clair. De cette façon, ils peuvent toujours voir le nombre de mots qu'ils ont traduits et ouvrir le panneau pour vérifier cette liste.
Idée 2 Avoir une section à droite qui se situerait au-dessus du panneau "Définition des mots" qui leur montre le nombre de mots avec lesquels ils ont déjà travaillé. Au début, il peut dire 0 mot ou peut-être un fait intéressant sur cette langue: "Saviez-vous que ...", seulement jusqu'à ce qu'ils aient réellement un mot à mettre dans cette liste.