CONTRIBUCIONES CORTAS

 

Contribución de la planeación al desarrollo Web: los wireframes

 

Contribution of planning to Web development: wireframes

 

 

Mirta Valdés Morris

Doctora en Medicina Veterinaria. Empresa de Tecnologías de la Información y Servicios Telemáticos Avanzados (CITMATEL). La Habana. Cuba.

 

 

 

---

RESUMEN

La planeación de un Web es una tarea intensa e insoslayable cuando se trata de un esfuerzo serio en busca de un sitio que cumpla con las expectativas de sus solicitantes y visitantes. Sin embargo, con frecuencia, no se concede a esta actividad su verdadero valor y ello provoca numerosos problemas durante el desarrollo del trabajo y que se llegue al final de la tarea con deficiencias difíciles de eliminar con vistas a cumplir con las expectativas de los clientes, las condiciones del tráfico, las necesidades de perfeccionamiento y la credibilidad requerida, todo esto reduce las posibilidades de éxito ante la competencia, entre otras dificultades. El desarrollo, tratamiento y gestión de los contenidos requieren de un manejo preferencial desde la dimensión humana si realmente se desea alcanzar una relación beneficiosa con sus destinatarios. La coherencia del trabajo en equipo, el pensamiento socializador y una mentalidad abierta para escuchar y permitir que ideas diferentes se presenten y se abran paso, superen o fertilicen las de otros, incluidas las propias, forman parte de un grupo de aspectos esenciales en el trabajo, en este caso, para el desarrollo Web, que hacen más integral, válida, segura y placentera la tarea, todo lo cual redunda en mejores resultados.

Palabras clave: Planeación Web, esquema del sitio, desarrollo Web, estilos de trabajo.

---

ABSTRACT

Planning a Web is an intense and unavoidable task, when a serious effort is made to create a site that satisfies the expectations of its clients.  Nevertheless, the real value of this activity is frequently underestimated, causing numerous problems during the development of the work and deficiencies that are difficult to eliminate at the end of the task in order to meet the expectations of the clients, the traffic conditions, the improvement needs and the required credibility; thus reducing the probability of success before competence, among other difficulties.  The development, processing and management of the contents require a preferential management from the human dimension if you really want to achieve a beneficial relation with its users.  The teamwork coherence, the socializing thought and an open mind to listen and to allow different ideas to come up and develop, and to surpass or improve those of others, included one's own ideas; are part of a group of essential aspects for Web development, that make this task more integral, valid, secure and pleasant, and allow to have better results.

Key words: Web planning, site scheme, Web development, work styles.

---

 

 

Como se ha comentado y argumentado en muchas ocasiones con pruebas fehacientes durante las últimas décadas, la información, es poder.

"… Internet puede utilizarse con el fin de aumentar la participación, divulgar la información, y compartir conocimientos, destrezas y habilidades. Un enfoque integrado, aplicado a la expansión de los servicios de Internet ayudará a promover la comunicación necesaria".¹

Cuando es el usuario final el eje del trabajo, toda la labor debe dirigirse a su satisfacción, pero esto no puede ser un simple slogan; en estos casos, la actividad grupal o en equipo es un buen auxilio para alcanzar el éxito en la tarea.

El trabajo en equipo favorece notablemente las actividades que se realizan, porque se produce un intercambio de ideas entre sus miembros, un aprendizaje individual y colectivo y se validan y perfilan las ideas y propuestas sobre la base de compartir y discutir con igualdad de derechos lo que se piensa. Investigar sobre el tema en que se trabaja, sobre los futuros usuarios del sitio, sus necesidades y aspiraciones y trabajar conjuntamente con sus solicitantes forma parte de la gran tarea que supone hacer un Web. Planear, acordar, consultar y elaborar en equipo permite un acercamiento a lo que se aspira, que se llegue a hacer un buen Web.

Si se ha comenzado a incorporar el diseño centrado en el usurio en el desarrollo Web, los esquemas (wireframe) son un elemento importante, esta especie de dibujos de diferentes páginas, como el plano de una casa, son útiles por muchas razones, entre ellas, porque facilita la exploración de los problemas de usabilidad y diseño, compararlos y rápidamente comprender los planes.

 

PENSAR PRIMERO Y ACTUAR DESPUÉS

La arquitectura de la información (AI) tiene en la planeación Web un lugar muy importante al ser la responsable de disponer los contenidos para que sus usuarios los hallen con más facilidad y favorecer así su usabilidad. Cada vez son más las organizaciones que incorporan un arquitecto de la información en sus equipos de trabajo, tanto por estas razones como porque con una actividad consecuente, este arquitecto de la información puede ayudar a economizar muchos recursos.

La AI hoy es un valor agregado, pero en muy poco tiempo se convertirá en un ingrediente indispensable para la creación de cualquier recurso para la red.²

Y es que la calidad de un sitio bien puede determinarse por la posibilidad real de encontrar lo que se busca. Una AI fuerte es especialmente importante para grandes sitios donde también debe existir un buen sistema de navegación y esquema organizacional, que exponga y caracterice la información que sus usuarios necesitan y que "escondan" la que no requieren. Se establece entonces la calidad del sitio a partir de su fácil navegación, la organización y el hecho de garantizar que este no se quede a medio camino entre lo que provee y las necesidades de información del usuario.³

La planeación de un Web es una tarea intensa e insoslayable cuando se trata de un sitio que pretende obtener un respeto y desea cumplir con las expectativas, tanto de sus solicitantes como de sus visitantes. En este caso, si al equipo de trabajo se suma el cliente como un miembro activo, se reforzará el valor de las ideas, los criterios, el conocimiento, el intercambio y el propio trabajo, y ello elevará las posibilidades de alcanzar un Web de éxito. Lo que es bueno para el usuario, lo es también para el Web y para su ubicación en los buscadores; todo ello favorece la credibilidad y un paso seguro frente a la competencia.

La comunicación disminuye la entropía y da lugar a la información, disminuye el desorden.

La discusión y el análisis en el equipo de trabajo para determinar la orientación del trabajo, deben centrarse en qué es lo que debe decir el Web, y a quién, para sobre esta base, establecer el cómo.

Los cambios que se planifiquen deben explicitarse para no romper las reglas establecidas y conocidas por el usuario. Debe garantizarse la inteligibilidad a la audiencia para la que se produce el Web.

En este caso, el anteproyecto es la herramienta de la AI para transformar el caos que se produce a partir de las primeras tormentas de ideas, en algo ordenado. Cuando se estructuran formalmente las ideas, el anteproyecto las convierte en realizables y prácticas. Generalmente comienza con un vistazo a la página inicial. El anteproyecto estimula la focalización de la discusión en la organización, el manejo de los contenidos y el acceso de los usuarios. Se puede realizar a mano y desarrollar diagramas que ayuden no sólo a agilizar su confección, sino también su mantenimiento y la fase de producción. Los anteproyectos representan todo el Web: página principal, subsitios o páginas intermedias, las relaciones entre ellas, el acceso del usuario a la información, el sistema de búsquedas, las bases de datos, directorios, etcétera; y es esto lo que presenta el equipo de trabajo al cliente. La presentación al cliente se realiza personalmente para que pueda responder a sus preguntas y exponga los puntos de vista del equipo, etiquetas, esquema de navegación, entre otros elementos necesarios. El anteproyecto se centra en las áreas mayores o principales e ignora elementos y detalles de nivel de las páginas. Estas omisiones se observarán más adelante en otros pasos del proceso. El anteproyecto es el elemento más útil para presentar rápidamente una visión del sitio. El anteproyecto debe representar la jerarquía completa del Web desde las páginas principales a las de destino, también debe detallar el etiquetado y el sistema de navegación que se implementa en cada área.³

En todos los casos, se recomienda enfáticamente representar mediante un esquema o varios el tema o el interés de que se trate y desplegar sus aspectos principales y los que de estos se desprendan para determinar qué se llevará al Web.

La arborización permite ordenar gráficamente ideas. Se realiza para comenzar a preparar el trabajo luego del intercambio con el cliente. Es el primer intento de dar un orden y un nivel al contenido. Permite llevar estos, de la mejor manera a quien los necesita.¹

A continuación una vez conocidos el orden y nivel de los contenidos, se debe desarrollar uno o varios esquemas como parte de las tareas de planeación.

El esquema o wireframe, también se conoce con otros nombres como: guía visual, sketch, blue-print, etcétera. A la confección del wireframe, sin embargo, no se concede siempre, como parte de la planeación, el valor que tiene y ello genera numerosas dificultades y problemas cuando se prueba o implementa el sitio. Para ese entonces, cuando quieran enmendarse sus deficiencias tal vez sea muy complejo o costoso hacerlo, en otros casos, comenzarán a aparecer cuestionamientos sobre la calidad del Web al no cumplir las expectativas de los clientes, de tráfico, de perfeccionamiento y credibilidad por lo que, además, se afectará también la capacidad de sus solicitantes para enfrentar la competencia y esto de seguro llevará a males mayores.

Estas guías permiten ordenar los tópicos y subtópicos de los sitios, la página principal y las interiores, a esto se puede llegar por diferentes vías pero, en cualquier caso, precedida de una investigación y un buen intercambio con el solicitante del Web.

 

COINCIDENCIAS CONCLUYENTES

La organización, el orden y la planificación; así como el trabajo en equipo son sinónimos de buen funcionamiento, organicidad y factores de éxito.

Los contenidos requieren de un tratamiento preferencial desde la perspectiva humana si realmente se desea alcanzar la relación con quien los va a utilizar. Las relaciones interpersonales _con los demás miembros del equipo o los clientes- permiten alcanzar zonas del pensamiento donde no se puede llegar sólo con la tecnología; de ahí la importancia de desarrollar, tratar y gestionar contenidos bajo estas premisas con vistas a hacerlos realmente asequibles y aprovechables.

La experiencia de años de trabajo en diferentes circunstancias y condiciones demuestra que la tarea desarrollada por un equipo multidisciplinario, donde existe confrontación, análisis, discusión y acuerdos, presenta claras ventajas con respecto a aquella que se realiza individualmente y con fronteras interdisciplinarias, tanto para el trabajador como para el trabajo.

Resulta reconfortante comprobar que estos resultados coinciden en diversas áreas como la AI, la planeación Web, el diseño orientado al usuario, el perfeccionamiento de los buscadores, y otros tantos, que tienen sus antecedentes en la labor de múltiples equipos en diversas especialidades.

 

Wireframe

El wireframe, - o boceto, esquema, arborización, Page Architecture, Low Fidelity Mock-Up, Page Schematic, entre otras muchas denominaciones- es uno de los componentes más importantes de un proyecto Web y cuando no se realiza o realiza de manera incorrecta pueden aparecer muchos problemas que cuando se quieren luego resolver a término del Web, muchas veces ya es tarde o los precios pueden crecer considerablemente. Esta lección es costosa y dura de aprender por los usuarios, directivos y hasta por algunos profesionales que trabajan en el giro.

Y ¿qué es el wireframe?, o la arborización o lo que se denomina de tantas maneras pero que apuntan a lo mismo, como forma de trabajo para dejar las ideas planteadas y los contenidos distribuidos antes de lanzarse a la ejecución del Web.

Un wireframe es la vista simplificada de alguna cosa.

"Un wireframe es un bosquejo de la ubicación de los elementos en una pantalla. En dependencia de la etapa de desarrollo del proyecto, generamos un wireframe básico, que expresa los elementos de una pantalla genérica, aplicable a todo un sistema; un wireframe tipo, que expresa la estructura de pantallas de una misma categoría, como canales o páginas terminales; y un wireframe detallado, que especifica la composición de páginas específicas -se aplica especialmente a pantallas que implican la realización de acciones".⁴

"Los wireframes son similares a los blueprints, se necesita de uno para representar cada pantalla. Usualmente no tienen color e incluyen pequeñas notas. A pesar de lo aburrido que pueden sonar son el paso más importante para determinar sobre el producto antes de desarrollarlo para evitar los cambios al final o luego de terminado".⁵

"Los wireframes son en AI, la estructura donde esta puede detallar el comportamiento y crear un script de la experiencia adquirida. Un wireframe es una representación visual del comportamiento, los requerimientos y el contenido necesario en un cuasi-aproximado esquema de cómo puede verse un diseño eventual. Una guía para la discusión en equipo durante el desarrollo del sitio. Conduce a precisiones del Web según las intenciones originales que tuvo. Reduce la posibilidad de volver a elaborar".⁶

Los wireframes son, por tanto, herramientas que nos permiten adelantarnos al diseño final y observar de forma esquemática cómo se estructurarán las páginas que conforman el sitio, sus relaciones y las partes de las que constará cada espacio en el Web.

Entre sus rasgos principales se encuentran:

Se realizan en tonos de negro o gris.

Son esquemas.

Asignan espacios para los elementos del sitio y relacionan a los que lo requieren.

Son un paso inviolable en el desarrollo Web.

Es una guía para los miembros del equipo hasta el final del trabajo.

Reducen la posibilidad de elaborar nuevamente.

Disminuyen los cambios constantes al ser consultado con el cliente.

Son fáciles de modificar.

Son sencillos.

Ahorran problemas posteriores y con ello, recursos.

Ahora bien, el acuerdo obtenido en las arborizaciones no debe violarse, porque ellas guían la labor de todos los que conforman el equipo de trabajo, lo mismo que se determinaron el objetivo y la audiencia en la entrevista inicial entre el usuario y el equipo de trabajo. Los cambios que pueden generarse tampoco deberán relacionarse con la estructura porque esta previamente se analizó con el usuario. Por eso, generalmente, se relacionan con los colores, el tipo de letra y el diseño gráfico, entre otros elementos similares.

En cualquier caso, el usuario debe ocupar el lugar que le corresponde, respetándolo nos respetaremos nosotros.

Un wireframe entonces básicamente contiene:²

Elementos de navegación: menús, accesos directos e hipervínculos.

Elementos de información: contenidos de texto e imágenes.

Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar.

Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o FAQs.

Elementos promocionales: espacios dedicados a banners publicitarios o a destaques internos del propio producto.

Los wireframes deben poderse cambiar fácil y rápidamente. Ellos ofrecen una vía sencilla para moverse a través de múltiples diseños reiterativos. Si toma mucho tiempo hacer un wireframe lo más probable es que haya que hacerlo nuevamente. No deben parecer diseños. No son arte, deben ser planos, sencillos y funcionales. Se hacen sólo en escala de grises, no hay otros colores para no provocar distracciones. Deben poderse distribuir en forma electrónica y así compartirlos entre los miembros del equipo de trabajo. Los wireframes pueden contener elementos de páginas clave, la localización del cabezal, el pie de página, la navegación, los objetos de contenido, elementos de la marca que se trate; agrupaciones de la barra lateral, barra de navegación, áreas de contenidos, entre otros; etiquetados como el título de la página, enlaces de navegación, titulares de los objetos de contenidos; así como el lugar que ocuparán las imágenes; entre otros aspectos.⁷

Las páginas que indiquen alertas o errores también deben incluirse porque forman parte del Web y deben aparecer para el solicitante como parte integral de sitio y no como algo aparte.

El tratamiento adecuado que desde el inicio se ofrezca a las páginas promoverá la consistencia en el sitio y ello, a su vez, mejorará su usabilidad.

No es necesario lograr diagramas definitivos al primer intento que se realice, pueden producirse varios y con ellos, un acercamiento al final. Las relaciones entre los elementos y las páginas se deben trazar también para elevar la comprensión del proyecto Web según lo que se pretende.

Una guía visual puede ser un paso intermedio que apunte al objetivo del sitio Web. La creación de esta guía permite a sus creadores y diseñadores, tener una idea clara del alcance del proyecto, las aspiraciones del cliente, el administrador y otras partes involucradas.⁸

La atención de los que miran y analizan el wireframe debe centrarse en su información en el mensaje que pretende llevar y no en los colores, por eso el énfasis en realizarlos sin colores.

Los detalles de los esquemas que se realicen oscilarán de acuerdo con el objetivo que en determinado momento se persiga con estos.

Definitivamente, los wireframes no son la parte más apasionante de un Web, sin embargo, cuando se emplean en su justa medida y con la rigurosidad necesaria como parte del proceso de diseño pueden aportar mucho valor, porque ellos ayudan a diseñar, a enfocarse sobre el mensaje de mercado que se trata de comunicar por medio del sitio; a su vez, permiten producir un sitio más efectivo y abre canales de comunicación con el cliente. Pueden economizar mucho tiempo.⁹

 

REFERENCIAS BIBLIOGRÁFICAS

1. Centro Latinoamericano para el Desarrollo y la Comunicación Participativa. (CDESCO). Síntesis de la propuesta y documentos teóricos. Disponible en: http://www.cdesco.org [Consultado: 6 de diciembre de 2007].

2. Arquitectura de información. Disponible en: http://www.arquitecturadeinformacion.cl/ [Consultado: 8 de diciembre de 2007].

3. Rosenfeld L, Morville M. Designing Large-Scale Web Sites. Architecture Information. Ciudad: Edit O'Reilly; 1998.

4. Wireframe. Disponible en: http://www.arquitecturadeinformacion.cl/como /wireframe.html [Consultado: 6 de diciembre de 2007].

5. Petrov G. Wireframing. Disponible en: http://www.dmxzone.com/ShowDetail.asp?NewsId=3991 [Consultado: 7 de diciembre de 2007].

6. SIGIA-L: Wireframes? Summary. Disponible en: http://www.info-arch.org/lists/sigia-l/0203/0072.html [Consultado: 6 de diciembre de 2007].

7. Chak A. Effective Info Architecture. 2001. http://www.webtechniques.com/archives/2001/10/chak/ [Consultado: 9 de diciembre de 2007].

8. Visual guide. Disponible en: http://www.answers.com/topic/visual-guide [Consultado: 6 de diciembre de 2007].

9. Wire Frame Your Site Matt Beach. Disponible en: www.sitepoint.com/print/wire-frame-your-site [Consultado: 7 de diciembre de 2007].

 

 

Recibido: 18 de febrero de 2008.
Aprobado: 26 de febrero de 2008.

 

 

Dra. Mirta Valdés Morris. Empresa de Tecnologías de la Información y Servicios Telemáticos Avanzados (CITMATEL). Calle 47 s/n entre 18ª y 20 Playa. Ciudad de La Habana. Cuba. Correo electrónico: [e-mail]

 

 

Ficha de procesamiento

Términos sugeridos para la indización

Según DeCS¹

INTERNET; INTERFASE USUARIO-COMPUTADOR; SISTEMAS DE COMPUTACION.

INTERNET; USER-COMPUTER INTERFACE; COMPUTER SYSTEMS.

Según DeCI²

INFORMACION; SITIO WEB; INTERFASE USUARIO-COMPUTADORA.
INFORMATION; WEB SITE; USER-COMPUTER INTERFACE.

¹BIREME. Descriptores en Ciencias de la Salud (DeCS). Sao Paulo: BIREME, 2004.

Disponible en: http://decs.bvs.br/E/homepagee.htm

²Díaz del Campo S. Propuesta de términos para la indización en Ciencias de la Información. Descriptores en Ciencias de la Información (DeCI). Disponible en: http://cis.sld.cu/E/tesauro.pdf

Copyright: © ECIMED. Contribución de acceso abierto, distribuida bajo los términos de la Licencia Creative Commons Reconocimiento-No Comercial-Compartir Igual 2.0, que permite consultar, reproducir, distribuir, comunicar públicamente y utilizar los resultados del trabajo en la práctica, así como todos sus derivados, sin propósitos comerciales y con licencia idéntica, siempre que se cite adecuadamente el autor o los autores y su fuente original.

Cita (Vancouver): Valdés Morris M. Contribución de la planeación al desarrollo Web: los wireframes. Acimed 2008;17(3). Disponible en: http://bvs.sld.cu/revistas/aci/vol17_3_08/aci07308.htm [Consultado: día/mes/año].