Wireframes

Literalmente wireframe = alambre. El término deriva de los esqueletos (habitualmente de alambre) que utilizan los escultores y modeladores para realizar esqueletos tridimensionales que realizan para modelar todo tipo.

En el contexto IPO, tanto el nombre como su significado no distan mucho de la definición anterior.

En el contexto del prototipado o diseño de interfaces de usuario, nos referiremos a wireframes (o blueprints) como una guía visual que representa el esqueleto de las interfaces del sistema interactivo que estamos diseñando. Dicho esqueleto suele tener una forma final de “estructura metálica” que muestra el diseño esquemático de la interfaz o la disposición (también esquemática) de los elementos de la arquitectura de la información del sistema interactivo.

El wireframe por lo general carece de características de detalle como el estilo tipográfico, el color o los gráficos; cómo en casi todos los prototipos la atención se centra principalmente en la funcionalidad, el comportamiento, y la disposición de los contenidos. En otras palabras, se centra en “what a screen does, not what it looks like” (Brown, 2011).

La técnica de construcción de wireframes (wireframing) suele seguir en ciclo evolutivo de la técnica de prototipado de un sistema interactivo. Así pues,

un wireframe suele iniciarse con un prototipo de baja fidelidad que fácilmente evoluciona hasta prototipos de (casi) alta fidelidad.

En los últimos años, esta técnica ha cobrado especial relevancia al ser una de las más utilizadas durante el proceso del diseño de la interacción y de la arquitectura de la información de los sitios y sistemas web (de ahí que no es extraño encontrar bastantes referencias que directamente hablan de la técnica de Website wireframe).

Los wireframes se centran en:

  • El tipo de información que se muestra
  • La gama de funciones disponibles
  • Las prioridades de la información y las funcionalidades
  • Las forma de visualizar ciertos tipos de información
  • El efecto de representar diferentes escenarios de interacción en la interfaz

El wireframe conecta la estructura de la arquitectura de la información a la superficie, o sea, al diseño visual de la interfaz.

En un proceso de Diseño Centrado en el Usuario, la creación de “wireframes iterativos” o evolutivos es una forma efectiva para realizar prototipos rápidos de interfaces.

Ejemplos

wireframe creado con la aplicación Balsamiq Mockups
wireframe creado con la aplicación Balsamiq Mockups
wireframes para interfaces de dispositivos de “pantalla pequeña”
wireframes para interfaces de dispositivos de “pantalla pequeña”

A digital skeletal wireframe versus a detailed web page wireframe

Otros buenos ejemplos encontrados en Internet:

Adecuación a diferentes situaciones

El capítulo 5 (pág. 273‐292) del libro (“Effective Prototyping for Software Makers”. Michael Arent, Jonathan Arnowitz, and Nevin Berger. Elsevier, Inc. 2007) contiene una detallada explicación de la técnica del wireframing y de todas sus características.

De dicho capítulo se extrae la siguiente tabla que relaciona la adecuación de esta técnica con los diferentes grados de fidelidad de los prototipos:

wireframe content and fidelity matrix

La matriz de la figura anterior relaciona el grado de adecuación entre el contenido del wireframe con las características del prototipo.

Referencias utilizadas

Otros enlaces de interés

Using Proto-content for a Better User Experience, by Rob Mills on January 12, 2016 in Content Strategy

Y algunas herramientas

A %d blogueros les gusta esto: