Wireframes Olga Carreras

http://olgacarreras.blogspot.com.es/2007/02/wireframes.html

1

Más


sobre mi blog
& curriculum

consultoría
& servicios

recursos
& descargas

martes, 11 de marzo de 2008

Wireframes
Artículos relacionados: Vídeo "Prototipado" para el curso gratuito "iDESWEB: Introducción al desarrollo web" Arquitectura de información. Fundamentos La usabilidad como metodología para eldesarrollo de una aplicación web Metodología DCU MPlu+a Novedades Axure 6 Última actualización: 21 de enero de 2011

Terminología
Wireframe, Blueprint, Prototipo, Storyboard, Mock Up, Diagrama de contenido, Sketching … Lo primero aclaremos la terminología. Como expliqué en "Disciplinas relacionadas con la usabilidad", hay diversas disciplinas que intervienen en el Diseño de Interfaz de Usuario,entre ellas se encuentra la Arquitectura de
1 de 19


Información (AI). 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. Para llevar a cabo estas tareas nos valemos de la diagramación para especificar cuál será laorganización, estructura, funcionamiento y navegación del sitio. Existen dos tipos de diagramas (sin contar los que pueden surgir de la aplicación de otras técnicas como el Card Sorting) como podemos ver en este gráfico de NSU:

[DE-1]

Así pues distinguimos: los PLANOS, que son diagramas de organización y funcionamiento
2 de 19


las MAQUETAS, que son diagramas de presentación

Planos:diagramas de organización y funcionamiento
Los diagramas de organización y funcionamiento se llaman BluePrint (también Architecture Map o Diagramas de contenido o flujo) y pueden ser más o menos avanzados. Es lo que también se denomina mapa web. En NSU vemos dos ejemplos, uno más sencillo y otro más completo:

[DE-2]

[DE-3] Como se ve, el objetivo de estos diagramas es mostrar la estructura delsitio y su flujo de navegación. Para la realización de este tipo de diagramas de recomienda siempre el "Vocabulario visual para describir arquitectura de información y diseño de interacción" de Jesse James Garrett. Una herramienta sencilla y gratuita, recomendable para realizar mapas web sencillos, es XMind. Para realizar diagramas más complejos se pueden utilizar cualquiera de las herramientas
3de 19


recomendadas más adelante para la realización de wireframes.

Maquetas: diagramas de presentación
Por otro lado hemos visto que tenemos los diagramas de presentación, cuyo objetivo es mostrar el contenido de las páginas, concretando los elementos que se plantearon en los primeros planos (blueprints) y ubicándolos en las páginas o pantallas del producto final. Podemos tener distintostipos de prototipos, que en ningún caso incluyen el diseño gráfico puesto que este se aplica en una etapa posterior. Para simplificar, podemos hablar de: Prototipos 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. Dentro de prototipos de bajafidelidad hablaremos de: Sketching: un sketch es un boceto rápido e informal que se realiza en papel para transmitir una idea o concepto con rapidez y claridad. Suele realizarse durante las entrevista iniciales como técnica eficaz para comunicar al cliente conceptos o proponer alternativas a un problema; también es muy útil durante un brain-storming o en las reuniones con el equipo de trabajo. Esuna forma eficaz de comenzar el prototipado de un sitio web, pues permite trabajar ágilmente con varias ideas y esquematizar las páginas.

El libro de referencia suele ser "Sketching User Experience" de Bill Buxton. Es interesante el artículo "Bill Buxton : Sketching versus Sketchiness, what's the difference for UX design?" de Joel Eden sobre si deberíamos hablar de sketching o de
4 de 19...