Publicado por

R5 – STORYBOARD Y BOCETEADO

Publicado por

R5 – STORYBOARD Y BOCETEADO

A partir de nuestro trabajo de investigación en el Reto 3, identificamos las principales necesidades de los usuarios y establecimos los requisitos…
A partir de nuestro trabajo de investigación en el Reto 3, identificamos las principales necesidades de los usuarios y…

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.

 

Debate0en R5 – STORYBOARD Y BOCETEADO

No hay comentarios.

Publicado por

R4 – Prototipo de interacción

Publicado por

R4 – Prototipo de interacción

El objeto que he seleccionado para esta práctica es una botella reutilizable. Este artefacto forma parte de mi rutina diaria, ya que…
El objeto que he seleccionado para esta práctica es una botella reutilizable. Este artefacto forma parte de mi rutina…

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.

 

 

Debate0en R4 – Prototipo de interacción

No hay comentarios.

Publicado por

R3 – MAPA DE VALOR

Publicado por

R3 – MAPA DE VALOR

En este proyecto, he llevado a cabo una investigación que ha incluido dos fases principales: Test con usuarios: Realización de pruebas con…
En este proyecto, he llevado a cabo una investigación que ha incluido dos fases principales: Test con usuarios: Realización…

En este proyecto, he llevado a cabo una investigación que ha incluido dos fases principales:

  • Test con usuarios: Realización de pruebas con siete participantes para obtener información directa sobre sus experiencias y necesidades al utilizar productos tecnológicos destinados a la comunicación intergeneracional.
  • Benchmarking de aplicaciones: Análisis en profundidad de cuatro aplicaciones diferentes para identificar sus puntos fuertes y debilidades. Este proceso nos ha permitido comprender mejor las características clave que facilitan o dificultan la accesibilidad y la conectividad entre personas de distintas generaciones.

Estos análisis nos han permitido crear nuestra propuesta de valor. Han sido fundamentales para diseñar una solución que aborde las necesidades que hemos descubierto.

A partir del análisis de nuestra propuesta de valor, hemos identificado un conjunto de mejoras necesarias para mejorar la experiencia del usuario y facilitar la conectividad entre personas de distintas generaciones. Estas mejoras son:

  • Interfaz más intuitiva: Diseñar una interfaz clara y sencilla visualmente, especialmente pensando en personas mayores o con menos experiencia digital.
  • Accesibilidad mejorada: Incluir opciones como ajuste del tamaño de texto, cambio de contrastes y soporte con voz garantizando que la aplicación sea accesible para usuarios con problemas  de visión u otras dificultades.
  • Sección de Ayuda – Tutoriales: Ofrecer guías explicativas en formato de vídeo, imágenes, texto e iconos, que expliquen paso a paso cómo utilizar la aplicación, para aquellos usuarios que tengan dificultades para entenderla
  • Proceso de registro simplificado: Minimizar los pasos necesarios para crear una cuenta, solicitando únicamente la información esencial, y proporcionando instrucciones claras durante el proceso.
  • Lenguaje claro: Uso de icónos y texto para facilitar la comprensión de la interfaz. evitar términos técnicos o jerga especializada que puedan dificultar la comprensión, especialmente para personas mayores o con menos experiencia digital.

Estas mejoras tienen como objetivo principal garantizar una experiencia más inclusiva, eficiente y accesible, promoviendo la interacción entre personas de distintas generaciones a través de la tecnología.

Debate0en R3 – MAPA DE VALOR

No hay comentarios.

Publicado por

R2 – Wireframe de El País

Publicado por

R2 – Wireframe de El País

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í…
He decidido trabajar con el periódico El País, ya que es suelo leer las noticias de su página 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í

Debate0en R2 – Wireframe de El País

No hay comentarios.

Publicado por

RETO 1 – Mapeo de experiencia – De casa al trabajo

Publicado por

RETO 1 – Mapeo de experiencia – De casa al trabajo

Para el R1 de la asignatura de Diseño de Interacción, voy a explicar el recorrido que hago de mi casa al trabajo…
Para el R1 de la asignatura de Diseño de Interacción, voy a explicar el recorrido que hago de mi…

Para el R1 de la asignatura de Diseño de Interacción, voy a explicar el recorrido que hago de mi casa al trabajo cada mañana.

1 – LEVANTARME 

Lo primero que hago por la mañana es despertarme con la alarma del móvil.

¿Cómo lo hago? 

Para apagar la alarma de mi móvil toco la pantalla táctil con un dedo de mi mano y lo deslizo hacia arriba.

¿Cómo lo siento?

Normalmente, me cuesta despertarme y asociar el sonido tan ruidoso con la alarma de mi móvil. Una vez lo he asociado, automáticamente, como una acción cotidiana, toco mi móvil sin mirar y deslizo mi dedo sobre la pantalla táctil para apagarla. 

¿Cómo lo conoces?

Apagar la alarma del móvil no es una tarea complicada, es bastante intuitivo. Además, que al hacerlo todas las mañanas la acción se convierte en una acción automática, que no piensas al realizarlo.

Tipo de interacción: Manipulating

Estilo de interacción: Touch

Contexto de interacción: Interacción tangible

2 – CALENTAR EL CAFÉ AL MICROONDAS

Al levantarme, lo primero que hago es calentar un vaso de café con leche al microondas. Es una acción que hago automáticamente sin pensar.

¿Cómo lo hago? 

Abro la puerta del microondas con la mano y deposito dentro de él mi taza. Vuelvo a cerrar la puerta y miro que la rosca de la temperatura esté en calentar al máximo. Por último, giro la rosca del tiempo y espero unos 30 segundos para que el café esté listo para tomar. 

Luego vuelvo a abrir la puerta del artefacto y ya puedo tomar mi café.

¿Cómo lo siento?

No me cuesta esfuerzo utilizar el microondas, pero hay veces que voy medio dormida y se me olvida que el café está dentro y se calienta más de lo debido. La rosca del tiempo no me es cómoda de indicarle 30 segundos y acabo controlando yo el tiempo. Por lo cual, a veces se me olvida y sale el café ardiendo. 

¿Cómo lo conoces?

A lo largo del tiempo he tenido microondas con muchas funcionalidades y se convierte en una tarea tediosa, algo tan simple como calentar una taza de café. Pero este microondas es muy fácil de usar, no me resultó una tarea muy complicada aprender su funcionamiento. Fue bastante fácil y simple.

Tipo de interacción: Manipulating

Estilo de interacción: Touch

Contexto de interacción: Interacción tangible

3 – SALGO DE CASA Y ENTRO AL ASCENSOR

Antes de coger el coche, salgo de casa y bajo hasta la calle utilizando el ascensor.

¿Cómo lo hago? 

Para bajar por el ascensor tan solo hay que llamarlo pulsando un botón táctil en el rellano de mi vivienda. Una vez dentro toco con mis dedos el “0” de la pantalla táctil.

¿Cómo lo siento?

A veces se hace un poco complicado tocar el número “0”. Al ser una pantalla táctil, tiene fallas, y no te coge bien la indicación, tienes que probar varías veces colocando de diferentes formas el dedo o incluso pulsando con dos dedos a la vez. No es fácil para alguien que no tenga costumbre de subir por ese ascensor.

¿Cómo lo conoces?

Por intuición y costumbre. Al final me he acostumbrado a probar hasta que la pantalla tdel ascensor, coge bien la indicación que le has dado.

Tipo de interacción: Manipulating y exploring

Estilo de interacción: Touch

Contexto de interacción: Interacción tangible

4 – BUSCAR MI COCHE EN GOOGLE MAPS

Cada día al volver del trabajo aparco el coche y me envío su ubicación para al día siguiente acordarme de donde lo dejé.

¿Cómo lo hago? 

Abro el Whatssap y entro a la ubicación guardada del día anterior a través de la aplicación de Google Maps. A continuación le doy clic a “iniciar” y camino hasta el coche siguiendo el mapa.

¿Cómo lo siento?

Muy fácil e intuitivo, ya es parte de mi día a día. Aunque a veces al darle a “iniciar” la flecha que te aparece en Google Maps, falla un poco de dirección y te indica que camines hacia otro lado.

¿Cómo lo conoces?

Por rutina, llevo utilizando Google Maps desde hace al menos una década de cuatro a cinco veces por semana. Es de las herramientas que más utilizo en mi día a día. 

Tipo de interacción: Manipulating y exploring

Estilo de interacción: Touch

Contexto de interacción: Interacción tangible

5 – CONDUCIR HASTA EL TRABAJO

Arranco el coche con la llave y conduzco de 15 a 20 minutos hasta el trabajo, dependiendo del tráfico que haya cada mañana. Una vez llegado al lugar, aparco rápido porque siempre hay sitio de sobra para dejar el coche.

¿Cómo lo hago? 

Con mi mano coloco la llave del coche y con un movimiento de muñeca, la giro a la derecha y empieza a funcionar. Conduzco usando el freno, el acelerador y el embrague hasta la empresa donde trabajo.

¿Cómo lo siento?

Es una tarea en la que tienes que estar muy atento, a veces me da un poco de malestar. Pero al convertirse en algo habitual durante un año, cada vez lo llevo mejor.

¿Cómo lo conoces?

Por costumbre, realizo ese mismo trayecto diez veces a la semana, al final se convierte en parte de la rutina.

Tipo de interacción: Manipulating y exploring

Estilo de interacción: Touch

Contexto de interacción: Interacción tangible

Debate0en RETO 1 – Mapeo de experiencia – De casa al trabajo

No hay comentarios.

Publicado por

TIPOS DE INTERFACES

Publicado por

TIPOS DE INTERFACES

Interfaz fácil Esta interfaz me resulta fácil porque es bastante intuitiva y no tiene complicaciones lingüísticas ya que no tiene abreviaciones. Tan solo debes de elegir entre 5 modos de intensidad ordenados de mayor a menor, y el tiempo que le quieras dar. Interfaz difícil En cambio esta interfaz la he elegido como difícil ya que se me hace tediosa con las abreviaciones por no estar familiarizada con ellas. No es algo que a simple vista puedas utilizar, le tienes…
Interfaz fácil Esta interfaz me resulta fácil porque es bastante intuitiva y no tiene complicaciones lingüísticas ya que no…

Interfaz fácil

Cargando...

Esta interfaz me resulta fácil porque es bastante intuitiva y no tiene complicaciones lingüísticas ya que no tiene abreviaciones. Tan solo debes de elegir entre 5 modos de intensidad ordenados de mayor a menor, y el tiempo que le quieras dar.

Interfaz difícil

Cargando...

En cambio esta interfaz la he elegido como difícil ya que se me hace tediosa con las abreviaciones por no estar familiarizada con ellas. No es algo que a simple vista puedas utilizar, le tienes que dedicar un tiempo en entenderlo o investigar cómo funciona.

Debate0en TIPOS DE INTERFACES

No hay comentarios.