T13 sin respeto por sus mismos usuarios

El portal de capacitación de SERCOTEC esta aquí , no sea tonto y no visite Teletrece a ver el portal oficial del gobierno en un iframe (ventanita) dentro del sitio de ese “medio”.

sercotec001

Canal13 – Teletrece hace un articulo sobre este tema y “enchufa” el sitio oficial de SERCOTEC en su pagina, sin mencionar donde esta este portal, antes lo había hecho 24horas.cl con un resultado SIMCE pero a su favor, es que era el 2013.

En chileno, se limpian el poto (no se alarme, es una palabra de origen quechua-mapuche) con todo el trabajo de diseño e interacción con el sitio SERCOTEC capacitación. Y bueno, no es que el sitio de oficina técnica estatal sea una inspiración en experiencia de uso, pero esta área tiene un poco mas de amor que el portal inicial del servicio, se nota.

Sin respeto por sus mismos usuarios.

Lo de Canal13 – T13 me parece muy grave, es ridículo cómo intentan engañar a la gente para obtener “visitas” para justificarse como un “exitoso” portal de noticias. Es que son un “medio de comunicación” y su deber es “informar”…. no “enredar” al usuario, suma que SERCOTEC apunta a un público que comúnmente no maneja estos temas, gente que tiene un “negocio” y quiere aprender a ser “empresa”, gente que no tiene mucho tiempo para aprender, gente que necesita un financiamiento o acceso a las capacitaciones que ofrece esta oficina, que tiene una gran brecha digital, pero a Canal13 – T13 le importa un pepino el usuario final.

sercotec002

No me extrañaría que la genial idea es de algún seguidor de esos grupos de fanáticos integristas conocidos como “áreas comerciales” en las empresas.

T13 debe aprender a evitar usar trucos baratos y tener más presente su misión informativa.

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

Interacciones UI 2014

En el mundo de pantallas accesibles y ubicuas, donde cada día es mas fácil y accesible comunicar vía una imagen animada que frente a una imagen estática, los diseñadores debemos tener cada vez mas en cuenta detalles de animación, del “modo” de mostrar la información, del “cómo” entra esta a nuestras pantallas, etc.

Los chicos de Ramotion tienen esto claro y realizaron una selección de las interacciones (animaciones) mas llamativas del año pasado en aplicaciones móviles.

El trabajo esta en este enlace de Behance.

ui0001

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.

#YouTubeKids (Apps)

La aplicacion para iPad enfocada en los contenidos para menores de #YouTube fue un trabajo conjunto de Johanne Bruun Rasmussen & Steffen Christiansen (Arte), Emil Bjerregaard Juul & Steffen Christiansen (UI/UX), Evan B. Anthony & Josh Parker (Animación) y Megan Potter (Dirección del proyecto).

El objetivo era lograr una aplicacion atractiva y entretenida para pre-escolares y niños pequeños, con los consiguientes filtros para su edad y la posibilidad de control paternal.

0ba75fa55f85fb6bd247c224ec8a7c48

Esto se cumple y hay mucho de entender el mundo del usuario final en la creacion de este software/objeto, hay mucho de lenguaje de juegos en el.

Hay un excelente demo en Behance, que pueden visitar desde acá.

Para descargar la aplicación para iPad, clik aquí.