Publicado por

Propuesta de aplicación de interacción

Publicado por

Propuesta de aplicación de interacción

  En esta entrada se realiza el diseño de interacción de una aplicación de videocomunicación. El contexto escogido ha sido el de…
  En esta entrada se realiza el diseño de interacción de una aplicación de videocomunicación. El contexto escogido ha…

 

En esta entrada se realiza el diseño de interacción de una aplicación de videocomunicación.

El contexto escogido ha sido el de la interacción entre miembros de un mismo equipo que se comunican mediante videoconferencias durante el trabajo en remoto. Se ha escogido este contexto por la relevancia que ha tenido durante la crisis sanitaria de la covid hace dos años. Esta modalidad de comunicación irrumpió con fuerza en el mercado laboral y gracias a la transformación digital sigue estando en auge. Por estos motivos, resulta muy interesante realizar una propuesta de diseño que mejore los aspectos clave que mueven la interacción en este tipo de comunicación.

Más concretamente, la propuesta se centra en las daily stand-ups que habitualmente realizan los equipos orientados al desarrollo software. Las stand-ups son una técnica del desarrollo ágil que consiste en una reunión breve diaria para mantener a todos los miembros del equipo al tanto del progreso y planificar el trabajo del día.

Para analizar las ventajas y los inconvenientes de las stand-up, se distribuyó un cuestionario que fue completado por 57 personas que trabajan en empresas dedicadas al desarrollo de software. Tras examinar los resultados obtenidos, se detectó que los problemas de atención eran considerados los más molestos, sólo por detrás de los problemas de conexión a la red.

Por este motivo, la propuesta se centra en una herramienta de videollamada que ofrece al emisor la oportunidad de obtener retroalimentación sobre el estado emocional y el nivel de atención de los receptores.

Cuando un miembro del equipo esté compartiendo su actualización diaria con los demás y tenga el micrófono activado, tendrá a su disposición la opción Feedback en el menú en modalidad administración. Podrá activarlo o desactivarlo en cualquier momento y configurarlo en modo anónimo o visible.

Si lo activa, las personas que lo están escuchando tendrán a su disposición la opción Feedback en el menú en modalidad receptor. A través de esa opción, podrán escoger entre los emoticonos disponibles aquel que mejor refleje su estado de ánimo y su nivel de atención. Los emoticonos están acompañados de una etiqueta que facilite su comprensión.

Cuando el usuario selecciona un emoticono, este desaparecerá mediante una transición suave en dirección vertical y en su lugar el usuario verá un check verde que le confirmará que su feedback ha sido enviado correctamente al emisor. Por ejemplo, imaginemos que Fran se está aburriendo porque el tono es muy monótono y decide enviar el emoticono “Aburrido”.

Si el emisor ha activado el feedback en modalidad anónima, recibirá el emoticono en la esquina inferior izquierda junto al texto “Alguien está aburrido”. Si por el contrario está utilizando la modalidad visible, recibirá el mensaje “Fran está aburrido”. Es importante destacar que el emisor es la única persona que recibe el feedback, protegiendo así la intimidad de todos los involucrados.

Gracias a esta funcionalidad, es más probable que el receptor exprese su estado de ánimo al receptor y que el emisor adapte la manera en la que está comunicando de manera que todo el mundo le preste atención. Es importante destacar que es una opción poco invasiva, ya que el usuario no tiene que interrumpir a los demás ni admitir delante de todos los participantes que, por ejemplo, no entiende el argumento del que se está hablando.

 

Debate0en Propuesta de aplicación de interacción

No hay comentarios.

Publicado por

Diseño especulativo

Publicado por

Diseño especulativo

  El diseño especulativo es una aproximación al diseño que se centra principalmente en plantear preguntas y crear escenarios futuros que provoquen…
  El diseño especulativo es una aproximación al diseño que se centra principalmente en plantear preguntas y crear escenarios…

 

El diseño especulativo es una aproximación al diseño que se centra principalmente en plantear preguntas y crear escenarios futuros que provoquen debate, reflexión y pensamiento crítico en torno al impacto de las cosas en la vida de las personas. En esta entrada se propone un diseño especulativo centrado en la interacción no verbal entre personas.

Amilumi

Una vela para pensar en los tuyos

En un mundo cada vez más globalizado, la inmigración crece a la par que lo hace el aislamiento.

Muchas veces pensamos en nuestros amigos pero no tenemos el tiempo de llamarles o no tenemos mucho que decir. Aún así, nos gustaría que supieran que nos acordamos de ellos.

Amilumi es una vela digital que busca acercar a las personas. Gracias a
ella, cuando el usuario piense en uno de sus amigos puede seleccionarlo
a través de la interfaz holográfica y soplar la vela para encender la suya y la de su amigo.

Si está disponible, la vela de su amigo se encenderá y mostrará el
holograma del usuario, conectando a las dos personas. Cualquiera de los dos puede soplar en su vela para finalizar la interacción en cualquier
momento. Cuando esto sucede, las velas se apagan. Si su amigo no está disponible, la vela del usuario se apagará.

Gracias a los sensores de movimiento en la base y en la propia vela, el
usuario puede realizar gestos para enviar órdenes al sistema. La
interacción es de estilo gesture para aprovechar la affordance de la vela,
con una forma alargada que incita al usuario a agarrarla para levantarla.

Por este mismo motivo, cuando el usuario tiene que introducir el código de su amigo para añadirlo utilizará la vela para escribir en el aire. Esta es una acción a la que el usuario está acostumbrado y que resulta fácil debido a la similitud de la forma de la vela con un lápiz. De esta manera, se puede prescindir de añadir un teclado.

Mapa de interacción:

Debate0en Diseño especulativo

No hay comentarios.

Publicado por

Value Proposition Canvas

Publicado por

Value Proposition Canvas

Esta entrada muestra un Value Proposition Canvas que analiza los aspectos clave de la interacción en la comunicación mediada por pantallas. Más…
Esta entrada muestra un Value Proposition Canvas que analiza los aspectos clave de la interacción en la comunicación mediada…

Esta entrada muestra un Value Proposition Canvas que analiza los aspectos clave de la interacción en la comunicación mediada por pantallas.

Más concretamente, se pretende entender mejor la interacción que se da entre miembros de un mismo equipo que se comunican mediante videoconferencias en el contexto del trabajo remoto.

Se ha escogido este contexto por la relevancia que ha tenido durante la crisis sanitaria de la covid hace dos años. Esta modalidad de comunicación irrumpió con fuerza en el mercado laboral y gracias a la transformación digital sigue estando en auge. Por estos motivos, resulta muy interesante estudiar cuáles son los aspectos claves que mueven la interacción en este tipo de comunicación.

Para ello, se ha llevado a cabo un cuestionario de 14 preguntas a un total de 57 usuarios y, seguidamente, se ha realizado un benchmarking de las 4 aplicaciones de videoconferencias más utilizadas por las personas entrevistadas.

 

Debate0en Value Proposition Canvas

No hay comentarios.

Publicado por

Realización de un prototipo de baja fidelidad

Publicado por

Realización de un prototipo de baja fidelidad

Un prototipo es una herramienta que permite diseñar los aspectos funcionales y estructurales y la apariencia que tiene un producto o servicio.…
Un prototipo es una herramienta que permite diseñar los aspectos funcionales y estructurales y la apariencia que tiene un…

Un prototipo es una herramienta que permite diseñar los aspectos funcionales y estructurales y la apariencia que tiene un producto o servicio. En el diseño de interacción de páginas web o aplicaciones móviles, los wireframes nos sirven para representar la estructura de interacción del producto.

Esta entrada tiene como objetivo compartir un ejemplo de prototipo de baja fidelidad. En este caso, he realizado un wireframe de una página del medio de comunicación Il Sole 24 Ore. Más concretamente, se ha escogido la página de noticias en tiempo real para representar su estructura y organización.

Sobre el periódico

Il Sole 24 Ore es un diario milanés fundado en 1865 que adopta una línea liberal y reformista. Es considerado el periódico en circulación más antiguo de Milán y uno de los primeros de los grandes periódicos económicos europeos.

Fue capaz de importar un modelo de información especializada que ya había dado lugar a numerosas publicaciones en el extranjero.

En los últimos años, se ha producido la creación de un sistema multimedia integral que ha contribuido a mejorar la forma de informar y comunicar a través de una amplia gama de elementos de contenido temático de alto perfil.

Prototipado

Para realizar el wireframe he utilizado Figma, por lo que es posible consultarlo en la misma plataforma a través de este link.

Como referencia, he utilizado la página web del periódico. Para ilustrar de una manera sencilla las similitudes entre el wireframe y el producto real, he añadido en esta entrada una captura de pantalla de la página.

Es importante mencionar algunas diferencias principales:

  • El wireframe no tiene en consideración los márgenes utilizados para mostrar publicidad. Esto se debe a que la publicidad no estaba presente cuando se realizó.
  • El wireframe utiliza una tipografía diferente.
  • El wireframe está realizado en castellano. Ya que esta entrada forma parte de una práctica que será evaluada en el Máster universitario de diseño de interacción y UX, se ha utilizado la lengua castellana para facilitar la evaluación del trabajo realizado.
  • La sección de anuncios personalizados es ligeramente diferente. Esto se debe a que es una sección proporcionada por terceras parte que puede contener 4 o 2 anuncios por fila.
Página de noticias en tiempo real del períodico
Página de noticias en tiempo real usada como referencia
Wireframe de la página de noticias en tiempo real
Wireframe de la página de noticias en tiempo real

Debate0en Realización de un prototipo de baja fidelidad

No hay comentarios.

Publicado por

Mapa de experiencia

Publicado por

Mapa de experiencia

La primera actividad de la asignatura de Diseño de Interacción consistió en realizar un mapa de experiencia de una actividad interactiva de…
La primera actividad de la asignatura de Diseño de Interacción consistió en realizar un mapa de experiencia de una…

La primera actividad de la asignatura de Diseño de Interacción consistió en realizar un mapa de experiencia de una actividad interactiva de mi entorno cercano.

Para ello, el primer paso fue elegir y delimitar uno de mis recorridos habituales. Es importante mencionar que para la realización de esta práctica yo misma adquirí  el rol de investigador y el rol de usuario. Es relevante mencionarlo puesto que en una situación normal tendríamos dos personas que participan en la observación.

Preparación a la recogida de datos

La preparación de la observación contextual consistió en:

  • Definición del alcance: se pretende entender la experiencia de un usuario que compra un billete de tren en la estación varias veces al mes para desplazarse a la oficina de la empresa en la que trabaja. En cuanto al presupuesto, hay que tener en cuenta que será necesario adquirir al menos un billete de tren con un coste aproximado de 8 euros.
  • Identificación de los usuarios: si bien idealmente la observación se tendría que basar en al menos cinco usuarios de cada grupo representativo, en este caso se realizó basándose en el recorrido de un único usuario.
  • Planificación de la sesión: ya que el proyecto consiste en observar una tarea específica, el usuario ha determinado que normalmente suele tardar 20 minutos en realizar la tarea. Por este motivo, se reservan 20 minutos para llevar a cabo la sesión en un horario y día que convengan al usuario.
  • Establecimiento de un modelo de observación: se adopta un modelo de observación pasiva en el que se actúa como si no estuviese presente un investigador, intentando alterar al mínimo las condiciones habituales.

Observación contextual

Durante la observación contextual, se han identificado tres etapas diferentes.

Fases iniciales

Es necesario mencionar que este recorrido tiene lugar después de una fase previa en la que el usuario decide ir a otra ciudad, empieza a preguntarse cómo puede conseguirlo, busca las opciones de las que dispone y llega hasta la estación.

2. Espera

 

Gente haciendo cola en una máquina de venta automática de billetes, un reloj y un cartel indicando zonas de espera
Cartel, reloj y cola con los que el usuario interacciona.

El objetivo del usuario es averiguar dónde comprar el billete de tren y esperar a que sea su turno.

Sabe hacerlo porque no es la primera vez que acude a esa estación. En el pasado, otras personas le han explicado cuáles son los puntos de venta.

Por este motivo, es consciente de que tiene dos opciones: utilizar las máquinas autoventa o acudir a una taquilla. Además, sabe que existen taquillas en las que se venden exclusivamente billetes para trenes con salida inmediata.

Para escoger que opción utilizar, observa cuántas personas están esperando para utilizar cada método y estima cuánto tiempo le llevaría comprar el billete. Después, compara esta medida con el tiempo que falta para que llegue el tren y el que necesita para llegar hasta él.

Empieza dirigéndose a las máquinas autoventa, ya que normalmente suele ser la opción más rápida. Sin embargo, debido a la larga cola decide dirigirse a las taquillas de salida inmediata. Allí se encuentra con un cartel que establece dos zonas de espera, esto se trata de una anormalidad en su recorrido habitual.

El cartel establece una zona de espera que parece estar relacionada con abonos y una zona diferente para gente que quiere un billete sencillo. Como el usuario no dispone de un abono, se dirige a la segunda zona.

Durante esta primera fase el usuario experimenta anticipación, preocupación y confusión. Ha llegado a la estación con el tiempo justo, por lo que esta novedad en las zonas de espera lo ha confundido. Le preocupa haber entendido mal el cartel y no ser capaz de comprar el billete y llegar al tren a tiempo.

Podríamos clasificar este modelo conceptual de interacción dentro del exploring, ya que el cartel proporciona información estructurada que permite al usuario aprender sin tener que formular necesariamente ninguna consulta explícita. Si nos centramos en el estilo de interacción se puede considerar como un estilo de graphical user interface, ya que el usuario interactúa visualmente.

2. Compra

Taquillera con la que el usuario interacciona.

En esta fase el objetivo del usuario es comprar un billete simple que se ajuste a sus necesidades.

Sabe cómo hacerlo ya que en el pasado ha utilizado el servicio más veces. Para aprender a hacerlo, ha ido acompañado de personas algunas veces y otras le ha preguntado al propio taquillero.

Para comprar el billete le indica al taquillero el trayecto que quiere realizar y a qué hora. El taquillero le pregunta si quiere adquirir también el billete de vuelta ya que el precio total es más económico si se compran juntos.

Esto causa una pequeña duda en el usuario, que finalmente se decide por no comprarlo pues el ahorro es pequeño y no quiere comprometerse a respetar un horario de vuelta concreto.

Además, el taquillero piensa en el bien del usuario y le pregunta si dispone de algún descuento. El usuario pregunta qué tipo de descuentos hay disponibles y admite no tener derecho a ninguna reducción de precio por lo que confirma la compra de un billete simple de sólo ida por el coste total.

En esta fase, el usuario se siente tranquilo y dudoso. Las diferentes opciones de compra le hacen valorar un posible cambio en su plan de vuelta, por lo que experimenta alguna duda. En general, empieza a sentirse más confiado y tranquilo sobre el horario, cree que tiene suficiente tiempo para coger el tren.

Podríamos clasificar este modelo conceptual de interacción dentro del conversing, ya que se establece una conversación interactiva entre la taquillera y el usuario. Si nos centramos en el estilo de interacción se puede considerar como un estilo de speech, ya que el usuario interactúa con su voz.

3. Pago

Datáfono y teléfono móvil objetos de la interacción.

El objetivo del usuario es pagar el precio del billete que ha escogido utilizando un datáfono.

Sabe hacerlo porque es una actividad que realiza casi diariamente. Además, igual que en las fases anteriores, en el pasado ha tenido cerca a personas que le han explicado cómo funciona un datáfono.

Para ello, le pregunta a la taquillera si es posible pagar con la tarjeta de cŕedito. Ante la respuesta positiva, observa dónde se encuentra el datáfono y coge su teléfono móvil.

Espera a esuchar un breve pitido y a ver en la pantalla del datáfono el precio a pagar. Mientras tanto, desbloquea el teléfono empleando desbloqueo biométrico mediante detección facial y selecciona la tarjeta pulsando dos veces el botón derecho del dispositivo. Para pagar acerca el dispositivo al datáfono y espera a sentir la vibración de su teléfono para saber que la operación se ha realizado correctamente.

El usuario se siente seguro y calmo. Está acostumbrado a utilizar esta forma de pago y se siente seguro haciéndolo. Además, ahora que ya tiene su billete siente la certeza de que será capaz de coger el tren a tiempo.

Podríamos clasificar este modelo conceptual de interacción dentro del manipulating, ya que el usuario manipula el datáfono y el teléfono para realizar el pago. Si nos centramos en el estilo de interacción se puede considerar como un estilo híbrido que contiene elementos de graphical user interface y de touch, ya que el usuario interactúa sea visualmente que con sus dedos.

Fases finales

Después de comprar el billete de tren, el usuario tendrá que consultar pantallas LED para llegar a la vía correcta, subirse al tren y buscar su asiento, sentarse, disfrutar del viaje y llegar a su destino.

Otras datos recogidos

 

Debate0en Mapa de experiencia

No hay comentarios.

Publicado por

¡Interaccionamos sin parar!

Publicado por

¡Interaccionamos sin parar!

Este mes he decidido volver al agua. Hace unos años iba a la piscina todas las semanas pero con el tiempo lo…
Este mes he decidido volver al agua. Hace unos años iba a la piscina todas las semanas pero con…

Este mes he decidido volver al agua. Hace unos años iba a la piscina todas las semanas pero con el tiempo lo he ido dejando de lado… ¡Hasta ahora! Volver a ir a la piscina ha sido una buena ocasión para darme cuenta de cómo interaccionamos sin parar con el entorno que nos rodea, ya sean interfaces fáciles de usar o complicadas.

Puerta de cristal con dos manillas iguales a ambos lados
Puerta con un diseño confuso.

Por ejemplo, la entrada de la piscina me parece un ejemplo perfecto del tipo de interfaz que considero difícil. Cuando quiero entrar en el edificio, suelo pensar que puedo utilizar cualquiera de las dos puertas. En realidad, la única forma de hacerlo es empujando la puerta de la izquierda. Es muy común ver a otros usuarios equivocarse al intentar utilizar la puerta derecha, por lo que creo que se podría considerar una puerta de Norman -una puerta confusa y díficil de usar.

Reloj con una interfaz muy intuitiva y sencilla.

Por el contrario, la interfaz del reloj que utilizo en el agua me parece muy sencilla. De hecho, llevaba sin utilizarlo varios años pero no ha sido necesario desempolvar el manual para volver a ponerlo en hora. Tiene sólo cuatro botones acompañados de símbolos que ayudan a entender la función de cada uno y, además, no tiene características complejas sino que se centra en resolver un problema de una manera simple.

Debate0en ¡Interaccionamos sin parar!

No hay comentarios.