Diseño web

Lic. Jorge Luis Pérez Subirats1
Resumen

Diferentes autores a nivel mundial han tratado el diseño informacional de los sitios web, sus etapas, así como la necesidad de un trabajo multidisciplinario para alcanzar los objetivos propuestos para cada uno de ellos. Se abordan los conceptos diseño de información, producto de información digital, arquitectura de información y de alfabetización informacional para mejorar la comprensión del tema estudiado. Se expone un conjunto de aspectos básicos y recomendaciones para diseñar adecuadamente un sitio desde el punto de vista de su arquitectura informacional. Un sitio web se construye esencialmente para satisfacer las necesidades informacionales de sus usuarios potenciales.

Descriptores (DeCS): INTERNET; DISEÑO ASISTIDO POR COMPUTADOR
Descriptores (DeCI): WWW; SITIO WEB; DISEÑO DE SITIO WEB; SATISFACCION DEL USUARIO

Abstract

Different authors from world-wide level have dealed with the informational design the Web sites, their stages, as well as the necessity of a multidisciplinary work to reach the proposed objectives after each of them. The concepts are approached information design, product of digital information, architecture of information and informational alphabetization to improve the understanding of the studied subject. One exposes a set of basic aspects and recommendations to suitably design a site from the point of view of his informational architecture. A Web site is constructed essentially to satisfy the informational necessities with its potential users.

Subject headings (DeCS): INTERNET; COMPUTER-ASSISTED DESIGN
Subject headings (DeCI):WWW; WEB SITE; WEB SITE DESIGN; USER SATISFACTION

Un página web tiene la misión esencial de vincular los visitantes con el vasto mundo de la información de un modo agradable y eficiente. Los contenidos sin un formato normalizado en el web y las facilidades que brinda la hipermedia permiten, además de acceder a la información de un modo entretenido, satisfacer los requerimientos y gustos de los más disímiles usuarios.

Ante el cúmulo de información en diversos formatos que introduce el WWW se hace necesario atender al diseño informacional de cualquier página o sitio. A menudo, se menosprecian normas simples para la realización de interfaces como el correcto del lenguaje; la necesaria correspondencia semántica entre titulares y contenidos, así entre íconos y textos. Estas y otras transgresiones a un diseño correcto producen ambigüedades en la información que ofrece un sitio y generalmente obedecen a la carencia de un estudio previo y unos criterios apropiados para una organización y presentación ajustada a las necesidades de información y comunicación de sus usuarios potenciales.

El correcto diseño de un sitio web transita por una serie de etapas:

- Análisis de la información que presentará el web.
- Búsqueda y organización.
- Diseño informacional del sitio (diseño gráfico).
- Elaboración de la interfaz.
- Publicación del sitio en Internet.
- Supervisión de la información mostrada por el sitio (por el webmaster).

En el diseño de páginas web confluyen conocimientos procedentes de diversas disciplinas como las ciencias de la información y la comunicación, el diseño informacional y la cibernética, así como potentes editores web: Lotus World Pro, Microsoft Front Page, Netscape Comunicator, Macromedia Dreamweaver, etcétera.1,2

Con la presentación de este informe, se pretende ofrecer una visión general e introductoria de algunos conceptos básicos, elementos teóricos, así como las ideas y opiniones de diferentes autores a escala mundial sobre el tema.
Marco teórico
Diseño de información3

Actividad que se centra en el desarrollo de métodos para producir información digital, dirigida al usuario/lector, cuyo soporte es el documento digital propiamente dicho, en el marco de una estructura determinada .

Comprende el diseño, creación y producción de información digital dirigida al usuario final. Se basa esencialmente en la experimentación y en la adquisición de conocimientos mediante la práctica. La interactividad es un componente fundamental en el diseño de información. Los documentos digitales son más dinámicos, activos y prácticos que los documentos tradicionales que tienden a ser estáticos.
Producto de información digital 4

La información y el conocimiento se obtienen de la investigación y la experiencia. Para recogerlos, es necesario plasmarlos en un documento que es digital cuando el soporte es electrónico. Un producto de información digital es una recopilación, clasificación y registro de la información electrónica sobre un tema determinado en un soporte magnético.
La creación de productos con información electrónica como resultado de la aplicación de un diseño de información, es parte de aplicar una metodología, cuyo objetivo es establecer una estructura que facilite su consulta por parte del usuario/lector.
Arquitectura de información

Contempla la organización de la información desde una perspectiva amplia. Incluye tanto a la estructura propuesta para el contenido como a los mecanismos necesarios para conocer y explorar dicha estructura en su presentación visual.
Aunque existen diferentes propuestas de arquitectura, cualquiera que se utilice, abarca:

* La organización de la información.
* El sistema de navegación.
* El sistema de etiquetado de contenido.
* El sistema de búsqueda y recuperación.

La creación de una arquitectura de información específica se soporta en los estudios de usuarios y las técnicas de prototipado. Estas no emplean el producto final para la experimentación sino un prototipo con ciertas características en virtud de las cuales se someterán los métodos a aplicar en una dirección concreta como herramientas claves para su desarrollo.

El objetivo final de la arquitectura de información de un sitio web es organizar la información de forma coherente. Ello proporcionará a los usuarios un acceso rápido y fácil a la información necesaria. De una arquitectura correcta depende, en gran medida, el buen funcionamiento de un sitio y su utilidad.3,4
Alfabetización informacional

Comprende las destrezas y habilidades necesarias para determinar a qué información se necesita acceder, y para seleccionarla, utilizarla y comunicarla adecuadamente. Es un componente fundamental de la capacidad investigadora y de resolución de problemas, necesaria tanto para estudiantes como para profesores y profesionales en general.5-9
Métodos

A partir de las búsquedas realizadas con el auxilio de Google, se identificaron más de 500 referencias relacionadas con el tema objeto de estudio; de ellas, en una primera selección, se descartaron unas 250, para finalmente consultar unas 40, cuya forma de tratar el tema era apropiada para los objetivos introductorios del presente informe. Finalmente, se citaron menos de 20, necesarias para obtener una panorámica de los aspectos referidos.

El término principal que se utilizó para la exploración fue: diseño informacional de sitio web, en inglés y español. También se emplearon palabras claves como "arquitectura de sitios web", "arquitectura de información"y "diseño de información".
Resultados

El diseño de los sitios web es un tema objeto de tratamiento frecuente en la literatura especializada, como resultado del crecimiento espectacular experimentado por estos durante la última década. Existen múltiples normas, recomendaciones y requerimientos con estos fines: 9

* Subordinar el diseño y la programación del web al control del usuario, a sus requerimientos organizativos y sus niveles cognoscitivos. Las herramientas que debe utilizar el usuario deben ser sencillas y fáciles de manejar (imágenes estáticas y animadas, iconos, vínculos, etc.).
* Tratar de lograr un todo armónico entre el fondo de las páginas y el contenido que se muestra. Si hay muchos textos y es preciso usar un tamaño de fuente pequeño, se deberá contrastar con el fondo para aumentar su legibilidad.
* Crear un índice en la página inicial que guíe al navegante y muestre el contenido esencial del sitio en cuestión.
* Estudiar el espaciado, el tamaño de fuente y el interlineado, muy importantes para la comprensión de los textos y la estética de la página. Los títulos, subtítulos y encabezados pueden utilizarse para enfatizar algo o dar un toque de color o de alegría.
* Desarrollar ilustraciones en correspondencia con el contenido de la página.
* Utilizar correctamente los colores, pues su abuso puede producir estados de ánimo y emociones indeseables, que vayan desde el aburrimiento en el mejor de los casos, hasta que los visitantes se marchen del sitio.
* Emplear sólo los gráficos animados necesarios para no abarrotar la página web, cansar a los navegantes o demorar el acceso.

Pero, disponer de información de interés y definir los contenidos que se expondrán es el primer paso para construir un sistema de información eficiente.

Las consideraciones esenciales sobre un sitio web giran, cada vez más, en torno a su facilidad de uso, claridad y funcionabilidad ante el creciente volumen de información disponible en la red.

La facilidad de uso de un sitio, creado para un grupo de usuarios específicos, se logra sólo si se cumple el siguiente principio: "cualquier proceso de diseño debe comenzar con la definición de sus requisitos, y estos sólo pueden obtenerse de los usuarios reales".10
La facilidad de uso de un sitio depende de:11

* La capacidad de aprendizaje: es el tiempo y esfuerzo requerido para que un usuario alcance un determinado nivel de ejecución en un sistema determinado.
* El rendimiento: comprende la velocidad de ejecución de las tareas, así como del número y el tipo de errores cometidos por el usuario en su realización.
* La flexibilidad: es la capacidad del sistema para trabajar con diferentes regímenes en función del nivel de experiencia del usuario.
* La efectividad: es el grado de exactitud con que el sistema completa las tareas y cumple los objetivos para los que se diseñó.
* La eficiencia: se refiere al número de pasos que el usuario debe completar, para el cumplimiento de una tarea.
* La satisfacción: incluye las medidas del confort, aceptabilidad y actitud positiva generada por el servicio del sistema.

Para su aplicación concreta a la evaluación de sitios web, estos factores se convierten en indicadores específicos, como la jerarquización de la información, la velocidad de descarga, la navegabilidad, etcétera.

La facilidad de uso es un aspecto clave al momento de evaluar el diseño de un sitio web.
La creatividad, simplicidad y elegancia del diseño y arquitectura informacional de un web contribuyen decisivamente a satisfacer las expectativas de sus visitantes.
Por ello, los principales objetivos, al momento del uso, son:12

* Rapidez: Las páginas deben descargarse rápidamente.
* Navegabilidad: Con una estrutura clara y coherente del espacio web que facilite su exploración.
* Funcionabilidad: Se deben destacar los elementos de interacción con los usuarios, retroalimentación, bien para recoger sus opiniones o para ofrecerles servicios personales.
* Eficiencia: Los espacios web deben diseñarse para satisfacer las expectativas de los navegantes de modo que permanezcan en el sitio y repitan sus visitas.

En la valoración del uso, se debe incluir el análisis de los visitantes, se deben analizar las páginas más utilizadas por ellos, etcétera. Estos brindan información valiosa para mejorar el web.

Si un sitio web no se construye a partir de las necesidades de sus usuarios potenciales y no se diseña con las facilidades necesarias, el visitante no puede encontrar información relevante y entonces lo abandonará.

Los usuarios siempre demandan sitios web simples, rápidos y fáciles de utilizar. La facilidad de uso y la funcionalidad de los sitios web es esencial para su supervivencia. En este contexto, se estudia la interacción entre el usuario y la interfaz, se intenta maximar sus resultados, a partir del análisis de los problemas que aparecen mientras el usuario navega por el sitio y se buscan soluciones de rediseño del sitio para mejorar su funcionalidad.

Desde el punto de vista informacional, un sitio web debe ser una unidad de sentido que funcione de acuerdo con dos principios o lógicas centrales.13

* Uno, referido a la coherencia interna y la diferenciación externa, otro, al cierre informacional.

El primero implica que los usuarios o lectores de un sitio web deben aprecir, al consultar sus páginas, cierta consistencia en ellas y una relación entre todas que constituyen una unidad sin contradicciones, es decir, con sentido.

Se denomina metafóricamente "navegación" al proceso de lectura e interpretación "guiada" mediante significantes visuales, sonoros, etc, organizados de acuerdo con los objetivos del sitio y de comunicación con sus receptores.14

La diferenciación externa, por su parte, establece que un web debe confeccionarse con el menor ruido posible. En la medida que crece la información, puede también crecer el ruido. La información entonces, debe ser lo más homogénea posible.

El cierre informacional es una propuesta de acotamiento, limitación o restricción del conjunto de posibilidades de relación o vínculo de un sitio web específico.

La posibilidad teórica de conexiones infinitas resulta contradictoria con la aspiración de que todo sitio web se constituya en un nodo, por lo que su evaluación se debe hacer más desde el punto de vista de "cierre" que de " apertura". Ello genera que la información se disemine y comunique de forma correcta.

Ahora bien, cada tipo de sitio y web presentan diseños y arquitecturas específicas de acuerdo con los requerimientos de sus usuarios potenciales.

Los sitios de carácer pedagógico, por ejemplo, presentan una arquitectura informacional particular.10 Su diseño transcurre por tres etapas fundamentales:15

* Diseño pedagógico del material.
* Elaboración del material en formato electrónico.
* Experimentación del material y evaluación en situaciones educativas reales.

A su vez, el diseño pedagógico del material, por ejemplo, se realiza, a partir de un conjunto de pasos:
Paso 1

* Seleccionar el módulo y analizar las necesidades.
* Determinar el tópico/tema del módulo.
* Clasificar el porqué y para qué se va a elaborar ese módulo.
* Identificar las características y conocimientos previos de los destinatarios.

Paso 2

* Planificar didácticamente el módulo.
* Establecer los objetivos de aprendizaje.
* Seleccionar y organizar los contenidos.
* Planificar las actividades.
* Elaborar los criterios y ejercicios de evaluación.

La elaboración del material en formato electrónico implica:
Paso 3

* Planificar el web.
* Elaborar el árbol o esquema del módulo (realizar una representación gráfica en papel de las páginas web y enlaces entre las componentes que configurarán el material).
* Decidir la información que se presentará en cada pantalla o página y redactarla. Cada página se archivará como un fichero o archivo independiente.

Paso 4

* Desarrollar el material en formato HTML.
* Decidir y desarrollar los aspectos formales de las páginas (fondos, iconos, ...) para un entorno de presentación. Debe ser homogéneo para un grupo de páginas similares.
* Establecer los enlaces hipertextuales (internos y externos al módulo).
* Incorporar íconos de enlaces y activarlos.
* Determinar los colores, imágenes, etc, que se adapten al contenido en cuestión.
* Probar en un navegador (Internet explorer, Netscape) y revisar los posibles fallos.

La experimentación y la evaluación del material abarca:
Paso 5

* Experimentar el prototipo del módulo en contextos educacionales reales.
* Publicar el prototipo experimental del material en Internet y CD-ROM.
* Determinar los sujetos o grupos con los que se experimentará.
* Experimentar con el alumnado el material y recoger datos pertinentes mediante entrevistas, cuestionarios, observaciones, pruebas de rendimiento, etcétera.

Paso 6

* Analizar los resultados.
* Reelaborar las dimensiones didácticas y tecnológicas (entorno gráfico, enlaces, iconos,etc.).

Paso 7

* Editar electrónicamente y difudir los materiales entre los centros de educación.

En la creación y mantenimiento de los espacios web docentes intervienen las siguientes personas y equipos:

* Dirección del proyecto.
* Equipo de diseño de la plataforma de teleformación: Determina las funcionalidades y el interfaz de la plataforma tecnológica con la que se ofrecerán los cursos.
* Equipo de diseño de la instrucción: analiza los objetivos, los destinatarios y el contexto institucional. Elabora el modelo de instrucción que se seguirá y el diseño general de los materiales.
* Red de autores especialistas en los temas seleccionados: bajo la coordinación de una dirección académica (y, a veces, con la ayuda de redactores), elabora los materiales formativos.
* Dirección académica: supervisa y orienta la labor de consultoría y tutoría de los profesores, una vez que el curso está en marcha. Evalúa periódicamente el funcionamiento del curso.
* Equipo tecnológico: informatiza los materiales formativos. Mantiene la plataforma mediante la cual se gestiona el curso.
* Equipo de secretaría: determina los servicios administrativos (matrículas, etc.).

Dos recomendaciones útiles para el diseño de un sitio web amistoso es la preparación de web multilingües, dirigidos a reducir los efectos de las barreras idiomáticas y elevar el número de visitantes y la elaboración de mapas que faciliten la orientación de los visitantes dentro del sitio.

La creciente complejidad de los contenidos informativos y de los servicios que se ofrecen a los usuarios en los sitios actuales han incrementado significativamente la importancia de las herramientas de navegación y orientación. Los mapas hipertextuales, por ejemplo, permiten una representación gráfica de los documentos y de los enlaces entre ellos, desarrollan una cartografía hipertextual completa del sistema. Muestran la situación de los distintos elementos al remitir sus íconos a un determinado índice temático de contenidos Se deben eleborar considerando más las verdaderas necesidades de los usuarios y su nivel de conocimientos, que los objetivos y finalidades de la empresa o servicio.

Los elementos de una página web pueden clasificarse en:16

* Materiales: textos, elementos multimedia (imágenes, sonido, video...) y enlaces (internos de página, externos, etc.).
* Lógicos: sistema de navegación, entorno audiovisual de las páginas, actividades e interacciones.

El web, además, tiene sus códigos específicos que son:

* El lenguaje HTML, que permite desarrollar las páginas y la forma concreta en que se organiza, presenta y significa la información.

La página web íntegra en sí misma, que abarca sus propios medios de comunicación: texto, audio e imagen (fija o en movimiento), cuya combinación suele llamarse multimedia.

En la realización de la página web, es necesario tener presente que todo cuanto se emplea en ella (barras de navegación, gráficas, colores, enlaces hipertextuales y hasta la propia organización y colocación de cada recurso) se transforma en signo o símbolo de comunicación, en parte de su código.

El diseño supone crear, imaginar la página, definir cómo va a ser, identificar los elementos con que se construirá: documentos, fotografías, referencias, audio, etcétera.11

Los web deben presentar suficiente flexibilidad para adaptarse a los distintos tipos de usuarios. Ellos se deben y se pueden someter a rediseños, con el objetivo de adecuarlos a las características y condiciones de sus usuarios. Rediseñar no significa conseguir sitios perfectos sino perfeccionados. Las mejoras serán siempre bien recibidas, y en ella el uso es un indicador fiel de la aceptación/rechazo de las mejoras.12,13

Un buen diseño gráfico se fundamenta principalmente en el diseño de la información, el diseño de la arquitectura visual, la creación de la experiencia interactiva y la ingeniería del uso. El diseño gráfico debe servir como soporte y someterse a estos aspectos. Nunca debe suceder lo contrario.

Algunas diferencias entre diseño gráfico y el diseño web, son:17

* Los sitios web no sólo se diseñan, sino que se construyen con el objetivo de satisfacer las necesidades de información de los usuarios. Esto sólo es posible con una adecuada arquitectura web, que une todas las piezas. Por lo tanto, el arquitecto del web, debe considerar múltiples aspectos: presentación, diseño, navegación, interactividad, estructura, flujo transaccional, información, etcétera.
* En los web, es muy común el uso de los colores y estos tienen una función muy importante, porque como mismo ayudan a embellecer una página web, pueden distraer a un usuario y hacer que abandone la página como tal o el sitio.

Las páginas web deben ser lo suficientemente versátiles como para ser agradables a toda la audiencia, para cumplir con sus expectativas, intereses y ambientes. No importa la ubicación del usuario, siempre debe poder acceder al sitio y conectarse. Los colores utilizados en los distintos tipos de mensajes de interacción como los de error, tampoco deben molestar a los usuarios.17
Conclusiones

Los sitios web se deben construir de manera tal que su dimensión informacional sea finita.
Un sitio web no sólo se construye para introducir información, sino para satisfacer las necesidades informacionales de sus usuarios potenciales.
Los sitios web deben incluir más de un idioma para la comunicación con los visitantes.
Referencias bibliográficas

1. Guerra A, Ronda León R. La importancia del diseño en el web. Disponible en:
http://www.itson.mx/dii/igaxiola/articulos/diseñoweb.html
Acceso: 2 de febrero del 2003.
2. Asociación de Empresarios de Nerja. Consejos para diseñar nuestro web. Disponible en:
http://www.webpopulis.com/aen/tutoriales/internet/w_design.htm
Acceso: 4 de febrero del 2003.
3. Estrella Cabrera A. Repensar la Usability. Disponible en:
http://www.quiber.com/articulos/articulos/txtart7.htm Acceso: 4 de febrero del 2003.
4. Arabito J. Observatorio de la sociedad de la información: De la catedral al libro, y del libro al Bazar de las Redes. Las nuevas tecnologías de la información y la comunicación en la transformación social y cultural de principio del milenio. Disponible en: http://www.tierralibredigital.com.ar./obv_soc_info_nota13.htm
Acceso: 4 de febrero del 2003.
5. Gómez Hernández JA. La alfabetización informacional como servicio de las bibliotecas. Abril 2002. Acceso: 04/02/03. [286 pantallas]. Disponible en:
http://216.239.51.100/search?q=cache: Acceso: 4 de febrero del 2003.
6. Gómez Hernández JA. Prácticas y experiencias de alfabetización informacional en universidades españolas. Disponible en:
http://216.239.39.100/search?q=cache
7. López Quesada JA. Consejos para diseñar nuestro web. Disponible en:
http://www.vdigitalrm.com/ConsejosWeb.htm Acceso: 6 de febrero del 2003.
8. Gullikson S, Blades R, Bragdon M, McKibbon S, Sparting M, Toms EG. The impact of information architecture on academic web site usability. Disponible en:
http://dois.mimas.ac.uk/DoIS/data/Articles/julfpcatty:1999:v:17:i:5:p:293-306.html Acceso: 8 de febrero del 2003.
9. Gómez Hernández JA. Orientaciones didácticas para la mejora de la alfabetización informacional. Disponible en: http://216.239.39.100/search?q=cache
Acceso: 10 de febrero del 2003.
10. Piscitelli A. Alfabetización tecnológica. Del pensamiento en línea al pensamiento en superficie. Disponible en:
http://www.ilhn.com/datos/teoricos/archives/2002_10.php Acceso: 8 de febrero del 2003.
11. Corrales Díaz C. El sistema web como herramienta de comunicación. Disponible en: http://www.proyectoweb.cubaweb.cu/boletines/023-oct02.html#2
Acceso: 17 de febrero del 2003.
12. Jorda A. Distintas Ofertas: Un mismo web. Boletín Electrónico Quincenal sobre Diseño, Usabilidad y Arquitectura Web 2002;1(19). Disponible en: http://www.proyectoweb.cubaweb.cu/boletines/019-ag02.html#1
Acceso: 17 de febrero del 2003.
13. Nielsen J. Consideraciones para el Rediseño de Sitios. Boletín Electrónico Quincenal sobre Diseño, Usabilidad y Arquitectura Web 2002;1(19). Acceso: 17/02/03. [ 5 pantallas] Disponible en: http://www.proyectoweb.cubaweb.cu/boletines/019-ag02.html#2
Acceso: 17 de febrero del 2003.
14. Reyes R. Diseño Gráfico us Diseño Web. ¿ Es el diseño web una disciplina compleja? Boletín Quincenal sobre Diseño, Usabilidad y Arquitectura Web 2002;1(19). Disponible en:
http://www.proyectoweb.cubaweb.cu/boletines/015-jun02.html#1
Acceso: 18 de febrero del 2003.
15. Martí F. Arquitectura Web: algo más que Diseño Web. Boletín Quincenal sobre Diseño, Usabilidad y Arquitectura Web 2002;1(19). Disponible en: http://www.proyectoweb.cubaweb.cu/boletines/014-may02.html#2
Acceso: 18 de febrero del 2003.
16. Neuberger R. El web: un mundo de colores. Boletín Electrónico Quincenal sobre Diseño, Usabilidad y Arquitectura Web 2002;1(19). Disponible en: http://www.proyectoweb.cubaweb.cu/boletines/022-sep02.html#1
Acceso: 18 de febrero del 2003.
17. Departamento de Control de Calidad y Auditoría Informática. Evaluación de sitios web.Disponible en: http://216.239.57.100/search?q=cache:
Acceso: 20 de febrero del 2003.

Recibido: 21 de septiembre del 2003. Aprobado: 8 de octubre del 2003.
Lic. Jorge Luis Pérez Subirats. Biblioteca Médica Nacional Calle 23 No. 177 esq. N. El Vedado, Plaza de la Revolución
Ciudad de La Habana. Habana 4, Cuba. CP 10 400 AP 6520 Correo electrónico: jorgelu@bmn.sld.cu

1Licenciado en Información Científico - Técnica y Bibliotecología. Biblioteca Médica Nacional
Indice Anterior Siguiente

Fuente: http://www.bvs.sld.cu