Dentro de una crítica de diseño con Facebook

En Facebook, nuestra misión de hacer que el mundo sea más abierto y conectado significa estar abiertos a nosotros mismos, compartiendo no solo el trabajo que hacemos sino también cómo lo hacemos. Como resultado, comenzamos un experimento para compartir una parte crítica de nuestro proceso de producto: la crítica de diseño.

Al mostrar cómo los miembros de nuestra organización de diseño a menudo realizan críticas, queríamos resaltar lo que puede hacer que la crítica funcione bien y lo que a menudo puede interferir.

Invitamos a diseñadores de todo el mundo a participar en este experimento compartiendo su trabajo con nosotros usando el hashtag #FacebookDesignCrit. Nuestra primera crítica colaborativa fue un éxito (puede leer un artículo de seguimiento del participante sobre lo que aprendió al hacer la crítica con nosotros).

Diseñador / desarrollador Steve Saul

Para nuestra segunda crítica, nos reunimos con el desarrollador y diseñador de Bay Area Steve Saul, revisando sus diseños para una herramienta colaborativa de educación en línea llamada MixLink.

Seis miembros de la organización de diseño de Facebook: Ryan McLaughlin, Holly Hagen, Pierre Marly, Geoff Teehan, Tanner Christensen y Sara Getz, se sentaron con Steve para hablar sobre su trabajo.

Ryan McLaughlin, Holly Hagen, Pierre Marly, Geoff Teehan, Tanner Christensen y Sara Getz

Comenzamos revisando el producto MixLink de Steve, explicando la historia de cómo surgió.

Lo que inmediatamente se destacó fue la preparación de Steve. Llegó a la reunión con una visión clara de lo que quería comentarios, lo que ayudó al grupo a centrarse en un área específica del producto para mejorar. Explicó que su objetivo principal era ayudar a los estudiantes que usan MixLink a comprender mejor su progreso a medida que trabajaban en las tareas, y quería nuestra opinión sobre si sus diseños actuales estaban logrando ese objetivo o no.

La página de asignación de MixLink que criticamos.

"Realmente quería que se viera y se sintiera como si los estudiantes estuvieran completando con lo que estarían familiarizados, que es un folleto", explicó Steve. "Esa es la explicación de lo que sucede en el lado derecho de la pantalla. La respuesta que estoy buscando es: ¿cómo diseñas una interfaz que sea simple y fácil de seguir? "

Con un marco sólido de MixLink y una comprensión clara de los desafíos que enfrentó, nos pusimos a trabajar.

La vista de progreso de la tarea ayuda a los estudiantes a mantenerse motivados.

Geoff: ¿Puedo hacer una pregunta sobre el indicador de progreso del círculo azul en la parte superior? ¿A qué estás tratando de llegar con el círculo, son los días restantes o la fecha de vencimiento?

Steve: Mi pensamiento inicial era que el círculo haría una cuenta regresiva desde el momento en que se asignó a la fecha de vencimiento. Pensé en los estudiantes que podrían estar haciendo esto como tarea. En ese caso, pensé que sería importante que tuvieran algún marcador de "¿Cuánto tiempo me queda para completar esto?". La pregunta que no había respondido cuando diseñé esto era si vendrían estudiantes o no. volver a esta página con frecuencia, eso podría no ser un caso de uso normal. Tal vez solo vengan aquí una vez y completen la tarea en una sola sesión, no lo sé.

Geoff: Puede ser un ejercicio de diseño interesante regresar y pensar solo en ese elemento, que actualmente se presenta como tres elementos: el círculo, la etiqueta de fecha de vencimiento y la etiqueta de tiempo restante. Ir a través de diferentes tipos de casos de uso. Piense en una tarea que vence dentro de un período de tiempo corto, una en un período de tiempo más largo, y así sucesivamente. Piense en cuál podría ser la forma más sencilla de comunicar lo que esta área está tratando de lograr para cada uno de esos casos. ¿Hay una sola manera de comunicar esto de manera efectiva en lugar de tres diferentes? ¿Cómo podría ser esa solución en el mismo espacio?

Pierre: La otra cosa a tener en cuenta es que parece que estás mezclando una metáfora para un calendario con una para un reloj. En realidad estás usando un círculo, así que para mí hay una tensión visual entre el concepto que estás tratando de representar y lo que quieres transmitir.

Tanner: ¿Puedes explicarnos cómo llegaste al gráfico circular para este problema?

Steve: Inicialmente quería hacer una barra de cuenta regresiva. Había una versión anterior que tenía a medida que avanzas en la lección, la barra se encoge hasta que se completa. Me pareció confuso, porque había dos indicadores similares de progreso en una tarea [uno era la cantidad de progreso que había realizado en una tarea y otro por cuánto tiempo le quedaba hasta el vencimiento]. Así es como llegué al círculo.

Diseño inicial de Steve para un indicador de finalización.

Pierre: Puede ser interesante pensar en la noción de cómo un estudiante responde a la presión con este enfoque. Cuando diseña esto, si tiene en cuenta la sensación de presión, una cuenta regresiva visual de un temporizador puede hacer que se sienta de cierta manera frente a algo más estático. Estás hablando de cómo hay un par de medidas diferentes para completar aquí, pero ¿has considerado eliminar elementos innecesarios? No estoy listo para enviar al maestro hasta que se complete la tarea, entonces, ¿necesito ver un botón "Enviar al maestro" que se ha desvanecido?

Steve: Ese es un buen punto. Estaba pensando en lo que es más importante en cada etapa. Cuando carga la página por primera vez, lo importante es un llamado a la acción para comenzar la tarea. Luego, cuando la tarea está en progreso, tiene estas cosas basadas en el tiempo en torno a ese progreso y el progreso que ha realizado en la tarea misma. Y cuando haya terminado, la presentación es más importante que cualquiera de esas otras cosas. Creo que ese es un buen punto.

Ryan: ¿Puedo hacer una pregunta sobre el diseño de la página en sí? ¿Cuál es el valor de poder escanear toda la tarea antes de comenzarla?

Steve: Estaba pensando que tal vez un maestro haría que los estudiantes leyeran previamente la tarea, pero si no han comenzado la tarea, tal vez ver que no es necesario.

Tanner: Para ser claros, Ryan, ¿estás preguntando si es necesario que haya un botón de Comenzar asignación?

Sara: Sí, si no había un botón Comenzar asignación, y solo comenzó la primera vez que un estudiante hizo clic en una respuesta. Eso ayudaría a limpiar parte de esta vista también porque podría eliminar ese botón.

Steve: Bueno, necesito saber antes de que un estudiante comience la tarea quiénes son. Desde una perspectiva técnica, el botón Comenzar asignación puede iniciar sesión si aún no se han conectado. La razón por la que lo hice de esta manera fue porque elimina un paso entre registrarse en el sitio, iniciar sesión y hacer que los maestros tengan que agregar estudiantes a una tarea.

Holly: Me gusta la idea de un botón "Comenzar". Como profesor, eso probablemente sería muy útil. Puedo ver quién inició y realmente comenzó frente a las personas que no lo hicieron, o quienes tal vez se atascaron, entonces puedo ir y hablar con ellos sobre su progreso.

Sara: Algo más es si mantener la navegación lateral abierta todo el tiempo o colapsarla cuando un estudiante está ocupado con las preguntas. Esto se remonta a la cantidad de información que alguien necesita en un momento dado. ¿Puedes hablar un poco más sobre por qué decidiste dejarlo visible?

Navegación para tareas en curso / enviadas.

Steve: En una versión anterior, intenté poner una lista de enlaces allí, y eso no era práctico porque cuando los elementos tenían un nombre muy largo no había forma de desplazarse por toda la lista. Decidí dejarlo abierto porque quería que los estudiantes siempre vieran dónde están para referencia visual. Realmente no había pensado en ocultarlo o colapsarlo, pero estaba tratando de modelarlo en torno a algunas pruebas que había visto en línea.

Holly: Me gusta que sea persistente. Me gusta poder ver los temas de las preguntas y las marcas de verificación. La fecha de vencimiento es donde estoy tratando de averiguar si es la información más importante.

Geoff: Algo relacionado, y esto es menor, pero ¿ha recibido algún comentario sobre las marcas de verificación verdes? ¿Eso se siente confuso para los estudiantes? ¿Recibió algún comentario sobre si piensan que es una validación de que la sección sea respondida correctamente o no?

Steve: No lo he hecho, pero puedo ver cómo eso puede ser confuso. Los estudiantes no pueden ver cuáles son las respuestas correctas o incorrectas hasta después de que el maestro haya calificado la tarea. Solo ven su progreso en lo que han completado en comparación con lo que queda.

Geoff: Realmente me gusta lo utilitario que es esto, pero creo que puede ser interesante explorar formas de hacer esto un poco más divertido para que a los niños realmente les guste. Ver una barra de progreso, o cuando aparecen las marcas de verificación. Creo que esas son buenas señales como una sensación de logro. ¿En qué otros pequeños momentos de alegría o logro puedes trabajar en esto para seguir motivando a las personas? Estas son tareas relativamente cortas, pero puede imaginarse en algunas más largas que podrían volverse obsoletas o secas. ¿De qué otras maneras podrías hacer que esto sea más atractivo? Como usar otros elementos de diseño interesantes cuando las cosas se completan o usar animación cuando logras algo. Esos pedacitos de alegría y deleite. Creo que una vez que apuntes algunas cosas más fundamentales, sería un lugar realmente interesante para que mires a continuación.

Holly: Pude ver el uso de refuerzo positivo al principio o al final de la lección. Imagina terminar la lección y obtienes algo increíble.

Steve: ¿Como una estrella de oro?

Ryan: Eso sería interesante. También puede explorar un sistema de recompensas a nivel de cuenta o algo así. ¿Cuánto has completado o algo así que te sigue?

Tanner: Estamos casi fuera de tiempo. ¿Alguna idea o pregunta restante? ¿Sientes que tienes buenas respuestas Steve? ¿Tienes alguna idea ahora de lo que debes hacer cuando te alejas de esto?

Steve: por supuesto. Hay un montón de comentarios útiles que has dado. Muchas ideas sobre algunos cambios y ajustes simples, pero también algunas cosas nuevas a tener en cuenta.

Para llevar clave

En general, esta fue una crítica exitosa. Tuvimos una gran conversación con Steve que generó algunas oportunidades para agregar claridad de progreso en el producto, tanto en términos de fruta baja como de ideas más grandes.

En términos de resultados inmediatos, Steve respondió rápidamente a nuestro desafío de introducir más deleite en la finalización de la lección agregando una marca de verificación azul animada.

Además, nuestro equipo de diseño aprendió algunas cosas sobre el diseño para la educación. En base a esta experiencia, aquí hay algunas sugerencias que tomamos de la crítica:

1. Estar realmente abierto a comentarios

Dar retroalimentación constructiva es difícil, y aceptarlo puede ser aún más difícil. Es fácil ponerse a la defensiva sobre el trabajo que hacemos como diseñadores, pero Steve nos impresionó con su receptividad a las preguntas y nuevas ideas.

Fue un buen recordatorio para todos nosotros de que cuando estamos en el banquillo, lo más importante es permanecer abiertos y comunicativos. Confíe en que sus colegas diseñadores quieren lo mismo que usted: construir buenas experiencias para las personas que usan sus productos.

2. Sepa lo que quiere sacar de la crítica

Steve llegó a la crítica con un objetivo muy específico: ¿Su diseño comunicaba efectivamente el progreso y mantenía la atención de los estudiantes? Cuando hicimos preguntas y exploramos la experiencia, Steve pudo aclarar decisiones para nosotros y ayudar a mantener la conversación en evolución.

Llegar a la crítica con un objetivo específico en mente puede ayudar al grupo a mantenerse enfocado.

3. El contexto en la crítica es clave

Finalmente, aunque Steve llegó con un objetivo específico, teníamos muchas preguntas sobre la experiencia general que podrían haber ayudado a aliviar algunos de los problemas que estaba produciendo el área de enfoque de Steve.

Finalmente, al observar las partes de la experiencia adyacentes a lo que estaba preguntando, pudimos descubrir algunas nuevas oportunidades para mejorar el área de enfoque.

A veces, las sugerencias de diseño más impactantes vienen antes en la experiencia. Con conocimiento previo, puede ver esas oportunidades más claramente.

Un agradecimiento especial a Sara Getz por crear el primer borrador de esta publicación.