¡Hola! 👋 Parece que me perdí la publicación de noviembre, así que voy a combinar noviembre y diciembre en esta. Tengo 3 para noviembre y 3 para diciembre.
Noviembre se centró en la última parte de las pruebas en paralelo. Intentaba entender cómo podrían los usuarios añadir elementos en GutenbergGutenberg El proyecto Gutenberg es la nueva interfaz del editor para WordPress. El editor mejora el proceso y la experiencia de crear contenido nuevo, haciendo que la redacción de contenido enriquecido sea mucho más sencilla. Utiliza «bloques» para añadir riqueza en lugar de shortcodes, HTML personalizado, etc.
https://wordpress.org/gutenberg/ en paralelo. Y luego informarles sobre una forma de hacerlo basada en bloquesBloque Bloque es el término abstracto utilizado para describir unidades de marcado que, al componerse juntas, forman el contenido o el diseño de una página web mediante el editor de WordPress. La idea combina conceptos de lo que en el pasado se podía lograr con shortcodes, HTML personalizado y el descubrimiento de incrustaciones en una única API y experiencia de usuario coherentes. y ver cómo eso afectaba su experiencia.
También comencé a hacer pruebas con el bloque de Lista. Este es un bloque natural al redactar publicaciones de recetas, etc. Tuve un grupo increíble durante la WCUS de este año que ayudó a redactar este guion en particular, que se comparte más adelante.
En diciembre quería centrarme en el bloque de Navegación del pluginPlugin Un plugin es un fragmento de software que contiene un grupo de funciones que se pueden añadir a un sitio web de WordPress. Pueden ampliar la funcionalidad o añadir nuevas características a tus sitios web de WordPress. Los plugins de WordPress están escritos en el lenguaje de programación PHP y se integran perfectamente con WordPress. Pueden ser gratuitos en el directorio de plugins de WordPress.org https://wordpress.org/plugins/ o plugins de pago de terceros. Gutenberg.
Guion de pruebas en paralelo de noviembre
¡Prueba el nuevo editor de bloques de WordPress! A continuación hay algunas tareas. Explícalas en voz alta para que podamos entender mejor cómo piensan las personas al realizar estas acciones. No te preocupes, no hay respuestas correctas. Gracias.
- Inicia sesión.
- Crea una nueva publicación.
- En la publicación, añade dos imágenes en paralelo. ¿Cómo fue esta experiencia?
- Si todavía no has hecho clic en el icono «+» de la barra de herramientas superior para añadir un bloque, hazlo ahora y añade un bloque de Galería. Ahora añade dos imágenes al bloque de Galería. ¿Cómo fue esta experiencia?
- Con estos distintos bloques en mente, intenta añadir una imagen y texto en paralelo en tu publicación.
- ¿Encontraste el bloque Medios y texto o resolviste el paso 5 de alguna otra manera?
- Si no utilizaste el bloque Medios y texto, intenta añadirlo ahora. Una vez que hayas añadido una imagen y texto a este bloque, invierte su disposición para que la imagen quede a la derecha del texto. ¿Qué te pareció este bloque?
- A continuación, crea un texto que esté en paralelo. ¿Cómo fue esta experiencia?
- Si no utilizaste el bloque Columnas, intenta añadirlo para mostrar texto en paralelo. ¿Cómo te fue?
- Ahora que tienes más experiencia con los bloques, ¿qué tan intuitiva te resulta esta interfaz?
Guion de receta de tarta de noviembre
¡Imagina que has creado la receta perfecta de una tarta y quieres compartirla con el mundo! Has reunido tus notas y estás listo para crear esta nueva publicación en tu sitio.
- Inicia sesión.
- Crea una nueva publicación.
- Ponle a la publicación el título: «Receta de Gutenberg».
- Añade un párrafo que describa la receta: «Esta es una receta de prueba de una deliciosa tarta. Nos encantan las tartas porque son ácidas y dulces al mismo tiempo».
- Añade un bloque de Imagen y selecciona una foto de una tarta. Haz que la imagen ocupe todo el ancho.
- Añade un bloque de Columnas con dos columnas para los ingredientes.
- En la primera columna, añade un bloque de Encabezado y escribe «Masa».
- En la misma columna, añade una lista con viñetas:
• 1 ½ taza de migas de galleta
• ¼ taza de azúcar - En la segunda columna, añade un bloque de Encabezado y escribe «Crema de frutas».
- Y en esta columna, añade una lista con viñetas:
• 1 paquete de arándanos rojos (12 onzas)
• 1/2 taza de azúcar
• 1 naranja, rallada - Debajo del bloque de Columnas, añade un bloque de Encabezado titulado «Instrucciones».
- Ahora añade un bloque de Lista y cámbialo a una lista numerada.
- Añade cada uno de estos elementos a la lista numerada:
- Precalienta el horno a 350 grados F.
- Rocía con aceite en aerosol un molde para tarta de dos piezas de 9 pulgadas.
- En un recipiente mediano, mezcla las migas de galleta, el azúcar, la estevia, la sal y la mantequilla.
- Presiona la mezcla uniformemente en el fondo y por los lados del molde para tarta.
- Hornea hasta que cuaje, unos 15 minutos.
- En una cacerola mediana, combina los arándanos rojos, el azúcar, la estevia y la ralladura y el zumo de naranja.
- Lleva a fuego lento a temperatura media-alta y cocina hasta que los arándanos rojos revienten, unos 8 minutos.
- Previsualiza tu publicación y haz las correcciones que quieras en el diseño.
- ¡Publica tu publicación!
Guion del bloque de Navegación de diciembre
Imagina que estás creando un nuevo sitio web con WordPress. WordPress ofrece ahora un bloque de Navegación dentro del nuevo editor de bloques. Esto es en lo que te centrarás durante esta prueba de usabilidad. ¡Creemos un menú de navegaciónMenú de navegación Una característica del tema introducida con la versión 3.0. WordPress incluye un mecanismo fácil de usar para proporcionar diversas opciones de control que permitan a los usuarios hacer clic de un lugar a otro en un sitio. usando este nuevo bloque!
- Inicia sesión.
- Crea una nueva publicación.
- Añade un título a tu publicación.
- Ten en cuenta que la forma de añadir diversos contenidos a tu publicación es mediante la adición de bloques. Explora dónde podrías ir para añadir un bloque y añade el bloque de Navegación a tu publicación.
- Haz clic en la opción «Crear vacío» del bloque. Vamos a crear un menú de navegación completamente nuevo.
- Como toda buena navegación, haz que «Inicio» sea el primer elemento del menú y asegúrate de que esté enlazado a la página de inicio.
- A continuación, añade otro elemento llamado «Acerca de» y asegúrate de que esté enlazado a la página «Acerca de».
- Añade un elemento de submenú debajo del elemento «Acerca de». Llámalo «Equipo» y asegúrate de que esté enlazado a la página correcta.
- A continuación, añade otro elemento de nivel superior llamado «Servicios».
- Después añade dos elementos más: uno llamado «Blog» y el otro «Contacto».
- Vuelve atrás y elimina el elemento «Servicios» de tu bloque de Navegación.
- Ahora cambia el enlace del elemento «Contacto» enlazándolo a la publicación «Happy Flowers».
- Cambia el texto del elemento «Blog» a «Archivo», pero mantenlo enlazado a la misma página.
- Previsualiza tu publicación.
- ¿Cómo fue esta experiencia?
Vídeos
Vídeo 1 – En paralelo (6 de nov.)
No consigo ponerlos en paralelo.
Bloque de Galería: ¿podríamos añadir más de una imagen? Genial. ¡Fue fácil!
Vídeo 2 – Receta de tarta (20 de nov.)
Lo único que añadiría es que quiero poder cambiar la fuente y el color.
Vídeo 3 – Receta de tarta (27 de nov.)
Esto es un poco complicado.
¡De acuerdo, por fin estamos avanzando!
Vídeo 4 – Bloque de Navegación (4 de dic.)
No estoy completamente seguro de cómo añadir un bloque. Así que parece que realmente no se puede hacer aquí (configuración del bloque de la barra lateralBarra lateral En WordPress, una barra lateral es un área preparada para widgets que los temas de WordPress utilizan para mostrar información que no forma parte del contenido principal. No siempre es una columna vertical al lado. Puede ser un rectángulo horizontal debajo o encima del área de contenido, en el pie de página, el encabezado o cualquier otra parte del tema.).
Tardó un poco, pero al final lo conseguimos.
La verdad es que fue un poco confuso. Se volvió más claro a medida que avanzaba, pero no estoy seguro de haber realizado todas las tareas tal como se solicitaban.
Vídeo 5 – Bloque de Navegación (11 de dic.)
Aproximadamente a los 9 minutos, el usuario se da por vencido. No consigue descubrir cómo añadir un bloque de Navegación. Aproximadamente a los 8 minutos buscó en la Biblioteca de bloques, pero no tuvo éxito porque no revisó cada acordeón, y terminó buscando «vacío» en lugar de «Navegación».
Vídeo 6 – Bloque de Navegación (18 de dic.)
Esperaba ver una lista de bloques. (En referencia a la pestaña Bloque de la barra lateral)
Los submenús están resultando difíciles en estas pruebas de usabilidad. Sé que es un problema de diseño que intentamos resolver.
Comentarios
Al igual que con todos los vídeos anteriores que se han compartido, ¡deja algunos comentarios! ¿Qué patrones te llaman la atención? ¿Qué logran hacer estos usuarios al navegar y crear una publicación? ¿Qué dificultades se hacen evidentes en su flujoFlujo El flujo es el recorrido de pantallas e interacciones que se sigue para realizar una tarea. Es un vector de experiencia. El flujo también es una sensación: estar completamente concentrado y en la zona. El flujo ocurre cuando se eliminan las dificultades y tienes libertad para realizar una actividad sin formular intenciones. Simplemente lo haces.?
Como recordatorio, si te interesa ayudar con las pruebas de usabilidad, hay varias cosas que puedes probar:
- Únete al canal #research en slackSlack Slack es una plataforma colaborativa de chat grupal https://slack.com/. La comunidad de WordPress tiene su propio canal de Slack en https://make.wordpress.org/chat/.
- Puedes escribir un guion de prueba que pueda someterse a pruebas de usabilidad para Gutenberg.
- O simplemente mira los vídeos y deja algunos comentarios a continuación.
Gracias por verlos y por contribuir siempre que puedas.