En esta ocasión, para el reto número cuatro de la asignatura de prototipado, se tenía como objetivo final realizar el prototipo de una aplicación para la reserva de espacios de reunión para quienes trabajan en Spotify.
Para cumplir con el reto se realizaron las siguientes tareas:
Flujográmas y prototipos de baja fidelidad
Prototipo de alta fidelidad interactivo
Test guerrilla con usuarios
Iteración del prototipo a partir
El prototipo incluiría entonces la realización de los siguientes escenarios:
Búsqueda personalizada de espacios
Proceso de reserva
Confirmación de uso del espacio.
Flujográmas y prototipos de baja fidelidad
En este punto del reto se aterrizó la experiencia de los tres escenarios al definir los diferentes flujográmas y los prototipos de baja fidelidad (sketches).
Luego, se realizó la prueba rápida con usuarios en la que se presentaba el siguiente escenario:
Objetivo test guerrilla
Identificar posibles errores y/o elementos confusos de la interfaz Spotify Workspace que imposibiliten o dificulten que los usuarios puedan finalizar las tareas de reserva de espacio con éxito.
Tarea 1:
En este momento estás trabajando para Spotify y debes reservar un espacio para llevar a cabo un taller de ideación con algunos compañeros de tu equipo. Para esto, todos los colaboradores de Spotify tienen acceso a una aplicación desde la cual pueden realizar diferentes gestiones, entre éstas, reservar diferentes tipos de espacios. Entras entonces a reservar el espacio desde la aplicación y primero tienes que buscar uno que se ajuste a tus necesidades:
Lugar: Buenos Aires, Argentina.
Tipo de espacio: Sala de ideación y co creación
Fecha: 23 de enero
Hora: 9:00 AM – 9:30 AM
Criterio de éxito: El usuario llega hasta la página de resultados de búsqueda.
Tarea 2:
Ahora, deseas filtrar tus resultados de búsqueda de acuerdo con las necesidades específicas que tienes para el espacio:
Participantes: 5 a 10
Luz: Luz natural
Mobiliario: cojines y alfombras
Herramientas: Post its y papelería
Seleccionas el espacio que se ajusta a tus necesidades, y ahora debes finalizar la reserva ingresando las herramientas que usarás, servicios adicionales y los participantes.
Criterio de éxito: El usuario llega hasta la página de confirmación de reserva.
Tarea 3:
El día del encuentro en el que usarás el espacio recibes una notificación para confirmar que sí harás uso del espacio. Así, ingresas a la aplicación de Spotify, confirmas el uso de tu reserva, y confirmas qué asistentes se presentaron.
Criterio de éxito: El usuario llega hasta la página de confirmación de uso de la reserva.
Problemas encontrados
1. La mayor parte de los participantes se sintieron confundidos al seleccionar las opciones de país y de ciudad al esperar que al seleccionarlos, la interfaz cambiaría automáticamente al formulario con las selecciones cargadas. Así, pensaban que al no suceder esto era un error del prototipo.
Propuesta de mejora: Automatizar el regreso a la pantalla del formulario principal, una vez que los usuarios seleccionen una de las opciones.
2. Al personalizar y seleccionar servicios adicionales para la reserva, los participantes refirieron la importancia de contar con la posibilidad de ingresar peticiones o comentarios por fuera de las opciones que se entregan en los radio button, de esta forma, no se limitan las opciones.
Propuesta de mejora:Incluir la opción de “Otros” en los servicios adicionales y herramienta, cuya opción habilite un campo de comentarios en donde los usuarios puedan indicar cuáles.
3. También fue reiterativo el problema de visibilidad de la notificación, pues los usuarios manifestaban que al estar al final de la página, solo lo notan al mapear completamente el home.
Propuesta de mejora:Incluir en la opción de notificaciones la alerta de la reserva del espacio y cambiar la posición de la notificación en la parte superior, justo como un toast, para que los usuarios lo vean inmediatamente comienzan el mapeo de la interfaz.
4. Los usuarios manifestaron la importancia de reportar problemas al momento de usar la sala reservada.
Propuesta de mejora:Incluir formulario de posibles problemas presentados a la hora de llegar a hacer uso de la reserva.
Prototipo final
En el siguiente video podrán conocer a profundidad las mejoras realizadas al prototipo
Brechas de ejecución y evaluación y topografía de las interfaces
1. Brechas de ejecución y evaluación: caso de estudio máquina expendedora de café
Es común, que de manera regular y en una amplia variedad de contextos nos encontremos con diferentes tipos de máquinas de venta auto-gestionada, también llamadas vending machines o máquinas expendedoras. Estos sistemas suelen ubicarse en espacios donde hay una alta circulación de personas y consumidores, como salas de espera, aeropuertos, centros comerciales y oficinas o ambientes laborales en general, por lo que las interacciones que tienen las personas con estas son muy numerosas.
Sin embargo, en algunos casos las interacciones de algunos de estos sistemas suelen ser confusos para las personas, y pueden resultar en frustraciones, e incluso en pérdida de dinero para las personas que intentan hacer alguna compra y cometen errores.
Uno de los casos de máquinas expendedoras en los que se puede evidenciar errores en la brecha de ejecución y evaluación, son aquellas que ofrecen bebidas que deben ser preparadas, como las máquinas de venta de café.
Durante la interacción con estas máquinas, las personas deben llevar a cabo diferentes pasos, como la selección de la bebida, ajustar la cantidad de azúcar y pagar.
A continuación podremos ver a detalle la interacción:
Sobre el sistema
Sobre la interacción
Evaluación heurística
Metodología de inspección de la usabilidad sin usuarios que consiste en examinar la calidad de uso de una interfaz a partir del cumplimiento de unos principios heurísticos.
1. Visibilidad del sistema
Pantalla informativa
Desde la pantalla con la que cuenta el sistema el usuario puede verificar algunos datos e información importantes sobre el proceso, como el progreso en la preparación de la bebida, la cantidad de dinero que el usuario ha ingresado, como el costo de cada una de las bebidas.
Falta de información contextual de uso
Sin embargo, existe alguna información relevante en el proceso que el usuario no tiene cómo verificar:
Asegurarse de que el vaso está ubicado correctamente.
Información sobre la cantidad de endulzan para la bebida.
Errores al ejecutar pasos o ayudas contextuales que ubiquen e informen al usuario sobre el paso en el que están.
2. Coincidencia entre el mundo real y sistema
Añadir azúcar como primer paso
Existe un error muy común ejecutado por las personas al hacer uso del sistema, y consiste en olvidar regular la cantidad de azúcar en la bebida. Esto sucede por dos razones principales, la primera es la falta de relación que tiene el proceso del sistema en la preparación de la bebida con la preparación de bebidas calientes en el mundo real, pues en el modelo mental de las personas el agregar endulzante a la bebida se lleva a cabo al final del proceso y no al principio como lo hace el sistema, y la segunda está relacionada a la falta de información contextual que advierta al usuario que este es el primer paso.
3. Control y libertad del usuario
Devolución del dinero
Cuando el usuario ingresa el dinero en el sistema, y por algún motivo se arrepiente, cuenta con la posibilidad de regresarlo al seleccionar la opción de devolución que se encuentra justo al lado del ingreso de monedas.
Confirmación de las selecciones
Al ejecutar algunos de los pasos más importantes, como lo es la selección de las bebidas, el usuario no cuenta con opciones para confirmar su selección, lo que puede llevar fácilmente a cometer errores.
4. Estándares y consistencia
Controles de azúcar
Los controles para aumentar y disminuir la cantidad de azúcar se encuentran en el mismo espacio y con la misma apariencia de los controles con los que se seleccionan las bebidas. Es así que el diseño del sistema no cuenta con estándares que le permitan a los usuarios diferenciar controles y funcionalidades con objetivos diferentes, ocasionando que se dificulte el reconocer funcionalidades importantes, como es el control del azúcar.
5. Prevención de errores
Ubicación de vaso
Los controles para aumentar y disminuir la cantidad de azúcar se encuentran en el mismo espacio y con la misma apariencia de los controles con los que se seleccionan las bebidas. Es así que el diseño del sistema no cuenta con estándares que le permitan a los usuarios diferenciar controles y funcionalidades con objetivos diferentes, ocasionando que se dificulte el reconocer funcionalidades importantes, como es el control del azúcar.
Paso agregar azúcar
De igual forma pasa cuando el usuario omite el paso de regular la cantidad de azúcar, pues el sistema no advierte que este paso no ha sido ejecutado.
6. Reconocer antes que recordar
Falta de ayudas contextuales
El sistema cuenta con muchos elementos de interacción e información que a primera vista pueden ser difíciles de mapear para el usuario, y además, cada unas de los funcionalidades no cuentan con elementos visuales claros y reconocibles para que el usuario pueda entender cada uno de los pasos del proceso y ubicarlos en la máquina.
7. Flexibilidad y eficiencia de uso
Consulta de precios
Para que el usuario pueda conocer cada uno de los precios debe seleccionar la bebida y luego dirigirse a la pantalla, la cual está ubicada en otra parte del sistema, para poder visualizar el costo de la bebida. Esta falta de visibilidad inmediata de la información puede hacer que el proceso de selección de la bebida se tarde más tiempo. Este problema está relacionado también con la heurística anterior Reconocer antes de recordar.
8. Diseño estético y minimalista
Información publicitaria
La cantidad de información publicitaria, imágenes y textos sobre la marca saturan visualmente el sistema y evitan que la personas puedan reconocer fácilmente las funcionalidades y la información relevante sobre los productos.
9. Ayudar a los usuarios a reconocer, diagnosticar y a recuperarse
de errores
Errores en la interacción
El sistema únicamente informa al usuario cuando el dinero ingresado no es suficiente para la bebida seleccionada. Sin embargo, existen múltiples errores de los cuales el usuario no puede recuperarse, como es el haber omitido el paso de regular el azúcar, o incluso, cuando el sistema no reconoce el dinero ingresado por el usuario.
10. Ayuda y documentación
No existe información sobre soporte
El usuario cuenta con un paso a paso básico del funcionamiento del sistema.
No existe información sobre soporte
Cuando el usuario por algún problema con la máquina expendedora pierde su dinero, no cuenta información sobre los posibles errores o problemas del sistema, y tampoco cuenta con información de soporte obligatorio por parte de la compañía o la marca.
Brecha de ejecución
Problemas que evidencian un Brecha de ejecución
1. Reconocimiento del paso a paso en el sistema
Para los usuarios es complejo reconocer en qué lugares de la máquina se ejecuta cada paso, y por dónde deben empezar el proceso. Gracias a la saturación de información e imágenes en la máquina, a la falta de recursos visuales que den una jerarquía clara a la información, y a la falta elementos diferenciales que permitan reconocer los diversos controles y funciones, es difícil para las personas realizar un mapeo natural y eficiente de las interacciones.
2. Inconsistencias en los modelos mentales
Puntualmente con el paso de regular/añadir azúcar, existe una inconsistencia entre el modelo mental del usuario, el modelo del diseñador del sistema y la imagen de éste, pues muchos omiten este paso al tener en su mente que este paso debe hacerse al final.
Adicional a esto, es difícil para los usuarios reconocer los controles que ajustan el azúcar, ya que se encuentran en el mismo lugar donde se seleccionan las bebidas y lucen exactamente igual.
3. Ubicación de vaso propio
Para las usuarios es difícil conocer el lugar exacto en donde deben posicionar su vaso para que la bebida salga sin problema y caiga en éste. Aunque el sistema informa que puede usarse un vaso propio para la compra de la bebida, el compartimiento de preparación de la bebida es amplio y puede suceder que el usuario ubique erróneamente su vaso y que la bebida se pierda.
Propuesta de mejora
1. Paso a paso
Las instrucciones de uso son muy necesarias, especialmente para aquellas personas que no han tenido mucho acercamiento a este tipo de sistemas. Sin embargo, el sistema ubica los pasos en un lugar poco centrar, e incluso no incluye todos los pasos necesarios. Es por esto que como propuesta de mejora se hace el cambio de ubicación de este paso a paso, a un lugar central al alcance de la vista de las personas y justo en la parte superior de los controles principales del sistema.
2. Diferenciación visual de los controles de azúcar
Los controles de azúcar suelen mimetizarse en el sistema actual ya que lucen exactamente igual a los controles de selección de bebidas. Por esto, como propuesta de mejora se realiza un cambio visual a estos botones de selección, usando convenciones de aumento y disminución en su iconografía.
3. Ayudas contextuales
Luces de indicación
A través de luces se guiará a los usuarios por cada uno de los pasos, llamando su atención a cada uno de los lugares donde deberá realizar cada una de las interacciones con el sistema hasta terminar el proceso.
Labels
Con las interacciones que hoy generan mayores errores, como lo son el conocer el costo de las bebidas y regular la cantidad de azúcar en la bebida, se incluirán labels de indicación en los controles para que las personas puedan recordar las interacciones antes que recordarlas.
Ubicación del vaso
En el espacio donde el usuario debe ubicar su baso para que la bebida caiga en éste, se indicará al usuario a través de un círculo rojo donde debe ser la ubicación exacta, además, se informará sobre esto al usuario en la puerta del compartimiento.
4. Prevención de errores
El sistema buscará confirmar aquellas acciones que el usuario suele olvidar o en las que más se generan errores.
Pedirá confirmar al usuario el iniciar el proceso de preparación en vaso desechable en caso de no haber ubicado su vaso.
No continuará al siguiente paso en caso de que el usuario no haya regulado su cantidad de azúcar, y se lo informará para que éste recuerde este paso.
2. Topografía de las interfaces
Análisis ducha eléctrica
El objeto y la interfaz elegida es una regadera eléctrica para baño. Su objetivo principal, además de dispensar el agua de manera uniforme sobre la persona al bañarse, es también proveer agua caliente sin necesidad de sistemas de calentamiento de agua a gas en la vivienda o lugar en el que se ubicará. Gracias a su sistema de funcionamiento su proceso de instalación es más sencillo y no implica trabajos extra en el espacio. A diferencia de otras regaderas de este tipo, donde el calentamiento del agua se hace de manera automática, esta regadera cuenta con la posibilidad de regular la temperatura del agua manualmente en tres niveles, para lo cual cuenta con una interfaz con la cual el usuario puede interactuar. Además, esta regadera cuenta con la posibilidad de que el mismo usuario pueda cambiar partes defectuosas del sistema, como la resistencia que calienta el agua, facilitando al usuario una desconexión y reemplazo sencillo de esta pieza.
Principales funcionalidades:
– Regular la temperatura del agua.
– Identificar posibles daños en piezas de la regadera.
– Cambio de resistencia.
Sobre la interfaz
Para el control de la temperatura la ducha cuenta con una interfaz sencilla compuesta por una perilla que se gira para poder apagar y encender el sistema, y para poder regular la temperatura en tres niveles diferentes: bajo, medio y alto.
Para acceder a la parte interna del sistema, en el que se reemplaza partes con fallas, éste puede desarmarse retirando la parte superior de la ducha (parte con agujeros por donde sale el agua) con tan solo girarlo.
Paso a paso de la interacción
Control de la interfaz
El control de la interfaz consiste en una perilla que al ser girada, enciente y apaga el sistema, y pasa entre las diferentes temperaturas.
Topografía
Visibilidad y affordance de los controles
Es un elemento totalmente reconocible por las personas y que da visibilidad inmediata de las posibles acciones que puede llevar a cabo el usuario: girarla para pasar entre diferentes estados (temperaturas, encendido y apagado).
De esta forma, el usuario no tendrá dudas de cómo accionar el sistema para obtener alguna respuesta de él.
Feedback
El sistema no cuenta con un feedback claro que comunique a los usuarios que ha sido encendido correctamente y que está en funcionamiento calentando el agua. Unicamente provee el sonido de encendido que puede ser fácilmente confundido con el sonido del agua al pasar.
Mapeo natural y modelo conceptual
Modelo conceptual del usuario
Aumento con el sentido de las manecillas del reloj.
Modelo conceptual del sistema
Los controles de temperatura para aumentar y disminuir se encuentran ubicados de manera arbitraria, primero encontramos el estado de temperatura mayor, luego el estado de apagado, luego el de temperatura baja, y finalmente la temperatura media. Como vemos, es un orden que no sigue la lógica y el modelo mental de los usuarios generando posibles confusiones.
Indicadores visuales / Mappings
El sistema cuenta con elementos visuales que le permiten reconocer al usuario los diferentes estados en los que puede accionar el sistema, sin embargo, las analogías o convenciones empleadas pueden no ser tan claras para los usuarios.
Generalmente las temperaturas son asociadas con colores, entre más altas se acercan más al rojo, pero en el caso de la dicha eléctrica este aumento se visualiza a través de círculos, la temperatura más alta son tres círculos, la media son dos, y la menos es uno. Esto puede implicar que el usuario tenga que remitirse a las instrucciones de uso para saber el significado de cada convención.
Apertura del sistema
Visibilidad y affordance
Para abrir el sistema para intercambiar piezas que se desgastan con el tiempo el usuario debe separar las partes del sistema girándolas y retirando la parte superior de sistema. Sin embargo, el sistema y la forma de éste no sugiere de manera clara esta acción, y es imposible saberlo sin recurrir a las instrucciones de uso.
Finalmente, para la segunda tarea debíamos crear un prototipo de baja fidelidad para la reserva de espacios en las oficinas de Spotify para los empleados.
Historia de usuario:
El usuario debe ingresar a la aplicación destinada a los empleados de Spotify para agendar una reunión presencial y reservar un espacio físico en las sedes de Spotify para llevarla a cabo. En el proceso debe seleccionar el tipo de espacio que requiere, seleccionar el número de personas que harán parte del encuentro, seleccionar la fecha y la hora (en un futuro cercano), y seleccionar las herramientas y facilidades que debe tener la sala para llevar a cabo la reunión, entre las que podrá encontrar: pizarra, proyector, luz natural, micrófono, parlantes, karaoke, entre otros.
El trabajo que se presentará a continuación parte del reto número 1 de la asignatura de Prototipado.
El reto uno de la asignatura de Prototipado consistió en realizar un prototipo de alta fidelidad en el que se replicaran dos de las pantallas de Spotify: reproducción de canción y pantalla overflow, y las interacciones que se dan entre éstas dos pantallas al ser desplegado el overflow.
Dentro del prototipo podemos encontrar las siguientes interacciones:
Play y pausa de la canción.
Activar modo Aleatorio.
Abrir Overflow.
Activar y desactivar opciones de Aleatorio y Repeat en Overflow.
Visibilidad y affordance de los controles
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.