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