Cómo Diseñar una Buena Página de Inicio

Nunca un espacio tan pequeño pudo ser tan valioso por metro cuadrado. 

La página de INICIO es, proporcionalmente y a día de hoy, tan o más valiosa que cualquier propiedad inmobiliaria. ¿Te imaginas cuántos millones de euros se deben de canalizar al día a través de las páginas de inicio alrededor del mundo?

Diseñar una buena página de inicio puede parecer sencillo, pero es la página más compleja de una web, por muy sencilla que sea, técnicamente, su elaboración.

El impacto de la portada de tu web

El impacto de la página de portada de una web sobre el negocio es mucho más grande que lo que reflejan los datos de sus ventas o de sus visitas. Cada día cobran más importancia los conceptos de usabilidad, navegabilidad y experiencia de usuario. Y la eficiencia de estas tres patas del diseño web comienza desde el diseño de la homepage, la faz de tu negocio online.

La página de inicio es la página más importante en cualquier sitio web y su diseño debe cumplir unos requisitos mínimos. Esta página es la que debe dar a los usuarios una visión global clara de la intención de toda la web, de esto se trata la usabilidad y sus directrices o normas.

Por ello, mi intención en este post es precisamente darte esas directrices básicas para que la creación de tu página de inicio cumpla con unos estándares mínimos.

Por descontado y por repetición, sólo volver a mencionar que la apariencia es en lo último en que se debe pensar a la hora de diseñar las páginas que componen un sitio web. El diseño orientado en exceso por la apariencia contradice habitualmente todo lo relacionado con el comportamiento del usuario. No debemos transformar nuestra página web en la televisión. Aunque se ha avanzado mucho en el acercamiento entre la estética y la funcionalidad, y una cosa no quita la otra, quienes no conocen bien el mundo del marketing online siguen dando más importancia a la apariencia, mientras que debería ser al contrario.

Eso sí, que el aspecto visual sea lo último en lo que se debería centrar un diseñador, no quiere decir que sea un aspecto trivial. Al contrario, la estética es clave también, como indico en el post sobre los aspectos psicológicos del diseño web.

La función de la página de portada

El objetivo de crear una buena página de inicio es comunicar lo que la empresa es y el valor que ofrece, sea en general o frente a la competencia.

Esto parece a simple vista algo obvio y fácil de llevar a cabo. Sin embargo, muchos equipos de diseño web pasan apuros y fracasan a la hora de diseñar una buena página de portada. Por un lado es algo lógico, ya que un diseñador web ha centrado todo su aprendizaje en la estética, la programación y las tendencias. Es una formación sobre todo gráfica e informática. Rara vez un diseñador te discutirá lo que quieres “poner” en tu sitio web, por muy perjudicial que sea para tu posicionamiento en Google, por ejemplo. Simplemente, no lo sabe.

A continuación, detallo una serie de directrices para desarrollar una buena portada para tu web. Son reglas básicas de diseño web enfocado a la visibilidad en internet y a la experiencia del usuario.

Algo que tienes que tener claro es que tu homepage es la primera y posiblemente la última oportunidad de causar una buena impresión en el usuario y retenerle.

Es parecido a la portada de un periódico o revista. La prioridad de cada noticia en portada es clave para la venta o no de la revista. Lo mismo ocurre con la portada de una web. Si fallas en “conectar” con lo que espera el usuario, ten claro que será una visita perdida.

Qué no encontrarás en este post

Para poder limitar el enfoque de este artículo a la creación de páginas de inicio, hay temas que no voy a tocar, bien porque ya los he tocado previamente en otros posts, bien porque se merecen más profundidad de la que podría abarcar aquí.

Detalles sobre el contenido de las páginas de inicio o homepages

El contenido consta de texto e imágenes primordialmente. Esto es casi lo más importante de la página principal de tu web. Sin embargo, es algo totalmente particular de cada negocio o empresa ya que incluye textos que reflejen sus objetivos, valores y misión, aunque no sea de forma explícita, además de las necesidades que tienen los usuarios que llegan a ella.

Diseño web como tópico general

He limitado las directrices a aquellas que son críticas para una exitosa usabilidad de la página de inicio, aunque muchas de ellas seguramente mejorarían también la usabilidad de otras páginas de la web en cuestión.

SEO como tópico general

Cuando hablamos de usabilidad, estamos hablando de una de las formas más olvidadas de optimización del posicionamiento orgánico. No obstante, el SEO y estructura web, son temas aparte que requieren mucho más detalle del que verás en estas reglas para hacer bien tu homepage.

Guía para diseñar una buena Página de Inicio

Se han realizado tests en los que se ha pedido a usuarios que mirasen páginas de inicio por unos minutos y en la mayoría de los casos no son capaces de contestar de forma satisfactoria a la pregunta: “¿Cuál es la finalidad de esta página?”.

Para comunicar de forma efectiva, la página de inicio debe asignar el énfasis adecuado tanto a la marca como a las actividades que desea que se lleven a cabo una vez en dentro de la web.

Todos los ejemplos que verás en las imágenes a partir de ahora, son capturas de pantalla de sitios web que he diseñado para mis clientes.

#1. Muestra el logo o nombre de la empresa en un tamaño razonable y en un lugar visible.

Las herramientas de eye-tracking han comprobado que el primer lugar donde se mira en una pantalla de ordenador o dispositivo móvil es arriba a la izquierda. El logo o nombre debe ser lo suficientemente visible como para hacerse notar entre el resto de información, pero no exagerado.

#2. Incluye una línea que resuma lo que hace la empresa.

Suele ser el eslogan o similar. Debe ser breve, descriptiva de la actividad y al grano. Aunque sea muy bonita, una frase del tipo “Esforzándonos por hacer un mundo mejor”, no describe lo que hace la empresa. Utiliza esa frase para otra cosa.

#3. Diseña una portada claramente distintiva.

Crea una homepage que sea diferente del resto de páginas del sitio. A veces se cae en el error de diseñar las páginas internas exactamente igual que la de inicio, pero ésta debe ser siempre la diferente.

#4. Resalta lo que hace o los valores de tu empresa, desde el punto de vista del usuario.

Aunque para ti o tu empresa esté clarísimo, es posible que para el usuario no sea así. “Mercadona. Supermercados de confianza”. También puedes resaltar en qué te diferencias de la competencia. “Si pagas más, es porque quieres” de Día fue sustituido por “Calidad y precio están muy cerca”.

#5. Resalta la prioridad absoluta de una acción o punto de partida para el usuario.

Asigna un lugar y diseño prominentes a una acción que quieres que realice el usuario y que será su punto de partida. Lo más inteligente es hacer que el usuario empiece a navegar por el resto de páginas.

#6. Evita poner llamadas a la acción múltiples.

Las llamadas a la acción, son puntos de partida que guían, orientan o dirigen al usuario hacia un lugar o acción determinados. Siguiendo con lo que decía en el punto 5, dado que supone una dificultad extra determinar LA ACCIÓN prioritaria, la mayoría comete el error de insertar demasiadas llamadas a la acción, pensando que es la mejor forma de que el usuario, alguna, pinche. Lo que no saben es que, cuantas más llamadas a la acción, menos clics se realizan en una web. El usuario se abruma y se va sin hacer clic en ninguna.

#7. Evita las distracciones

Esto se relaciona directamente con el punto anterior. Las distracciones en tu homepage son, desde el punto de vista de la usabilidad, asesinas de las conversiones. Ofrecer demasiadas opciones y distracciones lleva al usuario a no elegir ninguna. Cabila solo UNA llamada a la acción estratégica y después asegúrate de que es reconocible, visible y accionable ipso facto, igual que el botón o enlace que lleve al usuario a realizarla.

#8. Incluye enlaces internos hacia las tres o cuatro páginas más importantes

No tomes los enlaces internos hacia otras páginas como llamadas a la acción de las que hemos hablado arriba. Pese a que incluir un texto con un enlace yo lo considero una llamada a la acción, también es cierto que no son llamadas a la acción al uso. El propósito de incluir tres o cuatro enlaces a tus páginas más importantes es llamar la atención del usuario sobre las áreas, productos o servicios que pueden interesarle más.

Por ejemplo: si se trata de un negocio de coaching, en la página de portada debes enlazar a cada variante del servicio, que habrás descrito en páginas aparte. De esta forma, actuarán como llamadas a la acción implícitas y además crean una mejor estructura web interna tanto para el usuario como para Google.

#9. No uses textos ancla del tipo “Haz clic aquí”.

Aunque estamos centrándonos en la home, esto sirve también para todas las páginas de tu web, tanto las estáticas como las entradas de tu blog. Evita los textos que no expliquen exactamente a dónde se va a dirigir el usuario. Si pones un enlace a un post que da instrucciones para comprar dominio y alojamiento con descuento, hazlo mencionando la palabra clave del post, no poniendo el típico “ve a este enlace” o “haz clic aquí”. Hay excepciones pero pocas. Siempre que puedas, evita esos textos ancla.

#10. Incluye un link y llamada a la acción para que contacten contigo

Siempre que sea posible en tu gestor de contenidos, y siempre que no destaque sobre LA ACCIÓN del punto 5, facilita y fomenta que el usuario entre en contacto contigo desde la página de portada.

No te vuelvas locx tratando de aplicar todas estas directrices de diseño web si te parece algo abrumador. ¿Quieres dejarlo en mis manos? Contacta conmigo usando este formulario

#11. No te inventes palabras, por muy espectaculares que pienses que son

Quizá tienes un servicio o producto con un nombre muy original pero que no conoce nadie, o es en inglés, o sabe dios. Intenta sustituirlo en tu página de inicio por un nombre más descriptivo, aunque después lleve a la página con ese nombre.

Por ejemplo, cuando hice mi primera web de coaching, me inventé el término coachsulting, una mezcla entre coaching y consultoría. Esta página recibía una décima parte de visitas desde la homepage porque no se comprendía a primera vista.

#12. Pon un mínimo de 300 palabras en el cuerpo de la homepage

La página de inicio es la más visitada, como hemos dicho. También por Google, por lo que hemos de asegurarnos de que el texto es lo suficientemente claro y extenso como para que el motor de búsqueda sea capaz de saber de inmediato a qué nos dedicamos, de qué va nuestra web.

#13. No pongas cuarenta imágenes

Muchas imágenes no cumplen ninguna función, ni en la página de portada, ni en ninguna otra, a menos que se trate de un portfolio, tienda, etc. Las imágenes ayudan, pero también pueden perjudicar. Hay que encontrar el equilibrio justo. Generalmente, solo un buen diseñador web sabrá encontrarlo.

#14. Que el menú de navegación principal sea bien visible y esté bien estructurado

A veces, queriendo de buena fe plasmar la máxima información posible, caemos en el error de añadir demasiadas páginas, que después no caben en el menú principal.

La función del menú de navegación, que debe ser claro y visible tanto en la página de inicio como en el resto de páginas, es ayudar al usuario a descubrir y profundizar, no a hacerle un lío. Pon un máximo de 10 páginas, aunque esto ya me parece una exageración, con un máximo nivel de profundidad de subpáginas de dos.

#15. No des por sentado que todo el mundo sabe…

Cuando nosotros mismos estamos familiarizados con ciertos conceptos, como el scrolling o avanzar en un slider, o encontrar rápidamente la página de contacto o la política de privacidad, damos por hecho que todo el mundo sabe lo mismo. Error.

Al usuario hay que ponerle las cosas lo más fáciles posible y sin dar nada por hecho. No asumas que siempre leerán el texto, ni que llegarán hasta el final de la página de inicio, ni que intuirán que una imagen lleva un enlace hacia otra página, ni que saben lo que significa “Read more”, en lugar de “Leer más”, etc. Soluciona estos pequeños elementos para obtener un mejor rendimiento de tu portada.

#16. No incluyas elementos innecesarios

Hay webs por ahí que insisten en incluir en su página de inicio o en el resto de sus páginas widgets con un calendario, con la previsión del tiempo, una lista de enlaces hacia otras webs…

Vamos a ver, mi web no tiene nada que ver con la climatología, la gente suele saber más o menos en qué día vive, y que haya webs interesantes por el mundo, … en fin.

Lo de las webs amigas, por favor, no solo es del pleistoceno, sino que además perjudica tu posicionamiento. Estas cosas totalmente innecesarias y arbitrarias son distracciones que no añaden NADA bueno, sino todo lo contrario. Fuera todas. Incluidas nubes de etiquetas, y cualquier elemento que distraiga al usuario del objetivo principal de tu web. También soy defensora de JAMÁS poner barras laterales en la homepage.

En la página de inicio que ves encima, que terminé hace unos meses, ves que los elementos son los justos. Están los enlaces a las páginas importantes, una llamada a la acción (pide cita), claridad… y sobre todo, transmite seriedad, algo que resuena con la dueña de la web. 

#17. No pongas ningún enlace externo en la página de inicio

Aunque parezca obvio, no lo es tanto. Mucha gente pone, por ejemplo, una lista de “mis sitios favoritos”, banners o anuncios de otros sitios web en la barra lateral o en el pie de página. Esos enlaces a un puñado de webs que no son la tuya están incitando al usuario a que se vaya, y eso te perjudica. ¡Jamás pongas enlaces hacia otras webs en tu portada!

#18. Cuidado con los atributos de los titulares o encabezados

Las meta-etiquetas atribuyen una importancia X a tus textos. Por ejemplo, la etiqueta H1 suele ser asignado automáticamente por el CMS para el título de cada página, el resto (H2, H3, H4…) se usan como encabezados y a menor el número, mayor la importancia del encabezado.

Muchas webs abusan de ciertos atributos, no solamente de los títulos H1, H2, etc., sino del tamaño de letra, de la negrita, etc. Al final está todo resaltado, con lo que no resalta nada. Evita esto a toda costa y trata de aprovechar los encabezados para incluir palabras clave de tu web.

#19. El pie de página

Siempre que te sea posible, elimina los créditos del pie de página. Si usas WordPress, por ejemplo, automáticamente se crea un enlace que dice: “Creado con WordPress”. Y con los temas de WordPress ocurre lo mismo. Sus creadores añaden un enlace automático en el footer o pie de página que dirige a su web. Intenta deshacerte de estos créditos.

Crear una web no es fácil

Sí lo es técnicamente.

Desde hace ya años, se ha ido creando el mito de que diseñar tu propia web es fácil. Por ejemplo, las grandes empresas de hosting fomentan esta idea para que les compres a ellos tu dominio y alojamiento, y diseñes tu sitio con su software, con lo que tu sitio web no se podrá transferir a otras compañías de hosting. Es su forma de retenerte.

El mundo del marketing online y del diseño web están plagados de mitos e ideas equivocadas que debes examinar en profundidad para no frustrarte más adelante, cuando no haya remedio.

Es cierto que cualquiera puede aprender rápidamente a usar un CMS como WordPress para crear su sitio sin contratar a un profesional. Pero conocer los pasos técnicos no significa saber diseñar. Por ejemplo, no sabrías todo lo que te acabo de explicar para diseñar una buena página de inicio, por ejemplo.

Como ves, el diseño es mucho más que aprender a usar un constructor web o un CMS como WordPress. Por eso, si necesitas un sitio web serio y a la altura de tu negocio, no te dejes embaucar por esos mitos y contrata a un profesional. Siempre saldrás ganando.

Espero que estas directrices te hayan sido útiles. Si necesitas más información o tienes alguna consulta, no dudes en comentar abajo o contactar conmigo. Estaré encantada de atenderte.