Wireframes: qué son y para qué sirven

En este mundillo nuestro usamos muchos anglicismos que a veces se autodescriben pero a veces no aportan información sobre lo que son.

Wireframes, mockup, prototipo, esquema o plano de página… tienen muchos nombres aunque son poco conocidos por el público en general y por los entornos de desarrollo web poco profesionales. 

Los wireframes (nosotros siempre usamos éste término, costumbres…) son la primera aproximación a lo que será la web, imprescindible en la fase de conceptualización del proyecto, sobretodo si es un poco complejo. Es un esquema en el que no se aplica (y esto es muy importante tenerlo claro) la propuesta gráfica, ya que ésta se hace en función de las necesidades reflejadas en el prototipo.

Los wireframes son, sobretodo, un esquema de la interacción en el que se detallan los elementos que el usuario va necesitar para realizar las acciones que planteamos para nuestro sistema: el espacio de acceso al área privada, el botón para añadir un producto a la lista de favoritos, el formulario de finalización de compra, el espacio dónde se va a reproducir un video…

De ésta manera nos aseguramos de que no se nos pase por alto ningún elemento necesario para que, en la fase de diseño, todos guarden coherencia gráfica entre ellos (que no haya pegotes ni elementos metidos con calzador en el diseño final). La idea es que los wireframes sean exhaustivos y que recojan los itinerarios de interacción: el usuario hace click aquí y se abre un desplegable, cuando escoge una opción ocurre esto o aquello… y así sucesivamente.

La idea es plantear ya la arquitectura de la información del site: qué información va contener, de qué tipo va a ser (texto, foto, video, descargas…) y dónde la vamos a encontrar, y las rutas que estableceremos entre las diversas páginas (al hacer click aquí se abre tal o cual página), planificándola de modo que el usuario la encuentre con la máxima facilidad es decir, nos permiten definir al detalle la experiencia de usuario.

En el caso de proyectos web complejos son una herramienta fundamental, para no encontrarnos (ni desarrolladores ni cliente) con que a mitad del desarrollo y con el diseño cerrado hace tiempo, tenemos que añadir elementos, lo que puede resultar costoso una vez el proceso ya está en marcha.

Para el cliente, a veces significan un esfuerzo de abstracción ya que a menudo los wireframes son esquemas poco vestidos y centrados en organizar información, más que en quedar bonitos. Aunque nosotros somos de los que preferimos darle un poco de vidilla y, aunque sea en banco y negro, agregar imágenes dónde se supone que habrá imágenes y aunque sea, lorem ipsums donde habrá texto justamente para ayudar a nuestros clientes a hacerse una idea de cómo estamos planteando su web, pueden ser incluso bocetos sobre papel.

Los wireframes son una herramienta de diseño funcional y, sobre la información que éstos aportan, trabajará el equipo de diseño web.

La pregunta al final es ¿por qué se hacen maquetas y prototipos? Seguro que nuestros amigos especialistas en el tema Fuhtah :), responderían con más claridad a la pregunta, pero en el caso de una web, antes del toque mágico del diseño, es fundamental definir como se va a estructurar la información para que el usuario la encuentre y la comprenda, el flujo de navegación, es decir, plantear una estructura que ayude a comprender al usuario la relación existente entre los enlaces es un punto importantísimo ya que una web puede tener diversos itinerarios de navegación y, finalmente, definen la interfaz del sitio: qué elementos (menús, botones, campos para email, teléfono, desplegables, selección múltiple…) van a estar presentes y como se organizaran, priorizando la usabilidad y la eficacia de éstos.   

Así son los wireframes y así se los hemos contado. Si tienen algo que añadir, ¡cometen por favor!

La entrada Wireframes: qué son y para qué sirven aparece primero en Anfibic.

¡Bendita usabilidad!

Durante los años ’90 se desarrollan los primeros navegadores gráficos que permitían a los usuarios navegar por la web. El recorrido para que cualquier computadora pudiera conectarse a la WWW, presentada al mundo en 1991, será largo pero a finales de esta década su uso, si bien aún escaseaba a nivel doméstico, se extendía sin freno camino de convertirse en el entorno que hoy conocemos. Para hacernos una idea del crecimiento de internet, un dato: en 1.992 apenas existían 10 páginas web mientras que en actualmente existen más de 1.000 millones que no paran de aumentar a cada segundo (en internet live stats podemos ver un contador de las web que están online y cómo se incrementa su número en tiempo real, puf! ).

Por aquel entonces, los usuarios teníamos que enfrentarnos a interfaces como ésta de Altavista (1999, fuente Wayback Machine); nos parecían maravillosas y lo eran (internet existía!).

La evolución del desarrollo web a todos los niveles (front y backend) ha sido espectacular y en la actualidad, con paciencia y un equipo experto al teclado, podemos lograr que nuestra web haga prácticamente cualquier cosa.

Los cambios que la tecnología (hard y soft) y el metaconocimiento acumulado durante las pocas décadas de vida que tiene aún la red, ha permitido a diversos perfiles profesionales dar un giro fundamental en la orientación de las páginas web. Hasta que las restricciones tecnológicas no se lo han permitido, los diseñadores web estaban obligados a ceñirse a un estrecho corsé y, además, trabajar en un entorno desconocido, sin herramientas específicas, construyendo corpus de conocimiento y metodología sobre la marcha (lo que viene a ser un pionero, vaya). Aún tendrán que pasar unos años para poder disfrutar de diseñadores web nativos sin poca, o ninguna, relación con el diseño gráfico, y plenamente conscientes de lo que se le puede y se le debe pedir al código.

Pero cuando el corsé se aflojó y la creatividad pudo soltarse la melena, y no solo la de los profesionales, también la de cualquier usuario de la red, hubo una especie de fiebre por el gif, el color y la combinación de mínimo cinco tipografías. Normal, todos los principios son una etapa experimental. Pero hubo un tiempo en que las webs eran o un austerísimo tostón o un festival de colores y movimiento. Lo difícil en un entorno u otro, era encontrar lo que uno buscaba. Aunque estábamos acostumbrados: en aquel entonces se navegaba así, era una aventura encontrar información sobre algo en particular. 

Al principio las webs se concebían como la interface de un sistema de carpetas llenas de información, sobrio y ordenado según la estructura mental del equipo de desarrollo. Tiempo después, llegaron los gifs y los banners por doquier (si no te acuerdas o no has visto cómo era aquí te dejo un ejemplo La peor web del mundo de todos los tiempos), culminando en una etapa mucho más digna: la del Flash.

Lo curioso es que las empresas y los desarrolladores se esforzaban mucho en clasificar y/o animar el contenido, pero costó unos buenos años que se dieran cuenta que lo más importante de todo siempre, siempre, siempre es la misma variable de la ecuación: el usuario. Un día las webs dejaron de mirarse el ombligo y miraron más allá, gracias a la tecnología que las dejó levantar la cabeza. Las compañías volcaban su información corporativa en su plataforma online, como si de un catálogo o de  una especie de contestador automático muy completito se tratara. Hasta que algún observador avispado se dio cuenta de lo obvio: la mejor manera que tenemos de presentarnos digitalmente (y presencialmente?) a alguien, es poniéndoselo fácil.

Todo el conocimiento que uno pueda tener de su organización, no es solo una rica fuente de información también lo es, inevitablemente, de distorsión. Paradójicamente, ocurre algunas veces que cuanto más sabemos de algo, más incapaces somos de explicarnos con claridad y para todos los públicos. Hay que ponerse en la piel del otro y a veces nuestra implicación, simplemente no nos es de ayuda.

Cada vez sabemos más del comportamiento del usuario en una web lo que nos permite allanarle al máximo el camino. Y el grado en que se consigue viene a ser su índice usabilidad.

La usabilidad se refiere a la fluidez en la interacción que conseguimos de forma inmediata con una herramienta, como por ejemplo una web. ¿Cómo de fácil o difícil resulta encontrar un contenido concreto, un producto, completar el proceso de compra, contactar con la empresa, acceder al área privada…? Y ese largo etcétera que puede llegar a ser una web.  

La usabilidad es inversamente proporcional a la necesidad de aprendizaje por parte del usuario: cuánto menos tiene que aprender a usar una herramienta (web, aplicación, editor de texto…) más usable demuestra ser ésta.

¡Ah, la usabilidad! Que sin duda, se merece un post -o dos- para ella solita.

¡Saludos!

La entrada ¡Bendita usabilidad! aparece primero en Anfibic.

Usabilidad, pasado y presente

Durante los años ’90 se desarrollan los primeros navegadores gráficos que permitían a los usuarios navegar por la web. El recorrido para que cualquier computadora pudiera conectarse a la WWW, presentada al mundo en 1991, será largo pero a finales de esta década su uso, si bien aún escaseaba a nivel doméstico, se extendía sin freno hasta convertirse en el entorno que conocemos hoy en día. Para hacernos una idea del crecimiento de internet unos datos: en 1992 apenas existían 10 páginas web mientras que en actualmente existen más de 1.000 millones que no paran de aumentar a cada segundo (en internet live stats puedes ver un contador de las web que están online y ver como se incrementa su número a tiempo real, impresionante).

Por aquel entonces, los usuarios teníamos que enfrentarnos intefícies como ésta de Altavista (1999, fuente http://web.archive.org/ ); nos parecían maravillosas y lo eran.

La evolución del desarrollo web a todos los niveles (front y back end) ha sido espectacular y en la actualidad, con paciencia y un equipo experto al teclado, podemos lograr que nuestra web haga prácticamente cualquier cosa.

Los cambios que la tecnología y el metaconocimiento acumulado durante las pocas décadas de vida que tiene aún la red, ha permitido a diversos perfiles profesionales dar un giro en la orientación de un site. Hasta que las restricciones tecnológicas no se lo han permitido, los diseñadores web tenían que ceñirse a un corsé muy ajustado y, además, hay que tener en cuenta que ninguno de ellos trabajaba sobre un entorno conocido ni con herramientas específicas. Costaría aún unos años disponer de diseñadores web nativos y no reciclados del diseños gráfico, y plenamente conscientes de lo que se le puede pedir al código.

Pero cuando el corsé se aflojó, se dió rienda suelta a la creatividad y de qué manera! Quizás incluso un poco demasiado. Normal, todos los principios tienen sus etapas experimentales, pero hubo un tiempo en que las web o eran un austerísimo tostón o eran un festival de colores y movimiento. Lo difícil entre una cosa y la otra era encontrar lo que uno buscaba. Porque al principio las webs se concibieron como si la interface de un sistema de carpetas se tratara, sobrio y ordenado según la estructura mental del equipo de desarrollo. Después llegaron los gifs y los banners por doquier (bonito ejemplo http://ift.tt/wcNO1q), culminando en una fase mucho más digna: la del Flash.

Lo curioso es que las empresas y los desarrolladores se esforzaban mucho en clasificar y/o animar el contenido, pero costó unos buenos años que se dieran cuenta que lo más importante de todo siempre, siempre, siempre es la misma variable de la ecuación: el usuario.    

Las compañías volcaban toda su información corporativa en su plataforma online, como si de un catálogo se tratara. Hasta que algún observador avispado se dió cuenta del error de concepto: lo más importante de una web no es la organización que representa sino el usuario frente a la web.

No importa  si tu entras en tu web y está todo organizado como a tí te gusta. A veces, aunque cada vez ocurre menos, los únicos que entienden la disposición de los contenidos de su web, son las personas que trabajan en la organización porque intentan reproducir su estructura corporativa. Cada vez sabemos más del comportamiento del usuario en una web lo que nos permite allanarle al máximo el camino. Esto se traduce en una especie de índice que se ha convertido en imprescindible: la usabilidad.

La usabilidad se refiere a la facilidad que nos presenta una herramienta o, en nuestro caso, una web en la interacción. Por ejemplo encontrar un contenido concreto, un producto, completar el proceso de compra, contactar con la empresa, acceder al área privada y ese largo etcétera que puede llegar a ser una web.  

La usabilidad es inversamente proporcional a la necesidad de aprendizaje por parte del usuario: cuánto menos tiene que aprender a usar nuestra aplicación más usable demuestra ser ésta.

Unos retazos de historia de internet y una pinceladas de usabilidad que, sin ninguna duda, se merece un post -o dos- para ella solita.

Pronto, prometido.

¡Saludos!

La entrada Usabilidad, pasado y presente aparece primero en Anfibic.

Hola from Barcelona!