Alpha's Manifesto

La madriguera de una insignificante figurita blanquinegra.

La prueba de la pizza

La versión casera de pruebas de carga cognitiva

Pizza

Hace tiempo atrás, en MakingSense tuvimos la oportunidad de trabajar en el desarrollo de una aplicación móvil. No sólo era para una empresa grande, sino que la aplicación iba a ser mostrada en vivo por Microsoft en la presentación //BUILD 2012 junto a Rackspace. Mi historia tratará sobre otra cosa, pero si les interesa, pueden leer más sobre eso en el blog de MakingSense, o asimismo en el blog de Rackspace.

Participé de este proyecto a pesar de muchos factores internos que lo dificultaban, pero me alegra haberlo hecho porque tenía características muy interesantes. Al comienzo de dicho proyecto, obtuvimos los requerimientos y analizamos sistemas de Rackspace para tener más contexto sobre lo que teníamos que hacer. En una de esas oportunidades, realizamos una reunión sobre alcance, diseño y experiencia de usuario.

(Leer más →)

Web Form Best Practices

Buenas prácticas para formularios web

Otra de las preguntas de los foros de User Experience, bajo el título de Have I missed anything from my list of web form best practices?, consiguió una muy buena recopilación de consejos de buenas práctica sobre interfaces de formularios y UI / UX. Si van a mirarlo, miren todas las respuestas, ya que la pregunta principal no ha sido actualizada para recopilar completamente todo lo que han sugerido.

Cabe mencionar que muchas de estas respuestas corresponden a sugerencias e incluso a patrones explicados en el libro Web Application Design Patterns, de Pawan Vora, el cual es una buena referencia para buenas prácticas generales sobre la web. Sin duda habrá mejores referencias, pero es de las que he leído hasta el momento. Los invito a compartir libros o referencias recopilatorias de buenas prácticas.

Soy un zorrinito de buenas prácticas.

UPDATE: Lisandro nos dejó en los comentarios un link sobre la forma correcta de alinear labels, y otro sobre las ventajas de campos de texto unificados. ¡Gracias!

Windows Metro explicado

Crítica criteriosa

A menos que hayas estado viviendo bajo una roca por los últimos meses, deberías saber lo siguiente:

  • Windows 8 es el nombre de la nueva versión del sistema operativo de Microsoft
  • Windows 8 introduce a Metro, un intento de introducir a las pantallas táctiles como las privilegiadas en Windows sin incapacitar la interación de teclado y mouse
  • Windows 8 es diferente. Si estás estancado en el 2001 con Windows XP, Gnome 2 y/o KDE 3, obviamente tampoco te va a gustar Windows 8. También tengo unos conejitos bailando para que mires.

(Énfasis y links del artículo original)

Este artículo no tiene desperdicio, ya que me pareció totalmente balanceado y acorde con una opinión crítica. Da muy buenos consejos para los que estamos curiosos de Windows 8 pero no sabemos cómo seguir adelante. Ya comprarlo? Usarlo? Instalarlo? Máquina virtual o disco real? Qué me pierdo? Qué tiene? Vale la pena? Todas esas preguntas están respuestas en este artículo: Windows 8 & Metro with Mouse and Keyboard.

Soy un zorrinto crítico.

Sisyphus.js

Widget de autoguardado

Una característica que seguramente todos adoramos de GMail es el autoguardado. Al momento exacto en que dejamos de escribir un mail, este se autoguarda, y no recuerdo cuándo fue la última vez que perdí un mail por accidentalmente refrescar la página. Quienes vienen de las viejas épocas de Hotmail conocen mi frustración.

Hay alternativas interesantes para lograr este mismo efecto, una de las cuales es Sisyphus.js (gracias JH!), un proyecto de open source en GitHub que es un wrapper para formularios. Se encarga de automáticamente atrapar los eventos de cambio en ellos para guardar automáticamente en local storage la información del formulario. De esa forma, nuestro formulario siempre tiene la información guardada.

No dudo que pueda modificarse o atrapar eventos que nos permita también serializar esta información al servidor para que, al igual que GMail, esta información autoguardada quede relacionada con nuestra cuenta y no con nuestro navegador.

Soy un zorrinito autoguardado.

Web Application Design Patterns

Una librería de referencias de patrones de usabilidad

20120221-041526.jpgBueno, son las 4 AM y no puedo dormir. Acabo de terminar de leer el libro que venia leyendo lentamente desde hace tiempo ya, llamado Web Application Design Patterns, de Pawan Vora.

El libro en sí tiene el título muy bien puesto, porque realmente de eso se trata. Es una colección de patrones de diseño orientados a la usabilidad y la interfaz gráfica de las aplicaciones web. Para los que ya lo sabemos, recordaremos que los patrones son, como su palabra lo indica patrones. Son características en común y no soluciones definitivas ni detalladas de como aproximarse a una situación en particular.

Hablando de patrones en software, generalmente se los identifica de una forma muy común y muy particular. Cada patrón tiene un nombre que lo identifica, un problema particular que resuelve y una descripción de la solución básica a la que aproxima. La compilación de patrones que Vora hizo en este caso hace muy buen tributo de ese esquema y lo mejora en varios aspectos.

El libro se divide en varios capítulos que atacan temas comunes que merecen la atención en el desarrollo y la usabilidad de aplicaciones web, los cuales son:

  • Formularios
  • Autenticación de usuarios
  • Página principal de la aplicación
  • Navegación
  • Búsqueda y filtrado
  • Listas
  • Rich Internet Aplications
  • Aplicaciones Sociales
  • Internacionalización
  • Accesibilidad
  • Diseño visual
  • Librerías de patrones

Le doy crédito especial por la inclusión de esa última sección, en donde se definen las características que una librería de patrones (como este propio libro) debería tener, y se basa en varias librerías actuales en uso y recopiladas anteriormente por estudios al respecto.

En todas las secciones se muestran ejemplos, tanto de implementación como de uso real de esas características. Una gran mayoría de las veces se fundamentan los beneficios de estos patrones con estudios (las referencias están todas incluidas y detalladas al final del libro). Al mismo tiempo, están todos los conceptos explicados de una forma lo suficientemente detallada como para ser comprensible, lo suficientemente abstracta como para ser reusable y lo suficientemente clara como para ser entendida por no-programadores o diseñadores.

Una distinción que en este libro no se hace y me gustaría agregar como apreciación propia es que los patrones, como ya comenté, son soluciones a problemas determinados. No hay que confundirlo con buenas prácticas que, aunque cercanas, siempre conviene aplicarlas. El caso de los patrones es distinto, y de hecho, parecería ser imposible aplicar la totalidad de los patrones a cualquier sitio web. Ni siquiera los que están entre los ejemplos (Google, Apple, Mint, Facebook, Yahoo!, Basecamp, eBay, Amazon, y una larga lista de etcéteras) cumplen con la mitad de los patrones mencionados.

Volviendo al libro, lo recomiendo mucho como un libro de referencia. Está redactado como tal y no es una lectura ligera, pero vale la pena. 4 zorrinitos.

UPDATE 22/02: Tras pensarlo un poco más me dí cuenta que este libro no cubre una característica que si bien no está muy relacionada con la usabilidad, sí está relacionada con la experiencia del usuario, y ciertamente son patrones aplicados en web applications. Lo encerraría bajo la categoría de Performance, e incluiría cosas como caching de nivel aplicación, caching de nivel usuario, AJAX, conexiones persistentes, preprocesamiento de resultados. Son todas cosas que aplican como patrón a resolver un problema en particular en una situación en particular, siendo lo suficientemente abstractos como para ser aplicados en una variedad de casos. Posiblemente sería más difícil encontrar ejemplos (porque muchos sistemas no cuentan cómo es que funcionan por dentro), pero creo que sería bueno haberlos cubierto.

Soy un zorrinito usable.

¿Qué loggear de los usuarios?

Orientado a mejorar la experiencia del usuario

Un problema común en cuanto a mejorar la experiencia del usuario es que muchas veces no se sabe cuál es el problema, o cómo los usuarios interactúan con la aplicación. Si bien algo de eso mencionamos cuando hablamos de 22 herramientas para mejorar la usabilidad, hoy el problema es interno de la aplicación, y se trata de loggear las acciones de los usuarios para identificar qué necesita mejora.

Entonces, ante la pregunta: ¿Qué vale la pena loggear de los usuarios para ganar perspectiva de su comportamiento? la respuesta es, como muchas veces, depende. La razón es que loggear es caro, loggear todo es imposible y solo resultaría en un montón de datos sin correlación a nada. Los detalles de qué aproximaciones se pueden tomar están también entre las respuestas a esa pregunta.

Soy un zorrinito loggeado.

22 herramientas para probar usabilidad

Compendio de herramientas para mejor usabilidad

En mashable tienen un artículo muy interesante llamado 22 Essential Tools for Testing Your Website’s Usability. Cane destacar que el artículo no sólo expone las herramientas sino que además las categoriza y da una pequeña explicación de cada categoría, para que sepamos exactamente qué queremos medir en cada caso. Las categorías son: Análisis de tareas de usuario, legibilidad, navegabilidad, accesibilidad, velocidad y experiencia de usuario.

Soy un zorrinito usable.

Adobe, seriously?

This is your way of selecting frames?

Would be fair to say that the back and forward buttons allow you to speed up, but… not cool. This is not a proper UI for such a task.

Link del día: Buenas Prácticas UX

Encontré tres preguntas particularmente útiles en el foro de UX de Stack Exchange, las cuales son:

Estas cuatro preguntitas (y muchas otras si también checkean la sección de related en cada una) son un buen comienzo para identificar cuáles son las bases de la experiencia de usuario. Seguramente sepamos mucho al respecto por el uso diario que tenemos de distintas aplicaciones, tanto web como de escritorio, y al momento de ver algo nuevo, podemos distinguir de forma muy fácil si se trata de una experiencia positiva o negativa. Sin embargo, al momento de explicarle a alguien más cuáles son esas bases, o al momento de checkear todo, se hace un poco difícil enumerarlas.
Me gustaría saber qué adiciones les harían a esos listados. Confieso no haberlos leído completamente, pero sí en una buen parte.
Soy un zorrinito de buena experiencia.

Link del día: Notificon

La gente de Github no me deja de sorprender, parece que siempre tuvieran algo nuevo. En este caso, me crucé con algo que no es demasiado funcional, pero sí muy interesante para lograr buenas interfaces de usuario.

Han notado cómo GMail utiliza el título de la página/tab para avisarnos de cuando tenemos un mail nuevo, incluso si estamos en otro tab? Bueno, algo muy parecido se puede hacer con los favicons, cambiandolos para dar una notificación al usuario. Algo parecido hace Google Calendar, poniendo un favicon distinto cada día con la fecha actual.

El código fuente de este proyecto se puede encontrar en este sitio de Github: Notificon.

Recuerdo haber leído unas pruebas cross-browser del soporte de favicons y su posible utilización. El único caso en donde no funcionaban era en Safari, ya que en lugar de mostrarse los iconos, se mostraba un ícono propio de Safari, y dependiendo de la cantidad de tabs, directamente no se mostraba nada. Desafortunadamente, olvidé en dónde leí eso (y mis búsquedas no dieron resultados). El estudio concluía que Safari debería ponerse al tanto con el resto de los navegadores.

Soy un zorrinito visible.