No a las listas de Tuit’s o Usa las plataformas correctas si quieres que tu mensaje llegue correctamente.

Lo esencial, es la animación.

En el desarrollo web siempre el objetivo principal a variado, en los primero tiempos la optimización de datos era esencial, a posterior la inmediatez de respuesta, la organización (AI) hasta llegar a nuestros días donde lo mas importante es la experiencia de uso del sitio – aplicación – modulo – juego – etc.

Los estudios de UX afirman que la forma de desplegar la información (y el manejo de sus tiempos de espera/carga) es lo que hace la diferencia frente al usuario en la valoración y “sensación” de efectividad de una pieza interactiva.

Para tener una idea de como realizar esto adjunto el trabajo de Cento Lodigiani, quien recopila el trabajo realizado por The Nine Old Men quienes trabajaban en los años 30 para Walt Disney y que fue recopilado por Frank Thomas y Ollie Johnston en su libro “The Illusion of Life: Disney Animation” (1981)

Esta recopilación de técnicas de animación permite lograr que entre cuadro y cuadro nos comunican emociones, intensiones y otros estados de animo para elementos gráficos. Nada mejor para nuestros datos y las gráficas de nuestros desarrollos.

Más detalles en su Tumblr.

O esta otra versión, de Christina Lu

Más información de los 12 principios de la Animación en Wikipedia.

Otro ejemplo, es una presentación de las nuevas propiedades de CSS3 enfocadas en la animación, como se puede revisar en este documento interactivo de Mark Meyer.

ani004

O en los papers de uso de Material Design de Google

Como siempre, hay un Tumblr que se dedica a recopilar desde el ojo de la UX.

ani003.gif

Minihistorias de Virgin America’s

En el galardonado sitio web de Virgin America (Aerolínea del grupo Virgin) se utilizaron elementos “tipo avatar-icono” para identificar el objetivo, concepto de la promoción o comunicación con el cliente.

Me llama la atención la solución pensada por el estudio Build y provista por  Animade, donde logra crear una minihistoria en cada avatar-icono, utilizando la simpleza gráfica y las capacidades de animación del HTML5 para generar “avatares vivos” para cada concepto, como se puede ver desde el sitio web de Virgin que, además, merece un articulo próximo sobre su delicado trabajo de diseño y experiencia.

virgin0002

Links:

http://www.virginamerica.com/

Diseño y Storyboard: Build

Animación y construcción HTML5: Animade

virgin0003

El “nuevo” #YouTube

Desde esta noche ya esta visible el nuevo “reproductor” de #YouTube, pero #Google no solo cambio este elemento de su famosa plataforma de videos….

youtube03

Como ya sabíamos, tiene la zona inferior transparente, con pautas Material Design (iconos y tipografía) y con la “lista de reproducción” incorporada, pero además, trae cambios estéticos variados.

Por ejemplo, la Home oculta el menú izquierdo tradicional e incorpora la etiqueta “Música

El pase de diapositivas requiere JavaScript.

 

También incluye cambios y ajustes (dentro de las pautas del Material Design) en espaciado, cambio de tipografía y “diseño de respuesta o adaptación” (responsive design) como lo manda el mismo buscador de #Google.

ytmenuresp2

Pero hay algunos problemas con el Feed y elementos del sistema que aún no son “responsive’s”

ytmenuresp

Dentro de los detalles que se agradecen, esta la inversión de la lista de selecciones del reproductor, por ejemplo, al seleccionar la calidad del video, dejando al cursor en la posición superior iniciando la lista de selección.

youtube02

Los cambios en los canales no son muy variados, pero el enfoque comercial a la música en #Youtube es notorio.

El pase de diapositivas requiere JavaScript.

Este es el nuevo YouTube.

Buenos días El Libero

image

Apareció un nuevo medio digital en chile ( ellibero.cl ), me gusta que apostaran por (en mi opinión) acertado diseño horizontal que elimina el Cabezal – Cuerpo – Pie tan de papel, pero que AMAN las web en chile.

Lo otro interesante es la mínima segmentación de secciones, puntual y bien pensada (espero que sea una decisión acordada y no casuistica por el hecho de estar partiendo y contar con poca gente).

image

Aunque los poderes detrás de este medio son los de siempre y incrementan el monopolio político en la prensa chilena, espero que los otros medios copien pronto las ideas graficas y de arquitectura de este sitio.

Insisto, espero que mucho de lo que se ve (mas bien lo poco que se ve) sea norma y no casualidad.

Lo que todos callamos….

Estoy impresionado por la ¿filtración? del “Informe de innovación de The New York Times” escrito por Arthur Sulzberger Gregg (Nieto e hijo de los propietarios del diario) donde describe tres puntos clave en los problemas digitales de las redacciones actuales de medios.

Creo que me identifica plenamente, mí periodo en COPESA (Editora de La Tercera y otros diarios, revistas y radios en chile) y a posterior en La Nación (Periódico de participación estatal, coordine el rediseño y desarrollamos el cambio de sitio web del 2011) me permite sentir claramente los mismos tres puntos clave del informe como los reales puntos claves de la poca capacidad de estos medios de avanzar en el desarrollo digital.

Son las cosas que cualquier personaje que este inmerso en el desarrollo de internet, entiende que el usuario digital es un ente mucho mas complejo que un tipo que “cae” en un titular, la forma de acceder al contenido o la experiencia informativa del usuario (junto con la necesidad particular de este) son los puntos fuertes del producto que debes entregar.

Traduciendo libremente, los puntos del análisis son:

  • Una organización interna disfuncional que no conversa (estrategicamente) entre área de negocios y salas de redacción, perjudicando al área digital que queda como jamón de sándwich.
  • Una mentalidad de la época del papel, donde se cree que todo lo importante debe estar en la portada (“Page One”).
  • Un equipo editorial que está como pulpo, ocupado la gestión de las noticias 24/7, tanto que no tienen tiempo para pensar en estrategia, y menos tener capacidad de predicción.

 Me sorprende que los problemas son idénticos …. en NYT, en COPESA o en LN.

Y desde VOX hacen un análisis donde rescato:

¿Cuál es la primera plana? ¿Qué es digital primero?

La primera página de la edición impresa del diario se conoce como la primera plana (Page One) con letras mayúsculas. El informe detalla el grado en que la página uno es el corazón de la rutina diaria de la sala de redacción, con la reunión editorial más importante también se llama la primera plana, y los periodistas y los grupos editoriales que evalúan a sí mismos en su habilidad para anotar PageOne’s . Este sigue siendo el caso a pesar de que digital no es sólo el futuro del New York Times, también es su presente. Audiencia digital de The Times se alimenta de la base de suscriptores del papel, pero el flujo de trabajo editorial sigue siendo pensado (y construido) alrededor de la primera plana y el periódico.

El informe insta a una “primera digital estratégica” y hace hincapié en que esto significa poner, literalmente, una historia en la Internet antes de que aparezca en un periódico impreso. Digital primero es un estado de ánimo en el que el trabajo de la sala de redacción es entregar un producto digital excelente, lo que un equipo relativamente pequeño entonces puede empaquetar como un producto de impresión diaria. Hoy en día es en gran medida a la inversa. Los plazos se estructuran en torno a la velocidad de la impresión, los incentivos están estructurados en torno a la primera plana, y luego los equipos de los productores a construir un sitio web fuera de lo que es realmente un flujo de trabajo de impresión.

Favor lean que esta calentito…… y después nos abrazamos a llorar.

UsaToday: En el camino correcto

No se desde cuando, pero el periódico norteamericano USAToday cambio… y creo que fue una muy buena decisión.

El sitio funciona con responsive design, esta repleto de JS, con una diagramación moderna y lleno de opciones para el usuario (como el selector entre grilla y lista) ó sección del clima y sección financiera, además del botón “Big Page”

Me sorprendió y creo que es uno de los primeros medios que arriesgan con una solución tan contingente.

Ver en este link… 

Nada importa, solo las visitas

Hoy día, recibí en mi trabajo un correo de mi editor pidiendo revisar e incorporar los datos del sitio simce.cl (¿Que es eso?) en el medio donde trabajo, mi respuesta fue que al parecer solo había un tipo de contacto (una muy poco interesante caja de búsqueda que también incorporo en sus artículos LaTercera y Emol), por lo que solo podríamos acceder a ese tipo de “interacción”.

Cuando me enfrento a este tipo de sitios, donde los datos numéricos son la forma de entregar información,  extraño que el sitio fuera mas amable sobre el tema del manejo de datos, del como exponer estos y hacerlos mas “atractivos y humanos”.

image

A nivel “ñoño” esto debería tener criterios de OpenData, una API, por lo menos una posibilidad que permitiera un nivel de ejecución mas profundo, tal vez el manejo de gráficas dinámicas como en un sistema de resultados estadísticos como el Google Analitycs.

Creo que esto se compensa (a nivel de la entrega de información) con un documento donde se cuelgan gráficas y pautas visuales de los temas que contiene, pero estamos hablando del año 2013, estamos hablando de un sitio web con información muy interesante para los padres y la solución para el individuo es un documento.

Ahora, reconozcamos que algunos medios logran hacer muchos artículos (gracias a periodistas que se dedican a “picar”) de este gran filón de datos y la revista Que Pasa, logra hacer uno de sus números con más venta en el año gracias a esto.

Pero yo creo que los datos del SIMCE (información sobre la calidad de la educación en Chile) son lo suficientemente importante como para generar un sistema enfocado en la simplicidad, dinámico, manejable.

image

Independiente de esto, me molesta profundamente soluciones mediocres como la que realizo el Canal #24horas, cadena noticiosa por cable de TVN, la televisora estatal de Chile (bueno, algo de estatal le queda), genero un frame picante donde la web de #24Horas de TVN “enchufa” el sitio de resultados del SIMCE ganando trafico de modo infame. Una solución MEDIOCRE, así de simple.

Pero, bueno… a modo de descargo, puse un alegato en twitter sobre esto ultimo y obtuve 1 RT, creo que nadie me entendió de lo que hablaba y la ulcera producida por ver código sigue creciendo, gratuitamente.