Imagina que vas a decorar tu casa, y decides decorar la cocina al estilo oriental, el dormitorio principal con estilo clásico, la habitación de invitados con estilo barroco y las áreas comunes de tu hogar estilo campestre. Probablemente si lo hiciste así es porque en tu cabeza tenía sentido en su momento y te gustó, pero si vas a alquilar tu casa probablemente no tengas mucho éxito.

Pues con el diseño de tu sitio web ocurre lo mismo. Necesitas crear un diseño consistente que asegure un funcionamiento amigable para tus visitantes, así como una mayor accesibilidad, y mejor SEO. Un sitio web diseñado con el usuario en mente, le ofrece a los visitantes una mejor experiencia y te asegura:

  1. El regreso de tus visitantes (o un futuro cliente feliz o un lector contento con tu blog),
  2. Menor tasa de rebote (es decir que permanecen en tu sitio web por más tiempo, sin importar la manera en que hayan llegado a la misma),
  3. Mejor accesibilidad para todos (no es necesario navegar por internet para apreciar las características necesarias que hacen a un sitio más accesible),
  4. Más enlaces hacia tu sitio (quiero puntualizar que el funcionamiento amigable con el usuario es la forma más fácil de obtener tráfico orgánico al sitio). Algunas de las estrategias para aumentar los enlaces o links hacia tu sitio web son:
    • Social Bookmarking: Crear una campaña de social bookmarks requiere de una serie de pasos, como son el registro en sitios destinados al bookmarking, creación de tu perfil (como si estuvieses creando cualquier cuenta de redes sociales), así como la incorporación de tus links, colocación de etiquetas y designación de los links como públicos o privados.
    • Redes Sociales: Tratar de generar tráfico a través de las redes sociales hacia tu sitio.
    • Que te mencionen en otros sitios web: Alguien puede escribir un artículo basado en el sector de negocios de tu empresa o sobre algo que hayas escrito en tu blog por el solo hecho de que tu sitio web es de fácil acceso y amigable con tus visitantes.
    • El boca a boca: la vieja y querida mención de tu sitio web por el boca a boca entre tus usuarios sigue siendo igual de efectiva. El diseño web es tan importante como el contenido que ofrezcas.

Piensa a lo grande

Hay que pensar en grande. Cuanto más fácil y amigable con el usuario sea tu blog o sitio web, más fácilmente generarás una comunidad para tu negocio online. Pero la gran pregunta que te debes estar haciendo es cómo lograrlo.

Pues, por ejemplo, utilizando diseños de sitios web convencionales, fuentes universales (que se encuentren tanto en PC’s como en MAC’s), enlaces fáciles de encontrar, haciendo el contenido de tu sitio web o blog imprimible y escaneable, evaluando constantemente el funcionamiento de tu sitio web… Estos son algunos de los principales aspectos que debes tener en cuenta a la hora de plantearte cómo desarrollarás la web de tu negocio online (o tu blog particular). Al leerlos pueden parecer características lógicas, sin embargo te sorprenderías de la cantidad de sitios que existen en la red que no cumplen con estos requisitos mínimos.

Busca un diseño web convencional

Antes hemos mencionado los aspectos básicos a tener en cuenta a la hora de elaborar el diagrama de tu negocio online. Cómo diseñes tu sitio web o blog es fundamental para el futuro de tu empresa. El contenido es fundamental, pero el mantenimiento, funcionamiento y diseño de tu sitio también lo son. Tenlo en cuenta.

Ser diferente es bueno, no me malinterpretes, sin embargo a la hora de diseñar un sitio web hay que tener en cuenta ciertas convenciones que se repiten en todas las páginas web o blog exitosos, ¿por qué?. Porque funcionan, simple y llanamente.

Gran parte de la idea de diseñar una página web memorable es que sea diferente al resto, pero si quieres reinventar algunos fundamentos convencionales, ¿tus visitantes entenderán cómo utilizar tu sitio de manera sencilla?.

Hace años trabajaba de diseñador gráfico en una papelería técnica. Recuerdo que cuando alguien quería hacer algo que se salía de lo convencional mi jefe siempre decía: Los inventos se acabaron en el 1900. Es decir, puedes innovar pero no inventes la rueda cuadrada.

Ten en cuenta que si optimizas tu sitio de manera correcta, un visitante que busque en Google o cualquier otro buscador una frase relacionada con tu contenido accederá a esa parte de tu web directamente. En general, será la parte dentro de tu sitio que mejor coincidirá con lo que el visitante está buscando, y no necesariamente será tu página de inicio. Es por esto que es necesaria cierta consistencia entre todas las partes de tu página, y por eso tendrás que añadir elementos típicos que deberán estar en cada una de ellas.

1) Logo y slogan o frase en cada página de tu sitio

Quizás no tengas un slogan o frase (aunque deberías) pero algún tipo de logo o encabezado debe estar presente para que tu visitante pueda identificar a quien pertenece el sitio web que está visitando.

2) Navegación típica

Dependiendo del tamaño de tu sitio web, puedes llegar a necesitar dos sistemas de navegación:

  • El navegador principal que enlaza las páginas importantes del sitio.
  • El navegador secundario que enlaza las secciones del sitio web.

La ubicación del navegador debe ser consistente con el sitio. La ubicación usual es en horizontal, en la parte superior de la página. Aunque si tienes una página web pequeña, puedes utilizar el navegador secundario cómo navegador principal y poner un menú vertical en la parte derecha o izquierda de la página.

El pie de página puedes utilizarlo para mostrar links cómo políticas del sitio, avisos de derechos de autor, información de envío, políticas de devolución de mercaderías o links a tus perfiles en las redes sociales.

El objetivo del sistema de navegación de tu sitio es facilitar a tu usuario llegar a la sección que está buscando de manera sencilla y rápida.

3) Búsqueda

Para los sitios más grandes, agregar una función de búsqueda mejora la funcionalidad del sitio. Cuanto mejor esté ubicado, mejor para tu sitio. La mejor zona es la parte superior, en el encabezado del sitio web.

Otros elementos que puedes incluir para mejorar la experiencia del usuario pueden ser un mapa del sitio HTML (un visitante perdido o aquel que quiere una vía rápida para encontrar la información que está buscando querrá una opción sencilla para encontrarla, además de que Google lo tiene en cuenta a la hora de indexar tu sitio). Otra opción muchas veces olvidada, es una página de error 404 personalizada. A veces el usuario de tu página cliquea un enlace escrito incorrectamente, lo que hace que la página no pueda ser encontrada. Quizás eliminaste esa sección de tu sitio o la renombraste. Una página de error 404 personalizada ayuda al usuario a llegar a la sección o artículo que esperaba encontrar.

Sobre las fuentes de letra

Un síntoma común que delata que utilizaste un sitio DIY (Do It Yourself / Hazlo Tú Mismo) para crear tu sitio es que no utilizas la misma fuente para toda la web. Este es un problema particular de las plataformas CMS como WordPress, Joomla o Drupal, así como software para e-commerce como Magento o Prestashop. Ocurre cuando editas el contenido utilizando el editor HTML cómo si fuese el procesador Word.

Esto, además de no ser correcto es innecesario, ya que los temas de las plataformas CMS incluyen un archivo CCS asociado al diseño que se encargan de aplicar los estilos a la página web una vez que los cambios que realizas en el sitio son guardados.

Hablemos de los gráficos

Para hablar de los gráficos, ya sea en una web o en nuestro disco duro, hay que conocer 2 términos que, aunque parezcan iguales, no son lo mismo en absoluto: tamaño y peso.

Tamaño se refiere a los píxeles de alto y ancho del gráfico. Mientras que peso se refiere al tamaño en kilobytes o megabytes que tiene el archivo. Es importante no confundirlos, ya que una imagen de gran tamaño no tiene por qué pesar mucho y viceversa. Luego explicaré por qué interesa saber esto.

Generalmente en una página web o blog se utilizan 2 tipos de gráficos:

Los del diseño del sitio web

Son los que transmiten la esencia de tu sitio web. Si añades gráficos adicionales (por ejemplo: un botón de “Compra YA” o “Suscríbete Ahora”) tienes que conseguir que combinen con el estilo original de tu sitio web. Si tu sitio está evolucionando constantemente, necesitas mantener un estilo, y si contratas a alguien diferente para que agregue nuevas funciones, debes asegurarte que respete el estilo de tu sitio. Los diferentes estilos no sólo son agresivos para los ojos de tu usuario, sino que transmiten poca profesionalidad. Ten cuidado con este aspecto.

Mantener el color original del diseño web de tu sitio también es importante. Si contrataste a un diseñador gráfico profesional seguramente la paleta de colores elegida para tu sitio fue planeada, probablemente basada en tus colores corporativos o en tu tipo de negocio. Si tú construiste tu sitio web, utiliza herramientas que te ofrezcan paletas de colores para diseño web, como por ejemplo Adobe Kuler.

La conclusión final es que todo debe parecer profesional y coordinado, hayas diseñado la página web tú mismo o no.

Los gráficos del sitio

¿Acaso no es bonito entrar a un sitio web y encontrar que las fotos de sus productos son todas del mismo tamaño? El sitio te da una imagen de profesionalidad y orden que lo hacen agradable a la vista. Hacer que todas las imágenes de los contenidos tengan el mismo tamaño consume tiempo y es agotador, especialmente para el que crea su propia página web, pero vale la pena.

Para ofrecer un tamaño uniforme de las imágenes en el contenido, es necesario decidir cuál es el tamaño estándar a utilizar para todo el sitio, luego reajustar y editar las imágenes para incluirlas en tu sitio web.

Ten especial cuidado con el peso de las imágenes que subas a tu web. Como ya te he explicado antes, no es lo mismo peso que tamaño. Puedes tener una imagen de 1024×768 píxeles y pesar apenas 150 kilobytes, o tener una imagen de 400×300 píxeles y pesar 2 megabytes (2000 kilobytes redondeando).

Entonces, ¿cuál es el tamaño y peso recomendable para tu web? La respuesta es fácil: una imagen de tamaño adecuada pero que pese lo menos posible sin que pierda calidad. ¿Por qué? Porque subir imágenes de gran peso ralentiza el funcionamiento del sitio web, y eso no es amigable con nuestro usuario en absoluto.

Un usuario que tenga que esperar mucho para ver cualquiera de las secciones de tu web se largará de allí en 2 clicks y, si esto ocurre, te puedo asegurar que será muy complicado (por no decir imposible) que vuelva a visitar tu sitio.

Existen herramientas como Image Resizer o plugins como WP Smush o EWWW Image Optimizer para WordPress que te facilitan esta tarea enormemente.

Los pequeños detalles son también importantes

Cuando decidí crear este artículo sobre el Diseño Web, mi mayor preocupación era resaltar los aspectos necesarios para hacer tu sitio web amigable para tu visitante y así facilitarte el incremento de tráfico hacia el mismo. Muchas veces nos preocupamos por el contenido más que por aquellas pequeñas cosas que parecen tan obvias pero que son fundamentales en el diseño de tu sitio web. Eso es precisamente de lo que vamos a tratar ahora.

Contenido imprimible o fácil de revisar

Hace unos años una clienta me comentaba que su hermano hizo un viaje, y dentro de su maleta llevaba una serie de hojas impresas que ella le había dado de modelos de vestidos, pantalones y camisas de cierta marca que quería que le comprara, ya que su hermano e internet no se dirigían la palabra.

Y es que no todos los usuarios están conectados o interesados por la tecnología. Es por esto que a veces se recurren a estrategias inimaginables para conseguir un producto o servicio que no está a su alcance, como imprimir lo que se quiere para que su hermano lo busque y lo traiga.

Es posible que en alguna ocasión hayas publicado un artículo en tu blog que merezca la pena ser releído varias veces o guardado en papel. Una página web no es un libro que se lee desde la primera página hasta la última. Sino que es más como una revista, en donde lees lo que más te interesa. Pues bien, los que buscan información en tu página web hacen lo mismo. No van a leer todo, ellos buscan lo que les interesa.

En los siguientes puntos vamos a hablar sobre cómo tratar la información que introducimos en nuestro sitio web.

Incluye distintas secciones para separar el contenido y definir las áreas de interés

La información puesta toda junta, sin separar, es difícil de leer y entender. Incluir distintas secciones o categorías dentro de tu blog que separen tu contenido hace que sean más fáciles de revisar y ayuda al usuario a decidir qué es lo que le interesa y a descartar lo que no.

Utiliza títulos y subtítulos para definir las diferentes secciones de tu contenido

Facilítale la tarea a tu usuario. Ayúdalo definiendo correctamente las diferentes áreas de los artículos publicados en tu sitio web. Utiliza un formato y tamaño acorde para tus títulos y subtítulos. Resalta lo que consideras importante en tu contenido.

Alineación del texto

Sé consistente en la alineación del texto. No cambies en medio del artículo, o utilices diferentes alineados en un mismo artículo. Si los alineas a la izquierda o los justificas, le harás la tarea más sencilla a tus usuarios. Lo mismo con los títulos, todos alineados de la misma manera ayudaran a una mejor lectura de tu contenido.

Links y enlaces

El manejo de los enlaces merece un capítulo exclusivo, pero sí me gustaría mencionarte algunos de los aspectos más importantes en la utilización de los mismos. Estos deben ser fáciles de encontrar, deben cambiar de color cuando ya fueron cliqueados y asegúrate de no subrayar ni resaltar texto que no sea un link.

Es frustrante para un usuario pulsar sobre una palabra subrayada pensando que es un enlace cuando realmente no lo es. Podría llegar incluso a pensar que la web no funciona correctamente y abandonar el sitio.

Es importante describir los links, el famoso cliquee aquí es lo más antipático, impersonal e inútil que puedes agregar en un contenido.

Bueno, al fin hemos terminado con este artículo. Espero que te haya servido de ayuda o guía. No te olvides de ninguno de estos aspectos básicos en el diseño de tu sitio web. Cuanto más fácil le hagas la vida a tus clientes/usuarios/lectores, mayor éxito tendrá tu sitio web.

Un saludo.