Stark
La accesibilidad es un aspecto fundamental, muchas veces olvidado por estudiantes y profesionales con poca experiencia en el diseño de interfaces.
Esperemos aportar, simultánemente, tanto un debate como aportar un recurso al respecto con esta discusión.
¿Qué es Stark?
Imagen anterior: Captura desde la portada de Stark
Aunque existen varias herramientas destinadas a medir parámetros de accesibilidad y usabilidad, voy a centrarme aquí en Stark, una extensión y suite de herramientas para diseñadores y desarrolladores que trabajan en Figma, Adobe XD, Sketch, Chrome, Firefox, etc., ayudándolos a que sus diseños puedan ser utilizados por personas con discapacidades visuales, cognitivas o motrices.
Particularmente en Figma, dispones de este plugin: Stark - Contrast & Accessibility Checker
Imagen anterior: Captura de pantalla desde la página de Stark en la Comunidad de Figma.
¿Qué funciones tiene Stark?
Entre sus principales características podemos destacar las siguientes:
- Simuladores de discapacidad visual que permiten ver el diseño de una interfaz como lo vería una persona con:
- Daltonismo (protanopía, deuteranopía, tritanopía, etc.)
- Baja visión
- Visión en tunel, etc.
- Comprobador de contrastes para evaluar si los colores de texto y fondo cumplen con los estándares de accesibilidad de las WCAG, indicando si se alcanza algunos de los niveles de conformidad AA o AAA.
- Escanea un diseño buscano posibles problemas con tipografías, etc.
Beneficios de usar Stark
- Mejora la accesibilidad y usabilidad de sitios web y prototipos
- Ayuda a cumplir con lineamientos de accesibilidad web, tales como la WCAG 2.1 ayudando a evitar problemas legales relacionados con la exclusión digital
- Mejora la calidad de tus diseños y productos finales
¿Es gratuito?
Stark no es gratuito, sino que tiene un modelo de comercialización freemium, por lo que tiene una versión gratuita relativamente generosa. Puedes consultar las disntintas licencias aquí: https://www.getstark.co/pricing/
- ¿Consideras a la accesibilidad en tus diseños?
- ¿Conoces las diferencias entre usabilidad y accesiblidad?
- ¿Conocías Stark? ¿Qué otras herramientas conoces?
Déjanos tus consultas, comentarios y aportes para seguir aprendiendo en comunidad
Saludos y bonita jornada para ti.
Plácido Luna.
#Stark #Figma #AdobeXD #Sketch #PrototipadoWeb #PrototipadoUI #PrototipadoIOS #PrototipadoMD
SUS | Dos herramientas disponibles
SUS Analysis Toolkit, de Mixality
Imagen superior: Captura de pantalla de la página de la herramienta recomendada, en el sitio oficial de Mixality
System Usability Scale Analysis Toolkit
Se trata de una herramienta, distribuida bajo Licencia MIT, desarrollada en Python, que puedes instalar en tu propio servidor, de forma gratuita, siguiendo este enlace, fuente también de la captura de pantalla anterior: https://github.com/jblattgerste/sus-analysis-toolkit
- ¿Qué te parecieron estas herramientas?
- ¿Conoces herramientas alternativas?
- ¿Realizamos un taller sobre estos recursos?
Déjanos tus comentarios y aportes, y sigamos aprendiendo, !con fundamentos!
¡Seguimos avanzando!
Plácido Luna.
#SUS #SUStoolkit #SusAnalysisToolkit #Mixality #EscalaSUS #EscalaDeUsabilidadDelSistema #HerramientasUX
Hola Luis
Te comparto mis observaciones:
Accesibilidad
Debes considerar los contrastes necesarios (accesibilidad), puedes chequearlos con varias herramientas, pero una muy conocida para diseñadores gráficos es esta: https://color.adobe.com/es/create/color-contrast-analyzer
Usabilidad
Señal/Ruido
Cuando uses gráficos, como el de arriba, evalúa lo que quieras destacar. En ese caso, los detalles técnicos son demasiado pequeños como para que se puedan leer. La solución sería usar la marca, código y el producto más grande, evitando la caja de detalles técnicos que tienden a distraer, sin aportar demasiado. Esto viene de la mano del principio de señal/ruido.
Acceso a los datos
El slider anterior pasa demasiado rápido, sin permitir leer sus contenidos.
Lenguaje del usuario
Tienes URLs que, en español, no resultan demasiado amigables. Un ejemplo de ello: https://www.maquicasa.pe/elements/pages/about/
Trabajaría esas urls para que queden en español.
Diseño estético y minimalista
Cursor personalizado en el sitio (motosierra)
Si bien la propuesta de cambiar el cursor en el sitio puede parecer una solución innovadora, al utilizar el sitio causa problemas importantes ya que no se detecta fácilmente dónde se está haciendo clic (la motosierra no tiene un puntero que facilite esta tarea).
Coherencia interna
El sitio tiene 4 grandes secciones (Inicio, Equipos, Nosotros, Contacto), en las cuales:
- 2 de ellas tienen un carrusel en su cabecera, y 2 de ellas no.
- El menú en la portada tiene fondo blanco, y se presenta por encima del carrusel.
- El menú en Nosotros tiene fondo transparente, con lo que se rompe la coherencia interna, e impiden ver la marca, o las opciones del menú, bajo ciertas condiciones de color de las fotos del carrusel. Ver imágenes a continuación:
Menú sobre slider en portada:
Menú sobre slider en Nosotros:
Privacidad
Ten cuidado con la privacidad y el uso de cookies. Dependiendo de varias leyes y reglamentos (como las GDPR y otras), puede que tengan que considerar ese aspecto. En la siguiente captura te muestro las cookies de YouTube a modo de ejemplo:
Rendimiento del sitio
Acabo de probar el sitio en PageSpeed Insights, y me dio indicadores de rendimiento bajo para móviles y dispositivos de escritorio. Te comparto las capturas de pantalla:
Rendimiento en móviles:
Rendimiento en escritorio:
Si bien mejora el rendimiento del sitio en dispositivos de escritorio, todavía podría mejorarse el rendimiento de la web.
No he evaluado códigos ni otros detalles, pero creo que con estos datos ya tienes varias pistas para comenzar a trabajar. Como pista adicional, te recomendaria estandarizar los tamaños de las fotografías, considerando tamaños finales de visualización y grado de compresión en las imágenes con formato jpg.
Espero haber aportado lo suficiente Luis, ¡así como aportes del resto del equipo!
Saludos y bonita jornada.
Plácido.
#Usabilidad #Accesibilidad #AnálisisHeurístico #AnálisisWeb #GDPR #PageSpeed #ContrasteCromático
¿Cuándo innovar en el UXD?
Este es un tema que, recurrentemente surgen en nuestras clases y talleres sobre diseño de la experiencia de usuario, y para muchos tiene una respuesta: "Cada vez que el usuario lo requiera".
Luego de esta respuesta surgen nuevas preguntas y objeciones, todas tendientes a negar tal situación. Entre otras:
- Objeción: Es que si no innovo mis usuarios se irán con la competencia.
- Respuesta: En tu mismo planteo está la explicación. Identificaste una necesidad que, si no la implementas, alejarás a tus usuarios, pero la innovación no surgió por inspiración divina.
- Pregunta: ¿Pero si quiero diferenciarme de la competencia?
- Respuesta: Todo dependerá del contexto, pero en lo que respecta a interfaces podemos recurrir a la Ley de Jakob, que extendida a otros entornos, puede darnos pistas de en qué aspectos innovar, y en cuales no.
- Objeción: Si dejo que mi interfaz se desactualice, entonces perderé a mis usuarios.
- Respuesta: Al igual que en el primer caso, la misma objeción tiene implícita la respuesta. Dependes de la reacción de los usuarios.
- Objeción: Las interfaces minimalistas aburren al usuarios.
- Aclaración y respuesta: Estes es un comentario que suele surgir cuando nos basamos en la octava heurística de Nielsen (Diseño estético y minimalista), especialmente cuando hacemos énfasis en la optimización de la relación Señal/Ruido. La respuesta en este caso es que tanto la relación señal/ruido, como el concepto de diseño minimalista, están fuertemente vinculado con el concepto de diseño estético. El concepto de minimalismo no implica quitar absolutamente todo, sino, nuevamente, todo aquello que no le sea necesario al usuario.
- Lecturas recomendadas (Sitio: Laws of UX):
- Paradoja de sobrecarga de opciones
- Teoría de la atención selectiva
- Teoría de la carga cognitiva
Dos casos de estudio
Para ilustrar un poco el planteo central de este debate, veamos dos posibles caso de estudio:
Caso 1 - Sistema de Impuestos Internos de Chile
Te comparto dos capturas de pantalla del sitio oficial del Sistema de Impuestos Internos de Chile, que ha funcionado durante muchos años, con cambios mínimos, y graduales, en su interfaz, cumpliendo con estándares, y manteniendo una gran coherencia en su diseño:
Imagen superior: Capturas de pantalla de la portada de la web del Sistema de Impuestos Internos de Chile, una tomada el 26/09/2021, y la otra el 04/06/2025.
Como vemos, casi 4 años después la portada del sitio mantiene su diseño y funcionalidades principales de forma casi inalterada.
Caso 2 - Sistema de visas de Nueva Zelanda
En este caso se trata de otro sitio web gubernamental que recién luego de muchos años decidió hacer un cambio importante en la portada y diseño general de su sitio. En este caso, la web de Inmigración de Nueva Zelanda:
Imagen superior: Captura de pantalla de la página de visas del sitio de Inmigración de Nueva Zelanda, correspondiente también al 26/09/2021.
Si bien, en la actualidad el cambio puede parecer radical a nivel visual, en lo que respecta a interacción la navegación parece mantener una lógica muy parecida a la anterior.
Aunque diferentes, aún tenemos presentes la navegación por tarjetas:
Imagen anterior: Captura parcial desde la portada de la web de Inmigración de Nueva Zelanda.Más aún, cuando vemos el sistema para encontrar un tipo de visa, nos encontramos con un sistema de selección incremental que resulta muy conveniente:
Imagen anterior: Captura parcial desde la portada de la web de Inmigración de Nueva Zelanda.
Si visitas el sitio, y sobre todo, si lo comparas con su versión anterior, encontarás que, aunque hubo cambios, estos parecen muy cuidados y orientados a la usabilidad, mejorando con ello la experiencia de uso de sus usuarios.
Ahora, te planteo las siguientes peguntas:
- ¿Cuándo tomas la iniciativa para mejorar las experiencias del usuario con tus diseños?
- ¿Cuándo innovar en el diseño centrado en las personas?
- ¿Qué diferencias plantearías al respecto entre marketing y el UXD?
¡Participa, y sigamos aprendiendo, con argumentos!
Saludos y bonita jornada para ti.
Plácido Luna.
#Paradigmas #ParadigmasWeb #Innovación #UX #UXD #UID #IxD #UI
