MemorApp

De Casiopea



Títuloexperiencia de usuario
Tipo de ProyectoProyecto de Taller
Palabras Claveapp
Período2018-
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2018
CarrerasDiseño, Diseño Gráfico, Diseño Industrial
Alumno(s)Rosario Muñoz Araya, Silvana Sarrocchi, María Jesús Ossandón
ProfesorHerbert Spencer

Tabla de Contenidos

Datos de Proyecto

  • Grupo: Zeta

En colaboración con los alumnos de la carrera de ingeniería informática, hemos iniciado este proyecto con el fin de diseñar un servicio o widget, a partir de la observación en las interacciones de las personas con el medio, en este caso, de un grupo determinado: el adulto mayor.

  • Integrantes ingeniería informática: Cristian Rodríguez, Marcos Rojas, Cristóbal Vargas, Luis Gutierrez, Cristian Valenzuela
  • Integrantes diseño de interacción: María Jesús Ossandon, Silvana Sarrochi y Rosario Muñoz

Tema de estudio

Con el fin de encontrar problemáticas presente en la vida cotidiana de adultos mayores, se realiza una investigación, basada en observación y cuestionarios, los cuales arrojarán el tema de estudio en una temática concisa.

Investigación

Método 1: Entrevista de personas de 3era edad

  • Preguntas:
  1. ¿Hace uso de la tecnología?
  2. En caso de que lo haga, ¿para qué lo usa? -> ¿trámites?
  3. Si no lo hace, ¿por qué no?
  4. ¿Cuál(es) es(son) su(s) experiencia(s) con la tecnología? -> ¿Dificultades?
  5. ¿Qué otros problemas cotidianos tienes? (que le gustaría solucionar).


A continuación, se presentan las respuestas de los entrevistados como un punteo de ideas (extractos) cuyo orden no necesariamente es el de las preguntas:


  • Entrevistado 1:
  1. Uso del celular (WhatsApp, llamar).
  2. No utilizaría una App dado que prefiere salir más.
  3. Posee cuenta RUT (que le obligaron a sacar) solo para sacar dinero.
  4. Existe temor para usar el PC, puesto que puede echarlo a perder.
  • Entrevistado 2:
  1. Personalmente renunció a las tecnologías, aunque la hermana lo usa para todo.
  2. Toma mucho tiempo hacer uso de una App para hacer trámites.
  3. Prefiere caminar/salir/” vivir la vida” en vez de encerrarse.
  • Entrevistado 3 (Profesora):
  1. Hace uso de las tecnologías.
  2. Utilización de WhatsApp; lectura de diarios (noticias).
  3. No las utiliza para realizar transferencias ni trámites, pues lo encuentra complicado, tiene desconfianza e inseguridad.
  4. Respecto a problemas cotidianos:
    1. Tarifas menores para adultos mayores en transporte público.
    2. Quedar exentos del pago de contribuciones.
    3. Aumento de pensiones.
    4. Abaratar los libros (tienen mucho tiempo, y le gustaría tener más acceso a ellos).
  • Entrevistado 4:
  1. Hace uso de las tecnologías.
  2. Utilización de WhatsApp (grupos de conversación), les permite trabajar colaborativamente y coordinarse respecto a las actividades de la capilla.
  3. Sí realiza trámites, hace transferencias por internet.
  4. Problemas que identifica: Se debería cambiar el concepto de adulto mayor, es decir, enseñar desde la

infancia y entregar cultura respecto a ellos.

Otro: Mención especial a un grupo de jóvenes que asisten los sábados a ayudar a la gente de la calle (cocinan).

  • Entrevistado 5:
  1. No tan a menudo, a veces trato de ocupar el celular para comunicarme por WhatsApp con mi familia, pero se me hace difícil.
  2. La uso para comunicarme con mi familia, los tramites los realiza mi esposo.
  3. La verdad me cuesta mucho ocupar el teléfono, tengo que usar lentes y aun así me cuesta leer lo que parece, aunque mi nieta puso el tamaño de la letra lo más grande posible. No me manejo muy bien, apreto cualquier cosa, no se que hacen algunos botones en la pantalla.
  4. En el día a día me duelen mucho los huesos, mover las manos, caminar, sufro de osteoporosis.
  • Entrevistado 6:
  1. Si, con dificultad a veces pero la ocupo.

  2. Hago mayormente trámites, pago los impuestos por la página de internet, la cuenta del agua, uso mi correo electrónico, hace poco mi nieta me ayudó a sacar una hora para renovar mi licencia en Valparaíso, no sabía que se pedía solamente por internet, menos mal me ayudó porque no sabía cómo hacerlo. De todas formas prefiero hacer los trámites de manera presencial, pero en algunos casos ahora sólo se puede por internet. También ocupo WhatsApp para hablar con mi familia, pero aún no lo entiendo muy bien no me manejo mucho.
  3. A veces trato de no ocuparla porque no entiendo como usarla, en estos tiempos casi todo se puede hacer con la tecnología, y crean todas estas cosas asumiendo que todos entienden algunos términos o formas de cómo funcionan. Esto hace más difícil para nosotros entender, porque tampoco crecimos con esto.
  4. Bueno en mi computador no tengo muchas dificultades, pero con el teléfono… ahora estoy luchando para entender uno que me regalaron para estar comunicado, solo es una pantalla, sin teclas.
  5. No tengo mayores problemas, a veces me gustaría entender mejor pero es difícil.


Método 2: Observación

El adulto mayor y la tecnología: El uso del celular "touch"

DisinterM3 1.png DisinterM3 2.png DisinterM3 3.png

Resultados: Observación y Entrevistas

Tecnología

  • Poco uso de la Tecnología:

Los adultos mayores, tienden a ser reacios a las tecnologías de la actualidad, más aún si no han tenido la oportunidad de usarlas previamente o se involucran de manera repentina. No la comprenden del todo y se complican al usar los aparatos, dicen no estar pensados para sus necesidades.

  • Preferencia de explorar fuera de un aparato:

Cuando se hacía mención del uso de la tecnología para ciertas tareas de la vida cotidiana, tal como, pagar cuentas, reservar taxis, hoteles, o espacios públicos, comprar entradas o alimentos. Ellos respondían que preferían hacer todas esas tareas de forma personal, de manera presente. Prefieren vivir la experiencia humana antes que hacerlo desde su hogar y a través de un aparato.

  • No comprensión de Conceptos Web's:

En la actualidad nuestro vocablo a adoptado varías expresiones web´s como un vocabulario común, cuando hablamos de on/off, Postear, subir o bajar información, links, etc. Para ellos en su mayoría son desconocidos y si es que lo han escuchado alguna vez no tienen la certeza bajo que contexto o situación se aplica. Estos conceptos son los que hacen, a medida que se avanza en el proceso de una página web, no logren dar los pasos correctos para completar una acción en la navegación.

  • Desconfianza del Sistema:

En ciertas paginas, el proceso de un pago o subir información, puede ser demoroso o incluso complicado, en ciertos casos de caída del sistema o del Internet, son estas ocasiones que hacen que el adulto mayor no sepa responder ante estos imprevistos y pierdan la confianza de trabajar en estas plataformas.

Alzheimer

  • Incapacidad de Independencia:

Tras entrevistar un adulto mayor con esta enfermedad, se sugieren soluciones para poder sobrellevar la enfermedad y poder confrontarla en un espacio público, para que en las circunstancias criticas, pueda ser mas fácil el compartir y socializar con un enfermo de Alzheimer.

  • Degeneración de su Historia y Vida:

En los momentos de crisis y a medida que avanza la enfermedad, pierden momentos de su memoria, momentos importantes, tanto como para poder complementar el valor de su persona y del que los rodea, pierden por completo la razón y el tiempo- espacio.

Entrevista Clave

(P) ¿Hace uso de la tecnología?


(R) Moderadamente, más que nada para buscar información.


(P) ¿Considera indispensable el uso de la tecnología?


(R) Totalmente, sirve para solucionar muchos problemas y a sido una herramienta que facilita la vida


(P) ¿Qué otros problemas cotidianos tiene? (que le gustaría solucionar mediante la tecnología)


(R) Mi padre tiene alzheimer, y tiene muchos momentos críticos, quizá sería bueno algún implemento que nos ayude con la enfermedad


(P) ¿Qué problemas se presentan con su padre? ( Paciente con Alzheimer)


(R) Tiene uno que otro momento lucido, a veces se pierde completamente y se producen situaciones incomodas, sobre todo si andamos en la calle como ahora


(P) ¿Considera que es difícil cuidar a un enfermo de Alzheimer?


(R) Si, sobre todo cuando no sabes como calmarlo después de una crisis


(P) ¿ Le ayudaría a hacer mas llevadera la enfermedad con algún implemento tecnológico que ayude con el desarrollo de esta?


(R) Sería mucho mas fácil y cómodo, para poder convivir de una manera más tranquila.


(P) : Pregunta

(R) : Repuesta

Investigación de Contexto

La enfermedad de Alzheimer y otras demencias se caracterizan por el deterioro progresivo de las facultades físicas y mentales de las personas que la padecen. Es muy duro para los pacientes, pero lo es también para sus familiares, que deben reestablecer el vínculo y la forma de relacionarse con su ser querido.

Cuando una persona padece Alzheimer, la familia no está ajena a esta situación. Algunos dejan trabajos para cuidar al paciente y hasta se generan conflictos internos porque uno lo cuida más que otro. Las personas que padecen este tipo de demencia se encuentran en una situación de dependencia de compañía porque no pueden valerse por sus propios medios.

Existen varias etapas que van definiendo el proceso que atraviesa la persona enferma y estas se dividen según su grado de complejidad.


Niveles de Alzheimer

1. Etapa 1 : ausencia de daño cognitivo-funcional normal

2. Etapa 2 : disminución cognitiva muy leve

3. Etapa 3 : disminución cognitiva leve

4. Etapa 4 : disminución cognitiva moderada

5. Etapa 5 : disminución cognitiva moderadamente severa

6. Etapa 6 : disminución cognitiva severa

7. Etapa 7 : disminución cognitiva muy severa


Tratamientos / Terapias

Existen tratamientos donde se le indican medicamentos al paciente, esto ayuda a aplazar el proceso degenerativo del alzheimer, pero existen otras terapias para mejorar la calidad de vida, tales como:

1. Estimulación cognitiva

2. Orientación a la realidad

3. Fisioterapia y ejercicio terapéutico

4. Terapia ocupacional

5. Terapia con perros

6. Músicoterapia

7. Estimulación Multisensorial


Recuerdos / Vida Personal

Otro método de ayuda son traer a presencia recuerdos que estimulen su cerebro, momentos de su vida personal que a través de pequeños reflejos de la vida anterior a la enfermedad logran traer imágenes a su memoria frágil.


Abuelos alzheimer.png

Pre-diseño de Software

Idea y Orientación del Software

El cuidador principal es la persona que asume la responsabilidad de la atención, apoyo y cuidados diarios de cualquier tipo de enfermo. Es quien, además, le acompaña la mayor parte del tiempo y quien, aparte del enfermo, sufre un mayor riesgo sobre su estado de salud general. En la mayor parte de las familias, un único miembro asume la mayor parte de la responsabilidad del cuidado. Como toda enfermedad, el acompañar y convivir con el afectado, suele ser una tarea difícil, por esta razón buscamos simplificar y hacer mas llevadero, el camino del Alzheimer, para que los momentos en familia y sociedad sucedan con la máxima normalidad y no marque la vida de las personas que sufren este tipo de demencia.

Módulo de Interacción: ideas a tratar en la aplicación

* TEST NIVELADOR: A través de un test nivelador deseamos clasificar en que proceso del alzheimer va el usuario, para esto se le hacen una serie de preguntas en el caso de que no conozca su nivel. Estas preguntas determinaran en que nivel debe comenzar las terapias alternativas para poder tener un desarrollo eficaz.

* MUSICOTERAPIA: La musicoterapia es definida como la utilización de la música para promover y facilitar la comunicación, las relaciones, el aprendizaje, el movimiento y la expresión satisfaciendo las necesidades físicas, emocionales, mentales, sociales y cognitivas del paciente.

* ESTIMULACIÓN MULTISENSORIAL: busca estimular de forma controlada nuestros órganos sensoriales: ojos, nariz, boca, piel y oídos, con material específico.

* ORIENTACIÓN A LA REALIDAD: Esta terapia tiene un carácter muy práctico y está dirigida principalmente a conseguir que el paciente mantenga el conocimiento sobre sí mismo y sobre el medio que le rodea durante el mayor periodo de tiempo posible, reduciendo así el malestar derivado de la confusión sobre quién es, dónde se encuentra y en qué momento.

* CENTRO DE AYUDA: Como toda aplicación derivara a un centro de ayuda en el caso que no se sepa utilizar la interfaz o se tenga dudas sobre la aplicación.

* INFORMACIÓN Y GUÍA: Todas las derivadas de la aplicación cuentan con la información necesaria para poder aplicar la terapia a la persona en especifico y con una guía fácil para que el adulto mayor o cualquier usuario pueda hacer uso de esta.

WhatsApp Image 2018-05-14 at 20.51.06.jpeg

Escenario de Aplicación

Escenario n°1

Escenarios y personas jpg.jpg

Escenario n°2

Escenarios y personas 2 (1).jpg

Idealización Mecanismo Software

Mapa conceptual comunicacion interfaz.jpg

Pre-diseño de Interfaz

Mapa de Navegación

Untitled Diagram (1).jpg

Experiencia de Usuario

Estesiahorasi.png

Prototipos

Prototipo n°1

Prototipo n°2

Prototipo n°3

Prototipo n°4

Prototipo n°5

Link Aplicación Prototipo n°5

https://xd.adobe.com/view/04daee6e-b2a6-47c2-6d82-96f96166a043-72eb/?hints=off

Presentación de Aplicación Prototipo n°5

Prototipo Nº6

Interfaz Registro

Interfaz Recuerdos

Interfaz Música

Interfaz Juegos: Recuerdos

Interfaz Juegos: Música

Prototipo Final

Registro

Familiar


Música

Reproducción


Juego


Recuerdo

Album


Juego


Editar información




Link Interactivo

1. Usuario nuevo / Registro

https://xd.adobe.com/view/8de19f19-8928-4f26-512f-79b48a1bfec8-fbd0/?hints=off

2. Usuario ya registrado / Inicio de sesión

https://xd.adobe.com/view/181ffd07-a694-433e-5e93-9143dfeed0d4-6e2e/screen/11e31663-6c14-47c5-bfcc-035aa676ac58/iPhone-6-7-8-42?hints=off


Video

  • Registro / Usuario nuevo


  • Familiar / Usuario ya registrado

Video

  • Storyboard/Animatic

  • MemorApp - Ustedes son mi memoria [Actualizado 12/07]

Fundamento Gráfico

Log In

"MemorApp". La palabra memoria viene del latín memoria. formada a partir del adjetivo memor (el que recuerda), y el sufijo -ia usado para crear sustantivos abstractos, y que también dio el verbo memorare (recordar, almacenar en la mente). (diccionario.cvirtual.org)

Al ingresar a la aplicación la primera pantalla da cuenta de la identidad de esta a través del nombre y del logo, este último centrado, con colores correspondientes a las paletas de azul y morado, de este mismo color se ubica el nombre arriba del logo en tipografía Helvetica Condensed Black. Para construir un horizonte de lectura que haga que ojo vaya hacia el nombre de la aplicación, se construye desde el vacío fragmentos de opacidades geométricas al inicio de la pantalla. En la parte baja de la pantalla se ubica un botón rectangular con los bordes redondeados de relleno blanco con una línea de borde delgada de 2 pt de un color gris oscuro. A este se le agrega una sombra del mismo color gris para hacer aparecer la cualidad de ser apretable, que se entienda que al ubicar el dedo ahí ocurrirá algo. Las letras que se encontrarán dentro de los botones de la aplicación estarán en una tipografía Helvetica Bold en un tamaño de 35 pts, ya que debe ser legible con la menor dificultad posible, pensando en un usuario de tercera o cuarta edad.


200x


Iconografía

1. Logo: Se piensa en la ilustración de un cerebro ya que esta aplicación ayuda a la ejercitación de la memoria, mediante estímulos audiovisuales. Se abstrae la imagen real de un cerebro, visto desde arriba, en plano, se divide en distintas fracciones debido a las diversas funciones y componentes que este tiene, esta se hace visible con las distintas partes de colores, siempre dentro de una misma escala de azules y morados ya que a pesar de que son distintas funciones son parte de un todo. La gráfica de los puntos unidos con líneas hace alusión a esta conexión, como las neuronas al hacer sinápsis, la intención de la aplicación es que el usuario se conecte con partes del cerebro, recuerdos, que por sí solos no vuelven, pero si es posible a través de los estímulos. Según la etimología de la palabra, recordar viene del latín "recordari", formado de re ("de nuevo") y cordis ("corazón"). Recordar, entonces, significa "volver a pasar por el corazón".



2. Gráfica de bienvenida: La ilustración que acompaña al texto que le da la bienvenida al usuario hace alusión a lo dicho anteriormente, el objetivo de la aplicación, es que mediante las fotografías y la música afloran recuerdos que ayuden a la ejercitación de la memoria.

Texto: Bienvenido a MemorApp una aplicación que te ayudará a construir tu memoria a partir de tus recuerdos


3. Géneros de música: Para agregarle a la elección de los géneros musicales una dimensión lúdica, hacer la lectura de las opciones más rápida y fácil, y ayudar al usuario a entender de lo que se trata el género mediante un lenguaje visual, se agrega una iconografía representativa a cada género en la pantalla. Los botones son cuadrados, con relleno gris claro y borde delgado en gris oscuro; la tipografía y los íconos en un tono azul. Al seleccionar tu gusto musical, los contornos del botón se tornan verdes, para hacer entender al usuario que ya ha hecho una selección y si quiere cambiarla puede hacerlo.


4. Usuario: En caso de que el usuario no quiera agregar una foto a su perfil, puede omitir este paso y esta es la imagen que reemplazará a la foto en la miniatura que aparece en la parte de arriba de la pantalla al momento de navegar.


Familiares

Se considera la posibilidad de la carencia o falta de accesibilidad de los usuarios a los archivos de fotografías y de música en formato digital, es por esto que se decide incorporar una dimensión que incorpore a la familia del usuario, donde estos puedan acceder, a través del ingreso del número telefónico, a la cuenta de éste y poder agregar recuerdos. Estas fotografías pueden ser archivos antiguos escaneados o fotografías actuales, incluso capturadas en el mismo momento que se desea subir. Además está la opción de agregar una nota o mensaje de voz a la fotografía, contando qué sucede en la foto.


Música

En cuanto al reproductor de música, el menú se divide en tres partes: la lista de tu selección de canciones favoritas, la opción de explorar donde recorres épocas escuchando los álbumes pertenecientes a estas, y la opción del juego.

La gráfica del reproductor se diseña pensando en los reproductores de música que usaban los usuarios en tiempos pasados:

  • Las portadas de los álbumes en formato cuadrado, pasando uno después del otro, dejando visible cual venía antes y cual viene después.
  • Al reproducir una canción hay una ilustración de un toca disco desde una vista de arriba, con el diseño del álbum perteneciente al medio
  • Los botones de back, play, pause, y foward; se construyen con sombras y opacidades para hacer aparecer una cierta profundidad gráfica en la pantalla, haciendo alusión a los botones de los reproductores antiguos.


Al presionar un botón al lado del vinilo en reproducción aparece un archivo histórico mientras se reproduce la canción, que esté vinculado con la época de ésta, y con el mismo botón en la misma ubicación se vuelve al vinilo en reproducción. también el título de la canción y del artista, se transforma en el título de la fotografía una vez que aparece.



Iconografía



Juego

Con el objetivo de agregar una dimensión lúdica y a la vez ejercitar la memoria, se crea una especie de trivia donde se le realizan al usuario preguntas sobre la música que ha escuchado. Se presentan tres alternativas por pregunta.

  • En el caso de acertar la pregunta, en este caso la alternativa se tornará de color verde.
  • En el caso de errar al responder, la alternativa que el usuario seleccionó se tornará roja, y la alternativa correcta se tornará azul, señalando cual era la que debía haber marcado.


Las preguntas que aparecen en la pantalla están en la tipografía Helvética Neue Bold en un tamaño de 30 pts, y centradas. Los botones se encuentran en Helvética Neue Regular en 30 pts también.


Recuerdos

La opción de "Recuerdos" permite al usuario acceder a un álbum de fotos interactivo donde puede ver fotografías tanto del pasado como de la actualidad, ambas pueden también tener una descripción escrita que indica fecha, lugar y personas que forman parte de la imagen. Además tanto familiares como los mismos usuarios podrán agregar notas de voz para complementar la historia que cada recuerdo tiene, también pueden ser eliminadas en caso de que el usuario quisiera, de esta forma se estimula aun más el cerebro, el lugar de la memoria, ya que no sólo los ojos están viendo una parte de su vida, sino que sus oídos también escuchan lo que tienen que decir las fotografías.

La gráfica de las páginas trata de asimilarse a los albumes antiguos de fotografías, de un formato cuadrado y con las esquinas cortadas de forma recta y diagonal, además la superficie donde se posa la foto es de un color más bien ahuesado, no blanco.

La opción para que el usuario grabe una nota de voz esta representada por el botón "record", ya que muchos entienden mejor con este símbolo que con el micrófono al que estamos acostumbrados a ver. Una barra con un punto celeste hace visual cuanto has escuchado de la nota de voz y cuánto te queda por escuchar, además de el contador de segundos a los dos extremos de la barra.

Al eliminar una nota aparece un mensaje en medio de la pantalla, sobre un rectángulo con bordes redondeados difuminado que tiende al blanco, para hacer contraste con la letra en gris oscuro, enHelvética Neue Regular en 30 pts, y con la opción de "Cancelar" y "Ok" en la misma tipografía y tamaño pero en versión Bold.



Iconografía



Editar información y Barra de Identidad

Al navegar por la aplicación hay una barra de identidad que siempre esta presente en la parte de arriba de la pantalla, que te da la opción de vol ver a atrás, de ir al menú principal (Música/Recuerdos), y que contiene una miniatura de tu foto de perfil (en el caso de que el usuario haya agregado una) acompañada del nombre del usuario. En la opción de editar tu información, puedes cambiar tu foto de perfil, apretando el botón de agregar


Prototipo Final

Registro

Familiar


Música

Reproducción


Juego


Recuerdo

Album


Juego


Editar información


Grafica final.png

Video

Navegación Interfaces


Escenario y Contexto de Uso



Link Interactivo

https://xd.adobe.com/view/dd02528c-542f-4a27-618a-0e5011ecbb33-ab33/?hints=off



Gama de colores

Teclas:

  • #FFFFFF
  • #3BD640
  • #F22424
  • #53AFF3

Border:

  • #707070

Fondo:

  • #F4EDE9
  • #A6C9E3
  • #BE4841
  • #D59584

Sub-Menu

  • #CED9F6
  • #BBE2F4
  • #FBD2CA
  • #FEE3B1
  • #E7FCA1

Tipografías

  • Helvetica Bold
  • Helvetica Regular
  • Helvetica Condense Bold

Programas

  • Adobe illustrator CC 2018
  • Adobe Photoshop CC 2018
  • Adobe Xd CC 2018
  • Adobe Animate CC 2017
  • Draw.io Diagrams


Captura de pantalla 2018-07-10 a la(s) 10.11.05.png

Presentación


https://docs.google.com/presentation/d/e/2PACX-1vRVv0m27BBXyoPkKbN3JNVPa9gM24ufRBOPEf96D6sCx4cSjjPVx8vhoMuwxK7Dt_UQgL3oxZIIHnGI/pub?start=true&loop=true&delayms=5000