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?
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 se expondrá el árbol de contenidos obtenido a raíz de un estudio con usuarios a través de la técnica de Card Sorting abierto.
Árbol de contenidos
Tras analizar los resultados obtenidos de un estudio de card sorting abierto realizado a 7 participantes con la herramienta Optimal Workshop (ver resultados aquí) ha sido posible realizar un etiquetado y organización prelimminar del contenido de la aplicación In-Edit Connect.
Conclusiones
De cara a la clasificación del contenido de un sitio, la técnica de Card Sorting abierto puede llegar a ser muy útil tanto para validar con usuarios una clasificación preliminar que la diseñadora web pueda tener en mente como para descubrir potenciales clasificaciones que inicialmente no se tuvieron en consideración.
No obstante, a pesar de todas las bondades que ofrece esta técnica, es de vital importancia que la persona a cargo del diseño del sitio tenga en cuenta diversos factores que pueden influir en los resultados (p.ej. falta de información o contexto por parte de los usuarios de prueba, malentendido del contenido real de una sección,…), manteniendo en todo momento una visión crítica sobre los resultados obtenidos.
Bibliografía
Hudson, W. «Card Sorting». En: Mads Soegaard; Rikke Friis Dam. The Encyclopedia of Human-Computer Interaction (2.ª ed.). Interaction Design Foundation [artículo en línea] <http://www.interaction-design.org/encyclopedia/card_sorting.html>. [Fecha de consulta: 27 de noviembre de 2022].
Mozyrko, B. (2015). «Card Sorting: a quick and dirty guide for beginners». Usability Geek. <https://usabilitygeek.com/card-sorting-quick-guide-for-beginners/>. [Fecha de consulta: 27 de noviembre de 2022].
Sherwin, K. (2018). «Card Sorting: uncover users’ mental models for better information architecture». Nielsen Norman Group. <https://www.nngroup.com/articles/card-sorting-definition/>. [Fecha de consulta: 27 de noviembre de 2022].
Sinyakov, S. (2013). «Can Card Sorting Improve the Usability of Your Designs?» [artículo en línea]. Design Instruct. <http://designinstruct.com/web-design/card-sorting-usability-designs/>. [Fecha de consulta: 27 de noviembre de 2022].
gov. «Card Sorting» [artículo en línea]. <https://www.usability.gov/how-to-and-tools/methods/card-sorting.html>. [Fecha de consulta: 27 de noviembre de 2022].
Tras la crisis sanitaria propiciada por la Covid-19, un gran número de administraciones públicas de todo el mundo han impulsado el uso de las tecnologías para intensificar el número de gestiones telemáticas que los ciudadanos pueden hacer. Este es el caso de la sede electrónica de la Agencia Tributaria española, donde podemos observar un aumento del 10.000% del tráfico orgánico en dicha web, llegando actualmente a los 10.8 Millones de visitas mensuales.
En este contexto cabe preguntarse, ¿están nuestras administraciones preparadas para servir a sus clientes (ciudadanos) servicios telemáticos realmente usables? A lo largo de esta entrada de Folio daremos respuesta a esta pregunta a través de una evaluación de la usabilidad sin usuarios de varios recorridos funcionales dentro de la sede electrónica de la Agencia Tributaria del Ministerio de Hacienda de España.
Metodología: Explicación acerca de cómo se ha llevado a cabo el análisis
La realización del análisis de la usabilidad sin usuarios la haremos a través de una Evaluación Heurística, concretamente haremos uso de los 10 heurísticos propuestos por Nielsen y Molich (Nielsen J. – 1994) que se describirán a continuación.
A pesar de que según como indican ciertos estudios (Nielsen 1994) el número óptimo de evaluadores al ejecutar una Evaluación Heurística sea entre 3 y 5, este estudio se ejecutará por una sola persona (yo) a lo largo de una sesión de aproximadamente 2 horas. Antes de comenzar la evaluación en sí, se harán 2 recorridos por la web para familiarizarme con los diferentes flujos de tareas.
Una vez comencemos con la evaluación de cada principio, se tomarán como referencia las preguntas contenidas en la checklist propuestas por Ross, L. (2006). Para cada hallazgo se confeccionará una ficha a través de la extensión de Chrome UX Check que contenga una descripción del problema, una propuesta de mejora un pantallazo ilustrativo de la aplicación y la severidad del error. La clasificación de la severidad se hará de acuerdo a la clasificación numérica del 0 al 4 planteada por Nielsen, J. ( 1994):
0 = No es un problema de usabilidad.
1 = Problema sin importancia. No necesita arreglarse a menos que haya tiempo de sobra.
2 = Problema de poca importancia. Arreglarlo no tiene mucha prioridad.
3 = Problema grave. Es importante arreglarlo.
4 = Catástrofe. Es imprescindible arreglarlo
Los 10 Heurísticos de Nielsen
1. Visibilidad del estado del sistema
Descripción:
El sistema debe mantener a las personas usuarias informadas sobre lo que ocurre (feedback en un tiempo razonable). Para evaluar este principio tendremos en cuenta:
¿Se muestra algún mensaje de error en algún momento?
¿Saben los usuarios que deberían hacer a continuación?
¿Saben los usuarios cómo de lejos están en el proceso?
¿Hay info. disponible acerca de tiempo restante para timeout de la sesión?
¿La disposición general es fácil de escanear a simple vista?, ¿hay zonas con mucha info o por el contrario zonas con mucho texto que impiden un escaneo de la página rápido?
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación:
Malas prácticas
Es difícil saber en qué parte de la web estamos situados porque no hay nada que identifique en qué posición del arbol de contenido estamos.
Recomendaciones:
Categorizar las gestiones que realizan los usuarios (p.ej. mediante un card sorting) y añadir migas de pan que identifiquen cómo hemos llegado aquí (p.ej. Inicio / Gestiones / Declaraciones tributarias / Presentación de declaraciones de renta)
2. Adecuación entre el sistema y el mundo real
Descripción:
El sistema debe hablar el mismo lenguaje que la persona usuaria. Para ello utilizaremos la siguiente checklist:
Facilidad de uso: ¿Es fácil para los usuarios aprender a usar el sistema? ¿Hay muchos pasos involucrados en su uso? ¿Pueden los usuarios entender lo que necesitan hacer con un poco de capacitación?
Rendimiento: ¿funciona el sistema lo suficientemente rápido al responder a las solicitudes de los usuarios? ¿Es molesto para los usuarios cuando tienen que esperar demasiado para que se cumplan sus solicitudes?
Mensajes de error: ¿los mensajes de error son lo suficientemente claros para que los usuarios sepan qué salió mal y por qué?
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación
Malas prácticas
A la declaración de la renta se accede a través de la sección de «Presentación de declaraciones, calendario del contribuyente / Todos los modelos / IRPF», cuando realmente el término comúnmente empleado en todo tipo de medios es el de «Declaración de la Renta», por lo que vemos un desalineamiento entre el lenguaje empleado y el comúnmente utilizado por las personas usuarias.
Recomendaciones:
Utilizar sustituir accesos tortuosos a las secciones a las que más se accede por accesos directos visibles desde la página principal, empleando los mismos términos empleados comúnmente en los medios
3. Libertad y control por parte de la persona usuaria:
Descripción
Las personas usuarias tienen la sensación de control sobre lo que hacen. Para evaluarlo intentaremos detectar si concurren las siguientes fallas del sistema:
Falta de opciones: los usuarios no saben qué opciones están disponibles para ellos, por lo que no saben cómo usar el sitio de manera efectiva (p.ej. un buscador sin posibilidad de filtrar resultados puede resultar poco útil).
Inexistencia de feedback: sin feedback sobre sus acciones, los usuarios no pueden saber si han tenido éxito haciendo lo que pretendían o no (p.ej. envío de un formulario sin respuesta).
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación:
Malas prácticas
Estando en otra sección hemos clicado en «Identificación digital» y nos ha derivado a otra sección completamente diferente. No obstante, no es posible volver a la sección de donde originalmente veníamos.
Recomendaciones:
Incluir un árbol de páginas a la izquierda que nos permita movernos con mayor facilidad por todo el contenido.
4. Consistencia y estándares
Descripción
Que se sigan las normas y convenciones del sistema/plataforma ayuda a que las personas usuarias no tengan que preguntarse si varios elementos significan la misma cosa o no. Evaluaremos concretamente:
Consistencia interna: todos lo elementos visuales son harmoniosos en color, fuentes, gráficos y contenido.
Consistencia externa: todas las páginas tienen un diseño y layout similar, dando la sensación de que pertenecen a un mismo todo.
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación
Buenas prácticas
Todas las páginas siguen un estilo similar
5. Prevención de errores:
Descripción
Antes que diseñar buenos mensajes de error, es mejor evitar que el problema ocurra. Para ello evaluaremos:
¿Hay algún error 404?
¿Todos los hipervínculos funcionan correctamente?
¿Hay alguna imagen que no se muestra correctamente?
¿Tienen las personas usuarias toda la información necesaria para completar una tarea?
¿Hay algún problema que prevenga a las personas usuarias de completar las tareas sin errores?
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación
Buenas prácticas
A la hora de presentar la declaración de la renta, cualquier opción relacionada con modificar datos (especialmente si son relevantes), ofrece feedback inmediato del sistema pidiendo confirmación del usuario para llevar a cabo la acción
6. Reconocimiento antes que recuerdo:
Descripción
Evaluar si se está minimizando la carga cognitiva de las personas usuarias haciendo elementos, acciones y opciones visibles.
¿Hay elementos/rutas que sin que sean recordados las personas usuarias no podrían continuar?
¿Se ofrece ayuda en contexto en lugar de un tutorial largo para ser recordado?
¿Es necesario recordar mucha información en alguna interfaz (más de 5 elementos)?
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación:
Malas prácticas
Una consulta esencial no es posible encontrarla de una manera eficiente a través del buscador del portal (notar que sí que es posible y muy eficiente hacerlo desde Google sin embargo)
Recomendaciones:
Clasificar las secciones, gestiones e información en base a palabras clave utilizadas por los usuarios
7. Flexibilidad y eficiencia del uso
Descripción
Para evaluar si el diseño tiene en consideración la eficiencia en el uso del software tanto de personas usuarias expertas como de novatas haremos uso de la siguiente checklist:
¿Es posible personalizar el contenido para personas usuarias individuales?
¿Se proveen maneras de mejorar la eficiencia de uso (p.ej shortcuts?
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación
Malas prácticas
No hay posibilidades de configurar el acceso a las secciones más relevantes para un usuario
Recomendaciones:
Sería positivo dar la oportunidad a las personas usuarias de grabar un filtro para las consultas de su mayor interés
8. Diseño estético y minimalista
Descripción
Las interfaces no deberían contener información irrelevante o que raramente se necesita. Cada unidad extra de información en una interfaz compite con las unidades relevantes de información y reduce su visibilidad relativa.
Este principio heurístico lo evaluaremos con reflexiones como las siguientes:
Diseño simple, limpio y consistente.
Uso de gráficos y fotografías reducido al mínimo exponente si no fuesen necesarias.
Imágenes de alta calidad cuando sea necesario.
Tipografía fácil de leer y agradable a la vista.
Fondos de página simples y de colores claros para que su contenido se destaque más claramente
Todo el texto sea lo suficientemente grande para facilitar la lectura (al menos 14 puntos).
Para cada página web, asegúrese de tener un menú de navegación claro para encontrar páginas dentro de su sitio o vincular a otros sitios (es decir, un mapa del sitio)
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación
Buenas prácticas
En líneas generales el portal tiene un estilo de diseño minimalista y entendible (fondo blanco, letras con tamaño adecuado, se minimiza la cantidad en ciertas páginas,…)
9. Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse:
Descripción
Para ello se evaluarán:
Usar mensajes visuales de error tradicionales (p.ej. rojo, negrita, etc)
Avisar a las personas usuarias de qué fue mal en un lenguaje sencillo, evitando tecnicismos.
Ofrecer a las personas usuarias una solución (p.ej. un atajo para resolver el error rápidamente)
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación:
Mala práctica
El sistema informa de la hora actual de conexión y de que el usuario está logado en el sistema, pero no avisa de cuánto tiempo queda para el logout.
Recomendaciones:
Añadir un contador o similar para avisar del logout automático del sistema.
10. Ayuda y documentación
Descripción
Sería ideal que el sistema no necesitase de explicaciones adicionales, pero como probablemente no sea el caso, es mejor ofrecer a las personas usuarias documentación para ayudar a los usuarios entender como completar sus tareas. Para evaluar esta heurística haremos uso de la siguiente checklist:
¿El sitio incluye una página de ayuda o soporte?
¿Es fácil de encontrar?
¿Está claro lo que se puede hacer en esta página?
¿Hay una dirección de correo electrónico para contactar para soporte?
¿Hay un formulario de contacto en el sitio o en otro lugar que permita enviar comentarios o hacer preguntas?
Evaluación buenas/malas prácticas:
Ejemplo
Evaluación
Buenas prácticas
Impacto positivo del asistente virtual y de la opción de contacto en una zona altamente visible
Listado priorizado según gravedad.
Apoyándonos en la herramienta Ux Check se han evaluado los anteriores principios heurísticos en la sede electrónica de la Agencia Tributaria española. Como resultado de ello, encontraremos a continuación los hallazgos relacionados, ordenados de mayor impacto a menos.
1. Difícil hacer un escaneo completo y eficiente de la web para crear un mapa mental de su estructura
Imagen
Heurístico: #8, Diseño estético y minimalista
Severidad: 4
Reflexión acerca de la severidad de la severidad:
Es difícil hacer un escaneo completo de la web de manera eficiente ya que es necesario hacer scroll completo en la página hasta 4 veces para ver todo el contenido de la página principal que además tiene mucha carga visual.
Recomendaciones:
Eliminar imágenes cuyo único propósito sea ornamental. Hacer una investigación de los trámites más consultados y mostrar en la landing page directamente sólo los 7 – 10 más relevantes.
2. Difícil saber en qué punto de la web se está en relación a todo el contenido
Imagen
Severidad: 4
Heurístico: #1, Visibilidad del estatus del sistema
Reflexión acerca de la severidad:
Es difícil saber en qué parte de la web estamos situados porque no hay nada que identifique en qué posición del arbol de contenido estamos. Parece que a pesar de que hayas migas de pan, el último nivel (donde está la persona usuaria) no está visualmente conectado con el resto de páginas.
Recomendaciones:
Categorizar las gestiones que realizan los usuarios (p.ej. mediante un card sorting) y añadir migas de pan que identifiquen cómo hemos llegado aquí (p.ej. Inicio / Gestiones / Declaraciones tributarias / Presentación de declaraciones de renta)
3. Imposibilidad de encontrar ciertas gestiones/secciones a través del portal
Imagen
Severidad: 4
Heurístico: #4, Reconocimiento antes que recuerdo
Reflexión acerca de la severidad:
Una consulta esencial no es posible encontrarla de una manera eficiente a través del buscador del portal (notar que sí que es posible y muy eficiente hacerlo desde Google sin embargo)
Recomendaciones:
Clasificar las secciones, gestiones e información en base a palabras clave utilizadas por los usuarios
4. Cambio repentino de una sección a otra
Imagen
Severidad: 3
Heurístico: #1, Visibilidad del estatus del sistema
Reflexión acerca de la severidad:
Al clicar la opción de «Identificación digital» contenida dentro de la sección «Presentación de declaraciones, calendario del contribuyente», el sistema nos lleva a dicha opción pero de repente esta está contenida en una sección diferente a la que originalmente hemos clicado.
Recomendaciones:
Si se pretende seguir teniendo acceso la identificación digital dentro de esta sección, localizaría un icono fuera del árbol de esta sección (p.ej. en la esquina superior izquierda), de esta manera sería más fácil desvincular la sensación de relación padre-hija entre estas dos páginas
5. El lenguaje empleado para ciertos trámites no es el mismo que el que comunmente emplean los medios y las personas usuarias.
Imagen
Severidad: 3
Heurístico: #2, Adecuación entre el sistema y el mundo real
Reflexión acerca de la severidad:
A la declaración de la renta se accede a través de la sección de «Presentación de declaraciones, calendario del contribuyente / Todos los modelos / IRPF», cuando realmente el término comúnmente empleado en todo tipo de medios es el de «Declaración de la Renta»
Recomendaciones:
Utilizar sustituir accesos tortuosos a las secciones a las que más se accede por accesos directos visibles desde la página principal, empleando los mismos términos empleados comúnmente en los medios
6. Imposibilidad de deshacer la ruta a la que accidentalmente hemos llegado
Imagen
Ver hallazgo #4.
Severidad: 3
Heurístico: #3, Libertad y control por parte de la persona usuaria
Reflexión acerca de la severidad:
En este caso, y muy en conexión con la casuística #4, donde partíamos de una sección en dónde clicábamos en «Identificación digital» y nos derivaba a otra sección completamente diferente, en este caso señalamos la imposibilidad de volver a la sección de donde originalmente partíamos.
Recomendaciones:
Incluir un árbol de páginas a la izquierda que nos permita movernos con mayor facilidad por todo el contenido
7. Landing Page sobrecargada de elementos
Imagen
Severidad: 2
Heurístico: #8, Diseño estético y minimalista
Reflexión acerca de la severidad:
A pesar de que las subsecciones tienen un diseño minimalista que es utilizado incluso en la Landing Page, en esta última puede observarse demasiada información infográfica que puede producir cierta sensación de fatiga visual.
Recomendaciones:
Categorizar las secciones aún más y mostrar para cada subsección sólo la información/gestiones más usadas y para el resto utilizar otras opciones para mostrarlas en una segunda instancia (p.ej. incluyendo en cada sección un icono «+» que despliegue más opciones de las mostradas originalmente)
8. Múltiples opciones con nombres similares para acceder a secciones de ayuda
Imagen
Severidad: 2
Heurístico: #10, Ayuda y documentacion
Reflexión acerca de la severidad:
La ayuda se muestra en varias secciones de la interfaz. No obstante, al presentar varias secciones de ayuda/guía muy similares quizás pueda ser un poco confuso (p.ej información general VS ayuda técnica vs Normativa vs Documentos y ficheros)
Recomendaciones:
Localizar siempre en el mismo sitio (p.ej. esquina superior derecha) un único punto de entrada a la sección de ayuda
9. Iconos difícilmente asimilables a la realidad que representan
Imagen
Severidad: 1
Heurística: #2, Adecuación entre el sistema y el mundo real
Reflexión acerca de la severidad:
Ciertos iconos son difícilmente reconocibles (p.ej. un cuaderno con una R, representa el IRPF). No obstante, este hecho se ve compensado por un título anexo explicativo de la opción en cuestión.
Recomendaciones:
Sustituir siglas no convencionales por las que sí se utilizan ampliamente (R IRPF o I IVA)
10. No se muestra información del tiempo restante de sesión antes del logout
Imagen
Severidad: 1
Heurístico: #5, Prevención de errores
Reflexión acerca de la severidad:
El sistema informa de la hora actual de conexión y de que el usuario está logado en el sistema, pero no avisa de cuánto tiempo queda para el logout.
Recomendaciones:
Añadir un contador o similar para avisar del logout automático del sistema
Consideraciones de la interfaz desde una perspectiva de género e inclusión.
La naturaleza de la Sede Electrónica de la Agencia Tributaria, así como el de cualquier otra Administración Pública, es la de servir a las personas ciudadanas. Por ello sería esperable que dicha Sede hubiese sido diseñada aspirando a cubrir la amplia diversidad etnográfica, cultural, funcional y de género que compone nuestra sociedad, prestando especial atención en no excluir a ningún sector de la población.
A pesar de que el contenido de la web a priori tiene un carácter un carácter neutro (no hay secciones específicas por genero como por ejemplo en retail), es posible encontrar puntuales puntos de mejora en cuanto al uso de un lenguaje más inclusivo. Listamos a continuación algunos de ellos:
Sección «Calendario del contribuyente»:¿Podría llegar a reformularse como «Calendario de las personas contribuyentes» para evitar sesgos binarios de género?
Sección «Empresarios individuales y profesionales»: En línea al ejemplo anterior, ¿no seguiría teniendo sentido si se reformulase como «Personas empresarias individuales y profesionales»?
Sección Colaborar con la Agencia Tributaria: En esta sección, ¿tendría sentido sustituir «representantes aduaneros» por «representantes ante aduanas» o incluso por «representación de terceras personas ante aduanas»?
Área personal de la declaración de la renta: En esta sección encontramos que entre nuestros datos está la clasificación Varón/Mujer, aunque realmente cabe pensar si realmente esta información es relevante para los efectos de esta sede y el tipo de gestiones que en ella se realizan. No obstante, quizás también cabría pensar que pudiera ser relevante para realizar cierta discriminación poblacional positiva (p.ej. programa de ayudas a minorías).
Conclusiones
Debido al importante tráfico que genera (10.8 M visitas/mes) y la importancia que tiene para los ciudadanos de España, en este ejercicio se ha evaluado la usabilidad de la sede electrónica del Ministerio de España a través de una Evaluación Heurística sin usuarios.
El número de gestiones posibles dentro de esta web es muy numerosa, por lo que hemos centrado el estudio en aspectos generales del portal de entrada (o Landing Page) y algunos posibles flujos funcionados relacionados con la declaración de la renta.
En total, de manera no exhaustiva se han realizado 16 hallazgos, de los cuales 11 están relacionados con malas prácticas. Es notable como algunos de los principios heurísticos se han tenido en cuenta para el diseño de algunas secciones (es decir, siguen las buenas prácticas) y no se han tenido en cuenta en otras.
Como conclusión, cabe señalar que a pesar de los esfuerzos realizados por el Ministerio de Hacienda para unificar todas las gestiones de la Agencia Tributaria en un sólo portal más usable, aún queda espacio para la mejora del mismo en cuanto a usabilidad para las personas usuarias.
Torres B., D. (2021). “El rol del Diseño UX en la inclusion de género” [artículo en línea].< https://www.torresburriel.com/weblog/2021/10/28/el-rol-del-diseno-ux-en-la-inclusion-de-genero/>. Torres Burriel Estudio. [Fecha consulta: 17 de noviembre de 2022]
Carreras, O. (2012). «Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística» [en línea]. Usable y accesible. <https://olgacarreras.blogspot.com.es/2012/03/estandares-formales-de-usabilidad-y-su.html>. [Fecha consulta: 17 de noviembre de 2022]
«Principios de diseño de interacción de Bruce Tognazzini» [artículo en línea]. <http://galinus.com/es/articulos/principios-diseno-de-interaccion.html>. [Fecha consulta: 17 de noviembre de 2022].
Zapata, M. «Métodos de evaluación sin usuarios» [en línea]. <http://openaccess.uoc.edu/webapps/o2/bitstream/10609/12922/8/usabilidad_módulo2_métodos%20de%20evaluación%20sin%20usuarios.pdf>. [Fecha consulta: 17 de noviembre de 2022].
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].
Partiendo de las leyes de percepción más relevantes analizaremos mediante ejemplos el grado de cumplimiento (incumplimiento) de las mismas:
Ley de Fitts
Ley de Hick
Similitud
Metáfora
Disonancia cognitiva
Modelo mental
1. Ley de Fitts
1.1. Descripción de Ley de Fitts
El tiempo necesario para desplazarse hasta un elemento depende del tamaño del elemento y de la distancia hasta este.
1.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción
En la página de Amazon cuando se ha de introducir el País asociado a una dirección, encontramos menus «dropdown» con un gran número de elementos que, por lo general, suele requerir de un tiempo considerable del usuario para encontrar el país deseado.
1.3. Ley de Fitts: ¿cumplimiento o incumplimiento?
En este caso la Ley de Fitts se prueba cierta porque no se ha tenido en cuenta en el diseño.
2. Ley de Hick
2.1. Descripción de Ley de Hick
El tiempo que tardamos en tomar una decisión aumenta en relación directa con el número de alternativas disponibles: a más alternativas, mayor tiempo
2.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción
La página en contexto es la landing page de la web oficial del IAAP (Instituto Andaluz de la Administración Pública). En concreto pueden verse un gran número de elementos que dificultan al usuario alcanzar su objetivo, lo cual se ve empeorado por la falta de un menú navegador.
2.3. Ley de Hick: ¿cumplimiento o incumplimiento?
Incumplimiento
3. Similitud
3.1. Descripción de Ley de Similitud
Los elementos que son similares son percibidos como relacionados, frente a los elementos que son diferentes.
3.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción
El calendario de Google, muestra todos los días del mismo mes con el mismo formato, excepto el día actual (según la foto 20 de Octubre). Además, los días de los meses diferentes aparecen con un formato diferente a los días del mes en curso.
3.3. Ley de Similitud: ¿cumplimiento o incumplimiento?
Cumplimiento
4. Metáfora
4.1. Descripción de la Metáfora
Uso de una analogía para hacer referencia a un concepto.
4.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción
El uso de metáforas está especialmente extendido en la iconografía. En este caso podemos ver en la página de eBay los iconos de una campana y del carrito de la compra, simbolizando las alertas al usuario y el listado de elementos que el usuario se dispone a comprar respectivamente.
4.3. Metáfora: ¿cumplimiento o incumplimiento?
Cumplimiento
5. Disonancia cognitiva
5.1. Descripción de la Disonancia Cognitiva
Cuando no hay una coherencia entre los pensamientos, las creencias o las actitudes se trata de una disonancia, que resulta en una experiencia desagradable o molesta.
5.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción
En este ejemplo podemos ver el empaquetado de los yogures Danacol, unos yogures que aclaman reducir el colesterol. Para hacer más potente el mensaje, el envase incluye una imagen que representa una fuerza que arrasa por un conducto, quitando toda suciedad. Esto el usuario lo relaciona con la reducción de colesterol, produciendo una sensación de alivio.
5.3. Disonancia Cognitiva: ¿cumplimiento o incumplimiento?
Cumplimiento.
6. Modelo Mental
6.1. Descripción del Modelo Mental
Modelos conceptuales que tenemos las personas sobre cómo funciona el mundo que nos rodea.
6.2. Ejemplo: Imágenes, dispositivo, interfaz, contexto de la interacción
En este ejemplo podemos ver el logotipo de una consultoría de servicios psicológicos. En este caso, a pesar de no estar perfectamente delimitado, es fácil reconocer que el icono que acompaña a este logotipo representa un cerebro.
6.3. Modelo Mental: ¿cumplimiento o incumplimiento?
En esta entrada vamos a analizar los diferentes principios de la usabilidad de las interfaces, desde un punto de vista práctico, exponiendo para cada principio un ejemplo de cómo se ha tenido (o no se ha tenido) este en cuenta. Para ello se expondrán interacciones con productos físicos y digitales, así como con servicios u otras situaciones que cualquier persona puede experimentar en su vida diaria.
Los principios de usabilidad que tendremos en cuenta son:
Coherencia
Confirmación
Control
Errores
Punto de Entrada
Reconocer antes que recordar
Restricciones
Accesibilidad
Visibilidad
Affordance
Retroacción
1. Coherencia
Descripción del principio: Los sistemas son más usables cuando las funciones similares se representan de manera similar.
Imagen del ejemplo:
Dispositivo e interfaz: Alargadera eléctrica
Contexto del ejemplo y la interacción: Los enchufes de una alargadera eléctrica mantienen la coherencia con los enchufe de pared, puesto que estos sirven el mismo propósito.
Clasificación, ¿buena o mala práctica?: Buena práctica
2. Confirmación
Descripción del principio: Para ciertas tareas críticas, consiste en verificar que el usuario realmente quiere ejecutar la acción y que no es una interacción accidental.
Imagen del ejemplo:
Dispositivo e interfaz: Google Chrome
Contexto del ejemplo y la interacción: Cuando estás trabajando en un archivo editable en línea desde Chrome y el sistema detecta que vas a salir de la pantalla sin guardar los cambios, el sistema te alerta de ello y pide confirmación de si quieres realmente salir del sitio sin guardar o cancelar la acción.
Clasificación, ¿buena o mala práctica?: Buena práctica (aunque no siempre funciona correctamente)
3. Control
Descripción del principio: El nivel de control de un usuario sobre el sistema es proporcional al nivel de experiencia del usuario.
Imagen del ejemplo:
Dispositivo e interfaz: SAP / Documentación
Contexto del ejemplo y la interacción: SAP es generalmente utilizado por gente experta en este sistema, pero para los principiantes en esta herramienta, sus primeros usos son por lo general notablemente árduos.
Clasificación – ¿buena o mala práctica?: Mala práctica, porque a pesar de que SAP es un sistema muy extendido y cuyas bondades son innumerables, he visto profesionales que tras años de experiencia en esta herramienta siguen sin ser capaces de utilizar el potencial de esta herramienta por la dificultad que presenta la misma, que, en el caso de multinacionales, se ve acrecentada por desarrollos ad-hoc hechos específicamente para cada empresa.
4. Errores
Descripción del principio: Los humanos cometemos errores con frecuencia, bien de ejecución (se hace algo que no se pretendía hacer) o bien de intención (cuando el razonamiento para realizar una acción no es adecuado.
Imagen del ejemplo:
Dispositivo e interfaz: Mensaje de confirmación en JIRA cuando se pretende rechazar un ticket.
Contexto del ejemplo y la interacción: En este caso, el usuario está intentando rechazar un ticket y las opciones que tiene para cerrar el circuito son: cancelar o rechazar. Por ello, si en sí un usuario puede cometer errores, con este tipo de mensajes es aún más fácil que los cometa.
Clasificación, ¿buena o mala práctica?: Mala práctica
5. Punto de Entrada
Descripción del principio: el punto de entrada de un sistema interactivo nos proporciona una primera impresión del mismo que posteriormente influirá notablemente en cómo percibimos el sistema o producto.
Imagen del ejemplo:
Dispositivo e interfaz: Landing page de la app móvil de N26 (un banco 100% online).
Contexto del ejemplo y la interacción: Tras hacer login en la app móvil de N26, accedemos a la landing page. A simple vista puede observarse una interfaz intuitiva y fácil de usar, a pesar de que es un banco 100% online que ofrece todas las posibles operaciones que puedes hacer con cualquier otro banco. Esto automáticamente se gana la confianza de aquellos usuarios más recelosos del concepto de banca 100%.
Clasificación, ¿buena o mala práctica?: Buena práctica
6. Reconocer antes que recordar
Descripción del principio: Reconocer las cosas es mucho más fácil que recordarlas
Imagen del ejemplo:
Dispositivo e interfaz: Esta es la línea de comandos de Windows para ejecutar una bbdd (concretamente PostgreSQL)
Contexto del ejemplo y la interacción: Para establecer una conexión a una instancia de una bbdd de PostgreSQL (o cualquier otra) desde la línea de comandos, es necesario recordar una serie de comandos (en este caso «C: \Users\Gerard>psql -d postgres -U postgres»), que sin conocerlos de antemano es muy difícil que el usuario en cuestión sea capaz de intuir qué tiene que hacer para conseguir su objetivo.
Clasificación: ¿buena o mala práctica?: A pesar de que la línea de comandos es clave para ciertos perfiles profesionales (p.ej desarrolladores de software o administradores de sistemas informáticos), no tiene en cuenta este principio de la usabilidad.
7. Restricciones
Descripción del principio: La dificultad de experimentar con una situación nueva está directamente relacionada con el número de posibilidades que se presentan.
Imagen del ejemplo:
Dispositivo e interfaz: Cubertería de protocolo en un banquete.
Contexto del ejemplo y la interacción: El protocolo de colocación de cubiertos se basa en la accesibilidad y el orden de uso. Esto podría intuirse si, por ejemplo, tenemos 2 tenedores y 2 cucharas diferentes. No obstante, conforme el número de cubiertos crece, es más difícil intuir el prpósito que sirve cada elemento de la cubertería.
Clasificación, ¿buena o mala práctica?: Mala práctica
8. Accesibilidad
Descripción del principio: Concepto para describir si el diseño de un producto, dispositivo o servicio puede ser utilizado por personas de todas las capacidades y discapacidades.
Imagen del ejemplo:
Dispositivo e interfaz: Cierre, minimización y maximización de documentos en Mac.
Contexto del ejemplo y la interacción: Los 3 botones que caracterizan el cierre, minimización y apertura en Mac vienen determinados por los colores rojo, amarillo y verde respectivamente, pero no hay ningún elemento/icono adicional que los distinga. Los casos más comunes de daltonismo se asocian a fallos en la detección del color rojo y verde, por lo que cabe la duda de que una persona que padezca de estas deficiencias encontraría esta interacción usable o no.
Clasificación, ¿buena o mala práctica?: Mala práctica.
9. Visibilidad
Descripción del principio: Hacer más visibles las partes relevantes del diseño
Imagen del ejemplo:
Dispositivo e interfaz: Botonadura de una barra de sonido – lateralmente se observa el regulador de volumen y en la parte trasera unos botones de canción anterior, pausa y canción siguiente.
Contexto del ejemplo y la interacción: En las barras de sonido actuales, la funcionalidad principal es la regulación del sonido, ya que el resto de controles de canción suelen gestionarse directamente desde el dispositivo al que se conecte la barra de sonido (p.ej. desde spotify en el teléfono móvil). En algunas barras de sonido pueden encontrarse otra botonadura complementaria de pausa y cambio de canción, pero sin duda, ejerciendo un papel secundario. En este caso puede observarse como la botonadura más prominente es la de regulación del volumen, mientras que la botonadura de cambio de pista pasa muy desapercibida en la parte trasera del aparato.
Clasificación, ¿buena o mala práctica?: Buena práctica
10. Affordance
Descripción del principio: Capacidad de un objeto de sugerir su propia utilización
Imagen del ejemplo:
Dispositivo e interfaz: Empuñadura de un agarre de musculación.
Contexto del ejemplo y la interacción: Una empuñadura, con la forma ergonómica de una mano y con protectores, sugiere para qué parte del cuerpo es y cómo has de colocar tu mano en ella para conseguir tu objetivo como usuario (ejercitar la musculación de agarre).
Clasificación, ¿buena o mala práctica?:Buena práctica
11. Retroacción
Descripción del principio: Visibilidad del efecto de nuestras acciones
Imagen del ejemplo:
Dispositivo e interfaz: Migas de pan en la Web de Decathlon
Contexto del ejemplo y la interacción: En la Web de Decathlon es posible acceder a cientos de productos a través de una serie de filtros (deporte, sexo, tipo de producto,..). Para facilitar al usuario el seguimiento de sus propias acciones y saber dónde se encuentra este respecto al mapa de la web, han incluido unas migas de pan en la parte superior izquierda en color gris.
Clasificación, ¿buena o mala práctica?: Buena práctica, aunque quizás el color gris no es fácilmente visible a primera vista.
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:
Mensaje de bienvenida N26
Instalación de la aplicación móvil N26 y familiarización con el entorno
Activación de la tarjeta a través de la app móvil
Búsqueda de un cajero cercano que admita N26
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).
La elaboración del prototipo se ha realizado teniendo en cuenta tanto los requisitos del sistema como las pruebas de usabilidad en usuarios (especialmente en lo que se refiere a etiquetado y jerarquía del sitio)
Propuesta de Valor de In-Edit Connect
A través de la herramienta gráfica del Value Canvas Proposition, se presenta la propuesta de valor de la aplicación de In-Edit Connect:
¿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.
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.