Diseños de páginas web: Cómo hacer que tu página de inicio de sea un éxito

8 min.
Consejos para el diseño de páginas web

La página de inicio, principal o "homepage" es para muchos el santuario de un sitio web. Debe servir para numerosos propósitos y atender a diferentes grupos de destinatarios. Y lo mejor de todo, al mismo tiempo. ¿Cómo habría que dirigirse a nuestros grupos objetivo y qué hace a un diseño de página web bueno y apropiado para estos? He aquí una visión general sobre los consejos más importantes que no deberías pasar por alto.

A continuación me refiero a empresas, pero muchas partes de estos principios básicos también se aplican a un blog sencillo, a tu sitio especial de interés o al sitio de tu banda o grupo de música. La página de inicio debería:

  • Mostrar la mejor cara de la empresa, agencia o del servicio que se ofrece
  • Representar simultáneamente todas las áreas de actividad de la empresa
  • Mostrar que la empresa está al día, a través de noticias y mediante la sincronización con Facebook, Instagram, etc.
  • La historia o "storytelling" por parte de los fundadores también debería adecuarse
  • La suscripción a la newsletter debe ser visible en todo momento

Del mismo modo, harás saber sobre la asignación o solicitud de nuevas ofertas de trabajo, dirección, "cómo llegar", números y personas de contacto, etc.

optimizar la página de inicio de las imágenes
Una página de inicio según el lema "una imagen dice más que mil palabras"

Ya puedes hacerte una idea de a dónde va esto: la página de inicio, no obstante, no puede ni debe mostrarlo todo, por favor. Hay que enfocar el asunto de forma conceptual y estratégica y pensar exactamente en lo que debe mostrarse allí y por qué. Mi enfoque no es ciertamente el único, y tal vez ni siquiera el mejor para tu empresa, pero intentaré justificar cualquier indicación. Sin embargo, también acepto otras opiniones y sugerencias en los comentarios.

La página de inicio es una landingpage (página de aterrizaje)

Como todas las páginas de tu sitio web, la página de inicio es una landingpage (página de aterrizaje). Échale un vistazo a nuestro post sobre la optimización del diseño de landingpages. Una vez te hayas dado cuenta de eso, ya has logrado mucho. Porque entonces te lo replanteas.

En el mejor de los casos, incluso has recopilado datos sobre tu página de inicio. ¿De dónde vienen las personas que acaban visitando tu web? ¿Qué quieren conseguir? ¿Cómo puedes ayudarles? ¿Cuál es tu objetivo de cara a la landingpage? ¿Qué información quieres transmitir?

Análisis de tu sitio web

La recopilación de cifras sobre tu página de inicio y otras subpáginas es extremadamente importante. Al fin y al cabo, esta es la única manera de averiguar si tu contenido y diseño conducen a la meta. Consulta nuestras instrucciones sobre los KPI de contenidos, acerca del Content Hub, pero también sobre el testeo de contenidos.

¿De dónde vienen tus visitantes?

En la mayoría de los casos, los usuarios llegan a través de Google, de tus tareas de marketing (también puede ser una tarjeta de visita, por ejemplo) o de los perfiles de las redes sociales en la página de inicio. Es posible que estos visitantes no sepan realmente a qué se dedica tu empresa. Sin embargo, es evidente que buscan una empresa como la tuya que ofrezca servicios o informaciones. De lo contrario, no se molestarían en visitar tu página de inicio.

En muchos casos tus visitantes leen en primer lugar un artículo que, quizás, has compartido en instagram y eso les ha conducido a ver tu página de inicio, con el propósito de ver qué hace u ofrece tu empresa. ¡Ahora eres tú la que puede ofrecerles algo a tus visitantes! Y esta es la respuesta que responde a la siguiente pregunta:

¿Qué hace el sitio web o la empresa?

Lamentablemente, esto se olvida a menudo. Lo primero a lo que debe responder una página web a sus visitantes es: "¿Estoy en el lugar correcto?", porque estos vienen de alguna parte, aterrizan en tu sitio y no saben nada todavía. Necesitan que se les confirme desde el principio que han sido dirigidos al sitio correcto. Esto es como un pequeño caramelo al principio de su experiencia como usuario o "user experience" (UX):

Has venido al lugar adecuado. ¡Respira tranquilamente, relájate y obtén la información que necesitas!

Mi sugerencia: tres o cuatro frases que expliquen de forma breve pero precisa lo que ofreces. Con un enlace debajo si se necesita más información al respecto. Para eso está internet, para obtener más información a golpe de clic.

Página de inicio Texto básico
Ejemplo de página de inicio de un consultorio con un texto introductorio seco

Aquí es donde a menudo me siento inconforme: primero hay que conseguir que la gente se involucre emocionalmente para que se quede. Este ejemplo tipo "va, ponemos una imagen enorme en la página de inicio y luego dejamos que las noticias se presenten a través de un deslizador para que vean la gran empresa global que somos", no me convence.

Sobre los grandes deslizadores o "slider": no funcionan. Muchos ya han escrito sobre esto. El sitio Should I use a carousel? es un buen comienzo. Además, la afirmación "¡esto es importante, lo ponemos en la barra lateral!" ya no funciona, porque la barra lateral simplemente no está actualizada y no encaja bien con el diseño web responsivo.

Dirigirse emocionalmente

Doy un "sí" rotundo a dirigirse al grupo objetivo emocionalmente. Esto no solo vincula a tus clientes a nivel de hechos, sino que también apela al cerebro de una manera completamente diferente. Sin embargo, en mi opinión el primer mensaje debería seguir siendo: "¿A qué os dedicáis realmente?". ¿Pero cómo puede añadir el componente emocional a esto?

Se trata de una decisión estratégica que debe basarse en la identidad corporativa o "Corporate Identity" (IC) de tu empresa. Tu CI incluye cómo dirigirse al grupo objetivo. Hay por lo general tres posibilidades:

  • A través del texto
  • A través del diseño
  • A través de imágenes o vídeos

Dirigirse a través del texto

Las personas utilizan un sitio web de forma muy diferente. Esto también quiere decir que no sabes cómo los visitantes encuentran algo en tu sitio web. Por ejemplo, lo primero que utilizan es el menú, la búsqueda y luego escudriñan los títulos o enlaces en tu sitio. Sin embargo, el primer punto de anclaje más común en el que se fijan es el primer texto de sitio que le da información. Esto lo han demostrado numerosos estudios. Puedes "diseñar" este texto de forma muy diferente con la ayuda del discurso directo y la tonalidad.

"Soy Phillip Roth, estoy haciendo un sitio web para su negocio" suena diferente a "¡Hey, soy un influenciador del diseño web que optimiza tu crazy UX para los KPIs más ascendentes!" Analiza bien el público al que te diriges y ajusta el tono en consecuencia. Esto no solo forma parte de tu identidad corporativa, sino también de tu diseño.

Dirigirse a través del diseño

Un diseño atractivo no solo transmite profesionalidad, sino que también conmueve emocionalmente. Consulta nuestro artículo sobre los principios básicos para un diseño web armonioso. Los colores, la selección del tipo de letra, los elementos de diseño... Todo esto puede transmitirles confianza, alegría, frialdad, locura y muchas otras emociones a tus visitantes. El diseño corporativo forma parte del mensaje global que quiere transmitir tu empresa. Los elementos que fomentan la confianza, como certificados o títulos, pueden aportar más puntos.

Página de inicio Imágenes Emociones
Página de inicio con un toque emocional y un texto introductorio

Imágenes o vídeos

La imagen de tu empresa también está conformada por el lenguaje visual. ¿Sois una empresa global con 600 empleados y rascacielos increíbles en Shanghai o una pequeña fábrica con un bonito taller? ¿Eres un entrenador/a y tienes salas bonitas para cursillos o un/a médico con una consulta elegante? Esto es lo que tus visitantes quieren saber y ver. Quieren averiguar: "¿Puedo sentirme cómodo/a allí?", "¿me atrae el producto?", "¿es una empresa en la que podría solicitar empleo?", "¿trabaja allí gente normal?", "¿son simpáticos/as?".

Todo esto se puede transmitir en milisegundos con una o varias imágenes bonitas. Para eso, las imágenes tienen que ser auténticas porque lo que muestras de ti y de tu equipo tiene que ser real hoy en día. De lo contrario, la gente no se sentirá que la tomas en serio. A nadie le gusta ya ver la típica foto de una rubia secretaria desconocida al teléfono ni de una sala de reuniones llena de gente sonriente, pero "no real".

Quizás incluso tengas un buen vídeo explicativo que resuma tus servicios en 30 segundos. O tal vez un vídeo de fondo que muestre tu hotel de lujo y el hermoso paisaje que lo rodea. Todo lo que apoye a tu identidad corporativa y al mensaje asociado es bueno.

Concepto de color de la página web
Página de inicio con fotos atractivas y un concepto de color uniforme

¿Y ahora qué?

Ya hemos captado la atención de los visitantes. Ahora saben, "estoy en el lugar correcto, me siento cómodo/a. Lo que sigue a continuación es una decisión estratégica. Ahora puedes profundizar en la información que hasta ahora solo has tocado brevemente. ¡Ahora puedes, además de la primera impresión, perseguir tu segundo objetivo!

Llegados a este punto, tiene sentido reflexionar sobre cuál es realmente este objetivo. Consulta también la estrategia de contenidos respectiva. Si los visitantes no se fijan en tu menú o en la búsqueda de información, entonces empiezan a desplazar el cursor. ¿Y qué es lo siguiente que se les ofrece?

Las posibilidades son múltiples:

  • Cuenta una historia
  • Profundiza en la información sobre tu oferta de servicios
  • Muestra grandes eventos, compromisos o noticias
  • Ofrece una herramienta para reservar citas, así no tendrán que llamarte directamente
  • Personalmente, lo que más vendo es a través de mi newsletter, lo ofrezco en numerosos lugares del sitio web
  • Remítete a tu portal o página de trabajo, si estás buscando nuevos/as empleados/as.
  • Muestra buenas críticas

Como puedes ver, hay cientos de formas de diseñar la página de inicio. Y ciertamente no existe una receta estándar para llevar a tus clientes a la conclusión deseada. Tienes que experimertar. Sin embargo, hay que tener en cuenta que tu página de inicio o tu landingpage no consiguen una atención infinita. Es muy raro que alguien se desplace 27 metros con el cursor, y aún así absorba toda la información.

Testimonios de la página web
La página de inicio con una cita y los servicios ofrecidos

Para este concepto me gusta utilizar los llamados "wireframes" o "mockups". Es decir, el contenido de la página de inicio se ordena en simples rectángulos con marcos grises. Sin contenido real, sin diseño. Puedes hacerlo en una hoja de papel o con programas como Adobe XD, Sketch, Photoshop, InDesign o incluso en Powerpoint. Como he dicho, deja el diseño fuera de esto por ahora. En este punto, quieres saber, por ejemplo:

  • ¿Qué es lo que definitivamente debe ir en la página de inicio?
  • ¿Qué es lo que no necesita ir allí?
  • ¿El contenido mostrado es más del necesario?
  • ¿Puede alcanzarse el objetivo con el espacio disponible?
  • ¿Los visitantes ven la llamada a la acción (Call to Action) con suficiente antelación?
Mockup Wireframes Adobe XD
Wireframes en Adobe XD

¡Ve al grano!

Ahora que has establecido tu objetivo secundario y has dado al usuario toda la información que podías meter en el espacio limitado, debes aclarar tu objetivo. Lo mejor es hacerlo al final de la página. Como se ha mencionado anteriormente: ahí puedes volver a destacar la información más importante, colocar la llamada a la acción o invitar a los usuarios a ponerse en contacto contigo con una foto tuya, junto a tus datos de contacto. Sea cual sea tu segundo objetivo de sitio: ahora puedes colocarlo previo a tu pie de página. Tu página de inicio es, como se dijo al principio, una landingpage.

El pie de página puede volver a funcionar como una navegación secundaria, por ejemplo, si quieres ofrecer más información allí. A muchos también les gusta buscar en tus menciones legales, si eres un proveedor serio, pero ten cuidado. Demasiados elementos en el pie de página pueden distraer del objetivo real. Si, por ejemplo, el registro para la newsletter está ahí, pero tú solo escribes una newsletter una vez al año, entonces esto es quizás menos útil.

Conclusión

Considera tu página de inicio como una landingpage. Dale a tus visitantes la sensación de que han aterrizado en el sitio web correcto. Intensifica esta sensación con un enfoque orientado al grupo objetivo, un diseño elegante e imágenes de apoyo auténticas.

Define con precisión tu objetivo secundario. Lleva a los visitantes hasta allí. Si es posible, comprueba con análisis y pruebas A/B si esto funciona, lo que funciona aún mejor. En mi opinión, no se puede hacer una página de inicio mucho más perfecta que esa.

Como puedes ver en las páginas que he creado (ver capturas de pantalla) en este post, ni siquiera mis consejos me han llevado siempre al resultado que quería :-; ¡Me alegra conocer nuevas ideas tuyas, en los comentarios, solo por eso! ¿Quizá has encontrado la fórmula perfecta para tu página de inicio?

Tus dudas sobre el artículo

¿Tienes preguntas para Phillip? ¿O un consejo para el diseño de la página de inicio? Esperamos tu comentario. ¿Quieres estar informado/a de los nuevos artículos sobre WordPress y diseño web? Entonces sigue a RAIDBOXES en Twitter y Facebook, LinkedIn o a través de nuestra newsletter.

Phillip es un diseñador independiente y ha estado conceptualizando, diseñando, creando y manteniendo sitios web WordPress accesibles para sus clientes en Colonia desde 2011. Durante muchos años fue coorganizador de WordCamp Europa y de otros WordCamps locales. Como diseñador de comunicación, a Phillip también le gusta diseñar logotipos, equipos de negocios y material publicitario, incluyendo stands de ferias.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.