Usabilidad web: Arquitectura de información y wireframes

En esta entrada voy a hablar de un concepto importante para todas las personas relacionadas con el mundo del diseño y la usabilidad: Los wireframes o prototipos.

Pero antes de empezar, toca hacer una pequeña introducción sobre los wireframes. El primer paso que hay que dar para llevar a cabo los wireframes es la representación mediante diagramas para establecer el contenido de la interfaz y la estructura que contiene. Sirve para la propuesta del producto final.

 

 

La definición de Arquitectura de Información la acuñó Richard Saul Wurman en 1975. La define como:

El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información

En la Arquitectura de Información existen dos tipos de diagramas: Planos o mapas web, (blueprints) y maquetas (wireframes).

A los planos o mapas web sencillos se les denomina diagramas de organización y funcionamiento. Estos diagramas tienen un objetivo: mostrar cuál será la estructura del sitio web y su flujo de navegación.

A las maquetas se les denomina diagramas de presentación, donde podemos hablar de diferentes tipos de prototipos.

Los prototipos pueden tener múltiples niveles de detalle y pueden dividirse en dos categorías en términos de fidelidad: Baja fidelidad y alta fidelidad.

  • Baja fidelidad: Se caracteriza por un dibujo en bruto o un boceto rápido, los wireframes de baja fidelidad tienen menos detalles y son rápidos de producir. Estos wireframes ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido. Para dibujos sencillos o de baja fidelidad, los prototipos en papel es una técnica común. Como estos son sólo representaciones, las notas al margen para explicar comportamientos son útiles.

Ejemplo de ello son los sketches, que son bocetos rápidos para transmitir cualquier idea. Es una forma eficaz de comenzar el prototipado de un sitio web, pues permite trabajar ágilmente con varias ideas y esquematizar las páginas.

  • Alta fidelidad: Los wireframes de alta fidelidad o maquetas son usados a menudo para documentar, porque ellos incorporan un nivel de detalle que se acerca más al diseño final de una página web, pero toma más tiempo para ser creado.

Algunas herramientas permiten incorporar interactividad, incluyendo animación en Flash, y tecnologías de presentación web como HTML, CSS, y JavaScript.

¿Qué son los wireframes (o prototipos)?

Un wireframe o prototipo es un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de un sitio web. Es una representación gráfica del contenido del sitio web.

El objetivo de estos es definir el contenido y la posición de los diversos bloques del sitio web. Esto incluye los menús de navegación, bloques de contenido, botones, formularios, listas…etc Además, te permite ver cómo interactuarán estos elementos entre sí.

Propósitos de los wireframes

Los wireframes tienen varios propósitos:

  • Garantizar que el sitio o la aplicación se desarrolle de conformidad con los fines acordados. La creación de wireframes establece expectativas sobre cómo se implementarán las funciones, mostrando cómo funcionarán, dónde estarán ubicadas y cuántos beneficios ofrecerán. Se puede eliminar una función porque no se adecúa a los objetivos de tu página web.
  • Centrarse en la facilidad de uso. La creación de diagramas ofrece una mirada objetiva de los nombres de enlaces, rutas de conversión, facilidad de uso, navegación, y disposición de las funciones. Te ayudan a identificar fallos en la arquitectura del sitio o las funciones y te indican cómo fluye desde la perspectiva del usuario.
  • Capacidad de crecimiento del contenido. Si sabes que tu página web crecerá en un futuro próximo, tu sitio debe estar preparado para que ese crecimiento tenga un impacto mínimo en el diseño, la facilidad de uso y la arquitectura del sitio. La creación de wireframes puede revelar estas importantes oportunidades de crecimiento del contenido y cómo adaptarse a ellas.
  • Comentarios e iteración sin esfuerzo. Los wireframes garantizan que el diseño y los elementos creativos en un solo paso, se aborden de forma separada. Esto permite a los interesados brindar comentarios en etapas más tempranas del proceso.

 

Tipos de wireframes

Hay tres tipos de wireframes diferentes que varían desde el más simple (planos o modelos en blanco y negro) hasta el más complejo (casi simula el producto real):

  • Wireframes básicos: Modelos en blanco y negro.
  • Con anotaciones y navegación: Contiene información básica a través de bloques de funcionalidad, crea fluido de navegación y el agrupamiento de contenidos.
  • Wireframes detallados y en plataformas: Wireframes realizados con todas las funcionalidades y las herramientas necesarias para ello.

Ventajas de usar wireframes

  • Sirven para plasmar ideas: Son el primer paso para que las ideas abstractas sean concretas y visibles
  • Son rápidos y baratos de crear: Al ser bocetos esquemáticos, son rápidos de crear y tienen un coste muy bajo. Esto te permite realizar múltiples versiones hasta encontrar la adecuada sin que ello suponga un problema de tiempo o dinero.
  • Ayuda a detectar y corregir los problemas antes: Al ser sencillos y rápidos de realizar, te permiten exponerlos rápidamente a una retroalimentación y resolver problemas básicos relacionados con la usabilidad y las funcionalidades propuestas.
  • Obtener mejoras: Sirve para repasar las mejoras que se puedan realizar en el diseño, el posicionamiento de los elementos o la estructura de los contenidos.
  • Mejora la usabilidad: Definir previamente la estructura y los elementos de la página web te permitirá mejorar la usabilidad, evitando así los errores que se puedan dar sobre la marcha.
  • Permiten a los diseñadores tener libertad para diseñar la interfaz.
  • Permite la comunicación del equipo de trabajo y los usuarios.

2 Replies to “Usabilidad web: Arquitectura de información y wireframes”

  1. Me gusta saborear y visitar blogs, aprecio mucho el contenido, el trabajo y el tiempo que ponéis en vuestra web. Buscando en Yahoo he encontrado tu web. Ya he disfrutado de varios post, pero este es muy adictivo, es unos de mis temas predilectos, y por su calidad he disfrutado mucho. He puesto tu blog en mis favoritos pues creo que todos tus posts son interesantes y seguro que voy a pasar muy buenos momentos leyendolos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *