Antonio Silva Melon

Espacio Personal

Presentación Prototipo Alta Fidelidad (Spotify Rooms)

Breve descripción del trabajo realizado

Este trabajo se centra en el desarrollo y perfeccionamiento de un prototipo de alta fidelidad mediante un proceso de testing de usabilidad con usuarios. La implementación de este proceso ha sido crucial para evaluar la eficiencia y la usabilidad del prototipo inicial, identificando áreas de mejora y deficiencias fundamentales.

La inclusión de un número significativo de participantes, con especial atención a usuarios con menor pericia digital, ha permitido resaltar desafíos potenciales y proporcionar valiosas perspectivas. A lo largo de las pruebas, se ha mantenido un enfoque constante en la observación de las interacciones y en la obtención de comentarios detallados para informar de manera integral las propuestas de mejoras.

Este proceso de testing no solo ha contribuido a una evaluación crítica del diseño existente, sino que también ha catalizado una fase de redefinición del prototipo para optimizar la experiencia del usuario. Las conclusiones y sugerencias derivadas de este análisis en profundidad han guiado la implementación de cambios cualitativos, resultando en flujos más intuitivos que facilitan la realización de las tareas centrales del proyecto.

En resumen, el presente trabajo refleja un compromiso continuo con la excelencia en diseño centrado en el usuario, utilizando metodologías rigurosas para alcanzar un prototipo de alta fidelidad que responde de manera efectiva a las necesidades y expectativas del usuario.

 

Link al prototipo final de alta fidelidad

 

 

Vídeo del prototipo

Cargando...

Brechas de ejecución y evaluación y Affordances

Brechas de ejecución y evaluación

Sobre el producto

El Siri Remote de Apple constituye un dispositivo de control remoto diseñado para simplificar la navegación y el manejo de la interfaz del Apple TV. En un formato fino y minimalista, el Siri Remote fusiona diversas funcionalidades, tales como un panel táctil, botones de volumen, un botón de menú, un botón de inicio y un botón específico para activar Siri, el asistente de voz de Apple.

Análisis

Tras llevar a cabo un análisis heurístico del Siri Remote de Apple, se observaron una serie de deficiencias críticas:

El análisis de la visibilidad y affordances del Siri Remote revela varias facetas significativas de su diseño. En cuanto a la visibilidad, se destaca la carencia de indicadores visuales que confirmen la ejecución exitosa de acciones, generando incertidumbre y disminuyendo la confianza del usuario. Aunque incorpora iconos estándar, la interpretación universal de estos símbolos plantea interrogantes, especialmente para usuarios menos familiarizados con la simbología común. La interfaz táctil, a pesar de su avanzada tecnología, carece de retroalimentación visual directa, dificultando la percepción inmediata de las interacciones táctiles y contribuyendo a una brecha en la visibilidad de las operaciones realizadas.

En cuanto a las affordances, se observa una limitada cantidad de acciones directas accesibles desde el Siri Remote, muchas de las cuales parecen ocultas detrás del menú de la interfaz visual de Apple TV. Esta diferencia con los controles remotos tradicionales podría dificultar la intuitividad del usuario al descubrir las funcionalidades disponibles. No obstante, destaca la innovación de la interfaz de voz activable mediante un botón dedicado, que amplía las affordances al permitir al usuario interactuar verbalmente con el sistema de manera predecible. Esta adición representa una intención de diversificar las capacidades del Siri Remote de manera consciente.

La propuesta

Tras la evaluación de los heurísticos de Nielsen, se han llegado a las siguientes mejoras:

El Siri Remote de Apple ha experimentado una evolución sustancial, destacando mejoras significativas que optimizan la usabilidad y la experiencia del usuario. Estas mejoras no solo abordan deficiencias de versiones anteriores, sino que también anticipan las expectativas cambiantes y se alinean con las convenciones del mercado. A continuación, se detallan las transformaciones clave:

  1. Mayor cantidad de atajos: Se ha incorporado una variedad de atajos con botones dedicados para acciones comunes, simplificando la interacción y mejorando la eficiencia del usuario.
  2. Reemplazo del touch pad por joystick: El touch pad ha sido sustituido por un joystick de flechas, priorizando un diseño táctil convencional para mejorar la precisión y la respuesta táctil.
  3. Luz feedback para indicar acciones: La innovación de la luz feedback proporciona indicaciones visuales claras al usuario, reforzando la retroalimentación y mejorando la visibilidad de las operaciones realizadas.
  4. Pantalla LED para mensajes contextuales: La inclusión de una pantalla LED ofrece mensajes contextuales y detalles sobre el contenido en reproducción, enriqueciendo la comunicación de información relevante al usuario.
  5. Botón Menú más grande: El rediseño del botón Menú con un tamaño más grande mejora la accesibilidad y facilita el acceso directo a la función principal, optimizando la experiencia de navegación.
  6. Asimetría vertical del diseño: La introducción de asimetría vertical aborda problemas de reconocimiento y uso, facilitando la identificación intuitiva de funcionalidades y mejorando la ergonomía del control remoto.
  7. Concentración de grupos de funcionalidades: La reorganización estratégica de elementos agrupa funcionalidades similares y separa las distintas, contribuyendo a una interfaz más coherente y lógica para reducir la carga cognitiva del usuario.
  8. Diseño más ergonómico y ajustado a convenciones del mercado: El nuevo diseño prioriza la comodidad durante el uso prolongado, reflejando una atención consciente a la ergonomía y cumpliendo con las convenciones del mercado en el diseño de interfaces físicas. Estas mejoras colectivas buscan elevar la experiencia del usuario a través de una interfaz más intuitiva y funcional.

 

Ejemplos de Affordance

Buen Affordance

La eficiencia y facilidad de uso de un ascensor son factores fundamentales para asegurar que los usuarios puedan desplazarse con facilidad. En este sentido, la disposición y diseño distintivo de los botones del ascensor juegan un papel esencial en la interacción con dicho objeto. Abordaremos la relevancia de la topografía de los botones del ascensor, utilizando los principios de diseño propuestos por Don Norman, para destacar por qué este caso representa un ejemplo excepcional de affordance bien implementado.

El affordance, en el contexto de los botones de ascensor, se refiere a la capacidad de proporcionar indicaciones claras sobre su uso. La simplicidad en la interacción es esencial para evitar confusiones y garantizar una experiencia del usuario fluida. Desde esta perspectiva, los botones de ascensor cumplen con la premisa de affordance al ser inmediatamente obvios en su función. La intuición de los usuarios al presionar un botón para activar una acción, como solicitar el ascensor o elegir un piso específico, es fundamental para prevenir fricciones.

En términos de visibilidad y clasificación de funciones, el diseño seleccionado destaca por su claridad. Los botones son visibles y están etiquetados de manera comprensible, utilizando iconografía para diferenciar funciones, como la selección de pisos y otras acciones específicas. La retroalimentación visual, con la iluminación de los botones al interactuar, contribuye a un mapeo claro entre las expectativas del usuario y las acciones realizadas.

La accesibilidad es una consideración crucial en este ejemplo, ya que la disposición de los botones es apta para usuarios en sillas de ruedas, evitando alturas inalcanzables. Esto demuestra una atención consciente a la diversidad de usuarios.

En cuanto a la simplicidad y la eliminación de distracciones, el diseño sigue el principio de affordance al adoptar un enfoque minimalista y fácil de reconocer. La disposición clara y sin elementos distractores garantiza que la interacción sea directa y comprensible. La asociación inequívoca de cada botón con un piso específico elimina ambigüedades, y la ausencia de elementos redundantes, como números de piso adicionales, simplifica aún más la interfaz.

Mal affordance

Los ascensores son un objeto cotidiano que presentan diferentes retos de diseño y uso. En algunos casos, la falta de affordance adecuado puede generar confusiones y frustraciones en la experiencia del usuario, como ocurre habitulamente en ascensores que tienen doble puerta.

En un ascensor con doble puerta, la falta de una indicación clara sobre cuál se abrirá genera un problema significativo de mal affordance. Esta carencia provoca confusión y desconcierto entre los usuarios, contraviniendo los principios de diseño centrado en el usuario de Don Norman, que destacan la importancia de proporcionar indicaciones claras sobre cómo utilizar un objeto.

Los problemas de visibilidad y clasificación de funciones contribuyen a esta situación. La ausencia de señales visuales distintivas o indicadores claros sobre la puerta que se abrirá genera confusión, ya que los usuarios deben recordar la dirección correcta. Para mejorar la visibilidad, se sugiere la incorporación de señales visuales, como luces indicadoras o señales luminosas, que informen sobre la puerta a abrir. La clasificación de funciones también debe mejorarse para que los usuarios comprendan instantáneamente cómo interactuar con las puertas del ascensor.

La introducción de elementos para mejorar la claridad en el uso del objeto es esencial. La simplificación del diseño, un principio fundamental, podría lograrse mediante la incorporación de pantallas sobre cada puerta, mostrando iconos de «OK» y «prohibido el paso» para indicar cuál se abrirá. Además, un indicador de flechas en el panel de botones podría orientar a los usuarios sobre la dirección correcta al detenerse en cada planta, mejorando significativamente el affordance del ascensor.

Prototipo Spotify / App Reserva

En primer lugar, se llevó a cabo la creación de un UI kit específico para Spotify, abordando la necesidad de contar con un sistema de diseño coherente y versátil. Este kit proporciona una guía detallada sobre los elementos de la interfaz de usuario, incluyendo botones, tipografías y microinteracciones, asegurando consistencia visual y funcional en todas las interacciones del usuario con la plataforma.

 

Link al prototipo interactivo

 

Además, se desarrolló un prototipo de baja fidelidad para una aplicación de reserva de salas, destinada a facilitar la planificación y utilización de espacios para eventos en el contexto de Spotify. Este prototipo permitió validar rápidamente la viabilidad de la idea, centrándose en la funcionalidad antes que en los detalles visuales.

 

Link al prototipo interactivo

Diseño de un prototipo de alta fidelidad

Pública

Para este proyecto se ha desarrollado un prototipo de alta fidelidad específicamente centrado en la pantalla de reproducción de una canción en la plataforma de Spotify. Este proceso de diseño persigue la obtención la autenticidad visual y funcional que sea coherente con la experiencia que ofrece la aplicación en el mundo real.

Una de las principales áreas de enfoque en este proyecto ha sido el diseño de las interacciones. Esto abarca tanto las interacciones que ocurren en la pantalla de reproducción en sí como las que se desencadenan al hacer clic en las acciones relacionadas con la canción. Estas interacciones tienen un papel fundamental en la usabilidad de la aplicación, ya que permite a los usuairos saber cómo pueden interactuar con la música que están escuchando.

Además, este proyecto ha implicado el diseño de los elementos de la interfaz de usuario (UI) que conforman la apariencia de Spotify. Esto no se limita simplemente a recrear los elementos visuales, sino también a comprender y aplicar los principios de diseño que subyacen en la marca. De hecho, los principios de diseño que han guiado este proyecto han sido un pilar fundamental en la creación del prototipo de alta fidelidad de la pantalla de reproducción de Spotify. Estos principios reflejan un compromiso con la calidad y la coherencia en la experiencia del usuario, lo que se traduce en una interfaz de usuario efectiva y atractiva.

La jerarquía visual, que se establece mediante la variación de tamaños de elementos, es esencial para guiar a los usuarios a través de la aplicación de manera intuitiva. Al dar un tamaño mayor a los elementos más importantes, se destaca lo que es más relevante y probable para el usuario, lo que facilita la interacción. La consistencia en el uso de colores, iconografía, efectos y animaciones refuerza la marca y crea una sensación de familiaridad para los usuarios. Esto contribuye a una experiencia de usuario más cómoda y reconocible. El principio de affordance, con iconos activos que tienen una opacidad del 100% y los iconos inactivos al 50%, facilita la comprensión de las acciones disponibles. Esto evita la confusión y ayuda a los usuarios a identificar de manera clara las acciones que pueden llevar a cabo en cada momento.

Gracias a este ejercicio se ha podido analizar los múltiples elementos que conforman la experiencia de usuario en el diseño de una interfaz, tanto desde el punto de vista funcional y humano como desde el punto de vista puramente sensorial.

 

Puedes ver el prototipo aquí

¡Bienvenidos y bienvenidas!

Pública

¡Hola!

Esta publicación se ha generado automáticamente y solo puedes verla tú.

Te presentamos tu Folio, un portafolios donde podrás publicar las PEC y las actividades de tus asignaturas, además de tus proyectos propios. Te invitamos a explorarlo y personalizarlo cambiando el tema, los colores o la imagen de cabecera.

Para personalizar tu Folio y empezar a publicar entradas, navega por la barra superior y haz clic en Añadir / Entrada o accede al Tablero, donde encontrarás el menú lateral de WordPress con todas las opciones de la herramienta.

Las publicaciones que vincules a las actividades de las asignaturas se mostrarán en el Ágora del aula. Desde allí podrás ver las publicaciones de tus compañeros y compañeras y dejar comentarios.

Te recordamos que puedes elegir el nivel de visibilidad de cada publicación: pública, protegida con contraseña, campus, aula, visible solo para el profesorado y privada.

Te dejamos un link al espacio de aprendizaje donde encontrarás todas las indicaciones básicas para actualizar tu Folio, hacer publicaciones, vincularlas a las actividades de las asignaturas y hacer entregas en el REC. ¡Échale un vistazo!

Si tienes cualquier duda, puedes ponerte en contacto con el profesorado de tu asignatura o con el servicio de atención.