Publicado por

Prototipo de Interacción: Ventana Virtual

Publicado por

Prototipo de Interacción: Ventana Virtual

Introducción ¿Qué pasaría si pudiésemos estar continuamente conectados con nuestros mayores a la par que mantuviesen su independencia y hacer su vida en su propia casa separada de la de sus hijos?, ¿Cómo podríamos acortar la distancia mientras que mantenemos la independencia en el hogar? En esta entrada presentaremos la Ventana Virtual, una solución para utilizar ventanas digitales que nos permitan estar continuamente en contacto con nuestros seres queridos independientemente de la distancia. Vídeo Resumen Ejecutivo 4. Diseño especulativo: Paradigmas…
Introducción ¿Qué pasaría si pudiésemos estar continuamente conectados con nuestros mayores a la par que mantuviesen su independencia y…

Introducción

¿Qué pasaría si pudiésemos estar continuamente conectados con nuestros mayores a la par que mantuviesen su independencia y hacer su vida en su propia casa separada de la de sus hijos?, ¿Cómo podríamos acortar la distancia mientras que mantenemos la independencia en el hogar?

En esta entrada presentaremos la Ventana Virtual, una solución para utilizar ventanas digitales que nos permitan estar continuamente en contacto con nuestros seres queridos independientemente de la distancia.

Vídeo Resumen Ejecutivo

Debate0en Prototipo de Interacción: Ventana Virtual

No hay comentarios.

Publicado por

Benchmark: Servicios de Conferencia

Publicado por

Benchmark: Servicios de Conferencia

Introducción En esta entrada de Folio se realizará un benchmarking de la integración de los principios de diseño más destacados de 4…
Introducción En esta entrada de Folio se realizará un benchmarking de la integración de los principios de diseño más…

Introducción

En esta entrada de Folio se realizará un benchmarking de la integración de los principios de diseño más destacados de 4 de las herramientas de videoconferencia más conocidas en el mercado

Aspectos relevantes de la videocomunicación

Los criterios de evaluación de este benchmarking girarán en torno a la aplicabilidad de algunos de los principios del diseño a servicios de videoconferencias:

  • Agrupamiento: ¿Se agrupa el contenido de la interfaz de manera que estas agrupaciones no se superan los 7 (+/-2) elementos?
  • Alineación: ¿Se utiliza alguna estructura reticular para dotar de cierto orden a la interfaz?
  • Iconos para interactivos: ¿Se utiliza iconografía para sugerir interacciones de una manera económica?
  • Consistencia y estándares: ¿los elementos gráficos se mantienen entre pantallas y entre dispositivos?
  • Diseño minimalista: ¿La interfaz sólo muestra información que sea relevante?
  • Ayuda y documentación: ¿Contiene sección de ayuda fácilmente accesible?

Elección de 4 servicios de referencia

Analizaremos los servicios de videoconferencia de mayor adopción mundial en el año 2022:

  • Zoom (42.7% de marketshare)
  • Google Meet (31.4%)
  • Microsoft Teams (10.9%)
  • Google Hangouts (0.9%)

Benchmark de 4 servicios de videoconferencia

Conclusiones

La integración de algunos de los principios de diseño fundamentales en las herramientas de videoconferencia como puede observarse, se han tenido muy en cuenta para el diseño de pantallas e interacciones en herramientas de videoconferencia (p.ej. uso de estructuras reticulares, iconografía, secciones de ayuda,..).

Con respecto a la cantidad de información mostraba, quizás podemos observar como Teams en ocasiones muestra secciones especialmente cargadas (+10 elementos). En este caso, es interesante destacar que la evolución de Teams no se ha limitado a servicios de videconferencias, sino que además se ha posicionado como un gestor documental corporativo integrado, lo cual aumenta considerablemente sus casos de uso y con ello su complejidad.

Con respecto a la  consistencia entre pantallas y dispositivos, es destacable que este tipo de herramientas no suelen presentar en su uso ordinario un gran número de pantallas (sólo la venta de videoconferencia en cuestión). Y mientras que sí mantienen en general la consistencia entre dispositivos, las páginas de descarga de la herramienta de ciertas herramientas como Zoom o Teams tienen una tipología de diseño y colores ligeramente diferente a las de la herramienta en sí.

Debate0en Benchmark: Servicios de Conferencia

No hay comentarios.

Publicado por

Procesos, Métodos y Técnicas – Creación de Wireframes a partir de un períodico digital

Publicado por

Procesos, Métodos y Técnicas – Creación de Wireframes a partir de un períodico digital

Introducción En esta entrada vamos a representar cómo podrían haber sido los wireframes de varias páginas correspondientes al períodico El Mundo en…
Introducción En esta entrada vamos a representar cómo podrían haber sido los wireframes de varias páginas correspondientes al períodico…

Introducción

En esta entrada vamos a representar cómo podrían haber sido los wireframes de varias páginas correspondientes al períodico El Mundo en su versión web para PC’s.

Wireframes

Portada

En su versión online, el períodico El Mundo, mostraba el pasado Sábado 12 de Noviembre de 2022 la siguiente portada

Imagen 1: portada de El Mundo el 12.11.22

Es interesante observar cómo a la cabecera del artículo hay 3 secciones diferentes que quizás pueda confundir ligeramente al usuario. En la primera sección de la cabecera de página en un fondo de color gris claro se muestran los artículos de mayor tendencia del día. A continuación, se aprecia la siguiente sección de cabecera en un tono gris aún más claro que el anterior y con letras mayúsculas las diferentes secciones temáticas del períodico, donde a su vez está contenido el logo del períodico. Para cerrar la cabcecera, se observa la

Quizás un wireframe previo habría lucido como sigue:

Imagen 2: Wireframe de portada de El Mundo (para ver más detalle, descargar imagen) – Realizado con Moqups

En este wireframe puede observarse cómo se ha construido la portada sobre una retícula de 10 columnas.

 

Noticia

A pesar de que la portada de El Mundo es algo más cambiante, cuando analizamos los artículos por separado es posible ver que tienen todos una estructura muy parecida a la siguiente

 

Imagen 3: Artículo de El Mundo el día 12.11.22

En las páginas de noticias, a diferencia de la portada, pueden observarse 3 secciones diferentes (lo cuál quizás pueda incluso llegar a ser ligeramente confuso para el usuario). La primera sección, al giual que en portada se muestran los artículos de mayor tendencia del día. A continuación, se aprecia la siguiente sección de cabecera en un tono gris aún más claro que el anterior y con letras mayúsculas las diferentes secciones temáticas del períodico, donde a su vez está contenido el logo del períodico. Para cerrar la cabecera, se observa en un tono azul oscuro una seción para el filtrado de noticias por comunidad autónoma.

Por otra parte, el layout de las noticias está sustancialmente menos recargado de información visual (pocos anuncios e imágenes, elementos centrados en la página, amplios márgenes blancos,…)

Al igual que en el anterior caso, podemos observar cómo el wireframe correspondiente mostraría un reticulado compuesto por 10 columnas:

Imagen 4: Wireframe de un artículo de El Mundo del día 12.11.22 – Realizado con Moqups

Artículo de opinión

Siguiendo a los artículos de noticias, los artículos de opinión de El Mundo siguen una estructura muy similar. Las únicas diferencias apreciables se muestran únicamente en la cabecera, dónde la última sección (color azul) muestra las secciones dentro de artículos de opinión: Editoriales, Columnistas y Blogs (dónde en los artícuos de noticias anteriormente veíamos un filtro por CCAA).

Además, pueden apreciarse cómo en los artículos de opin ión se aprovecha el margen lateral derecho para exponer anuncios (mientras que en los artículos de noticias se mantenían los márgenes en blanco).

Imagen 5: Artículo de opinión de El mundo el día 14 de Noviembre de 2022.

A continuación podemos observar el wireframe correspondiente.

Imagen 6: Wireframe de un artículo de opinión de El Mundo

Conclusión

En esta entrada hemos presentado una serie de wireframes basados en extractos reales de el períodico El Mundo, en su verisón web

Este períodico, en su versión web, hace uso de un modelo Freemium al cual se puede acceder de manera gratuita a la portada y que requiere de suscripción de pago para acceder al contenido de sus noticias y artículos de opinión.

La disposición de los artículos en portada varía en número de columnas a lo largo de toda su vertical, pero que siempre podría llegar a encuadrarse en un retícula de 10 columnas. Los artículos de noticias y de opinión se disponen en una retícula de 10 columnas, con el elemento principal (texto del artículo) centrado en medio de la página.

Bibliografía

  • El Mundo. <www.elmundo.es>. [Fecha de consulta: 12 y 14 de noviembre de 2022].
  • Moqups. <www.moqups.com>. [Fecha de consulta: 12 y 14 de noviembre de 2022].
  • UOC – Design Toolkit. «Prototipado: métodos». <http://design-toolkit.uoc.edu/es/guia/prototipado/>.  [Fecha de consulta: 12 de noviembre de 2022].
  • UOC – Design Toolkit. «Prototipado: Guía». <http://design-toolkit.uoc.edu/es/prototipado/>. [Fecha de consulta: 12 de noviembre de 2022].
  • Banerjee, A. (2014). «What a Prototype Is (and Is Not)» [artículo en línea]. UX Magazine.  <http://uxmag.com/articles/what-a-prototype-is-and-is-not>. [Fecha de consulta: 12 de noviembre de 2022].
  • Cao, J. (2017). «What Is a Prototype: A Guide to Functional UX» [artículo en línea]. Studio by UXPin. <https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/>. [Fecha de consulta: 12 de noviembre de 2022].
  • Grothaus, M. (2015). «How To Go From Idea To Prototype In One Day» [artículo en línea]. Fast Company. <https://www.fastcompany.com/3045934/how-to-go-from-idea-to-prototype-in-one-day>. [Fecha de consulta: 12 de noviembre de 2022].
  • Smith, Q. (2019). «Protyping User Experience». [artículo en línea]. <https://www.uxmatters.com/mt/archives/2019/01/prototyping-user-experience.php>. [Fecha de consulta: 12 de noviembre de 2022].
  • Vyhouski, N. «Everything you need to know about sketching». [artículo en línea]. <https://www.toptal.com/designers/ux/guide-to-ux-sketching>. [Fecha de consulta: 14 de noviembre de 2022].

Debate0en Procesos, Métodos y Técnicas – Creación de Wireframes a partir de un períodico digital

No hay comentarios.

Publicado por

Interacciones: Mapa de experiencia

Publicado por

Interacciones: Mapa de experiencia

0. INTRODUCCIÓN En esta entrada vamos a analizar las interacciones que tienen lugar para dar de alta una tarjeta de débito recibida…
0. INTRODUCCIÓN En esta entrada vamos a analizar las interacciones que tienen lugar para dar de alta una tarjeta…

0. INTRODUCCIÓN

En esta entrada vamos a analizar las interacciones que tienen lugar para dar de alta una tarjeta de débito recibida a través de N26, un banco 100% online.

1. RECORRIDO PARA ACTIVAR UNA TARJETA DE N26, UN BANCO 100% DIGITAL

El recorrido vendrá definido por los siguientes pasos:

  1. Mensaje de bienvenida N26
  2. Instalación de la aplicación móvil N26 y familiarización con el entorno
  3. Activación de la tarjeta a través de la app móvil
  4. Búsqueda de un cajero cercano que admita N26
  5. Extracción de efectivo en un cajero

Podemos afirmar que en todas las fases podemos afirmar existe interacción, estando presentes los elementos que la conforman: una PERSONA (yo) realizando una serie de ACTIVIDADES a través de ña interacción con la TECNOLOGÍA (e-mails, apps, cajeros automáticos) y un DISEÑO acorde a las tareas a realizar y objetivos del usuario, todo ello orientado a unacomunidad de práctica o CONTEXTO determinado (nativos digitales que buscan un banco 100% online para realizar sus gestiones).

1.1. Mensaje de bienvenida N26

Tras haber creado una cuenta en N26 y haber ingresado una cantidad mínima de dinero para poder recibir la tarjeta de crédito física, recibo un mensaje a mi correo de bienvenida.

Personalmente, me resulta más cómodo realizar operaciones más difíciles o relevantes desde el ordenador. Con esta consideración en mente abro el correo desde mi ordenador para leerlo mejor.

En este  correo, N26 me sugiere familiarizarme con la aplicación Android por lo que vuelvo a abrirlo desde el teléfono. Además este correo sirve de ante sala para saber cuáles son los elementos más relevantes de la aplicación incluso antes de haberla descargado (Inicio, Ventajas exclusivas, tarjetas).

Encuentro positivo que hayan tenido en cuenta que uno de los primeros pasos de un cliente será la configuración de la tarjeta, esto se refleja en que en el mail de bienvenida ya mencionan la sección de tarjetas. No obstante, me da la sensación de que esta información se diluye entre otra tanta. A mí personalmente no me interesa visitar “mis ventajas exclusivas” cuando aún si quiera mi cuenta no está operativa, por lo que quizás en este estadio inicial un pequeño monográfico horizontal con 3 pasos sería más útil (p.ej: descarga la app > configura tu contraseña > Activa tu tarjeta).

Esta fase del proceso la interacción se ha caracterizado por una actividad tipo conversacionaal de iniciativa mixta (no es el usuario quien inicia la conversación) en donde el sistema sugiere al usuario tomar una acción determinada, a través de una interacción libre con la GUI y escritura a través del teclado.

1.2. Instalación de la aplicación móvil N26 y familiarización con el entorno

Tras haber clicado en la caja “Configurar mi app N26” contenida en el mail de bienvenida, accedo al Google Playstore para descargar la app. Como ya tenía descargada la aplicación, sólo ha hecho falta actualizarla para acceder a ella.

Para acceder a la aplicación encuentro una grata sopresa, ¡Bingo! No recuerdo la contraseña pero puedo acceder a través del reconocimiento biométrico. Esto es genial porque de otra manera el proceso habría sido más tedioso.

Accedo a la landing page de la aplicación, donde pueden verse hasta 6 secciones que de arriba abajo sigue este orden:

  • Barra horizontal superior donde se puede acceder de izquierda a derecha: un icono de una lupa que da acceso a un buscador, un icono de un listado que da acceso a algunas funcionalidades (muchas de ellas se ven directamente en la landing page, como enviar dinero, por lo que parece confuso), un icono de una viñeta para dar acceso a preguntas frecuentes y un círculo con mis iniciales (realmente no son correctas, porque mis iniciales son DC) que da acceso una sección de configuración de cuenta.
  • El saldo actual de mi cuenta 6,40
  • Una barra horizontal media de iconos, cuyo estilo es diferente a la barra anteriorrecibir dinero, enviar dinero, próximos pagos y estadísticas – me pregunto por qué los dos primeros botones son verdes y los otros dos son blancos, ¿los blancos son menos relevantes?, ¿los usuarios los encontrarán de gran utilidad pero suelen acceder menos a ellos?
  • Una caja de grandes proporciones (25% del total de altura de la pantalla), en el que me advierten de que puedo utilizar la cuenta incluso sin tener una tarjeta física. Me imagino que esta es una de las innovaciones que introduce N26 con respecto a otros bancos en los que no puedes operar hasta no tener la tarjeta física, por ello han querido resaltar esta característica que a mí personalmente, me ha encantado.
  • Una sección por meses de los gastos. Encontramos registros porque se hicieron con tarjetas de débito virtuales
  • Una barra horizontal  inferior de iconos cuya tipología va en armonía con la que nos encontramos en la parte superior. En esta barra, en la esquina inferior izquierda encontramos el icono de tarjetas, que intuyo será el que necesitamos consultar para activar la tarjeta física recibida. Es curioso como a pesar de no estar resaltado, he podido intuir dónde debía clicar a continuación en menos de 5 segundos.

La interacción en esta fase sigue caracterizandose por actividades tipos conversing, pero en esta fase se añade la característica táctil de la comunicación (al haber pasado del ordenador al teléfono).

 

1.3. Activación de la tarjeta a través de la app móvil

Al clicar al icono de tarjetas carga el layout de la pantalla mostrando el título “tarjetas”. Transcurridos 4 segundos se carga la página y ¡eureka!, podemos ver instantáneamente un icono rectangular resaltado con fondo verde para activar mi tarjeta. Pero antes de clicar, un dato que a pesar de ser de gran relevancia me causa desconcierto: ¿me dice N26 que mi tarjeta que tengo en la mano y que voy a activar está “En camino”?

Tras clicar en “Activar mi tarjeta” me pide un token de 10 dígitos contenido en la propia tarjeta física (tengo que buscarla, ya no suelo llevar mi cartera encima y la tengo en la guantera del coche por si cuando salgo hay algún sitio que no me dejan pagar con móvil).

¡Mi tarjeta ha sido reconocida en el sistema! Y sólo me queda configurar el PIN. Me parece muy acertado que la tarjeta no te venga con ningún PIN predefinido, así se evita cualquier problema por extravío del PIN original o por alguna brecha de seguridad en el transporte.

Y ¡voilá! Mi tarjeta ya está activa y lista para utilizar. El correo inicial me decía que para activarla tenía que retirar efectivo en un cajero, pero parece que ahora me dice que ya está lista para pagar en cualquier establecimiento. Eso sí, según me advierten con una etiqueta amarilla, entiendo que para utilizar el contactless tengo que meter por primera vez la tarjeta en un datáfono que me pida el PIN y ya dejar habilitadas todas las funcionalidades de la tarjeta.

1.4. Búsqueda de un cajero cercano que admita N26

Ahora, cuando accedo a la sección de tarjetas veo que tras activar mi tarjeta, ahora me permite buscar un cajero cercano. Voy a ello, porque entiendo que tras una retirada de efectivo, mi tarjeta estará activa al 100% (contactless incluido).

Tras clicar en buscar un cajero, la dirección de partida no me resulta reconocible, ni tampoco recibo ninguna alerta de error. Me parece desconcertante, pero tras varios segundos entiendo que puede que mi GPS no esté activo y por ello me sale una dirección por defecto en el extranjero.

Tras activar el GPS, cerrar y volver a abrir la ventana de “Buscar un cajero cercano” si que me aparece el cajero más cercano así como una ruta de cómo llegar a él.

1.5. Extracción de efectivo en un cajero

Finalmente, tras acudir al cajero sugerido (que no es de N26, sino Caja Rural), introduzco la tarjeta y el PIN registrado pasos anteriormente. Tras la selección del idioma deseado a través de una botonadura lateral, clico sobre la misma pantalla la opción de «retirar efectivo de cuenta corriente» y, de nuevo clico sobre la pantalla en la opción 10€.

Tras esperar unos 10 segundos, el cajero expende un billete de 10€ por una ranura debajo de la pantalla y poco después mi tarjeta (desde una ranura lateral).

En este caso la interacción cambia sustancialmente con respecto al resto de fases, donde el tipo de actividad es una mezcla entre exploratoria y conversacional a través de menús de selección, dónde se intercambian la escritura, el tacto y manejo a través de una interfaz de aplicación.

A pesar de que para gran parte de la población este tipo de interacciones suelen ser sencillas, quizás por la repetición numerosas y con diferentes cajeros, que hace que ha agudizado nuestra intuición de cara a su uso. No obstante, es reconocible cierta complejidad que para ciertos colectivos pueden suponer un impedimento para su uso (p.ej. personas mayores), ya que se mezclan diferentes botonaduras físicas en los laterales, controles táctiles en la propia pantalla, teclado numérico y varias ranuras con las que el usuario ha de interactuar.

 

2. CONCLUSIÓN

Las primeras experiencias de interacción con un banco 100% online son muy positivas, haciendo posible un completo control de tu cuenta bancaria desde casa y sin requerir de visitas físicas a ninguna sucursal.

A pesar de que para mí el proceso de activar mi tarjeta ha sido intuitivo, he de reconocer que la interacción con diferentes elementos digitales (varias interfaces, aplicaciones, etc) y físicos (tarjeta, cajero) puede suponer una experiencia menos satisfactoria (e incluso irrealizable) para usuarios con menos relación con el mundo digital.

3. BIBLIOGRAFÍA

  • Janlert, L.-E.; Stolterman, E. (2017). Things that keep us busy: the elements of interaction. Cambridge, MA: The MIT Press.
  • Janlert, L. E.; Stolterman, E. (2016). «The Meaning of Interactivity — Some Proposals for Definitions and Measures». Human-Computer Interaction (vol. 32, n.º 3, págs. 103–138). Disponible en: <https://doi.org/10.1080/07370024.2016.1226139>.
  • Preece, J.; Rogers, Y.; Sharp, H. (2002). Interaction design: beyond human-computer interaction. Nueva York : J. Wiley & Sons (pág. 519)
  • Nickerson, R. S. (Octubre, 1976). «On conversational interaction with computers«. Proceedings of the ACM/SIGGRAPH workshop on User-oriented design of interactive graphics systems (págs. 101-113).

Debate0en Interacciones: Mapa de experiencia

No hay comentarios.