Directivas POUR

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.

Perceptible: el contenido debe estar disponible para los sentidos (visión y audición)

• Texto alternativo para contenido no textual.
• Contenido multimedia dependiente del tiempo.
• Adaptable para diferentes formas o formatos sin pérdida de información.
• Distinguible entre diferentes categorías de información (más importante y menos).

Operable: operabilidad de la interfaz y en cómo los usuarios pueden manejarla.

• Poder controlar todas las funciones del teclado.
• Proporcionar tiempo suficiente a los usuarios para leer y utilizar el contenido.
• No diseñar contenido que pueda causar ataques epilépticos.
• Proporcionar formas para ayudar a los usuarios a navegar.

Comprensible: como hemos presentado el contenido de nuestra interfaz y cómo transmitimos los mensajes que en ella se emiten.

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

Robusto: viene ligada al concepto responsive donde la interfaz debe de adaptarse al máximo de dispositivos posibles

Técnicas Básicas

Enfatizar: implica hacer visible lo relevante, establecer una clara jerarquía visual entre elementos y zonas de la interfaz.

Organizar: Significa establecer relaciones visuales lógicas, que faciliten relacionar o diferenciar elementos. Hacer reconocible:

Requerir del usuario el menor de los esfuerzos 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 un 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 arquetipos: ¿Quiénes son y cómo son lo 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.

Observación de campo de un grupo de usuarios: consiste en las interacciones y su forma utilizar la aplicación desde el entorno cliente para entender su actividad.

Grupo de discusión dirigido o focusgroup: recoge información del sistema a través de entrevistas programadas de grupos de 5 a 8 personas, permite recoger opiniones e ideas de los usuarios.

Las entrevistas personales y los cuestionarios que recogen respuestas y comentarios del usuario que queremos evaluar.

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 de la interfaz por parte de un equipo de expertos basándose en una serie de principios ya establecidos.

El recorrido o ensayo cognitivo: evalúa la facilidad de aprendizaje del sistema a través de prototipos. También realizada por los expertos.

Métodos de testing o testeo: recoge el trabajo de los usuarios sobre tareas concretas en el interfaz o prototipo y posterior análisis por los expertos.

Pensando en voz alta o thinkingloud: 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 de usuarios de manera colaborativa mientras son observados por un experto.

Ordenación de tarjetas o cardsorting: darle al usuario unas tarjetas con las diferentes categorías sobre nuestro sitio

Inserción y borrado en el DOM

AppendTo: primero función selectora para crear subárbol y por último seleccionamos el objeto del árbol al que queremos añadirle el subárbol al final.

Append: lo contrario seleccionamos objeto del árbol para añadirle y por último pasamos html a añadir.

Preppend y preppendTo parecida que las anteriores solo que añaden por el comienzo en vez de por el final.

Clone(): para clonar un elemento o árbol de elementos que ya existen, no solo ellos si no que también sus elementos descendientes.

Wrap permite envolver elementos en otro cada uno con uno diferente, wrapall permite definir todos los elementos en un mismo elemento.

Remove() permite eliminar elementos y empty() vacía el contenido de los elementos sin eliminar el elemento del árbol.

Parents(): recibe selector CSS y retorna todos los ancestros.

Find(): de forma similar pero los descendientes.

/* Código Less */ /* Código CSS generado */

#header { #header {

color: black; #header a {

a { color: blue; color: blue; }

&:hover { #header a:hover {

color: red; color: red; }

}}}

Etiquetas: Directivas, Evaluacion, POUR, técnicas