Directivas POUR

Propiedades de animación

animation-delay: retraso entre bloques de la secuencia (valor en segundos o milisegundos).

animation-duration: indica la duración total de la animación (segundos o milisegundos).

animation-iteration-count: configura las repeticiones del ciclo de animación.

animation-name: nombre de la animación.

Directivas POUR

POUR corresponde a los principios de accesibilidad: Perceptible, Operable, Comprensible y Robusto.

Perceptible

1. Texto alternativo para contenido no textual.
2. Contenido multimedia dependiente del tiempo.
3. Adaptable para diferentes formas o formatos sin pérdida de información.
4. Distinguir entre diferentes categorías de información (más importante y menos).
5. El contenido debe estar disponible para los sentidos (visión y audición).

Operable

1. Poder controlar todas las funciones mediante el teclado.
2. Proporcionar tiempo suficiente a los usuarios para leer y utilizar el contenido.
3. No diseñar contenido que pueda causar ataques epilépticos.
4. Proporcionar formas que ayuden a los usuarios a navegar.

Comprensible

Cómo presentamos el contenido de nuestra interfaz y cómo transmitimos los mensajes que en ella se emiten.

1. El contenido es claro y se limita la confusión y la ambigüedad.
2. Hacer el contenido de texto legible y comprensible. Hacer la apariencia y la forma de utilizar las páginas web previsibles.
3. Ofrecer ayuda a los usuarios para evitar y corregir errores.

Robusto

Vinculado al concepto responsive, la interfaz debe adaptarse al mayor número posible de dispositivos y tecnologías.

Técnicas básicas

• Enfatizar: hacer visible lo relevante, establecer una clara jerarquía visual entre elementos y zonas de la interfaz.
• Organizar: establecer relaciones visuales lógicas que faciliten relacionar o diferenciar elementos.
• Hacer reconocible: requerir del usuario el menor esfuerzo para comprender y predecir el funcionamiento interactivo de la interfaz.
• Reducir: si prescindimos de un elemento y el cambio no afecta a la comprensión del usuario, entonces su presencia no era necesaria.
• Equilibrio de características: al incrementar el número de características se observa un efecto positivo sobre las capacidades percibidas, pero un efecto negativo sobre la usabilidad percibida.
• Organizar, clasificar y/o ordenar: es muy importante establecer los criterios a priori.
• Pensar en nuestros usuarios arquetipo: ¿Quiénes son y cómo son los que van a visitar nuestra web?

Evaluación

Métodos de indagación o sondeo: métodos de observación del usuario, su forma de trabajo y sus respuestas a las preguntas que le hagamos.

Métodos basados en observación

• Observación de campo de un grupo de usuarios: consiste en observar las interacciones y la forma de utilizar la aplicación desde el entorno cliente para entender su actividad.
• Grupo de discusión dirigido (focus group): recoge información a través de entrevistas programadas de grupos de 5 a 8 personas, permitiendo recoger opiniones e ideas de los usuarios.
• Entrevistas personales y cuestionarios: recogen respuestas y comentarios del usuario que queremos evaluar.

Métodos de inspección y evaluación por expertos

• Métodos de inspección: análisis realizado por uno o varios expertos sobre la interfaz o el prototipo.
• Evaluación heurística: análisis por parte de un equipo de expertos basándose en una serie de principios ya establecidos.
• Recorrido o ensayo cognitivo: evalúa la facilidad de aprendizaje del sistema a través de prototipos; también realizado por expertos.

Métodos de testing con usuarios

• Testeo: recoge el trabajo de los usuarios sobre tareas concretas en la interfaz o prototipo y su posterior análisis por expertos.
• Pensando en voz alta (thinking aloud): solicita al usuario que comente en voz alta sus sentimientos, impresiones y opiniones sobre lo que va sucediendo y cómo cree que debería funcionar.
• Método de co-descubrimiento: desarrollo de una tarea por usuarios de manera colaborativa mientras son observados por un experto.
• Ordenación de tarjetas (card sorting): dar al usuario tarjetas con las diferentes categorías sobre nuestro sitio para entender cómo las agrupa y nombra.

Inserción y borrado en el DOM

Operaciones comunes para manipular el árbol DOM (document object model):

• appendTo: primero una función selectora para crear un subárbol y, por último, seleccionamos el objeto del árbol al que queremos añadirle el subárbol al final.
• append: seleccionamos el objeto del árbol al que queremos añadir contenido y después pasamos el HTML a añadir (añade al final).
• prepend y prependTo: similares a las anteriores, pero añaden por el comienzo en vez de por el final.
• clone(): clona un elemento o árbol de elementos que ya existen, incluyendo sus elementos descendientes si se solicita.
• wrap: permite envolver elementos en otro, cada uno con uno diferente; wrapAll permite envolver todos los elementos en un mismo contenedor.
• remove(): elimina elementos del DOM; empty() vacía el contenido de los elementos sin eliminar el elemento del árbol.
• parents(): recibe un selector CSS y retorna todos los ancestros que coinciden.
• find(): de forma similar, retorna los descendientes que coinciden con el selector.

Código Less y CSS generado

Código Less y el Código CSS generado de ejemplo:

/* Código Less */
#header {
  color: black;
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

/* Código CSS generado */
#header {
  color: black;
}
#header a {
  color: blue;
}
#header a:hover {
  color: red;
}

Notas finales

Este documento reúne principios de accesibilidad (POUR), técnicas de diseño y evaluación, y ejemplos prácticos de manipulación del DOM y transformación de Less a CSS. Aplicar estos principios mejora la usabilidad, la accesibilidad y la adaptabilidad de las interfaces web.