Aquí les dejo un sitio web para mirar y analizar:
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.
Esta división del campo ha sido una buena decisión del diseñador en pos de organizar el contenido y clarificar el manejo de la interfaz.
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
