PEC2

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura 76.540 - Realidad virtual - Aula 1
Pública

Ejemplo 1(Realidad virtual)

Cabecera

Fuente 1. Imagen extraída de la página CNET (Hollister, 2016).

Tecnología

  1. IMU-inertial
  2. Sensor
  3. Controlador
  4. Estereoscopio
  5. Agencia y correspondencia
  6. HMD (head-mounted display)
  7. Tiempo real
  8. Interfaz física
  9. Interfaz lógica
  10. Entorno virtual

Descripción

YouTube VR es una aplicación de realidad virtual donde los usuarios poder vivir una experiencia inmersiva viendo vídeos de la plataforma en formato 360º. La aplicación se puede usar tanto con gafas de realidad virtual como desde el propio ordenador, disfrutando de experiencias diferentes.

En cuanto a las tecnologías usadas, YouTube VR utiliza un HMD (head-mounted display) como dispositivo principal de visualización. Este dispositivo permite ver los videos directamente frente a los ojos del usuario.

Respecto a la IMU – inertial, esta se encuentra integrada en el visor para que este pueda registrar de manera continua los movimientos y giros de la cabeza del usuario. Gracias a esto, la aplicación puede actualizar el entorno virtual en tiempo real. Por ejemplo, cuando el usuario gira la cabeza hacia un lado, el video se adapta inmediatamente hacia esa orientación.

Relacionado con lo anterior, los sensores incorporados en el dispositivo permiten realizar el seguimiento de la orientación del usuario dentro del entorno virtual. Además, gracias a los controladores, el usuario puede seleccionar videos, desplazarse por los menús, etc.

El estereoscópico es el que permite la percepción de profundidad dentro del visor de realidad virtual.

En cuanto a la agencia y correspondencia, estas también se ven reflejadas en YouTube VR ya que el usuario puede elegir qué vídeo reproducir, avanzarlo o retrocederlo, pausarlo, etc. Esta interacción directa genera una sensación de control y personalización dentro de la aplicación.

El entorno virtual de YouTube VR se compone tanto de vídeos en formato 360° como de espacios simulados por la propia aplicación. En este entorno, los videos se proyectan alrededor del usuario, recreando la interfaz habitual de YouTube, pero dentro de una experiencia inmersiva de realidad virtual.

Finalmente, la interfaz física está compuesta por el visor (HMD) y los controladores, es decir, los dispositivos que el usuario manipula directamente. Por otro lado, la interfaz lógica procesa las acciones y movimientos captados por estos dispositivos, interpretándolos para ejecutar funciones dentro del entorno virtual, como reproducir, pausar o cambiar de video.

Bibliografía y enlaces

Introducción a YouTube VR – Ayuda de YouTube. (s. f.). https://support.google.com/youtube/answer/7205134?hl=es

Realidad Virtual. (2015, 27 enero). YouTube. https://www.youtube.com/@360

Wikipedia contributors. (2025, 14 marzo). YouTube VR. Wikipedia. https://en.wikipedia.org/wiki/YouTube_VR

Chris Finck. (2023, 28 marzo). Hot air balloon skydives and wingsuit gainer!! GoPro 360 VR [Vídeo]. YouTube. https://www.youtube.com/watch?v=H9r8CTsSf4U

Hollister, S. (2016, 19 mayo). Want to watch YouTube with a VR headset? There’s an app for that. Cnet. https://www.cnet.com/tech/services-and-software/youtube-vr-this-fall/

 

Ejemplo 2 (Realidad virtual)

Cabecera

Fuente 2. Imágenes extraídas de Meta (Google Earth VR, s. f.)

Tecnología

  1. SLAM
  2. IMU – inertial
  3. HMD (head-mounted display)
  4. Sensor
  5. Controlador
  6. Estereoscópico
  7. Agencia y correspondencia
  8. Tiempo real
  9. Mapeo
  10. Interfaz física
  11. Interfaz lógica
  12. Entorno virtual

Descripción

Google Earth VR es una aplicación de realidad virtual, ya que su objetivo es que el usuario se sienta sumergido en una simulación 3D del planeta Tierra.

En cuanto a las tecnologías utilizadas, se puede detectar el uso de SLAM ya que permite la localización y el mapeo del entorno del usuario. Respecto al mapeo, Google Earth VR utiliza datos reales para representar el planeta de forma topográfica. A través de modelos 3D de ciudades, montañas, etc., el sistema recrea el mundo físico en un entorno virtual.

El entorno virtual de Google Earth VR es una representación en 3D del planeta Tierra, en la que el usuario puede desplazarse libremente, cambiar la escala de visión o visitar lugares icónicos.

Otra tecnología fundamental es la IMU – inertial ya que esta registra los movimientos y giros del casco/gafas de realidad virtual y de los controladores que usa el usuario. Esto permite que Google Earth VR detecte la orientación del usuario, ajustando como se visualiza el entorno virtual en base a los movimientos y giros reales del usuario en el mundo físico.

El HMD (head-mounted display) es el dispositivo principal mediante el cual el usuario visualiza y experimenta el entorno virtual (son los casos o gafas de realidad virtual). En este caso, el casco o las gafas muestran un modelo 3D del planeta, permitiendo que el usuario se integre en el mundo con una vista inmersiva en 360º.

Los sensores y los controladores también son elementos esenciales para Google Earth VR. Por un lado, los sensores permiten el seguimiento de la posición y los movimientos del usuario. Por otro lado, los controladores funcionan como si fuesen las manos del usuario, facilitando la interacción con el entorno virtual. A través de ellos se pueden seleccionar ubicaciones, acercar o alejar la vista, y desplazarse por diferentes zonas del planeta.

El estereoscópico es el que permite la percepción de profundidad en el HMD de realidad virtual.

En cuanto a la agencia y correspondencia, estas también se ven reflejas en Google Earth VR, ya que el usuario puede decidir qué lugares visitar, qué ver y a qué distancia explorar. Esta interacción directa genera una sensación de control y personalización dentro de la aplicación.

El tiempo real también se encuentra presente, ya que Google Earth VR procesa los movimientos del usuario, las interacciones y los cambios de perspectiva de manera inmediata.

Finalmente, en cuanto a la interfaz física, esta es la que está compuesta por los dispositivos que el usuario manipula directamente, como las gafas, los controladores… En cambio, la interfaz lógica es la que se encarga de procesar los datos que provienen de la interacción física, interpretando las órdenes del usuario y generando las respuestas visuales y de movimiento dentro de la simulación.

Bibliografía y enlaces

Google Earth VR en Steam. (s. f.). https://store.steampowered.com/app/348250/Google_Earth_VR/?l=latam

Google Earth VR. (s. f.). Meta. https://www.meta.com/es-es/experiences/pcvr/google-earth-vr/1513995308673845/?srsltid=AfmBOor6FNcsKyaZkHTUCxZpxa3X1Td12bTWsZi8nETj6zmjc4qoX7MW

Google. (2016, 16 noviembre). Google Earth VR — Bringing the whole wide world to virtual reality [Vídeo]. YouTube. https://www.youtube.com/watch?v=SCrkZOx5Q1M

Realidad virtual y geografía. (s. f.). https://www.google.com/intl/es_ALL/earth/education/tools/geo-vr/

Rodriguez, O. (2025, 25 marzo). Google Earth VR: Explora el Mundo en Realidad Virtual con Virtua Barcelona. Virtuabarcelona. https://virtuabarcelona.com/2025/03/25/google-earth-vr-explora-el-mundo-en-realidad-virtual-con-virtua-barcelona/

 

Ejemplo 3 (Realidad aumentada)

Cabecera

 

Fuente 3. Imagen superior extraída de la página web de Ikea (Launch Of New IKEA Place App – IKEA Global, s. f.) e imagen inferior elaboración propia a través de la app de Ikea.

Tecnología

  1. SLAM
  2. IMU – inertial
  3. HUD (head-up display)
  4. Sensor
  5. Interfaz física
  6. Interfaz lógica
  7. Mapeo
  8. Agencia y correspondencia
  9. Tiempo real
  10. Entorno virtual

Descripción

Ikea Place es una aplicación de realidad aumentada ya que esta permite superponer muebles virtuales sobre el entorno físico del usuario. Esto se realiza a través de la cámara del dispositivo móvil (generalmente smartphones). Actualmente, la aplicación Ikea Place se encuentra integrada dentro de la propia aplicación de Ikea.

En cuanto a las tecnologías utilizadas, se puede detectar el uso SLAM, que permite que la aplicación identifique y mapee el entorno del usuario en tiempo real. En cuanto al mapeo, este permite detectar la superficie del suelo, las paredes y otros elementos del entorno físico, permitiendo que los elementos virtuales se ajusten a la disposición y forma de la habitación.

La IMU – inertial también se encuentra presente, ya que detecta los movimientos del dispositivo mediante acelerómetros y giroscopios. Esto permite que, cuando la cámara se mueve, los elementos virtuales se posicionen correctamente según la dirección a la que apunta la cámara.

El HUD (head-up display) se ve reflejado en la interfaz gráfica que muestra información adicional mientras se visualizan los muebles como, por ejemplo, las opciones de color de los muebles.

Los sensores del dispositivo, como la cámara y los giroscopios, recopilan datos del espacio físico y permiten que la aplicación determine la distancia, la escala y la orientación de los objetos.

La interfaz física son los elementos físicos del dispositivo, como la pantalla táctil y la cámara, que permiten al usuario manipular los objetos virtuales mediante gestos, toques, etc. La interfaz lógica, por otro lado, es la que se encarga de gestionar el procesamiento de datos.

En cuanto a la agencia y correspondencia, estas también se ven reflejadas en IKEA Place ya que el usuario tiene la capacidad de decidir dónde colocar, rotar o cambiar los muebles virtuales. Esta interacción directa genera una sensación de control y personalización dentro de la aplicación.

El funcionamiento en tiempo real también es importante, ya que la aplicación actualiza constantemente la posición de los muebles virtuales mientras el usuario mueve el dispositivo, ajustando la perspectiva y la escala para mantener la coherencia con el entorno físico.

Finalmente, el entorno virtual está compuesto por los elementos virtuales (muebles) que se proyectan sobre el entorno físico. Estos objetos virtuales se integran en la habitación del usuario permitiendo visualizar cómo quedarían los productos de IKEA antes de realizar una compra.

 

Bibliografía y enlaces

App Store. (2019, 11 noviembre). IKEA. App Store. https://apps.apple.com/es/app/ikea/id1452164827

IKEA App por un mejor día a día. (s. f.). [Vídeo]. IKEA. https://www.ikea.com/es/es/customer-service/mobile-apps/

Launch of new IKEA Place app – IKEA Global. (s. f.). IKEA. https://www.ikea.com/global/en/newsroom/innovation/ikea-launches-ikea-place-a-new-app-that-allows-people-to-virtually-place-furniture-in-their-home-170912/

 

Bibliografía

App Store. (2019, 11 noviembre). IKEA. App Store. https://apps.apple.com/es/app/ikea/id1452164827

Chris Finck. (2023, 28 marzo). Hot air balloon skydives and wingsuit gainer!! GoPro 360 VR [Vídeo]. YouTube. https://www.youtube.com/watch?v=H9r8CTsSf4U

Ferrer, J. (2018, 9 marzo). El continuo de la realidad mixta – Realidad mixta. https://multimedia.uoc.edu/blogs/rx/es/2018/03/09/catala-el-continu-de-la-realitat-mixta/

Ferrer, J. (s. f.-a). Glosario – Realidad mixta. https://multimedia.uoc.edu/blogs/rx/es/category/glossari/

Ferrer, J. (s. f.-b). Tecnología – Realidad mixta. https://multimedia.uoc.edu/blogs/rx/es/category/tecnologia/

Google Earth VR en Steam. (s. f.). https://store.steampowered.com/app/348250/Google_Earth_VR/?l=latam

Google Earth VR. (s. f.). Meta. https://www.meta.com/es-es/experiences/pcvr/google-earth-vr/1513995308673845/?srsltid=AfmBOor6FNcsKyaZkHTUCxZpxa3X1Td12bTWsZi8nETj6zmjc4qoX7MW

Google. (2016, 16 noviembre). Google Earth VR — Bringing the whole wide world to virtual reality [Vídeo]. YouTube. https://www.youtube.com/watch?v=SCrkZOx5Q1M

Hollister, S. (2016, 19 mayo). Want to watch YouTube with a VR headset? There’s an app for that. Cnet. https://www.cnet.com/tech/services-and-software/youtube-vr-this-fall/

IKEA App por un mejor día a día. (s. f.). [Vídeo]. IKEA. https://www.ikea.com/es/es/customer-service/mobile-apps/

Introducción a YouTube VR – Ayuda de YouTube. (s. f.). https://support.google.com/youtube/answer/7205134?hl=es

Launch of new IKEA Place app – IKEA Global. (s. f.). IKEA. https://www.ikea.com/global/en/newsroom/innovation/ikea-launches-ikea-place-a-new-app-that-allows-people-to-virtually-place-furniture-in-their-home-170912/

Realidad mixta – Otro sitio más de Blogs asignaturas GMMD. (s. f.). https://multimedia.uoc.edu/blogs/rx/es/

Realidad virtual y geografía. (s. f.). https://www.google.com/intl/es_ALL/earth/education/tools/geo-vr/

Realidad Virtual. (2015, 27 enero). YouTube. https://www.youtube.com/@360

Rodriguez, O. (2025, 25 marzo). Google Earth VR: Explora el Mundo en Realidad Virtual con Virtua Barcelona. Virtuabarcelona. https://virtuabarcelona.com/2025/03/25/google-earth-vr-explora-el-mundo-en-realidad-virtual-con-virtua-barcelona/

Wikipedia contributors. (2025, 14 marzo). YouTube VR. Wikipedia. https://en.wikipedia.org/wiki/YouTube_VR

3:33 – Una novela gráfica interactiva de Jennifer Molano Navarro

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura TFG-Vídeo, 2D y 3D - Aula 1
Pública

Este Trabajo de Fin de Grado presenta el diseño y desarrollo de 3:33, una novela gráfica interactiva de ciencia ficción y thriller psicológico en la cual el protagonista se encuentra atrapado en un bucle temporal. La historia se construye a través de decisiones del usuario, lo que permite una narrativa ramificada con múltiples desarrollos y finales posibles. El objetivo de este proyecto no es verificar una hipótesis empírica, sino explorar las posibilidades narrativas que la interactividad ofrece dentro del lenguaje audiovisual mediante el desarrollo de un producto funcional.

Uno de los principales retos fue la elaboración de un guion emocionalmente complejo y coherente a lo largo de las distintas rutas. Para su implementación, se utilizó el motor Ren’Py, acompañado de herramientas como Procreate, Photoshop y Adobe Premiere para el desarrollo visual y audiovisual. La narrativa está estructurada en escenas modulares e integra metáforas que simbolizan procesos como el trauma, la culpa y el duelo.

El resultado es una experiencia inmersiva que sitúa al usuario en un rol activo y participativo, favoreciendo la reflexión y la rejugabilidad.

El enlace a la novela gráfica es: https://jmolanna7.itch.io/333

Entrega final del TFG

LA VIDA EN LAS FALDAS DE MONTSERRAT // PEC_03: ¡Luces, Foco, Acción! ¡Inaugura tu Exposición!

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura Creación fotográfica - Aula 1
Pública

Hola a todos,

Os presento La vida en las faldas de Montserrat, una exposición de Jennifer Molano Navarro que busca revelar la armoniosa interacción entre la naturaleza y la vida humana de los paisajes que rodean la majestuosa montaña de Montserrat.

Espero que os guste.

 

232 Creación fotográfica - Aula 1 232_20_153_01. Entrega de la actividad PEC_03

R3. APLICACIÓN PARA UNA TIENDA DE MAQUILLAJE

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura Desarrollo de aplicaciones interactivas - Aula 1
Pública

INTRODUCCIÓN

Para este reto se ha optado por diseñar la aplicación para una tienda online de maquillaje con el objetivo es mejorar la experiencia de usuario al buscar y comprar este tipo de productos. Para ello se han diseñado dos versiones: una más simple y tradicional, y otra que integra Realidad Aumentada (RA).

Adicionalmente, es importante destacar que ambos prototipos son de baja fidelidad, pero permiten distinguir la inclusión de RA y el contenido de la aplicación. En concreto, se han diseñado las páginas principales para entender el funcionamiento de ambas versiones, así como la navegación en ellas. La interacción y páginas de botones secundarios como inicio de sesión, carrito de compra, lista de favoritos, entre otros, no han sido incluidos. Además, la navegación en los prototipos se ha realizado con un único ejemplo de producto: coloretes.

VERSIÓN 1

Para la primera versión de la aplicación se ha diseñado una interfaz sencilla y fácil de usar.

Comienza con una página de carga para destacar la marca, seguida de la página de inicio que muestra los productos destacados y una barra de búsqueda para encontrar productos específicos.

Otra sección es la página de categorías en la cual se presenta una lista con los diferentes tipos de productos que ofrece la tienda. También se ha desarrollado el ejemplo de cómo se visualizaría una categoría en concreto, tomando como ejemplo los coloretes; el diseño es similar a la página de inicio para que este sea coherente e intuitivo.

Finalmente, se ha diseñado la pagina de producto. Esta pagina se abre cuando el usuario selecciona el producto en el que esta interesado, ya sea desde la página inicial o desde una categoría en específico. Esta página ofrece información detallada de cada producto, así como fotos de este.

Prototipo de interacción

ENLACE: https://www.figma.com/proto/55LSZix3Vu9OqNDbFL4x9k/R3.-Desarrollo-de-aplicaciones-interactivas?page-id=2%3A11242&type=design&node-id=5-3958&viewport=1036%2C1278%2C0.6&t=eS64fP5OVoFA9c90-1&scaling=min-zoom&starting-point-node-id=5%3A3952&mode=design

VERSIÓN 2

La segunda versión es un poco más desarrollada ya que incluye funcionalidades de realidad aumentada.

En primer lugar, se ha decidido integrar dos nuevos botones en la barra de búsqueda.


El primer botón permite a los usuarios buscar productos utilizando imágenes. Esto resulta muy útil para cuando los usuarios no conocen el nombre del producto, pero desean encontrar algo similar que ha visto en anuncios, en Internet, de amigos y/o en otros lugares. El segundo botón permite buscar productos escaneando el código de barras del producto, lo que simplifica la búsqueda y facilita la compra de productos específicos.

En segundo lugar, esta versión también cuenta con RA en la página del producto. Esta herramienta permite a los usuarios probar los productos en tiempo real utilizando la cámara de su dispositivo. Esta función les brinda la oportunidad de ver cómo quedaría un producto específico antes de tomar una decisión de compra, lo que mejora la confianza y la satisfacción del cliente.

Prototipo de interacción

ENLACE: https://www.figma.com/proto/55LSZix3Vu9OqNDbFL4x9k/R3.-Desarrollo-de-aplicaciones-interactivas?page-id=0%3A1&type=design&node-id=5-688&viewport=719%2C-482%2C0.33&t=udHU0GgoNu5V4ALc-1&scaling=min-zoom&starting-point-node-id=5%3A682&mode=design

 

CONCLUSIONES

Cuando se habla de realidad aumentada es común que nuestra mente lo asocie a moverse en un espacio virtual que simula un entorno real. No obstante, en este ejemplo, se ha decidido implementar la RA en el sector del comercio dado que las compras en línea son cada vez más habituales. Adicionalmente, en la actualidad, algunas tiendas no cuentan con un establecimiento físico como, por ejemplo, Shein, lo que resulta en una compra “a ciegas”. Además, en este sector en concreto, algunas veces existe la imposibilidad de probar físicamente los productos debido a cuestiones de higiene.
Por ende, esta propuesta permite al usuario explorar los productos usando la cámara de su dispositivo, lo que brinda una experiencia más atractiva y personalizada.

BIBLIOGRAFÍA Y WEBGRAFÍA

  • Fotos de Stock, imágenes libres de derechos de autor, gráficos, vectores y vídeos | Adobe Stock. (s. f.). Adobe Stock. https://stock.adobe.com/es/?gclid=Cj0KCQjw5cOwBhCiARIsAJ5njuZlk5EK-5tlxtjbpD-ijqfPaDC3tHNrsJKesu3ITBDiBG85TysWhlUaApGVEALw_wcB&ef_id=Cj0KCQjw5cOwBhCiARIsAJ5njuZlk5EK-5tlxtjbpD-ijqfPaDC3tHNrsJKesu3ITBDiBG85TysWhlUaApGVEALw_wcB:G:s&s_kwcid=AL!3085!3!646703446546!e!!g!!adobe%20stock!277255086!17698325526&as_channel=sem&as_campclass=brand&as_campaign=ES|CPRO|Stock|PURCH|As_Brand_Exact|GG||&as_source=google&mv=search&mv2=paidsearch&as_camptype=acquisition&sdid=BMVV34ZM&as_audience=core&gad_source=1
  • Realidad virtual. (s. f.). https://campus.uoc.edu/annotation/999369be5e33b1e677640e3191bd1b5f/7676/PID_00277367/PID_00277367.html

 

 

Desarrollo de aplicaciones interactivas - Aula 1 20.671. Entrega de la actividad R3

PEC 1: ¡PRIMER FLASHAZO!

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura Creación fotográfica - Aula 1
Pública

¡Hola a todos!

En esta primera entrega me he decantado por el género «Paisaje». Tras analizar los diferentes fotógrafos propuestos, he optado por analizar con más detalle las fotografías de Per Bak Jensen.

Adicionalmente, para la portada y el cierre, he incorporado dos imágenes que, a priori, se rigen por la ley de los tercios, pero son fotografías tomadas durante uno de mis viajes. ¡Parece ser que mis mejores fotos son cuando viajo!

Sin embargo, espero que os gusten las fotografías que he realizado para esta actividad.

 

232 Creación fotográfica - Aula 1 232_20_153_01. Entrega de la actividad PEC_01

Reto 1. Análisis de una aplicación interactiva

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura Desarrollo de aplicaciones interactivas - Aula 1
Pública

Introducción

En la siguiente entrada se analizará la interacción de dos aplicaciones: una diseñada para dispositivos móviles y otra para ordenadores. Este análisis se centrará en aspectos como la usabilidad, el feedback, la consistencia y otros elementos clave que influyen en la interfaz.

Antes de comenzar con el análisis, es importante entender qué es una interfaz. Según Ballester Rubio (s. f.), una interfaz es el soporte mediante el cual dos sistemas intercambian información. Es relevante destacar que existen las interfaces de usuario, donde al menos uno de los elementos de la interacción es un componente informático de hardware y/o software.

Para este análisis, se tendrán en cuenta tanto los principios establecidos por Don Norman como las diez reglas básicas de Nielsen y Molich, que abarcan aspectos como las affordances, los significantes, el feedback, la visibilidad del estado del sistema, la consistencia, la prevención de errores, entre otros.

Teniendo en cuenta lo mencionado anteriormente, el objetivo es el análisis tanto de aspectos positivos como negativos en cada aplicación.

Aplicación 1. Web.

Para este análisis, se ha seleccionada la conocida web del supermercado LIDL.

Primera interacción

La primera interacción es referente proceso de inicio de sesión. Al dirigir el cursor al icono Identifícate, se despliega un menú con la posibilidad de iniciar sesión, así como enlaces adicionales como recuperar la contraseña, registrarse, mis pedidos, mis datos de acceso, etc. Sin embargo, en este proceso de inicio de sesión surgen dos problemas:

  1. Si el cursor se desplaza accidentalmente fuera de la ventana, el menú desaparece, obligando a repetir el proceso de inicio de sesión. Como sugerencia de mejora, se recomienda eliminar este desplegable, ya que existe una segunda opción de acceso, que consiste en hacer clic directamente en el icono Identifícate, lo que lleva a una página estática de inicio de sesión que corrige el error mencionado anteriormente.

  1. Si el usuario no ha iniciado sesión, algunos enlaces secundarios, como mis pedidos, redirigen a la página estática de inicio de sesión. Por ello, es recomendable que solo aparezcan una vez iniciada la sesión.

En resumen, hay un problema respecto a la usabilidad y consistencia de la interfaz. La falta de persistencia del menú desplegable al mover accidentalmente el cursor fuera de la ventana junto a la duplicación de opciones de inicio de sesión pueden dificultar la interacción con la aplicación. Esto también puede interpretarse como una falta de visibilidad del sistema, ya que el menú desaparece sin informar sobre lo que está sucediendo.

Segunda interacción

En segundo lugar, se ha detectado una duplicidad en los menús de navegación: uno en formato hamburguesa y otro en formato horizontal. Si se abre el menú hamburguesa, se puede observar, por un lado, que contiene la misma información que el menú tradicional y, por otro lado, que además contiene subpáginas de gran interés, contenido que falta en el menú horizontal. En consecuencia, hay una duplicidad en los accesos principales en ambos menús: Compra online, En tu tienda, Lidl Plus, Recetas. Para solucionar esto, es recomendable mantener un solo menú que incluya los desplegables hacia otras páginas de manera organizada.

En resumen, al igual que en el caso anterior, se detecta una duplicidad de elementos. La duplicidad en los menús de navegación indica una falta de consistencia en el diseño de la aplicación, ya que el mismo contenido se presenta de diferentes maneras.

Tercera interacción

En este caso, se han detectado espacios en blanco en el menú. En el menú hamburguesa hay secciones en las que hay un espacio vacío debajo, lo puede dar a entender de que se trata de un error. Si se analiza con perspectiva, parece que se busca mantener una alineación entre las páginas principales, pero aquellas que no tienen subpáginas quedan con un bloque en blanco debajo. Lo recomendable es ajustar dicha alineación y, en todo caso, destacar mediante la tipografía aquellas páginas principales y aquellas que son secciones de dicha página.

La existencia de estos espacios en blanco puede contradecir el principio de learnability, que se refiere a la facilidad con la que el usuario puede aprender a usar la aplicación y recordar cómo realizar determinadas acciones (ídem), puesto que el usuario puede pensar que faltan subpáginas y que se trata de un error de la aplicación. No obstante, sabiendo el significado de estos espacios, se pueden interpretar como significantes ya que indican la ausencia de elementos en el menú.

Cuarta interacción

Esta interacción es positiva. Al presionar el botón «Enviar» para restablecer la contraseña, se muestra un mensaje indicando que se enviará un correo electrónico para restablecerla. Además, proporciona información adicional sobre posibles fallos en el envío, como la recomendación de revisar si se ha introducido correctamente el correo electrónico.

Como se comentaba al inicio, hay un feedback y una visibilidad del estado del sistema positivos. En consecuencia, se le brinda al usuario la capacidad de reconocer, diagnosticar y resolver errores de manera efectiva, puesto que se le informa sobre el estado del sistema y se le ofrecen posibles soluciones.

Por otro lado, se pueden identificar affordances, ya que la opción de restablecer la contraseña está claramente indicada, lo que le facilita al usuario su interacción con la aplicación.

APLICACIÓN 2. Móvil

Para este análisis, se ha seleccionada la aplicación SMOU.

Primera interacción

La aplicación proporciona un feedback cuando el usuario quiere darse de baja. Al acceder a Mi perfil y solicitar Darme de baja se carga una página para indicar los motivos. Tras este proceso, se observa un error y la aplicación devuelve una ventana con dicha información.

Se puede observar, por un lado, que la visibilidad del estado del sistema es adecuada, ya que se muestra un mensaje claro al usuario indicando el proceso que se está llevando a cabo. Por otro lado, las acciones disponibles para el usuario (affrodances), como solicitar darse de baja, están claramente indicadas en la aplicación. Finalmente, los usuarios pueden reconocer, diagnosticar y recuperarse de errores gracias al mensaje que indica el error y los pasos a seguir.

Segunda interacción

Hay una consistencia clara en el diseño de los botones. Al acceder al menú inferior para seleccionar un servicio, se puede observar que los botones primarios se distinguen claramente de los secundarios y terciarios, lo que permite una identificación rápida. Además, los botones de los servicios están acompañados de iconos fácilmente reconocibles. Por ejemplo, para el servicio de bicicletas, el icono es una bicicleta, y para el servicio de taxis, un taxi. Por otro lado, al cambiar de servicio, se actualizan los botones de la parte superior derecha con las opciones del servicio seleccionado.

Como se comentaba, la consistencia es evidente en la diferenciación de los botones primarios, secundarios y terciarios. Adicionalmente, las affrodances, como seleccionar un tipo servicio, están claramente indicadas y la presencia y ausencia de iconos asociados a los botones actúan como significantes que señalan al usuario las acciones disponibles asociadas a al servicio seleccionado.

Tercera interacción

Al seleccionar el transporte público se pueden observar los botones correspondientes a los servicios de metro, bus, tram, FGC y rodalies. A primera vista, puede parecer que al seleccionar uno de estos botones se elige exclusivamente ese servicio. Por ejemplo, al hacer clic en el botón Metro, el usuario puede entender que se seleccionará únicamente ese servicio. Sin embargo, estos botones funcionan en realidad como filtros ya aplicados. Si se observan las siguientes imágenes, se puede comprobar que, al seleccionar uno de estos botones, este se opaca y se deshabilita su vínculo en el mapa. Por ejemplo, si seleccionamos metro y bus, estas ya no aparecen en el mapa. Para solucionarlo, es recomendable añadir un breve comentario indicando que estos botones representan los filtros aplicados.

En resumen, se identifica un posible problema de affordances percibidas, ya que los botones del transporte público pueden ser malinterpretados como opciones de selección exclusiva en lugar de filtros aplicados. No obstante, entendiendo su funcionalidad, la opacidad e inhabilitación de los botones seleccionados actúan como significantes que señalan al usuario qué filtros están activos e inactivos.

Cuarta interacción

Finalmente, en el servicio de Bicing , cuando se quiere desbloquear una bicicleta para su uso, hay un buen feedback por parte de la aplicación.

Al igual que con la primera interacción analizada de esta aplicación, la visibilidad del estado del sistema es adecuada, ya que durante todo el proceso se indican los pasos que se están llevando a cabo. Por otro lado, las affordances, como escanear el QR o escribir el código de forma manual, están correctamente identificadas. Por último, los usuarios pueden reconocer, diagnosticar y recuperarse de errores gracias al feedback presente final del proceso, pues se muestra un mensaje indicando el error producido.

 

Conclusiones

En definitiva, en una misma aplicación pueden presenciarse aspectos positivos y negativos simultáneamente, incluso en la misma interacción.

Es importante hacer uso de las buenas practicas con tal de satisfacer las necesidades y mejorar la experiencia de los usuarios.

 

Referencias

Ballester Rubio, B. (s. f.). Cuaderno de interfaces. https://quadern-interficies.recursos.uoc.edu/es/

C, F. (2020, 19 junio). Los 5 principios IxD – Prototypr. Medium. https://blog.prototypr.io/los-5-principios-ixd-b28abeef8ca9

Mitra, M. (2020, 13 abril). 10 most important interaction design principles. Mantra Labs. https://www.mantralabsglobal.com/blog/10-basic-principles-of-interaction-design/

Entrega de la actividad R1

PR. AUTOMATIZACIÓN EN EL MUNDO LABORAL: ¿AMENAZA U OPORTUNIDAD?

por Jennifer Molano NavarroPublicado el Sin comentarios
Asignatura Conceptualización de interactivos - Aula 1
Pública

¡Hola!,

Adjunto el informe junto al póster de presentación y  el vídeo sobre la automatización en el mundo laboral. En el informe, además del análisis de la problemática, podréis encontrar información detallada sobre los wireframes y el póster.

Adicionalmente, os adjunto también aquí los enlaces a Figma:

Informe

 

Wireframe

Póster

 

Vídeo

Conceptualización de interactivos - Aula 1. Entrega de la actividad PR