Beta: Diseño y Accesibilidad

De Casiopea


TítuloDiseño y Accesibilidad: Grupo Beta
Tipo de ProyectoProyecto de Taller
Palabras ClavePICTOS
Período2021-2021
AsignaturaTaller de Diseño de Interacción
Del CursoTaller de Diseño de Interacción 2021
CarrerasDiseño, Interacción y Servicios"Interacción y Servicios" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Alondra Zamorano, Camilo Miranda Burgos, Francisca Alvarez Escobar, Paula Herrera, Javiera Aranda Reinoso
ProfesorHerbert Spencer, Renee Rodo

ANTECEDENTES

¿Qué es Experiencia de Usuario (UX)?

Todos los aspectos de la experiencia del usuario cuando interactúa con el producto, servicio, medio ambiente o instalación. - Usability or user experience – what’s the difference?

El diseño de la experiencia del usuario (UX) es el proceso de creación de productos que brindan experiencias significativas y relevantes a los usuarios. Esto implica el diseño de todo el proceso de adquisición e integración del producto, incluidos los aspectos de marca, diseño, usabilidad y función. https://www.interaction-design.org/literature/topics/ux-design

¿Qué es la accesibilidad?

La accesibilidad en el diseño aborda las experiencias de usuarios con un enfoque de equivalencia para las personas con discapacidades física o cognitivas, personas con discapacidades relacionadas con la edad y también usuarios inexpertos, con conexiones lentas y con dificultades con el idioma. Esto, pensando en que todos, todas y todes, debemos poder percibir, comprender, navegar e interactuar con sitios web y otros productos digitales sin barreras. Es por ello que el diseño debe indicar siempre claramente lo que ofrecemos de una manera sencilla, clara e intuitiva, y con la mínima carga cognitiva para el usuario.

Las 10 Heurísticas de Jakob Nielsen

Heurísticas según la RAE: En algunas ciencias, manera de buscar la solución de un problema mediante métodos no rigurosos, como por tanteo, reglas empíricas.

Así, en diseño UX, es la técnica para diseñar desde el origen (y "evaluar") la usabilidad de una interfaz web para reducir las frustraciones de sus usuarios.

Jakob Nielsen es un diseñador web, ingeniero de interfaces nacido en 1957 en Dinamarca, que actualmente es todo un referente en usabilidad ya que estudió 249 problemas y a partir de ellos diseñó lo que ahora denominamos las diez heurísticas de usabilidad, que todo producto digital debería tener en cuenta a la hora de ser diseñada. Es uno de los Fundadores de Nielsen Norman Group.

¿Cuáles son sus 10 reglas?

  1. Mostrar estado del sistema, manteniendo siempre informados a los usuarios de lo que está ocurriendo.
  2. Hablar el lenguaje del usuario, mediante palabras, frases y conceptos que sean familiares y pueda comprender todo.
  3. Control y libertad del usuario, deben poder navegar libremente encontrando salidas fáciles y rutas alternativas.
  4. Consistencia y estándares. Cuándo las cosas se comportan siempre igual, los usuarios no tienen que preocuparse sobre qué pasará luego.
  5. Prevenir errores', siempre es mejor ayudar a los usuarios a no cometer errores antes que comunicar correctamente un error.
  6. Aliviar la carga en la memoria del usuario. El usuario no debería tener que recordar información de una parte a otra. Las instrucciones de uso del sistema deberían ser visibles o fácilmente accesibles cuándo sea necesario.
  7. Atajos, flexibilidad y eficiencia. Es bueno un uso de aceleradores que pueden ofrecer una interacción más rápida a los usuarios expertos.
  8. Estética y minimalismo. Pensar siempre en que “menos es más”. Para ello: eliminar el ruido visual, jerarquizar la información y eliminar información irrelevante o que no suele utilizarse.
  9. Comunicar errores con claridad. Que los errores sean fáciles de reconocer visualmente, siempre debemos de explicar el problema con claridad y proveer una solución o camino a seguir.
  10. Ayuda y documentación. El usuario necesitará en ocasiones alguna documentación de ayuda.

Microsoft Design - Inclusive Design

Para complementar el estudio, leímos las guías de Diseño Inclusivo realizadas por Microsoft.

Archivo:Inclusive toolkit manual final.pdf INCLUSIVE: A Microsoft Design

Archivo:Inclusive toolkit activities.pdf INCLUSIVE: A Microsoft Design Toolkit

Archivo:InclusiveDesign DesigningForGuidance.pdf DISEÑO PARA ORIENTACIÓN

Archivo:InclusiveDesign RespectingFocus.pdf RESPETANDO EL ENFOQUE: Una guía de comportamiento para sistemas inteligentes

OBSERVACIÓN

Discusión grupal

Desde las preguntas iniciales,

¿Se podría extender el modelo de apoyos actual hacia las transacciones digitales?

¿Qué punto de contacto sería el más adecuado para acompañar a las personas en sus trámites Web?

Comenzamos a observar distintas aplicaciones y sitios webs, centrándonos en sus procesos de compra digitales, a modo de realizar un "benchmark comparativo" enfocado en la inclusividad que tienen tanto en las interfaces como en la interacción al momento de realizar transacciones digitales. Así, observamos 3 dimensiones diferentes:

  1. Aplicaciones de bancos usadas por nosotros: ¿Son intuitivas?, Si tienen botones de ayuda ¿son visibles y presente al momento de usar la app?, ¿los colores son inclusivos?
  2. Otros tipos de aplicaciones o servicios que busquen ser inclusivos: ¿Qué las hace ser inclusivas?
  3. Procesos de compra previo a estar en la app misma de la transacción: ¿Cómo es la interacción del usuario con las dos aplicaciones?

Pensando en cómo abordar el desafío propuesta, añadimos nuestras propias interrogantes en relación a PICTOS:

  • ¿PICTOS acompaña siempre desde el teléfono? ¿o tiene una versión de escritorio a modo de expansión web?
  • ¿Cómo acompaña PICTOS cuando estoy realizando una transacción digital? (En el banco, en Webpay, etc.) ¿la pantalla se divide, aparece en el Status Bar o en las notificaciones?
  • ¿Qué otros modo de ser inclusivo podría tener? ¿O como "aumenta" la inclusividad?
  • ¿Qué pasa con PICTOS en los "teléfonos para adultos"? (con botones)

Observaciones individuales

Camilo

Ripley

  1. Ingreso a la pagina de Ripley. Inicialmente llama la atención la gran cantidad de información en la pantalla.
  2. Abrir menú de categorías y elegir la deseada. Cuenta con una gran cantidad de categorías y subcategorías.
  3. Elegir prenda deseada.
  4. Elegir color y talla, y agregar a la bolsa.
  5. Ir a la bolsa.
  6. Antes de poder pasar al pago se requiere ingresar a cuenta de Ripley, registro o comprar como invitado.
  7. Se elige el despacho o retiro del producto, en ambos casos se pide dirección.
  8. Elegir método de pago.
  9. Seleccionar banco y pasar a la confirmación del pago.

Banco de Chile Aplicación de banco, ejemplo de transferencia.

  1. Ingresar a la App.
  2. Seleccionar la opción transferir.
  3. Seleccionar destinatario o agregar uno nuevo.
  4. Ingresar monto a transferir.
  5. La app requerirá autorización para continuar.
  6. Ingresar clave de autorización.
  • No existe ningún tutorial que explique algunas opciones dentro de la app, si bien la interfaz es amigable algunas acciones podrían ser difíciles de realizar como el agregar nuevo destinatario, no cuenta con ningún asistente.

Lazarillo

LazarilloApp te dirá, por medio de notificaciones de voz, dónde te encuentras y qué hay a tu alrededor: paraderos, cajeros, tiendas, cafés, etc. A medida que te desplazas por la ciudad, la aplicación te mostrará los servicios a tu alcance, para que tengas acceso a todo lo que ofrece la ciudad.

  1. Lo primero al entrar a la app es una voz que invita a registrarse, como cualquier otra app.
  2. Posterior al registro se pasa al menú con distintas opciones de lugares a los cuales dirigirse mientras la voz indica tu ubicación.
  3. Cuenta también con un buscador para encontrar lugares específicos.
  4. Se pueden filtrar los lugares que lazarillo recomienda a medida que vas explorando.
  5. Cuando se selecciona una categoría muestra todos los lugares disponibles dentro de esta y como arribar al lugar: caminando, bus, auto o Uber.
  6. Al seleccionar el lugar se debe seleccionar también el sistema de navegación preferido teniendo como opciones lazarillo y Google maps.
  7. Lazarillo comenzará a dar las indicaciones para llegar al lugar a través de un motor de voz diciendo a que distancia esta de la próxima esquina y que lugares cercanos hay.
  • Un problema dentro de la app es que no hay ningún tutorial al inicio, este se encuentra en las sección de ajustes.

Paula

Homecenter

  • Al entrar, lo primero que llama la atención es el encabezado deslizable que muestra los productos en oferta o especiales de temporada.
  • Los productos destacados se visualizan en el inicio, mientras que el resto se agrupa por diversas categorías disponibles en la barra de navegación.
  • Al seleccionar una categoría, se prioriza mostrar por defecto los productos recomendados, visualizando por orden de importancia: la imagen del producto, su precio actual, oferta con tarjeta CMR, valoración, disponibilidad de retiro/despacho.
  • Opción para elegir entre 2 formas de visualización de productos: lista y grilla.
  • Opción para filtrar los productos dentro de la misma categoría por sus características: marca, rango de precio, color, opciones de entrega, entre otros.

Pasos para comprar: previamente debe agregarse el producto seleccionado al carrito de compra.

  1. Al dirigirse al carrito mostrará los productos previamente seleccionados y el "Resumen de compra", indicando el total a pagar y la opción para continuar con el pago.
  2. El segundo paso es el de "Despacho", donde el cliente debe ingresar su correo y la ubicación donde quiere recibir sus productos. Una vez ingresados, se calcula el monto total de despacho, es cual es sumado al "Resumen de compra".
  3. El tercer y último paso es el de "Pag"o, donde el cliente debe comenzar eligiendo su medio de preferencia (App FPay, Tarjeta CMR, Tarjeta de crédito, Tarjeta de debito)

MACH

Tarjeta de crédito virtual con uso exclusivo en aplicación móvil.

Para recargar la tarjeta se debe transferir de otro banco. Esto requiere seguir los siguientes pasos:

  1. Ingresar a la app o sitio web del banco.
  2. Copiar los datos de la cuenta MACH e ingresarlos para hacer una transferencia.
  3. Elegir el monto y confirmar la transferencia
  4. Para pagar en un comercio (ej. Homecenter) se debe ingresar a la Tarjeta virtual que visualiza sólo por 60 segundos a los datos: Numero de tarjeta, Fecha de expiración y Código de seguridad. Estos datos se traspasan al comercio a hacer el pago, por ende, se necesitará tener ambas plataformas abiertas, usándose simultáneamente.

Francisca

Farmacias

Farmacias comparadas:

  • Farmacias Salcobrand
  • Farmacias Ahumada
  • Farmacias Cruz Verde

Las 3 páginas tienen estructuras similares, con banners superiores que van cambiando.

2 de ellas cuentan con bots asistentes. En la página de Salcobrand se le ofrece al cliente hablar por videollamada con un farmacéutico además de las consultas por chat. Aparte de esto, no hay ningún tipo de ayuda o acompañamiento al cliente durante su compra.

La distribución de categorías se diferencian en cada una, siendo Salcobrand la menos amplia, contando con 9. Luego viene Cruz Verde con 12, y finalmente Ahumada con un gran despliegue a primera vista, con varias subcategorías dentro de otras, lo que quizá pueda resultar confuso.

Proceso de compra en cada una: Para comparar, se buscó el mismo producto en las tres farmacias, mediante el buscador.

  • Salcobrand
    1. Aparecen los resultados ordenados por "Recién llegados", además de una barra de filtros a la izquierda. Al ver los productos aparece el formato (cantidad de comprimidos), precio, disponibilidad de retiro y/o despacho, y se puede seleccionar la cantidad a comprar ahí mismo.
    2. Al agregarlo al carro aparece un pop-up que ofrece ir a pagar o seguir comprando.
    3. En el carro aparece el producto, formato y cantidad, subtotal y total.
    4. El checkout tiene 3 pasos: Información cliente, Método de despacho y Medio de pago.
  • Ahumada
    1. No está el producto por lo que aparecen remedios similares en los resultados de búsqueda, ordenados por "Relevancia". *#A simple vista solo aparece el precio y el botón de agregar al carro.
    2. En el carro aparece el artículo, precio, cantidad y total parcial, y aparece de inmediato un formulario para pagar, que pide ingresar la dirección, elegir el método de envío y agregar algún descuento si el cliente tiene uno.
  • Cruz Verde
    1. Aparecen los resultados ordenados por "Ofertas Imperdibles", y una barra de filtros a la izquierda. Aparece el número de comprimidos en el mismo nombre de cada producto, y salen las opciones de despacho y retiro.
    2. Al agregar un producto aparece una barra a la derecha con lo que hay en el carro, sub total, total a pagar, y opciones de "ir a la bolsa" o "ir a pagar"
    3. El checkout tiene 3 pasos: Ingresar a mi cuenta, Despacho/Retiro, Pago y Confirmación.

Tenpo

  • Inicio de sesión para ingresar
  • Pantalla principal con un menú inferior con 3 opciones: Cuenta, tarjeta y ayuda.
    1. Cuenta: Depositar, transferencias, historial - y otros servicios.
    2. Tarjeta: Datos, limites y bloqueo.
    3. Ayuda: Centro de ayuda con buscador y preguntas frecuentes.

Para realizar un pago con Tenpo, se necesita usar la tarjeta virtual que proporciona la app.

  1. El usuario inicia sesión, ingresando a la app.
  2. Para ver los datos de la tarjeta, el usuario debe poner nuevamente su clave de acceso.
  3. Al realizarse la compra, se le pide al usuario que verifique su identidad con la aplicación.

La aplicación tiene una sección de ayuda muy completa, incluyendo un chat para preguntar dudas en vivo. Sin embargo, al ingresar, no hay algo que “acompañe” al usuario y lo guíe al realizar algún trámite.

Envision

  • Página de bienvenida.
  • Interfaz principal, con un menú inferior con 5 opciones: Texto, general, escanear y encontrar, vasos, ayuda.
  • Botones: texto instantáneo, texto de documento, más acciones.
  1. Al ingresar a la app da un aviso de que el usuario tiene 14 días de prueba.
  2. La aplicación identifica lo que el usuario enfoca con la cámara, ya sean textos, o una escena que describe.
  3. Al probar la app funciona bien, las descripciones son correctas, e incluso identifica el idioma de los textos que lee. #Solo al probar con texto manuscrito tuvo problemas intentando identificar el idioma. Pero al iniciar la app no hay voz que de las instrucciones, si no que aparece todo como texto.

Alondra

Supermercados

Se compararon los sitios webs de 3 supermercados:

  • Santa Isabel
  • Lider
  • Jumbo

Y se buscaron 3 productos distintos: Leche, lavalozas, hamburguesas congeladas. Esto, para observar cómo se ordena la información en las diferentes páginas.

  • Santa Isabel
    1. Ingresar al sitio web del supermercado.
    2. Aparecen los productos distribuidos por categorías, así que intuitivamente busco la de lácteos.
    3. En la ventana de lácteos aparecen las leches ordenadas de manera aleatoria.
    4. Apreto la que quiero comprar y me lleva a una ventana en donde aparece la foto del producto, sus características y la opción para "Agregar" al carro o "Guardar en la lista".
    5. Al agregarla al carro, aparece un pop up pidiéndome ingresar mi cuenta.
    6. Lo cierro pues quiero seguir buscando productos.
    7. Busco la categoría de limpieza, que aparece en la barra del sitio.
    8. Nuevamente, los productos están distribuidos aleatoriamente.
    9. Agrego el producto que deseo y comienzo a buscar las hamburguesas. Al no encontrar la categoría de congelados, me voy por la carnicería.
    10. En la categoría de carnicería no aparecen productos congelados.
    11. Decido buscar en el navegador el producto.
    12. Me aparece el resultado de búsqueda, mostrando en qué "departamentos" (categorías) está y permitiéndome filtrar la búsqueda al reconocer el producto.
    13. Al filtrar por lo que deseo, no aparece y la pantalla me avisa que no hay productos disponibles.
    14. Quito el filtro y vuelvo a la búsqueda inicial.
    15. Encuentro el producto que deseo y a través de la vista rápida, lo veo y lo agrego a mi carro.
    16. Reviso mi carro y le doy a continuar para proceder a pagar.
    17. Nuevamente, el sitio me pide ingresar mi cuenta para poder realizar el pago.
  • Lider
    1. Ingresar al sitio web del supermercado.
    2. Aparecen una barra con diferentes categorías, pero no de los productos. Así que decido buscar en "Departamentos".
    3. En "Departamentos" aparecen todas las categorías y las subcategorías. Presiono la de lácteos.
    4. Aparecen los productos ordenados de manera aleatoria.
    5. Busco el producto que deseo,
    6. Al agregarlo al carro, aparece un pop up preguntándome cómo quiero mi pedido, si a domicilio o pickup. Debo rellenar mi región y mi comuna.
    7. Introduzco los datos pero me dice que no hay cobertura para la dirección.
    8. Introduzco otra dirección y comienza a cargar. La reconoció y se cerró automáticamente el pop up.
    9. Vuelvo al menú de "Departamentos" y buscó la categoría de "Limpieza y Aseo", con lo que el menú se extiende y presiono la subcategoría de "Lavaloza y lavavajilla" en Baño y Cocina.
    10. Aparecen promociones de marcas y bajo buscando el producto. Lo aprieto y me lleva a la ventana de este.
    11. En la ventana del producto aparece su nombre, algunas características, el precio y "Agregar". Lo agrego.
    12. Vuelvo a "Departamentos" y buscó la categoría de "Congelados", luego "Hamburguesas".
    13. Aparecen los productos de manera aleatoria y un menú a la izquierda que muestra los tipos de congelados. Ahí buscó por "Vegetarianos".
    14. Busco el producto que deseo y lo agrego directamente.
    15. Voy al carro de compras que está en la barra de arriba para revisarlo, se despliega un pop up que me muestra mis productos y presiono "Ir al carro".
    16. Me pide que inicie sesión o me cree una cuenta para poder continuar.
  • JUMBO
    1. Ingresar al sitio web del supermercado.
    2. Sigo el mismo procedimiento que en el sitio de Santa Isabel, pues el sitio web es el mismo.
  • En general, los tres sitios webs no son muy complejos de comprender al entrar, la barra de menús que manejan parecen ser una buena forma de organizar la información inicial para comenzar a navegar.
  • La organización de las categorías es más cómoda en el sitio de Lider, pues es más práctica y directa.
  • Que esté apareciendo constantemente un pop up preguntándote datos no es agradable e interrumpe la interacción.
  • El menú de Lider tiene una gráfica tipográfica un tanto pequeña y sin los blancos suficientes, pues aparece como una mancha de mucha información al principio.
  • La evaluación no desaparece en el sitio web de Santa Isabel ni JUMBO. Pienso que debería desaparecer al cerrarla y no minimizarse.
  • El filtro de Santa Isabel y de JUMBO es bueno y concreto en algunas ocasiones pero en otras es demasiado específico. Me pregunto si realmente se necesita que lo sea tanto o podría ser un poquito más general, pues genera una sensación de "presión" por no saber qué apretar exactamente.

Banco Estado Proceso de Transferencia desde la app móvil de Banco Estado.

  1. Abro la aplicación y me pide que ingrese mi clave para entrar a mi cuenta. A los segundo aparece una ventana emergente que puedo validar mi huella para ingresar. Así que colocó mi huella.
  2. Aparece el menú principal con las cuentas que tengo, los montos y una barra inferior con las posibles acciones a realizar. Presiono la opción de "Transferir".
  3. Me pregunta si quiero "Transferir a terceros" o "Entre mis productos". Yo cliqueo la primera opción.
  4. Busco la persona a la que deseo transferirle en el buscador y me arroja los contactos que tiene ese nombre. Presiono el que quiero.
  5. En este caso, me tres opciones de cuentas: "CuentaRUT", "Cuenta Corriente" del Banco Santander y "Transferir a nueva cuenta". De manera predeterminada aparece seleccionada la primer opción.
  6. Cambio a la cuenta a la que yo deseo transferir y cliqueo en "Continuar"
  7. Me aparecen los datos desde dónde estoy transfiriendo y hacia dónde, me pregunta por el monto que deseo transferir y un mensaje opcional.
  8. Relleno los datos y doy en continuar. Me da la opción de ingresar las claves de la tarjeta de coordenadas o pagar con "BE Pass".
  • La aplicación es bastante legible e intuitiva en una primera instancia.
  • Pienso que tal vez los textos pueden tener un tamaño muy pequeño de letra.
  • Si bien cuenta con un menú de "Más opciones" en donde hay una sección para conocer la app, no es algo a lo que se pueda acceder de manera "fácil" o "inmediata", además de que es solamente texto con letra pequeña.
  • Podría contar tal vez con algún asistente de ayuda, un altavoz que te ayuda a usar la app o incluso presionar unos botones que desplieguen ventanas emergentes que ayuden. Pero pienso que para alguien que no sabe bien cómo usar la aplicación y que no se maneja bien con los smartphones puede ser frustrante.

Javiera

Tecnología

Se compararon 2 tiendas de tecnología

  • PCfactory
  • Compratecno

PCfactory paso a paso:

  • Selección del producto
    1. Ingreso a la pagina web www.pcfactory.cl
    2. Inicio sesión.
    3. Hago clic en una de las categorías (lado lateral izquierdo).
    4. Hago clic en una sub-categoría.
    5. Presiono sobre el producto que necesito.
    6. Hago clic en agregar al carro.
    7. Elijo entre despacho a domicilio o retiro en tienda.
    8. Presiono continuar compra.
  • Envío del producto
    1. Completo el formulario de dirección.
    2. Completo los datos de la persona que retira o recibe.
  • Pago del producto
    1. Selecciono el método de pago.
    2. Elijo el tipo de documento boleta o factura.
    3. Acepto los términos y hago clic en pagar.
    4. Te redirige a la pagina Webpay para terminar el pago del producto.
  • Al ingresar a la pagina lo más relevante son los anuncios de otros productos, lo que es bastante abrumador.
  • El blanco al estar bien distribuido hace que la tipografía se pueda leer mas rápido.
  • La descripción del producto es bien dinámica ya que no es un listado de las características, si no una imagen del producto mostrando partes de el y una breve descripción.
  • El apartado de la garantía tiene dos colores claves el verde (define los derechos que tiene el comprador) y el anaranjado (los deberes del comprador).
  • Se pueden comparar los productos y no solo entre dos, también pueden ser mas. Esto es bastante útil ya que muchas personas no somos capaces de retener la información por tanto tiempo.

Compratecno paso a paso:

  • Selección del producto
    1. Ingreso a la pagina web compratecno.cl (por si necesito ayuda automáticamente nos contacta un asistente virtual).
    2. Inicio sesión.
    3. Hago clic en el menú(extremo superior izquierdo).
    4. Hago clic en una categoría.
    5. Presiono sobre el producto que necesito.
    6. Hago clic en agregar al carro.
    7. Hago clic en realizar pedido.
    8. Presiono pagar.
  • Envío del producto
    1. Completo el formulario de dirección.
    2. Selecciono el método de envío.
  • Pago del producto
    1. Selecciono el método de pago.
    2. Acepto los términos y hago en pedido listo para pagar.
    3. Te redirige a la pagina Webpay para terminar el pago del producto.
  • Encontré interesante que no solo puedas chatear con el asistente virtual, también puedes enviar imágenes del producto que buscas.
  • Me distrae tanta tipografía en negrita.
  • Hay un exceso de información, y me costo decidir por donde partir.
  • El total de la compra en el icono de carro que se encuentra al extremo superior derecho es bastante útil, para no sobrepasar el limite.

Coopeuch Paso a Paso para realizar una transferencia

  1. Ingresa a la App y escribe tu clave.
  2. Haz clic en el apartado de transferencias. Elige si la transferencia es a terceros o entre tus productos.
  3. Selecciona la cuenta de origen.
  4. Selecciona la cuenta de destino.
  5. Escribe el monto a transferir. Haz clic en siguiente.
  6. Haz clic en el botón autorizar.
  7. Ingresa tu clave Coopeuch Pass y autoriza.
  8. Transferencia realizada.
  • Apenas entras a la app te bloquea aquellos atajos que no puedes ocupar, por lo que hace aun mas fácil el ocuparla.
  • Cada función de la app está a la vista, eso es bueno ya que no hay que andar buscando atajos. Algunas se pueden realizar sin haber iniciado sesión.
  • Me facilita mucho que no tenga que ingresar RUT y contraseña para iniciar sesión, pues ahorra tiempo y no tengo que recordar tanta información
  • La app tiene un asistente virtual llamado IVIC, es una buena ayuda para resolver ciertas dudas, aunque muchas veces las respuestas no son las esperadas.
  • Siento que es un poco molesto tener 2 apps solo para que la transferencia se pueda concretar.
  • La paleta de colores que ocupan es bien agradable y distingue bien las jerarquías de las tipografías.

Be My Eyes

Be My Eyes se creó para ayudar a personas ciegas o con problemas de visión. La aplicación está compuesta por una comunidad global de ciegos y personas con problemas de visión y voluntarios sin discapacidad visual. Be My Eyes toma el poder de la tecnología y la conexión humana para llevar vista a las personas con pérdida de visión.

Paso a Paso para recibir ayuda de un voluntario:

  1. Ingreso a Be My Eyes.
  2. Hago en llamar al primer voluntario disponible.
  3. Hago mis consultas al voluntario.
  4. Finalizo la llamada al terminar mis consultas.
  • Be My eyes tiene dos botones principales, cabe decir que tienen un gran tamaño haciendo mas fácil poder hacer clic (lo justo y necesario).
  • Puedes ingresar como voluntario, como una persona no vidente o bien con problemas de visión.
  • Un buen método de comunicación es la video llamada, ya que es bueno tener la ayuda de alguien real.
  • Puedes seleccionar el idioma que necesitas (se puede cambiar).
  • Es interesante que automáticamente te habilite la cámara trasera.
  • También existe un apartado de ayuda especializada, la que es atendida por video llamada por el servicio al cliente de la misma plataforma y colaborados de ella (la disponibilidad de estas ayudas son distinguidas con el color verde para lo disponible y el color rojo lo no disponible).

LEVANTAMIENTO PICTOS

  • Onboarding:
    1. El botón para el audio tiene un tamaño muy pequeño.
  • Menú
    1. Las categorías aparecen muy limitadas y pueden llegar a ser confusas en una primera instancia, sin conocer la app.
    2. No es tan claro cómo buscar información “específica”, hay que divagar al comienzo.
    3. Tal vez debería haber subcategorías.
    4. Ej: Si quiero sacar un bono FONASA, voy a trámites o voy a salud? Si quiero sacar una tarjeta de metro, voy a transporte o a trámites? ¿FONASA va en la parte de salud o de trámites?
  • Épicas:
    1. Evaluación: Es confuso que haya una serie de pasos y que arriba haya un cuadro con la puntuación, pareciera que ser refieren a lo mismo pero no es así.

Pruebas iniciales de Usuario con la aplicación actual de PICTOS

Se realiza una prueba con una persona que no conoce la aplicación, no sabe de qué se trata y tiene una primera interacción con esta.

Comentarios

  • La app no tiene mucha información, por lo que no se puede navegar mucho en ella.
  • La falta de información me provoca frustración por no poder realizar los trámites que ya están allí, pero que no tienen pasos realizados.
  • Es bueno aportar con algunas tareas, pero lo malo es que se demoran en ser revisadas e implementadas en PICTOS.

PROPUESTA 1

Tras todo lo observado y estudiado anteriormente, considerando el cambio global respecto a los servicios públicos digitales y a la interacción de las personas con la tecnología, proponemos repensar y/o complementar PICTOS desde un enfoque accesible centrado en los servicios públicos digitales, es decir:

  1. Diseñar nuevos pictogramas de navegación digital para tareas digitales.
  2. Preguntarse por la interacción con aplicaciones de videollamadas, bancos, webpays, sitios webs de compra. Servicios públicos en general.


Aparece la pregunta ¿Cómo PICTOS acompaña en las interacciones digitales?

  • Extensión del navegador
  • Asistente de navegación
  • Pantalla divida o PICTOS en el Status Bar o en la notificaciones.

Correcciones y comentarios 17-06

  • Deberían observar situaciones e interacciones más ciudadanas y públicas. Servicios "básicos". Ej: Del Estado, de la Salud, de Transporte público.
  • No son pictogramas espaciales, tal vez son unos iconos, cosas que están fuera del mundo físico. Preguntarse y proponer una serie iconos para las tareas digitales. Pueden sustentarse los iconos de PiX.
  • ¿Cuál es la granularidad del paso a paso que se requiere para un apoyo digital?
  • Para el caso de las tareas transaccionales, es complejo porque se requiere de un “logeo”.
  • Con respecto a la arquitectura de información, a lo mejor se crean subcategorías en las categorías generales.

PICTOS tiene un sesgo que trata de ser mucho más simple que las aplicaciones diseñadas para el grueso de la población, por eso hay que tener tanto ojo.

Iteración en la observación e investigación

Considerando los comentarios y correcciones previas, decidimos volver a observar distintos servicios, sus interacciones, las tareas que ofrecen, el nivel de accesibilidad que ofrecen, etc.

En esta ocasión, volvimos a observar interacciones, pero esta vez de situaciones y servicios públicos. Con el enfoque de definir el paso a paso de las diferentes tareas que estos servicios ofrecen en sus sitios o aplicaciones digitales, y observando también la accesibilidad que tienen en cuanto a colores, diagramación y legibilidad.

FONASA Paso a Paso para comprar un bono

  1. Ingresa con tu clave única a Fonasa.
  2. Selecciona comprar bono en la pantalla.
  3. Selecciona el beneficiario del bono.
  4. Haz clic en "comprar bono prestaciones de salud".
  5. Realiza la búsqueda del médico.
  6. Selecciona el médico requerido.
  7. Confirma el resumen.
  8. Ingresa el RUT de la persona que realizará el pago.
  • Para diferenciar un botón de volver a uno de siguiente, utilizan dos colores un gris y un azul.
  • Las selección por opciones, es bastante útil porque no requiere de un recuerdo previo.
  • El autocompletar de datos ayuda a ahorrar tiempo y no forzar la memoria.
  • Automáticamente al momento de ingresar con la clave única Fonasa muestra el menú disponible para el beneficiario.
  • Es una web bastante concreta y legible, gracias al blanco bien trabajado. Esto permite una buena comprensión del contenido.

Buses Ahumada Paso a Paso para comprar un pasaje de ida

  1. Ingresa a busesahumada.cl en tu navegador.
  2. Haz clic en "Solo Ida" en la pantalla.
  3. Selecciona la ciudad de origen y de destino de tu viaje.
  4. Selecciona la fecha y horario de tu pasaje.
  5. Selecciona la cantidad de pasajeros.
  6. Elige el itinerario que más te acomode.
  7. Elige uno de los asientos disponibles.
  8. Completa el formulario entregado.
  9. Acepta los términos y haz clic en pagar.
  • El interlineado es muy poco, por lo que impide leer bien (Texto comprimido).
  • El recuadro está desfasado, me paso que me impidió concentrarme en la información.
  • Quizás lo relevante es altiro la información para todo pasajero y no para un grupo segregado.
  • Creo que le dan mucho protagonismo al Logotipo e Isotipo.

Buses JM Paso a Paso para comprar un pasaje de ida

  1. Ingresa a webjm.cl desde tu navegador.
  2. Selecciona el origen y destino de tu viaje.
  3. Escoge una fecha y haz clic en buscar.
  4. Haz clic en el itinerario que más te acomode.
  5. Selecciona un asiento disponible.
  6. Completa el formulario entregado por buses JM
  7. Acepta los términos y haz clic en pagar.


  • Al momento de completar los datos del pasajero solo sale ingresar el nombre, me sucedió que ingrese el nombre y apellido, al finalizar de rellenar el formulario no pude validar la información. Debería salir Ingresa tu nombre completo.
  • En general se hace bastante cómodo realizar la comprar en la plataforma, la paleta de color es bastante amigable y no desconcentra al lector.

Registro Civil, Servipag y horas médicas"

Solicitar Certificado en el sitio del Registro Civil

  1. Entra al Registro Civil
  2. Desliza hacia abajo y buscar el tipo de certificado que se requiere.
  3. Seleccionarlo y completar con el RUT
  4. Agrégalo al Carro.
  5. Completa con el RUT, luego el número de documento del Carné de Identidad, luego el correo electrónico y nuevamente el correo electrónico.
  6. Cliquea en “Continuar”
  7. El sitio procesará el pedido y te avisará que ya fue enviado a tu correo.
  8. Cliquea en “Finalizar”
  9. El certificado llegará a tu correo así que debes descargarlo desde ahí.


Pagar cuenta por ServiPag

  1. Entra al sitio de Servipag
  2. Busca y selecciona el servicio que se desea pagar en el buscador
  3. Selecciona la compañía del servicio
  4. Ingresa el número del cliente y cliquear en “Continuar”
  5. Agrega la cuenta a pagar.
  6. Selecciona método de pago.
  7. Ingresa tu RUT y tu correo electrónico y cliquear en “Continuar”
  8. Selecciona cómo quieres pagar.
  9. Paga la cuenta a través de tu banco.


Sacar Hora Médica Integra Médica

  1. Entrar al sitio de IntegraMédica
  2. Cliquear en “Reserva tu hora”
  3. Selecciona el tipo de hora que necesitas
  4. Completa con el RUT del paciente y la previsión
  5. Responde a la ventana de “Información acerca del Coronavirus”
  6. Selecciona si deseas buscar la hora por especialidad, profesional o videoconsulta.
  7. Completa con la especialidad y la prestación
  8. Completa con la región y el centro médico de preferencia
  9. Selecciona para cuándo deseas agendar
  10. Selecciona un día y una hora con el médico de tu preferencia.


Sacar Hora Médica en Red Salud

  1. Entrar al sitio de Red Salud
  2. Cliquear en “Reservar Hora”
  3. Selecciona el tipo de documento e ingresa el RUT del paciente
  4. Selecciona el servicio que necesitas agendar
  5. Ingresa el tipo de especialidad y la región o centro de atención
  6. Selecciona el día y busca al profesional de tu preferencia
  7. Selecciona la hora
  8. Completa con el teléfono y el correo electrónico del paciente


Sacar Hora Médica en Centromed

  1. Entra el sitio de Centromed
  2. Selecciona en “Reservar”
  3. Busca por especialidad y centro médico
  4. Selecciona el profesional para ver el horario
  5. Busca la hora que desees y cliquea en “Reservar”
  6. Completa con tu RUT y cliquea en “Ingresar”
  7. Completa con tu teléfono y correo electrónico.

PiXogramas

Para el diseño del paso a paso de las nuevas tareas digitales en PICTOS, decidimos ocupar los íconos de PiX.

PiX

https://wiki.ead.pucv.cl/PiX https://wiki.ead.pucv.cl/PiX_como_lenguaje_y_m%C3%A9todo_accesible_para_el_codise%C3%B1o

Los iconos de PiX se llevan a PICTOS definiéndolos como un nuevo inventario base para la creación de PiXogramas para las nuevas tareas digitales que PICTOS busca incluir. Se modifican, editan y complementan, a modo de modularlos y que funcionen de una manera similar como lo hacen los pictogramas actuales. Se comienzan también a categorizar según "contexto", "elemento" y "acción".

Nuevo Mapa de navegación

Pensando en cómo se agregan y ordenan estas nuevas tareas digitales en PICTOS, rediseñamos el mapa de navegación, dividiendo, en la pantalla principal de búsqueda y lugares, la navegación a través de dos categorías: Presencial y Digital, proponiendo que las tareas y la búsqueda se dividan en estas dos categorías.

Así, existe una primera pantalla en dónde se decide por una de esas categorías. En el caso de la Presencial, se mantiene igual, con la misma paleta de colores. En el caso de la Digital, se invierta la paleta de colores iniciales. Esto con el fin de otorgar una diferencia visual al momento de navegar.

PICTOS asistente

Se propone un especie de botón asistente que tiene como objetivo presentarse fuera de PICTOS en aquellas aplicaciones o sitios webs donde se realicen las tareas digitales.

Para ello se piensa en un botón que ofrece una lista con los pasos a seguir para realizar la tarea, así como apoyos gráficos y auditivos para esto.

ÉPICAS Wireframes

Correcciones y comentarios del 21-07

  • El ícono del asistente está raro y poco acorde al lenguaje gráfico de PICTOS.
  • ¿Es posible que haya aplicaciones encima de otras? ¿Por la seguridad? En los sitios web, se podría entrar desde PICTOS navegando, así no habría dos aplicaciones simultáneamente. O a lo mejor, se activa la accesibilidad de PICTOS, y se sincronizan ciertas cosas, a través de “espiar” el scroll. Eso implica una complejidad técnica muy importante. Entonces ¿qué es un apoyo digital? Observen los apoyos y a partir de eso definan el asistente.
  • ¿Cómo te acompaña cuando estás solamente desde el teléfono?
  • La propuesta de colores tal vez debería ser con colores contrarios y no con los mismos tonos de un color, para establecer una diferencia más clara y reconocible.
  • Revisar el proyecto de accesibilidad en PICTOS de Raquel Cataldo y Yorka Castillo.
  • Los apoyos web funcionan también con extensiones de navegador. Podría esa ser otra alternativa y reciclar el diseño de pantalla telefónica para la extensión.
  • Centrarse bien en la pregunta por ¿Cuál es la naturaleza del apoyo digital? Teniendo claro eso, podrán desarrollar este asistente.
  • Los íconos están un poco grandes en los pasos y el texto debería ser un poco más grande.

PROPUESTA 2

En esta segunda ocasión, primero revisamos diferentes proyectos e investigaciones que otros alumnos y alumnas han realizado sobre la aplicación PICTOS, que están enfocados en mejorar la accesibilidad.

Investigación y antecedentes de trabajos previos

sobre PICTOS

https://wiki.ead.pucv.cl/Accesibilidad_Web:_Estudio_y_Evaluaci%C3%B3n_para_el_desarrollo_Digital https://wiki.ead.pucv.cl/Grandes_D%C3%ADas:_Dise%C3%B1o_UX_para_el_adulto_mayor }

Se observan las diferentes propuestas realizadas en este proyecto, reconociendo y recogiendo las distintas aristas que complementan y mejoran la aplicación actual de PICTOS, como las propuestas de colores, de mapa de navegación, botones, etc. Se observan y son llevadas a los prototipos de pantalla para finalmente armar una propuesta propia.

Además, se itera sobre el mapa de navegación de PICTOS, esta vez, proponiendo una nueva paleta de colores para las dos categorías, con el objetivo de clarificar de mejor manera las diferentes categorías.

Revisión e investigación del colores

Para estas dos nuevas categorías, se planteó inicialmente que se invirtieran la paleta de colores original, manteniendo los colores en la categoría de "Presencial" e invirtiéndolos en las categoría de "digital". Sin embargo, nos preguntamos si esta decisión realmente tenía la claridad que buscábamos y lograba ser inclusiva, haciendo accesible la nueva propuesta de mapa de navegación.

Así, para que pueda existir una inclusividad dentro de PICTOS investigamos más sobre las distintas discapacidades, en este caso con un enfoque en el Daltonismo.

Existen 3 tipos de Daltonismo:

  1. Dicromatismo: Las personas que lo sufren solo tienen dos tipos de conos, por lo que falta un fotorreceptor que recoja uno de los colores primarios. Los otros dos, por tanto, deben ejecutar la función del otro. Si el cono defectuoso es el del color rojo por ejemplo, la persona no podrá distinguir este color ni sus variantes.
  2. Tricromatismo anómalo: En este caso se dispone de los tres conos, pero alguno de ellos tiene alguna deficiencia, lo que dificulta la percepción del color. Si los conos defectuosos son los del pigmento rojo, recibe el nombre de Protanomalía; si fallan los del pigmento verde, Deuteranomalía; y si lo hacen los azules, Tritanomalía (muy poco común). En todos los casos, la persona distingue los colores, pero de una forma más restringida.
  3. Acromatismo: Es el nivel de daltonismo más severo porque solo se perciben variaciones de brillo e intensidad. Los colores se ven como distintas tonalidades de un mismo color por la presencia de un solo pigmento en los conos. Hablamos de Mono cromatismo o Daltonismo total.


Una persona que sufre de daltonismo depende mucho del comportamiento de la luz en el espacio: entre más luz más capacidad tiene de distinguir, sucede todo lo contrario con una luz tenue. El cono con menos probabilidad de perder es aquel que percibe el color azul, por lo que este color representa un color inclusivo.

Finalmente y considerando todo lo anterior, decidimos trabajar con la paleta de color ya existente de PICTOS para la diferenciar las acciones digitales de lo presencial. Creando un contraste entre colores cálidos y fríos siendo protagonistas el amarillo con el azul, pensando en que será más legible para aquellas personas con discapacidad visual.

El color en el mapa de navegación

Siguiendo con la nueva propuesta de mapa de navegación, que divide a PICTOS en dos nuevas categorías: Presencial y Digital y tras el estudio de color realizado anteriormente, decimos descartar la inversión de colores para otorgar un color a cada una de estas categorías con el objetivo de esclarecer su distinción. Así, lo "Presencial" queda en la escala de los azules mientras que lo "Digital" queda en la escala de los amarillos.

Definición PICTOS "fuera de PICTOS" - PICTOS Asistente

Siguiendo con la propuesta de este "asistente PICTOS" que funciona fuera de PICTOS, se itera y se propone que este aparezca estando en la barra de notificación.

ÉPICAS Wireframes

Categorización PiXogramas

En este avance, se categorizaron los PiXogramas de PiX según 3 dimensiones distintas que son las ocupadas para los pictogramas: "contexto", "elemento" y "acción". Esto, con el fin de poder hacer de estos apoyos visuales más genéricos e universales para todas las tareas, sobre todo para el momento de tener que diseñarlas.

Correcciones y comentarios del 24-06

  • Es súper limpio desde el punto de vista de la AI proponer estas dos categorías. Pero desde el punto de vista del usuario, es un poco injusto, pues el usuario no tiene el conocimiento para saber el tipo de tareas que se pueden hacer. Hay que ponernos en los zapatos del usuario.
  • La lógica de colores igual se podría mantener, incluso podrían tener iconos diferentes.
  • Ojo con las sombras en los botones, como el ícono de los altavoces.
  • Los botones del asistente están muy pequeños. Habría que mejorar el uso del espacio, las "breads crumbs" podrían ir en horizontal. El gran tamaño debería ser la instrucción. El pictograma debería ir al lado derecho tal vez. ¿Cómo es el mapa de clases en los pasos digitales?
  • Para avanzar en los pasos ¿hay un botón de "check" que va leyendo las acciones que ejecuta el usuario en la aplicación o en el sitio?
  • Hay prerrequisitos para realizar las tareas, tiene un orden lógico que se podría considerar.
  • Quizás sería más apropiado una extensión para el navegador. ¿Abres un navegador desde PICTOS?
  • Sería una buena métrica el poder recoger los estados de cada paso a paso, para saber cuales pasos funcionan, cuales no, etc.
  • Definir bien las épicas. Registrar como textos las épicas en la wiki, hay que contarle al usuario ese “seteo” y dejar los links para cada épica.

PROPUESTA 3

En esta tercera propuesta, se vuelve a revisar el mapa de navegación, preguntándonos si la propuesta planteada anteriormente es la más inclusiva y accesible, pues nos damos cuenta de que si bien, es una buena forma de organizar la arquitectura de información de la aplicación, puede traducirse en cargarle o suponer un conocimiento previo del Usuario que realmente no está.

Es por ello que finalmente decidimos dividir los lugares/servicios en las dos categorías planteadas anteriormente, dejando las pantallas iniciales de la interfaz tal y como estaban y cambiando solamente las de los lugares/servicios. Se mantienen las distintas paletas de colores para lo "Presencial" y para lo "Digital".

Además, se agrega un paso inicial que indica los prerrequisitos necesarios para poder realizar una tarea (tarjetas, documentos, carnet de identidad, dinero, etc).

PICTOS Asistente y PICTOS Extensión

Siguiendo con la propuesta de este "asistente PICTOS" que funciona fuera de PICTOS, se itera y se corrigen y modifica la forma en cómo se presenta este. Aumentando el tamaño del asistente, cambiando textos de lugar así como el PiXograma y modificando los "breads crumbs".

Por otro lado, se propone una PICTOS extensión para el navegador, pensando en cómo se incorpora la aplicación y el desarrollo y la categoría de tareas digitales esta vez, en los navegadores. Para ello, se sigue el mismo lenguaje gráfico de PICTOS y se propone una extensión desde la cual se puede elegir qué tarea digital realizar y seguir los paso a paso, minimizando la ventana de la extensión o expandiendo esta, según lo que el Usuario desee.

Categorización PiXogramas

En este avance y buscando generalizar e universalizar aún más los PiXogramas de PiX según las 3 capas distintas de PICTOS ("contexto", "elemento" y "acción"), seleccionamos y reducimos los iconos pensando en los más sencillos, básicos y recurrentes, y buscando dejar de lado aquellos tan específicos y poco útiles para las tareas digitales. Además, se agregan algunos iconos de la nueva propuesta de Pictogramas (https://accesibilidad-inclusion.github.io/pictogramas/) en la que está trabajando el alumno Omar Nuñez en su proyecto de título "Desarrollo sistema pictográfico PICTOS" (https://wiki.ead.pucv.cl/Desarrollo_sistema_pictogr%C3%A1fico_PICTOS)

Así, la nueva lista de PiXogramas quedaría reducida de la siguiente manera:

ÉPICAS Wireframes

PROPUESTA 4

Mapa de navegación

En esta propuesta, se recogen las correcciones y comentarios anteriores y se mejoran detalles así como decisiones para poder realizar las pruebas con usuarios evaluadores del grupo Asesor de PICTOS. Entre estas mejoras:

  • Descartamos el uso de íconos para el listado de prerrequisitos.
  • Aumentamos el tamaño del texto de los pasos en la extensión de PICTOS para navegador.
  • Implementamos un gif en el Onboarding para introducir el PICTOS asistente.
  • Quitamos el texto de "Apoyos" en cada tarea, disminuyendo la información en esa pantalla.

Pruebas ÉPICAS con Usuarios/Evaluadores del grupo Asesor del Núcleo de Inclusividad

Se probaron 3 épicas distintas con 4 integrantes del grupo asesor.

Introducción

Rosario les recuerda brevemente de qué se trata PICTOS y presenta la actividad a realizar. Luego nos presentamos cómo grupo, por nombres e invitándolos a comentar y hacer un buen trabajo en equipo.

En cada prueba, fuimos enviando el link de cada épica a los asesores para que pudieran entrar y probar la aplicación, mientras que nosotros a través de un relato fuimos diciendo el paso a paso de cada épica a los asesores para guiar la prueba. Después de cada prueba les hicieron preguntas y recibimos comentarios.

Feedback y comentarios

Prueba épica 1: El usuario ingresa a la aplicación y realiza la tarea de "solicita un certificado en línea" a través del sitio del Servicio de Registro Civil siguiendo los pasos con textos y pictogramas

https://www.figma.com/proto/koT2PHVzOg4yvjFSsjvAVh/PICTOS-(Grupo-Beta)?node-id=3104%3A11988&scaling=min-zoom&page-id=423%3A52042

  • Los botones tienen que ser súper claros, además de tener el mismo nombre que ellos ya tienen aprendido cómo volver, anterior, siguiente. Para que no dependan de un guía.
  • Los pictogramas eran bastantes claros y reconocibles. Para ellos se les hace más fácil un texto acompañado de un pictograma, que solo texto.
  • Para los asesores es fácil poder utilizarla, pero para las personas que recién están utilizándola puede ser más difícil.
  • Encuentran que el contraste del amarillo con el azul hace más accesible la página.
  • Recalcan que debería ir siempre un texto junto al pictograma.
  • Para el listado de prerrequisitos en una tarea, consideran que debería haber íconos que expliquen cada cosa.
  • Las letras azules sobre el texto amarillo resaltan bien.

Prueba épica 2: El usuario da permiso al asistente de PICTOS y sigue los pasos para realizar la tarea anterior

https://www.figma.com/proto/koT2PHVzOg4yvjFSsjvAVh/PICTOS-(Grupo-Beta)?node-id=3104%3A14695&scaling=min-zoom&page-id=483%3A46838

  • El tamaño de la tipografía es adecuado, aunque podrían ser un poco más grandes. Al igual que los pictogramas.
  • Falta el icono del sonido.
  • Los colores les parecen adecuados, le facilita la lectura.
  • Carolina encontró que la segunda prueba fue mucho más accesible.
  • Las indicaciones que entrega la app son concisas y son de mucha ayuda para que las personas se puedan ubicar dentro de la página del trámite a realizar. Hay que revisar que cada texto coincida con lo que muestra el pictogramas.

Prueba épica 3: El usuario utiliza la extensión PICTOS para navegador y realiza la tarea anterior

https://www.figma.com/proto/koT2PHVzOg4yvjFSsjvAVh/PICTOS-(Grupo-Beta)?node-id=3104%3A17050&scaling=scale-down&page-id=483%3A46839

  • Esta prueba funciona mejor, acortando el tiempo de interacción con la aplicación.
  • Se dan cuenta que la extensión funciona como un guía al realizar un trámite.
  • La tipografía se lee bien, se diferencia un paso de los otros textos que componen el recuadro.
  • Es una buena extensión.
  • Los conceptos presencial y digital se interpretan, tal cual como nosotros pensábamos.
  • Deducen que al momento de ingresar a cada categoría cambiarán los colores acorde a los que ya se muestran en primera instancia.

Comentarios de Rosario

  • Los chicos no reconocen el ícono del reloj como el proceso de algo. Sería bueno hacer calzar de manera muy directa y precisa los textos con los íconos.
  • El texto y la imagen (pictograma) deben comunicar lo mismo, ojalá el texto sea breve. Usar una sola imagen y no varias.
  • Las imágenes con movimiento son más fáciles de comprender que una estática, es bueno usar gifs.
  • La forma en que estamos presentando al asistente, no permite que se entienda de manera clara en el prototipo.

PROPUESTA FINAL

En esta ocasión final, recogiendo todo lo anteriormente observado, estudiado, corregido y revisado, más las pruebas realizadas a los diferentes usuarios, decidimos proponer dos épicas que incorporan las mejoras de las propuestas anteriores y que consideramos, son un buen enfoque para replantear y remirar la actual aplicación de PICTOS desde la preguntas iniciales:

¿Se podría extender el modelo de apoyos actual hacia las transacciones digitales?

¿Qué punto de contacto sería el más adecuado para acompañar a las personas en sus trámites Web?

Y decidimos descartar la incorporación de PICTOS asistente, pues tras las pruebas realizadas y recogiendo los comentarios y feedbacks, consideramos que no es una propuesta accesible para todos y que no es una muy buena solución para ser el acompañante y apoyo de personas en sus trámites digitales.

ÉPICA 1

En esta épica, se agrega al Onboarding la presentación y explicación de PICTOS extensión de navegador.

Se mantiene el cambio en el mapa de navegación a través de la incorporación de las 2 categorías para tareas en los diferentes servicios. Además, se mantiene el agregado de un primer paso universal para todas las tareas que contiene los prerrequisitos o las cosas necesarias para poder realizar la tarea.

Por otro lado, se propone que en vez de ser PiXogramas estáticos que se mezclan y combinan por capas, sean PiXogramas animados que muestren el paso a paso. Para ello, ocupamos los mismo PiXogramas de antes, pero esta vez, llevándolos a archivos SVGs animados.

Por último, se presenta el mapa de navegación modificado para nuestra propuesta.

Visualización listado de prerrequisitos

"Chunking" y jerarquías para el listado de prerrequisitos

Considerando los comentarios realizados por los usuarios respecto al listado de prerrequisitos y con el objetivo de poder aclarar y mejorar este, estudiamos acerca del "Chunking" o "Fragmentación" en diseño UX y cómo esté ayuda a los usuarios al procesamiento del contenido.

Entendiendo que el contenido multimedia así como los textos pueden ser divididos en bloques o trozos más pequeños, con el fin de ayudar al usuario en el escaneo, procesamiento, comprensión y recuerdo de mejor manera, y considerando además, que el hoy en día, los usuarios no siempre leen las instrucciones que aparecen en la interfaz, decidimos volver a poner íconos representativos del tipo de objeto que se necesita para realizar una tarea. Pensando así en establecer un ícono para tarjetas, identificaciones, carnets, etc, otro para documentos, otro para dinero, etc. El cual cumple la función de "enumerar" y distribuir el listado de prerrequisitos y busca implementar una asociación texto-ícono para facilitar la interacción al usuario.

De PiXogramas a SVG Animados: PiXogramas animados

Para la maquetación y prototipado de las animaciones hechas a partir de archivos SVG, utilizamos un plug in de Figma llamado "Motion" (https://www.figma.com/community/plugin/889777319208467032/Motion) el cual nos permitió realizar las diferentes animaciones que se muestran en las ÉPICA 1, a través de una serie de fotogramas.

Lamentablemente, para la visualización de las animaciones en Figma, sólo los que diseñan la animación (y por lo tanto, tienen el plug in instalado) pueden activar las animaciones. Es por ello que a continuación se muestra un vídeo de la propuesta.

Mapa de Clases para la Extensión

https://docs.google.com/drawings/d/1U1R9QeZnYxtVOZAwS5ig35FUbr3OujCUd0ybnruxdmA/edit?usp=sharing

ÉPICA 2

Estas pantallas corresponden a la extensión de navegador PICTOS.

Incorporamos las pantallas que muestran cómo sería descargar la aplicación sumado a una pequeña introducción de lo que es la extensión.

Proponemos que la extensión este vinculada con las URLs del sitio y de los pasos de las tareas, con el fin de que la extensión sea lúcida con el contexto en el que el usuario esté. Para ello, pensamos en que agregar un botón que posicione al usuario en el paso que corresponda. Sin embargo, decidimos que al apretar el botón de siguiente, la extensión posicionará al usuario en el imput o botón correspondiente, señalándolo a través de un marco amarillo, a modo de ser un apoyo directo e indicativo para cada paso a paso en una tarea. Además, implementamos el listado de prerrequisitos para las tareas e implementamos que el segundo paso, que indica que debes entrar al sitio, cumple la función de un botón que te llevará hacia este

Además, mantuvimos la pregunta final "¿Te ha servido este apoyo?", en donde el usuario puede dar sus comentarios si es que no le ha servido el apoyo o recibir feedback positivo en caso de que sí.

Onboarding

Apoyo indicativo

Considerando que nuestras propuesta de Extensión para navegador tiene como propósito acompañar a través de un indicador en el paso a paso al Usuario, investigamos un poco acerca de cómo es que está interacción se produce en cuando al back end y la programación en una aplicación.

Sobre las URL

La URL es el mecanismo usado por los navegadores para dar una dirección a un recurso único en la Web. Dichos recursos pueden ser páginas HTML, documentos CSS, imágenes, etc.

Se conforma por algunas partes que son opcionales y otras imprescindibles para su funcionamiento. Estas son 3:

  1. Protocolo: Es la forma o el método que está establecido en internet para transferir o intercambiar datos en una red informática. Los protocolos más comunes son el protocolo de transferencia de hipertexto (HTTP) o el protocolo de transferencia de hipertexto seguro (HTTPS) siendo esta una mejor opción ya que encripta los datos enviados y recibidos entre el navegador y el servidor.
  2. Nombre de dominio: Es una referencia única que identifica un sitio web en Internet. Se compone de dos partes más pequeñas. Está el nombre del sitio web en cuestión, luego el dominio de nivel superior (TLD). El TLD especifica qué tipo de entidad registra tu empresa u organización en Internet. Debe ser único y llamativo, pero al mismo tiempo claro y fácil de recordar.
  3. Ubicación o ruta del archivo: Se refiere a la ubicación exacta de una página, publicación, archivo u otro activo. La ruta viene después del nombre de dominio y está separada por una barra diagonal. No todas las URL mostrarán una ruta debido a que los sitios web pueden reescribir las URL para simplificar.


Objetivo de una URL:

  1. Proporcionan una experiencia de usuario mejorada: Una URL bien elaborada brinda a las personas y a los motores de búsqueda una indicación fácil de entender sobre el tema principal de la página de destino.
  2. Mejoran la visibilidad de tu sitio: Las URL son un factor de clasificación menor que utilizan los motores de búsqueda para determinar la relevancia de una página o recurso en particular para una consulta de búsqueda.
  3. Sirven de texto de anclaje o anchor text: Una URL bien escrita puede servir como su propio texto de anclaje o anchor text, que es el texto que funciona como hipervínculo o enlace desde un contenido en el que está incluido. Esto ocurre cuando se copian y pegan como enlaces en foros, blogs, redes sociales u otros lugares en línea.


Lectores de Pantalla para Inputs

Una de las formas más comunes de la navegación a través de un formulario es utilizando la tecla Tab . Una persona llena un campo, presiona la tecla Tab , rellena el campo siguiente, y así sucesivamente, hasta que se alcanza el final del formulario. Para los usuarios visuales, esto es una cosa fácil, porque las etiquetas se colocan de tal manera que parecen estar ligados a su controles correspondientes. Para una persona ciega con un lector de pantalla, sin embargo, diseño visual no va a ser de mucha ayuda. Tiene que haber alguna manera de vincular la etiqueta con su control en el marcado.

Cuando un usuario de lector de pantalla navega a través de elementos de formulario en una página web, el software lector de pantalla identifica el tipo de un elemento de formulario que se encuentra seleccionado y proporcionará los medios para completar, seleccionar, deseleccionar, o enviar ese elemento de formulario.

Cuando haya varios elementos de formulario asociados, se pueden agrupar por algo que se llama fieldset. Cada fieldset debe tener una leyenda. La etiqueta legend es el texto que describe el grupo de asociados de los elementos de formulario. En el ejemplo anterior, los fieldsets se definen para Tipo de equipo y Velocidad de internet. El fieldset normalmente genera una frontera visual en el navegador web que rodea el contenido. En este ejemplo, se define por el borde que rodea a las tres casillas y sus etiquetas adyacentes. Las leyendas de estos conjuntos de campos son las palabras ordenador Tipo de equipo y Velocidad de internet.

De esta manera, proponemos que la extensión cuente con un lector de pantalla capaz de reconocer e indicar los diferentes inputs de texto y botones a través de una demarcación de color, con el fin de mostrarle al usuario dónde debe posicionarse para realizar el paso en el que se encuentra dentro de la tarea. Para ello, la extensión debe contar con el URL del sitio web del servicio y además, contar con las posiciones de los diferentes inputs y botones que serán señaladas en cada tarea.

REFERENCIAS