Consejos para el diseño de páginas web

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

Para muchos/as, la página de inicio es el santuario de un sitio web. Debe cumplir numerosos objetivos y servir a diferentes grupos de destinatarios. Y preferiblemente al mismo tiempo. ¿Cómo son una buena dirección y un diseño de página web orientado al público objetivo? He aquí un resumen de los consejos más importantes.

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.

"*"indica que los campos son obligatorios

Consentimiento*
Este campo es de validación y no debe modificarse.

La página de inicio es una landing page

Como todas las páginas de tu sitio web, la página de inicio es una landing page (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 tu web a través de Google, de tus actividades de marketing (también puede ser una tarjeta de visita, por ejemplo) o de los perfiles de las redes sociales. Es posible que estos/as visitantes no sepan aún lo que hace tu negocio, pero es evidente que buscan una empresa que ofrezca servicios o información. 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 la empresa en absoluto?

Lamentablemente, esto se olvida a menudo. Lo primero que debe responder un sitio web a sus visitantes es: "¿Estoy en el sitio correcto?" Porque vienen de alguna parte, aterrizan en el tu sitio web WordPress y no saben nada todavía. Necesitan que se les confirme desde el principio que han llegado al sitio correcto. Esto es como un pequeño caramelo al principio de su experiencia de usuario (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 encuentro con más viento en contra: primero hay que conseguir que la gente se involucre emocionalmente para que se quede. Es como: "Pondremos una imagen enorme en la página de inicio y luego dejaremos que las noticias se presenten a través de un deslizador". Para que vean la gran empresa global que somos.

En cuanto a los grandes deslizadores: no funcionan. Muchos/as ya han escrito sobre esto. El sitio web ¿Debo utilizar un carrusel? es un buen comienzo. La afirmación "¡eso es importante, lo pondremos en la barra lateral!", desgraciadamente ya no es posible porque la barra lateral simplemente ya no está actualizada, y no es compatible con el diseño web responsivo.

Dirigirse emocionalmente

Doy un "sí" rotundo a dirigirme emocionalmente al grupo objetivo. Esto no sólo involucra a los clientes de tu 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: "¿Qué haces realmente? ¿Cómo se puede añadir el nivel emocional?

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. En otras palabras, no sabes cómo 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 los enlaces en tu sitio web WordPress. Sin embargo, el primer punto de anclaje más común que fijan es el primer texto del sitio web que le da información. Numerosos estudios lo han demostrado. Se puede "dar forma" a este texto de manera muy diferente con la ayuda de la dirección y el tono.

"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. Pero para eso, las fotos 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á tomada en serio. Ya nadie quiere ver la foto de archivo con la extraña telefonista rubia. Tan poco como una extraña sala de reuniones llena de gente sonriente pero "falsa".

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é?

Así que ahora tenemos la atención de los visitantes. Ahora saben: "Estoy en el lugar correcto, me siento cómodo/a". Lo que sigue ahora es una decisión estratégica: ahora puedes profundizar en la información que solo has tocado brevemente aquí y perseguir un segundo objetivo, además de la primera impresión.

Llegados/as a este punto, tiene sentido reflexionar sobre cuál es realmente este objetivo. Consulta también la estrategia de contenidos relacionada, porque si los/as visitantes no se fijan en tu menú en la búsqueda de información, empezarán a desplazarse. ¿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, ahora hay cientos de maneras de seguir diseñando la página de inicio, y ciertamente no existe una receta estándar para llevar a tus clientes/as a la conclusión deseada. Tienes que probar y experimentar. Sin embargo, hay que tener en cuenta que tu página de inicio o landing page no consigue una atención infinita. Casi nadie se desplaza 27 metros, y aun así absorbe 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, ordena el contenido de la página de inicio en simples rectángulos con marcos grises. Sin contenido real, sin diseño. Puedes hacerlo en un papel o con programas como Adobe XD, Sketch, Photoshop, InDesign o en PowerPoint. Como ya he dicho, deja de lado el diseño 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/as 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 a los/as usuarios/as toda la información que puede encajar en el espacio limitado, debes aclarar tu objetivo. Lo mejor es hacerlo al final del sitio. Como ya he dicho, puedes destacar ahí la información más importante, colocar la llamada a la acción o utilizar una foto tuya (junto a tus datos de contacto) para invitar a los/as usuarios/as a ponerse en contacto contigo. Cualquiera que sea tu segundo objetivo, puedes colocarlo antes del pie de página. La página de inicio es, como ya se ha dicho, una página de aterrizaje (landing page).

El pie de página también puede funcionar como una navegación secundaria, por ejemplo, si quieres ofrecer información adicional allí. A mucha gente le gusta también comprobar tu aviso legal para ver si eres un proveedor de confianza. Pero ten cuidado: demasiados elementos en el pie de página pueden distraer del objetivo real. Por ejemplo, si hay un formulario de registro para una newsletter pero solo se escribe una newsletter una vez al año; esto puede ser en este sentido menos eficaz.

"*"indica que los campos son obligatorios

Consentimiento*
Este campo es de validación y no debe modificarse.

Conclusión sobre el diseño de la página web

Considera tu página de inicio como una landing page. 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. Guía a los/as visitantes hasta allí. Si es posible, utiliza la analítica y las pruebas A/B para comprobar si esto funciona. Y lo que podría funcionar 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 (v.capturas de pantalla) en este post, ni siquiera mis consejos me han llevado siempre al resultado que quería. Por eso, ¡espero que me envíes nuevas ideas en los comentarios! ¿Quizá hayas encontrado la fórmula perfecta para tu página de inicio de la web?

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 sobre los nuevos artículos en torno a WordPress y diseño web? Entonces sigue a Raidboxes en Twitter y Facebook, LinkedIn o a través de nuestra newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

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