A partir de ahora muchas de las cosas que publique por aquí, tendrán su eco también en el blog de Biko2 y viceversa para así mejorar tanto la calidad de mis post como mi experiencia en el mundo blogueril.

Pues nada, felicitar al equipo de User Experience y animarles a que vayan posteando.

Etiquetas: blog, corporativo, biko2, bikolabs, experiencia, usuario

Etiquetas: fundamentos, web, 2008

Las conclusiones (copio y pego):

• La conveniencia de dejar actuar al usuario lo más solo y autónomo posible ante la interfaz, sin interferir con preguntas. El tradicional "think aloud" de los Test de Usabilidad se vuelve, en gran medida, ínnoperativo y contraproducente en los Test con Eye-tracking.
• La necesidad de formular hipótesis de comportamientos diferentes entre perfiles "antes" y "después" del Test. A priori, para fijar la atención en posibles conductas desiguales entre grupos poblaciones con variables independientes distintas que pueden interferir en su comportamiento (aspectos sociodemográfico, niveles de experiencia, grado de conocimiento...). A posteriori, no solo para determinar si se han cumplido las inicialmente establecidas, sino para descubrir nuevas diferencias debidas a otras variables no contempladas en un principio.

De las dos me ha asombrado muchísimo la primera, algo en lo que siempre se insiste mucho durante los test de usuario es en conseguir que el usuario hable, nos cuenta en que piensa o que espera encontrarse al hacer click en un sitio.

Más info sobre Eye Tracking:

• Vídeo de una prueba que realicé
• Aplicaciones del Eye Tracking (alt64)
• Definición Wikipedia (Inglés)
  

Etiquetas: eye, tracking, tobii, experiencia, usuario, ux

Estos IA One Sheeters han ido poco a poco creciendo y aumentando y ya tenemos para:

• Wireframes 60KB PDF
• Heuristic Evaluations 59KB PDF
• Usability Testing 61KB PDF
• Card Sorting 112KB PDF
• Content Inventory 104KB PDF
• Content Map 108KB PDF
• Design Standards Guide 112KB PDF
• Mental Model 112KB PDF
• Personas 120KB PDF
• Task Analysis Grid 112KB PDF
• Use Cases 116KB PDF
• User Flows 104KB PDF
• Vision Scope 124KB PDF

Creo que en momentos puntuales pueden llegar a resultar terriblemente útiles y que nos abran alguna puerta que de otra manera sería dificil abrir.

Si alguien se anima a traducirlos que lo comente.

Etiquetas: arquitectura, informacion, ux, ucd, iaonesheeters

Ni que decir tiene que recomiendo encarecidamente leer la entrevista porque Daniel siempre aporta granitos de arena a la montaña de conocimiento que muchos nos vamos creando. Aunque no puedo ser muy subjetivo puesto que admiro profundamente a Dani y todo su trabajo y siempre ha sido un claro referente profesional, un modelo a seguir.

Aprovecho el peloteo para darle la enhorabuena a Andrés Nieto por el magnifico rediseño de su blog y por seguir fiel y constante y seguir posteando con tanta regularidad.

Etiquetas: personajes, daniel, torres, burriel, torresburriel, andres, nieto, anieto2k

Jorge hacía mención a un post de la gente de 37Signals, y está claro que aunque siempre tratemos de aprender de la experiencia de las grandes y más importantes empresas del mercado para mejorar profesionalemente, es mucho más importante ser capaces de sacar nuestras propias conclusiones a lo que leemos y aplicarlo a nuestro entorno profesional. Por eso la gente de 37Signals, quizás intentando conseguir cierta repercusión a través de la polémica, se hayan aventurado con este post del que nosotros tenemos que sacar algunas conclusiones. Aquí están las mías:

• Ellos no dicen que prescindan del prototipado en papel, sólo que pasan de este al HTML, saltando el paso del diseño en Photoshop. we usually go right from a quick paper sketch to HTML/CSS
• Esto no vale siempre, hay clientes que siguen prefiriendo el pantallazo de Photoshop, algo plano antes de pasar a algo más interactivo.
• Si no estamos seguros de acertar con la línea gráfica o el cliente no es de confianza, estamos obligados a no saltarnos ese paso. O tendremos mucho más trabajo.
• Una maqueta en HTML+CSS+Javascript es muy espectacular, al cliente le entra por los ojos rápidamente y nos puede ayudar a la hora de "vendérsela".

Como siempre que alguien me da a elegir entre más de dos opciones, la respuesta es "depende". No podemos aferrarnos siempre a lo mismo, en cada proyecto y con cada cliente deberemos ser capaces de dar solución a un problema de la manera más óptima. Tener el conocimiento de las diferentes formas de afrontar un proyecto nos proporcionará el estar preparados ante cualquier reto que se nos presente.

Etiquetas: prototipado, papel, photoshop, fireworks

Prototipado en papel:

Los prototipos de papel son una forma de crear una imagen palpable de lo que será una futura aplicación o sitio web. Su creación y manipulación es rápida y elástica y permite a los usuarios imaginarse lo que será la futura aplicación en funcionamiento sin interferencias de tipo:

Técnico: plataformas, utilización de elementos multimedia como Flash...

Gráfico: colores, maquetación , tipografía que en muchas ocasiones desvían el centro de la discusión hacia asuntos cuya importancia es muy relativa en el proceso inicial. Según el conocimiento del interlocutor con el promotor del proyecto web, nos podemos encontrar debatiendo sobre el tono de verde de una pantalla, (secundario), frente a lo principal: secciones, datos necesarios, utilización futura del producto. Como símil con la "vida real", como discutir acerca de la pintura de un coche, cuando ni siquiera sabemos cómo va a ser.

(Alzado. Prototipos de papel. 14-01-2003)

Etiquetas: prototipado, papel, vimeo, twitter, flickr, dcu, ucd, ux

Como no conseguí encontrar ningún recurso claro por la red, realicé mis propias pruebas en casa con dos versiones de JAWS distintas una antigüa (versión 5) y la última de todas (versión 8).

Me cree una pequeña página en HTML con unas migas de pan como estas (se han sustituído los "<" por "[" para poder visualizarlo):

[ul>
[li>[span class="screen-readers">Usted está en:[/span>[a href="/" title="pagina principal">Inicio[/a>
[ul>
[li>[a href="/categoria" title="nombre de la categoria">Categoría[/a>
[ul>
[li>Artículo[/li>
[/ul>
[/li>
[/ul>
[/li>
[/ul>

En el curso todos coincidíamos en que semánticamente la mejor forma de representarlas era mediante listas y sublistas anidadas, puesto que al quitar la hoja de estilos es la única manera en la que siguen teniendo sentido. Pues bien, los resultados fueron:

JAWS 5: No lee los caracteres ">" (ni ningún otro como "|", "#" introducido en el HTML)

JAWS 8: Lee los caracteres ">"

De forma que JAWS 8 leería algo como: "lista de 2 subniveles con 2 enlaces. Nivel 1 enlace "Inicio" mayor que subnivel 1 enlace "Categoría" mayor que subnivel 2 "Artículo" se cierra subnivel 2, se cierra subnivel 1, se cierra lista".

Como conclusión: No tiene sentido que Inicio sea mayor que Categoría, aunque jerarquicamente esté por encima, y puesto que el lector de pantalla ya reconoce que las migas están ordenadas en niveles y subniveles, no haría falta introducir en código ningún elemento separador. Aunque se recomienda introducirlos por CSS como separadores visuales.

Etiquetas: accesibilidad, estándares, web, migas, pan, jaws

En mi caso no puedo ser muy objetivo respecto al uso de Fireworks porque para mí siempre ha sido la herramienta perfecta, me permite hacer todo lo que quiero sin las complejidades de otras herramientas de Adobe y con la sencillez que un "inculto" del diseño gráfico necesita.

Con Jorge comparto los miedos al prototipado en XHTML+CSS sobre todo porque lo estoy viviendo actualmente. Un cambio de requerimientos en papel puede suponer un par de minutos al igual que en Visio/Omnigraffle/Fireworks, pero en HTML puede suponer 2 minutos o 2 horas o 2 días, aunque este análisis requiere de más tiempo y de un post dedicado exclusivamente a ello

.

Etiquetas: prototipado, wireframes, fireworks

Si hasta ahora bastaba con poner * html delante de nuestras clases, id&rsquo;s o elementos en la CSS para saber que sólo las versiones previas al IE7 serían capaces de interpretarlo, ahora vamos a darle la vuelta de tuerca a esto y a usar algo para que sólo lo entiendan las versiones posteriores a IE6 (el 7 y el futuro IE8).

• #identificador[id]
  
• .clase[class]
  

Así, nos aseguramos que aquellos navegadores (léase los de siempre) que no interpreten los atributos [id] y [class] (o cualquier otro como [href], [alt], [title]) no apliquen la regla.

Ejemplo:

Style.css

• #header {background:red none;}

StyleIE.css

• #header {background:green none;} /*Internet Explorer 6 y anteriores*/
• #header[id] {background:red none;} /*Internet Explorer 7 y posteriores*/

Gracias a Kilian Valkhof

Etiquetas: estándares, web, css, ie, hacks