Espacio Personal
¿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.
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
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:
Analizaremos los servicios de videoconferencia de mayor adopción mundial en el año 2022:
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í.
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.
En su versión online, el períodico El Mundo, mostraba el pasado Sábado 12 de Noviembre de 2022 la siguiente portada
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:
En este wireframe puede observarse cómo se ha construido la portada sobre una retícula de 10 columnas.
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
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:
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).
A continuación podemos observar el wireframe correspondiente.
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.
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.
El recorrido vendrá definido por los siguientes pasos:
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).
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.
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:
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).
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.
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.
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.
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.
© 2024 David Almagro Cabrera
Tema por Anders Noren — Arriba ↑
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.
