4º ESO

9.3 Crear un sitio web

Como ya hemos comentado al principio, los dos principios que deben guiar el diseño de un buen sitio web son la accesibilidad y la usabilidad.

Accesibilidad: (o accesibilidad universal) es la cualidad de fácil acceso para que cualquier persona, incluso aquellas que tengan limitaciones en la movilidad, en la comunicación o el entendimiento, pueda llegar a un lugar, objeto o servicio (Observatorio de la accesibilidad).
Accesibilidad Web significa que hay un acceso universal a un sitio web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. Esto implica que todas las personas, independientemente de sus conocimientos o capacidades personales, incluidas las personas de edad avanzada que tienen merma de alguna habilidad, puedan percibir, entender, navegar e interactuar con el sitio web.
Entre otras cosas, las imágenes deben incluir un texto equivalente alternativo (ALT), los enlaces deben tener un nombre significativo que proporcione información al ser leído por lectores de pantalla o líneas Braille, se deben evitar las tablas porque dificultan la lectura ordenada de los lectores de pantalla y los vídeos deben tener subtítulos. Puedes aprender más en esta breve guía para crear un sitio web accesible del consorcio W3C.
Usabilidad (neologismo no admitido por la R.A.E.): Es la cualidad de un objeto que permite a los usuarios interactuar con él de una manera intuitiva, fácil, rápida y cómoda.
La usabilidad de un sitio web es la medida de la calidad de la experiencia que tiene un visitante al acceder al contenido y navegar por él. Para que una página web sea usable hay que poner el diseño al servicio del usuario.

A ambas características contribuyen una buena distribución de los contenidos, menús y enlaces e iconos de navegación en la estructura de la página web y un diseño consistente.

Los elementos a los que debemos prestar atención son:

Diseño

Distribución de los elementos

El diseño de la página web debe ser limpio, colocando únicamente el contenido más relevante en una primera capa. Hay que evitar el exceso de imágenes y de animaciones haciendo un uso inteligente del espacio en blanco.

Los cuatro componentes en los que se distribuyen los contenidos y enlaces son:

Cabecera: Debe ser un componente repetido en todas las páginas del sitio. Debe contener el nombre y logo de la organización. Además puede contener una barra de menú completa o el acceso a las secciones de [Contacto] o [Acerca de].
Cuerpo: Es donde se encuentra toda la información importante y donde más variaciones de diseño se producen en función de si es la portada o una página de noticias o el catálogo de productos o la galería de imágenes o ...
Barra lateral: Puede estar a la izquierda, a la derecha o en ambos lados. Contienen contenido complementario no relacionado directamente con el del cuerpo, como accesos a otras secciones relevantes, calendarios, anuncios o enlaces a otras web o a redes sociales.
La barra lateral está desaconsejada en sitios destinados a visitarse desde teléfonos móviles.
Pie: Aunque no siempre se le dedica la atención debida, es un componente necesario donde se presenta el acceso a información secundaria como los derechos de uso, autoría de la web, resumen de los datos de contacto, u otra información de tipo legal o administrativo. En ocasiones se utiliza para poner una copia del menú de contenidos y así evitar al usuario que tenga que desplazarse verticalmente.

Para decidir que diseño consideráis más adecuado es aconsejable hacer varios borradores (¡varios es más de dos!, ¿qué tal uno cada componente del equipo?) con el croquis de cómo distribuir los menús, contenido, gráficos,... y elegir por consenso el que más os guste.

Patrón en F

Otro aspecto que hay que considerar es el patrón con el que distribuir el contenido.

La mayoría de quienes visitan una web no se detienen a leerla de manera secuencial, línea por línea de izquierda a derecha, sino que la escanean desplazando la mirada. Jacob Nielsen hizo en 2006 un estudio, analizando el desplazamiento de la mirada de 232 usuarios. Su conclusión es que ante una web de texto sin subtítulos, negritas ni listas el movimiento de los ojos sigue un patrón en forma de F, lo que no es bueno para el visitante ni para un negocio, porque puede que la información importante no esté en las primeras líneas ni al inicio de las siguientes. Además, el texto se distribuye de diferente forma según el tamaño y resolución de la pantalla. Las líneas en la pantalla de un móvil son más cortas que en un monitor de 17 pulgadas.

Ello hace aconsejable poner la información relevante en los dos primeros párrafos, poner títulos y subtítulos y resaltar en negrita las palabras y frase importantes.

Si te interesa saber algo más sobre este patrón de diseño puedes ampliar información haciendo click en la imagen (en inglés).

Espacio en blanco

También conocido como espacio negativo, no tiene por qué ser blanco. Es el espacio de la página web que está libre de contenido entre cuerpo y columna o entre imágenes o entre párrafos.

No solo evita que el visitante se sature, se maree y abandone la página. También sirve tanto para facilitar la lectura del texto, adecuando la anchura de las columnas y la distancia entre los párrafos y títulos, como para atraer la atención de los usuarios hacia el botón [Comprar] o para resaltar una imagen.

Diseño consistente

Como ya se ha indicado el diseño de las distintas páginas web de un mismo sitio varía en función del tipo de contenido que ofrecen. Por eso es importante que el diseño sea consistente para que el visitante no tenga la sensación de que está navegando por sitios distintos. Los colores de fondo, texto y menús (con dos o tres colores principales que armonicen y contrasten es suficiente), la tipografía (no debes utilizar más de dos tipos de fuentes diferentes), los iconos y otros elementos visuales deben permanecer constantes en todas las páginas del sitio.

Esta web de Christian Leis os puede ayudar en la selección de los colores.

Plantilla

El uso de una plantilla o tema como base es aconsejable para facilitar la tarea de la construcción de vuestra primera web porque os proporciona un diseño probado en los distintos navegadores. Hay algunas que también son responsive, es decir, que se adaptan a la pantalla sea de PC, tableta o teléfono móvil.

Utilizar una plantilla no significa plasmarla tal cual y rellenarla de contenido. La plantilla puede ser la base de vuestro diseño, pero debéis personalizarla con vuestro logo, imágenes o retoque de colores.