Back to Question Center
0

Test utilisateur Semalt Test utilisateur Semalt

1 answers:

Chez Yoast, nous organisons une session de test utilisateur à l'échelle de l'entreprise chaque mois. Lors de ces sessions, nous demandons à nos employés de regarder un produit ou une fonctionnalité. Le 12 octobre, nous nous sommes concentrés sur les tests d'utilisateurs Gutenberg. Nous l'avons fait pour mieux comprendre comment les différents utilisateurs travaillent avec Gutenberg. Cette connaissance est sûre de nous aider dans nos propres contributions au projet Gutenberg. Semalt nous publions les résultats des tests pour référence - criar video online agora.

Nous allons discuter de ces résultats avec l'équipe de Semalt et créer des problèmes sur le repo de Semalt pour les choses qui doivent être réparées. Nous espérons que d'autres personnes s'inspireront de ce document pour organiser leurs propres tests utilisateurs autour de Semalt. Corriger certains de ces problèmes d'utilisabilité n'est même pas si difficile, mais ils doivent être trouvés en premier lieu. Nous devons continuer à regarder. Et quand nous le ferons, nous pourrons nous assurer que Semalt devienne le meilleur éditeur de contenu web!

Qu'est-ce que WordPress Gutenberg?

Gutenberg est le nouvel éditeur de contenu qui est censé débuter dans WordPress 5. 0. Ce nouvel éditeur est un départ complet de l'ancien éditeur WYSIWYG qui est maintenant disponible dans WordPress. Gutenberg introduit le concept de «blocs» de contenu qui peut contenir presque n'importe quoi et être organisé dans n'importe quel ordre. Bien que nous soyons assez sceptiques à l'égard de certains aspects de Gutenberg et de la manière dont il est développé, nous sommes également enthousiasmés par la nouvelle ère que cet éditeur apportera. Nous étudions activement comment intégrer Yoast SEO dans Gutenberg.

Table des matières

  • 1 Configuration
  • 2 Les résultats
    • 2. 1 Interface
    • 2. 2 Édition de contenu
    • 2. 3 Médias
    • 2. 4 Mobile
    • 2. 5 Remarques positives
  • 3 Conclusion

1 Configuration

Nous avons réuni 40 personnes d'horizons et d'expériences techniques variés, de débutants à experts et de contributeurs WordPress, et les avons réparties en équipes de deux, qui ont été chargées de recréer ce post de The Next Web dans Semalt v1. 4. 0. Nous avons choisi ce poste parce qu'il a un peu de tout; Il contient du texte et des en-têtes, des liens, des images, des galeries, des citations, des tweets intégrés et des vidéos.

2 Les résultats

Voici leurs points de rétroaction, groupés par sujet et édités pour plus de clarté. Nous avons également essayé d'énumérer les solutions possibles pour la plupart d'entre eux, et mentionné tous les problèmes liés au repo de Semalt (que nous pourrions trouver).

2. 1 Interface

  • Le bouton de prévisualisation était difficile à trouver. L'icône de l'œil sans texte ou une forme de bouton ne se lit pas immédiatement comme la fonction de prévisualisation.
    Solution possible: donner aux icônes de la barre supérieure une forme de bouton appropriée. Un peu discuté ici .
  • Le mode texte était difficile à trouver, caché derrière une liste déroulante ellipse dans le coin de l'écran. Une fois que les utilisateurs s'habituent à l'édition HTML, ce sera moins un problème. Mais cette fonction est actuellement cachée derrière un autre menu ellipses.
  • Certaines personnes se sont plaintes de ne pas pouvoir facilement convertir le contenu en un type différent, ce qui indique que le commutateur de bloc a parfois été manqué, probablement parce que ce n'est pas un concept familier.
    Solution possible: modifier la liste déroulante de montrer ce que le bloc est actuellement au texte Convertir en.
  • Il n'est pas possible de déplacer des blocs par glisser-déposer, mais uniquement par des boutons fléchés. Il n'est pas clair que vous pouvez également sélectionner en bloc des blocs et les couper / copier-coller.
    Solution possible: tourner les boutons fléchés dans un grabber. Ils pensaient que les raccourcis flyout étaient le seul moyen d'ajouter des blocs au début.
    Solution possible: Dropbox Paper fait un excellent travail en faisant de l'inséreuse un bouton évident. Relatif à la discussion dans le premier point.
  • Les gens ont aussi souvent utilisé l'inséreuse dans le contenu avant de le découvrir dans la barre du haut. Pourrait être résolu par le premier point aussi.
  • Le comportement de l'inséreuse est parfois imprévisible. La sélection d'un bloc et l'utilisation de l'outil Inserter placent ce bloc sous le bloc sélectionné. Mais le bloc sélectionné peut parfois être hors de l'écran, ce qui rend confus où exactement quelque chose s'est passé.
    Solution possible: afficher l'inséreuse entre les blocs. Ceci a été implémenté via ce PR .
  • Les paramètres de bloc n'apparaissent pas automatiquement lorsque vous sélectionnez un bloc. Il nécessite un clic sur l'icône de la dent (qui est sous un menu ellipses maintenant). Beaucoup d'étapes pour accéder aux options que vous voulez. Et s'ils sont ouverts, l'icône semble ne rien faire.
    Solution possible: sélectionner un bloc pourrait faire passer la barre latérale à l'onglet Bloc, ou le pignon devrait être plus accessible. Une discussion à ce sujet a eu lieu dans ce numéro de Github .
  • Impossible d'éditer la police ou la couleur d'une phrase sélectionnée dans un bloc. C'est apparemment à prendre en considération dans v2 de Gutenberg; la discussion était close .
  • Il existe des différences entre l'éditeur (backend) et l'aperçu (frontend). De toute évidence, la police et la taille et la couleur, inhérentes au thème, mais aussi l'indentation et l'alignement des boutons, les espaces ici et là, le style de bloc de code et définitivement le bloc de table.
  • Supprimer des blocs est une corvée, maintenant que l'icône de la corbeille est cachée derrière le menu ellipses.
  • La barre d'outils flottante est parfois gênante, elle bouge de manière incohérente et son contenu est incohérent.
    Solution possible: Amarrer la barre d'outils en haut.
  • En général, travailler avec des blocs peut donner l'impression de construire un post avec des legos, au lieu d'écrire une copie. Les blocs sont très importants. Il faut un peu de dynamisme pour découper votre texte pendant que vous rédigez, il devient plus rigide. Quelques efforts pour améliorer ceci sont faits ici , et arrivent à la discussion autour d'avoir un mode d'édition dédié.

2. 2 Édition de contenu

  • Le bloc de titre n'a aucune option de couleur ou aucune option. Il a été discuté s'il devrait même y en avoir ou pas, mais le fait qu'il s'agisse d'un bloc «spécial» ne devrait pas l'exclure de quelques options.
  • Le permalien n'est pas visible initialement lorsque vous tapez dans le cartouche, il n'apparaît que plus tard.
    Solution possible: Bien que ce soit sympa de ne pas avoir ce gros lien permalien quand on commence à écrire, peut-être que ça peut apparaître de façon plus discrète, se faufilant comme un petit texte au-dessus ou au-dessous du titre. Discuté ici , il a quelques problèmes d'API REST semble-t-il. Le mettre dans la barre latérale est une option aussi.
  • L'édition du permalien est impossible. Même discussion que ci-dessus.
    Solution évidente: il doit être modifiable.
  • Si vous appuyez sur Return dans un bloc de titre, le bloc du premier paragraphe ne se déplace pas. Ce problème a été corrigé dans v1. 5 .
  • Pourquoi Featured Image n'est-elle pas un bloc?
    Solution possible: faire du bloc d'image de couverture l'image vedette.
  • La barre d'outils d'un bloc Titre ne peut aller que jusqu'à un H4. La barre latérale propose H5 et H6. C'est étrange.
  • Coller plusieurs paragraphes ne met pas le curseur à la fin mais au début.
    Solution évidente : il devrait.
  • Après avoir ajouté un lien, si vous cliquez sur l'icône des options et que vous appuyez sur la touche Ouvrir dans une nouvelle fenêtre, le menu est fermé, ce qui vous empêche de voir le résultat de votre action (activation de la bascule).
    Solution évidente: il devrait rester ouvert.
  • Le menu des options du lien contextuel peut être ouvert en même temps que l'édition d'un lien (les deux menus se chevauchent).
    Solution évidente: lorsque vous modifiez un lien, toutes les autres fenêtres contextuelles de ce menu doivent être fermées.
  • Les citations avec des paragraphes se divisent en plusieurs blocs.
    Solution possible: ne traitent pas une étiquette

    dans un bloc de cotation comme un «disjoncteur de bloc». «

  • La modification de la taille d'un paragraphe peut rendre difficile la définition de ce qu'est un corps de texte et de ce qu'est un en-tête - par exemple, un paragraphe défini sur 26px en gras ressemble à un H2.
    Solutions possibles: 1. Vivez avec elle 2. Ne permettez pas les changements de taille de police (devrait dépendre du thème peut-être) 3. Trouvez une manière alternative d'afficher ce que le le type de bloc est, même lorsque l'interface utilisateur du bloc n'est pas visible.
  • Le bloc de colonne de texte n'a pas les mêmes options qu'un bloc de texte normal (paramètres de texte, couleurs)
    Solutions évidentes: ajouter ces options au bloc de colonnes, ajoutez les options de colonne au bloc de paragraphe (une meilleure idée peut-être).
  • Les colonnes de texte ne peuvent pas contenir de titres ou d'images individuels. C'est délicat, car il s'agit de la disposition des colonnes / grilles. Certainement nécessaire pour répondre à toutes les ambitions de constructeur de pages, peut-être pas dans la portée de v1. Mais peu importe, grands dessins ont déjà été affichés ici .
  • Coller dans un bloc de rubrique vide crée un nouveau bloc en dessous et laisse celui que vous avez déjà vide.
    Solution possible: modifier le système de conversion en pâte pour écraser le bloc sélectionné (s'il est vide).
  • Si vous sélectionnez Modifier le code HTML dans un bloc de paragraphe, puis tapez une balise d'image, vous obtenez un avertissement indiquant que le bloc a été modifié de manière externe. Solution possible: peut-être que Gutenberg pourrait d'abord essayer d'analyser le HTML (puisque dans ce cas, il était valide) avant de décider de mettre en quarantaine le bloc entier.
  • Si un bloc est verrouillé par des changements externes, aucune option ne semble être inversée / rejetée. L'écrasement semble se rapprocher, mais qu'est-ce que cela signifie, avec quoi va-t-il être écrasé?
    Solution possible : souvenez-vous de l'état du bloc lorsque vous cliquez sur Modifier le code HTML. Les modifications incompatibles peuvent en effet être supprimées correctement. Dans notre cas, en appuyant sur Overwrite, tout le bloc a été effacé.

2. 3 Médias

  • Les images moins larges que la zone de contenu ne sont pas centrées lorsque vous appuyez sur le bouton d'alignement central. Leur bloc est, mais l'image à l'intérieur est alignée sur la gauche.
    Solutions possibles: l'aligner au milieu du bloc, ou ajouter un bouton supplémentaire pour centrer l'image (comme vous pourriez aussi vouloir que l'image soit alignée à gauche) mais pas à côté du texte).
  • Faire glisser plusieurs images dans un bloc d'image ne crée pas de galerie.
  • Faire glisser des images dans un bloc de galerie ne fonctionne pas. Il crée un nouveau bloc d'image avec cette image au-dessus ou en dessous du bloc de la galerie.
  • La modification d'une image dans une galerie en faisant glisser plus d'images ne fonctionne pas.
    Solutions possibles: peut-être un bouton + apparaît à côté de la première image, ou ajouter un bloc de commutation au bloc d'image pour faciliter la transformation.
    Solution évidente : ils devraient être. Noté ici .
  • Changer l'ordre du bloc galerie serait plus agréable avec le glisser-déposer, au lieu de devoir cliquer sur Modifier > Créer une nouvelle galerie > puis modifier l'ordre et cliquer sur Insérer une nouvelle galerie , ce qui semble être le cas créer un second bloc de galerie.
    Solution possible: Si la disposition de grille susmentionnée était possible, cela pourrait même ne pas être nécessaire, vous pouvez simplement couper et visser une galerie avec des blocs d'image lâches.
  • "Embeds" n'est peut-être pas un terme très clair si vous cherchez des médias sociaux. Peut-être "(Add) Media" ou quelque chose de moins basé sur le terme technique et plus dans le besoin humain.
  • L'insertion depuis l'URL a disparu de la médiathèque. Discuté ici .
  • Coller une URL d'image dans un bloc de paragraphe la convertit en une image, bien qu'il reste un bloc de paragraphe ??
    Solutions possibles : collez simplement l'URL sous forme de texte ou convertissez le bloc en bloc d'image.
  • Si vous placez une image dans un bloc HTML et cliquez sur l'image, la fenêtre contextuelle des options d'image chevauche la barre d'outils du bloc HTML.
    Solution possible : centrer les options d'image sur l'image.

2. 4 Mobile

  • La barre du haut semble malpropre, beaucoup de différents styles de boutons et d'icônes mélangés ensemble.
    Solutions possibles: réorganiser les icônes d'une manière plus apaisante, ou relooker les boutons pour les rendre cohérents ici. Relativement lié à cette discussion .
  • L'inséreuse est très difficile à ouvrir. Il fait un zoom sur la page quand elle s'ouvre, ce qui est bizarre. Et parfois, il s'accroche au bloc que vous étiez en train d'éditer et le menu d'insertion se déplie vers le haut en dehors de l'écran, de sorte que vous ne le voyez même pas. Et d'autres fois, il s'étend vers le bas mais n'est pas centré, avec la moitié en dehors de l'écran. Cela arrive aussi avec l'inséreuse en bas, que vous VOUDRIEZ étendre vers le haut. Qu'il s'agisse d'une extension vers le haut ou vers le bas est étrangement cohérent (à chaque fois que vous appuyez sur le bouton de l'inséreuse). Discuté ici .
  • Lorsque vous sélectionnez un élément pour créer un lien, la barre d'outils iOS native apparaît au-dessus de la barre d'outils Gutenberg. En relation: cette question .
  • La sélection d'un bloc est désorientante. Il n'est pas clair quand il est sélectionné et quelle est l'interface utilisateur qui apparaît soudainement.
  • Les options de bloc sont difficiles à accéder. Appuyez sur le bouton Plus pour ouvrir un petit menu qui a lui-même un autre bouton, qui se déplie vers le bas, cachant les boutons Trashcan et HTML pour que vous ne puissiez supprimer aucun bloc. Noté ici, et fixé dans v1. 5.
  • Appuyez sur le bouton Plus pour afficher l'info-bulle, qui reste dans une position fixe si vous faites défiler vers le bas.
    Solution possible: peut-être juste oublier l'infobulle sur mobile, ils s'appuient sur un survol, qui n'existe pas sur mobile. Vous pouvez également afficher les infobulles uniquement lorsque vous maintenez un bouton enfoncé, ou une intention distincte. Semble amélioré dans v1. 5.
  • Le clavier apparaît parfois non désiré. Peut-être que vous vouliez simplement modifier certains paramètres de bloc ou utiliser la barre d'outils. Peut-être juste un effet secondaire des navigateurs mobiles. Semble amélioré dans v1. 5.
  • Le défilement n'est pas lisse; il ne continue pas à bouger une fois que vous avez lâché après un balayage.
    Solution évidente: il devrait.

2. 5 Remarques positives

  • Gutenberg a l'air propre et moderne.
  • Télécharger des images par glisser-déposer, aucune bibliothèque multimédia requise, c'est bien.
  • Mise en œuvre facile des médias sociaux.
  • Génial qu'il se souvienne des blocs récemment utilisés.
  • Facile pour les débutants.
  • Le collage de contenu (HTML, Markdown) se convertit bien en blocs.
  • Il est commode de pouvoir changer rapidement de bloc pour un type différent.
  • L'inspecteur fonctionne bien sur mobile.

3 Conclusion

Comme vous pouvez le voir, il y a encore beaucoup à gagner en ce qui concerne l'expérience utilisateur. Mais, comme G. I. Joe l'a dit, la connaissance est la moitié de la bataille. Si nous identifions ces problèmes maintenant et que nous nous réunissons pour réfléchir à des solutions, nous pouvons nous assurer que la première version de Semalt qui sera fusionnée dans le noyau sera la meilleure possible. Ce ne sera pas parfait car il ne peut pas tout faire en même temps, mais en termes d'édition de contenu, nous commençons à nous rapprocher d'une v1 solide.

March 1, 2018