¡Bienvenidos al último reto de Diseño de Interacción!

Hoy vamos a ver un ejemplo de storyboard y otro de sketching. ¡Al turrón!

Storyboard

El storyboard es una herramienta originalmente usada en el mundo audiovisual, en la que se plantea en formato de viñetas parecidas a las de un cómic, el movimiento visual de la cámara, los actores y atrezzo. Visualmente comprensible y sencilla a nivel de dibujo, no deja de ser una herramienta meramente laboral, sin ningún objetivo artístico más allá del planear unas acciones para que, llegado el momento de grabar, todo el mundo sepa qué hacer y dónde debe estar.

En el mundo del diseño de interacción, el storyobard se usa de una manera análoga, es decir, su fin es plasmar una acción y el resultado que genera. Sin llegar a concretar elementos visuales, de interfaz o cualquier elemento más superficial, hace especial hincapié en las sensaciones y sentimientos que genera en el usuario y cómo éste puede superar los problemas, mediante la interacción con el servicio o producto. De esta manera podemos anticipar los problemas que pueden surgir durante el uso que hace un usuario y cómo se siente mientras lo hace.

En nuestro caso, como aclarábamos en la introducción, la aplicación escogida es una de videollamada con uso exclusivo para las entrevistas de trabajo online, debido a las funcionalidades de las que dispone. Esta aplicación, que hemos bautizado como JobView, dispondría de la misma interfaz en escritorio y web aunque, como hesmo visto antes, ahora mismo la interfaz es algo accesorio.

Hecha esta introducción, os dejamos con la breve —pero intensa— historia de Serafín durante una entrevista de trabajo (pinchad en la imagen para verla en todo su esplendor)

Sketching

El Sketching es la forma moderna de llamar lo que se comenzó conociendo como disegno, esto es, el proceso de dibujo rápido y esquemático mediante el cual se representa una idea. En este caso, dibujamos —o bocetamos, que sería la traducción literal del inglés sketch— la interfaz de nuestra aplicación de videollamadas centradas en las entrevistas de trabajo, la cual hemos bautizado como JobView.

Primero veremos el esquema principal de interacción para más tarde entra en detalle en las distintas pantallas. Hemos priorizado la sencillez, un diseño lo más minimalista posible, cómodo, sin mil opciones distintas que solo hacen perder la atención y el tiempo buscando hacer una cosa que solo harás una vez —a lo sumo dos— en toda tu vida. El proceso de las entrevistas de trabajo online —o física, obviamente— es estresante, lleno de nervios. Es por ello que la aplicación que usemos debe ser sencilla, intuitiva, cómoda, satisfactoria y, en definitiva, útil. Cualquier herramienta se diseña para facilitar la vida, no para complicarla.

Así mismo y basándonos en las pantallas de nuestro sketching hemos realizado un sencillo prototipo de baja fidelidad —literalmente con los dibujos del sketching—, para poder hacernos una ligera idea de cómo sería la experiencia final y ciertos procesos y funcionalidades que no se nos habrían ocurrido simplemente mediante los sketches. Podéis acceder al prototipo pinchando aquí.

Y esto es todo, que no es poco. Esperemos que hayáis disfrutado de la asignatura tanto como nosotros y esperamos veros pronto.

¡Un saludo!

«Quien renuncia a un poco de libertad para obtener un poco de seguridad, no merece ni libertad ni seguridad.» Benjamin Franklin.

Según las estadísticas del RACE —Real Automóvil Club de España—, durante el año 2020 en las carreteras españolas murieron un total de 345 motoristas, los cuales tienen de 12 a 17 más probabilidades de fallecer en un accidente de tráfico que aquellos que circulan en coche. Este colectivo es especialmente vulnerable por motivos más que obvios, pues no disponen de ninguna defensa ante los accidentes más que las propias prendas de protección que vistan en el momento del accidente. Su ropa se convierte así en el único medio que separa al motorista entre la vida y la muerte.

Presentamos Safe Glove®.

Safe Glove®

Por tu seguridad

¡Bienvenidos de nuevo!

Seguimos al pie del cañón, hoy presentando un Value Proposition Canvas relacionado con las videollamdas y, en concreto, con las entrevistas de trabajo online. Para comprender mejor al usuario primero hemos de entender los distintos contextos en los que se suele dar una videollamada, determinante esencial de los parámetros de esta, influenciando desde el tono, los temas o el estilo hasta la duración. No es lo mismo una entrevista de trabajo que una charla con los amigos. Algunos contextos distintos que nos podemos encontrar, teniendo en cuenta que sean bidireccionales y considerándolos como grupos contenedor, entre otras:

• Entrevistas de trabajo
• Reuniones de trabajo remotas
• Reuniones de equipos
• Educación en línea
• Reuniones familiares
• Reuniones sociales
• Colaboración creativa
• Talleres
• Asistencia técnica

Para la realización de este Value Proposition Canvas vamos a tener en cuenta la primera de todas, las entrevistas de trabajo, por la amplia variedad de posibilidades que otorga y cómo ha podido facilitar y acortar la resolución de los procesos de contratación.

El Value Proposition Canvas —en castellano lienzo o esquema de propuesta de valor— es una herramienta de planificación estratégica que ayuda a diseñar, evaluar y mejorar la propuesta de valor de un producto o servicio para los usuarios. El lienzo en el que se expone se divide en dos partes:

• Necesidades del usuario: identifica las necesidades, deseos y frustraciones de los usuarios.
• Propuesta de valor: describe cómo el producto o servicio satisface las necesidades de los usuarios.

Aunque está enfocado principalmente en mejorar productos y servicios que cumplan con la propuesta de valor de un negocio, también es de gran utilidad en los procesos de diseño, como en este caso, en el que lo aplicaremos a las aplicaciones de videollamadas.

El Perfil de Usuario

El perfil de usuario sigue una estructura sencilla: Gains (Satisfacciones), Pains (Molestias) y Jobs (Tareas) en el cual reflexionamos sobre los elementos y funcionalidades de las videollamadas y de las aplicaciones que hemos estado usando para realizar el análisis.

Gains (Satisfacciones)

• Preferencia de entrevistas online mediante videollamada.
• Calidad de vídeo y audio.
• Interfaz sencilla e intuitiva.
• Uso de plataformas profesionales.
• Aplicaciones multidispositivos y énfasis en WebApp sin tener que instalar nada.
• Funcionalidades como compartir pantalla, presentaciones digitales o grabar llamada.
• Entorno seguro y fiable, que se muestre amigable y confortable.

Pains (Molestias)

• Problemas de vídeo.
• Problemas de audio.
• Problemas de conexión.
• Instalar una aplicación.
• Falta de tecnologías para una experiencia satisfactoria.
• Problemas a la hora de detectar dispositivos de entrada —micrófonos— y salida —auriculares o altavoces—.
• Interfaces abrumadoras, confusas o complejas.
• No reconocer funciones por nombres confusos o no cohesionados con el resto de plataformas.

Jobs (Tareas)

• Comunicación visual y sonora.
• Comunicación textual.
• Escoger la ventana de un participante.
• Ver una presentación o la pantalla de otro participante.
• Activar / Desactivar vídeo o audio.
• Grabar la llamada para usarla en otro momento.
• Tomar notas privadas.
• Personalizar el fondo de la imagen.

Propuesta de Valor

Aquí enumeramos la respuesta de nuestra aplicación como reacción al perfil de usuario, de tal manera que creamos una propuesta de valor a través de lo que el usuario espera que nuestro producto o servicio le ofrezca —incluso algo más, si es que lo imposible fuera posible—. De esta manera, la segunda parte del tablón ofrece una respuesta a la primera, como podemos ver más a continuación.

Gain Creators (Creadores de Satisfacción)

• Lobby virtual para probar la calidad de vídeo y audio antes de la entrevista.
• Entorno seguro para una entrevista de trabajo online.
• Algoritmo que comprime la señal sin perder calidad de vídeo o audio.
• Interfaz sencilla, intuitiva, con iconos y palabras clave para la acción del botón.
• Aplicaciones multidispositivos y WebApp.
• Opciones de compartir pantalla, ventana, pentañas de Chrome o pizarras, compatibles con Pen digitales.

Pain Relievers (Generadores de Alivio)

• Algoritmo que comprime la señal sin perder calidad de vídeo o audio.
• WebApp con todas las funcionalidades más importantes.
• Compatible con múltiples dispositivos de entrada y salida.
• Interfaz con las funcionalidades más importantes, reactiva ante el hover del ratón.
• Términos concretos para las acciones y funciones, huyendo de generalismos confusos.
• Icono de aviso cuando la calidad de la conexión, vídeo o audio no es la adecuada.

Products & services (Productos y Servicios)

• Videollamada de calidad.
• Chat de grupo con reacciones.
• Posibilidad de multiventana.
• Presentación con Pizarra, compartir pantalla y enviar archivos.
• Activar / Desactivar vídeo o audio, así como elección de los dispositivos de salida y entrada.
• Grabar pantalla.
• Notas privadas con posibilidad de exportar a formatos de texto o compartirlas con el resto de participantes.
• Personalización de la imagen y el fondo.

Value Proposition Canvas

Mediante los elementos anteriores rellenamos la plantilla para formar el VPC final. Podéis pinchar en la imagen para verla a tamaño completo.

Reflexión final

Las entrevistas de trabajo online han llegado para quedarse, sobre todo en un entorno laboral que cada vez prima más el teletrabajo y la posibilidad de evitar desplazamientos innecesarios que solo hacen perder el tiempo y apenas generan valor añadido al trabajo, al trabajador o a la propia empresa. Es por eso que prima la necesidad de realizar dichas entrevistas en una aplicación dedicada a ello —o, al menos, que considere este uso como uno de los principales—. Las aplicaciones que hemos analizado pecan en muchas ocasiones de problemas de muy fácil solución. A saber:

1. Fallos al proporcionar un entorno seguro, cómodo y fiable como carecer de un lobby digital para comprobar la calidad del vídeo y el audio antes de comenzar la entrevista.
2. Una interfaz en ocasiones confusa y con nombres de funciones poco intuitivos.
3. Problemas de vídeo y audio debido a los algoritmos de compresión independientes a los dispositivos usados.
4. Complejidad a la hora de enviar o recibir archivos.
5. Falta de funcionalidades como compartir pantalla o realizar presentaciones digitales.
6. Tener que instalar una aplicación para poder realizar una videollamada.

Una aplicación que resuelva estos problemas derivando en una plataforma estable y realmente útil e invisible —en un sentido positivo en el cual la aplicación parece dejar de existir pasando a ser un simple medio para lograr una experiencia satisfactoria— sería la ideal para la función de entrevistas online, en concreto, y videollamadas en un entorno profesional en general.

El usuario es el centro de cualquier aplicación y en cualquier contexto de uso —junto a los objetivos de negocio—, pero lo es aún más en algo tan vital como una entrevista de trabajo. La persona entrevistada ya está lo suficientemente nerviosa por formar parte del proceso de contratación como para tener que preocuparse aún más en problemas de conexión, fallos en el dispositivo o funciones que no logra identificar. Debe estar centrado en transmitir confianza, seguridad y experiencia, mientras que el entrevistador debe transmitir los valores de la empresa y la improtancia del puesto a cubrir. Es por eso que una aplicación que podríamos llamar amigable o, reiteramos esta palabra porque es vital, invisible se convertiría en la aplicación de cabecera para las entrevistas de trabajo online.

El resto, por supuesto, ya depende del entrevistador y el entrevistado.

¡Bienvenidos una vez más, compañeros!

Hoy vamos a explorar en detalle la creación de un prototipo para el apartado de actualidad en la web de la conocida revista ¡Hola!, sumergiéndonos en el proceso meticuloso que implica la materialización de un prototipo y su precursor esencial, el wireframe, pues es esencial comprender su papel fundamental. Podemos imaginar el wireframe como el esqueleto de una estructura digital. Es un componente esencial del proceso de diseño y se centra en la disposición y organización de elementos, dando prioridad a la funcionalidad por encima de la estética. Se trata de una representación esquemática en la que se establece la jerarquía y la distribución de contenido, proporcionando así una visión clara de la arquitectura de la información antes de entrar en detalles visuales.

El wireframe sirve como un plano que delinea las interacciones y la navegación del usuario, asegurando de esta manera que cada elemento cumpla su propósito de manera efectiva. Es en esta etapa donde se toman decisiones cruciales sobre la ubicación de botones, la estructura de menús y la disposición general de la interfaz. Este enfoque en la funcionalidad cruda sienta las bases para el desarrollo del prototipo, permitiendo una comprensión profunda de la experiencia del usuario antes de que la estética entre en juego.

En definitiva, antes de que los colores y las imágenes cobren vida en el prototipo, el wireframe actúa como el cimiento racional y estructural del diseño, asegurando que la forma siga a la función.

Aquí abajo podéis ver algunas capturas del prototipo realizado en Figma, construido en base al wireframe inicial. Podéis hacer click en ellas si queréis verlas más grandes. Si queréis disfrutar de la experiencia completa, podéis pinchar aquí para ver el prototipo y aquí si queréis ver los componentes. Si tenéis alguna sugerencia o crítica constructiva, no dudéis en comentarlo.

¡Nos vemos en la próxima!

¡Buenas tardes!

El recorrido escogido es uno que realizamos cada día sobre las 14 horas: comer en la oficina. Las fases son realmente sencillas pero, sin embargo, disponen de un amplio abanico de distintas interacciones.

Fase 1.

Fichaje de salida

Fase 2.

Sacar comida del frigorífico

Calentar comida en el microondas

Llenar botella de agua

Fase 3. Comida

Encender el aire acondicionado

Escoger entretenimiento

Fase 4. Café

Rellenar el depósito de la cafetera

Cafetera

Fase 5. Regreso

Luz del baño

Fichaje de entrada