uxline

Gracias a @qmarcos de q-interactiva descubro este nuevo e interesante proyecto. uxline es un nuevo servicio que nos permite, bajo demanda y a través de su herramienta web, disponer de test con usuarios y estudios de usabilidad de una forma fácil, rápida y realmente asequible.

Tanto si somos diseñadores web, desarrolladores front-end, arquitectos de la información, etc. seguro que no esta de más poder contar con este tipo de servicios.

Podemos especificar cuantos usuarios van a probar el sitio web, cuales son las tareas que deben realizar y las preguntas que deberían responder. También permite que se puede estipular de antemano el perfil de usuario, país, genero, edad y su uso diario de internet.

Videos

Me han permitido hacer una prueba gratuita de un usuario con mi propio sitio web portfolio, los parametros que he indicado son: usuarios (1), país (cualquiera), genero (cualquiera), edad (cualquiera), uso diario de internet (más de 7h).

Muestro tan solo un par de los videos, tarea 1 y tarea 3 (casi me ha sacado los colores )

Parecen obvias las tareas, pero muchas veces es justamente lo que parece y luego resultan no serlo.

Uno de los detalles que me doy cuenta a raíz del primer video es que el usuario habla perfectamente español, sin embargo la web aparece en inglés, a él parece no importarle y no la cambia de idioma aunque tiene esa posibilidad en la barra superior. El problema es que deberías salir por defecto en español. Me he fijado que tiene el navegador en catalá, esta era la razón. He mejorado el algoritmo para que todos lo usuarios que tengan su navegador en galego, euskera o catalá, aparezca por defecto en español, una lengua más cercana que el inglés.

Preguntas

Por otro lado los test también incluyen preguntas a los usuarios, adjunto un par:

¿En alguna sección te ha parecido que no había suficiente información? ¿Dónde?

Usuario 1
No he tenido esa sensación, aunque puedo decir que el único momento que me he sentido algo dudoso ha sido aquel en el que estaba buscando información específica de trabajos realizados que se pudieran ajustar a mi demanda. He pensado que tal vez poder acceder a trabajos determinados por keywords, o por algún otro tipo de clasificación no estaría de más.

¿Qué es lo que más te ha gustado de la página?

Usuario 1
Me ha gustado la imagen sencilla e integral, me da seguridad, confianza y denota profesionalidad. He estado mirando la home y también me parecen muy acertados los textos autopresentativos. Al entrar en la página he ido directamente al apartado de portfolio, tal vez demasiado rápido. Después, en el momento de rellenar esto me he dado cuenta de que había obviado las otras secciones. Al echarles un vistazo me han parecido también muy valiosas para formarme una imagen de él como profesional. Sin embargo, puedo decir eso, que de buenas a primeras no me he sentido tentado a estudiar la home.

Conclusión

A mi parecer se trata de una gran idea y un servicio a tener en cuenta para profesionales como nosotros.

Más información en uxline.

CAPTION y TITLE

La etiqueta caption proporciona información sobre el contenido de la tabla al igual que el atributo <table title="">.

La única diferencia es que title no se muestra en los navegadores de pantalla (a excepción de mostrarse como tooltip o mensaje emergente). Por contra caption aparece como un texto centrado en la parte superior de la tabla.

Resulta innecesario usar ambos puesto que con uno de ellos ya aportamos la información sobre el contenido de la tabla.

SUMMARY

Podemos optar libremente por usar caption o title pero si es necesario (sobre todo por razones de accesibilidad) complementar la información con un resumen a través del atributo <table summary="">

Como resumen se debería de indicar la función informativa de la tabla, de una forma más ampliada que el caso de caption. También se puede indicar de forma muy resumida las relaciones entre las celdas.

TH

La etiqueta th sirve para identificar los grupos de encabezamiento. Las cabeceras que sirven de referencia, tanto si se trata de una disposición en columna como en filas.

SCOPE y HEADERS

Su función consiste en relacionar las celdas de los encabezados con las celdas que contienen los datos.

  • El atributo scope podemos usarlo especialmente en tablas sencillas y en los encabezamientos th.
  • El atributo headers cumple la misma misión pero de una forma más especifica, por ello es mejor reservarlo para tablas complejas.

Más información detallada de estos atributos en scope y headers en tablas para mejorar la accesibilidad.

En conclusión, con el uso de caption, th, thead, tbody, tfoot, colgroup, col, scope, headers, axis mejoramos sustancialmente la accesibilidad de nuestras tablas.

dcu

Hace alrededor de 2 años publique en este blog: La pirámide del diseño web, con mi idea sobre los elementos más relevantes en el proceso.

Ahora expongo una revisión de esta idea pero intentando tomar como base las premisas del DCU .

He elaborado un esquema en el siguiente documento: Diseño centrado en el usuario, una propuesta. (PDF – 188Kb)

Básicamente divido el proceso en 5 etapas:

  1. Arquitectura de la información
    1. Análisis (información, objetivos, usuarios)
    2. Diseño conceptual (blueprints, wireframes)
  2. Diseño
    1. Diseñó visual (mockups)
  3. Desarrollo
    1. Front-end (web estática)
    2. Back-end (web dinámica)
  4. Publicación
  5. Mantenimiento

En la propuesta, la evaluación de interfaz/usuarios deber correr desde su inicio y en paralelo al proyecto.

Se harían interacciones de evaluación constante con los usuarios a través de:
Blueprints (prototipo de baja fidelidad) > Wireframes (prototipo de media fidelidad) > Mockup (prototipo de alta fidelidad) > Web estática > Web dinámica.

Hace casi un año hablaba sobre un posible problema de usabilidad y accesibilidad en el formulario de inicio de sesión que tiene Facebook.

Desde entonces han mejorado un poquito la accesibilidad, aunque siguen sin usar la etiqueta label para el campo de Email de inicio de sesión. En su lugar han puesto los atributos title y value. El problema es que algunas ayudas asistivas pueden no interpretar el atributo title, por lo que esta solución no sería suficiente.

Respecto a la usabilidad puede ser debatida, pero el hecho de perder (lo que tienes que rellenar en ese campo) cuando haces clic en el, me parece un error. Eso si, visualmente y a nivel de interacción queda chulisimo.

Hoy, Kus (de uninstallme.com) me comenta:

Acabo de encontrar esto http://www.csskarma.com/lab/slidinglabels/ y me he acordado de este post. No lo he analizado a fondo, pero me ha parecido una buena idea.

Y tanto que es buena idea, la accesibilidad es impecable. Se usa JavaScript como un complemento no intrusivo que se encarga de realizar el efecto y la transición del label. Solo le veo una pega, que puede resultar cansino, yo lo usaría para formularios muy pequeños, con 2 o 3 inputs.

Un lujo contar con tus aportaciones María 😉

Va otra de WAI-ARIA!

Recientemente se ha publicado la nueva versión de MOSAIC, una destacada publicación dedicada a las tecnologías y comunicación multimedia, donde tuve la oportunidad de colaborar en el desarrollo (ver ficha del proyecto).

Voy aprovechar este post para compartir como he implementado ARIA en las solapas que aparecen en la home de MOSAIC. De esta forma el contenido de las solapas es más accesible y semántico.

Marcado para un elemento de tipo tabs (solapas)

<div id="tabs">
	<ul>
		<li><a href="#tabs-1" id="tab1">en este número</a></li>
		<li><a href="#tabs-2" id="tab2">lo más leído</a></li>
	</ul>
	<div id="tabs-1" class="tabpanel">
		contenido de la solapa 1 (en este número)
	</div>
	<div id="tabs-2" class="tabpanel">
		contenido de la solapa 2 (lo más leído)
	</div>
</div>

Podemos destacar los siguientes elementos con IDentificadores:

  • id="tabs": contenedor general
  • id="tab1", id="tab2": cada solapa
  • id="tabs-1", id="tabs-2": contenedores de cada solapa

Inyectando ARIA con jQuery en un elemento de tipo tabs

$('#tabs ul').attr('role', 'tablist');
$('#tabs ul li a').attr('role', 'tab');
$('#tabs .tabpanel').attr('role', 'tabpanel');
  1. En la primera línea añadimos el landmark tablist a la lista que contiene las solapas.
  2. En la segunda línea marcamos cada enlace (solapa) de la lista con el landmark tab.
  3. Finalmente en la tercera línea indicamos el contenedor de cada solapa con el landmark tabpanel.

Aunque recientemente ha salido la versión 2.9 de WordPress voy a comentar un importante giro de la versión 2.8 que se vuelca en la accesibilidad de la estructura de contenidos.

Una de las nuevas características de WordPress es la incorporación de los conocidos landmarks de WAI-ARIA, añadidos a través del atributo role al theme por defecto de WordPress. De esta forma se especifican los roles de las diferentes zonas funcionales del blog haciendo que sea más semántico y accesible.

Los landmarks que WordPress ha incluido en su theme por defecto son: main, contentinfo, banner, complementary y navigation.

Sin duda se trata de una gran apuesta de WordPress volcada a mejorar la accesibilidad de sus blogs.

El problema de la validación XHTML W3C

Esta importante actualización que viene integrada en el theme por defecto de Wrodpress plantea un problema de validación. Las especificaciones HTML 4.01 y las DTD no contemplan aún los landmarks de ARIA y esto hace que nuestro blog no pase positivamente el test de validación W3C.

Para solventar este problema podemos eliminar los atributos role del theme e inyectarlos por medio de JavaScript en tiempo de ejecución.

Inyectando landmarks de ARIA con jQuery

$(document).ready(function() {
	$('#content').attr('role', 'main');	
	$('#footer').attr('role', 'contentinfo');
	$('#header').attr('role', 'banner');
	$('#sidebar').attr('role', 'complementary');
        $('#sidebar ul').attr('role', 'navigation');
	$('#searchform').attr('role', 'search');
});

Sencillamente tomamos los elemento a partir de sus IDs (identificadores) e inyectamos la propiedad role con el valor que representa a cada una de las zonas funcionales role="navigation".
La última línea es un añadido que se encarga de inyectar el landmark del clasico buscador de WordPress.

Reconozco haber pasado cientos de horas intentando entender a nuestro inseparable compañero Internet Explorer, he pataleado y hasta desearía hacerle budu. Pero hay que reconocer que no todo lo malo es tan malo, y ahora que ha salido el nuevo Firefox versión 3.5 es para dar cuenta de ello.

Continue reading «Añadir tab en Firefox 3.5»