Alpha's Manifesto

A black and white figure's thought-hive

Comentarios sobre The State of Responsive Web Design

Opiniones propias sobre muchos problemas mencionados

Acabo de terminar de leer un artículo largo y genial de Smashing Magazine, llamado The State of Responsive Web Design. Como el título lo indica, habla sobre el estado actual del diseño de webs responsive y sus pros y contras. Mucho mejor aún, habla de los distintos problemas a superar y la forma en la que la tecnología de hoy nos permite hacerlo. Pero no es una introducción al tema, sino que abarca todos esos problemas que aún no tienen soluciones definitivas. Totalmente novedoso.

Sin embargo, como bien dicen al final, esto no es ni el comienzo, y sobre las cosas mencionadas tengo mucho que mencionar. Quería dejar mis comentarios por aquí.

(Read more →)

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.

Principios Universales del Diseño

Partiendo desde la base de lo básico

Este es otro de esos encuentros que hago en los foros de StackExchange, específicamente en el de User Experience. Aquí alguien preguntó ¿Cómo es que los bordes redondeados afectan la usabilidad?

La pregunta estaba orientada al saber el por qué los bordes redondeados son algo deseable, y de qué forma afectan a nuestra experiencia de una página web. Al mismo tiempo, también pregunta por qué la mayoría de los sitios permite que estos bordes aparezcan no-redondeados en versiones viejas de algunos navegadores, si es que es una característica tan importante.

La respuesta más votada habla de la psique humana y cómo el ser humano responde de forma más amigable a objetos redondeados. Hizo una referencia muy interesante también, basándose en el libro Universal Principles of Design, un libro que analiza desde lo más básico la experiencia de usuario en mundos más allá de la informática (incluyéndola también). Mostrando cosas como desde el diseño de juguetes, al diseño de menúes y pasando por el diseño de elevadores, este libro parece ser una de esas joyitas que iluminan más el por qué que el cómo hacemos lo que hacemos todos los días.

Soy un zorrinito especulativo.

Link del día: La usabilidad ha muerto!

Títulos amarillistas si los hay, MD ha compartido con nosotros este link de la gente de ForoAlfa, un grupo que habla sobre la usabilidad en su forma teórica, y eso es en general de lo que trata este artículo. El artículo, también bajo el título de La Usabilidad ha muerto. ¡Que viva la usabilidad! habla de cómo la web actual (y los que trabajamos en el software en general) ha degenerado el concepto de usabilidad.

Según dicen (y si lo entendí correctamente), la teoría sobre la usabilidad se desarrolló como una serie de medidas y patrones que permitía que las interfaces pudieran dialogar con un usuario y mantener una conversación fluida. Hoy cuando hablamos de usabilidad hablamos de la forma en la que se mueven las pantallas, cuánto se ve y cuánto no se ve, cómo se scrollea, cómo pasan las imágenes y los colores que usamos. Por supuesto que está relacionado, pero no conserva la idea pura original de lo que es usabilidad.

En mi opinión el artículo no llega a una conclusión definitiva de cuál sea el problema y qué habría que hacer para solucionarlo, sino que nos cuenta esta historia y nos hace pensar un poco más allá de lo que vemos en el día a día sobre conceptos que quizá estamos demasiado acostumbrados a manejar.

Soy un zorrinito inusable.

Link of the day: Mouse trace your visitors

We’ve already presented some tools ([1], [2], [3]) that allows you to easily have some feedback of what the users do at your site or web application, or how do you need to improve it to make it better for their user experience.

So, here is another tool that will help us measure that bit of the user that’s not so easy to see: MouseTrace is a tool that being installed on our website will track exactly what the user does with it’s mouse. Even if they don’t click, it is a good idea to keep track of it so that we can find out if our layout is somehow confusing the users.

I haven’t tried this myself. Have you? Are you going to? Please share your experiences.

I’m a tracked little skunk.

Link del día: Patrones de pantallas

En un artículo de Added Bytes me encontré linkeado esta colección de patrones de pantallas, llamada 12 Standard Screen Patterns, del blog de Designing Web Interfaces. Esta gente se dedica a postear información muy interesante sobre cómo hacer más fácil e intuitiva, a la vez de innovadora, la experiencia usuario-máquina a través de distintas visualizaciones, herramientas, técnicas y aproximaciones.

En este caso, se trata de una colección de pantallas que amoldan la información de acuerdo a las acciones que se quieren realizar sobre la misma. Por ejemplo, la disposición de una página de búsqueda no será para nada parecida a la de un formulario (incluso aunque técnicamente, la búsqueda sea un formulario), o de un wizard. Para más información al respecto, aquí tenemos otro listado de patrones de diseño visual.

Para que el mundo mobile tampoco se quede afuera, acá hay un artículo sobre iPhone Application UI Design Patterns, con algunos consejillos sobre cómo diseñar visualmente una aplicación para estos teléfonos.

Por último, la página de Paul Hibbits está llena de recursos sobre usabilidad y diseño de interfaces. Hay una sección en especial sobre los patrones. Muy interesantes y completos para ver.

Soy un zorrinito user-friendly.

Link del día: Testeo de usabilidad

Muchas veces la usabilidad de un sistema es un requerimiento tan primordial como el funcionamiento en sí, y más en un mundo como puede ser el mundo web, en donde tenemos miles de competidores para servicios similares que podemos estar ofreciendo online. Quien publica primero tiene la ventaja, pero quien hace el servicio lo más fácil de usar y de forma más cómoda e intuitiva es quien logra hacer la diferencia.

El problema es, cómo probar este tipo de cosas? Muchas veces se usan equipos de testing que no tengan conocimiento alguno de la herramienta; muchas veces también se utiliza gente que no está relacionada con el proyecto para nada, o incluso se terceriza este tipo de testeo. Otro problema es que, dado que estos testeos de usabilidad se basan en tratar de ver qué cosas son fáciles y cuáles no, cuáles son intuitivas y cuáles no… cómo obtener resultados homogéneos para cada persona que lo haya probado? Y un tercer problema es: cómo ver fácilmente los resultados en nuestra aplicación?

Usabilla es una aplicación web que quiere encargarse de esto. Tras registrarnos (con sus planes gratuitos o pagos), podemos crear pruebas de usabilidad contra sitios / aplicaciones web, imágenes o diseños. Las pruebas las generaremos en forma de consignas que le pediremos al usuario que realice sobre ese algo que queremos testear. Por ejemplo: “En dónde haría click para registrarse?” o “Qué elementos le llaman la atención de esta página?”

Tras probar con muchos usuarios, podemos visualizar nuestros resultados de forma gráfica, o en la misma página.

Recuerden que como competidor de este servicio alguna vez hablamos de Loop11, que parecía tener la ventaja de permitir la navegación a través de las pruebas, y de esa forma evaluar la navegabilidad de un sitio. No sé si Usabilla lo permita, aunque por lo que ví en las demos parecería que no.

Soy un zorrinito usable.