Publicado por

PEC 5: Diseño de interacción: Videocomunicación

PEC 5: Diseño de interacción: Videocomunicación
Publicado por

PEC 5: Diseño de interacción: Videocomunicación

Storyboard de las secuencias de interacción de la app. En el siguiente Storyboard se han representado las diferentes pantallas e interacciones de…
Storyboard de las secuencias de interacción de la app. En el siguiente Storyboard se han representado las diferentes pantallas…

Storyboard de las secuencias de interacción de la app.

En el siguiente Storyboard se han representado las diferentes pantallas e interacciones de Laura, una usuaria que pasa sus primeras navidades lejos de su casa y utiliza la a plicación para comunicarse con sus padres, que ya son mayores, y planificar la siguiente videollamada en un futuro próximo.

 

(Selecciona la imagen para verla a pantalla completa.)

Sketching básico de la app de videocomunicación.

Tras realizar el storyboard, se ha desarrollado un Sketch o boceto de la aplicación de videollamadas teniendo en cuenta los principios de diseño y la información obtenida en el Benchmarking y el Value Proposition Canvas.

Con este boceto se pretende crear un primer diseño centrado en la interacción mostrada en el Storyboard anterior y así dar respuesta a las necesidades de los usuarios.

(Selecciona la imagen para verla a pantalla completa.)

 

 

Debate0en PEC 5: Diseño de interacción: Videocomunicación

No hay comentarios.

Publicado por

PEC 4 · Diseño especulativo: Paradigmas de interacción

PEC 4 · Diseño especulativo: Paradigmas de interacción
Publicado por

PEC 4 · Diseño especulativo: Paradigmas de interacción

Diseño especulativo: Paradigmas de interacción En un mundo en el que cada vez nos sentimos más solos a pensar de estar siempre…
Diseño especulativo: Paradigmas de interacción En un mundo en el que cada vez nos sentimos más solos a pensar…

Diseño especulativo: Paradigmas de interacción

En un mundo en el que cada vez nos sentimos más solos a pensar de estar siempre conectados, a veces simplemente necesitamos escuchar una voz conocida para poder seguir con nuestro día a día. 

De este sentimiento nace Ouso, una palabra compuesta por dos, Our y Sound (nuestro sonido).

Ouso es un recipiente de sonidos conocidos, que guarda notas de voz de aquellos a los que más echas de menos, para llevar a los que más queremos con nosotros y escuchar su voz siempre que lo necesitemos aunque no estén allí. 

Con capacidad de memoria de hasta 10 usuarios, Ouso detecta tu huella y solo muestra tu contenido; porque tú eres el dueño de tus recuerdos. 

Utiliza el dispositivo en 5 sencillos pasos:

  • Para activar Ouso solamente tienes que tocar los escáneres de huella dactilar.
  • Una vez que el sistema te reconozca debes decirle qué recuerdo quieres escuchar.
  • Cuando encuentre el recuerdo, te indicará que es el momento de acercar el dispositivo al oído.
  • Tras detectar tu oído podrás comenzar a escuchar el recuerdo que has seleccionado.
  • Para subir o bajar el volúmen del sonido solo tienes que girar la rueda y adaptarlo a tus preferencias.

Con Ouso sentirás cerca a todos aquellos que están lejos.

Debate0en PEC 4 · Diseño especulativo: Paradigmas de interacción

No hay comentarios.

Publicado por

PEC 3 · Value Proposition Canvas

PEC 3 · Value Proposition Canvas
Publicado por

PEC 3 · Value Proposition Canvas

  VALUE PROPOSITION CANVAS M4.350- Diseño Int: procesos, métodos y técnicas Para esta PEC se nos ha pedido realizar un estudio acerca…
  VALUE PROPOSITION CANVAS M4.350- Diseño Int: procesos, métodos y técnicas Para esta PEC se nos ha pedido realizar…

 

VALUE PROPOSITION CANVAS

M4.350- Diseño Int: procesos, métodos y técnicas

Para esta PEC se nos ha pedido realizar un estudio acerca de las herramientas o aplicaciones de videoconferencia escogiendo un contexto en particular.
En este caso, el contexto escogido es el de videoconferencias de ocio que se realizan con familiares y amigos. Actualmente estamos todos conectados y tenemos familiares y amigos que no viven cerca de nosotros y a los que en ocasiones, no vemos tanto como nos gustaría. Gracias a las videollamadas podemos sentir a estas personas más cerca y mantener relaciones de mayor calidad.

En el Value Proposition Canvas que se muestra a continuación se han recopilado los datos de opiniones de usuarios de videollamadas de ocio, junto con el estudio de ciertas aplicaciones o herramientas que más se utilizan con el mismo fin.

Value Proposition Canvas
Value Proposition Canvas videollamadas de ocio

Gracias a la realización de este canvas se han podido identificar los siguientes elementos a mejorar de los productos actuales con objetivo de dotarle al usuario de una mejor experiencia de videocomunicación:

  • Crear una interfaz lo más sencilla y parecida posible al de las llamadas telefónicas facilitando el uso acorde a los modelos mentales del usuario.
  • Mejorar el tamaño y el contraste de los botones ya que muchas de las videollamadas se realizan con o por personas mayores.
  • Poder ver nuestra imagen y qué usuarios están ya dentro de la videollamada cuando tengamos una invitación grupal o individual.
  • Incluir la opción de disminución de calidad de vídeo cuando el usuario no tenga datos suficientes para una experiencia de video óptima.
  • Tener la posibilidad de poner en pausa o cerrar el resto de actividades o aplicaciones abiertas en el dispositivo móvil, en el caso de las videollamadas telefónicas a través de datos móviles, para obtener una mejor calidad en la videollamada.
  • Avisar al usuario del tiempo restante de videollamada teniendo en cuenta la bateria del dispositivo desde el que se está realizando.
  • Aumentar las opciones de subtítulos a tiempo real para incluir a personas que experimenten dificultades auditivas.

 

Debate0en PEC 3 · Value Proposition Canvas

No hay comentarios.

Publicado por

PEC2 – Wireframe periódico digital EL PAÍS

PEC2 – Wireframe periódico digital EL PAÍS
Publicado por

PEC2 – Wireframe periódico digital EL PAÍS

  PEC 2 – 3ª parte. Wireframe de una página M4.350- Diseño Int: procesos, métodos y técnicas   Para la realización de esta…
  PEC 2 – 3ª parte. Wireframe de una página M4.350- Diseño Int: procesos, métodos y técnicas   Para la…

 

PEC 2 – 3ª parte. Wireframe de una página

M4.350- Diseño Int: procesos, métodos y técnicas

 

Para la realización de esta práctica he decidido escoger el periódico  , del que soy usuaria en sus versiones digital y de aplicación móvil.

El siguiente wireframe, en versión low fidelity, nos sirve para representar la estructura de interacción de este periódico en su versión digital para web. Para esta representación se ha escogido pa pagina o sección principal del periódico visualizado en un escritorio de 23″, aunque a partir de los 1200px de ancho, la estructura es la misma, ya que sigue un diseño responsive de 12 columnas adaptable al visualizador del usuario.

El diseño se ha realizado con la herramienta de edición y generación de prototipos Figma.

Wireframe periódico digital EL PAIS
Wireframe periódico digital EL PAÍS en su versión de escritorio

Añado también una imagen comparativa con la versión real del periódico digital (derecha) , junto al wireframe de la versión de baja fidelidad (izquierda).

Comparación wireframe y versión digital del periódico EL PAÍS
Comparación wireframe y versión digital del periódico EL PAÍS

 

 

Debate0en PEC2 – Wireframe periódico digital EL PAÍS

No hay comentarios.

Publicado por

PEC 1 : Recorrido habitual

PEC 1 : Recorrido habitual
Publicado por

PEC 1 : Recorrido habitual

Ruta : Domicilio ➡️ Gimnasio ➡️ Bicicleta spinning He decidido seleccionar un recorrido menos habitual de lo que me gustaría, que trata…
Ruta : Domicilio ➡️ Gimnasio ➡️ Bicicleta spinning He decidido seleccionar un recorrido menos habitual de lo que me…

Ruta : Domicilio ➡️ Gimnasio ➡️ Bicicleta spinning

He decidido seleccionar un recorrido menos habitual de lo que me gustaría, que trata de ir desde mi domicilio hasta el gimnasio y utilizar una bicicleta de ciclo indoor o spinning.
El horario habitual de este recorrido es a las 7:30 a.m con una repetición de 2 a 3 días por semana.

1. Saliendo de mi domicilio

Comienzo mi recorrido abriendo la puerta de mi vivienda para poder salir de ella. 
Se trata de una puerta antigua de madera con tres cerraduras. Cada cerradura tiene un tipo de cierre distinto y debo abrir las dos primeras y mantener pulsada la tercera para poder salir por la puerta.
La secuencia es la siguiente:

  1. Mantengo pulsado el botón con una mano y deslizo el metal con la otra ( en el vídeo lo hago con una mano, pero normalmente utilizo las dos ).
  2. Desbloqueo la cerradura central con un movimiento de giro.
  3. Empujo la parte metálica hacia la izquierda.
  4. Abro la puerta mientras mantengo pulsada la parte metálica de la última cerradura.

 

¿Cómo lo hago? ¿Cómo lo siento? ¿Cómo lo conozco?
Abro las dos primeras cerraduras y mantengo pulsada la tercera. La primera cerradura se hace muy complicada de manipular con una sola mano, y la tercera termina molestando a la hora de aguantar y tirar para que se abra la puerta. Tras mucho tiempo realizando acción ya me sale por repetición, pero las primeras veces, la primera cerradura es dificil de comprender.
Tipo de interacción Estilo de interacción Contexto de interacción
Manipulating Gesture
Touch
Interacción tangible

 

Tras abrir la puerta bajo las escaleras para dirigirme a la puerta principal que da a la calle.
Cabe mencionar que la vivienda está situada en el tercer piso de un edificio del año 1920, sin ascensor, por lo que las escaleras de acceso son muy estrechas y con un ángulo de inclinación más pronunciado de lo habitual.

2. Entrando al gimnasio

Tras abrir la puerta principal del local, con un notable peso, ya que se trata de una puerta de metal y cristal, accedo al interior del gimnasio mediante identificación por huella digital.
Este identificador funciona de la siguiente manera:

  1. En caso de que otro usuario pase antes que yo, debo esperar a éste haya girado el torno por completo y que la pantalla se active para poder utilizarla.
  2. Coloco el dedo índice de la mano derecha en el escaner y espero a que el sistema me verifique el acceso.
  3. Acciono la palanca rotatoria para poder pasar.

Como se puede observar en el vídeo adjunto, este aparato suele dar fallos de identificación, pero tiene una respuesta de reacción bastante rápida y tras volver a comprobar la huella me deja pasar.

¿Cómo lo hago? ¿Cómo lo siento? ¿Cómo lo conozco?
Mantengo el dedo pulgar en el scanner hasta que la pantalla me indica que ha verificado mi huella correctamente. La identificación por huella dactilar suele dar fallos pero como la respuesta es rápida no siento que haya perdido el tiempo esperando. El primer día que acudí al gimnasio un monitor me explicó como era el proceso para acceder. Desde el primer día el proceso ha sido siempre el mismo.
Tipo de interacción Estilo de interacción Contexto de interacción
Conversing
Manipulating
Gesture
Touch
Interacción tangible

 

3. Utilizando la taquilla

Una de las normas de este gimnasio es que no se puede acceder con mochilas, por lo que es necesario dejar las pertenencias en una de las taquillas ubicadas en los vestuarios, en mi caso, femeninos.

El mecanismo de acción de la taquilla es el siguiente:

  1. Selecciono la taquilla abierta que quiera utilizar e introduzco mis pertenencias en el interior.
  2. Cierro la puerta girando el accesorio de metal. Este tiene una tuerca de fijación en la parte trasera para bloquear la puerta.
  3. Colocamos mi candado pasándolo por el interior del orificio de metal de la cerradura. Esta acción bloquea la puerta y hace que la cerradura no se pueda girar cuando tiene un candado en el orificio de metal.
  4. Cierro el candado.

¿Cómo lo hago? ¿Cómo lo siento? ¿Cómo lo conozco?
Sigo los pasos 1, 2 ,3 y 4 para asegurarme de que mis pertenencias están a buen resguardo mientras estoy en el gimnasio. Estas taquillas están ubicadas en los vestuarios, junto a las duchas, y las cerraduras son de metal. Lo que hace que muchas de ellas estén corroídas por la humedad y la manipulación se puede llegar a ser bastante desagradable. Es un sistema de cierre de taquilla bastante intuitivo ya que la única opción que tiene el usuairo es girar el pomo y bloquearlo con el candado o de otra forma la taquilla quedará abierta.
Tipo de interacción Estilo de interacción Contexto de interacción
Manipulating Gesture
Touch
Interacción tangible
Memoria
4. Utilizando la bicicleta de spinning

Para acceder a la sala de spinning solo tengo que dirigirme hacia la sala y abrir la puerta, ya que se trata de una zona de acceso libre y nunca está bloqueada.

Una vez en la sala, selecciono la bicicleta de spinning que quiero utilizar y me dispongo a ajustarla a mi estatura para mantener una postura correcta y evitar posibles lesiones.

En esta bicicleta hay dos elementos importantes que debo regular, el sillín y el manillar. Antes de realizar los siguientes pasos siempre debo girar las respectivas palancas para desbloquear el aparato y tras finalizar debo girar la palanca de nuevo en sentido contrario para volver a bloquearla.

  1. Regulo la altura del sillín haciéndolo coincidir con el hueso de mi cadera.
  2. Regulo la profuncidad del sillín.
  3. Modifico la altura del manillar para que coincida más o menos con la altura del sillín.
  4. Regulo la profundidad del manillar midiendo desde el sillín la distancia de mi antebrazo, es decir desde mi codo hasta la punta de mis dedos.
  5. Finalmente me subo a la bicicleta y regulo la resistencia girando la rueda central hacia la derecha si quiero más o hacia la izquierda si quiero menos.

Tardo una media de 1 minuto en realizar los 4 primeros pasos.

¿Cómo lo hago? ¿Cómo lo siento? ¿Cómo lo conozco?
Sigo los pasos 1, 2, 3 y 4 cuidadosamente ya que de ello depende que no tenga lesiones por una mala postura tras realizar el ejercicio. Las palancas siempre están muy duras y suelo hacerme daño al girarlas. Al estar tan apretadas, a veces pienso que me he equivocado de dirección y pruebo en el sentido contrario. Lo que me hace sentir que pierdo bastante tiempo. Las posbiles regulaciones de esta bicicleta indoor las deduzco de las posiciones donde se encuentran las palancas. La primera vez que utilicé una bicicleta de estas características investigué en Youtube cuáles eran las medidas que debían ser reguladas.
Tipo de interacción Estilo de interacción Contexto de interacción
Manipulating Gesture
Touch
Interacción tangible
Memoria

 

Video del recorrido completo:
Vídeo sobre la utilización de la bicicleta de spinning:

Debate0en PEC 1 : Recorrido habitual

No hay comentarios.

Publicado por

¡Interactuando sin parar!

Publicado por

¡Interactuando sin parar!

Ejercicio introductorio de la asignatura de Diseño de Interacción en el que haré un breve análisis de dos interfaces analógicas con las…
Ejercicio introductorio de la asignatura de Diseño de Interacción en el que haré un breve análisis de dos interfaces…

Ejercicio introductorio de la asignatura de Diseño de Interacción en el que haré un breve análisis de dos interfaces analógicas con las que interactúo habitualmente.

Interfaz analógica fácil de usar:  Termo eléctrico

Termo
Termo eléctrico

El producto que he seleccionado por su facilidad de uso es el termo eléctico que está instalado en mi vivienda habitaul. Se trata de un termo de control mecánico que únicamente tiene 2 mandos, uno de encendido y apagado, y otro desde el que cual se puede regular la potencia de temperatura a la que quieres que se caliente el agua.

Entre los controles, consta de dos luces, una de color verde, que indica que el termo ha alcanzado la temperatura a la que hemos seleccionado el agua, y otra de color rojo, que indica que el agua todavía no ha llegado a la temperatura y está en proceso de calentamiento. Lo que hace que de un simple vistazo ya sepas si el agua se encuentra a la temperatura deseada o no.

Complementariamente, en la parte superior del termo, tiene un indicador de temperatura de frío o caliente que ayuda a que el usuario pueda hacerse una idea gráfica de la temperatura a la que está el agua.

La conclusión general es que este termo consta de una interfaz sencilla, intuitiva y facil de utilizar. Este último punto se cumple siempre y cuando el usuario no sea una persona con movilidad reducida en brazos o manos, ya que al tratarse de mecanismos de movimiento en giro con cierta resistencia, suponen una dificultad para estas personas a la hora de manipularlos con facilidad.

 

Interfaz analógica dificil de usar: Control de programa de lavadora

Programa de selección de lavado
Panel de control de lavadora doméstica.

En este caso, como producto analógico con interfaz dificil de usar he seleccionado la lavadora que tenemos en mi vivienda habitual. Generalmente las lavadoras no son productos intuitivos ni fáciles de utilizar,  esto pasa sobre todo con las lavadoras un poco más antiguas que no tienen un panel digital con indicador de temperatura, tiempo de lavado, programa, etc.

Podría hacer un análisis de dificultad de uso de cada parte de la lavadora, porque no son objetos fáciles de utilizar ni mucho menos intuitivos, pero he decidido centrarme únicamente en el apartado de control de programa de lavado.

Ésta ruleta está formada por cinco programas diferentes, tres de ellos indican la temperatura de lavado dependiendo de la composición del material de las prendas, uno indica la duración de los programas cortos y el último tiene dos opciones, enjuagado o centrifugado.

En referencia a los programas, el usuario tiene que adivinar el material del que se tarta, pero suponiendo que nos sabemos el siginificado de los dibujos de cada material, en todos los casos solo obtendremos un dato, o la temperatura del agua, o el tiempo de lavado si lo que hemos seleccionado es uno de los programas de corta duración.  Esto hace que la lavadora sea dificil de entender, ya que durante todo el proceso haya que hacer suposiciones del significado, la duración y las temperaturas de cada programa.

Finalmente, en cuanto a la ruleta en sí misma, podemos observar que tiene marcada cada posición del programa que el usuario podría seleccionar, sin embargo, la única parte de la ruleta que al girarla se ilumina y que realmente indica la posición del programa seleccionado es la más alargada ( en la imagen se encuentra en posición «OFF» ) por lo tanto las otras luces ni se iluminan ni marcan nada en concreto, haciendo de éste un detalle  prescindible.

 

Debate2en ¡Interactuando sin parar!

  1. Virginia Méndez Blanco says:

    Hola Estela! casualmente yo también pensé en la interfaz del termo eléctrico como propuesta, concretamente en el reloj para programar las horas en las que quieres que caliente o no, y que en mi caso considero algo difícil : )

    1. Estela López Martín says:

      Hola Virginia, gracias por tu comentario!

      Efectivamente en el caso de los termos con opción de programación la situación se complica considerablemente porque no suelen ser nada intuitivos y lo normal es que necesites el libro de instrucciones al lado para aprender a programarlos. Pero en mi caso no tengo esa opción, por lo que la interfaz termina resultando muy sencilla.