Leer la bibliografía de la materia y la “Guía para el diseño y evaluación de espacios-interfaz”.
Realizar una sinopsis o síntesis conceptual de hasta 200 palabras, donde se fundamente la selección y se enuncien aspectos generales de ambos sitios. Esta sinopsis se publicará en el blog personal a modo de “Introducción” al tema.
Analizar los dos sitios en base a la bibliografía y a la “Guía para el diseño y evaluación de espacios-interfaz”. Este análisis se publicará en el blog personal como “Desarrollo” del tema.
1. Para la resolución de esta evaluación teórica y con el fin de aportar otra mirada al asunto, además de la propuesta por la cátedra en su guía, elegí, del libro El lenguaje de los nuevos medios de comunicación (Manovich, 2006), el capítulo dos, titulado “La interfaz” (p. 111).
2. A modo de introducción:
Al navegar por el blog de la cátedra y por su selección de sitios web aptos para el análisis que se presentará en esta evaluación teórica, me alegró ver a Behance.net entre ellos.
Fue una selección inmediata, pues frecuento el sitio desde hace ya algún tiempo. Behance es una plataforma web pensada para mostrar y descubrir trabajos creativos. Para mi, es una gran red de ideas e inspiración constante a la hora de crear. Su estética e interfaz simple lo hace uno de mis sitios favoritos a la hora de buscar inspiración, al igual que la plataforma en la que desarrollo mi blog: Tumblr.com
De hecho, son una buena combinación: mientras que Behance es una oportunidad de descubrir nuevos talentos de manera un tanto más profesional, Tumblr, por ser (además de una plataforma blog) una red social, los une por sus intereses en carácter de amistad.
Si bien los artistas están floreciendo en otras redes sociales, a mi parecer Tumblr fue en su momento en donde lo pudieron hacer por primera vez, además de el lugar en el que hoy en día nos encontramos en mayor cantidad.
3.1. Analisis: Behance.net
Como comentábamos en la introducción de este trabajo, Behance es una plataforma web pensada para los talentos creativos. Funciona como una gran red de personas que buscan mostrar sus trabajos, así como descubrir el de los demás. Esta pagina web pertenece a la compañía Adobe, y es de acceso gratuito para todo público; miles de ideas y posibilidades se presentan al alcance de la mano solamente a través de un registro simple.
En cuanto a estética, Behance cuenta con un diseño simple y muy claro. No existe en este sitio información de más que pueda abrumar o distraer al usuario de su objetivo. Toda información adicional se encuentra en pequeños botones y pestañas despegables en la parte inferior de la pagina, de modo que no interrumpen con la grilla de imágenes.
Ésta grilla de imágenes es el diseño principal de la interfaz, reforzando la idea de Manovich, que asegura que las nuevas generaciones aceptan mejor las imágenes que la imprenta (p. 130). Según la categoría de imágenes que hayamos elegido explorar (ampliaremos sobre las categorías en el apartado: navegación), estas se despliegan por tema en la pantalla principal. Para recorrerlas, basta scrolear hacía abajo, y una vez que hayamos llegado al final de la pagina, nuevas imágenes se cargarán automáticamente.
La identidad de la compañía está presente en todo momento en modo de botones. Del lado superior izquierdo, el logo de Behance nos lleva a la pagina de inicio con un solo click, no importa que tanto hayamos explorado la interfaz. Además, el logo de Adobe, a quien la compañía Behance pertenece, aparece como hipervínculo a su propia pagina web en el margen izquierdo, tanto en la esquina superior como la inferior. El color azul (#1769ff), identidad de Behance, forma parte del diseño de la interfaz del sitio, en distintos botones y en la marca de destacados que se le da a las obras trending del momento. Sin embargo, la gama de colores de Adobe, entre ellos su característico tono rojo (#ff0000), no forman parte del diseño.
La tipografía utilizada, por otro lado, colabora con el diseño simple y la legibilidad de la interfaz. Se utiliza una tipografía tipo sans-serif, siempre en negro, que ayuda con la jerarquía tipográfica al utilizarse, por ejemplo bold aumentada en punto, en los títulos.
Respecto a la interacción con la interfaz, es de fácil entendimiento para el usuario. Recuperando a Manovich, podemos afirmar que nos encontramos frente a una “interfaz entre el hombre y el ordenador” (p. 119). Si bien el usuario puede ingresar al sitio web con la mera intención de observar y llevarse algunas ideas consigo, Behance ofrece mucho más que ello. A un solo click en el botón “vacantes”, el usuario puede integrarse con la interfaz. Este apartado se trata de ni más ni menos que ofertas laborales, al rededor de todo el mundo y para todo tipo de rubros.
El lenguaje que se usa, por otra parte, es apto para el entendimiento de todos. Puede llegar a complejizarse en la descripción de las obras, escritas por cada unos de los usuarios, pero esto no presenta una mayor dificultad si se tiene en cuenta que la pagina web está creada para el intercambio de ideas entre creativos, lo que nos deja suponer que los términos utilizados en ésta son de conocimiento común entre quienes la frecuentan.
Siguiendo la Ley de Fitts, los botones y títulos, que deben llamar la atención del usuario, tienen un tamaño mayor que el resto de los elementos y tipografías de la interfaz. Tal es el ejemplo de los botones de categorías, que, además de contar con un tamaño mayor a los demás, cuenta con un lugar privilegiado en la parte superior del diseño de interfaz, siendo uno de los primeros elementos que éste nota al ingresar al sitio.
Cabe destacar además, que la latencia es reducida. Cada vez que se cambia de pagina explorando la interfaz, aparece en pantalla una ruedita, del color azul de la compañía, girando sobre si misma a modo de reloj de arena, hasta que la pagina solicitada hubo cargado sus datos y este lista para navegarse.
Behance cuenta además con una versión para dispositivos móviles, así como una aplicación disponible para sistemas iOS y Android, en las cuales profundizaremos a continuación en el apartado navegación.
La navegación por la interfaz de Behance cambia según el dispositivo que estemos utilizando para ingresar al sitio web.
En cuanto a el ordenador, la interfaz es clara, intuitiva y muy dinámica, con la presencia de la grilla de imágenes. La navegación es muy intuitiva, de modo de que aunque sea la primera vez del usuario en el sitio, lo mas probable es que pueda entenderlo enteramente en cuestión de pocos minutos.
Al navegar desde el teléfono celular, contamos con dos experiencias distintas, la pagina web para dispositivos móviles y la aplicación, pero cualquiera sea la opción que elijamos, la navegación es muy distinta a la versión de ordenador. En ambos casos, la grilla desaparece y se transforma en una sola fila de imágenes explorable a través del scroleo. Sin embargo, allí terminan las similitudes entre ambas opciones móviles.
La versión web para celulares, no tiene una respuesta tan rápida (de hecho, es muy lenta) a diferencia de su versión para ordenador. El espacio de la pantalla se reduce, y por tanto también el espacio de la pagina web, y esto dificulta la navegación; ahora hay que moverse hacia los costados para encontrar las opciones, que en la versión de escritorio estaban desplegadas, y los menús escondidos se hacen más habituales. El primer botón visible al ingresar a esta versión se despliega solo ante nosotros; es un hipervínculo a la tienda, para descargar la aplicación.
La aplicación de Behance esta disponible tanto para sistema Android como para iOS y mejora mucho la experiencia de navegación por la interfaz. Aunque el espacio de pantalla lógicamente también es mas reducido al del ordenador, al estar la aplicación optimizada para teléfonos celulares, la respuesta no sufre las consecuencias; es igual de rápida y dinámica que la versión original. El menú se encuentra desplegado, esta vez en la parte inferior de la pantalla, e incluso cuenta con nuevas opciones de navegación, como es la búsqueda por fotos.
3.2. Analisis: imd-giulianacasarin.tumblr.com (blog)
¿Qué es imd-giulianacasarin?
Esta pagina web es un blog desarrollado en la plataforma social de microblogueo Tumblr, con el fin de servir como bitácora para la cátedra Introducción a los Medios Digitales (IMD). En este blog se presentaran los trabajos prácticos pertenecientes a la misma, así como el progreso que se vaya haciendo a lo largo del cuatrimestre. Por y para esa razón, es que tiene carácter universitario.
Respecto a la estética, y pensando en resaltar el contenido del mismo sin distraer al usuario, mi blog cuenta con una interfaz minimalista y clara.
Para lograr este fin, a la hora de personalizar la interfaz, se opto por un tema diseñado especialmente para soportar entradas con largos bloques de textos, ordenadas una debajo de la otra por según su antigüedad de publicación. Además, se tuvo en cuenta que el tema elegido contase con la cantidad de menús categoriales necesarios para la organización de los trabajos prácticos de manera ordenada.
Mi identidad, como creadora del blog, está presente en todo momento. En la página principal, se puede ver una fotografía mía, a modo de avatar, así como mi nombre, a modo de titulo del blog, en todo momento. Al realizar la elección de colores opte por integrar solamente un color en un tono claro (#ff8f8f), que fuera a juego con la imagen de portada y acompañase al blanco y negro de los demás elementos sin romper con la armonía y simpleza del sitio web.
La tipografía, al igual que en la interfaz de Behance, colabora con el diseño simple y la legibilidad, y es del tipo sans-serif. Se utiliza bold en el titulo, para resaltar su jerarquía y en el tono rosado de la gama de colores en la barra de menú, para diferenciarla de la descripción del blog, por encima de esta.
Para el usuario, ya sea el profesor que me ha sido asignado o algún compañero de la cátedra, la interacción con la interfaz es muy simple. De hecho, esta misma interfaz es la que maneja toda la plataforma (Tumblr), y resulta de lo más practica a la hora de explorarla. Por ese motivo la migración de este blog, antes situado en la plataforma Wordpress, cuya interfaz resultaba demasiado compleja para el estilo sencillo que estaba buscando lograr.
El lenguaje que se utiliza, si bien no es simple, es de fácil comprensión para todos los usuarios. Esto pudo lograrse gracias a los ejemplos, las metáforas y los elementos cinematográficos insertados en el texto (Manovich, p. 131).
Los elementos de la interfaz que responden a la Ley de Fitts, son merito de la compañía Tumblr; a la hora de editar la apariencia del blog los botones no son modificables, asi como tampoco el tamaño del titulo del blog, sin embargo, a fin de llamar la atención del usuario, tiene mayor tamaño que el resto de los elementos de la interfaz.
(ver: fotografía ilustrativa de la interfaz al comienzo de este punto)
Al igual que Behance, Tumblr cuenta con una versión para dispositivos moviles además de una aplicación disponible en los sistemas operativos iOS y Android.
Una vez más, la experiencia de navegación por la interfaz de Tumblr y de mi blog, cambia según el dispositivo que se opte para ingresar al mismo. Esta vez, sin embargo, la experiencia es optima desde el celular.
Hay que tener en cuenta, a la hora de analizar la navegación, que además de ser una plataforma de microbloging, Tumblr es una red social, y como tal está optimizada para teléfonos celulares,así como las demás.
Es por esta razón que a la hora de ingresar al blog desde el ordenador, este parece estar aún en proceso de construcción. Si bien la navegación es intuitiva y su respuesta rápida, no es posible concentrarse en esos aspectos positivos, pues la interfaz es estéticamente muy molesta: las columnas de texto son angostas, los elementos y botones parecen ser muy pequeños e incluso las fotografías ocupan solo una porción de la pantalla.
Así, la lectura de los contenidos se vuelve lenta y tediosa para el usuario, y el texto nunca parece quedar lo suficientemente integrado a la interfaz del sitio para mi (el creador).
La navegación de la interfaz mejora cuando se ingresa al sitio desde el teléfono móvil, desde cualquiera de sus dos versiones. La interfaz se vuelve dinámica, los contenidos se ajustan a la pantalla y la lectura se hace más ágil.
Para elegir entre la aplicación o la versión para dispositivos móviles, hay que pensar desde que posición se va a ingresar y navegar la interfaz del blog.
Si se es un usuario, la aplicación es optima. El menú es claro y muy similar al de otras redes sociales con las que seguro ya estará familiarizado, la respuesta del sistema es rápida y además cuenta con un acceso directo al escritorio y notificaciones que vienen muy bien.
Si, en cambio, se va a ingresar al blog en posición de creador de contenido, es recomendable tener a la mano (como herramienta adicional) la versión para dispositivos móviles, a la cual se ingresa desde el navegador. Esta recomendación surge a raíz de que editar el aspecto y el orden de las entradas del blog desde la aplicación, es una pesadilla.
Gracias a esta evaluación, además de un proceso de aprendizaje, pude hacer un proceso crítico. A medida que me iba informando, con la lectura de la guía propuesta por la cátedra y la bibliografía elegida para la resolución de estas consignas, abrí varias veces la pestaña de “cambiar aspecto” de mi blog.
Aún así, y aunque a partir de ahora siempre veré los distintos sitios de Internet como espacios habitables, siento que mi mirada al respecto aun puede ampliarse más, para que este blog sea un sitio de navegación, interacción y diseño de interfaz óptimos.
