Gamification

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.

15 libros de diseño recomendados

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:

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 :)

Flipboard y el cambio en el periodismo online

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.”

Continuar leyendo “Flipboard y el cambio en el periodismo online”

El rediseño de Gawker y el río de noticias de Twitter

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

columnas de contenitos gawker twitter

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.

Usabilidad: Scrolling vs. Paginado

Coodinacion ojo y dedos

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.

Diseño Interactivo para todos: usable y accesible

Movimiento de Diseño Inclusivo 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.

Continuar leyendo “Diseño Interactivo para todos: usable y accesible”

Los colores de Internet

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.

colores de internet

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 ;)

Los fundamentos del diseño de experiencias

fundamentos del diseño

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

Gmail en el iPad sigue mejorando

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 :)

gmail en ipad

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 :)

Google renueva logo y página de resultados

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.

Resultados de Volcán en Google

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.

Macri como ejemplo de Wonder Wheel

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

Problemas de Google Wave según el creador de Gmail

“Por lo que he visto, el aspecto de tiempo real en Wave es lo más fascinante y lo más problemátivo. Creo que la raíz de los problemas es que las conversaciones necesitan ser, mayormente, lineares o se vuelven incomprensibles. IM y el IRC funcionan porque hay un ida y vuelta linear entr los participantes. Wave pone la conversacion en pequeñas cajitas lindas tipo Gmail y luego hace los update en tiempo real. El resultado es que la gente termina respondiendo (en tiempo real) en otros lugares de la página y el flujo cronológico y linear de la conversacion se pierde” Excelente análisis de la interfaz de Wave y sus problemas hecho por el creador de Gmail :)

Google y su nueva interfaz "ampliada"

new-google

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
  • Continuar leyendo “Google y su nueva interfaz "ampliada"”

Usando tests A/B hasta en los títulos de noticias

harvard_niemanImpresionante 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

Hacer un test A/B en WordPress

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 ;)

Optimizando mediante estándares web

¿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.
Continuar leyendo “Optimizando mediante estándares web”