¡Muy buenas a todos! Os presento mi propuesta para el último reto de la asignatura.
En primer lugar, creé un wireframe y la verdadera magia ocurrió cuando sometí el prototipo de baja fidelidad a la técnica de «pensamiento manifiesto» y tres usuarios aportaron unos insights increíbles que me llevaron a reestructurar dicho wireframe y crear un prototipo de alta fidelidad.
En el archivo de figma encontrarás: el wireframe original, el test con el feedback recibido, UI kit de la sala de reservas, el diseño del prototipo interactivo de alta fidelidad, la reflexión y la autoevaluación.
No se trata solo de diseñar algo bonito, sino de entender realmente lo que necesitan nuestros usuarios. Y en el vídeo te contaré cómo adapté la app para satisfacer esas necesidades específicas.
¡Buenas! Os quiero contar mi experiencia al instalar un calefactor fijo en mi casa. Siempre habíamos tenido esos calefactores pequeños, sencillos de entender con una rueda para la potencia y otra para la temperatura. Pero hace un mes, nuestro antiguo calefactor se estropeó, y decidimos instalar uno fijo en el baño.
La sorpresa llegó cuando intenté encenderlo en un día muy frío. El mando resultó ser más complicado de lo que esperaba, y me encontré evaluando su usabilidad de una manera que nunca había considerado antes. Les cuento, el calefactor tiene una pantalla con todas las funciones, pero la visibilidad del estado del sistema es confusa, no hay una coincidencia clara con el mundo real, y a pesar de tener aparente control durante la instalación, me quedé atascado varias veces.
En mi evaluación, destaco la falta de coherencia en los estándares de diseño, la necesidad de recordar funciones específicas y la poca flexibilidad de uso. Además, el mando no es tan estético como parece y, aunque muestra mensajes de error, no proporciona una guía clara para solucionarlos. El manual de instrucciones ayuda, pero también es complejo.
Creo que el diseño del calefactor debería simplificarse. Propongo incluir una pantalla en el mando para seguir las acciones realizadas y reducir las opciones de programación a lo esencial: encendido/apagado, temporizador, verificación de opciones, control de potencia, menos y más. Esto facilitaría mucho la vida, sobre todo para quienes tenemos problemas de visión.
En resumen, mi experiencia me lleva a pensar que el diseño de estos dispositivos podría ser mucho más amigable y funcional. ¡Gracias por escucharme!
Por otro lado comparto mi análisis del tocadiscos MT-110 B de MUSE. Este dispositivo destaca por sus funciones y conexiones, como sintonizador de FM, puerto USB y lector de vinilos. La disposición de controles es sencilla, pero algunos, como «standby» y «function», pueden causar confusión. La calidad de materiales es aceptable para su gama, aunque algunas teclas podrían ser más resistentes. La facilidad de uso puede mejorar, ya que algunas funciones resultan poco intuitivas sin el manual. En resumen, el tocadiscos ofrece prestaciones atractivas, pero con margen para mejorar la experiencia del usuario.
En el siguiente enlace tenéis acceso a mi archivo de figma.
¡Buenas a todos! en este post comparto los enlaces al trabajo desarrollado para el reto 2 de la asignatura de prototipado.
En la primera parte tenéis acceso al Design System de Spotify para el cual se ha desarrollado UI Kit siguiendo el modelo de Atomic Design.
En la segunda parte del trabajo tenéis acceso al prototipo de baja fidelidad interactivodel diseño de una app de reserva de sala de reuniones para la sede de Spotify y un video explicativo de su uso:
Para esta parte de la actividad hemos escogido unas lentillas como objeto cotidiano que hemos descontextualizado y para ello las hemos integrado con las nuevas tecnologías.
¿Alguna vez has fantaseado con poder capturar las imágenes, los colores y aquello que estás viviendo tal y como lo captan tus ojos? esa es la esencia de memory lens. No solo permite grabar y fotografiar en 4K, graba sonido en HiFi y además todo se guarda automáticamente en la nube, a la cual tenemos acceso desde cualquier dispositivo en el que tengamos una cuenta registrada en la web de «farma lens«, el laboratorio español que ha patentado este nuevo proyecto.
He centrado el mapeo de experiencia en la reserva y resolución de una clase online de pilates.
Para ello tenemos en cuenta las características de los usuarios para consumir contenido online:
Trabajo de camarera y repostera en un restaurante, por lo que nos quita mucho tiempo y en ocasiones el horario de las clases coincide con el horario laboral.
Estudiante de Diseño de experiencia de usuario.
Tenemos la necesidad de mantenernos en forma para poder rendir tanto laboralmente con mentalmente, ya que estar en buena forma física implica que a nivel emocional estemos mejor y nuestra capacidad de concentración aumente. Es por ello que al dedicar tanto tiempo al trabajo y los estudios me queda poco tiempo libre por lo que este tipo de clases que el usuario puede consumir en cualquier momento del día son muy útiles.
Fase 1: Elección del gimnasio y app
En primer lugar, abrimos la aplicación “TIMP” y seleccionamos el centro donde deseamos realizar nuestras actividades deportivas. A continuación, aparecen una serie de actividades que puedes seleccionar según lo que te apetezca practicar.
Permite seleccionar el día y la hora en función de la actividad a desempeñar.
Contexto de uso: Acabamos de terminar la jornada laboral y los estudios, queremos despejarnos un poco. El ambiente resulta tranquilo y sin apenas distracciones por lo que procedemos a preparar los materiales de clase (esterilla, teléfono móvil y televisión). Encendemos los dispositivos y procedemos a la ejecución de la aplicación.
Tipo de interacción: tangible
Fase 2: Empieza la práctica
A la hora escogida se nos abre un apartado con el video que podemos reproducir en nuestros dispositivos móviles o bien en la televisión, ya que las clases se suben a la plataforma Youtube y desde el dispositivo móvil podemos reproducir el video a través de la televisión.
Contexto de uso: Nos encontramos sobre la esterilla y comenzamos la práctica utilizando todos los dispositivos que están a nuestro alcance y nos permiten disfrutar de una experiencia interactiva gratificante. Para ello debemos tener a mano el mando de la televisión para poder ajustar el nivel de audio de forma óptima para que la práctica resulte inmersiva.
Hasta hace un par de años tuve el placer de ser partícipe en programas de radio de la universidad de Extremadura. El papel que normalmente desempeñaba era de «técnico de sonido» y en ocasiones de locutora. Reconozco que, al principio de la formación, lidiar con este tipo de interfaces analógicas resultaba algo complicado de entender y manejar (sobre todo cuando no pertenecemos al mundo audiovisual). Fue todo un reto aprender el uso de este tipo de interfaces y una experiencia muy gratificante.
Por otro lado, una de las interfaces digitales que uso diariamente y que resulta muy intuitiva es Windows 10. Tienes a tu disposición a golpe de click muchísimas aplicaciones, imágenes y lo que necesites. Algo que remarcar con respecto a sistemas anteriores es el panel de búsqueda (un gran acierto).
Esta práctica me ha resultado de lo más entretenida ya que permite dar rienda suelta a mi creatividad y fijarme detenidamente en los pequeños detalles que componen las aplicaciones que uso diariamente como spotify y de la relevancia que tienen. Es la primera vez que utilizo figma y me ha parecido una herramienta de trabajo intuitiva que concede a los diseñadores llevar a cabo cualquier idea que tengan.
Para el desarrollo de la actividad me he centrado en la canción de Madonna «Jump» del disco «confessions on a dance floor» y las capturas de pantalla se han tomado desde un iphone 13 pro. A continuación podéis ver mi prototipo interactivo.
Podéis comprobar que algunos elementos son diferentes a los de la captura de pantalla, ya que me ha resultado complicado encontrar algunos iconos y aquellos que no venían, los he creado desde cero.
Para el desarrollo del siguiente trabajo procederemos al análisis de la aplicación para dispositivos móviles y tablets «Down dog yoga«, la cual permite a las personas usuarias realizar prácticas deportivas desde cualquier parte del mundo, en el momento que ellos necesiten con o sin conexión a internet.
La aplicación se presenta en su web como un artículo de “A diferencia de seguir videos pregrabados, Down Dog no te obligará a hacer el mismo entrenamiento una y otra vez. ¡Con más de 60,000 configuraciones diferentes, Down Dog te da el poder de construir la práctica de yoga que amas! Apto para principiantes, incluye múltiples estilos de prácticas, alivia los dolores de espalda, configura los profesores, la música y el idioma (hasta 9 diferentes) y permite sincronizar automáticamente todos tus dispositivos.»
He decidido analizar esta aplicación que llevo varios años usando y que me parece un 10 a nivel de requisitos de usuario, ya que reúne de forma positiva, todos los puntos heurísticos de una de una interfaz.
Evaluación heurística interfaz
Visibilidad del estado del sistema.
El sistema siempre debe mantener a los usuarios informados sobre lo que está sucediendo.
Un ejemplo de buena práctica, es que cuenta con un apartado de estadísticas que permite llevar el control de los ejercicios realizados, tanto de la duración como el porcentaje del progreso.
Coincidencia entre el sistema y el mundo real.
Los mensajes del sistema deben ser comprensibles para el usuario y seguir las convenciones del mundo real, con un orden natural y lógico.
Otro ejemplo de buena práctica es la página de inicio en la cual se muestra en primer lugar el tiempo que vas a emplear en realizar el deporte, así como el estilo que el usuario desee escoger y como quiera enfocarlo. De un solo vistazo permite personalizar el ejercicio.
Control del usuario y libertad.
El sistema debe incluir una «salida de emergencia» claramente indicada para salir rápidamente del estado en caso de error (por ejemplo, volver atrás o deshacer).
Como hemos visto en el apartado anterior, la app permite al usuario tener el control de la práctica deportiva y en caso de querer pausarla o volver para atrás porque se ha decidido escoger otra opción, el sistema nos permite volver para atrás.
Consistencia y estándares.
No usar términos diferentes para referirse a las mismas acciones.
Como podemos observar en cualquiera de las pantallas de la aplicación, sigue la misma línea de diseño, lo que permite a los usuarios sentir que hay cierta coherencia y cohesión entre los elementos.
Prevención de errores.
Evitar condiciones que puedan llevar a errores (por ejemplo, presentar a los usuarios una opción de confirmación antes de comprometerse con la acción).
La aplicación en caso de querer eliminar el historial de las prácticas, se asegura de que realmente el usuario quiera hacerlo, ya que en caso de aceptar, es una acción que no puede deshacerse.
Reconocimiento en lugar de recordar.
Minimizar la carga de memoria del usuario haciendo visibles y reconocibles los objetos, las acciones y las opciones. Facilitar el acceso a las instrucciones de uso del sistema.
Una vez que hemos finalizado un ejercicio permite que el usuario lo guarde en “favoritos” por si en un futuro quiere volver a realizarla, además, si el usuario tiene cierto nivel en yoga, no es necesario ver el vídeo completo ya que cuenta con un apartado donde indica el listado de posturas.
Flexibilidad y eficiencia de uso.
Introducir métodos aceleradores o de acceso rápido para usuarios expertos. Permitir a los usuarios personalizar las acciones frecuentes.
Si hay algo que caracteriza a Down Dog, es la flexibilidad, ya que su objetivo es que tengas un centro deportivo a tu alcance en el momento que más lo necesites y que además se adecue a las necesidades de los usuarios. Permite cambiar la voz a los instructores, tener mayor número de indicaciones de un ejercicio por si están en los niveles de principiantes, aumentar o disminuir el ritmo y la dificultad, incluso cambiar los estilos de música de los ejercicios.
Diseño estético y minimalista.
Evitar la información irrelevante o raramente necesaria. Cada unidad adicional de información disminuye la visibilidad de la información ya presente.
A parte de la flexibilidad, también hacen especial hincapié en la estética de sus aplicaciones, menos es más y toda la información que necesitan los usuarios, la tienen a dos clicks, ya que todo es muy visual y no da lugar a confusión.
Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores.
Los mensajes de error deben ser fáciles de entender, indicar con precisión el problema y sugerir una solución.
Los creadores de esta aplicación saben que muchas personas que estén iniciándose en el deporte, posiblemente no sepan por dónde empezar, por lo que está todo muy bien explicado y detallado (cada práctica deportiva tiene su descripción).
Ayuda y documentación.
El soporte al uso debe ser breve, fácil de buscar y estar centrado en la tarea del usuario.
En caso de que los usuarios necesiten aún más ayuda, la aplicación cuesta con un apartado de preguntas frecuentes, un servicio de “soporte técnico” y redes sociales donde estarán encantados de resolver todas las cuestiones que se les planteen.
Lo cierto es que la interfaz reúne todas y cada una de de las 10 reglas básicas de Jakob Nielsen y R. Molich. Lo cual nos indica que nivel de operabilidad es un producto de una calidad superior y que no cuenta prácticamente con ningún tipo de falla, ya que está pensada para que todo el mundo pueda hacer uso de ella de una forma sencilla.
Por indicar algunos «pero» en el primer apartado “Visibilidad del estado del sistema” tras hacer uso de la app durante varios años de la aplicación, en alguna ocasión han realizado actividades de mantenimiento o el servicio «ha caído» y no lo han indicado como deberían, por lo que nos deriva al siguiente problema, el cual va de la mano con el anterior «ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores» ya que en lo anteriormente explicado, en caso de error, no indica con precisión cuál es el problema y por consiguiente, no sugiere una solución ya que en la gran mayoría de las ocasiones el programa no responde y se cierra de forma automática.
Consideraciones de la interfaz desde una perspectiva de género e inclusión
Es muy importante tener en cuenta a día de hoy la perspectiva de género y la inclusión social, pero el objetivo principal de esta empresa es enseñar un deporte, deporte que en sus inicios solo lo practicaban hombres pero con el paso de los años son más las mujeres que hombres que practican yoga. Sin embargo, este no es el objetivo de Down Dog, ya que quieren llegar a todo el mundo y que cualquier persona sea del género que sea, pueda disfrutar de aquello que más le guste hacer cuando y donde quiera, sin que eso sea lo realmente importante.
Con respecto a la inclusión, podemos comprobar que también tratan de facilitarle las cosas al usuario. Se trata de una aplicación a nivel global con muchísimos idiomas por lo que según la región que se haya seleccionado, permitirá escoger entre diferentes idiomas y dialectos. Además como hemos explicado anteriormente, cuenta con un apartado que permite a las personas que tengan visión reducida, puedan hacer uso y disfrute de su app ya que puede ajustar el nivel de explicaciones de una práctica deportiva, tanto de forma oral como visual.
En resumen, vemos que se trata de una aplicación muy completa que tiene en cuenta todos los aspectos que puedan ser de interés para los usuarios y un muy buen ejemplo de que hay un gran equipo de UX detrás que logra que todo lo anterior mencionado, sea posible.
Para el desarrollo de esta actividad he centrado el estudio en el desarrollo de una aplicación que permita realizar videconferencias y trabajar en línea al mismo tiempo. Los usuarios primarios de nuestra aplicación son aquellas personas que por diferentes motivos de su vida deben teletrabajar o estudiar a distancia.
Storyboard de las secuencias de interacción de la app
Bocetado o sketching básico de la app de videocomunicación
Lo que presentaré a continuación se trata de un prototipado de baja fidelidad (wireframe), para su realización en primer lugar, se ha desarrollado un diagrama de flujo de interacción teniendo en cuenta el storyboard anterior y se ha dibujado a mano las pantallas y pasos a seguir para la elaboración del wireframe. En el siguiente enlace pueden tener acceso al prototipo interactivo de la app.
A continuación presento mi propuesta de valor, sketch y prototipo de interacción obtenidos del resultado de trabajos anteriores y del análisis de briefing, escenarios y users journeys.
Desarrollo escenario:
Sara es una chica introvertida que trabaja en una escuela de danza contemporánea en las afueras de Madrid y que vive en el centro con su mejor amiga que es sordo-muda. Son amantes de la música, el cine y las nuevas tecnologías. Este mes se celebra uno de los festivales favoritos de las dos pero no saben si asistir al festival de forma presencial o virtual.
Al llegar del trabajo Sara se descarga la app en el smartphone y descubre el apartado “agenda” donde comprueba que puede asistir a la charla de uno de sus directores de cine favoritos, Javier Sánchez, por lo que reserva la entrada a un evento virtual. Para sorpresa de las dos en el apartado de “venta de entradas” descubren que todos los eventos virtuales están adaptados para personas que tienen algún tipo de discapacidad tanto visual como auditiva. En el caso de personas con problemas de visibilidad se ha adaptado el espacio presencial con carriles específicos para ellos, así como espacios más amplios para poder ir acompañados de sus amigos caninos o de su bastón de guía y para las personas que tengan problemas auditivos cuentan con subtítulos en todos los eventos, así como carteles y personas especializadas que irán guiándolos en todo momento.
¡Es justo lo que necesitaban! Sara debido a su introversión no tiene que desplazarse y lo mejor de todo es que puede disfrutar de la compañía de su mejor amiga y que ésta lo disfrute al 100% debido a su condición, por ello reservan 2 entradas para el evento de Javier Sánchez. Para finalizar el pago puede ser a través de tarjeta bancaria o bizum, escogen bizum que es el método de pago más rápido que hay hasta el momento, solo tiene que añadir su número de teléfono y ¡listo!
Flujo de interacción:
Sketch del flujo de interacción:
El prototipo de baja fidelidad (wireframe) puede ser testeado en el siguiente enlace.
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.