Se trata de esta interfaz:
http://www.seedmagazine.com/ui09/
para acceder a los contenidos de esta web:
http://www.seedmagazine.com/
pero de forma más visual, novedosa y experimental, si se quiere.
La interfaz:
El desarrollo de la interfaz del sitio no es perfecta, de hecho tiene varias fallas que saltan a la luz al clickear y mover rápidamente, pero nos sirve para analizar un par de cuestiones importantes para nuestra cursada.
Noten, desde un principio, cómo el campo está dividido en tres áreas que se controlan de forma diferente y que interactúan y se modifican entre sí:
- El sector de arriba contiene las tags y permite ir viendo cuáles de las noticias se corresponden con cada una.
- El sector central contiene las mentadas noticias.
- El sector de abajo permite suscribirse a la revista y controlar el nivel de zoom (es decir, de acercamiento) con el que veo el segmento central.
Interacción por medio de roll-over:
Gran parte de la interacción con el sitio pasa por el evento de usuario denominado roll-over en ActionScript.
La parte superior de la pantalla, que contiene las tags, reacciona ante la presencia del cursor mostrando las tags gradualmente a medida que nos acercamos al borde más alto de la pantalla, esto sucede de manera gradual y matemática de acuerdo a la posición del cursor. Por debajo de la palabra que identifica cada tag, aparece un rectángulo de color cuyo largo responde tanto a la cercanía del cursor, como al largo de dicha palabra. Esto nos ayuda a ver no sólo la etiqueta a la cual estamos apuntando, sino a las más cercanas; a medida que las etiquetas quedan más lejos del cursor, el rectángulo de fondo pierda altura y se va desvaneciendo (lo mismo que la tipografía).
En el segmento central de la pantalla, a medida que hacemos roll-over sobre una noticia u otra se van prendiendo las tags que la caracterizan, de forma tal que sepamos rápidamente a qué grupos temáticos/taxonómicos pertenece cada una sin tener que acercarnos explícitamente.
Interacción por medio de drag (arrastre):
El sector central de la pantalla puede draggearse (arrastrarse presionando el mouse), así como también el slider de zoom en la parte inferior derecha para acercarnos o alejarnos.
En el caso de los contenidos, vemos cómo se puede jugar con la inercia si se los suelta cuando están todavía en movimiento.
El color en la codificación:
A cada tag se le corresponde un color, y están organizados como el espectro visible de la luz, de rojo a azul, pasando por los tonos intermedios (a grandes rasgos: amarillo, verde y cyan).
(Nota fuera de tema: es curioso cómo el color magenta no se encuentra de forma natural en el espectro de luz visible, ya que las longitudes de onda del rojo y del azul no son contiguas, por lo tanto no tiene una longitud de onda propia sino que depende de la superposición de rojo y azul.)
El sonido en la codificación:
La función del sonido en la codificación cobra protagonismo, cuando comprendemos que a cada longitud de onda de la luz (de color) se le corresponde una frecuencia de sonido (más agudo, o más grave). Definitivamente una relación inteligente teniendo en cuenta que tanto en el caso de la luz (color) como en el del sonido, nos encontramos hablando de ondas.
No sólo se escuchan las diferentes frecuencias cuando se pasa el cursor por las tags (en este caso en orden), sino que también se escuchan cuando nos posamos sobre alguna de las noticias, y las tags correspondientes se encienden (en este caso, no las escuchamos en orden, lo que genera una rica morfología sonora futurista al estilo Star Trek).
Animaciones funcionales:
Tanto el zoom in como el out están animados de forma tal que el usuario se ubique fácilmente y entienda que está ante los mismos contenidos, y que no se trata de un cambio de pantalla.
¿Podrán hacer otros aportes? ¡Dejen comentarios si tienen ideas!
Saludos!
Entradas
No hay comentarios:
Publicar un comentario