A partir de nuestro trabajo de investigación en el Reto 3, identificamos las principales necesidades de los usuarios y establecimos los requisitos fundamentales para nuestra aplicación. Nuestro objetivo era claro: diseñar una herramienta de comunicación que permitiera realizar videollamadas y chats accesibles para todas las personas, independientemente de su edad o sus necesidades específicas de accesibilidad.

Storyboard

Para realizar el storyboard hemos seleccionado la secuencia más relevante como imaginamos que sería la experiencia de usuario con nuestra app. Para ello hemos hecho el siguiente boceto:

A continuación vamos a explicar las viñetas una en una de izquierda a derecha:

1. Iniciar sesión: La primera viñeta muestra a una usuaria mayor utilizando nuestra aplicación desde un ordenador. En este paso, la usuaria accede introduciendo su correo electrónico y contraseña en la pantalla de inicio de sesión.
2. Página de inicio: Una vez iniciada la sesión, la usuaria es redirigida a la página principal, donde se presentan cuatro opciones clave con iconos grandes y visibles: realizar una videollamada, unirse a una videollamada, abrir el chat y acceder a la sección de ayuda.
3. Sección de ayuda: La usuaria selecciona la opción de ayuda, lo que la redirige a una página con dos opciones claras: videotutoriales de ayuda y opciones de accesibilidad. Estas opciones permiten que los usuarios resuelvan dudas o adapten la aplicación a sus necesidades específicas.
4. Opciones de accesibilidad: En esta viñeta, la usuaria ha seleccionado las opciones de accesibilidad. Se despliega una página con múltiples ajustes configurables, como ajustes de voz y navegación, ajustes de color, y ajustes de contenido. Una página muy completa que hará que los usuarios puedan adaptar la aplicación a sus necesidades.
5. Regreso a la pantalla de inicio: Una vez configuradas sus preferencias de accesibilidad, la usuaria regresa a la pantalla de inicio y selecciona la opción de crear una nueva videollamada para poder hablar con su nieta Alba.
6. Búsqueda de contacto: La usuaria accede a un buscador donde puede introducir el nombre del contacto con el que desea comunicarse. Esto agiliza la búsqueda, permitiéndo encontrar rápidamente a su nieta Alba.
7. Conexión con el contacto: Una vez seleccionada el usuario de su nieta Alba, la aplicación muestra en pantalla cómo intenta establecer la conexión.
8. Videollamada activa: Una vez Alba acepta la videollamada, Alba aparece en un recuadro grande, mientras que la imagen de la usuaria se muestra en un recuadro más pequeño en la esquina derecha. 

Bocetado o sketching básico

A partir del storyboard hemos creado nuestro sketching básico donde se puede visualizar con más claridad el contenido de nuestra aplicación.

1. Diseño visualmente sencillo y funcional que establece el tono visual predominante en toda la interfaz. En esta pantalla inicial, se encuentra el logotipo de la aplicación en una posición destacada, acompañado de un pequeño formulario compuesto por dos campos: uno para introducir el correo electrónico y otro para la contraseña, necesarios para iniciar sesión.
2. En la pantalla de inicio de nuestra aplicación se destaca un diseño centrado en la accesibilidad y la claridad, donde los iconos visuales desempeñan un papel crucial como ayudas para la comprensión y la navegación.
3. En la sección de Ayuda de nuestra aplicación, hemos priorizado dos opciones fundamentales que previamente identificamos en la investigación que realizamos en el Reto 3: biblioteca de videotutoriales y sección de accesibilidad.
4. La sección de Accesibilidad de la aplicación ofrece un catálogo amplio y detallado de opciones de personalización, diseñadas para adaptarse a las necesidades individuales de cada usuario.
5. Por otra parte en la aplicación encontramos la opción de crear una videollamada. En esta sección podemos encontrar una página visualmente sencilla y un uso constante de iconos para hacer más fácil e intuitiva su navegación. Al seleccionar esta opción, el usuario es redirigido a una página sencilla que incluye un buscador con una agenda integrada, donde se encuentran todos los contactos previamente agregados.
6. La pantalla está diseñada para garantizar una comunicación clara y efectiva. El usuario principal aparece en un recuadro grande, ocupando la mayor parte de la pantalla, mientras que la imagen del usuario que maneja la aplicación se presenta en un recuadro más pequeño ubicado en la esquina derecha.

El objeto que he seleccionado para esta práctica es una botella reutilizable. Este artefacto forma parte de mi rutina diaria, ya que siempre lo llevo conmigo como una forma práctica de mantenerme hidratada. En mi caso, suelo rellenarla con agua mineral, aunque también puede contener otros líquidos, como café. Su uso más común es transportar líquidos, lo que evidencia una affordance perceptible. Sin embargo, es importante señalar que la affordance de este objeto podría variar dependiendo del contexto sociocultural de la persona que interactúe con él.

Los escenarios habituales en los que utilizo este objeto son los siguientes:

• Lugar de trabajo: Coloco la botella en mi escritorio y la utilizo cada vez que necesito hidratarme, especialmente durante las comidas.
• Lugar de estudio: Durante mis sesiones de estudio y prácticas en la UOC, siempre tengo la botella junto a mi ordenador portátil.
• Actividad deportiva: Cuando corro por la montaña, llevo la botella en mi mochila. Después de completar mi ruta habitual, la utilizo para hidratarme al regresar al coche, donde la dejo junto con mi mochila.
• Mesita de noche: Antes de dormir, coloco la botella en mi mesita de noche para poder beber agua durante la madrugada sin necesidad de levantarme a buscar un vaso.

Generalmente, no alcanzamos la cantidad de agua diaria recomendada por la OMS, que es de 2 litros. Por esta razón, sería interesante incorporar un artefacto tecnológico a las botellas reutilizables que permita al usuario monitorizar la cantidad de agua consumida durante el día y cuánto le falta para alcanzar el mínimo recomendado.

Además, no todas las aguas tienen la misma composición mineral, y algunas son más adecuadas para ciertos grupos de personas. Por ejemplo, se recomienda agua de mineralización débil para deportistas y agua de mineralización muy débil para mujeres embarazadas y niños. Esta información podría ser comunicada al usuario a través de una pantalla táctil integrada en la botella reutilizable, donde se muestren las características del agua contenida, ofreciendo una experiencia más personalizada y útil.

A simple vista, la botella reutilizable tiene un único propósito principal: permitir la hidratación. Sin embargo, al descontextualizar el objeto, es posible explorar nuevos usos en otros escenarios. Por ejemplo, podría incorporarse una pantalla con tres luces indicadoras: roja, amarilla y verde, que informen sobre el nivel de llenado de la botella. Una luz roja señalaría que la botella está vacía, la amarilla indicaría que se encuentra a la mitad de su capacidad, y la verde confirmaría que está completamente llena.

Prototipo de objeto digital: 

La propuesta consiste en una botella reutilizable equipada con una pantalla táctil que proporciona información relevante para el usuario. Además, esta botella podría conectarse a un teléfono móvil, permitiendo recibir notificaciones sobre la cantidad de agua consumida durante el día y el volumen restante para alcanzar los 2 litros diarios recomendados por la OMS.

El prototipo incluye un sistema de notificación visual basado en tres señales de color: rojo, amarillo y verde, que indican el nivel de llenado de la botella. El color cambia según el estado actual de la cantidad de líquido que contiene.

Adicionalmente, la botella tendría la capacidad de analizar el contenido del agua y proporcionar información sobre su composición. De este modo, el usuario podría conocer la marca del agua que contiene, así como si se trata de agua de mineralización débil, media o muy débil, adaptando así su consumo a necesidades específicas.

Buenas tardes a todos, os comparto aquí mi wireframe del periódico «El País» donde se muestra las estructura de la página que encontramos nada mas entrar a la web.

He decidido trabajar con el periódico El País, ya que es suelo leer las noticias de su página web a diario. Aquí se puede visualizar el contenido entero: Pincha aquí

Media escogido: «La Vanguardia»

Enlace a figma:

https://www.figma.com/proto/ba1F65Ed9Tk9o1maWYAyRd/D2_DI_WIREFRAME?page-id=0%3A1&node-id=28-232&node-type=canvas&viewport=451%2C743%2C0.48&t=SCgXuiGY7TKai03D-1&scaling=scale-down-width&content-scaling=fixed

La experiencia que voy a usar para hacer este mapeo es una experiencia que hago varias veces a la semana: ir al gimnasio.

Primera interacción: Reservar clase.

Antes siquiera de llegar al gimnasio, el primer paso que realizo cuando quiero ir a entrenar es reservar una clase que incluya ejercicio aeróbico ya que divido mi entreno en una primera parte de ejercicio de fuerza y una segunda parte de cardio.

¿Cómo lo hago?
Selecciono una de las actividades del calendario y presiono el botón “reservar”.

¿Cómo lo siento?
Siento cierta seguridad ya que sé que reservando la clase voy a asegurar una plaza.

¿Cómo lo conozco?
Conozco que lo he realizado de forma correcta cuando veo que aparece un símbolo de “check” en la actividad reservada.

Tipo de interacción: Manipulating

Estilo de interacción: GUI

Contexto de Interacción: Mobile multitouch

Segunda interacción: Llegada al GYM.
Al llegar al gimnasio paso los tornos de la entrada validando con un dispositivo que la compañía me ha proporcionado (que es personas e intransferible).

¿Cómo lo hago?
Paso el dispositivo por el sensor de los tornos.

¿Cómo lo siento?
Es una tarea que siempre me genera cierta inseguridad ya que a veces el sensor no detecta bien el dispositivo y tengo que pasarlo varias veces hasta validad y poder entrar/salir del gimnasio. En este caso no ha habido ningún problema por lo que he sentido alivio al poder entrar.

¿Cómo lo conozco?
Al pasar el dispositivo por el sensor veo como en una pequeña pantalla colocada encima del sensor se puede leer que la validación ha sido correcta y escucho un pequeño click en los tornos que me confirmar el desbloqueo de los mismos

Tipo de interacción: manipulating

Estilo de interacción: gesture

Contexto de Interacción: interacción intangible

Tercera interacción: sala de musculación
Una vez habiendo entrado al gimnasio entro a la sala de máquinas/musculación. Por una cuestión de espacio nos centraremos en una sola máquina (aunque se podría realizar este análisis de cada una de las máquinas del gimnasio).

¿Cómo lo hago?
Me siento en la máquina y le pongo un peso que considero que puedo levantar (por experiencias previas de haber venido más veces al gimnasio). También intento acomodar la máquina para que me resulte lo más ergonómica posible usan las diferentes palancas.

¿Cómo lo siento?
Ahora que ya sé cómo funciona cada máquina me resulta sencillo e intuitivo manipular las máquinas para adecuarlas a mi cuerpo, sin embargo, cuando comencé a ir al gimnasio cada una de las máquinas me parecían una incógnita, lo que me generaba cierta ansiedad no saber usarlas.

¿Cómo lo conozco?
Uso el palito para añadirle peso a la máquina y las partes que están pintadas de color amarillo sé que sirven para ajustar el tamaño de la maquina para ajustarlo a tamaño de mi cuerpo.

Tipo de interacción: Manipulating

Estilo de interacción: Touching

Contexto de Interacción: Interacción tangible

Cuarta interacción: clase de Spinning
Después de realizar los ejercicios de fuerza y teniendo puesto en la clase reservada de forma previa, me posiciono en la puerta de la sala de spinning. Ahí interactúo con otro instrumento que es el que determina si puedo acceder o no a la clase de spinning.

¿Cómo lo hago?
Paso el dispositivo proporcionado por el gimnasio por el sensor y, en el caso de que tenga un puesto reservado en la clase de forma previa, veo cómo el círculo del sensor cambia de color a verde.

¿Cómo lo siento?
Se siente intuitivo y sencillo, es decir, paso el dispositivo por sensor y veo que cambia de color a verde, por lo que interpreto de forma rápida y sin dificultad que puedo entrar a la clase. Se siente reconfortante.

¿Cómo lo conozco?
Tras pasar el dispositivo veo que la luz del sensor se pone verde.

Tipo de interacción: manipulating

Estilo de interacción: gesture

Contexto de Interacción: Interacción intangible