Noticias de diseño

Si hay un concepto que me gusta en comunidades online es el del "Gamification" de todo, esa capacidad de poner una capa de factor lúdico encima de cosas que a primera vista no lo tienen para poder ampliar el sentido de recompensa por participar en algo, sea esta recompensa real o virtual, y parezca un juego o no la acción o la interfaz donde estás aplicandola.

Hay dos ejemplos típico que uso para esto, por un lado Foursquare vive de darte "masajes al ego" con pequeños o insignificantes "badges" que son tan inútiles y satisfactorios como las "Alcaldías" que ganás al usar constantemente el juego, una interfaz con tablero de puntos, con medallitas y espejitos de colores.... que nos hace compartir hasta nuestra ubicación que estabamos acostumbrados a mantener en privado.

El segundo ejemplo no tiene ni espejitos de colores, ni tiene reglas claras, ni tiene "masajes de ego" pero te permite lograr upgrades y sumar millas ¿o se imaginan que al elegir un programa de viajero frecuente y empezar a pensar que alianza de líneas aéreas usar no estamos "jugando"? Que la interfaz sea horrible no implica que las recompensas no sean un objeto primario de esos programas.... sumar millas es participar de un juego y hasta hay foros con hacks/trucos para sumar más rápido.

Me gusta la cita de Adam Loving:

You cannot increase the intrinsic value of something by adding game mechanics. You CAN make the value more visible. You CAN change the paradigm and context of your site visitor from user to player – increasing their engagement.

Me gustaría que esté ya disponible Gamification by Design: Implementing Game Mechanics in Web and Mobile Apps solo para ver si alguien logra explicar de forma simple la integración de estas mecánicas en algo más que ejemplos y muestran patrones de diseño porque la idea de "gamificar" una actividad siempre terminar en una relación más duradera con esa experiencia.

Irene Au, la responsable de Diseño de User Experience de Google publicó una lista en Bagcheck de libros de diseño recomendados que es imperdible y acá pongo los links:

• The Design of Everyday Things
• The Elements of User Experience: User-Centered Design for the Web
• Designing Visual Interfaces: Communication Oriented Techniques
• Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition
• The Design of Sites: Patterns for Creating Winning Web Sites (2nd Edition)
• The Back of the Napkin (Expanded Edition): Solving Problems and Selling Ideas with Pictures
• Sketching User Experiences: Getting the Design Right and the Right Design (Interactive Technologies)
• Web Form Design: Filling in the Blanks
• Understanding Comics: The Invisible Art
• Non-Designer's Design Book, The (3rd Edition)
• Logo Design Love: A Guide to Creating Iconic Brand Identities
• The Web Designer's Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design
• Muji
• Less and More: The Design Ethos of Dieter Rams
• The Humane Interface: New Directions for Designing Interactive Systems
• The Elements of Typographic Style

La lista es realmente impresionante porque agrupa desde análisis de patrones de navegación hasta libros que explican el concepto atrás de marcas como Muji o directrices de diseño de tipografía y hasta la historia atrás de los cómics.... simplemente genial y encima cada día me gusta más Bagcheck

Además de su título, leí 4 de esos y son excelentes así que confío que el resto tambien lo son :)

En una excelente entrevista, Web format has 'contaminated' online journalism, Mike McCue de Flipboard y ahora parte del board de Twitter explica algo bastante interesante para entender los cambios en el periodismo online:

"The problem with journalism on the Web today is that it's being contaminated by the Web form factor. What I mean is, journalists are being pushed to do things like slide shows. Articles themselves are condensed to narrow columns of text across 5, 6, 7 pages, and ads that are really distracting for the reader" ... "Journalism is being pushed into a space where I don't think it should ever go, where it's trying to support the monetization model of the Web by driving page views. So what you have is a drop-off of long-form journalism, because long-form pieces are harder to monetize."

Leer completa

Excelente nota de Anil Dash sobre el famoso rediseño de Gawker que Nick Denton está queriendo mostrar al mundo como el post-blog

Este gráfico muestra de forma simple como todavía en un blog es importante el contenido, en cuanto a espacio y posts, pero como el stream o rio de noticias que estamos hablando desde 2005 empieza a tomar relevancia y como se resuelve incorporarlo al diseño... mientras que en Twitter el stream es lo importante (definido por tamaño y relevancia en página) para tener el "contenido/conversacion" en una pestaña lateral. Interesante análisis de UI.

Pocas veces leí un artículo de Usabilidad en dispositivos táctiles tan bueno como iPad: Scroll or Card? y como la discusión sobre cuando usar scrolling o "paginado" (Flip) es correcto en diferentes situaciones de uso.

Si te interesa la usabilidad te va a parecer un artículo con buen background y buena lógica que no se va por las ramas.

El jueves 28 de octubre, entre las 14 y las 21 hs, se hace la conferencia "Diseño Interactivo para todos: usable y accesible", como parte del Día Mundial de la Usabilidad y el Festival Metropolitano de Diseño. Es en Medrano 951, sede de la UTN Buenos Aires. En el programa se ven a algunos de los gurúes locales del tema, pero también algunas caras nuevas.

Leer completa

Excelente infografía y análisis del uso de colores en el diseño de los sitios más conocidos o grandes; es interesante ver que el estudio surgió al ver la predominancia del azul en muchos sitios y sobre todo en perfiles de usuarios de Twitter, hagan click en el gráfico para ver la versión gigante del gráfico.

Dos detalles que me sorprenden: a) como dominan el azul y las variaciones del rojo y b).. Facebook es azul porque Mark Zuckerberg es daltónico ;)

Excelente infografía de Stephen Anderson sobre los fundamentos básicos para diseñar "experiencias" sean estas desde una aplicación web hasta algo de diseño industrial, la infografía me aprece realmente genial aunque sea de 2009 porque toma en cuenta una frase que resume la misma forma en la que yo creo que el diseño debe darse:

"Todo está relacionado con la Gente, sus Actividades y el Contexto donde esas actividades suceden"

Es tan simple y básico como completo, y les recomiendo leer las consideraciones generales además de descargar la versión de 2mb en PNG o el PDF de 10MB para imprimir

Pocas veces ví una aplicación web es tan superior a una aplicación de escritorio y nativa del sistema operativo como cuando comparo Mail.app en el iPad y Gmail para iPad; que encima sigan mejorando la interfaz y lo usen como ejemplo de aplicación web con diseño iterativo.... me parece justo aún cuando sea automarketing puro :)

Sólo les falta soporte offline y me dejarían más que feliz :)

Tip para despistados Iterative Design: es una metodología donde se usan ciclos de prototipo, testeo, análisis y refinamiento del producto en base a la interacción con el sistema que se diseña... personalmente lo uso como sinónimo de diseño que evoluciona sin parar :)

Finalmente parece que Google se acaba de despertar y, por primera vez en mucho tiempo, hace cambios reales en su página de resultados y un muy pequeño refresh de su logo. Para resumir y luego de haber usado la nueva versión un buen rato me quedo con la sensación de que pese a sumar datos lograron que parezca más limpia de lo que era.

Y sé que suena como un contrasentido, pero la realidad es que al agregar la columna izquierda con menú contextual (fijense en los diferentes screenshots como van cambiando las opciones) suman mucho más valor a las búsquedas porque te ayudan a refinarlas cosa que, pese a estar disponible en "Options" nadie usaba... fijense los resultados de Volcán y como la barra lateral cambia basada en los contenidos.

O miren que interesante el "Wonder Wheel" de Mauricio Macri como en el primer screenshot muestra las "bolsas de resultados" asociados al Keyword y luego podés ir estirandolos para jugar, si uno mira la barra lateral va a ver el faceting para refinar búsquedas cada vez más asociado a lo que buscas.

Y lo mismo pasa con productos (me mata buscar MP3 y que me aparezcan marcas para seleccionar!) y hasta discusiones... ¿porque este cambio? Personalmente pienso que, más allá de escuchar al usuario, en Google saben mejor que nadie que "mejores resultados son mejores negocios para todos" y poca gente pone atención a la versión avanzada del buscador.

Se esta manera Google cambia de diseño, mantiene la limpieza con detalles simples: a) caja de busqueda más grande pero con menos borde, b) logo mas redondeado y con menos sombras, c) footer sin azul de fondo, d) opciones de Geolocalización apenas visibles sin molestar justo arriba de los resultados.... ahora, solo falta que todos tengamos acceso y veamos que sucede ;)

Click para ampliar: Acá iba una galería muy linda.. que tuve que borrar.. en definitiva, les recomiendo que esperen que se les active automáticamente y van a poder jugar con todo esto

Esto que se ve acá es una de las nuevas y potenciales interfaces de Google que estoy probando hace al menos 3 días y que vi en Google Blogoscoped donde básicamente hay unos cambios no sutiles en la barra lateral:

• Acceso directo a casi todos los servicios por más que estén en la barra superior
• Busquedas relacionadas (a Google le aparecen "yahoo" e "ebay", me pregunto porque no aparece "Bing" :P)
• Y el timeframe que uno quiere controlar

Y cambios más sutiles que son de accesibilidad o diseño:

• Logo sin sombras que le da un toque más simple a la pagina de inicio
• Caja de búsquedas que se extiende en casi la totalidad del ancho de la página y que tiene un botón de búsqueda más llamativo
• Los resultados de "noticias" y "videos" aparecen abajo de todo en vez de mezclados en las primeras posiciones

Leer completa

Impresionante nota del Nielsen Jounalism Lab: How The Huffington Post uses real-time testing to write better headlines donde se cuenta como The Huffington Post, sitio que me parece bueno pero que camina siempre en el límite de lo black-hat, mide en los primeros 5 minutos de publicada una noticia que título logra más clicks y en base a ese resultado automáticamente dejan el que mejor resultado tiene.

Un test A/B es, básicamente, una prueba en la que se muestra aleatoriamente dos opciones a un numero igual de usuarios y se mide en tiempo real cual de las dos opciones muestra mejores resultados según lo que uno quiere lograr

Es muy interesante que el uso de estos tests se expanda a los títulos de las noticias porque eso implica ya usarlo en todo lo posible de un sitio, que teóricamente es posible, cuando hoy se usaba mayormente en métricas de publicidad online.

Un tip: en este link se puede descargar la presentacion de Eric Brown, Editor de la página de inicio de Yahoo! y que muestra algunas de las estrategias que usan para mostrar diferentes versiones de esa página a diferentes grupos etarios y que se presentó en la conferencia 2009 de la ONA.

Tip: Ahora, justo cuando uno lee el primer párrafo de este post y dice "voy a hacer esto en mi blog" deben tener en cuenta que esto SOLO es posible en sitios de altísimo tráfico porque si pasan más de 5 minutos y justo Google te indexa... corrés el riesgo de quedar mal posicionado

Un test A/B es un test que se realiza para ver que diseño funciona mejor en un sitio, sea este un blog, un diseño de AdSense, o lo que quieras medir para mejorar tu performance.

La gente de Carsonified hizo este pequeño tutorial para que puedas hacerlo en tu blog de WordPress sin problemas y me pareció la formas mas simple de hacerlo.... tenganlo a mano en algún momento les va a serivr en serio ;)

Excelente presentacion de Chris Messina: New Assumptions for Designing for the Social Web

Leer completa

Google acaba de anunciar mejoras en Gmail y sus labels y sinceramente de todas las mejoras hay una sola que me parece soberbia y que, sinceramente, era la función que esperaba: Ocultar Labels

Leer completa

¿Qué mejor ejemplo para demostrar el poder de los estándares web en la vida real que rediseñar un sitio con más 13 millones de pageviews por día?

El sitio de tremenda cantidad de tráfico diario es nada menos que Taringa.net. Luego de leer éste artículo sobre su funcionamiento, me tomé dos días para realizar un ensayo sobre un posible rediseño del sitio, pero esta vez usando estándares web y buenas prácticas de diseño.

La idea fue, con números fríos, convencer que el diseño usando prácticas simples y conocidas de HTML y CSS es una opción más que válida a los temas de escalabilidad.

Los resultados son los suficientes como para hacer girar un par de cabezas: un rediseño de Taringa con estándares web puede reducir en un 50% o más los costos en ancho de banda y servidores.
Leer completa