Tests d’ergonomie de Gutenberg pour novembre-décembre 2019


Bonjour ! 👋 J’ai apparemment oublié la publication de novembre, alors je combine novembre et décembre dans celle-ci. J’en ai 3 pour novembre et 3 pour décembre.

Novembre était consacré aux derniers essais comparatifs. J’essayais de comprendre comment les utilisateurs pourraient ajouter des éléments côte à côte dans GutenbergGutenberg Le projet Gutenberg est la nouvelle interface d’édition de WordPress. L’éditeur améliore le processus et l’expérience de création de nouveaux contenus, ce qui simplifie grandement la rédaction de contenus enrichis. Il utilise des « blocs » pour ajouter de la richesse plutôt que des shortcodes, du HTML personnalisé, etc.
https://wordpress.org/gutenberg/
côte à côte. Puis je voulais les informer d’une méthode basée sur les blocsBloc Bloc est le terme abstrait utilisé pour décrire des unités de balisage qui, une fois assemblées, forment le contenu ou la mise en page d’une page web à l’aide de l’éditeur WordPress. Cette idée regroupe les concepts qui, auparavant, pouvaient être réalisés avec des shortcodes, du HTML personnalisé et la découverte de contenus intégrés, au sein d’une API et d’une expérience utilisateur cohérentes. et voir comment cela influençait leur expérience.

J’ai également commencé à tester le bloc Liste. Il s’agit d’un bloc naturel pour rédiger des articles de recettes, etc. J’ai eu un groupe formidable lors du WCUS de cette année, qui m’a aidé à rédiger ce script particulier, partagé plus bas.

En décembre, je voulais me concentrer sur le bloc Navigation dans le pluginPlugin Un plugin est un logiciel contenant un ensemble de fonctions qui peuvent être ajoutées à un site web WordPress. Il peut étendre les fonctionnalités ou ajouter de nouvelles fonctions à vos sites web WordPress. Les plugins WordPress sont écrits dans le langage de programmation PHP et s’intègrent parfaitement à WordPress. Ils peuvent être gratuits dans le répertoire de plugins WordPress.org https://wordpress.org/plugins/ ou être proposés contre paiement par un tiers. Gutenberg.


Script comparatif de novembre

Testez le nouvel éditeur de blocs dans WordPress ! Quelques tâches sont indiquées ci-dessous. Veuillez les décrire à voix haute afin que nous puissions mieux comprendre comment les gens réfléchissent à ces actions. Ne vous inquiétez pas, il n’y a pas de bonnes ou de mauvaises réponses. Merci.

  1. Connectez-vous.
  2. Créez une nouvelle publication.
  3. Dans la publication, ajoutez deux images côte à côte. Comment cette expérience s’est-elle passée ?
  4. Si vous n’avez pas encore cliqué sur l’icône « + » dans la barre d’outils supérieure pour ajouter un bloc, faites-le maintenant et ajoutez un bloc Galerie. Ajoutez ensuite deux images au bloc Galerie. Comment cette expérience s’est-elle passée ?
  5. En gardant ces différents blocs à l’esprit, essayez d’ajouter une image et du texte côte à côte dans votre publication.
  6. Avez-vous trouvé le bloc Média et texte ou avez-vous résolu l’étape 5 d’une autre manière ?
  7. Si vous n’avez pas utilisé le bloc Média et texte, essayez de l’ajouter maintenant. Une fois que vous avez ajouté une image et du texte à ce bloc, inversez-les afin que l’image soit à droite du texte. Que pensez-vous de ce bloc ?
  8. Ensuite, créez du texte côte à côte. Comment cette expérience s’est-elle passée ?
  9. Si vous n’avez pas utilisé le bloc Colonnes, essayez de l’ajouter pour afficher du texte côte à côte. Comment cela s’est-il passé ?
  10. Maintenant que vous avez acquis davantage d’expérience avec les blocs, à quel point cette interface vous semble-t-elle intuitive ?

Script de recette de tarte pour novembre

Imaginez que vous avez créé une recette de tarte parfaite et que vous souhaitez la partager avec le monde entier ! Vous avez rassemblé vos notes et êtes prêt à créer cette nouvelle publication sur votre site.

  1. Connectez-vous.
  2. Créez une nouvelle publication.
  3. Donnez à la publication le titre suivant : « Recette Gutenberg ».
  4. Ajoutez un paragraphe décrivant la recette : « Il s’agit d’une recette test pour une délicieuse tarte. Nous aimons les tartes, car elles sont à la fois acidulées et sucrées. »
  5. Ajoutez un bloc Image et sélectionnez une photo de tarte. Faites en sorte que l’image occupe toute la largeur.
  6. Ajoutez un bloc Colonnes avec deux colonnes pour les ingrédients.
  7. Dans la première colonne, ajoutez un bloc Titre et saisissez « Pâte ».
  8. Dans la même colonne, ajoutez une liste à puces :
    • 1 ½ tasse de miettes de biscuits
    • ¼ tasse de sucre
  9. Dans la deuxième colonne, ajoutez un bloc Titre et saisissez « Crème ».
  10. Dans cette colonne, ajoutez également une liste à puces :
    • 1 paquet de canneberges de 12 onces
    • 1/2 tasse de sucre
    • 1 orange, zestée
  11. Sous le bloc Colonnes, ajoutez un bloc Titre intitulé « Instructions ».
  12. Ajoutez maintenant un bloc Liste et convertissez-le en liste numérotée.
  13. Ajoutez chacun des éléments suivants à la liste numérotée :
    1. Préchauffez le four à 350 degrés F.
    2. Vaporisez un moule à tarte en deux parties de 9 pouces avec un aérosol de cuisson.
    3. Dans un bol moyen, mélangez les miettes de biscuits, le sucre, la stévia, le sel et le beurre.
    4. Pressez uniformément le mélange au fond et sur les côtés du moule à tarte.
    5. Faites cuire jusqu’à ce que la préparation soit prise, environ 15 minutes.
    6. Dans une casserole moyenne, mélangez les canneberges, le sucre, la stévia, le zeste et le jus d’orange.
    7. Portez à frémissement à feu moyen-vif et faites cuire jusqu’à ce que les canneberges éclatent, environ 8 minutes.
  14. Prévisualisez votre publication et apportez les corrections de mise en page souhaitées.
  15. Publiez votre publication !

Script du bloc Navigation pour décembre

Imaginez que vous créez un nouveau site web avec WordPress. WordPress propose désormais un bloc Navigation dans le nouvel éditeur de blocs. C’est sur ce point que vous vous concentrerez pour ce test d’utilisabilité. Créons un menu de navigationMenu de navigation Fonctionnalité de thème introduite avec la version 3.0. WordPress comprend un mécanisme facile à utiliser permettant de fournir diverses options de contrôle pour amener les utilisateurs à cliquer d’un endroit à un autre sur un site. à l’aide de ce nouveau bloc !

  1. Connectez-vous.
  2. Créez une nouvelle publication.
  3. Ajoutez un titre à votre publication.
  4. Gardez à l’esprit que, pour ajouter différents contenus à votre publication, il faut ajouter des blocs. Explorez l’endroit où vous pourriez ajouter un bloc, puis ajoutez le bloc Navigation à votre publication.
  5. Cliquez sur l’option « Créer vide » dans le bloc. Nous allons créer un tout nouveau menu de navigation.
  6. Comme toute bonne navigation, faites de « Accueil » le premier élément du menu et assurez-vous qu’il renvoie vers la page d’accueil.
  7. Ajoutez ensuite un autre élément intitulé « À propos » et assurez-vous qu’il renvoie vers la page À propos.
  8. Ajoutez un élément de sous-menu sous l’élément À propos. Intitulez-le « Équipe » et assurez-vous qu’il renvoie vers la bonne page.
  9. Ajoutez ensuite un autre élément de premier niveau intitulé « Services ».
  10. Ajoutez ensuite deux autres éléments : l’un intitulé « Blog » et l’autre « Contact ».
  11. Retournez en arrière et supprimez l’élément « Services » de votre bloc Navigation.
  12. Modifiez maintenant le lien de l’élément « Contact » en le faisant pointer vers la publication « Happy Flowers ».
  13. Remplacez le texte de l’élément « Blog » par « Archives », mais conservez le lien vers la même page.
  14. Prévisualisez votre publication.
  15. Comment cette expérience s’est-elle passée ?

Vidéos

Vidéo 1 – Côte à côte (6 nov.)

Je n’arrive pas à les mettre côte à côte.

Bloc Galerie – Alors, serait-il possible d’ajouter plusieurs images ? Super. C’était facile !

Vidéo 2 – Recette de tarte (20 nov.)

La seule chose que j’ajouterais, c’est que je voudrais pouvoir modifier la police et la couleur.

Vidéo 3 – Recette de tarte (27 nov.)

C’est un peu compliqué.

D’accord, nous avançons enfin !

Vidéo 4 – Bloc Navigation (4 déc.)

Je ne suis pas absolument sûr de savoir comment ajouter un bloc. Cela ne semble donc pas vraiment se faire ici (paramètres du bloc barre latéraleBarre latérale Dans WordPress, une barre latérale désigne une zone prête à accueillir des widgets, utilisée par les thèmes WordPress pour afficher des informations qui ne font pas partie du contenu principal. Il ne s’agit pas toujours d’une colonne verticale sur le côté. Elle peut être un rectangle horizontal situé sous ou au-dessus de la zone de contenu, dans le pied de page, l’en-tête ou n’importe où dans le thème.).

Cela a pris un peu de temps, mais nous y sommes finalement arrivés.

Pour être honnête, c’est un peu déroutant. C’est devenu plus clair au fur et à mesure, mais je ne suis pas sûr d’avoir effectué toutes les tâches demandées.

Vidéo 5 – Bloc Navigation (11 déc.)

Après environ 9 minutes, l’utilisateur abandonne. Il ne parvient pas vraiment à comprendre comment ajouter un bloc Navigation. Vers la 8e minute, il a cherché dans la bibliothèque de blocs, mais sans succès, car il n’a pas parcouru chaque accordéon, et il a fini par rechercher « vide » au lieu de « Navigation ».

Vidéo 6 – Bloc Navigation (18 déc.)

Je m’attendais à voir une liste de blocs. (en référence à l’onglet Bloc dans la barre latérale)

Les sous-menus s’avèrent difficiles dans ces tests d’utilisabilité. Je sais qu’il s’agit d’un problème de conception que nous cherchons à résoudre.


Commentaires

Comme pour toutes les vidéos précédentes partagées, n’hésitez pas à laisser des commentaires ! Quels sont les schémas qui vous sautent aux yeux ? Quels succès ces utilisateurs rencontrent-ils lorsqu’ils naviguent et créent une publication ? Quels défis deviennent évidents dans leur parcoursParcours Le parcours est le chemin constitué des écrans et des interactions suivis pour accomplir une tâche. C’est un vecteur d’expérience. Le parcours est également une sensation : être insouciant et pleinement concentré. Le parcours se produit lorsque les difficultés sont supprimées et que vous êtes libre de vous consacrer à une activité sans avoir à formuler d’intentions. Vous agissez simplement. ?

Pour rappel, si vous souhaitez contribuer aux tests d’utilisabilité, vous pouvez essayer plusieurs choses :

  • Rejoignez le canal #research sur SlackSlack Slack est une plateforme de discussion de groupe collaborative https://slack.com/. La communauté WordPress possède son propre canal Slack à l’adresse https://make.wordpress.org/chat/.
  • Vous pouvez rédiger un script de test qui pourra être soumis à un test d’utilisabilité pour Gutenberg.
  • Ou regardez simplement les vidéos et laissez des commentaires ci-dessous.

Merci de regarder ces vidéos et de contribuer de quelque manière que ce soit.

#gutenberg