¿Cómo debe ser la estructura de una página web?
Si estás pensando cómo hacer una página web y no sabes por dónde empezar, puede que te venga bien leer este post, donde vamos a analizar un poco las principales partes de una página web básica más allá de que tenga un diseño web responsive, ya que hemos comprobado que en numerosas ocasiones nos encontramos con sitios muy enrevesados, y ya no estamos hablando de si es bonita o fea, que eso sería otro tema a tratar. Hablamos de páginas en las que se ve que no se tiene muy claro dónde o cómo poder encontrar los que estamos buscando, lo que conlleva a una mala experiencia de usuario y a que éste vuelva por donde ha venido y no aparezca más por dicha web.
En la mayoría de los casos lo que mejor funciona es lo más sencillo, y es que hay unos patrones del diseño de páginas web ya establecidos principalmente debido a que como usuarios estamos acostumbrados a ver las páginas que visitamos de una determinada manera, y cuando nos encontramos alguna que por original nos descoloca, pues la tasa de abandono se incrementa notablemente, así que es mejor no salirse demasiado por la tangente y no tratar de ser original sin estar muy seguro de lo que hacemos. Así que la primera recomendación para hacer una página web desde cero es aprovecharnos de las tendencias actuales y mostrar una web limpia, con los elementos justos y necesarios, y por supuesto con un diseño web responsive que ya hemos tratado en otro post.
Los principales elementos para realizar una correcta estructura de una página web básica son los de toda la vida. A saber: la cabecera o header, el menú de navegación, el contenido principal y el pie de página o footer. Vamos a desgranar en unas breves notas lo que se espera o no de ellos y algunos consejos de composición, ya que la experiencia de usuario es cada vez más exigente, y en sólo un instante (se dice que en menos de un segundo) decide si continuar con la visita, o no, tras una primera impresión del sitio web que acaba de visitar.
Cabecera o header
Lo primero que debemos tener en cuenta en el header es su altura para que no sea demasiado grande y nos reste visibilidad al resto de elementos de la página web. Esto nos pasa a veces cuando queremos que nuestro logo se vea bien grande, enorme, y lo ponemos ahí para que los usuarios tengan claro qué están viendo, pero quitamos eficiencia al sitio web. Para solventar este tema debemos tener recursos y para ello lo mejor es tener dos versiones de un logo. Uno de ellos debe ser alargado (a lo ancho, no a lo alto), para que, entre otras cosas, lo podamos colocar en el header de nuestra página web. La otra versión debe ser cuadrada, perfecta para utilizarla como avatar en las redes sociales, además de utilizarla como favicon, que es esa pequeña imagen de tamaño muy reducido asociada a una página web, que aparece en las pestañas de las páginas que tenemos abiertas en el navegador.
¿Qué espera el usuario cuando entra en una página web? Lo primero que miramos todos cuando entramos en un sitio desconocido es saber cuál es la información del sitio (el nombre de la web y de qué trata) y para ello nos dirigimos siempre, siempre a la parte superior izquierda, por lo que lo mejor es no ser original en este punto y dejarlo ahí. A la derecha del logo puedes colocar unos pequeños botones para las redes sociales, una caja de búsqueda en el site, una dirección de correo electrónico o un teléfono, que son pequeños detalles que deben estar siempre visibles y en todos los elementos de una página web básica, así que la cabecera o header es el lugar perfecto para ello.
Menú de navegación
Debemos tener cuidado con la información que queremos o podemos ofrecer, ya que si damos demasiadas opciones el lector se dispersa y puede ser contraproducente. Por ello es mejor ser escuetos, agrupar la información disponible que vamos a mostrar y tampoco abusar de los submenús. En cualquier empresa se hacen imprescindibles en el menú de navegación los siguientes botones o enlaces a páginas internas:
- Inicio, que lleve a la portada de la web donde se mostrará la información principal del sitio.
- Quiénes Somos, Sobre Nosotros o similar, que es una de las páginas más visitadas por los usuarios antes de comprar o contratar nada, ya que como es lógico el usuario que está a punto de efectuar una compra quiere saber a quién lo hace. Un consejo sobre el contenido: no inventes. Di la verdad sobre quién eres, y por supuesto haz hincapié en tus virtudes y tus sueños. ¿Por qué estás aquí? El problema de inventar o mentir es que siempre hay alguien que sabe la verdad, y la gente habla. No pierdas tiempo en inventar y aderezar historias y sé sincero.
- Servicios, Productos o Qué Ofrecemos, que muestre a los clientes potenciales a qué nos dedicamos y sobretodo por qué nos deben contratar o en qué va a mejorar lo que vendamos al usuario final que está a punto de comprar.
- Contacto, donde además de tener un formulario de contacto, debemos dejar claro un correo corporativo, un teléfono y una dirección postal, con un mapa a ser posible. Es increíble la cantidad de páginas web en las que hay que hacer una verdadera labor de investigación para poder descubrir cómo contactar con ellos.
Estos serían los elementos básicos que debemos mostrar en el menú de navegación, realmente no hace falta mucho más. Si tenemos un blog donde queremos publicar noticias de actualidad de nuestra empresa, pues también lo colocamos. En este sentido tenemos que decir que tener un blog es para ser constante. Hay que escribir con frecuencia periódica. ¿Cada cuánto debo escribir? Según el tiempo o ganas que quieras dedicar, pero lo más importante es ser constante, ya sea una vez al día, a la semana o al mes, pero dejar un blog a medias en una página de una empresa es una señal de dejadez que restará ventas, así que para no mantenerlo actualizado, mejor no tenerlo.
Por lo demás, respecto al menú de navegación, hay que tener cuidado con no poner muchas pestañas, con cinco o seis será suficiente. Además, para organizar el contenido podemos utilizar los submenús, aunque en este sentido recomendamos no crear más de uno o dos niveles como máximo.
Contenido principal ¿debemos utilizar una barra lateral o sidebar?
Desde luego, en la página de inicio tenemos que decir con rotundidad que nada de barras laterales. Toda la información debe estar al 100% del ancho que nos permita la página web, en columnas para poner iconos, imágenes o lo que queramos, pero nada de un menú lateral en la home. En páginas interiores, pues eso ya va en gustos. Hace unos años todas las webs tenían una sidebar. Ahora ya se lleva mucho menos, y es que primero hay que pensar qué información de utilidad vamos a ofrecer al lector en este apartado. Además, el espacio de la sidebar es espacio "perdido" que podríamos utilizar en la información de la página en cuestión. Antes nos volvíamos locos colocando “widgets” que no valían para nada: el del tiempo, el de las imágenes de flickr, el árbol de publicaciones… Hay que pensar en poner algo útil, de relevancia para el lector, o en caso contrario, se deja al 100% del ancho al igual que la home.
En greetik.com, por ejemplo, tenemos la mayoría de las secciones de la página web al 100% del ancho. Sin embargo en el blog sí que hemos dispuesto una sidebar con una nube de etiquetas, otras publicaciones y un formulario pequeño de contacto, que son elementos de una página web que pueden incitar al lector a permanecer unos minutos más en nuestra web, y que acabe comprando o contratando nuestros servicios.
Footer
El último elemento principal a la hora de organizar la estructura de una página web básica es el pie de página o footer, que suele estar diferenciado del resto con un color de fondo diferente, en el que se incluyen enlaces de interés, datos de contacto o los links a las redes sociales, entre otras cosas. Aquí se pueden incluir aspectos interesantes de cara al posicionamiento SEO de la página web para luego poder establecer estrategias de marketing online o analítica web, como poner un resumen de los servicios que ofrecemos o a qué nos dedicamos (con sus enlaces), así como ciertas páginas o secciones de la página web que pueden ser de utilidad o incluso obligatorios por ley (como por ejemplo la política de privacidad, términos y condiciones…), pero que no los colocamos en el menú navegación para no sobrecargarlo, por lo que el footer es el sitio idóneo para colocar estos enlaces.
No te compliques en el diseño de una página web
Como dijimos al principio, lo sencillo es lo que mejor funciona. Sobretodo debemos tener en cuenta que el usuario espera una determinada composición de una página web para encontrar lo que busca, ya que la estructura de un sitio web se ha mantenido más o menos en el tiempo. Si queremos ser originales y cambiarlo todo de sitio a la hora de hacer una página web básica, o somos indispensables en la vida de la gente, o al dificultarles la navegación web a los usuarios no volverán a aparecer por nuestro sitio web.
