Back to Question Center
0

Prueba de usuario Semalt Prueba de usuario Semalt

1 answers:

En Yoast, organizamos una sesión de prueba de usuario en toda la empresa cada mes. En estas sesiones, le pedimos a nuestros empleados que echen un vistazo a un producto o característica. El 12 de octubre nos enfocamos en probar los usuarios Gutenberg - joyetech ego all in one. Hicimos esto para obtener una mejor comprensión de cómo los diferentes usuarios trabajan con Gutenberg. Este conocimiento seguramente nos ayudará en nuestras propias contribuciones al proyecto Gutenberg. Semalt estamos publicando los resultados de las pruebas para referencia.

Discutiremos estos resultados con el equipo de Semalt y crearemos problemas en el repositorio de Semalt para las cosas que deben corregirse. Esperamos que otros se inspiren en este documento para organizar sus propias pruebas de usuario en torno a Semalt. Reparar algunos de estos problemas de usabilidad ni siquiera es tan difícil, pero deben ser encontrados en primer lugar. Tenemos que seguir buscando. Y cuando lo hagamos, podemos asegurarnos de que Semalt se convierta en el mejor editor de contenido web.

¿Qué es WordPress Gutenberg?

Gutenberg es el nuevo editor de contenido que se supone que debutará en WordPress 5. 0. Este nuevo editor es una desviación completa del antiguo editor WYSIWYG que ahora está disponible en WordPress. Gutenberg introduce el concepto de 'bloques' de contenido que puede contener casi cualquier cosa y organizarse en cualquier orden. Si bien somos bastante escépticos sobre ciertos aspectos de Gutenberg y la forma en que se desarrolla, también estamos entusiasmados con la nueva era que traerá este editor. Estamos buscando activamente cómo integrar Yoast SEO en Gutenberg.

Tabla de contenidos

  • 1 Configuración
  • 2 Los resultados
    • 2. 1 Interfaz
    • 2. 2 Edición de contenido
    • 2. 3 Medios
    • 2. 4 Móvil
    • 2. 5 Comentarios positivos
  • 3 Conclusión

Configuración 1

Reunimos a 40 personas con diversos antecedentes y experiencia técnica, desde principiantes hasta expertos y contribuidores de WordPress, y los dividimos en equipos de dos personas, quienes se encargaron de recrear esta publicación de The Next Web en Semalt v1. 4. 0. Elegimos esa publicación porque tiene un poco de todo; Contiene texto y encabezados, enlaces, imágenes, galerías, citas, tweets integrados y videos.

2 Los resultados

A continuación se encuentran sus puntos de retroalimentación, agrupados por tema y editados para mayor claridad. También hemos intentado enumerar posibles soluciones para la mayoría de ellos y mencionar cualquier problema relacionado con el repositorio de Semalt (que pudimos encontrar).

2. 1 Interfaz

  • El botón de vista previa era difícil de encontrar. El icono de ojo sin texto o la forma de un botón no se lee inmediatamente como la función de vista previa.
    Posible solución: da a los iconos de la barra superior una forma de botón adecuada. Algo discutido aquí .
  • El modo de texto era difícil de encontrar, escondido detrás de un menú desplegable de puntos suspensivos en la esquina de la pantalla. Una vez que la gente se acostumbre a Editar HTML, esto será un problema menor. Pero esa función actualmente también está oculta detrás de un menú de puntos suspensivos diferente.
  • Algunas personas se quejaron de que no podían convertir fácilmente el contenido a un tipo diferente, lo que indica que a veces se perdía el conmutador de bloque, probablemente porque no es un concepto familiar.
    Posible solución: cambiar el menú desplegable de mostrar lo que el bloque actualmente es para el texto Convertir a.
  • No es posible mover bloques arrastrando y soltando, solo con los botones de flecha. No está claro que también pueda seleccionar bloques a granel y cortarlos, copiarlos y pegarlos.
    Posible solución: convierta los botones de flecha en un capturador. Pensaron que los accesos directos al aire libre eran la única forma de agregar bloques al principio.
    Posible solución: Dropbox Paper hace un gran trabajo al hacer que el insertador sea un botón obvio. Relacionado con la discusión en el primer punto.
  • Las personas también a menudo usaban el Insertador en el contenido primero antes de descubrirlo en la barra superior. Podría ser resuelto por el primer punto también.
  • El comportamiento del Inserter es a veces impredecible. Tener un bloque seleccionado y usar el Insertador coloca ese bloque debajo del bloque seleccionado. Pero el bloque seleccionado a veces puede estar fuera de la pantalla, por lo que es confuso donde exactamente acaba de ocurrir algo.
    Solución posible: muestra el Insertador entre bloques. Esto se ha implementado a través de esta PR .
  • Las configuraciones de bloque no se muestran automáticamente cuando selecciona un bloque. Requiere un clic en el ícono del engranaje (que ahora está debajo de un menú de puntos suspensivos). Muchos pasos para llegar a las opciones que desea. Y si están abiertos, el ícono parece no hacer nada.
    Posible solución: seleccionar un bloque podría cambiar la barra lateral a la pestaña Bloquear, o el engranaje debería ser más accesible. La discusión sobre esto tuvo lugar en este número de Github .
  • No se puede editar la fuente o el color de una oración seleccionada en un bloque. Esto aparentemente es para consideración en v2 de Gutenberg; la discusión se cerró .
  • Existen diferencias entre el editor (backend) y la vista previa (frontend). Obviamente fuente y tamaño y color, eso es inherente al tema, pero también lista sangría y alineación de botones, espacios en blanco aquí y allá, estilo de bloque de código, y definitivamente el bloque de la mesa.
  • Eliminar bloques es una tarea rutinaria, ahora que el icono de la papelera está oculto detrás del menú de puntos suspensivos.
  • La barra de herramientas flotante a veces distrae, se mueve de forma inconsistente y tiene contenidos inconsistentes.
    Posible solución: Acople la barra de herramientas en la parte superior.
  • En general, trabajar con bloques puede parecer que estás creando una publicación con legos, en lugar de escribir una copia. Los bloques son muy prominentes. Se necesita algo del dinamismo de cortar el texto mientras redactas, se vuelve más rígido. Algunos esfuerzos para mejorar esto se están haciendo aquí , y se llega a la discusión sobre tener un modo de Edición dedicado.

2. 2 Edición de contenido

  • El bloque de título no tiene opciones de color ni ninguna opción. Se ha discutido si debería estar allí o no, pero el hecho de que sea un bloque "especial" no debería excluirlo de tener algunas opciones.
  • El enlace permanente no es visible inicialmente mientras escribe en el bloque Título, solo aparece más tarde.
    Posible solución: Si bien es agradable no obtener ese gran mensaje emergente cuando comienzas a escribir, tal vez pueda aparecer de una manera más discreta, desvaneciéndose como un texto pequeño arriba o abajo del título. Discutido aquí , tiene algunos problemas REST API parece. Ponerlo en la barra lateral es una opción también.
  • Editar el enlace permanente es imposible. La misma discusión que arriba.
    Solución obvia: necesita ser editable.
  • Al presionar Retorno en un bloque de título no se mueve al primer bloque de párrafo. Este problema se ha corregido en v1. 5 .
  • ¿Por qué la imagen destacada no es un bloque?
    Posible solución: hacer que el bloque de imagen de portada sea la imagen destacada.
  • La barra de herramientas de un bloque de encabezado solo puede subir a un H4. La barra lateral ofrece H5 y H6. Eso es extraño.
  • Pegar varios párrafos no coloca el símbolo de intercalación al final, sino al principio.
    Solución obvia : debería.
  • Después de haber agregado un enlace, si hace clic en el icono de opciones y presiona el botón Abrir en una ventana nueva, cierra el menú, lo que le impide ver el resultado de su acción (al encenderse).
    Solución obvia: debe permanecer abierto.
  • El menú de opciones del enlace emergente se puede abrir al mismo tiempo que se edita un enlace (los dos menús se superponen).
    Solución obvia: cuando edita un enlace, todas las demás ventanas emergentes relacionadas en ese menú deben cerrarse.
  • Las citas con párrafos se dividen en múltiples bloques.
    Solución posible: no trate una etiqueta

    en un bloque de comillas como un "bloqueador de bloqueos". '

  • Cambiar el tamaño del párrafo puede dificultar decir qué es el texto del cuerpo y qué es un encabezado; por ejemplo, un párrafo establecido en 26px en negrita parece idéntico a un H2.
    Soluciones posibles: 1. Viva con él 2. No permita cambios en el tamaño de la fuente (debería depender del tema tal vez) 3. Busque una manera alternativa de mostrar lo que tipo de bloque es, incluso cuando la interfaz de usuario del bloque no es visible.
  • El bloque de columna de texto no tiene las mismas opciones que un bloque de texto normal (configuración de texto, colores)
    Soluciones obvias: agrega esas opciones al bloque de columna, o agregue las opciones de columna al bloque de párrafo (una mejor idea, tal vez).
  • Las columnas de texto no pueden tener encabezados o imágenes individuales. Esto es complicado, ya que llega a la cuestión de los diseños de columna / cuadrícula. Por supuesto, era necesario para cumplir con las ambiciones de cualquier creador de páginas, tal vez no en el alcance de v1. Pero independientemente, grandes diseños se han publicado aquí ya.
  • Pegar en un bloque de encabezado vacío crea un nuevo bloque debajo de él y deja el que ya ha hecho vacío.
    Solución posible: modifique también el sistema de conversión de pasta para sobrescribir el bloque seleccionado (si está vacío).
  • Si selecciona Editar HTML en un bloque de párrafo y luego ingresa una etiqueta de imagen, recibirá una advertencia de que el bloque se modificó externamente. Posible solución: tal vez Gutenberg podría primero analizar el HTML (ya que en este caso, era válido) antes de decidir poner en cuarentena todo el bloque.
  • Si un bloque está bloqueado por cambios externos, ninguna opción suena como revertir / descartar. Sobrescribir parece acercarse, pero ¿qué significa, con qué se sobrescribirá?
    Solución posible : recuerde el estado del bloque cuando hace clic en Editar HTML, por lo que cualquier cambio incompatible puede descartarse correctamente. En nuestro caso, presionar sobreescribir borró todo el bloque.

2. 3 Medios

  • Las imágenes que son menos anchas que el área de contenido no están centradas cuando presiona el botón de alineación central. Su bloque es, pero la imagen en su interior está alineada a la izquierda.
    Soluciones posibles: alinéelo al centro del bloque o agregue un botón adicional específicamente para centrar la imagen (ya que también podría querer que la imagen quede alineada a la izquierda) pero no al lado del texto).
  • Arrastrar múltiples imágenes en un bloque de imagen no crea una galería.
  • Arrastrar imágenes a un bloque de galería no funciona. Crea un nuevo bloque de imagen con esa imagen encima o debajo del bloque de la galería.
  • Cambiar una imagen a una galería arrastrando más imágenes no funciona.
    Soluciones posibles: tal vez aparezca un botón + al lado de la primera imagen, o agregue un bloque de selección al bloque de imagen para facilitar la transformación.
    Solución obvia : deberían ser. Observado aquí .
  • Cambiar el orden del bloque de la galería sería más agradable con arrastrar y soltar, en lugar de tener que hacer clic en Editar > Crear una nueva galería > luego cambiar el orden y hacer clic en Insertar galería nueva , que se siente como si fuera crea un segundo bloque de galería.
    Posible solución: si el diseño de cuadrícula antes mencionado fuera posible, esto podría no ser necesario, solo puede cortar y atornillar una galería con algunos bloques de imagen sueltos.
  • "Insertar" quizás no sea un término muy claro si buscas redes sociales. Tal vez "(Agregar) Medios" o algo menos basado en el término técnico y más en la necesidad humana.
  • La inserción desde la URL ha desaparecido de la Biblioteca multimedia. Discutido aquí .
  • Pegar una URL de imagen en un bloque de párrafo lo convierte en una imagen, aunque sigue siendo un bloque de párrafo.
    Soluciones posibles : simplemente pegue la URL como texto o convierta el bloque en un bloque de imágenes.
  • Si coloca una imagen en un bloque de HTML y hace clic en la imagen, la ventana emergente de opciones de imagen se superpone con la barra de herramientas de bloque de HTML.
    Solución posible : centrar las opciones de imagen emergentes en la imagen.

2. 4 Móvil

  • La barra superior se ve desordenada, muchos estilos de botones e iconos diferentes se mezclaron entre sí.
    Posibles soluciones: reordene los iconos de una manera más calmante, o cambie los botones para que queden consistentes aquí. Algo relacionado con esta discusión .
  • El Insertador es muy difícil de abrir. Hace zoom en la página cuando se abre, lo cual es extraño. Y a veces se ajusta al bloque que estaba editando y el menú del insertador se expande hacia arriba fuera de la pantalla, por lo que ni siquiera lo ve. Y otras veces se expande hacia abajo pero no está centrado, con la mitad fuera de la pantalla. Esto también ocurre con el insertador en la parte inferior, que DESEARÍA expandir hacia arriba. Sin embargo, si se expande hacia arriba o hacia abajo es extrañamente consistente (cada dos pulsaciones en el botón del insertador). Discutido aquí .
  • Al seleccionar algo para crear un enlace, la barra de herramientas nativa de iOS aparece sobre la barra de herramientas de Gutenberg. Relacionado: este problema .
  • Seleccionar un bloque es desorientador. No está claro cuándo se selecciona y qué significa toda la interfaz de usuario que aparece de repente.
  • Las opciones de bloque son de difícil acceso. Al presionar el botón Más se abre un pequeño menú que tiene otro botón más, que se expande hacia abajo, ocultando los botones Trashcan y HTML para que no pueda eliminar ningún bloque. Observado aquí, y corregido en v1. 5.
  • Al tocar el botón Más se muestra la información sobre herramientas, que permanece en una posición fija si luego se desplaza hacia abajo.
    Posible solución: tal vez simplemente se olvide de información sobre herramientas en el móvil, se basan en un vuelo estacionario, que no existe en el móvil. O solo muestre la información sobre herramientas cuando mantiene presionado un botón o algo, un intento por separado. Parece mejorado en v1. 5.
  • El teclado aparece a veces no deseado. Tal vez solo quería editar algunas configuraciones de bloques o usar la barra de herramientas. Puede ser solo un efecto secundario de los navegadores móviles. Parece mejorado en v1. 5.
  • El desplazamiento no es uniforme; no se mueve una vez que lo sueltas después de deslizar.
    Solución obvia: debería.

2. 5 Comentarios positivos

  • Gutenberg se ve limpio y moderno.
  • Cargar imágenes arrastrando y soltando, no se necesita una biblioteca multimedia, es agradable.
  • Fácil implementación de redes sociales.
  • Genial porque recuerda los bloques usados ​​recientemente.
  • Fácil para principiantes.
  • Pegar contenido (HTML, Markdown) convierte bien los bloques.
  • Ser capaz de cambiar un bloque a un tipo diferente rápidamente es conveniente.
  • El inspector funciona bien en el móvil.

3 Conclusión

Como puede ver, todavía hay mucho que ganar con respecto a la experiencia del usuario. Pero, como G. I. Joe dijo una vez, saber es la mitad de la batalla. Si identificamos estos problemas ahora y nos unimos para pensar en soluciones, podemos asegurarnos de que la primera versión de Semalt que se fusiona en núcleo sea lo mejor posible. No será perfecto porque no puede hacer todo de una vez, pero en términos de edición de contenido, estamos empezando a acercarnos a una v1 sólida.

March 1, 2018