Quantcast
Channel: Usable y accesible. Olga Carreras
Viewing all 180 articles
Browse latest View live

Se ha publicado en el BOE la sustitución de la Norma UNE 139803:2004 por la nueva versión 2012 basada en las WCAG 2.0

$
0
0

Hace un par de meses os hablaba de la actualización de la Norma UNE 139803 (consultar "Nueva versión de la Norma UNE 139803") y de la importancia que tiene esta actualización, pues la Norma UNE 139803:2004 estaba basada en las WCAG 1.0 y la Norma UNE 139803:2012 es equivalente a las WCAG 2.0

La implicación directa es que como la legislación española obliga a cumplir con la Norma UNE 139803, y puesto que la Norma UNE 139803:2004 (basada en las WCAG 1.0) queda anulada y sustituida por la Norma UNE 139803:2012 (equivalente a las WCAG 2.0), ahora los contenidos web deberán cumplir con el nivel de adecuación AA de acuerdo a las WCAG 2.0

Solo estábamos esperando su publicación en el BOE, y ya está aquí: Resolución de 3 de septiembre de 2012, de la Dirección General de Industria y de la Pequeña y Mediana Empresa, por la que se publica la relación de normas UNE aprobadas por AENOR durante el mes de julio de 2012.

Así que a partir de ahora hay que cumplir y validar de acuerdo a las WCAG 2.0 y esto es una gran noticia.

Recursos para pasar de la Norma UNE 139803:2004/WCAG 1.0 a la Norma UNE 139803:2012/WCAG 2.0

Artículos relacionados

Servicios relacionados


Curso "Accesibilidad Web y WCAG 2.0" en Uruguay

Nuevo curso sobre PDF accesibles en la Universidad de Alicante

$
0
0

El 21 y 22 de diciembre daré el módulo de 10 horas "PDF y libros electrónicos accesibles" dentro del curso Estrategias de inclusión digital en la enseñanza de la Universidad de Alicante.

Es un curso presencial de 30 horas divididas en 6 sesiones impartidas en viernes por la tarde y sábado por la mañana.

Está especialmente dirigido a alumnos, profesores y PAS (Personal de Administración y Servicios) pero puede inscribirse cualquier persona interesada.

El objetivo específico de mi módulo es que los participantes en el mismo aprendan a crear materiales educativos electrónicos accesibles. Será esencialmente un taller práctico en un laboratorio con ordenadores.

Habitualmente doy un curso de "Creación de PDF accesibles" para empresas de diseño, artes gráficas y consultores de accesibilidad, este curso será diferente, orientado al público y el objetivo del curso en el que se integra.

Aprenderemos las buenas prácticas para crear documentos Word accesibles y a convertirlos en PDF accesibles. Por ello puede ser de interés para aquellas personas que generan documentación en estos formatos y que desean aprender cómo hacerlos accesibles para todos.

Podéis ampliar información, consultar precios e inscribiros en la web del curso: Estrategias de inclusión digital en la enseñanza.

Reseña "Miro y entiendo. Guía práctica de Usabilidad web"

$
0
0
Miro y entiendo. Daniel Mordecki

Autor:Daniel Mordecki, director de Concreta

Nº páginas: 223

Formato: de momento solo en libro impreso
Idioma: español

Fecha de publicación: noviembre de 2012

Web:Miro y entiendo. Guía práctica de Usabilidad web

Índice del libro:Índice de contenidos de "Miro y entiendo"

El 8 de noviembre, Día Mundial de la Usabilidad, tuve la suerte de poder asistir y participar en la presentación del libro "Miro y entiendo. Guía práctica de Usabilidad web" de Daniel Mordecki en Montevideo (Uruguay). Un libro de referencia tanto para los profesionales de la usabilidad como para todos aquellos que se acercan por primera vez a esta disciplina.

Daniel Mordecki y los miembros de la mesa redonda en la presentación del libro

"Miro y entiendo" explica de una manera muy didáctica, clara y amena, qué es la usabilidad, cuál es la metodología de trabajo y los métodos de evaluación, además de incluir apartados específicos sobre la redacción para la web o la usabilidad en formularios.

Durante la semana que estuve en Uruguay tuve la oportunidad de pasar mucho rato con Daniel Mordecki, que además de ser un gran anfitrión, es un excelente profesional y comunicador, con muchos años de experiencia a sus espaldas.

Uno de los capítulos del libro "Miro, leo, pienso: tres niveles de interacción" merece una atención especial, pues en él expone un modelo conceptual del que es autor y resulta completamente novedoso. A pesar de que ya lo presentó en el año 2007 en la revista FAZ, bajo el artículo "Interfaces e intuición" creo que no es suficientemente conocido.

Todos hablamos de hacer "interfaces intuitivas", ¿pero qué significa esto realmente? ¿qué hace que una interfaz sea intuitiva?

La intuición, como bien explica el Daniel Mordecki, no es una especie de sexto sentido con el que se nace. Creo que nadie se aproxima al problema de la intuición de las interfaces, ni plantea la relación entre lo inconciente y lo consciente a la hora de enfrentarse a ellas, desde una perspectiva como la suya.

La interacción de los visitantes con un sitio web se concibe en tres niveles: mirar, leer y pensar. La interacción se desarrolla simultáneamente en los tres niveles, se combinan e interactúan permanentemente entre sí y el visitante obtiene su experiencia como un todo, sin necesidad de tener consciencia alguna sobre qué nivel fue el que aportó qué dato. Cada uno de estos niveles requiere un nivel de atención particular, un esfuerzo consciente particular y retorna al visitante un nivel de resultados particular.

Es imprescindible conocer estos niveles de interacción y su relación con la intuición para poder entender como interactuamos con un sitio web, de manera consciente e inconsciente, de lo contrario es difícil poder realizar interfaces realmente intuitivas y fáciles de usar.

Además del planteamiento y contenido general del libro, y este capítulo en particular, una de las cosas que más me han gustado es la facilidad que tiene Daniel Mordecki para transmitir las ideas y conceptos de una forma sencilla y comprensible para todos, fruto posiblemente de su experiencia docente. Por ello, el libro está salpicado de consejos prácticos, ejemplos y casos de la vida real, de la aplicación de la teoría en la práctica cotidiana.

Daniel Mordecki hace uso a menudo de la metáfora para facilitar la compresión de los conceptos. Algunas de ellas me serán imposibles de olvidar y estoy segura que repetiré muchas veces:

Focalizarse en el objetivo de sus personajes, entenderlo y concentrarse en él, le permitirá abordar con creatividad y libertad el análisis de las tareas y la funcionalidad que las implementa. Podrá libremente eliminarlas, crear nuevas o cambiarlas completamente [...]

Quien se focaliza en la tarea de barrer podrá inventar escobas más livianas, con cerda intercambiable y mango irrompible, pero jamás podrá inventar la aspiradora: esto está reservado a los que se focalizan en el objetivo de tener una casa limpia.

Hablando sobre la "ecuación alucinógena" de que agregando más y más funciones y secciones el sitio se tornará mágicamente más valioso, y de los efectos negativos de incluir funciones innecesarias:

Si usted busca un destornillador determinado, cuantas más herramientas distintas tenga la caja, más difícil será la búsqueda. Si además las herramientas son sólo destornilladores, peor aún.

El mensaje que emerge al final del libro es el absurdo de muchos rediseños web, el absurdo de destinar grandes cantidades de dinero y tiempo a cambiar por cambiar, y no a cambiar para mejorar, que es la misión de los profesionales de la usabilidad.

Supongo que es la reseña menos imparcial que he hecho nunca, pues en cierta manera participé en el libro revisando el borrador, y Daniel ya no es un colega más de profesión sino un amigo, pero la escribo desde el convencimiento de que es imposible que este libro defraude a nadie que lo lea.

¿Dónde conseguir el libro?

"Un profesional de la Usabilidad ama la disciplina y espera como única recompensa que el sitio Web sea más fácil de usar: que más clientes compren, que más usuarios naveguen, que más visitantes completen el formulario. Todo eso y nada más que eso."

Miro y Entiendo es una guía práctica de Usabilidad. Parte de los conceptos teóricos y definiciones básicas, desarrolla las metodologías y técnicas centrales de la disciplina y aporta consejos prácticos para su utilización, con ejemplos y casos de la vida real.

Dirigida a la comunidad de profesionales que diseñan, desarrollan y mantienen sitios Web, propone una lectura amena y fluida, que va directo a la aplicación de la teoría en la práctica cotidiana. Miro y Entiendo es a la vez un libro de estudio y una referencia obligada para todos aquellos que se empeñan en que sus páginas Web sean más fáciles de usar.

Índice de contenidos del libro

  1. Qué es la Usabilidad
    • La mejor interfaz es la que no existe
    • Beneficios
    • La Usabilidad puesta en contexto
    • La Usabilidad es un problema de tendencias
    • La Usabilidad como actitud
  2. Elementos de la interfaz de usuario
    • Objetivos
    • Alcance
    • Arquitectura de la información
    • Modelo de Interacción
    • Interfaz
    • Iterar muy rápido
  3. Miro, leo, pienso: tres niveles de interacción
  • Tres niveles de interacción
  • Miro y entiendo
  • Leo y entiendo
  • Pienso y entiendo
  • Estructura y contenido
  • Métodos de evaluación de Usabilidad
    • Análisis Heurístico
    • Test con Usuarios
    • Card Sorting
    • Otras herramientas de evaluación de Usabilidad
    • Las normas ISO relativas a la Usabilidad
  • Redactar para la Web
    • Cada medio tiene su lenguaje
    • Cómo leen los internautas
    • Navegar y comunicar
    • Estilos de escritura
    • Técnicas de escritura para la Web
    • Organizando el contenido
    • Ni magia ni dogmas
  • Formularios: la Web interactiva
    • Construcción de formularios usables
    • Tipos de respuestas
    • Instrucciones útiles
    • Criterios de Usabilidad para formularios
    • Los campos y sus etiquetas
    • Manejo de errores y mensajes
    • Recomendaciones particulares para elaborar buenos formularios
  • El tiempo de descarga
    • Tiempo de respuesta y productividad
    • Google y el tiempo de respuesta
    • Tiempo de respuesta y atención
    • Menos tiempo de respuesta = más fácil de usar
  • A modo de epílogo
    • ¿Are you Sexy?
  • Claves para la web móvil

    $
    0
    0

    Hace un par de meses participé en el curso “Buenas prácticas en web móvil” del W3C. El curso me resultó muy interesante tanto por su carácter práctico como por la cantidad y calidad de las aportaciones en el foro, estuvo bien coincidir con tantas caras virtuales conocidas.

    En este artículo sintetizo las claves que me parecieron más relevantes, muchas de las cuales se solapan con requisitos básicos de accesibilidad y usabilidad.

    1. Estándares: código válido y semántico

    Usa código (X)HTML correcto, válido y semántico, de acuerdo a la especificación definida en el DOCTYPE.

    2. Separar el contenido y la presentación

    Define todos los estilos en las CSS. NO a los estilos en línea, a las etiquetas tipo <font> o <center>, a los espacios o imágenes en blanco para separar o a la maquetación por tablas.

    Define los tamaños con medidas relativas (%, em).

    Ten cuidado con el posicionamiento de los elementos mediante float y display, revisa que el efecto sea el esperado con diferente dispositivos y resoluciones.

    Ojo con el uso del color y las imágenes de fondo: el contraste de color debe ser suficiente y los enlaces estar subrayados. Ten en cuenta que los usuarios de dispositivos móviles a menudo navegan bajo condiciones de escasa visibilidad (luz brillante, mala iluminación).

    3. Mejora progresiva (progressive enhancement)

    La “mejora progresiva” es una estrategia de diseño y desarrollo que permite que la información, las funcionalidades o las características más avanzadas estén disponibles para los agentes de usuario que las soportan, pero sin que esto perjudique ni excluya al resto de usuarios, ofreciéndoles una alternativa viable. Se aplica a todo: a las CSS, al código javascript, al código (X)HTML, a las funcionalidades de la página, etc.

    Por ejemplo, podemos usar HTML5 y gracias al siguiente script:

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]—>

    los usuarios de versiones anteriores de Explorer no tendrán problemas con la definición de los estilos en la CSS para las nuevas etiquetas semánticas de HTML5.

    Por ejemplo, no dejaremos de usar javascript, o cookies, o funcionalidades de geoposicionamiento, o propiedades CSS3, pero no asumiremos que se soportan y no dependeremos de ellas. Así, por ejemplo, en el caso de javascript, implementamos la página como si no fuera a soportar javascript y después añadimos una capa de mejora con javascript no intrusivo.

    En este sentido habrá que tener en cuenta que muchos móviles no tendrán soporte para Flash, PDF, ActiveX, Silverlight, ventanas emergentes, GIF animados, transparencias PNG, iframes, etc.

    4. Viewport, CSS Media Queries y Responsive Design

    Define el metaviewport de la siguiente manera:

    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    Este meta indica que nuestra página será flexible para adaptarse a los diferentes anchos de pantalla y le indica al navegador que no aumente o reduzca la página, que use el zoom por defecto.

    La misma web vista en tres móviles. En uno se ve con mucho zoom (ojo de cerradura), en otro muy alejada (miniaturización) y en el otro con un zoom constante.

    Imagen tomada de la gran presentación de Hernan Beati: Web móvil: ¿inclusiva y accesible?

    Esta definición del viewport debe estar respaldada por un diseño web adaptable (responsive design) a todos los dispositivos, sin necesidad de barras de desplazamiento, gracias al uso de CSS Media Queries:

    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <link rel="stylesheet" type="text/css" href="style2col.css" media="all and (min-width: 600px)" /> 
    <link rel="stylesheet" type="text/css" href="style3col.css" media="all and (min-width: 800px)" /> 
    <!--[if lt IE 9 & !IEMobile]> 
           <link rel="stylesheet" type="text/css" href="style3col.css" /> 
    <![endif]—>

    El uso de CSS Media Queries permitirá adaptar la visualización del contenido a los diferentes tamaños de pantalla: posicionar de diferente manera el contenido, reducir el tamaño de las imágenes de fondo en las pantallas más pequeñas, etc.

    Ejemplo de una web diseñada cuyo contenido se adapta al ancho de la ventana

    Imagen tomada de Responsive Web Design: 50 Examples and Best Practices donde se pueden consultar muchos más ejemplos.

    Los usuarios de dispositivos móviles deben visualizar la información, percibir que la página ha cambiado, sin necesidad de hacer scroll, para ello es necesario una cabecera más reducida o un sistema de navegación adaptado.

    5. Adaptar contenido en el servidor

    No ocultes contenido para la versión móvil con display:none, pues el contenido será descargado igualmente, consumiendo tiempo. Lo correcto es usar responsive design para adaptar la visualización, pero la adaptación del contenido (que no tiene porque ser siempre necesario, dependerá del sitio) debe hacerse en el servidor.

    Detectar el dispositivo desde el servidor permite saber si la página será presentada en una dispositivo móvil o no, y en función de ello adaptar el contenido que se muestra desde el servidor: diferentes tamaños de imagen, menos contenido (o diferente), una cabecera o un sistema de navegación distinto, etc.

    Da libertad al usuario. No decidas por él. Permite al usuario cambiar de la versión móvil a la versión escritorio y viceversa; y recuerda usarlink=”canonical” para indicar a los buscadores cuál es el recurso original cuando tengas varias URIs para un mismo recurso.

    Yo utilicé para detectar el dispositivo y permitir cambiar de una versión a otra el código PHP de Alex Pot.

    En "Ejemplos de sitios web versión escritorio y móvil" hay una recopilación de ejemplos.

    6. Diferentes modos de interacción

    El foco debe ser siempre visible (no lo ocultes con outline:0px).

    En los dispositivos táctiles es especialmente importante el tamaño y la distancia entre los elementos clicables.

    Usa manejadores de evento independientes del dispositivo.

    7. Reducir el tamaño de la página y las llamadas al servidor

    El objetivo es minimizar la carga de la red, los Kb que nos descargamos (y por los que muchos usuarios pagan) el tiempo de procesamiento, y así aumentar la velocidad de descarga y de paso no calentar el móvil ni fundirnos la batería.

    Se deben incluir los estilos en las CSS, optimizarlas y comprimirlas, llamar al menor número necesario de CSS (unificándolas cuando sea posible) y poner especial cuidado a las reglas que utilizamos (los navegadores modernos no descargan los recursos vinculados en las hojas de estilo a menos que sean llamados en la página: ver test de TimKadlec.com).

    Se debe incluir todo el javascript en ficheros JS externos y reutilizables, optimizados y comprimidos, y llamar al mínimo de ficheros necesarios (unificándolos cuando sea posible). La página se procesará más rápido si puedes incluir los scripts al final de la página o usas el atributo defer

    Configura correctamente la caché.

    Optimiza el tamaño y peso de las imágenes, usa el atributo ALT por si no se cargan y define sus atributos width y height. Si no indicas el alto y el ancho de la imagen, el navegador vuelve a analizar la página durante el análisis sintáctico para adaptarse a los nuevos objetos, el reescalado requiere potencia de procesamiento, consume la vida de la batería, genera calor innecesariamente, y retrasa la entrega de la página al usuario.

    Cuando sea posible unifica imágenes para hacer menos peticiones al servidor, por ejemplo puedes utilizar CSS Sprites para unificar en una única imagen varias imágenes decorativas del sitio.

    8. Validadores, emuladores y otras herramientas

    Podéis consultar una recopilación en Mis validadores. Dispositivos móviles

    9. UX Mobile is different...

    Y por eso debería trabajarse en paralelo y tener su propio prototipo.

    Enlaces de interés:

    Artículos relacionados:

    Novedades de Adobe Acrobat XI Pro relacionadas con la accesibilidad de los PDF

    $
    0
    0

    Después de probar Adobe Acrobat XI Pro (y alegrarme de que la interfaz no cambie) os cuento aquellas novedades de interés para los que nos dedicamos a convertir PDF en PDF accesibles.

    Nueva herramienta "Establecer texto alternativo"

    Dentro de las herramienta de accesibilidad nos encontramos con una opción nueva "Establecer texto alternativo" que nos va a simplicar mucho la vida:

    Ventana emergente 'Establecer texto alternativo' de Adobe Acrobat XI Pro. Tiene un textarea para incluir texto alternativo y un check para indicar que es una imagen decorativa, para cada una de las imágenes del documento.

    Hasta ahora podíamos incluir el texto alternativo de una imagen en sus "Propiedades". Para ello teníamos que seleccionar una a una cada imagen, bien en el panel Etiquetas, bien desde la vista "orden de lectura".

    De la misma manera, podíamos convertir una imagen en "artifacto" (imagen decorativa que no será leída por los lectores de pantalla) seleccionando cada imagen en la vista "orden de lectura" y pulsando "fondo", o bien en el panel de Etiquetas seleccionado el contenido de su etiqueta "Figure" y la opción "Cambiar etiqueta a artifacto".

    La nueva herramienta nos da una tercera manera mucho más eficaz: detecta todas las imágenes del documento y podemos ir indicando rápidamente para cada una de ellas su texto alternativo o si es decorativa.

    Advertencia: no presupongas que todas las imágenes serán realmente imágenes ni que todas las imágenes aparecerán en esta ventana, primero tendrás que comprobar que el documento está correctamente etiquetado. A veces hay imágenes no etiquetadas como "Figure" y a veces hay contenido etiquetado como "Figure" que no es una imagen.

    Nuevas opciones en la herramienta "Retocar orden de lectura"

    Los que estéis familiarizados con la conversión de PDF en PDF accesibles notaréis en seguida las mejoras en la herramienta "Retocar orden de lectura" que es una de las que más utilizamos.

    Ventana 'Retorcar orden de lectura' de Adobe Acrobat XI Pro con las nuevas opciones destacadas: botones para encabezados 4,5 y 6, mostrar orden o tipo de contenido, mostrar elementos en un único bloque

    Las nuevas opciones son:

    • Posibilidad de marcar encabezados de nivel 4, 5 y 6. Antes solo podíamos marcar los de nivel 1, 2 y 3, el resto de niveles había que modificarlos en las propiedades de la etiqueta.
    • Mostrar orden o tipo de contenido. Hasta ahora, en la vista "orden de lectura" cada contenido aparecía resaltado con un número (su orden de lectura). En la nueva versión de Acrobat podemos indicar que nos muestre, no el número del orden de lectura, sino el tipo de contenido que es (el nombre de la etiqueta, tal y como se ve en la imagen de ejemplo) lo cual resulta muy útil. Pero yo me pregunto, ¿por qué han puesto las opciones como excluyentes? Me hubiera gustado poder ver simultáneamente las dos.
    • La opción "Mostrar elementos similares en un único orden", está marcada por defecto y es el comportamiento de las versiones anteriores. En la nueva versión si, por ejemplo, un texto largo está compuesto por varios párrafos, podremos verlo como un único elemento como hasta ahora o desmarcar el check y ver las diferentes etiquetas de párrafo en las que se subdivide. Esto es de gran ayuda, pues por fin vamos a poder seleccionar texto dentro de un párrafo, pulsar el botón "texto" y que efectivamente divida en varios párrafos. Es muy necesario para poder marcar dentro de un párrafo texto en otro idioma, abreviaturas, etc. y que ahora era casi obligatorio hacerlo desde el panel de Etiquetas, o usar algún truco un poco engorroso.

    Mejoras en el asistente para hacer más accesibles los PDF

    El asistente se llamaba "Crear archivos PDF accesibles" y ahora se llama "Hacer accesible":

    Ventana del asistente 'Hacer accesible' de Adobe Acrobat XI Pro. Tiene tres pasos: preparar, establecer etiquetas e idioma, ejecutar comprobar de accesibilidad

    El asistente hasta ahora no permitía realizar acciones necesarias como indicar el idioma del documento o incluir el texto alternativo de las imágenes (te decía que debías hacerlo manualmente)

    Con la nueva versión ya puedes desde el asistente indicar el idioma o incluir el texto alternativo a las imágenes (mediante la herramienta vista anteriormente).

    Es muy importante advertir que este asistente te ayuda a hacer los PDF más accesibles, pero que estas acciones no son las únicas necesarias: tendrás que revisar el etiquetado, el orden de lectura, los vínculos, las tablas, etc.

    Validador de accesibilidad

    Es el mayor cambio, una gran mejora y posiblemente una razón de peso para actualizarse a la nueva versión.

    En Acrobat X Pro se podía elegir entre validar de acuerdo a las WCAG 1.0, las WCAG 2.0 (la validación era en base a la versión de 2006, no la definitiva de 2008), la Seccion 508 o la validación por defecto Adobe PDF.

    Ahora hay una única validación dividida en cuatro apartados:

    • Documento:
      Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Documento
    • Contenido de la página:
      Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Contenido de la página
    • Formularios, tablas y listas:
      Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Formularios, tablas y listas
    • Texto alternativo y título:
      Asistente de Adobe Acrobat XI Pro. Seleccionada la categoría Texto alternativo y título

    Ahora puedes evaluar (o no) por 32 criterios individuales basados en las WCAG 2.0 y el estándar PDF/UA. Sobre PDF/UA indicar que NO se puede guardar, exportar o validar el PDF según el nuevo estándar (más información en PDF/UA. Descripción de la norma. Comparativa y relación con las WCAG 2.0 ).

    Por otro lado, la mejora del resultado de la validación de accesibilidad es enorme y una gran alegría.

    Es muy importante recordar que el validador de accesibilidad no asegura la accesibilidad del PDF, porque hay muchos requisitos que no pueden evaluarse automáticamente y otros que necesitan siempre de una revisión manual.

    Pero es una herramienta de gran utilidad y ahora mucho más.

    El resultado de la validación deja de ser un horror para convertirse en un árbol:

    Resultado del comprobador de accesibilidad de Adobe Acrobat XI Pro. Un árbol con 7 elementos: documento, contenido de página, formularios, texto alternativo, tablas, listas, encabezados

    Cuando despliegas el árbol puedes ver todas las validaciones realizadas. Se indica si han sido correctas, ha habido problemas o se requiere una validación manual. Aquellas validaciones que han dado un problema tienen a su vez un árbol con todos los elementos erróneos. Una de las grandes novedades es su menú contextual:

    Resultado del comprobador de accesibilidad de Adobe Acrobat XI Pro. Menú contextual de una imagen sin texto alternativo, tiene las opciones: solucionar, omitir regla, explicar, mostrar en panel Contenido o en panel Etiquetas, comprobar de nuevo, mostrar informe, opciones

    Maravilloso, ¿verdad?

    • Solucionar: en el ejemplo del pantallazo, al estar seleccionada una imagen sin texto alternativo, nos abrirá la herramienta ya descrita para indicar el texto alternativo.
    • Omitir regla: no marca este error en el árbol del resultado de la validación.
    • Explicar: abre una página de ayuda que explica el error, cómo solucionarlo y los criterios de conformidad de las WCAG 2.0 a los que hace referencia. El algunos casos no hay un criterio de las WCAG 2.0 asociado, por ejemplo la asignación de caracteres Unicode, que sí trata el estándar PDF/UA, aunque curiosamente no hacen referencia al mismo.
    • Mostrar en panel Contenido: te abre el panel Contenido con el contenido del elemento que ha dado error seleccionado.
    • Mostrar en panel Etiquetas: te abre el panel Etiquetas con la etiqueta del elemento que ha dado error seleccionado, y esto es muy útil, la verdad.
    • Comprobar de nuevo: vuelve a hacer la comprobación.
    • Mostrar informe: un informe útil de verdad, no como el actual:
      Informe de accesibilidad de Adobe Acrobat XI Pro. Los datos se estructuran en tres columnas: nombre de la regla, estado y descripción.
    • Opciones: abre la ventana de configuración del validador de accesibilidad.

    Cosas que no cambian

    Dos cosas que me molestan mucho siguen igual:
    • Los elementos del desplegable para seleccionar el tipo de etiqueta siguen sin estar ordenados alfabéticamente. Una de esas cosas absurdas a las que te acabas acostumbrando:

      Desplegable para elegir tipo de etiqueta en Adobe Acrobat XI Pro desordenadas alfabéticamente.

      Lo que pasa en realidad es que siguen ordenadas por su nombre en inglés.

    • Sigue sin funcionar "control+z" para poder deshacer un cambio en el árbol de etiquetas, como borrar una sin querer (ahhh, se siente, estate más atento la próxima vez...)

    Actualizarse o no actualizarse

    Cuando salió la versión Adobe Acrobat X Pro no le veía muchas ventajas frente a la versión 9, no me parecía necesario actualizarse. Aunque la verdad es que el gran cambio en la interfaz que hubo en la versión X, con las herramientas a la derecha, hizo el trabajo más ágil. También es verdad que incluyeron la opción de guardar y validar como PDF/A-2.

    Pero esta vez no tengo dudas, los cambios de la versión XI eran bastante necesarios y harán nuestro trabajo más fácil. Personalmente creo que merece la pena actualizarse a la nueva versión.

    Artículos relacionados:

    Responsabilidad de accesibilidad de cada uno de los roles profesionales implicados en el ciclo de vida de un proyecto web

    $
    0
    0

    El objetivo de este artículo es difundir un documento colaborativo del W3C en formato Wiki que me parece de gran importancia conocer.

    Este documento desglosa los 61 criterios de conformidad de las WCAG 2.0 en listas de control más pequeñas, una para cada rol profesional implicado en un desarrollo web.

    De esta manera, cada profesional del equipo de desarrollo puede conocer las responsabilidades que tiene en cuanto a la accesibilidad del producto e integrarlas en su práctica diaria.

    Documento original:Accessibility Responsibility Breakdown, del W3C

    ¿Por qué es importante?

    Los criterios de conformidad de las WCAG 2.0 no son difíciles de aplicar en su mayoría. Sin embargo, si se desconocen, es fácil cometer errores que sí serán muy costosos de solucionar a posteriori.

    Cuando se intenta abordar la accesibilidad web al final del desarrollo, el equipo se da cuenta demasiado tarde de que muchas cuestiones deberían haberse tenido en cuenta en fases anteriores. Abordar esos cambios una vez terminado el proyecto resulta mucho más costoso. Incluso puede ocurrir que no se tengan ya los medios ni los recursos adecuados para llevar a cabo los cambios.

    La única manera de conseguir efectivamente un sitio accesible, y con el menor coste posible, es integrar los requisitos de accesibilidad en el plan de trabajo del equipo de desarrollo. Es necesario por tanto planificar desde el principio la responsabilidad de los diferentes actores: de quién es responsabilidad el cumplimiento de cada requisito y en qué momento del desarrollo debe tenerse en cuenta.

    Roles profesionales definidos

    Web Development Role: Project management, Analysis, Architecture, Interaction Design / Usability, Graphic Design, Content Strategy,  Search Engine Optimization, HTML/CSS Prototyping, Front-end Development, Back-end Development, Quality Control

    Vista del mapa con cada rol desplegado y sus criterios de conformidad asociados (en Mind42.com), autor Olga Carreras

    Los roles profesionales definidos en el documento son:

    • Project management

      Tienen un papel vital: asegurarse de que todos los interesados conocen cuál es su rol y responsabilidad en la accesibilidad del producto. Sus responsabilidades son entre otras la planificación de la accesibilidad en cada etapa del ciclo de vida del proyecto, la asignación de responsabilidades entre las personas del equipo o garantizar que se están cumpliendo los criterios en cada hito.

    • Analysis, bajo su resposabilidad tiene 9 criterios de conformidad.
    • Architecture, bajo su resposabilidad tiene 9 criterios de conformidad.
    • Interaction Design / Usability, bajo su resposabilidad tiene 36 criterios de conformidad.
    • Graphic Design, bajo su resposabilidad tiene 32 criterios de conformidad.
    • Content Strategy, bajo su resposabilidad tiene 21 criterios de conformidad.
    • Search Engine Optimization, bajo su resposabilidad tiene 28 criterios de conformidad.
    • HTML/CSS Prototyping, bajo su resposabilidad tiene 25 criterios de conformidad.
    • Front-end Development, bajo su resposabilidad tiene 60 criterios de conformidad.
    • Back-end Development, bajo su resposabilidad tiene 32 criterios de conformidad.
    • Quality Control, bajo su resposabilidad tiene los 61 criterios de conformidad.

    Cada uno de estos roles tiene una página en la Wiki. En ella se puede consultar una tabla con los criterios que están bajo su responsabilidad, organizados por los cuatros principios (Perceptible, Operable, Comprensible y Robusto) y por cada nivel de adecuación (A, AA, AAA) Además también se incluye una tabla detalle, por cada principio, con cada criterio de éxito, su descripción, los beneficios que reporta y un enlace a las técnicas suficientes asociadas.

    Tabla resumen por criterio de conformidad y rol profesional

    Tabla resumen por criterio de conformidad de las WCAG 2.0 y rol profesional

    Tabla resumen por criterio de conformidad de las WCAG 2.0 y rol profesional en el documento orginal del W3C

    Últimos artículos relacionados actualizados:

    Doctor, a mi web le pasa algo

    $
    0
    0

    Una madre espera con su hijo Juan de 6 años en la consulta del médico. Cuando el médico entra y le pregunta en qué puede ayudarles, la madre le contesta:

    - Doctor, a mi hijo le pasa algo.

    A partir de este momento puedes ponerte en la piel del doctor y leer madre por cliente, e hijo por su portal web.

    Consulta 1: El doctor “Solo Test con Usuarios”

    La madre ha entrado en la consulta del doctor “Solo Test con Usuarios”, así que el médico les cita dentro de una semana en el laboratorio.

    El día acordado Juan está sentado en una silla del laboratorio. El doctor entra poco después con cinco niños de características similares a los que suelen jugar con Juan.

    El doctor pide a los niños que ofrezcan algo de comer a Juan. Juan devora con apetito todo lo que le dan y no presenta problemas intestinales ni alergias.

    El doctor les pide después que jueguen a un juego de mesa con Juan. El niño juega con desenvoltura con los demás, se muestra sociable y les contesta con fluidez a sus preguntas.

    Por último el doctor les pide que jueguen con Juan a pasarse la pelota. Ningún niño puede jugar con Juan. Dicen que no devuelve la pelota, que se queja al apoyar el pie izquierdo, que lo tiene muy hinchado.

    El doctor se reúne con Juan y su madre una semana después y les informa de que Juan tiene un esguince. Le receta que le aplique hielo y mantenga el pie inmovilizado durante dos semanas.

    Consulta 2: El doctor “Primero Evaluación Heurística, Después Test con Usuarios”

    Retrocedemos en el tiempo. La madre llega al hospital, y en vez de entrar en la consulta 1 entra en la consulta 2.

    Cuando llega el doctor le dice muy preocupada:

    - Doctor, a mi hijo le pasa algo.

    El doctor evalúa a Juan.

    Doctor: Dime, Juan, ¿qué tal comes?

    Juan: Bien, doctor, como todo lo que me ponen en el plato y suelo tener bastante hambre.

    El niño parece sano, tiene buen color y un peso adecuado para su edad.

    Doctor:¿Y qué tal el cole? ¿Tienes muchos amigos?

    Juan: En el cole me lo paso genial. Tengo un montón de amigos, y nos encanta jugar a las adivinanzas.

    El niño se expresa con fluidez, se muestra alegre y sociable.

    Doctor:¿Y te duele algo, Juan?

    Juan: Sí, doctor, me duele mucho el tobillo, casi no lo puedo apoyar en el suelo.

    El doctor examina el tobillo. Comprueba que tiene movilidad, que está evidentemente hinchado y que el niño presenta inestabilidad al cargar el peso sobre él. El doctor comprueba que el niño solo se queja de dolor cuando lo apoya y que la zona no presenta decoloración. El doctor descarta la fractura porque conoce las reglas de Ottawa.

    El doctor informa a su madre de que tiene un esguince. Le receta que le aplique hielo y mantenga el pie inmovilizado dos semanas y vuelvan entonces de nuevo.

    Dos semanas más tarde el doctor comprueba que el tobillo ya no está hinchado y que Juan anda sin dificultad. La madre le confirma que el niño está vestido tal y como va todos los días. El doctor se asoma a la sala de espera y le pide a varios niños que entren para hacer una prueba informal, un test de “guerrilla”.

    El doctor les dice a los niños que jueguen a la comba con Juan. Los niños juegan con él, pero se quejan de que falla con facilidad.

    El doctor les pide a continuación que jueguen a pasarse la pelota. Los niños están un rato pasándose la pelota con Juan, pero se quejan de que es algo lento y el doctor observa que muchas veces les envía el balón desviado y los niños se cansan de ir a buscarlo.

    El doctor le recomienda a la madre de Juan que el niño use deportivas en vez de las botas de agua que lleva habitualmente.

    Moraleja

    Proponer como primera técnica de análisis un test con usuarios suele ser matar moscas a cañonazos. La evaluación heurística es más rápida, más fácil de llevar a cabo y menos costosa que un test con usuarios. Además detecta los principales problemas de usabilidad del sitio: el niño tenía un esguince. Una vez que estos problemas se han detectado y corregido es cuando se debe realizar el test con usuarios.

    En el primer caso el test con usuarios solo refleja el esguince, algo que la evaluación heurística detecta fácilmente. Pero además, el problema de usabilidad era tal que el problema de las botas de agua no se podía detectar en el primer test con usuarios, quedaba camuflado porque los niños no podían jugar con él.

    Una vez que se detectó y corrigió el esguince, el test con usuarios complementó la evaluación heurística, permitió detectar un problema que surgía al interactuar con los otros niños. Y no fue necesario un test formal, bastó con una prueba más informal.

    Y no hay nada más persuasivo para las madres difíciles. Aquellas que no quieren quitarle las botas de agua porque son la última moda y el niño está precioso con ellas. O aquellas que alegan que fulanito, que es un crack del baloncesto, las lleva. Y le da igual que fulanito mida dos metros, lleve botas a medida que solo pesan 200 gr. y se adaptan al tipo de cancha en la que juega. Mientras que su hijo es bajito y lleva unas botas de saldo que le vienen dos números grandes.

    No hay nada como enseñarle cómo Juan tropieza al jugar con otros niños y oír como estos no quieren jugar con él para que se decida a ponerle deportivas.

    Por otra parte, el doctor tuvo en cuenta quién era su paciente. Si Juan hubiera tenido 85 años no le hubiera preguntado “¿y qué tal en el cole?”. Posiblemente tampoco le hubiera recomendado dos semanas de reposo, pues inmovilizar una pierna a una persona mayor suele acarrear un deterioro funcional que degenera en una rigidez articular difícil de recuperar.

    Las directrices de usabilidad no son siempre reglas fijas que puedan ser aplicadas por igual en todos los sitios web, siempre habrá que tener en cuenta el tipo de sitio, su audiencia, sus objetivos o su contexto.

    El diagnóstico y el tratamiento propuesto por el doctor se basó en su experiencia. El doctor es traumatólogo (o curandero con 20 años de experiencia), ha visto muchos esguinces y ha comprobado como la inmensa mayoría de sus pacientes se curaban con los tratamientos que les ha propuesto, o no, y ha aprendido de ello.

    Pero también se basó en sus conocimientos médicos (adquiridos en la carrera o después de leer cientos de libros, artículos, estudios clínicos y asistir a un sin fin de conferencias  sobre esguinces de tobillo)

    Si la evaluación la hubiera llevado a cabo una persona sin estos conocimientos ni esta experiencia, y aun sabiendo lo que debía preguntarle al niño, quizás hubiera concluido que al niño le había picado una abeja y había que ponerle una pomada; o que tenía el tobillo roto y había que escayolar o enyesar (guiño para mis amigos uruguayos...); o que era un esguince pero debía curarse con paños calientes; o que el niño tropezaba al saltar a la comba porque tenía los pies planos y había que ponerle plantillas en las botas de agua.

    Por último, nos guste o no hablar de “estándares”,  la realidad es que existen. Un estándar es un documento establecido por consenso que prevé, para uso común y repetido, reglas, directrices y características para actividades o sus resultados, encaminada a la consecución del grado óptimo de definición en un contexto dado. Las normas se basan en los resultados consolidados de la ciencia, la tecnología y la experiencia, y tener por finalidad promover beneficios óptimos [ISO/IEC Guide 2:2004, definición 3.2]

    Hay estándares oficiales o formales de usabilidad, la ISO 9241, la ISO 13407, la ISO 9126, ISO 14598 o  la ISO 25000. Las trato en Estándares formales de usabilidad y su aplicación práctica en una evaluación heurística

    Y existen estándares de facto, aquellos que tienen una amplia aceptación, como las guías de usabilidad del Gobierno de EEUU, en las que cada una de ellas tiene un apartado con los estudios  en las que se basan, o las del Nielsen Norman Group, basadas todas ellas en estudios reales. Repaso las que me parecen más serias y relevantes en Web Usability Guidelines–Directrices de usabilidad web

    Como profesionales de la usabilidad hay que conocerlos, pues nos ofrecen una base de conocimiento importante, son referencias y estudios que avalan nuestro trabajo, nuestros diagnósticos y tratamientos.

    Que lleva mucho tiempo conocerlos. Sí, tiempo y hasta dinero.

    Que sería arrogante despreciarlos. Yo creo que sí, especialmente si no se han leído.

    Que muchas veces hay que contrastarlos y no pueden ser tomados como dogmas de fe. Sí, una evaluación heurística no es pasar una checklist, y se deben aplicar partiendo de un conocimiento profundo de nuestro cliente, su negocio, el tipo de sitio web que tiene, su audiencia, sus objetivos o su contexto.

    Que los test de usuarios son necesarios. Si, claro, pero con unos objetivos claros y a su debido tiempo.

    En este artículo he hablado de la evaluación de un producto, no del desarrollo del mismo. En el desarrollo, en el que se supone que se tienen en cuenta los criterios de usabilidad desde el principio, que se cuenta con UX Design y en el que deseamos un desarrollo ágil, los test con usuarios informales cobran una dimensión diferente.


    Reseña de “Pro HTML5 Accessibility”

    $
    0
    0

    Portada del libro Pro HTML5 AccessibilityAutor: Joshue O’Connor

    Nº páginas: 386

    Idioma: inglés

    Formato:ebook y libro impreso

    Fecha de publicación: 26 de marzo de 2012

    Web del libro "Pro HTML5 Accessibility"

    Este es uno de los mejores libros que me he leído en el último año, detallado y útil de verdad. No tirarás el dinero comprándolo, solo es necesario saber inglés.

    Se lo recomiendo a los desarrolladores que trabajan o van a trabajar con HTML5, como una gran introducción a la accesibilidad web y a cómo tenerla en cuenta en sus aplicaciones, incluso si no son en HTML5.

    Y desde luego se lo recomendaría a todas las personas que se dedican a la accesibilidad web, porque HTML5 ya no es el futuro, es el presente.

    A mucha gente le asusta en un principio el tema, pensando que todo va a ser nuevo. Pero la realidad es que todo lo que sabemos y aplicamos hasta el momento sigue siendo válido y nos sirve de base, porque las personas con discapacidad siguen accediendo de la misma manera a nuestros sitios web y siguen encontrando los mismos problemas.

    Si dominas (X)HTML, WAI-ARIA y las WCAG 2.0 no son tantas cosas nuevas las que hay que aprender. La mayor preocupación suele ser el soporte de HTML5 en los diferentes navegadores y productos de apoyo, asegurando la compatibilidad mediante la estrategia de diseño y desarrollo que conocemos como mejora progresiva (progressive enhancement)

    El libro se divide en 10 capítulos. A continuación resumo de qué se trata cada uno de ellos.

    Capítulo 1. Introduction to HTML5 Accessibility

    Este capítulo es una introducción a HTML5 y a la accesibilidad web.

    Comienza con un repaso a las diferencias entre (X)HTML y HTML 5, con una introducción a la sintaxis y a los nuevos elementos y atributos de HTML5. Una referencia de interés es el documento del W3C: HTML5 differences from HTML4

    El capítulo también se centra en introducir qué es la accesibilidad web, los beneficios que reporta,  la legislación relacionada o las WCAG 2.0

    Si necesitáis información concreta sobre la legislación española en materia de accesibilidad web o las certificaciones que existen, os recomiendo mis artículos: Referencia sobre legislación española relacionada con la accesibilidad web y Metodologías, certificaciones y entidades certificadoras de la accesibilidad web en España que actualizo en cuanto hay novedades sobre la materia.

    En este capítulo hace referencia ya a dos ideas importantes que se irán repitiendo a lo largo del libro:

    • El uso de la mejora progresiva (progressive enhancement), una estrategia de diseño y desarrollo que permita el uso de HTML5 de forma compatible con diferentes navegadores y productos de apoyo, hablando por ejemplo de Modernizr. En el vídeo “HTML5: Nuevas funcionalidades en formularios 2ª parte” de Mar Martínez para el MOOC iDESWEB, podéis encontrar sitios de referencia para conocer el soporte de HTML5 en los principales navegadores y una breve introducción sobre qué es Modernizr y los Polyfills.
    • Nuestra preocupación real debe ser hacer sitios accesibles y no que pasen un validador. Habla de los semantics ninjas obsesionados con el código válido, cuando en la mayoría de los casos esto no tiene que ver con el mundo real de la accesibilidad web, y de hecho las WCAG 2.0 son más permisivas en este sentido que las WCAG 1.0 También recomienda testear siempre que se pueda con usuarios.

    Capítulo 2: Understanding Disability and Assistive Technology

    No se puede comenzar a hablar de accesibilidad y HTML 5 sin comprender los diferentes tipos de discapacidad qué existen ni cómo acceden al contenido las personas con discapacidad.

    En este capítulo el autor aborda muy detalladamente estos aspectos. Hace un repaso de los diferentes tipos de discapacidad, explica qué son los productos de apoyo (AT) y cuáles son los más utilizados. Destaca la explicación que realiza de los principales lectores de pantalla, las diferencias entre ellos y cómo manejarlos.

    Capítulo 3: Javascript isn’t a dirty word and ARIA isn’t just beautiful music

    Me encanta el título de este capítulo. Como se intuye, está centrado en WAI-ARIA y en la accesibilidad en relación con el javascript, que siempre es el aspecto más complejo a la hora de abordar la accesibilidad de una aplicación web.

    Comienza defendiendo la utilidad de javascript cuando está bien usado. El 98% de los usuarios navega con compatibilidad con javascript, el problema ya no es tanto que esté desactivo, sino que no suponga una barrera de accesibilidad para las personas que utilizan productos de apoyo. De hecho, una de las grandes novedades de las WCAG 2.0 es que reconoce tecnologías compatibles con la accesibilidad, entre las que podemos considerar el javascript. Por ello el autor explica qué es WAI-ARIA y su importancia para hacer las aplicaciones web accesibles, pues permite informar del propósito, estado y propiedades de los elementos dinámicos e interactivos.

    Por ejemplo, una diferencia entre (X)HTML y HTML5 es que en (X)HTML solo pueden coger el foco nativamente los enlaces y los controles de formulario, y con HTML5 el foco lo pueden coger más elementos. Esto no implica que sea más accesible, solo lo será si se informa a la API de accesibilidad de su rol, estado y propiedades, y esto no siempre ocurre. Por ello vuelve a hacer hincapié en el principio de mejora progresiva: defiende que los contenidos deben estar siempre disponibles aunque el javascript no funcione, lo cual además mejora el SEO de nuestra web.

    Tampoco podía dejar de mencionar la importancia del uso de javascript no intrusivo y de un código limpio. El autor explica por qué no debe usarse <noscript>, elemento que todavía está permitido en HTML5.

    Repasa los principales problemas de accesibilidad relacionados con el uso de javascript y las técnicas Client-Side Scripting de las WCAG 2.0, que se aplican igual en HTML5. También repasa la accesibilidad de diferentes toolkits (DOJO, JQuery o Fluid)

    En el resto del capítulo se centra en WAI-ARIA, da ejemplos de uso o de cómo es anunciado por los productos de apoyo, muestra cómo se puede usar de forma complementaria con HTML5  para asegurar la compatibilidad con diferentes versiones de navegadores y productos de apoyo.

    Capítulo 4: API and DOM

    En este capítulo explica cómo funcionan internamente los navegadores, qué son las APIs de accesibilidad y cómo trabajan (también hace un repaso de las diferentes APIs de accesibilidad que hay), que es el DOM, cómo se comunican los navegadores y los productos de apoyo, qué productos de apoyo usan OSM (Off-Screen Model) o qué es el virtual buffer.

    Un documento de gran interés es HTML to Platform Accessibility APIs Implementation Guide, muy útil para verlo en formato tabla. También recomienda herramientas como INSPECT 32 (Win) y AccProbe (MSAA/IAccessible2 en Windows)

    Capítulo 5: HTML5. The new semantics and new approaches to document markup

    En este capítulo se detiene especialmente en los nuevos elementos estructurales semánticos de HTML5: header, section, article, etc. con diversos ejemplos.

    Desde un punto de vista de accesibilidad, no hay mucho cambio por usar HTML5, la mayor preocupación se centra en el soporte para los diferentes navegadores y productos de apoyo.

    Para ello se utilizará ARIA junto a los elementos nativos HTML5, tal y como recomienda también la especificación de HTML5. Hay que tener en cuenta que la semántica ARIA suele predominar (no siempre) y anular la semántica por defecto, y que hay ciertas restricciones. Es necesario por tanto estar al corriente de cómo interacciona la semántica de HTML5 y ARIA.

    Podemos ver la tabla de correspondencia y la tabla de restricciones en la especificación de HTML5 del W3C . Por ejemplo, el role ARIA de un elemento <aside> de HTML5 sería note, y como restricciones se indica que debería ser o note, o complementary o search.

    Comenta algún bug como el problema con el uso de <header> y JAWS 10/11 + Firefox 4 o anterior; pero más importante y conocido es el bug por la aplicación del HTML5 outline algorithm (que permite el uso de varios encabezados H1) y los lectores de pantalla. El autor recomienda que si no vas a sindicalizar el contenido uses un solo H1 en la página: los usuarios de lectores de pantalla te lo agradecerán.

    También es interesante el ejemplo que incluye del elemento canvas (aunque en realidad este elemento lo tratará en el capítulo 6), para mostrar cómo incluir información alternativa tanto si el elemento no es soportado como si se accede con un producto de apoyo que soporte ARIA, mostrando una aplicación del role ARIA presentational.

    Capítulo 6: Images, rich media, audio and video in HTML 5

    Imágenes

    Repasa los diferentes tipos de imágenes que se pueden encontrar en una web (gráficos, iconos, imágenes decorativas, imágenes funcionales, iconos, etc.) y la forma más adecuada de hacer accesibles cada una de ellas con ejemplos concretos.

    Repasa el buen uso de los atributos alt y title, o la conveniencia de poner nombres de fichero descriptivos a las imágenes.

    El autor explica que el atributo longdesc ya no forma parte de la especificación HTML 5 y que, aunque nunca estuvo bien soportado por los productos de apoyo, él era partidario de haberlo mantenido. Trata el uso de aria-labeledby o aria-describedby (que son parte de la especificación WAI-ARIA) como opciones para descripciones largas y cómo usarlos junto a otras alternativas más compatibles con todos los productos de apoyo.

    También aborda las distintas formas de tratar las imágenes decorativas y cuál es la más conveniente (definidas en las CSS, con alt=”” o con role=”presentation”)

    Por último, como algo específico de HTML5, trata el uso de <figure> y <figcaption>, que se usan para crear una sola unidad que pueda ser referenciada desde otra parte de la página. Dentro de <figure> se incluye la imagen (con la etiqueta <img>) y el elemento <figcaption>, el caption de la imagen, que no hay que confundir con su alternativa textual. También incluye ejemplos para clarificar su uso.

    Os recomiendo el documento "HTML5: Techniques for providing useful text alternatives" del W3C.

    Vídeo y audio

    Es una de las novedades más conocidas de HTML 5, la posibilidad de incluir estos contenidos de forma nativa sin plugins propietarios como el de Flash.

    Además de introducir los elementos y sus propiedades, explica que el principal problema actualmente es que los controles nativos son más o menos accesibles en función del navegador y de cómo en este se hayan implementado. Al final la alternativa es hacer tus propios controles y va explicando el proceso (ver el reproductor de vídeo accesible en HTML5 que propone el autor) Trata también cómo incluir una versión alternativa si no se soporta el elemento.

    Yo os recomiendo echar también un vistazo al trabajo fin de carrera de Alberto Sánchez-Heredero Pérez, tutorizado por Lourdes Moreno López, "Accesibilidad a los contenidos audiovisuales en la Web a través de HTML5" (PDF, 2MB), ganador del premio Fundación Universia-Fundación Vodafone España. Se puede ver el visor que propone en "HTML 5 support for an accessible user-video-interaction on the Web. ACCESSIBLE HTML5 MEDIA PLAYER"

    Por último habla del elemento <track>para las audiodescripciones y subtítulos, y de que por desgracia está mal soportado por los navegadores. Él recomienda usar la librería javascript open-source Captionator.

    Para el tema concreto del elemento <video> recomienda el libro "The Definitive Guide to HTML5 Video (Expert's Voice in Web Development)" de Silvia Pfeiffer

    Canvas

    Se usa para hacer imágenes dinámicas y la idea principal es que actualmente no puede considerarse accesible, pues por ejemplo el contenido dentro de <canvas> no puede ser representado como nodos de un objeto DOM. La recomendación de la propia especificación es usarlo para aquello para lo que sirve y para lo que tiene sentido, y no usarlo cuando hay otro elemento más adecuado (por ejemplo es una mala práctica usarlo para texto)

    Si se utiliza se debe proporcionar contenido que transmita la misma función o propósito, y que puede estar contenido dentro del elemento <canvas> como ya explicó en el capítulo 5.

    Recomiendo el artículo "Introducción al elemento canvas de HTML5" de Genbeta Dev que explica el uso inteligente de <canvas>

    Capítulo 7: HTML 5 and Accesible Data Tables

    Comienza repasando los problemas que tienen los usuarios de lectores de pantallas para comprender las tablas si no están bien hechas. Da también unas recomendaciones generales que son las habituales cuando hablamos de accesibilidad y tablas.

    Repasa el uso de <caption>, nuevo elemento de HTML5, como título de la tabla, que debe ser el primer elemento dentro de la misma.

    Explica que el atributo summaryya no forma parte de la especificación HTML5, pero insta a seguir utilizándolo como medio para incluir una descripción que ayude a comprender la tabla aunque el validador dé error por su uso.

    Repasa entonces las alternativas que tenemos para añadir una descripción a la tabla  que sí esté admitida por la especificación, como el uso del atributo aria-describedby, o del elemento <details> que se incluiría dentro del elemento <caption>. El elemento <details> proporciona información adicional (podría mostrarse o no visualmente) y a su vez tiene un elemento hijo <summary> con el título del contenido adicional.

    No recomienda incluir las tablas dentro del elemento <figure> (podrías hacer entonces uso de su elemento <figcaption>) porque esta anidación no está bien soportada por los productos de apoyo y la descripción y la tabla no están asociadas por código.

    También dedica buena parte del capítulo a explicar las diferentes formas de asociar las celdas de encabezado y de contenido. Aunque ahora hay una forma más fácil y rápida de usar scope (especialmente para las tablas complejas) que el tradicional uso de headers/id, recomienda este último por ser más robusto y mejor soportado. Pone diversos ejemplos para clarificar ambas posibilidades.

    Capítulo 8: Forms

    Dedica un capítulo a otra de las novedades de HTML5 que son los nuevos elementos y atributos relacionados con los formularios.

    La idea principal es que se aplican muchas de las técnicas de accesibilidad que ya conocemos, pero que al haber mucha validación nativa, es necesario que esta sea accesible.

    Los usuarios de productos de apoyo deben estar informados convenientemente:

    • deben saber que ha habido un error
    • deben poder acceder al error y se deben dar instrucciones de cómo solucionarlo
    • deben poder volver a enviar el formulario.

    Y por ello, aunque las nuevas validaciones nativas son muy potentes, la falta de soporte de las mismas para los diferentes navegadores y productos de apoyo, obliga a apoyarlas con las validaciones javascript correctamente implementadas, como pueden verse en el artículo "Accessible forms using jQuery’s Validation plug-in" de Matt Lawson

    La forma de asociar las etiquetas con los campos de formulario en HTML5 sería incluir el campo dentro de la etiqueta <label>, algo que ya se podía hacer en (X)HTML, pero que siempre estuvo pobremente soportado por los productos de apoyo. Por ello se recomienda utilizarlo junto al uso de for/id como hacemos actualmente.

    Repasa los nuevos elementos y cómo apoyarse en WAI-ARIA, o incluso javascript, para hacer accesibles aquellos que no lo son de forma nativa por cómo los han implementado los diversos navegadores (porque no avisan del cambio de valor, porque no son accesibles mediante el teclado,  etc.) Por ejemplo, un uso de progress accesible apoyado en WAI-ARIA 

    Hay nuevos atributos bastantes útiles, autofocusque podemos usar para poner el foco en el campo que ha dado el error (pero, como indican las WCAG 2.0, nunca bastará solo con esto); placeholder que permite poner un texto por defecto en un campo y se borrará solo al coger el foco sin necesidad de javascript (si no se entiende la propiedad el campo simplemente aparece vacío); etc.

    Hay otros atributos que tienen un equivalente en WAI-ARIA como el nuevo atributo de HTML5 required para los campos obligatorio (equivalente a aria-required) y que aunque podrían combinarse, si el lector de pantalla entiende los dos lo anunciará dos veces. Al final lo más robusto es apoyarlo con la información de “campo obligatorio” en el texto, como hacemos habitualmente.

    Capítulo 9: HTML5, Usability, UCD

    Este capítulo no está directamente relacionado con HTML5, es una introducción a la usabilidad y las principales técnicas que se usan, y que todas las personas involucradas en el desarrollo de sitios web deberían conocer.

    Define la usabilidad y su relación con la accesibilidad y los principios del diseño universal. Explica la importancia de incluir a los usuarios durante todo el proceso, así como las diferentes técnicas que se usan en el Diseño Centrado en el Usuario, con especial énfasis en los test con usuarios.

    Capítulo 10: Tools, Tips and Tricks. Assessing your accessible HTML5 Project

    Hace un repaso de diferentes herramientas de utilidad a la hora de revisar la accesibilidad de un sitio web, haciendo hincapié en que solo deben ser una ayuda y nunca pueden sustituir a la evaluación de un experto.

    No propone herramientas novedosas, podéis consultar una lista más detallada en: Mis validadores

    Por último, como ya comenté en HTML 5 y accesibilidad, el grupo de trabajo WCAG WG está trabajando en las Técnicas HTML5 para las WCAG 2.0, tal y como existen ahora para HTML, PDF, Flash, etc. (Techniques for WCAG 2.0) Es una gran noticia, aunque de momento están en un estado muy inicial.

    Artículos relacionados:

    Test de usabilidad y accesibilidad con usuarios en remoto con Loop11

    $
    0
    0

    Loop11

    En este artículo os voy a hablar de la herramienta Loop11 para realizar test con usuarios en remoto, una herramienta online que es francamente buena. Resulta muy sencilla de usar tanto para el evaluador que define el test como para las personas que lo llevan a cabo. Además, la información que proporciona sobre los resultados del test es fantástica.

    Siempre es preferible poder realizar un test con usuarios presencialmente, pero si no es posible, los test en remoto son una alternativa a tener en cuenta, pues permiten por ejemplo poder testear con muchos usuarios o con usuarios de una determinada zona geográfica.

    Loop11 es una gran opción que permite realizar el test en abierto o restringiendo el acceso por IP; o reclutar participantes por perfil (según sexo, rango de edad, nivel de estudios, etc.) así como usuarios con diferentes discapacidades.

    Crear el test

    La creación del test se realiza en cinco pasos:

    Información general del test

    En esta página puedes incluir el título y el texto introductorio. Puedes además indicar el idioma del test y si quieres que se le muestre a los usuarios una página inicial con las instrucciones para realizarlo.

    Primera pantalla de creación del test de Loop11

    Estas son las dos primeras pantallas del test generado

    Primera pantalla del test creado. Incluye el título y la descripción del test

    Segunda pantalla del test creado. Incluye las instrucciones para realizar el test

    Definición de las tareas o las preguntas

    Se pueden definir tareas que el usuario debe llevar a cabo o bien preguntas que debe responder.

    Segunda pantalla de creación del test. Se pueden añadir tareas y preguntas

    La tarea se define con un nombre y un texto que la describa, con la URL en la que se comienza la tarea y con la/s URL/s a las que debe llegar el usuario para considerar que la tarea se ha completado con éxito.

    Las preguntas admiten diferentes formatos de contestación (radios y checks, en vertical o en horizontal, texto libre) y pueden ser o no obligatorias para pasar a la siguiente tarea.

    Los usuarios que realizan el test verán una barra sobre el sitio web, con el porcentaje de cumplimentación del test, la tarea que debe realizar y dos botones: "Abandonar tarea" y "Tarea completada" (si considera que la han llevado a cabo con éxito)

    Web testeada con Loop1, sobre la misma hay una barra con el porcentaje completado del test, la tarea que debe realizar y dos botones. Abandonar tarea o Tarea completada

    También existe otra manera de visualizar el test con una capa siempre presente en la página que has de mover para que no tape el contenido y que es mucho más incomoda. Podéis ver la diferencia entre ambas formas con mi test de ejemplo:

    Opciones del test

    En el tercer paso se puede indicar:

    • El número de participantes que te gustaría tener para completar la evaluación.
    • El texto de agradecimiento que se muestra a los participantes que terminan el test.
    • Si deseas que tras terminar el test naveguen a una página determinada, puede ser por ejemplo interesante para incluir algún tipo de cupón por haberlo llevado a cabo.
    • La posibilidad de incluir un ID único a cada participante, pensado también para ofrecer incentivos por realizar el test.
    • Si se permite o no múltiples respuestas por IP
    • La posibilidad de restringir las participaciones por IP: permite añadir y excluir rangos de IPs

    Invitar a participantes

    Cuarta pantalla de creación de test. Cinco opciones para invitar a participantes que se describen a continuación.

    Las opciones para invitar a los participantes son cinco:

    • Generar un URL del test que podamos distribuir
    • Generar una invitación a incluir en nuestro sitio, irá restando las invitaciones disponibles en función del número de participantes que has definido
    • Reclutar participantes con Ethnio o Cint OpinionHUB en base al perfil que definas (sexo, edad, nivel de estudios, etc.)
    • Reclutar participantes con diferentes discapacidades
    Opciones de reclutamiento de participantes para test de accesibilidad. Permite indicar edad, sexo, experiencia y uso de Internet, tipo de discapacidad, etc.

    Previsualizar el test

    En el último paso podemos previsualizar el test antes de generarlo.

    Resultados del test

    El panel de resultados es fantástico, ofrece mucha información y de forma muy clara y gráfica, con posibilidad de exportar los informes a Excel XML, CSV y PDF.

    Se pueden filtrar los resultados para ver, por ejemplo, solo los resultados de los participantes que lo han completado; para excluir a los que fallaron en base a determinados criterios, lo cual permite asegurar la calidad de los resultados (por tiempo empleado, clics realizados, número de tareas fallidas, etc.)

    Los resultados se pueden ver detallados por cada tarea, por cada pregunta y por cada participante. Además de datos concretos, estadísticos y gráficas, se puede por ejemplo consultar la ruta de navegación que siguió cada usuario para cada tarea de forma muy visual:

    Visualización de los pantallazos de las páginas por los que paso un participante en una tarea

    o en formato mapa de clics:

    Mapa de clics donde se marcan como se fueron completando o fallando las tareas

    Precio

    El primer test es gratuito, con un número limitado de tareas y preguntas. Después cada test, sin límites, cuesta 350 dólares (actualmente unos 267 Euros), un precio asequible en un entorno profesional. También tiene una licencia anual para hacer un número ilimitado de test por 1900 dolores.

    Más herramientas para test en remoto:

    Artículo anterior:

    Reseña de “Pro HTML5 Accessibility”

    UserZoom, una herramienta profesional para consultores UX

    $
    0
    0

    En este post os voy a hablar de UserZoom, una herramienta profesional muy potente para testing e investigación con usuarios.

    UserZoom

    Participa en un test de ejemplo creado con UserZoom para evaluar la usabilidad de este sitio

    El test contiene diferentes tipos de testing: cardsorting cerrado y abierto, dos tareas de un típico test con usuarios, tree testing, five second test y un screenshot click testing.

    ¿Qué tipo de estudios se pueden hacer con UserZoom?

    Cardsorting cerrado

    Qué es

    Un cardsorting cerrado es una técnica que se utiliza en la creación y validación de la arquitectura de información de un sitio web. Se definen una serie de categorías y se pide al usuario que incluya los items propuestos dentro de una de dichas categorías.

    Qué permite UserZoom


    • Definir las categorías y los items y asignarles opcionalmente una descripción alternativa.
    • Definir el número de columnas en las que se mostrarán las categorías.
    • Definir el orden en el que se mostrarán las categorías y los items: alfabéticamente, aleatoriamente o en el orden en el que se insertaron.
    • Definir una página con instrucciones o incluir cuestionarios previos o posteriores al cardsorting.

    Cómo realizan los usuarios el test

    Pantalla de cardsorting cerrado, el usuario arrastra los conceptos hasta las categorías predefinidas

    Cardsorting cerrado de ejemplo creado con UserZoom

    Como se observa en la imagen, los usuarios deben arrastrar los items a una categoría.

    Cómo es el reporting

    Puedes consultar los datos de diferentes formas: en un dendograma, en una matriz de distancias, en tablas de frecuencia (por categoría o por item) o ver las respuestas por usuarios.

    Con estos datos, que puedes filtrar y exportar, tendrás la información necesaria para saber qué items son más afines con una categoría y entre sí.

    Cardsorting abierto

    Qué es

    Un cardsorting abierto es una variante de cardsorting en el que se permite a los usuarios definir las categorías en las que van a agrupar los items.

    Qué permite UserZoom

    Además de lo enumerado en el cardsorting cerrado, permite indicar el número inicial y el número máximo de categorías que puede crear el usuario.

    Cómo realizan los usuarios el test

    Pantalla de cardsorting abierto, el usuario arrastra los conceptos hasta las categorías. Puede editar el nombre de la categoría y crear una nueva.

    Cardsorting abierto de ejemplo creado con UserZoom

    Como se observa en la imagen, es igual que el cardsorting cerrado pero permite al usuario definir el nombre de la categoría y crear nuevas categorías.

    Tras la categorización, se puede solicitar al usuario que por cada categoría confirme su nombre y los items que incluyó en ella, así como que explique brevemente por qué considera que esos items deben estar juntos.

    Cómo es el reporting

    Es similar al del cardsorting cerrado.

    Test con usuarios

    Qué es

    Un test con usuarios se basa en proponer una serie de tareas al usuario (encontrar una determinada información, realizar una compra, etc.) para estudiar las dificultades que se encuentran a la hora de llevarlas a cabo y mejorar en consecuencia la usabilidad del sitio.

    Qué permite UserZoom


    • Definir la tarea: la descripción larga y abreviada de la misma, la URL en la que comienza, los botones que se mostrarán y a qué página navegarán, o si la tarea expirará si el usuario tarda más de x tiempo en responder y lo que ocurrirá entonces.
    • Definir la forma de validación, que puede ser:
      • mediante una pregunta, para lo cual definirás la/s pregunta/s y la/s contestación/es correcta/s, con la posibilidad de incluir lógica (AND, OR)
      • y/o
      • una validación por URL, definiendo las URL para las cuales se considera la tarea completada correctamente y qué acción se hará al llegar a ellas.
    • Definir opcionalmente cuestionarios previos y posteriores al test o a cada tarea, o bien sólo tras realizar con éxito o no una tarea. También se pueden crear cuestionarios que solo se muestren cuando el usuario acceda a determinada URL, por ejemplo para preguntarle por qué navegó hasta esa página.
    • Grabar en vídeo si se desea las sesiones. Permite grabar o excluir de la grabación solo determinadas páginas o dominios. También se puede grabar en vídeo solo si el usuario contestó a determinada pregunta de determinada manera. No se graban páginas HTTPS por seguridad, para ello es necesario un permiso especial. Tampoco se grabarán sesiones de más de 10 minutos. Las sesiones se grabarán para usuarios de Chrome y Firefox.

    Cómo realizan los usuarios el test

    Tras la página de descripción de la tarea, el usuario verá la URL de comienzo de la tarea con una barra que le recuerda la tarea que debe realizar y los botones que se hayan definido.

    Ejemplo de página a evaluar con una barra con el texto de la tarea y dos botones: responder y abandonar

    Test con usuarios con UserZoom

    Cuando llegue a la/s URL que se han definido como correctas se lanzará la acción definida (un mensaje, ir a la siguiente tarea, permitirle que siga navegando)

    Si la validación se ha definido con cuestionario se le mostrará a continuación.

    Cómo es el reporting

    Por el conjunto de las tareas y por cada tarea tenemos diferentes pestañas para ver los resultados:

    • Ratio & Responses: página principal con los resultados en gráficas y tablas sobre los que puedes aplicar filtros.

      Resultados de una tarea, varias gráficas y tablas de resultados

      Página principal de resultados de una tarea en UserZoom

    • Clicks & Paths: para ver el clickstream, con diversas opciones para personalizarlo, por ejemplo se puede humanizar las URL poniéndoles nombres que las identifiquen o excluir dominios irrelevantes para el estudio.

      Clickstream o árbol de rutas seguidas por los usuarios en una tarea

      Clickstream en los resultados de una tarea en UserZoom

    • Vídeos: podemos ver los vídeos de las sesiones, se graba un vídeo por cada tarea de cada usuario. Se pueden realizar diversas acciones, por ejemplo, recortar los vídeos para dejar solo las partes que nos interese analizar o aumentar la velocidad de visualización. En los vídeos podremos ver donde estaba el cursor en todo momento durante la navegación del usuario.

      Panel de visualización de los vídeos de una tarea. Se observa el cursor en la pantalla. Hay una opción para hacer un clip del vídeo.

      Vídeo de una tarea realizada por un usuario en UserZoom

    • Options: donde puedes importar o exportar datos (a Word, PowerPoint, Excel, SPSS, de todos o solo de algunos de los participantes en base a los filtros que hayas definido) También puedes consultar la lista de participantes y las acciones asociadas como la exclusión de uno o varios de ellos.

    Tree testing

    Qué es

    Un tree testing es una técnica que ayuda a evaluar la arquitectura de información de un sitio web. Consiste en que el usuario indique dónde esperaría encontrar un item propuesto dentro del menú de navegación.

    Qué permite UserZoom


    • UserZoom entiende un tree testing como un tipo de cuestionario, y por tanto se puede definir si la pregunta que se realiza es o no obligatoria y si se navegará automáticamente a la siguiente pregunta una vez contestada. También permitirá añadir condiciones y lógica para la navegación entre diferentes preguntas del cuestionario.
    • Definir el tipo de árbol y sus items y marcar qué respuestas se consideran correctas (permite pegarlas desde una excel o fichero de texto)
    • Definir si las opciones se presentarán aleatoriamente, pudiendo indicar que el orden sea aleatorio solo desde un determinado nivel.

    Cómo realizan los usuarios el test

    Menú en forma de árbol con un botón de seleccionar en cada elemento

    Tree testing de ejemplo creado con UserZoom

    Como se observa en la imagen, el usuario podrá navegar por el árbol definido y seleccionar el ítem que considera correcto.

    Cómo es el reporting

    Se puede ver el árbol con el porcentaje o el número de usuarios que seleccionaron cada opción; o se puede acceder a una visualización de los datos mediante gráficas y tablas.

    Five second test

    Qué es

    Es una herramienta de evaluación de usabilidad que consiste en que una serie de usuarios vean una página durante 5 segundos. A continuación los usuarios deben contestar a una o varias preguntas.

    Se puede utilizar para comprobar si el portal refleja claramente la empresa u organización que hay detrás de él, el objetivo y finalidad del mismo,o si los elementos que destacan son los esperados.

    Qué permite UserZoom


    • UserZoom permite hacer un screenshot timeout, es decir mostrar una imagen durante x segundos.
    • Podremos subir la imagen o indicar una url para que se genere un snapshot automático, así como definir su alineamiento y mostrar o no los segundos restantes y en qué posición de pantalla aparecerán.

    Cómo realizan los usuarios el test

    Página web con los segundos restantes y un botón siguiente. Después página con una formulario.

    Five Second Test de ejemplo creado con UserZoom

    El usuario verá el pantallazo durante los segundos definidos y posteriormente se le mostrará un cuestionario, por ejemplo con una pregunta “¿Sobre qué trata este blog?”

    Cómo es el reporting

    Varía según el tipo de pregunta realizada: abierta, selección excluyente o no entre varias opciones, matriz, etc.

    Screenshot Click Testing

    Este test de UserZoom permite definir una pregunta al usuario, por ejemplo dónde buscaría un determinado apartado o producto. A continuación se definen zonas sobre un pantallazo de nuestra web indicando cuáles de esas zonas de pulsación son las correctas para la pregunta formulada.

    Panel de control de UserZoom con un pantallazo de una web y zonas remarcadas

    Definición de áreas en un Screenshot Click Testing de UserZoom

    En el informe podremos ver gráficas y tablas de datos, así como el mapa de calor y el mapa de clics, de todos o solo del primero y/o segundo clic y/o tercer clic, etc. También podemos indicar que se muestren sobre los mapas las líneas de las diferentes resoluciones de pantalla, para saber cuánta zona de pantalla veía el usuario.

    Tres pantallas de visualización de datos. Dos tipos de mapas de calor y un mapa de clics

    Visualización de datos en formato heatmap, clickmap, darkmap de un Screenshot Click Testing de UserZoom

    Cuestionarios

    He explicado los cuestionarios especiales, pero se pueden realizar cuestionarios normales con diferentes tipos de respuestas: elegir una o varias opciones, matrices de respuestas, rankings, etc.

    Dentro de los rankings hay un tipo, el "Ranking order", que permite que el usuario ordene una serie de ítems, por ejemplo por el nivel de importancia que considere.

    También podríamos utilizar el potencial de UserZoom para crear test A/B

    Cómo lanzar el test

    Hay diferentes opciones:

    • Puedes lanzarlo automáticamente cuando accedan a tu sitio o a determinada página del mismo.
    • Puedes incluir una pestaña para solicitar la opinión de los usuarios, por ejemplo lo tienen actualmente en la web de Sanitas en la esquina inferior derecha del sitio.
    • Puedes utilizar directamente el enlace del test, como hago yo en el ejemplo que os propongo. Se pueden crear enlaces diferentes para cada perfil definido o incluso para cada participante.
    • Si el estudio requiere tracking, es decir, saber el comportamiento del usuario (dónde pulsan, las URL por las que pasan) puedes elegir dos opciones:
      • add-on, el usuario deberá instalarse en su máquina un complemento, lo cual se le solicitará al comenzar el test. Es útil si no quieres o no puedes incluir JS en tu sitio, por ejemplo para evaluar sitios de la competencia. Al final se dan instrucciones para desinstalarlo. La grabación en vídeo de las sesiones solo está permitida si seleccionas add-on.

        Ventana de Firefox para instalar el add-on de UserZoom

        Solicitud e instalación del add-on de UserZoom en Firefox

      • incluir código JS en la página, tendrás también la opción de tener un código permanente para todos los estudios para evitar la  necesidad de incluir nuevos códigos cada vez que creas un estudio.

    Características generales de los proyectos

    A nivel de proyecto tiene muchas funcionalidades que te permiten hacer casi cualquier cosa:

    • puedes crear cualquiera tarea (denominación genérica para cualquiera de los test que he comentado en primer lugar) Puedes crearlas desde cero o copiarlas desde otro proyecto; puedes ordenarlas, agruparlas, definir con mucha libertad la aleatoriedad de las mismas o de los grupos definidos.
    • gestión de imágenes a utilizar en el proyecto.
    • gestión de redirecciones o textos a nivel de proyecto (cuando no reúnes los requisitos necesarios para realizar el test, cuando ya has alcanzado la cuota máxima de usuarios que definiste, etc.)
    • permite la personalización del look&feel de las pantallas del test o del destacado que incluyes en el sitio para pedir el feedback de los usuarios.
    • además de poder seleccionar el idioma del proyecto puedes modificar los literales predefinidos para ese idioma (texto de los botones, etc.)
    • creación de perfiles de usuarios, por ejemplo podrías definirte diferentes perfiles por edad, localización, por forma en la que accedieron al test, etc.
    • definir una cuota de participantes, el tiempo de vida del proyecto, si se permiten varias pruebas por ordenador, etc. Puedes restringir las IP desde las que se puede realizar el estudio o incluso seleccionar desde qué navegadores te interesa solo que se realice el test (IE6, IE7, IE8+, Firefox, Chrome)
    • Además de los resultados generales del estudio y de cada uno de los test que incluye, podrás ver los resultados por los perfiles de usuario que hayas definido, y otra información general como el sistema operativo, navegador o resolución de pantalla de los usuarios.
    • Tienes opciones para controlar la calidad de los resultados, excluyendo por ejemplo a los que realizaron menos clics de los que indiques o estuvieron menos de x segundos en una o varias tareas.
    • La posibilidad de incluir condiciones y lógica en los cuestionarios nos permite gran control de navegación entre las tareas o las respuestas dentro de un cuestionario, por ejemplo que en función de una pregunta inicial sobre su edad se les muestre un determinado test u otro, que en función de una respuesta se les muestre una pregunta o tarea diferente, etc.

    Otras características generales de la herramienta

    Además de la gestión de proyectos tiene también una gestión de equipos de trabajo y de los miembros de dichos equipos.

    La interfaz está solo en inglés y permite cierta personalización del menú de tareas.

    También se pueden crear estudios específicos para apps y para web dispositivos móviles.

    Conclusiones

    UserZoom es una herramienta profesional muy potente que te permite hacer prácticamente de todo en lo que a testing con usuarios se refiere. Aunque es imposible detallar todo lo que tiene creo que os he dado una visión bastante completa.

    La verdad es que la primera vez que accedí al panel de control me abrumé un poco, pero con un par de horas de formación y después crear el primer estudio, es sencillo hacerse con la herramienta.

    Supongo que si habéis llegado hasta aquí lo que os estaréis preguntando es cuánto vale. Es su web podéis consultar el plan de precios y solicitar un presupuesto personalizado en función de las funcionalidades y administradores que necesitéis. También podéis consultar los clientes que utilizan Userzoom.

    Hay otros temas que no he tratado como la seguridad de los datos, la integración con Google Analitycs y su adecuación a los estándares de accesibilidad que podéis consultar en su web en Características de UserZoom.

    Participa en un test de ejemplo creado con UserZoom para evaluar la usabilidad de este sitio

    El test contiene diferentes tipos de testing: cardsorting cerrado y abierto, dos tareas de un típico test con usuarios, tree testing, five second test y un screenshot click testing.

    Artículos relacionados:

    Test de usabilidad y accesibilidad con usuarios en remoto con Loop11

    Claves del "Estudio de usabilidad en tablet de e-commerce de moda" de UserZoom

    $
    0
    0

    UserZoom publicó en junio el estudio "Mobile Usability Testing. Estudio de usabilidad en Tablet. E-commerce de moda". No solo me parecen interesantes sus conclusiones, sino que creo que es un buen ejemplo en si mismo de cómo presentar amigablemente los resultados de una investigación con usuarios.

    El estudio consistió en un test online en remoto. Se solicitó a 800 compradoras habituales de moda en tiendas online, entre 25 y 45 años, de cuatro países, entre ellos España con 200 usuarias, que realizaran tres tareas de compra en sus tablets iPad o Android.

    Pocas marcas tienen sus sites pensados para ofrecer una buena experiencia de compra en dispositivos móviles.

    En general no tienen los contenidos, ni los formularios, ni los métodos de pago adaptados y enfocados a las necesidades especificas de su uso en tablet o móvil.

    Entre las conclusiones que me parecen más destacables están:

    • El motivo principal de abandono fue el registro, bien porque era muy largo, bien por algún error en el proceso. La mayoría de las marcas no han adaptado sus formularios y también influyó el tiempo de carga.
    • Las webs mejor valoradas son las que no obligan a registrase para comprar, o bien en las que el registro es opcional y ofrecen una opción de compra como invitado. La mayoría de las usuarias prefieren elegir voluntariamente si se registran o no.
    • Las usuarias se quejan de la dificultad de acceso a la información o la falta de información detallada del producto. En la página de producto valoran:
      • La información clara y detallada del producto (importe final, composición, forma de lavarlo, comentarios de los clientes, etc.) No les gusta la falta de información o que haya que desplazarse o abrir otra ventana para acceder a ella.
      • Que la página esté ordenada y no se vea saturada. No les gusta la letra demasiado pequeña para leer.
      • La calidad de las fotos. No les gusta que haya pocas fotos o no se vea bien el producto en ellas.
      • Que sea sencillo seleccionar talla y producto.
      • Ver cómo queda el producto en una modelo.
      • Las recomendaciones de con qué combinar la prenda.
      • El acceso rápido a métodos de pago como PayPal.
      • Poder hacer zoom
    • La información relevante para la compra, como la información sobre devoluciones, no siempre está accesible o en el lugar adecuado cuando se necesita. Las webs mejor percibidas por los usuarios tienen esta información más accesible durante el proceso de compra que las otras. Por tanto esta información influye en la percepción de marca y la satisfacción del cliente.

      Ficha de producto de topshop.como La información sobre la entrega y las devoluciones son pestañas al mismo nivel que la información del producto.

      topshop.com ofrece la información sobre la entrega y las devoluciones al mismo nivel que la información del producto

    • Algunos sitios tienen apps nativas pero no te informan al entrar desde la URL normal de que existen y las puedes descargar. La mayoría de las usuarias prefieren una web móvil adaptada a todos los dispositivos si esta funciona bien. Curiosamente en España la preferencia es al revés que en el resto de países. En España, el 52% prefieren una app nativa y el 48% una web móvil.
    • Las usuarias sí utilizan el buscador en la tablet.
    • El 89% valoran un sistema de pago rápido y seguro como algo importante en la tablet. PayPal aparece como el método de pago preferido en los cuatro países.

    Os recomiendo de verdad leer el informe completo: "Mobile Usability Testing. Estudio de usabilidad en Tablet. E-commerce de moda".

    Reseña "The Elements of User Experience"

    $
    0
    0
    Portada del libro The Elements of User ExperienceAutor: J. J. Garrett

    Nº páginas: 172

    Idioma: inglés

    Formato:ebook y libro impreso

    Fecha de publicación: diciembre 2010 (2nd Edición)

    Web del libro "The Elements of User Experience"

    He reseñado otros libros antes en el blog, pero me apetecía empezar una sección en la web con reseñas de libros imprescindibles. Qué mejor libro para empezar que un clásico, un libro que debería ser de lectura obligatoria para todo profesional de la experiencia de usuario, puesto que describe como pocos nuestra disciplina y metodología de trabajo de una forma clara y concisa.

    Las reseña es una forma de acercarse a la estructura y contenido del libro, pero sirve también de breve resumen y divulgación de cuál es nuestra metodología de trabajo, que tan importante es transmitir a nuestros clientes.

    Podéis consultar más reseñas en: "Libros y reseñas"

    Sobre el libro

    En marzo del año 2000 J.J.Garrett publicaba en su web el diagrama "The Elements of User Experience" (PDF, 20 kb).

    Cinco planos de abajo a arriba: Primero User Needs and Site Objetives. Segundo Functional Specifications and Content Requeriments. Tercero Interaction Design and Information Arquitecture. Cuarto Information Design, Interface Design and Navigation Design. Quinto Visual Design

    Su aceptación y divulgación fue tal que no es sorprendente que la publicación al año siguiente del libro, que desarrolla y explica este esquema, fuera también un éxito inmediato, convirtiéndose en uno de los libros de referencia de nuestra disciplina.

    A finales de 2010 publicaba la segunda edición revisada, con una orientación no solo centrada en la web, sino partiendo de la idea de que los temas, conceptos y principios que trata se pueden aplicar a productos y servicios de todo tipo.

    Capítulo 1. User Experience and Why It Matters

    En este capítulo aborda qué es y qué no es la experiencia de usuario a partir de ejemplos de la vida cotidiana, cómo afecta al producto final y a sus usuarios.

    But even though we interact with countless products and services every day, we easily forget that they are made by people, and that someone, somewhere should get the credit when they work well for us—or get the blame when they don’t.

    ...

    User experience design often deals with questions of context. Aesthetic design makes sure the button on the coffeemaker is an appealing shape and texture. Functional design makes sure it triggers the appropriate action on the device. User experience design makes sure the aesthetic and functional aspects of the button work in the context of the rest of the product, asking questions like, “Is the button too small for such an important function?” User experience design also makes sure the button works in the context of what the user is trying to accomplish, asking questions like, “Is the button in the right place relative to the other controls the user would be using at the same time?”

    En este capítulo trata también qué beneficios supone para la empresa y cómo esta querrá medir el retorno de la inversión. Para ello la analítica web puede ser nuestro aliado pues nos permite definir objetivos y medir y analizar la consecución de los mismos, como la tasa de conversión.

    Por último aborda el concepto de Diseño Centrado en el Usuario como la práctica para lograr una buena experiencia de usuario.

    Capítulo 2. Meet the Elements

    El proceso de diseñar experiencias de usuario parece mucho menos complejo si lo descomponemos en cada uno de sus elementos.

    En este capítulo introduce las cinco capas de las que se compone el diagrama y que suponen las diferentes fases de nuestro trabajo: Strategy, Scope, Structure, Skeleton, Surface.

    Las cinco capas de abajo a arriba (de los abstracto a lo concreto) son: Strategy, Scope, Structure, Skeleton, Surface

    De abajo a arriba estos cinco planos dan un framework conceptual para tratar los problemas de la experiencia de usuario y las herramientas que usamos para resolverlos.

    Van de lo abstracto a lo concreto y cada plano es dependiente del anterior. Las decisiones de estrategia deben propagarse hacia arriba y los cambios ser contrastados con las decisiones en planos anteriores.

    Cada plano está divido en dos mitades:

    Los cinco planos (Strategy, Scope, Structure, Skeleton, Surface) están divididos verticalmente en dos mitades. A la izquierda con el título Product as funcionality. A la derecha con el título Producto as information

    • A la izquierda se colocan los elementos específicos de la web entendida como una plataforma de funcionalidad. Aquí consideramos el producto como una herramienta o conjunto de herramientas, así como las tareas y los pasos a seguir en un proceso y cómo los usuarios los completan.
    • A la derecha se colocan los elementos específicos de la web entendida como un sistema de información: el tipo de información que el producto ofrece y lo que significa para nuestros usuarios, con el objetivo de que las personas puedan encontrar, integrar y dar sentido a la información que les proporcionamos.

    De este modo llegamos al esquema final, más completo que el de la versión original del año 2000, donde todas las piezas encajan:

    Cinco planos de abajo a arriba: Primero Strategy: User Needs and Product Objetives. Segundo Scope: Functional Specifications and Content Requeriments. Tercero Structure: Interaction Design (en product as functionality) and Information Arquitecture (en product as information). Cuarto Skeleton: Information Design, Interface Design (en product as functionality)and Navigation Design (en product as information). Quinto Sensory Design

    Capítulos 3 - 7. Repaso de cada uno de los planos

    The Strategy Plane. Product Objetives and User Needs

    Esta fase gira en torno a la definición de los objetivos del producto y las necesidades de los usuarios.

    En la definición de objetivos trata temas como los objetivos de negocio, la identidad corporativa y la definición de indicadores de éxito que después podamos medir para ver si estamos cumpliendo con nuestros objetivos.

    En la identificación de nuestro público objetivo y sus necesidades trata temas como la segmentación de usuarios, la investigación de quiénes son nuestros usuarios y qué necesitan y esperan, o la técnica de Personas y Escenarios.

    Por último hace hincapié en la importancia de que la empresa y el equipo estén involucrado en el todo el proceso.

    The Scope Plane: Functional Specifications and Content Requeriments

    En esta fase trasladamos las necesidades de los usuarios y los objetivos del producto a los requerimientos específicos para decidir el alcance: qué contenido y funcionalidades le ofrecemos al usuario y su priorización.

    The Structure Plane: Interaction Design and Information Architecture

    Una vez que hemos definido los objetivos del producto y las necesidades de los usuarios; una vez que hemos definido el alcance del proyecto concretando y priorizando los requisitos de contenido y las especificaciones funcionales; es ahora cuando nuestras preocupaciones se desplazan hacia aspectos más concretos y comenzamos a definir la arquitectura de información y el diseño de interacción.

    Garrett introduce cada una de estas disciplinas y sus fundamentos, así como la forma de plasmar los resultados en entregables comprensibles. Garrett es también muy conocido por su Visual Vocabulary muy útil para la diagramación. Traté este tema en el vídeo sobre diagramación para el MOOC iDESWEB de la Universidad de Alicante.

    The Skeleton Plane: Interface Design, Navigation Design and Information Design

    Comienza hablando sobre la conveniencia de que los sitios se adecuen a las convenciones y al peligro del mal uso de las metáforas.

    Trata también el proceso mediante el cual seleccionamos los elementos de la interfaz, definimos el sistema de navegación y de información, con especial énfasis en que el usuario sepa siempre dónde está y a dónde puede ir, para finalmente plasmarlo en wireframes.

    The Surface Plane: Sensory Design

    Este capítulo se centra en cómo el diseño visual debe apoyar la experiencia de usuario, puesto que no es solo una cuestión de estética.

    Nuestro trabajo no consistirá en evaluar si el diseño es agradable, sino que centraremos nuestra atención en su eficacia. No es una cuestión de estética sino de estrategia.

    ¿A dónde se nos va la mirada? ¿qué elementos llaman la atención? ¿son objetivos estratégicos o lo que llama la atención nos distrae de los objetivos? ¿el diseño ayuda y apoya a la arquitectura o la socaba? ¿aclara las opciones disponibles y refuerza la estructura o abruma y confunde? ¿comunica la identidad de marca?

    Garrett habla del contraste como herramienta importante para trabajar la atención del usuario. El contraste debe servir para guiar al ojo a través de la página, teniendo en cuenta que el uso excesivo conduce a un aspecto desordenado.

    También hace hincapié en la importancia de la uniformidad del diseño, en como el uso de plantillas uniformes y consistentes permite comunicar sin confundir. Por último trata el uso del color y la tipografía, o la importancia de crear guías de estilo.

    Capítulo 8. The Elements Applied

    En este capítulo reflexiona sobre la metodología de trabajo y su aplicación.

    Me gusta la idea de que en el momento en que no sepas contestar a la pregunta "¿Por qué los has hecho así?" es que estás haciendo mal las cosas. El enfoque correcto del proyecto depende de que sepas fundamentar cada decisión en la compresión de cada una de las cuestiones en juego en los diferentes planos del proceso.

    También es fundamental saberse adaptar a los plazos, al presupuesto y a las personas disponibles, que casi nunca son los ideales. Saber sobrevivir a ese estado de emergencia permanente que parece envolver siempre a los proyectos web, en los que ya estamos retrasamos antes de empezar.

    Es importante saber transmitir que este es el único enfoque sensato pues costará tiempo a corto plazo pero ahorrará mucho tiempo a largo plazo. Y al final tendrás un producto que estará a la altura de las expectativas de todos.

    Garrett también reflexiona sobre los test con usuarios. Aborda el peligro de considerarlos el principal o incluso el único medio para asegurar la experiencia de usuario. Si bien es evidente que son importantes, son solo una herramienta más para lograr nuestro fin, no son un sustituto de este proceso. De lo contrario es probable que acabes haciendo las preguntas equivocadas y obteniendo en consecuencia conclusiones erróneas.

    UsabilityTools, suite de herramientas UX

    $
    0
    0

    UsabilityTools es una suite de herramientas online para testing e investigación con usuarios que también incluye utilidades de analítica web.

    UsabilityTools

    Es una aplicación muy completa y sencilla de usar que permite realizar gran variedad de pruebas, eso sí, solo está disponible en inglés.

    ¿Qué estudios se pueden hacer con UsabilityTools?

    Están divididos en tres tipos:

    User Experience Suite

    Pantalla de creación de pruebas UX. Se puede seleccionar: Survey, Web testing, CardSorting, Click Testing

    Podéis ver un proyecto de ejemplo con los cuatro tipos de pruebas del User Experience Suite en: Proyecto de ejemplo realizado con UsabilityTools

    Os recomiendo que no lo hagáis con Explorer, da errores a menudo.

    A la hora de lanzar el proyecto se te proporciona la URL del estudio, pero también se te ofrecen otras posibilidades: crear y personalizar un pop-up para el sitio o la posibilidad de que te busquen los usuarios para el test en base a las características que indiques (país, edad, etc.)

    Survey

    Nos permite crear cuestionarios con diferentes tipos de preguntas y respuestas: matriz de radio buttons o de checkboxs, respuesta libre, respuesta simple por desplegable o por slider, ordenación de términos o imágenes, etc.

    Se puede configurar que las respuestas se muestren en un orden aleatorio y definir si la contestación es obligatoria.

    También permite añadir condiciones para decidir, en función de la respuesta del usuario, a que página del estudio se envía al usuario.

    Pantalla de selección de tipo Survey. Permite elegir entre: radio button matrix, numerical question, text card sorter, drop-down list, open question, rating scale, checkbox matrix, slider, image card sorter, radio button y multiple choice.

    Web Testing

    Permite definir test con usuarios en remoto: describes la tarea a realizar, la URL de comienzo del test y la página de éxito (exacta o que “comience por”)

    Como es habitual en este tipo de test (ya lo vimos en Loop11 o en UserZoom) en la parte superior de la pantalla se muestra la descripción de la tarea y los botones para continuar.

    Página principal del blog Usable y accesible con una franja superior con la descripción de la tarea y dos botones: sucess y abandon.

    Card Sorting

    Permite realizar pruebas de cardsorting abierto y cerrado. En el primer caso el usuario puede definir las categorías en las cuales agrupar los términos propuestos, y en el segundo caso nosotros definimos las categorías.

    En la siguiente imagen vemos un ejemplo de cardsorting cerrado realizado con UsabilityTools.

    Test de carsorting. En el centro de la pantalla se muestran las etiquetas de las categorías. En el lateral izquierdo están listados los términos para que el usuario los arrastre a su categoría.

    Click Testing

    Permite mostrarle un pantallazo al usuario, hacerle una pregunta y testear dónde hace clic. Por ejemplo podemos preguntarle dónde buscaría un determinado apartado o producto.

    Se puede configurar si permitimos un solo clic o varios clics. En el siguiente ejemplo vemos un test de este tipo en el que se permiten varios clics. Cada uno de los clics aparece señalado en pantalla y el usuario puede eliminarlo si lo desea.

    Pantallazo del blog Usable y accesibles con tres clics marcados mediante un círculo y un número en su interior. Uno de los clics tiene un menú contextual con la opción de borrar.

    Podéis ver un proyecto de ejemplo con los cuatro tipos de pruebas del User Experience Suite en: Proyecto de ejemplo realizado con UsabilityTools

    Conversion Suite

    Click Tracking

    Mediante la inclusión de un script en tus páginas podrás consultar dónde realizan clic tus usuarios. Puedes consultar los mapas de calor y clics, estadísticas para áreas particulares de interés, hacer el seguimiento para diferentes estados de elementos interactivos, etc.

    Form tester

    Permite analizar el comportamiento e interacción de los usuarios con un formulario de tu web.

    Es un test que no incluyen otras suites y que resulta muy útil pues, mediante la inclusión de un script en la página, recoge datos sin interferir con los usuarios.

    Podrás analizar el tiempo general de interacción con el formulario y el tiempo concreto en cada campo, el último campo con el que han interactuado antes de abandonar el formulario, cuántas veces corrigen cada campo, etc.

    A/B Testing

    Este tipo de test consiste en hacer un pequeño cambio en el diseño o estructura de una web y observar cómo afecta al comportamiento de los usuarios.

    Como veis en la siguiente imagen, permite definir diferentes variantes de la página de una manera muy sencilla o definir los objetivos de conversión.

    Pantallazo del blog usable y accesible con uno de sus elementos remarcados, un menú contextual ofrece las opciones de moverlo, editarlo, cambiarle el tamaño, etc.

    Visitor Recording

    Grabará en vídeo el comportamiento de los usuarios que accedan a tu web, para ello es necesario incluir un script en las páginas.

    Registra toda la sesión (clics, pulsaciones de teclas, scroll realizado, las acciones en las pestañas del navegador, etc.) y posteriormente permite editar, etiquetar, anotar o descargar el vídeo.

    Feedback Form

    Con esta utilidad puedes crear un formulario o encuesta, por ejemplo para preguntarle al usuario qué opinión le merece nuestro sitio:

    Encuesta de UsabilityTools. Incluye cuatro preguntas, seleccionar una cara que refleje el sentimiento que le produce el sitio, que seleccione términos que describan el sitio, un campo libre y la solicitud de su dirección de email

     

    More

    Persona Creator

    La definición de “Personas”, arquetipos de usuarios de nuestra web que representan patrones de conducta, objetivos y necesidades, es una de las principales técnicas UX.

    Esta herramienta permite definir la plantilla, rellenarla para cada “persona” y guardarla en PDF.

    Plantilla para definir una persona. Presenta diferentes campos: foto, nombre, edad, objetivos o valoración de su experiencia o frecuencia de uso

    Accessibility Evaluation

    La evaluación se realiza mediante la solicitud de una URL. La herramienta te indica los errores, advertencias y sugerencias sobre un pantallazo de la página.

    La información sobre cada uno de estos indicadores es muy breve. Indica que evalúa de acuerdo a las WCAG pero no en base a qué versión de las mismas.

    Analizar los datos

    Los datos se pueden visualizar en pantalla o descargar en formato CSV y XLS o SVG en el caso de los gráficos.

    Tienes una visión general del proyecto y un apartado separado para cada una de las pruebas definidas.

    Por ejemplo, en el User Experience Suite, los datos de la vista general son:

    • Nº de personas que respondieron, así como el número de personas que completaron o abandonaron el estudio.
    • Gráficas comparativas de las diferentes tareas por los siguientes datos:
      • Success/fail/abandon rate
      • Average task time
      • Average page views

    En función del tipo de estudio los resultados se muestran de una u otra manera, normalmente de una forma bastante visual. Los datos que se ofrecen pueden ser suficientes en muchos casos pero en otros pueden resultar insuficientes, en este sentido otras suites ofrecen mucha más información.

    NO incluye opciones útiles como la posibilidad de grabar las sesiones del estudio, poder aplicar filtros sobre los datos cuando tienes gran cantidad de ellos o controlar la calidad de los resultados (por ejemplo excluyendo a los que realizaron menos clics de los que indiques o estuvieron menos de x segundos en una o varias tareas) Tampoco se ofrece información sobre el dispositivo, sistema operativo, navegador o resolución de pantalla de los usuarios que hicieron el estudio.

    A continuación vemos una imagen de los resultados de un test con usuarios, donde por ejemplo hubiera sido útil incluir un clickstream para consultar el flujo de navegación.

    Los resultados se muestran en una gráfica. Debajo de la misma se muestra un listado de páginas de éxito, páginas de error y páginas de abandono

    En la siguiente imagen se ve la presentación de los resultados de un cardsorting.

    Por cada uno de los términos se ve una gráfica con la categoría más seleccionada. Después incluye una tabla por categorías o por términos.

    Puede ser suficiente, pero hay que tener en cuenta que otras herramientas ofrecen una análisis más detallado con dendogramas y matrices de distancias.

    Opciones de configuración y precio

    Dispone de algunas opciones básicas de configuración:

    • permite decidir si se enseña o no al usuario las instrucciones generales de funcionamiento de cada tipo de test
    • se puede cambiar las etiquetas de los botones
    • se puede configurar que el proyecto termine después de determinado tiempo o de determinado número de contestaciones al mismo.

    Sin embargo NO tiene otras opciones avanzadas que sí presentan otras suites, por ejemplo que se pueda o no contestar varias veces desde el mismo ordenador, poder incluir o excluir determinadas IPs, o poder restringir el test a determinados dispositivos o navegadores.

    La herramienta es de pago aunque puedes probarla gratuitamente durante 14 días. El precio más económico es de 29 euros al mes por una suscripción anual en su modalidad básica. Si os interesa la herramienta, del 14 al 30 de noviembre del 2013 tendrá un descuento del 40%.

    Por cierto, si la vais a probar os recomiendo que no lo hagáis con Explorer pues se cuelga bastante. Con Chrome va bastante bien.

    Otras herramientas similares evaluadas anteriormente

    Puedes consultar una lista completa de herramientas de accesibilidad y usabilidad en Mis validadores

    PDF accesible. PDF correctamente etiquetado desde inDesign

    $
    0
    0

    Transcripción del vídeo

    Presentación del vídeo PDF accesible. PDF correctamente etiquetado desde inDesign

    Uno de los cursos que imparto habitualmente es el de creación de PDF accesibles, en el cual enseño a convertir PDF en PDF accesibles mediante el programa Adobe Acrobat Professional.

    Aunque desde Acrobat podemos conseguir que nuestro PDF sea accesible, son muchas las cosas que podemos hacer desde el programa con el que generamos el PDF, sea Word, sea inDesign, para conseguir que el PDF resultante sea más accesible. De esta manera tendremos que hacer menos modificaciones después con Acrobat.

    Las características que debe tener un PDF para que sea accesible son muchas, pero quizás, una de las más importantes y también de las más laboriosas, es que esté correctamente etiquetado.

    A lo largo de los cursos que he ido impartiendo he comprobado que este es uno de los requisitos que más les cuesta a mis alumnos, especialmente si trabajan desde inDesign. Es también complicado encontrar documentación sobre cómo conseguir que desde inDesign el PDF generado esté bien etiquetado.

    En este vídeo os voy a mostrar cómo explico en el curso la manera de conseguir que los PDF generados desde inDesign tengan un etiquetado correcto. Es decir, no voy a abarcar todas las acciones que se pueden llevar a cabo desde inDesign para que el PDF resultante sea lo más accesible posible, sino que me voy a centrar solo en el etiquetado, que es uno de los aspectos más complicados.

    Para seguir el vídeo es conveniente tener cierta base sobre qué es un PDF accesible y el etiquetado de los PDF, pero espero que, si ya tenéis ciertos conocimientos de accesibilidad y os estáis peleando con inDesign para conseguir que el PDF esté correctamente etiquetado, el vídeo os sea de ayuda.

    Curso "Creación de PDF accesibles"

    El curso "Creación de PDF accesibles" tiene 7 horas de duración y lo imparto en las empresas interesadas.

    El temario y los ejercicios los personalizo en función de las necesidades de la empresa, del nivel de los alumnos y de los programas que utilizan.

    El objetivo es aprender a convertir PDF en PDF accesibles mediante el programa Adobe Acrobat Pro XI, así como las buenas prácticas a seguir en los programas de origen (Word, inDesign) para lograr documentos más accesibles.

    Tiene una orientación práctica, pero incluye una primera parte teórica de 1 hora de duración para comprender qué es un PDF accesible, los principales problemas cuando se accede a un PDF no accesible desde un lector de pantalla, los diferentes tipos y versiones de PDF (especialmente PDF/A y PDF/UA), repasar la legislación española en materia de accesibilidad web y la normativa y estándares existentes (Norma UNE 139803:2012, WCAG 2.0)

    Lo he impartido ya en las empresas Closas-Orcoyen, Crein, Artes Gráficas Palermo, Avvio Publicidad, Advertising Willyan Stola & Partners y a empresas de la Fundación ONCE (Fundosa Galenas y Flisa).

    Si estás interesado en obtener más información sobre el curso puedes ponerte en contacto conmigo.

    Otros vídeos realizados

    Otros artículos relacionados:


    Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente

    $
    0
    0

    En este artículo explico:

    • el problema de accesibilidad que pueden suponer las zonas de nuestras páginas que se añaden, eliminan, actualizan o modifican automáticamente sin intervención del usuario (llamadas Live Regions)
    • lo fácil que es solucionar este problema con el uso del atributo aria-live de WAI-ARIA en dicha región.
    • el uso correcto del atributo aria-live y otros relacionados: aria-atomic, aria-relevant y aria-busy.
    • incluyo un ejemplo detallado para que podáis ver las diferencias según los valores que indicamos en estos atributos
    • la compatibilidad con diferentes lectores de pantalla y navegadores

    Comprender el problema para entender la solución

    Imaginemos que tenemos una zona o varias zonas de nuestra página web cuyo contenido se añade, elimina, actualiza o modifica sin intervención del usuario. Es lo que llamamos una live region, una zona viva de la página.

    Os enumero algunos ejemplos, podemos tener una zona en la cual...

    • ... se actualicen los resultados de determinados eventos deportivos, por ejemplo, cada vez que un equipo marca un gol,
    • ... haya un banner publicitario que vaya mostrando cada x minutos un anuncio diferente,
    • ... haya un contador, por ejemplo indicando los minutos que restan para que termine el tiempo de un examen,
    • ... se muestren mensajes importantes al usuario, por ejemplo errores de validación de un formulario a medida que el usuario rellena los campos del mismo,
    • ... se muestren los usuarios que están conectados en ese momento, por ejemplo los alumnos en línea en un curso online,
    • ... se muestren los nuevos mensajes de un chat, de Twitter o las últimas noticias desde una fuente RSS.

    Podríamos seguir poniendo ejemplos, lo que tienen en común todas ellas es que se actualizan automáticamente mediante un evento externo, no porque el usuario lo solicite explícitamente, y cuando se realiza dicha actualización el usuario puede tener el foco en cualquier otra parte de la página.

    Si puedes ver la página seguramente no tendrás problemas para percatarte del cambio que se efectúe en una live region. El problema surge cuando accedes a la página mediante un lector de pantalla, pues no serás conscientes de la actualización a menos que el lector de pantalla te la anuncie.

    Este es por tanto el problema que queremos solucionar: queremos que el lector de pantalla pueda anunciarle al usuario que se ha producido un cambio en una zona dinámica de la página (live region), qué cambio ha sido y decidir cómo y cuándo queremos que se lo anuncie.

    No está de más recordar que es además un requisito de accesibilidad necesario para alcanzar el nivel de adecuación A de acuerdo a las WCAG 2.0. El criterio de conformidad 4.1.2 Nombre, función, valor (nivel A), indica:

    4.1.2 Nombre, función, valor: Para todos los componentes de la interfaz de usuario (incluyendo pero no limitado a: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores que pueden ser asignados por el usuario pueden ser especificados por software; y los cambios en estos elementos se encuentran disponibles para su consulta por las aplicaciones de usuario, incluyendo las ayudas técnicas. (Nivel A)

    WAI-ARIA como solución

    WAI-ARIA (WAI - Accessible Rich Internet Applications) es una especificación del W3C que proporciona una ontología de roles, estados y propiedades que se pueden utilizar para mejorar la accesibilidad y la interoperabilidad de los contenidos y aplicaciones web.

    WAI-ARIA provides a collection of accessibility states and properties which are used to support platform accessibility APIs on various operating system platforms. Assistive technologies may access this information through an exposed user agent DOM or through a mapping to the platform accessibility API. When combined with roles, the user agent can supply the assistive technologies with user interface information to convey to the user at any time. Changes in states or properties will result in a notification to assistive technologies, which could alert the user that a change has occurred.

    Accessible Rich Internet Applications (WAI-ARIA) 1.0

    WAI-ARIA nos proporciona pues mecanismos para transmitir a los productos de apoyo la información sobre la función, los estados y las propiedades (y sus valores) de los componentes de interacción personalizados, así como las notificaciones sobre los cambios producidos en los mismos.

    Los atributos de WAI-ARIA que nos permitirán identificar las live regions y definir cómo queremos que se anuncien las modificaciones que en ellas se llevan a cabo son:

    • aria-live: para identificar la live region y, mediante su valor, indicar cuándo queremos que se anuncien sus actualizaciones al usuario.
    • aria-atomic: para definir si queremos que se anuncie toda la región o solo las partes que han cambiado.
    • aria-relevant: para establecer qué tipo de actualización en la región queremos que se anuncie al usuario.
    • aria-busy: para detener o activar temporalmente el anuncio de la actualización cuando muchas partes de un mismo elemento van a ser modificadas, y de este modo esperar a que terminen de realizarse las modificaciones antes de anunciar el cambio.

    Cómo usar correctamente aria-live, aria-atomic, aria-relevant y aria-busy

    aria-live

    Este atributo se añade a un elemento para indicar que es una live region, es decir, que su contenido se modifica y actualiza dinámicamente.

    Mediante el valor del atributo podemos indicar cuándo queremos que el lector de pantalla anuncie los cambios al usuario:

    • aria-live="off": los cambios NO se anunciarán al usuario a no ser que el foco esté en esa región. Será adecuado usarlo cuando la actualización no es relevante, por ejemplo una rotación de imágenes en la cabecera.
    • aria-live="polite": los cambios se anunciarán al usuario pero sin interrumpirle, anunciará el cambio cuando termine la tarea que está llevando a cabo, por ejemplo cuando termine de escribir en un campo o termine de leer un contenido.
    • aria-live="assertive": los cambios se anuncian de inmediato, independientemente de lo que el usuario esté haciendo. Teniendo en cuenta que el anuncio puede desorientar a los usuarios o que estos no terminen la tarea que están realizando, solo debe utilizarse para mensajes y advertencias importantes, por ejemplo los mensajes de error de validación en un formulario.

    aria-atomic

    Con aria-atomic especificamos si queremos que se anuncie toda la región o solo las partes de la misma que han cambiado.

    Si el valor del atributo es "true" el lector de pantalla anunciará la región como un todo, por el contrario, si es "false" (el valor por defecto) solo anunciará el nodo que ha cambiado.

    aria-relevant

    Con este atributo indicamos qué tipo de actualización de la live region deseamos que se anuncie al usuario:

    • aria-relevant="additions": anuncia los elementos que se añaden al DOM. Si el contenido que se añade es semánticamente relevante será importante anunciarlo, por el contrario, si es meramente decorativo no tiene sentido que se anuncie.
    • aria-relevant="removals": anuncia los elementos que se eliminan del DOM. Igual que en el caso anterior, es importante tener en cuenta si el elemento eliminado es relevante o solo decorativo. Por ejemplo, en un listado de amigos en línea, si un amigo se desconecta sería interesante anunciar que se ha eliminado de la lista.
    • aria-relevant="text": anuncia las modificaciones de texto.
    • aria-relevant="all": anunciará todo, es decir, los elementos añadidos, eliminados y las modificaciones de texto.

    Si no se incluye el atributo aria-relevant, por defecto se anunciarán los nodos añadidos y las modificaciones de texto.

    aria-busy

    Por defecto su valor es "false". Este atributo se utiliza cuando muchas partes de un mismo elemento van a ser modificadas, entonces puedes poner el valor a "true" para que temporalmente no anuncie las modificaciones y, una vez que se hayan llevado a cabo, volver a ponerlo a "false" para que las anuncie.

    Ejemplo ARIA: Live Region

    Nuestra live region es una zona de "Últimas noticias" que se actualiza de forma automática, sin intervención del usuario. Cada 10 segundo se elimina la última noticia de la lista y se incluye una nueva al comienzo de la misma.

    La página está en HTML5, pero no es obligatorio, puedes utilizar WAI-ARIA en (X)HTML también. El código HTML de la live region es:


    <div id="#contenedor" role="application">
    <div id="noticias">
    <h2 id="liveLabel">Últimas noticias</h2>
    <p class="peq">Se actualizan cada 10 segundos</p>
    <div id="liveDiv" role="log" aria-labelledby="liveLabel"
    aria-live="assertive"
    aria-atomic="true"
    aria-relevant="additions">

    [5 div con cada una de las noticias]
    </div>
    </div>
    [...]
    </div>

    Como se observa, al DIV que contiene las noticias se le han añadido los atributos:

    • aria-live="assertive", indica que es una live region y que queremos que anuncie sus modificaciones pero sin interrumpir al usuario en la tarea que esté realizando en el momento de la actualización.
    • aria-atomic="true", indica que queremos que nos anuncie toda la región. NVDA y JAWS nos leen la zona completa de noticias, es decir, las cinco noticias. Si lo hubiéramos puesto a "false" solo nos leería la nueva noticia (el nodo completo: título, fecha y descripción)
    • aria-relevant="additions", indica que queremos que nos lea solo los elementos que se insertan en el DOM, por ello nos lee solo la noticia que insertamos pero no la que eliminamos de la lista.

    Al no incluir aria-busy, su valor por defecto es "false".

    Comprobar las diferencias según los valores definidos en los atributos

    Para facilitar que podáis comprobar cómo cambia la forma de anunciarse la actualización de las noticias en función del valor de cada atributo, hay un formulario para que podáis modificar estos valores.

    Los nuevos valores de los atributos se aplican a la live regionsin necesidad de recargar la página.

    En el caso de aria-busy, podéis modificar el valor para comprobar cómo anuncia o no los cambios según esté a "true" o a "false", pero hay que tener en cuenta que esto habría que programarlo dinámicamente, para que, mientras se llevan a cabo múltiples actualizaciones de una región dejará de anunciar sus cambios hasta que se completaran todas.

    ¿Cómo puedo comprobar el resultado?

    Si tienes instalado un lector de pantalla solo tienes que abrir la página de ejemplo "Ejemplo ARIA: Live Región" y escuchar. Cada vez que se actualice una noticia te leerá la zona de noticias independientemente de dónde tengas el foco.

    Si eres un desarrollador y no tienes instalado un lector de pantalla, puedes instalarte uno gratuito como NVDA o con versión de prueba como JAWS. Pero también puedes instalarte la extensión de Chrome ChromeVox que es muy útil para probar desarrollos con WAI-ARIA.

    Una vez instalada la activas en "Herramientas > Extensiones" y abres la página del ejemplo: "Ejemplo ARIA: Live Región", podrás comprobar cómo te anuncia cada actualización de la zona de "Últimas noticias" según los valores definidos para los atributos de la región.

    También es muy útil la extensión Accessibility Developer Tools, te permitirá evaluar si tu código ARIA es correcto. Para ello, una vez instalada, accedes a "Herramientas > Herramientas para desarrolladores > Audits" y haces la auditoría con la opción de "Accessibility" seleccionada. Te indicará por ejemplo si falla alguna propiedad ARIA o su valor no es adecuado.

    Compatibilidad y diferencias entre diferentes lectores de pantalla

    Funciona bastante bien con JAW15 corriendo en Firefox 25 y Explorer 10, sin embargo no funciona con JAW15+Chrome.

    También funciona con VoiceOver en Chrome y Safari.

    Con NVDA 2013 solo va cuando corre bajo Firefox 25, y además solo con aria-atomic="false", si el valor es "true" no lee nada. No funciona corriendo en Chrome y Explorer.

    Hay una diferencia en cómo anuncia ChromeVox y JAWS los cambios de la región cuando aria-atomic="true". JAWS lee toda la región, es decir, todas las noticias. Sin embargo ChromeVox nos anuncia el título de la región, como está asociada al titulo "Últimas noticias" mediante el atributo aria-labelledby nos anuncia que se ha modificado "Últimas noticias".

    Por otra parte ChromeVox parace ser el único que anuncia correctamente los nodos eliminados cuando aria-relevant es "removals" o "all", el resto de lectores no anuncian los nodos eliminados.

    Si probáis con otros navegadores y/o lectores de pantalla os agradecería que pusierais vuestra experiencia en los comentarios.

    Enlaces de interés

    Documentos de la especificación WAI-ARIA

    Más ejemplos:

    Artículos anteriores

    Servicios de accesibilidad web que ofrezco como consultare freelance

    Reseña "No me hagas pensar" y "Haz fácil lo imposible" de Steve Krug

    $
    0
    0
    Portada del libro No me hagas pensarTítulo original:Don´t Make Me Think

    Autor: Steve Krug

    Nº páginas: 216

    Idioma: inglés. Está traducido al español.

    Formato:ebook y libro impreso

    Fecha de publicación:2005 (2nd Edición, inglés)

    Web del libro "Don´t Make Me Think"

    Portada del libro Haz fácil lo imposibleTítulo original:Rocket Surgery Made Easy

    Autor: Steve Krug

    Nº páginas: 224

    Idioma: inglés. Está traducido al español.

    Formato:ebook y libro impreso

    Fecha de publicación:2010

    Web del libro " Rocket Surgery Made Easy"

    Podéis consultar más reseñas en: "Libros y reseñas"

    Sobre los libros

    He decidido reseñar los dos libros de Steve Krug juntos porque en realidad "Haz fácil lo imposible" podría considerarse un apéndice de "No me Hagas Pensar", o más concretamente una ampliación del capítulo en el que explica cómo realizar una prueba de usabilidad.

    "No me Hagas Pensar. Una aproximación a la usabilidad en la Web" es otro de los libros clásicos de usabilidad, con miles de copias vendidas. La primera edición se publicó en el año 2000. La segunda edición, con varios capítulos más, se publicó en el año 2005 (en español en el 2006)

    Dado el gran éxito del libro, firmó un contrato para escribir un segundo libro "Haz fácil lo imposible. La guía para detectar y determinar los problemas de usabilidad" que publicó en 2010.

    Ambos están escritos con un estilo divertido, directo e informal.

    El público objetivo de los libros NO es en realidad los profesionales de la usabilidad, sino los responsables de sitios web que no se pueden permitir a un experto en experiencia de usuario.

    En "No me Hagas Pensar" repasa las claves básicas de la usabilidad web con bastantes ejemplos. En general todo lo que dice sigue estando vigente porque son conceptos básicos que es imprescindible conocer, aunque a veces se nota el paso del tiempo y cómo ha evolucionado la Web desde que publicó el libro. Si podéis, es preferible leerlo en inglés porque a veces la traducción chirría un poco.

    "Haz fácil lo imposible" no pretende convertir al lector en un experto en pruebas de usabilidad, para ello recomienda otros libros en el capítulo 15 "Lecturas recomendadas". Su objetivo es explicar cómo pueden llevar a cabo pruebas sencillas, informales y con muestras pequeñas (pruebas "hágalas usted mismo") aquellos que no pueden contratar a un profesional.

    Voy a dedicar un apartado a cada capítulo de "No me hagas pensar", y un último apartado para "Haz fácil lo imposible".

    Capítulo 1. ¡No me hagas pensar! Primera norma de la usabilidad de Krug

    Una página web ha de ser obvia, evidente, clara y fácil de entender.

    La primera clave de usabilidad es que la página no presente interrogantes al usuario como "¿por dónde empiezo?", "¿por qué lo llaman así?" o "¿puedo hacer clic en esto?".

    Los interrogantes aumentan el trabajo cognitivo y distraen nuestra atención de la tarea que estamos realizando. Las distracciones aunque leves se acumulan y pueden llevarnos a abandonar el sitio.

    Capítulo 2. ¿Cómo usamos realmente la web? Ojear, ser suficiente y arreglárselas

    Nota: he usado el término hojear/ojear tal y como aparece en cada título/subtítulo del libro traducido al español.

    Factor de vida 1: no leemos las páginas, las hojeamos.

    Tenemos prisa y queremos encontrar lo relevante. Centramos nuestro interés en las palabras y frases que encajan con la tarea que queremos realizar, que coinciden con nuestros intereses, o que nos causan una reacción repentina como "gratis", "oferta".

    Factor de vida 2: no tomamos decisiones óptimas, nos es suficiente.

    La mayor parte de las veces no seleccionamos la mejor opción sino la primera que nos parece más razonable (estrategia llamada satisficing)

    Y esto es así porque tenemos prisa y porque las consecuencias del error no son importantes: siempre puedes volver atrás. Además, sopesar distintas opciones tampoco garantiza a menudo mejorar nuestras oportunidades.

    Factor de la vida 3: no averiguamos el funcionamiento de las cosas, nos las arreglamos.

    A la mayoría le da igual entender el funcionamiento de las cosas en tanto pueda usarlas. Si nos funciona de una manera, sea acertada o no, dejamos de buscar una solución mejor.

    Ir arreglándonoslas funciona a veces, pero termina siendo ineficaz y proclive al error, por ello es importante que el usuario entienda el sitio.

    Capítulo 3. Diseño de rótulos 101. Diseño de páginas para hojear, no para leer

    Las claves para diseñar páginas fáciles de hojear son:

    Creación de una jerarquía visual clara en cada página

    Una buena jerarquía visual nos ahorra tales esfuerzos a la hora de preprocesar la página, organizar y establecer prioridades en los contenidos, lo que nos permite captar todo de forma casi instantánea.

    Tres características de una jerarquía visual clara son:

    • lo más importante es lo más prominente,
    • lo que está relacionado lógicamente también lo está visualmente,
    • todo se engloba visualmente bien para que queden delimitadas las partes que pertenecen a cada bloque.

    Aprovechamiento y uso de las convenciones

    Todas las convenciones nacen de la idea brillante de alguien. Si funcionan lo suficientemente bien, otros sitios la imitan y termina viéndose en tantas partes que no necesita ningún tipo de explicación.

    Las convenciones son útiles. No hay que intentar reinventar la rueda: innova solo cuando sepas que la idea es mejor pero aprovecha las convenciones cuando no haya ideas mejores.

    División de las páginas en zonas claramente definidas

    Esto ayuda al usuario a decidir rápidamente en qué partes quiere centrarse y cuáles puede con tranquilidad ignorar.

    Dejar claro sobre lo que se puede hacer clic

    Los enlaces y botones tienen que distinguirse con claridad.

    Minimizar el ruido visual

    El ruido puede ser resultado de que todo esté abigarrado y/o reclamando tu atención. Pero también puede ser un ruido de fondo donde infinidad de diminutos fragmentos de ruido visual nos terminan agotando.

    Capítulo 4. ¿Animal, vegetal o mineral? ¿Por qué le gustan al usuario las opciones mecánicas?

    El número de clics para acceder a cualquier página del sitio no es tan importante como la dificultad en la elección de ese clic, esto es, el esfuerzo de pensamiento y la incertidumbre sobre si la elección tomada es correcta.

    No importa el número de clics mientras la elección sea sencilla y obedezca a una confianza continuada de que se sigue la pista correcta.

    Tres clics mecánicos e inequívocos equivalen a un clic que requiere cierto grado de reflexión.

    Las opciones de navegación tienen que resultar tan excluyentes como la elección entre "animal", "vegetal" y "mineral", de ahí el título del capítulo.

    Capítulo 5. Omisión de palabras innecesarias. El arte de no escribir en la web

    Su premisa es:

    Elimina la mitad de las palabras en todas las páginas y luego deshágase de la mitad de lo que quede.

    Hay que eliminar el discurso innecesario. Por ejemplo aquel que carece de información práctica o aquel que está enfocado a elogiar lo buenos que somos en vez de definir qué nos hace tan buenos.

    También hay que eliminar las instrucciones. El sitio debe ser autoexplicativo, pero si las instrucciones son absolutamente necesarias hay que reducirlas a lo esencial.

    Eliminando lo innecesario se reduce el ruido de la página, se realza el contenido verdaderamente práctico y se acortan las páginas, permitiendo al usuario ver más de un solo vistazo.

    Capítulo 6: Señales en la calle y migas. Diseño de la navegación

    Comienza con un hombre intentando comprar una motosierra, para pasar a explicar las semejanzas y diferencias entre comprar en una tienda física y en la web.

    La navegación web nos ayudará a encontrar lo que buscamos pero también nos indicará dónde nos hallamos. Evita que nos perdamos, nos dice lo que hay en cada lugar, nos enseña a usar el sitio (porque implícitamente nos muestra por dónde empezar y las opciones que hay) y nos permite confiar en las personas que la han creado.

    Una navegación clara y bien desarrollada es una de las mejores oportunidades con las que cuenta un sitio para dar una buena impresión.

    La navegación debe seguir las convenciones para localizarla con facilidad y distinguirla del resto del contenido. También ha de ser coherente y consistente a lo largo de las páginas, esto nos permite tenerla siempre a mano y aprenderla una única vez. Como excepción, en la home y en ciertos formularios (por ejemplo en la formalización de tu pedido) podemos tener una versión mínima de esta navegación coherente, pues en este caso la navegación puede ser una distracción innecesaria.

    Otras claves que explica en este capítulo son:

    • Se debe identificar en todo momento en qué sitio nos encontramos, para ello debemos utilizar también la convención de incluir el logotipo en la esquina superior izquierda.
    • Las utilidades deben estar diferenciadas de las opciones principales de navegación y ser menos prominentes.
    • Se tiene que volver con facilidad a la página de inicio, tanto desde el logotipo como incluyendo la opción en las utilidades.
    • Se debe incluir una opción de búsqueda a no ser que el sitio sea muy pequeño. Repasa las buenas prácticas y las convenciones a seguir en el buscador, como por ejemplo no limitar el ámbito de la búsqueda.
    • Se debe resaltar la opción de menú en la que te encuentras.
    • Es importante incluir migas de pan y seguir unas buenas prácticas, como poner en negrita el último elemento o que este no sustituya al título de la página.
    • Los enlaces visitados deben cambiar de color.
    • Recalca la importancia del título de las páginas: su ubicación, su estilo o su texto.
    • El nombre de los enlaces, menús y títulos de las páginas han de ser coherente entre si.

      Si hay una mayor gran diferencia entre el nombre del vínculo y el nombre de la página o muchas discrepancias menores, mi confianza en el sitio (y en la competencia de las personas que lo han publicado) se verá disminuida.

    Por último defiende su predilección por las pestañas de navegación. Indica que son claras y fáciles de entender, que es difícil perderlas de vista o confundirlas con algo que no sea la navegación, y que refuerzan que el contenido está dividido en secciones y que nos encontramos en una de ellas.

    Las claves de las pestañas es que haya una seleccionada por defecto y que estén perfectamente dibujadas para que parezcan solapas de verdad: la pestaña activa debe pasar al frente.

    Indica que es mejor que estén codificadas por color (un color diferente para cada sección) siempre y cuando no se confíe en que todos los usuarios perciban esta distinción, el color es genial como clave adicional, pero nunca debería basarse en él como clave única.

    En resumen, en cualquier página debes ser capaz de contestar a las siguientes preguntas:

    • ¿Qué sitio es este? (Identificador del sitio)
    • ¿En qué página estoy? (Título de la página)
    • ¿Cuáles son las principales secciones del sitio? (Secciones)
    • ¿Qué opciones tengo en este nivel? (Navegación local)
    • ¿Dónde estoy en el esquema de las cosas? (Indicadores del tipo "usted está aquí")
    • ¿Cómo busco algo? (Buscador)

    Intenta rodear estos elementos en una página, y si tienes dudas, profundiza en el motivo de tus dudas.

    Capítulo 7. El primer paso para la recuperación es admitir que ha perdido el control de la página principal. Diseño de la página principal.

    Comienza enumerando todo lo que debería contener una página de inicio. Después habla de cómo la home va degenerando porque todos desean estar ella, todos tienen una opinión sobre ella y, además, se espera que atraiga a cualquier de sus visitantes independientemente de sus intereses.

    Lo único que no puede perderse en la home es el objetivo del sitio.

    Tiene que responder rápida, correcta y sin ambigüedad a las siguientes cuestiones:

    • qué es esto
    • qué tienen aquí
    • qué puedo hacer aquí
    • por qué debería estar yo aquí y no en otro lugar
    • por dónde empiezo (si quiero buscar, si quiero navegar…)

    Hace una defensa tajante de incluir un tagline en la página como forma eficaz de dar una descripción concisa del objetivo del sitio y de comunicar una proposición de valor. La mayoría de los usuarios esperarán encontrarlo junto al logotipo.

    Deberá ser conciso, claro, informativo y expresar la diferenciación y el beneficio del sitio. Aunque no es tan importante en los sitios por todos conocidos o los que son bien conocidos por su origen offline, les beneficia de todas maneras, puesto que la misión online nunca es exactamente la misma y es importante explicar la diferencia.

    Admite que la navegación en la home puede ser algo diferente, pero con lo suficiente en común para reconocer que son dos versiones de lo mismo. Para ello es importante que el nombre de las secciones y las claves visuales sean las mismas.

    Repasa las ventajas y desventajas de los menús desplegables, que si bien ahorran espacio, hay que desplegarlos para ver su contenido y pueden ser incómodos de consultar.

    Recalca que es importante comprender que no se puede promocionar todo en la home, que habrá que recurrir a usar promociones cruzadas o usar el mismo espacio en la home por turnos.

    Capítulo 8: El granjero y el ganadero deben ser amigos. Por qué la mayoría de los argumentos de diseño web acerca de la usabilidad son una pérdida de tiempo y cómo evitarlos

    La tendencia natural es a proyectar nuestros gustos o disgustos en los usuarios de la Web: creemos que a la mayoría de los usuarios les gustan las mismas cosas que a nosotros.

    Para resolver el conflicto a menudo se intenta encontrar qué le gusta a la mayoría de los usuarios. El problema es que no hay un Usuario Medio. Sería estupendo saber si los desplegables son buenos o malos en función de si gustan o no a la mayoría, pero no hay una respuesta simple o correcta a esta pregunta.

    La cuestión es que no es nada productivo preguntar cosas como "¿Gustan a la mayoría los menús desplegables?". Lo más acertado es preguntar “¿Supone este desplegable con estos elementos y estos términos dentro de este contexto particular una buena experiencia para la mayoría de las personas que probablemente utilicen este sitio?"

    Y solo hay una forma de contestar a este tipo de pregunta: probando.

    Capítulo 9: Prueba de usabilidad por 10 centavos al día. Sencillez de las pruebas

    Las personas con frecuencia prueban para decidir qué color de cortinas es mejor, sólo para darse cuenta de que olvidaron poner ventanas en la habitación. Por ejemplo, podemos descubrir que no hay mucha diferencia si la barra de navegación es horizontal o existen menús verticales, si nadie entiende el valor del sitio.

    Tristemente, así es como se hacen la mayoría de las pruebas de usabilidad: demasiado pequeñas, demasiado tarde y por razones equivocadas.

    Dedica bastante tiempo a explicar la diferencia entre un focus group y un test con usuarios. No son lo mismo ni tienen el mismo objetivo.

    Defiende la necesidad de realizar test con usuarios: es mejor probar con un usuario que con ninguno; y es mejor probar con un usuario al principio que con 50 al final.

    Es bueno probar con personas que vayan a utilizar el sitio, pero más importante es probarlo pronto y con frecuencia. Si reclutar a los usuarios ideales para la prueba va a significar hacer menos pruebas, hazlas con cualquiera (a no ser que necesites un perfil muy concreto o la web sea de un campo muy específico)

    Se pueden realizar las pruebas sin invertir mucho tiempo o dinero, y sin necesidad de muchos usuarios o de un laboratorio. Probar puede ser rápido, sencillo y barato.

    A veces basta con pruebas tan sencillas como imprimir el formulario que has prototipado, enseñárselo a alguien y ver si tiene sentido para él.

    Por ejemplo, realizar un test con solo tres usuarios te permite generar conclusiones más rápidas, agilizar las modificaciones y hacer otra ronda de testing. De esta manera, al final, más pruebas con menos usuarios detectan más problemas.

    También es mejor exponer directamente en una reunión las conclusiones al equipo que redactar un extenso informe que al final nadie lee.

    A continuación nos da consejos y pone ejemplos concretos basados en su experiencia. Por ejemplo recomienda proponer siempre tareas personalizadas. Es mejor "encuentra un libro que quieras comprar” que "encuentra tal libro"; o "inserta un anuncio de algo que quieras vender" que "insertar tal anuncio". Cuando la gente realiza tareas ficticias no se implica emocionalmente y no puede usar todo su conocimiento personal.

    Los problemas habituales que suelen encontrarse en los test con usuarios con:

    • no tienen claro el concepto
    • las palabras que buscan no están
    • lo que buscan está en la página pero no lo ven por el ruido o porque no destaca.

    Tras las pruebas hay que resistir el impulso de añadir explicaciones a las páginas o añadir características que han propuesto los usuarios. Pero el mayor desafío suele ser reparar los problemas SIN estropear las partes que funcionan, pues todo cambio tiene consecuencias.

    Capítulo 10. La usabilidad como cortesía común. Por qué su sitio web debe ser mensch

    ¿Qué va minando la buena voluntad del usuario hasta llevarlo a abandonar?:

    • ocultar la información que quiere: el teléfono de soporte, los costes de envío, los precios, etc.
    • castigarle por no hacer las cosas a tu manera: obligarle a incluir los datos con un determinado patrón, como espacios en el número de la tarjeta
    • pedirle información que no necesitas
    • la falta de sinceridad, con mensajes como “su llamada es importante para nosotros” pero te tienen 20 minutos a la espera
    • los obstáculos en su camino, como tener que verse una introducción Flash a la fuerza
    • que el sitio parezca de aficionados: desorganizado, descuidado y poco profesional

    Por el contrario, la buena voluntad del usuario aumenta cuando:

    • conoces las principales cosas que las personas quieren hacer en tu sitio y estas son obvias y sencillas
    • les dices lo que quieren saber
    • les ahorras pasos siempre que puedes
    • te esfuerzas en dar la información que necesitan, precisa y de utilidad, organizada de forma que puedan encontrarla
    • te anticipas a las preguntas probables y las respondes con franqueza
    • les proporcionas comodidades como una impresión correcta de las páginas
    • les facilitas la recuperación ante los errores
    • te disculpas cuando es necesario si algo está causando un problema

    Seguramente si hubiera escrito el libro hoy, hablaría menos de introducciones en Flash y trataría otros temas como los dispositivos móviles.

    Capítulo 11. Accesibilidad, hojas de estilo en cascada y usted. Simplemente cuando piensa que ya lo ha hecho, aparece un gato con una tostada untada con mantequilla atada a la espalda.

    A los vigorosos desarrolladores de 26 años (son palabras del autor, no mías) les es difícil creer que un gran porcentaje de la población necesita ayuda para acceder a la web. Les parece exagerado. También les cuenta creer que hacer las cosas más accesibles nos beneficia a todos.

    Temen además que supondrá más trabajo y que el resultado será menos atractivo.

    El autor también habla de la tendencia a pensar que el validador de accesibilidad es como un corrector ortográfico. Además la mayoría descuida las advertencias pues no les parecen problemas reales. Sin embargo, las advertencias pueden hacer referencia a requisitos determinantes pero que simplemente no son evaluables automáticamente.

    Da cinco consejos:

    • Soluciona los problemas de usabilidad que nos confunden a todos... seguro que también estarán confundiendo a los usuarios con alguna discapacidad.
    • Lee una página con un lector de pantalla.
    • Lee un libro sobre accesibilidad web.
    • Usa CSS.
    • Revisa tu código HTML para asegurar que:
      • incluyes texto alternativo a las imágenes
      • usas label en los formularios
      • es accesible por teclado
      • no usas javascript sin una buena razón
      • no usas mapas de imagen del lado del servidor

    Capítulo 12. Ayuda! Mi jefe quiere que... Cuando los mejores toman malas decisiones de diseño

    Pone ejemplos de cómo explicar las razones por las cuales no debería hacerse algo. Normalmente hay una buena intención en la idea que proponen, entender esa buena intención es el mejor modo de descubrir la manera de argumentar a favor de una solución diferente a la propuesta.

    "Haz fácil lo imposible"

    Comienza explicando la diferencia entre:

    • pruebas cuantitativas: su objetivo es demostrar algo ("esta versión de la web es mejor que la anterior", "mi web es mejor que la de mis competidores") y lo hace midiendo algo ("cuántas personas terminan las tareas", "cuánto tiempo les lleva"). Tienen que ser rigurosas o los resultados no serán fiables.
    • pruebas cualitativas, donde se enmarcan las pruebas "hágalo usted mismo" de las que trata el libro, pruebas informales y con menos usuarios. Sencillas y eficaces.

      Básicamente se trata de proponer unas tareas al usuario y pedirle que piense en voz alta mientras las realiza. No se recogen datos, simplemente el equipo que observa la sesión comenta sus notas al término de la misma para decidir qué problemas hay y cómo solucionarlos.

      Hay un vídeo de ejemplo de una de estas pruebas en la web del libro.

    Krug resume sus recomendaciones en una serie de máximas o factores críticos de éxito, lo único que espera que el lector no olvide de su libro:

    • Una mañana al mes, esto es todo lo que pedimos. No se necesita invertir más tiempo, salvo el necesario para preparar la prueba. Durará una mañana y se debatirá lo ocurrido a la hora de comer. Sin informes, basta un email con el resumen.
    • Empiece más pronto de lo que crea que tiene sentido. Puedes probar tu sitio, aunque lo vayas a rediseñar, para saber qué evitar; puedes probar los de la competencia para ver qué funciona mejor; y puedes probar no solo el prototipo, también el boceto de la página en una servilleta, un wireframe o el diseño gráfico. Lo importante es no esperar hasta el final para comenzar a probar.
    • No sea exigente en la selección, y valore basándose en promedios. No te obsesiones por encontrar usuarios reales o representativos de la audiencia objetivo, especialmente al principio, porque los errores serios los va a encontrar "casi cualquiera". A veces también es interesante conocer la perspectiva de personas ajenas al negocio. Los usuarios pueden ser incluso de tu empresa, siempre y cuando sean de otros departamentos (administración, finanzas, etc.) También enumera las razones por las cuales tres usuarios son suficientes y por qué estos no deberían participar en las siguientes rondas.
    • Conviértalo en un deporte de masas: intenta que el mayor número de personas en tu empresa asistan a las pruebas, especialmente consigue que vengan directivos, porque "ver es creer". Observan, aprenden, toman notas y asisten al debate. Deberían sintetizar los tres problemas de usabilidad más graves que han visto en cada usuario de la sesión. Es importante que la sala de observación y la sala de pruebas estén lejos, así que necesitas un cómplice en la sala de observación para que las cosas funcionen y la gente esté concentrada. También habrá que saber lidiar con los egos heridos. Solo deberían asistir al debate posterior los que han asistido a la sesión de prueba.
    • Céntrese implacablemente en los problemas más serios. Hay que salir del debate posterior a la sesión con una lista de los problemas de usabilidad más importantes y con una lista de los que se van a solucionar antes de la siguiente ronda. Siempre hay más problemas que recursos, por tanto es muy importante centrarse primero en lo más grave.
    • Cuando solucione problemas, intente hacer lo menos posible. Ya tienes la lista de problemas a solucionar, ahora pregúntate, "¿cuál es el cambio más pequeño y sencillo que podemos hacer para impedir que la gente tenga este problema que hemos observado?" Esto nos asegura que el cambio será sencillo de implementar y que se hará en unos días. Un problema serio puede tener una solución sencilla, que suele ser modificar algo (no rediseñarlo, y da 10 razones por las cuales modificar es mejor que rediseñar) o eliminar algo (no añadas, normalmente hay demasiadas cosas y lo que necesitas es quitar)

    Una de las cosas que la gente tiene la tentación de hacer cuando hay un problema de usabilidad es añadir algo. Si alguien no ha entendido las instrucciones, añada más instrucciones. Si alguien no ha podido encontrar lo que estaba buscando en el texto, añada más texto. Si alguien no se ha dado cuenta de algo que necesitaba, añádale más color, póngalo en negrita, o más grande.

    Pero muy a menudo la mejor forma de solucionar un problema de usabilidad es hacer justo lo contrario: quitar algo. Elimine algo de la página.

    [...] La mayoría de las páginas tienen todo tipo de cosas que el usuario no necesita: demasiadas palabras, demasiadas imágenes irrelevantes, demasiada decoración, demasiado "ruido", y ésa es la razón por la que los usuarios no encuentran lo que necesitan.

    Un diseñador sabe que ha alcanzado la perfección no cuando ya no que queda nada que añadir, sino cuando no haya nada que quitar", Antoine de Saint-Exupèry.

    Los problemas recurrentes que suele encontrar en muchas webs son:

    • Los usuarios no entienden el sitio. Si en los primeros segundos no saben de qué va el sitio, quién lo publica, qué tipo de cosas tiene, cómo está organizado, qué puedo encontrar aquí y qué puedo hacer aquí... todo está perdido. Empezarán con mal pie y cada vez estarán más perdidos. En este sentido, las homes suelen tener demasiadas cosas. La home sigue siendo importante porque, si aterrizas en una página interior, a menudo irás a la página de inicio para salir a la superficie y orientarte, para saber de qué va este sitio, qué más ofrece o si es creíble.
    • No se ofrecen pistas visuales. Es posible mantener el atractivo visual y no caer en sutilezas a la hora de dirigir la atención de la gente: ese es el botón de pagar, eso es el título, ese es el menú en el que estás, etc.

    Los capítulos 6, 7 y 8 los dedica a dar recomendaciones sobre cómo preparar y llevar a cabo las pruebas: la selección de las tareas, la correcta elaboración y presentación de los escenarios (las tareas tal y como se van a proponer a los usuarios: no utilizar palabras que aparezcan en la web, permitir o no el uso del buscador, etc.), un listado de todo lo que tienes que tener en cuenta para que no se te olvide nada, o como realizar correctamente el trabajo de "facilitador" durante la prueba.

    Se pueden descargar diferentes plantillas desde su web.

    Al final dedica un capítulo a los test en remoto, moderados o no, sus ventajas e inconvenientes.

    Sus herramientas preferidas son Camtasia para grabar sesiones (considera que Morae puede ser excesiva para la mayoría de la gente); GoToMeeting para compartición de pantallas; y Usertesting.com para test en remoto no moderados.

    Lecturas que recomienda

    Al final del libro "No me hagas pensar" recomienda varios libros, todos ellos anteriores a 2004

    En "Haz fácil lo imposible" recomienda los siguientes libros:

    Podéis consultar todas mis reseñas en: "Libros y reseñas"

    Ayuda contextual de los formularios más accesible con "aria-describedby" (WAI-ARIA)

    $
    0
    0

    Hace una semanas os explicaba lo sencillo que es usar del atributo aria-live para mejorar la accesibilidad de los contenidos que se actualizan automáticamente (ver Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente)

    Hoy os voy a poner otro sencillo ejemplo de aplicación de WAI-ARIA, en este caso para mejorar la accesibilidad de las ayudas contextuales en los campos de formulario.

    Podéis acceder directamente al ejemplo que os voy a explicar a continuación en: Ejemplo de aria-describedby para ayuda contextual en un campo de formulario

    Descripción del problema: formulario con ayuda contextual

    Imaginemos que tenemos un sencillo formulario de registro como el siguiente:

    Formulario con dos campos de texto: Usuario obligatorio y Contraseña obligatorio, y un botón Registrarme. Bajo el campo contraseña hay un texto de ayuda La contraseña debe tener mínimo 6 caracteres

    Tenemos dos campos de formulario obligatorios. Uno de ellos, "Contraseña", tiene una ayuda contextual que nos indica que la contraseña debe tener como mínimo 6 caracteres.

    Este requisito del campo "Contraseña" puede pasar inadvertido al usuario que accede con un lector de pantalla. Nuestro objetivo es asociar semánticamente el campo "Contraseña" con el texto informativo sobre sus requisitos, y asegurarnos de que le será leído al usuario cuando el campo coja el foco, evitando de esta manera que cometa un error al rellenar el campo.

    Descripción de la solución: uso de la propiedad aria-describedby

    La propiedad aria-describedby de la especificación WAI-ARIA identifica el elemento o los elementos que le proporcionan una descripción al objeto que contiene esta propiedad, es decir, que le proporcionan una información adicional.

    En nuestro caso vamos a incluir la propiedad al campo contraseña, indicándole que la información adicional nos la proporciona la ayuda contextual bajo el campo:

    <label for="contra">Contraseña (obligatorio):</label>
    <input name="contra" id="contra" type="password"aria-describedby="descripcionContra" aria-required="true" />
    <p id="descripcionContra" class="ayuda">La contraseña debe tener mínimo 6 caracteres</p>

    ¿Cómo leerá ahora el lector de pantalla el campo contraseña?

    Puedes comprobarlo abriendo el ejemplo Ejemplo de aria-describedby para ayuda contextual en un campo de formulario y un lector de pantalla. Accede con el tabulador al campo de formulario "Contraseña". Como observarás, cuando el campo "Contraseña" coge el foco (accediendo al mismo con el tabulador) el lector de pantalla lee:

    • NVDA 2013 (con IE11, FF25 y Chrome31) lee el campo de la siguiente manera: "Contraseña obligatorio. Edición contraseña. Requerido. La contraseña debe tener mínimo 6 caracteres. En blanco"
    • JAWS 15 (con IE11, FF25 y Chrome31) lee el campo de la siguiente manera: "Contraseña abre paréntesis obligatorio cierra paréntesis. Password edit required. La contraseña debe tener mínimo 6 caracteres"
    • VoiceOver (iPad) lee el campo de la siguiente manera: "Contraseña obligatorio. Seguro. Campo de texto para varias líneas. Obligatorio. La contraseña debe tener mínimo 6 caracteres. Pulse dos veces para editar"

    Es decir, nos lee la descripción que hemos indicado, de esta manera al usuario no le pasará inadvertido el requisito para rellenar el campo.

    Por tanto, aunque versiones antiguas de navegadores o productos de apoyo no interpreten este atributo, esto no interfiere en el funcionamiento ni la accesibilidad del formulario, por el contrario, añadiendo algo tan simple con una propiedad podemos mejorar la accesibilidad del formulario para muchos usuarios.

    Otro detalle es que, gracias a la inclusión de la propiedad aria-required="true", nos anuncia que el campo es obligatorio.

    Puedes usar la propiedad aria-describedby tanto con HTML 5 como con HTML 4 o XHTML (en el caso de aria-required en HTML5 es solo required)

    Solo es importante recordar que si usas (X)HTML, como en mi ejemplo, debes incluir un DOCTYPE específico para que el validador de sintaxis del W3C no te dé errores:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN""http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

    Otros usos de aria-describedby

    Esta propiedad también se puede utilizar para clarificar enlaces, botones, abreviaturas, widgets o descripciones de imágenes. Pero es importante advertir que antes de aplicarlo cómo única técnica valores si existe una alternativa accesible con mayor soporte.

    Por último, me gustaría recalcar que no hay que confundir aria-describedby con aria-labelledby.

    aria-labelledby hace referencia al ID del elemento que lo etiqueta, mientras que aria-describedby hace referencia al ID del elemento que lo describe, que le proporciona más información. Podéis ver usos de aria-labelledby en Using the aria-labelledby attribute

    Artículos relacionados:

    Servicios de accesibilidad web que ofrezco como consultare freelance

    Prototyper, herramienta de prototipado: web, móvil, responsive design

    $
    0
    0

    Prototyper es una gran herramienta de prototipado, muy parecida a Axure y superior a esta en varios aspectos. Permite prototipar portales y aplicaciones web, incluso aquellas que requieren una gran complejidad de simulación de interacción, o simular con facilidad responsive design. También ofrece mucha potencia de prototipado para dispositivos móviles concretos.

    Prototyper Pro Edition 5.6

    La versión profesional, que es la que voy a evaluar en este artículo, es de pago, con un precio entre los 19-29$ al mes. Tiene una versión de prueba completa de 30 días. También tiene una versión gratis pero con muchas menos funcionalidades.

    Es una aplicación local disponible para Windows XP, 7 y 8, y para Mac OSX 10.6+

    Comparándola con Axure, Axure 7 también está disponible para Windows y Mac, también tiene una versión de prueba de 30 días y su precio es de 289$ para la versión estándar y 589$ para la versión Pro. Si ya tenías la licencia de una versión anterior, la actualización a la nueva versión es gratis.

    Ver reseña de las Novedades de Axure 7

    Tipo de prototipo

    En primer lugar podrás elegir la resolución para comenzar a trabajar, o bien seleccionar un dispositivo concreto.

    Selección de dispositivo y resolucción (mediante un desplegable). Está seleccionada Web app or web site, y resolución 1024x768

    Selección de dispositivo. Está seleccionado Ipad. Selección de Orientación (Portrait) y version (iOS7)

    Tipos de widget

    Tienes disponibles muchos elementos para incluir en el prototipo (y se pueden importar más librerías) Todos los elementos se pueden copiar, pegar, eliminar, bloquear, duplicar, añadirles comentarios, ordenar, grabar como imágenes o añadirles un evento (como veremos más adelante)

    En el apartado de propiedades de cada elemento se pueden personalizar con bastante detalle: su posición y tamaño (admite posición absoluta, posición siempre en el top, rotación), background (tanto color como imagen), edición de texto (admite edición parcial de una parte del texto), padding, border, alineamiento, sombra o aspectos generales (id, valor, tooltip, oculto)

    Static: etiquetas, imágenes, texto y tablas de texto

    Prototipo en el que se ha incluido una etiqueta, una imagen, un texto y una tabla

    De estos cuatro elementos el más destacable son las tablas, que admiten más posibilidades de edición que Axure, como por ejemplo la opción de unir celdas.

    Sin embargo no se puede incluir un enlace o evento solo a una parte de un contenido (debes simularlo con un ImageMap) algo que Axure ya ha corregido.

    Al incluir una imagen permite voltearla y recortarla.

    Shapes: rectángulo, elipse, triángulo, bocadillo, líneas y flechas

    Estos elementos se pueden rotar, y al igual que el resto, al redimensionarlos nos va indicando su tamaño.

    Containers: paneles dinámicos y tablas dinámicas

    Prototipo en el que se ha incluido una panel dinámico que incluye una etiqueta y una imagen, y una tabla dinámica

    Puedes seleccionar cualquier conjunto de elementos y convertirlos en un panel dinámico, o crear directamente el panel e incluir dentro los elementos. Los paneles dinámicos son similares a los de Axure y tienen el mismo propósito, que después podamos modificarlos dinámicamente.

    Es muy destacable que permite crear tablas dinámicas, en las que cada celda tiene un ID diferente y que nos permitirá modificarlas dinámicamente con mucha más facilidad que Axure.

    Inputs: campos de formulario

    Permite incluir campos de texto (normal, password y textarea), radiobutton, checkbox, select, selección de fichero o selección de fecha mediante calendario.

    Axure 7 incluye como novedad muchos más tipos de campos de textos, propios de HTML5: email, search, phone, etc.

    Navigation: botón, mapa de imagen, árbol y menú

    Nos permite crear árboles y menús desplegables.

    Data Grids

    Uno de los aspectos que más me gusta de la herramienta es que permite simularte una BD (Data Master). Defines los campos y los valores (que pueden importarse y exportarse desde una excel) A partir de ese momento puedes indicar que los elementos que aparezcan en un desplegable o en una tabla (Data Grid) estén tomados del Data Master.

    Definición de campos de un Data Master:

    Pantalla de definición de campos de un Data Master. Cada campo tiene nombre y tipo.

    Además, si así lo indicas, te creará automáticamente pantallas muy útiles para buscar, añadir, modificar, borrar o ver el detalle de un registro.

    Visualización de una página del prototipo con un listado paginado. Cada fila tiene opción de detalle, modificar y eliminar. La tabla tienen búsqueda y botón de nuevo registro.

    Ejemplo de pantalla creada automáticamente a partir de un Data Master. Tiene búsqueda, nuevo, edición, eliminar y detalle. Pop-up con pantalla de añadir nuevo registro.

    Definición de valores de un Data Master:

    Pantalla de la aplicación para añadir o eliminar datos. Tiene botón de export e importar.

    Una vez definido el Data Master puedes incluir en la página un Data Grid con los campos del Data Master que te interese y tantas líneas visibles como indiques. Puedes incluir un "Summary", es decir el número de elementos mostrados del total, y un "Index", es decir la paginación. También puedes indicar que otro elemento, como un desplegable, tome los datos del Data Master:

    Visualización de una página del prototipo. Listado páginado con información sobre los elementos mostrados el total. Sobre la tabla un desplegable con los mismos datos que la tabla.

    Axure 7 ha incluido un nuevo elemento "Repeater" con un objetivo similar, pero mi opinión es que el de Axure es menos potente y más difícil de usar (Ver reseña de las Novedades de Axure 7)

    Web: PDF, Flash, HTML

    Permite embeber un PDF, un Flash o una página web (local, por URL o por inclusión directa de código)

    Widget específicos de dispositivos concretos: iPad, iPhone, Android (y Twitter Bootstrap)

    Por ejemplo, widget de teclado de iPhone:

    Pantalla del prototipo con un teclado de iPhone

    Masters

    Una característica fundamental que debe tener una herramienta de prototipado es la opción de Masters, es decir, de elementos que puedas reaprovechar en diferentes páginas del prototipo. Prototyper la tiene y es bastante similar a la de Axure.

    Listado de Masters dentro de la aplicación.

    Eventos e interacción

    La herramienta permite crear variables globales (igual que Axure), lo cual puede ser muy útil a la hora de definir la interacción en prototipos complejos.

    Otros de los puntos fuertes de la aplicación es la potencia para crear interacciones, con una interfaz que a mí me parece más intuitiva y cómoda de manejar que la de Axure.

    Ofrece gran cantidad de eventos:

    • De ratón: onClick, onMouseDown, onMouseUp, onDoubleClick, onRightClick, onToggle, onMouseEver, onMouseEnter, onMouseLive, onDrag, onDragEnter, onDrag, onDragStop
    • De teclado: onKeyDown, onKeyUp
    • Gesture (incluye el giro del dispositivo): Eventos Gesture: onTapHold, onSwipe (varias opciones), onPinch (varias opciones), onRotate (varias opciones), onOrientationPortrait, onOrientationLandscape
    • De página: onPageLoad, onPageUnload, onWindowResize

    Permite incluir condiciones:

    Las acciones que puedes definir son:

    • Enlazar con una página del prototipo, con la página anterior o con una página externa. Puedes establecer efectos de transición o abrirla en un pop-up.
    • Cambiar el estilo de un elemento.
    • Enseñar u ocultar elementos aplicando o no un efecto.
    • Activar un panel aplicando o no un efecto.
    • Modificar o seleccionar un valor de un elemento o una variable.
    • Pausar, mover o redimensionar un elemento.
    • Insertar un elemento en otro.
    • Añadir, modificar o eliminar campos de un Data Master
    • Mover el foco a un elemento.
    • Escrolar.
    • Habilitar o deshabilitar un campo.
    • Paginar (primera página, página anterior, siguiente página o última página)

    Axure 7 incluye como novedad el evento de página OnWindowScroll, que no tiene Prototyper, y que nos permite en Axure simular un Parallax Scrolling (Ver reseña Novedades de Axure 7)

    Simulación

    En la simulación tienes una columna izquierda, que se puede ocultar, con el árbol de las páginas del prototipo para navegar cómodamente por las mismas. Además puedes indicar que resalte las zonas que tienen asociados determinados eventos, para identificar rápidamente las zonas dinámicas.

    Prototipos para dispositivos móviles

    Como hemos visto anteriormente, al crear un prototipo puedes seleccionar un dispositivo móvil concreto para el cual creas el prototipo. También hemos visto que tendrás widgets específicos para cada dispositivo móvil y que podrás seleccionar eventos gestuales o de rotación de pantalla.

    En el caso de prototipos para dispositivos móviles los puedes simular en el navegador. La simulación incluye el prototipo dentro de una imagen del dispositivo y mediante desplegables puedes seleccionar la rotación y emular con el ratón gestos como pinch o rotate:

    Visualización de un prototipo simulado en iPad. Incluye desplegables para girarlo y para seleccionar eventos gestuales. También permite modificar el zoom.

    Prototipos Responsive Design

    Aquí tenéis un ejemplo de prototipo creado con Prototyper que simula un diseño responsive, que se adapta a todas las resoluciones.

    La creación de este tipo de prototipos no es automática, hay que trabajársela un poco. Por ejemplo, partiendo de una resolución de 1024, puedes tener una zona de cabecera de 1024 inicial. Después debes crearte un evento onWindowResize cuya acción sea "Resize". En ella indicarás que el ancho de esa zona de cabecera sea "Relative to parent: 100% of parent container width". De esta manera, cuando se redimensiona la página la cabecera también se redimensiona al 100%.

    Si quieres que, como en el ejemplo, al reducir el tamaño de pantalla los elementos de la cabecera se simplifiquen, tendrás que jugar también con el evento onWindowResize y con paneles dinámicos con diferente contenido.

    Axure 7 trae muchas novedades para simular Responsive Design, con la nueva versión es mucho más sencillo y automático que con las versiones anteriores de Axure o con Prototyper (Ver reseña de las Novedades de Axure 7)

    Otras opciones de la herramienta

    • Árbol de páginas con ordenación y jerarquía.
    • Plantillas de páginas.
    • Comentarios y anotaciones.
    • Diferentes tipos de vistas de la página (ocultar o no comentarios, marcas de acción, etc.)y zoom.
    • Visualización del prototipo en mapa web y creación de escenarios.
    • Visualización de las páginas y masters en pestañas como en Axure.
    • Exportación como .doc (para mí mejor que la de Axure), .pdf, .html o imágenes.
    • Centrar página. Alinear, ordenar y agrupar contenido.
    • Publicar y compartir online el prototipo (necesitas cuenta de Usernote)
    • Reglas y grid con opción de que los elementos se ajusten automáticamente a la misma.

    Axure 7 o Prototyper

    Para trabajar con prototipos que emulen un Responsive Design, Axure 7 parece mejor opción.

    Para prototipos pensados para dispositivos móviles es mejor Prototyper, aunque solo sea por sus eventos gestuales y sus opciones de simulación.

    Para prototipos sencillos cualquiera de las dos opciones sobra. Cuando los prototipos son de aplicaciones web que necesitan simular mucha interacción... me lo pensaría, pero creo que si tuviera que trabajar con muchas tablas, como en una herramienta de gestión, de banca, etc. me acabaría decantando por Prototyper.

    Artículos relacionados:

    Novedades de Axure 7: Responsive Design, Parallax Scrolling, Repeater Dataset

    $
    0
    0

    El mes pasado se lanzaba la nueva versión de Axure: Axure 7, que trae muchas y muy interesantes novedades.

    Logo de Axure

    Hay versión completa y gratis de prueba (de la versión Pro) de 30 días. El precio de Axure 7 es de 289$ para la versión estándar y 589$ para la versión Pro. Si ya tenías la licencia de una versión anterior, la actualización a la nueva versión es gratis.

    Adaptative Views para Responsive Design

    Una de las grandes novedades de Axure 7 son las Adaptative Views, que permiten prototipar de forma automática y muy sencilla con Responsive Design.

    Esquema de página que se adapta a diferentes resoluciones

    En primer lugar seleccionas en el menú Project>Adaptative Views los diferentes tamaños de pantalla con los que quieres trabajar, como si estuvieras usando CSS Media Queries:

    Pantalla de selección de la anchura y altura mínima de una vista

    Después, en cada página tienes una vista para cada una de las resoluciones definidas:

    Opciones de visualización de una página de Axure: base, vista 1, vista 2

    Puedes modificar así el tamaño de los elementos de cada vista o su contenido, pero también puedes hacerlo dinámicamente gracias a los nuevos eventos de página OnWindowResize y especialmente OnAdaptativeViewChange, este último se lanza cuando pasas de un vista a otra.

    Tienes también nuevas opciones de borrado de un elemento: borrar de todas las vistas o eliminar solo en las vistas.

    Podéis ver aquí un ejemplo muy sencillito de Responsive Design con Axure 7: si redimensionas el navegador, cuando la anchura es menor de 768px, se muestra una vista diferente donde los elementos están dispuesto de otra manera.

    Nuevos eventos de página, OnWindowScroll para Parallax Scrolling

    He comentado los nuevos eventos onWindowResize y OnAdaptativeViewChange. Otro evento nuevo de página que ofrece muchas posibilidades es OnWindowScroll.

    La opción de incluir interacción en el OnWindowScroll nos va a permitir por ejemplo simular un Parallax Scrolling.

    Podéis ver un prototipo creado con Axure 7 que simula un Parallax Scrolling en Ejemplo de Parallax Scrolling y descargar el .rp del ejemplo de Parallax Scrolling con Axure 7.

    No hay eventos pensados para dispositivos móviles

    En comparación con Prototyper se echan en falta eventos propios para dispositivos móviles. Han incluido algunos eventos nuevos pero siempre relacionado con el ratón o el teclado pero no gestuales.

    Nuevo widget "Repeater" para crear listados de elementos

    Listado de productos en forma de cuadricula

    Una de las grandes ventajas que vimos en Prototyper es que permitía con mucha facilidad emular una BD para poder aprovechar los datos en diferentes páginas del prototipo: listarlos en una tabla paginada o en un desplegable, añadir nuevos campos, borrarlos, modificarlos, etc.

    Axure 7 incluye como novedad el elemento "Repeater" con un objetivo similar. En el Dataset del elemento defines los campos e introduces los valores (texto, imagen o enlace):

    Jugando con las opciones de formato y las posibilidades de interacción, puedes lograr listados paginados (en formato lista o cuadrícula), con opción de ordenación o con opciones de añadir e eliminar registros. Sin embargo llevarlo a cabo resulta complejo y poco intuitivo.

    La web de Axure dispone de un ejemplo de tabla de productos creada con "Repeater" y se puede descargar el .rp

    Otras novedades en los widgets

    Las cosas que más me han llamado la atención en relación con las novedades en los widget son:

    • Los campos de tipo texto ahora admiten tipos de HTML5: número de teléfono, email, búsqueda, etc. Además se puede incluir un "hint text" (y editarse su estilo), es decir, un texto por defecto en el campo que se borra automáticamente cuando coge el foco.
    • Por fin se puede indicar que los paneles dinámicos se ajusten automáticamente a su contenido.
    • Desgraciadamente sigue siendo igual de difícil trabajar con las tablas, pues no incluyen opciones básicas como unir celdas.

    Visualización del prototipo

    En la columna izquierda, donde si sitúa el árbol de páginas, hay ahora nuevos iconos.

    • Ver una determinada vista en caso de usar Responsive Design.
    • Resaltar elementos dinámicos como vimos en Prototyper
    • Ver y resetear variables (Axure tiene variables globales también)
    • Ver la URL de la simulación con o sin site map

    Prototyper o Axure

    Para trabajar con prototipos que emulen un Responsive Design, Axure 7 parece mejor opción.

    Para prototipos pensados para dispositivos móviles es mejor Prototyper, aunque solo sea por sus eventos gestuales y sus opciones de simulación.

    Para prototipos sencillos cualquiera de las dos opciones sobra. Cuando los prototipos son de aplicaciones web que necesitan simular mucha interacción... me lo pensaría, pero creo que si tuviera que trabajar con muchas tablas, como en una herramienta de gestión, de banca, etc. me acabaría decantando por Prototyper.

    Artículos relacionados:

    Viewing all 180 articles
    Browse latest View live