Uso de Esquemas o Wireframes
Herramienta de usabilidad en el diseño de Interfaces

Lic. Danny Murillo
Investigador de CIDITIC
Universidad Tecnológica de Panamá

En un sistema donde se necesite crear interfaces para ser usadas por el usuario es conveniente que el equipo de trabajo tenga idea de cómo serán estructuradas las interfaces, en este proceso hay diversas disciplinas que intervienen, entre ellas se encuentra el Arquitecto de Información (AI) y el Diseñador de Interfaces de Usuario.

El Arquitecto de Información se encarga de definir la organización, etiquetado, navegación y sistema de búsqueda de un sitio web, elementos que ayudan a los usuarios a encontrar y gestionar la información de manera efectiva.

El diseñador de Interfaz de usuario (UI) se centra en la anticipación de lo que los usuarios podrían tener que hacer y asegurarse de que la interfaz tiene elementos que son de fácil acceso, se puede entender y las puede utilizar para facilitar esas acciones.

El Arquitecto de Información debe realizar una diagramación para especificar cuál será la organización, estructura, funcionamiento y navegación del sitio. Los diagramas que se pueden utilizar son de dos tipos: los planos, que son diagramas de organización y funcionamiento y las maquetas, que son diagramas de presentación.

Que son los esquemas o wireframes Un wireframes es una ilustración en dos dimensiones de la interfaz de una página que se centra específicamente en la distribución del espacio y la priorización de contenidos, las funcionalidades dispo-nibles, y compor-tamientos esperados. Los Wireframes también ayudan a establecer relaciones entre distintas páginas de un sitio web, concepto que se conoce como Wireflows (wireframes+Flowcharts).

El wireframes además, es el puente que une el Arquitecto de Información con el Diseñador de Interfaces ya que pasa de un concepto solo estructural de un mapa de contenidos (Planos) a un concepto visual del Diseño de la interfaces (Esquema). Los wireframes son una herramienta que permite hacer diseños simplificados, esta forma de trabajo obliga a los participantes del proyecto a definir en forma anticipada los elementos que se deben incorporar en la Interfaz, colaborando con la toma de decisiones acerca del contenido y la interacción.

El hecho de utilizar wireframes en el proceso de diseño permite llevar a cabo pruebas tempranas de las interfaces y determinar si cumplen con los objetivos que se espera, los wirefarmes sirven también para que el cliente y el diseñador tengan el mismo esquema mental de lo que va a realizarse, en algunos casos elementos como percepción y emociones del usuario obligan a realizar cambios en el esquema.

Un detalle importante de los wireframes es que no es realmente un diseño por lo que se evita elementos que puedan distraer la aquitectura de contenido como: colores, tipografías, imágenes, textos reales, esto ayuda a que el proyecto no se retrase por falta de estos elementos.

Tipos de Wireframes Los Wireframes pueden variar tanto en su producción, a partir de bocetos en papel a imágenes por computadora elaborado y en la cantidad de detalles que transmiten.

Wireframes de baja fidelidad, son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, de tal manera que implementan aspectos generales del sistema sin entrar en detalle.

Wireframes de alta fidelidad (mockup o prototipo funcional), con los que se representan aspectos más precisos. Sirven, por ejemplo, para detallar el proceso interactivo global de una o varias tareas concretas. Son prototipos o maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.

Ventajas

• Las correcciones son objetivas, basadas en contenidos y funcionalidad , no en diseño.

• Define que quiere el usuario y cuales con sus objetivos.

• Se reduce los tiempos de trabajo y gastos involucrados en el proyecto.

• Permite la comunicación fluida entre el equipo de trabajo y los usuarios.

• Permite identificar problemas que puedan presentarse en el desarrollo.

• Como es una estructura simple, permite al diseñador elaborar diferentes interfaces.

Herramientas digitales para hacer wireframes Aplicaciones de escritorio: Axure , Balsamiq Mockup, Keynote, Adobe Firework Herramientas Online: Moqups, Hotgloo, Cacoo, Protoshare, Gliffy, Mockflow.

Los Wireframe muestran de forma visible la arquitectura de información de un proyecto web o sistema, este proceso ayuda creando estructuras visuales que permite una eficiente conversación entre el usuario y el equipo de trabajo sobre las interfaces antes de construir el sitio web real, minimizando el tiempo desarrollo y en muchos casos el costo del proyecto.