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 del día: Google Demo Slam

Qué mejor publicidad para un producto que los usuarios mismos mostrando la forma en la que lo utilizan… o mejor aún, la forma en la que se divierten con él.

De un producto con muchas funcionalidades siempre pueden surgir usos inesperados, y Google no dejó este concepto de lado.

Google Demo Slam es una colección de videos en donde los usuarios muestran utilidades “alternativas” de los productos de Google, algunos divertidos, algunos útiles, otros inesperados. Una carrera en Google Street View mientras uno recorre las calles de Estados Unidos, un intento de engañar a Google Googles para que nos detecte como el monte Rushmore, efectos especiales con Google Video Chat, las posibilidades son enormes.

Por supuesto, se enfoca mucho a lo divertido, pero algunos usos pueden ser más útiles de lo que se espera.

Soy un zorrinito Google.

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: ¿Cómo diseñar con rostros?

Cuando uno diseña no solamente tienen que tenerse en cuenta los colores y las tipografías. Por supuesto que las imágenes dicen más que mil palabras, y las fotos muchas más. Por supuesto, cuando hacemos un diseño, queremos que eso que se diga sea acorde a lo que queremos decir.

Y trabajar con fotografías no es nada fácil. Hay que saber saber cuál es la mejor fotografía para un tipo de público, qué mensaje transmite, y por supuesto, que no sea malinterpretada. Por si eso fuera poco, al mismo tiempo queremos que llame la atención pero que esa atención no se desvíe a la imagen sino que sea una forma de reforzar nuestro mensaje.

A Practical Guide to Designing with Faces es una guía introductoria a muchos conceptos a tener en cuenta, y seguramente una buena referencia para comenzar a adentrarse en el tema.

Soy un zorrinito bien diseñado.