Introducción

Uno de los elementos mas importante de una Web, es el diseño de la misma, debido a que de este dependen muchas cosas entre ellas su éxito. Dicho paso se realiza luego de haber organizado el Site. Es decir, definir cuál va a ser el propósito del sitio web, sus contenidos y la audiencia potencial de la que dispondrá. Lo que va a determinar la estructura de la web van a ser en gran medida los contenidos.

Asimismo diseñar intentando abarcar a todos los usuarios y todas sus posibles objetivos significa crear diseños poco usables que no satisfacen a nadie. La creación de perfiles de usuarios (enfoque "persona") y escenarios de uso ayudan enormemente a diseñar un sitio web.

 

Diseño de un Web Site

 

Presentar el contenido de forma atractiva es primordial a la hora de construir tu web, sea una web de aficionado o una web profesional de negocios. En esta sección verás sobre imágenes y distribución de los elementos de las páginas. Por otro lado, a la hora de diseñar la web hay dos conceptos que conviene tener en cuenta y que son la accesibilidad y la usabilidad.

Accesibilidad

La web se hace con la idea de que sea vista por el mayor número de personas y en múltiples países, pero cada uno de los visitantes va a acceder a ella con un equipo y una forma de navegar que, si no lo tenemos en cuenta, le impida apreciar el diseño o que no lo vea en absoluto. Los factores técnicos y de navegación que afectan a la visualización correcta de una página web son:

• Conexiones lentas a Internet.
• Ordenadores que no tienen flash ni plug-ins instalados, muchas veces sencillamente porque su propietario no quiere.
• Ordenadores con tarjetas gráficas que sólo permiten 256 colores.
• Ordenadores con pocas fuentes instaladas.
• Usuarios con equipos portátiles.
• Monitores de baja resolución.
• Distintos tipos de exploradores.
• Usuarios que tienen desactivada la carga de imágenes en su explorador.
• Versiones antiguas de los exploradores.
• Usuarios con deficiencias visuales que activarán las fuentes más grandes y aumentarán el contraste del texto y los fondos.
• Usuarios con deficiencias motrices que les impiden manejar el ratón y usarán sobre todo el teclado.

Como es casi imposible contemplar todos estos factores en el diseño de la web, es conveniente tener presente estos 3 principios para lograr que su accesibilidad sea lo mayor posible:

1. La web debe adaptarse al equipo del visitante transformando su aspecto de forma correcta.

2. El texto es siempre lo más accesible para cualquier usuario. Por ello se debe poner siempre un texto alternativo a las imágenes.

3. El contenido debe ser navegable. Hay que colocar elementos de navegación claros y correctamente situados que permitan moverse por la web en todas direcciones.

Usabilidad

Una web muy lograda desde el punto de vista del diseño, pero con una baja usabilidad será un fracaso seguro de visitantes. Se podría dar infinidad de recomendaciones en este sentido:

• Diseñar la web pensando en el punto de vista del visitante
• La mayoría de los internautas se cansa de esperar a que cargue una página lenta. Debe ser lo más rápida posible.
• Navegación fácil e intuitiva.
• No agobiar con complejas y pesadas presentaciones. Ir al grano.
• Contenidos rigurosos y escuetos. Las páginas cargadas de texto suelen cansar. Si no hay más remedio, dar la opción al visitante mediante un archivo de texto, de imprimir el texto para leerlo en papel que es mucho más cómodo.
• No abusar de los colores chillones, de la negrita y, mucho menos, de los mensajes parpadeantes que a muchas personas molestan y no son, en el fondo, necesarios.
• Evitar si se puede la aparición de barras de desplazamiento horizontal a partir de una resolución de 800x600. No merece la pena diseñar pensando en resoluciones menores que ya casi no se encuentran.

Recomendaciones para el Diseño del Web Site

Recomendaciones Generales:

Debido a la gran importancia del diseño de un Site en la Accesibilidad, debemos considerar una serie de factores y elementos. Por otro lado, la forma de redactar, organizar y diseñar una información para ser publicada en un servidor web conectado a la red Internet, es muy diferente de cómo nos plantearíamos este trabajo si fuera a publicarse en el soporte tradicional en papel. Deberemos tener en cuenta toda una serie de cuestiones que son propias y específicas de esta tecnología:

1. Los contenidos y el tipo de usuarios a quienes están dirigidos

Lo más importante en una página web son los contenidos. La búsqueda de cualquier información en Internet suele ser una larga navegación de página en página, necesitando emplear mucho tiempo para encontrar información útil. La manera de diseñar y organizar nuestra información estará claramente condicionada por el tipo de contenidos y, sobre todo, por el usuario al que van dedicados.

I. Páginas redactadas para personal o estudiantes de la propia universidad y que pensamos que se van a consultar principalmente en los ordenadores de nuestra red: podemos permitirnos ficheros más grandes, ya que las comunicaciones son rápidas y el tiempo de espera será mínimo.

II. En el caso de materiales que pensemos que se van a consultar desde ordenadores ajenos al apropia universidad: tendremos que ser muy cuidadosos con el tamaño de los ficheros

III. Materiales orientados a extranjeros, especialmente latinoamericanos que suelen usar ordenadores muy lentos: debemos hacer las páginas lo más rápidas que sea posible.

IV. Información que sospechamos los lectores van a preferir leer en forma impresa: intentar que toda la información vaya en un solo documento y utilizar una tipografía apropiada, aprovechando los márgenes de la pagina

V. Paginas orientadas a usuarios con mayores conocimientos de Internet: podemos presuponer que dispondrán de mejores equipos y que no se sorprenderán con la inclusión de tecnologías más avanzadas que las simples

2. Difusión y publicidad de las páginas

Poner la información en un servidor web no es garantía suficiente de alcanzar a todos los usuarios potenciales deseados. Necesitamos dar difusión a la existencia de nuestras páginas si deseamos que cumplan su función. Lo más normal es que nuestros usuarios alcancen nuestro web tras una búsqueda en alguno de los numerosos motores de búsqueda existentes. Para que aparezcan nuestras páginas reflejadas en estos buscadores, debemos tener en cuenta los elementos que estos usan para localizar información:

I. Poner claramente el título del documento
II. Introducir algunas palabras clave en la etiqueta <meta> del lenguaje html
Incluir el máximo de información significativa posible en las primeras 25 líneas de la página, ya que algunos motores de búsqueda las usan para indexar su base de datos.

3. El hipertexto y la posibilidad de "navegar" por la información

En un documento en papel solemos movernos por la información de una forma lineal: una hoja tras otra. Sin embargo, en una página web el hipertexto nos permite irnos desplazando de un documento a otro con el simple acto de pulsar sobre un enlace. Esta peculiar forma de navegar por un conjunto de información entrelazada puede provocar cierta desorientación por parte del lector, ya que con un solo paso puede haberse desplazado tanto a una sección diferente del mismo web, como a un web totalmente distinto. Además, raramente podremos incluir toda nuestra información en un solo documento; tendremos que fragmentarla en diversos ficheros.
Estas dos circunstancias nos obligan a intentar estructurar lo mejor posible la información, de forma que nuestro lector esté siempre bien orientado sobre en qué sección se encuentra y entienda la relación entre la página que está viendo con las demás de nuestro web. Esto podemos conseguirlo con diversas ayudas:
1. Realizando páginas de índice lo más claras posible.
2. Usando los botones de navegación que permitan al usuario volver a las páginas de índice, a la página principal o desplazarse a las páginas relacionadas.
3. Incluyendo gráficos o colores diferentes según la sección de nuestro web en que nos encontremos.


Otra Recomendaciones:

1. Longitud de las páginas
Las páginas deberán hacerse lo más cortas y concisas posible. Está demostrado que a la gente no le gusta leer en la pantalla de un ordenador: la vista se cansa y la gente se "aburre". Además, el hecho de tener que desplegar mucha cantidad de texto (y/o imágenes) en la pantalla, puede producir desorientación en el lector, ya que pierde las referencias de la cabecera y las ayudas a la navegación. Cuanto más importante sea una página y más atención requiera por parte de los lectores, más corta debe ser. Si el contenido es especialmente interesante, esto se debe demostrar dentro de lo que se ve en el primer pantallazo.
Suele recomendarse un máximo de 4 pantallazos como longitud aceptable para una página. Si necesitamos incluir más información deberemos considerar la posibilidad de dividir el contenido en varias páginas o bien hacer un índice de contenidos al principio del documento con enlaces a las diversas partes.
2. Los nombres de los ficheros
Una de las principales dificultades a la hora de realizar un documento www es que nosotros estamos trabajando en un PC con el entorno Windows, pero nuestras páginas van a residir en una máquina con el sistema operativo UNIX. En UNIX son especialmente importantes las mayúsculas/minúsculas, lo que debemos tener en cuenta a la hora de poner el nombre a un fichero y hacer un enlace al mismo: si pusimos el nombre en minúsculas, deberemos hacer igual los enlaces. Si no lo hacemos así, puede que los enlaces e imágenes se vean bien en nuestro PC, pero no será así en el servidor. Lo mismo sucede con las extensiones de los ficheros: podemos emplear ".html" o ".htm", ".jpg" o ".jpeg" pero deberemos respetar esto a la hora de hacer los enlaces.
Otros elementos que debemos evitar al poner nombres a los ficheros son:
1. Caracteres especiales como ñ, ç, ¿ ª ", etc.
2. Espacios en blanco
3. Letras con acentos
3. Páginas con frames o marcos
Las páginas con frames o marcos permiten dividir la pantalla en diferentes ventanas, con un documento html diferente en cada una de ellas. Se suelen utilizar bastante ya que nos permiten ejercer un gran control sobre la disposición general y la apariencia de la página. Sin embargo, deben utilizarse con cautela, ya que tienen algunos inconvenientes:
· No se podrán hacer bookmarks o marcadores a las partes.
· Habrá dificultades para imprimir las páginas individuales.
· No se pueden "copiar" las URLs.
· El botón de anterior o back de los navegadores puede no funcionar correctamente.
· Reducen el espacio útil donde visualizar la información.
· No todos los navegadores soportan marcos.
· Podemos tener dificultades si alguien quiere hacer un enlace a una de nuestras páginas: al aislar una parte del resto de los marcos, esta puede perder el sentido.
4. Imágenes
Dado que cuanta mayor calidad tiene una imagen, más ocupa, deberemos encontrar un compromiso entre la calidad de la misma y la información que se quiere mostrar. Son muy raras las ocasiones en que es necesario poner una imagen de alta calidad en nuestras páginas. Existen programas de tratamiento de gráficos que permiten "bajar" la calidad de una imagen de forma razonable.
5. Colores y fondos
En nuestras páginas web deberemos tener cuidado en emplear una armonía de colores que no perturbe la lectura de las páginas, procurando no emplear colores estridentes o combinaciones extrañas. No se deben cambiar los colores standard de los enlaces (azul para los enlaces, violeta para los enlaces visitados), puede confundir a los lectores. De la misma manera, no se deben utilizar estos dos colores a lo largo del texto, ya que la gente tiene tendencia a pinchar sobre ellos.
Lo mejor es utilizar fondos de colores claros y texto de color oscuro, ya que son tonos que se suelen leer con mas comodidad, por lo que siempre se debería hacer así en páginas en las que predomina el texto. En el caso de usar un color de fondo muy oscuro tendremos que emplear una tipografía en blanco u otro color muy claro, con lo que se impide la impresión correcta de la página (pocas personas tienen configurado su navegador para que imprima los fondos).
6. La URL de la páginas: asignación de "alias"
El servidor web de la Universidad tiene gran cantidad de información, dividida en muchos directorios. Esto a veces puede provocar que la URL de una página sea muy larga. Existe la posibilidad de asignar una dirección "corta" que facilite a nuestros usuarios recordar la dirección de una página. Además, estas URL quedan mejor si vamos a publicitar la página en algún medio impreso: un anuncio de prensa, un tríptico que pondremos en un mostrador, etc.
Las direcciones cortas suelen tener este aspecto:
http://www.uc3m.es/nombre
Si deseas un "alias" para tu página, puedes solicitarlo a www-team@uc3m.es

Lo que NO hay que hacer en el Diseño de un Site

Existen multitud de tentaciones en las que no hay que caer a la hora de diseñar nuestras páginas Web, y la lista que va a continuación es sólo una pequeña muestra de lo que no hay que hacer.

Fondos recargados
Es mejor que el fondo de las páginas sea blanco o de un color claro y neutro que facilite la lectura de la misma. No es recomendable utilizar una imagen de fondo, pues solo va a distraer a los visitantes y quizás imposibilitar la lectura del texto.
Gráficos por doquier
Sólo hay que utilizar elementos gráficos cuando aporten algo a la página, y en ese caso es mejor que sean sencillos y ocupen poco espacio. Esto hará que la página se cargue más rápidamente.
Parcelar con marcos
Los marcos (frames) pueden ser útiles para mantener información siempre visible en la página, pero inducen a errores y dificultan la navegación. Es mejor utilizar tablas en su lugar, y si no queda más remedio, que no sean más de 3 marcos.
Modelo papiro
Crear páginas lineales produce un derroche de espacio. Es mejor utilizar un modelo de página en dos columnas. Esto se puede conseguir con la utilización de tablas, que aunque no es la mejor solución, es la única sencilla.
Contadores de visitas
El mero contador de visitas no aporta demasiada información sobre los visitantes. Es mejor que se utilicen herramientas más sofisticadas y menos agresivas para analizar el diario de visitas de las páginas.
En Construcción
Es mejor que un enlace que conduce a una página en blanco con el letrero ``en construcción'' no existiera, o es que se imagina que el visitante va a volver a la semana a ver si por fin se ha construido la página. Además, la mayoría de las páginas en construcción siguen inacabadas por siempre.

Infografía

1. Trucos para un Web Site

http://www.svetlian.com/Webmaster/art_diez.htm

El autor de dicha página comparte algunos trucos para irritar a las visitas y hacer de que ya no vuelvan (ahorrándote de esta manera el dinero que pagas a tu ISP).

2. Diseño de un Web Site

http://espaciolatino.com/creatuweb/index.htm

En estas páginas vas a encontrar las líneas básicas para crear tu sitio web. No vas a encontrar una herramienta para crear unas páginas impersonales. Ni una receta mágica. Un sitio web es algo más que una suma de páginas web

3. 8 pasos para hacer la Web de tu Centro Educativo (o de lo que sea)

http://www.joseacortes.com/recursosweb/index.htm

Este site posee información sobre el diseño de un Web Site, desde el Registro del dominio hasta el control y mantenimiento del mismo.

4. Diseñar para lo más probable y no para todo lo posible

http://www.masterdisseny.com/master-net/psico/index.php3

No explica como los sitios web deben diseñarse para usuarios concretos y sus objetivos más probables. Diseñar intentando abarcar a todos los usuarios y todas sus posibles objetivos significa crear diseños poco usables que no satisfacen a nadie. La creación de perfiles de usuarios (enfoque "persona") y escenarios de uso ayudan enormemente a diseñar un sitio web.

5. Webs que no tienen éxito

http://personales.jet.es/inforpesca/pagina_n14.htm

Site que posee información acerca de porque algunas webs no tienen éxito. También muestra algunos negocios que si tienen éxito y el por qué de esto.

6. No es accesible todo lo que reluce

http://www.emergia.net/investigacion/articulos/20030527.asp

En este Site se discute la conveniencia de utilizar versiones accesibles especiales y la utilidad de los validadores y sellos de conformidad para garantizar la accesibilidad.

7. Cómo se mide la audiencia en Internet

http://www.consumer.es/discapacitados/es/especiales/2004/06/10/103994.php

Sean o no un negocio, todos los sitios web están interesados en saber cuántas visitas tienen y conocerlas en la medida de lo posible.

8. Portal para el Diseño de Web educativas

http://www.educase.edu

Este Site es una iniciativa para el desarrollo de la educación superior a través del uso inteligente de las tecnologías de la información.

9. Métrica de la Web

http://juanleyva.metricasweb.com/tutoriales/metricas_web/

En este site se nos da una visión las métricas Web, explicando que son un conjunto de métricas encargadas de expresar matemáticamente los aspectos más significativos relacionados con un sitio Web.



10. Fundamentos de Mercadotecnia

http://www.imageandart.com/tutoriales/teoria/diseno_interfaces/

Este Web site posee información acerca de como los usuarios de documentos Web no sólo miran la información, sino que interactúan con ella en nuevas maneras sin precedente en el diseño de un documento en papel. Asimismo explica de manera sencilla algunos elementos de diseño.

Dinámica

Verdadero y Falso

1.- Una web muy lograda desde el punto de vista del diseño, pero con una baja usabilidad tendría éxito de todas formas.

V_ F_

2.- La tendencia actual es diseñar intentando abarcar a todos los usuarios y todas sus posibles objetivos para satisfacer a muchos visitantes,

V_ F_

3.- Es mejor utilizar Marcos en vez de tablas para el diseño de un Site.

V_ F_

4.- Uno de los principios para lograr que su accesibilidad sea lo mayor posible es que la web no debe adaptarse al equipo del visitante transformando su aspecto de forma correcta.

V_ F_

5.- Mientra mas complejas sean las presentaciones de nuestra site mayor será su Usabilidad.

V_ F_

6.- Uno factores técnicos y de navegación que afectan a la visualización correcta de una página web es el de Ordenadores con tarjetas gráficas que sólo permiten 256 colores.

V_ F_

7.- En el diseño de un Site debemos tratar de aparezca las barras de desplazamiento horizontal a partir de una resolución menor de 800x600.

V_ F_