Consejos útiles para el diseño de la página de inicio.

Francisco Merelo
WikiUX
Published in
13 min readAug 18, 2020

No hay un lugar como el hogar, dicen. Y en el creciente mundo de los sitios web para todas las necesidades y objetivos, en realidad funciona de la misma manera. La página de inicio tiene múltiples funciones: es una tarjeta de invitación, un punto de partida del viaje por el sitio web, un almacenamiento de los enlaces y datos vitales, y un activo estratégico para los objetivos de marketing. En la mayoría de los casos, a menudo es el primer contacto visual y emocional con el sitio web. Sin duda, el diseño es una de las principales formas de hacer que este toque sea suave, inteligente y útil. Hoy estamos discutiendo algunos consejos para crear páginas de inicio fácil de usar hoy en día estamentos agregando recomendaciones más organizaciones en torno a tres aspectos esenciales: información, interacción y apariencia.

Información

¿Usar o no usar? Esa es la pregunta. En la gran mayoría de los casos, la página de inicio es el punto de la decisión del usuario. A principios de la década de 2000, el gurú de la usabilidad, Jacob Nielsen, mencionó en su artículo : « Su página de inicio es su primera y posiblemente la última oportunidad de atraer y retener a un cliente, como la primera página de una publicación ». Con todo el progreso que ha estado presente en la World Wide Web, este sitio no cambia: la página de inicio a menudo define si un usuario va más allá del sitio web. Y no tiene solo por la belleza y el estilo, ante todo, por la información que buscan los visitantes del recurso. Haciéndolo accesible, notable y claro, los precios aumentan las posibilidades de una experiencia positiva para el usuario.

En general, la página de inicio puede incluir los siguientes datos:

  • La naturaleza del sitio : la página debe informar instantáneamente a los usuarios si se trata de un sitio web, un blog, una red social de comercio, una red social, una plataforma educativa o una otra cosa;
  • Elementos de identidad de la marca o empresa: la página de inicio requiere una presentación visual reconocible que distinga al sitio web de sus competidores. Si hay un producto, una empresa o una marca detrás de él, el diseño de la página web debe reflejar su identidad. En otros casos, el sitio web en sí debe ser visto como una marca y aplicar las estrategias de diseño de identidad para un mejor conocimiento de la marca.
  • Web de Beneficios del sitio: debe informar rápidamente a los usuarios de por qué el sitio web puede ser útil o interesante para ellos.
  • Búsqueda interna : muchos usuarios acceden a los sitios web con objetivos claros, por qué la funcionalidad para buscar directamente desde la página de inicio es por la interacción altamente altamente productiva
  • Enlaces a las zonas de interacción del núcleo
  • Datos de contacto y enlaces a redes sociales
  • Signos de confianza: testimonios, reseñas, gran cantidad de presencia en las redes sociales, etc.

La solución de problemas de los puntos que se seleccionan y cómo se distribuye en el diseño de los objetivos del sitio web y de la investigación del público objetivo. Veamos algunos consejos efectivos en este aspecto.

Rellene el encabezado con datos básicos

En la parte superior de la página web, en el cual las personas venían antes de desplazarse por la página en los primeros segundos de introducción al sitio web. Los grupos pueden incluir una variedad de elementos de diseño significativos, por ejemplo:

  • Elementos básicos de la identidad de marca: logotipo, lema, etc.
  • Lema que establece el tema del sitio web
  • Enlaces a las categorías principales del contenido del sitio web
  • Enlaces a las redes sociales más importantes
  • Información de contacto básica (número de teléfono, correo electrónico, etc.)
  • Un cambio de idioma en el caso de la solución multilingüe
  • Campo de búsqueda
  • Campo de suscripción
  • Enlaces a la interacción con el producto, como la versión de prueba, la descarga desde AppStore, etc.

Obviamente, es imposible poner toda la lista en un encabezado. Además, no es una buena idea poner todo porque el encabezado sobrecargado con información diversa distraerá la atención de los usuarios. Es por eso que la elección de qué información que va al encabezado y cómo se ve, es decisión en parte del interesado (cliente ), un especialista en marketing y al final de la traducción de estos dos por parte del diseñador. El encabezado es la zona superior de interacción temprana: los estudios de seguimiento visual que la página web se escanea principalmente a partir de ella. Así que decida qué elementos son primordiales para alcanzar los objetivos del sitio web y use el espacio limitado de encabezado para ellos. Por ejemplo, en un sitio web de noticias o una gran plataforma de comercio electrónico, el campo de búsqueda es crucial para una UX positiva,

Blog de arquitectura

Aplicar el eslogan informativo

No piense que los usuarios van a un deambular por el sitio web. Al estar rodeado por los sitios de sitios web, pueden escaparse en los primeros segundos si no ven una razón clara para quedarse. Por lo tanto, dáselos: es el momento de un eslogan. En términos de marketing, es el nombre de una frase corta y pegadiza que resume los beneficios de la descripción del sitio web. Incluyendo las palabras clave que establecen el tema adecuado y toman el lugar en el primer nivel de jerarquía visual para la página, el eslogan se abre rápidamente a los usuarios por qué el sitio web merece su atención.

IU del servicio de reservas

Permitir que los usuarios se encuentren en contacto con los titulares.

La página de inicio suele ser el lugar donde las personas esperan encontrar la información en contacto con cualquier momento. La ubicación más popular para él es el pie de página, la parte inferior de la página. Sin embargo, cualquier tipo de datos de contacto es fundamental para la conversión, es lógico poner en el área previa al desplazamiento o incluso un encabezado. Por ejemplo, si el sitio web presenta el servicio de entrega o la tienda en línea, los usuarios pueden querer llamar con más frecuencia y esta capacidad tendrá un impacto directo en la tasa de conversión. Mientras tanto, para un recurso de entretenimiento o noticias, puede que no sea tan crucial, por lo que se ubica en zonas de interacción menos activa. Sin embargo, en cualquier caso, los datos deben de estar disponibles desde el Home.

Los contactos se pueden presentar en varios formatos. Puede revelar datos cómo el número de teléfono y ubicación, correos electrónicos, enlaces a mensajeros, formularios de contacto y ventana de chat instantánea. Hacer que los números de teléfono se puedan hacer clic en apoyo, que muchos usuarios ahora navegan desde sus teléfonos inteligentes y que es posible que quieran llamar desde allí. También se puede hacer clic en la dirección abriendo la captura de pantalla o el mapa que muestra cómo encontrar la ubicación. Las soluciones deben basarse en una investigación exhaustiva del usuario que establezca las expectativas del público objetivo, el nivel de conocimiento tecnológico y las formas más convenientes de contacto para ellos. Por ejemplo, si su público objetivo son los adolescentes, solo dar el número de teléfono puede no ser efectivo ya que realmente se adhieren a los mensajeros y las redes sociales. Al mismo tiempo, si sus usuarios son personas mayores, las redes sociales pueden funcionar en comparación con un número de teléfono.

Hacer que el elemento de llamado a la acción sea visible al instante

La diferencia de las páginas de inicio, los objetivos concisos y los contenidos de la página de inicio son bastante diversos. Es por eso que es importante que un diseñador de UX le importe los usuarios que realmente necesitan más información sobre esa masa de datos. Sin duda, no se puede suceder que todos, digamos, cincuenta enlaces disponibles en la página de inicio sean importantes. Por lo tanto, para hacer que la página se pueda utilizar, se deben priorizar todos los elementos interactivos en el diseño. Visualmente, se puede hacer a través de las reglas de la jerarquía visual para que los usuarios puedan ver las cosas claves. Y entre ellos, los elementos de llamado a la acción deben ser notados al instante. De lo contrario, habrá una pérdida en la conversión no porque los usuarios quieran hacer la acción sino porque no hay cómo hacerlo.

El gran paisaje

Interacción

El siguiente aspecto a considerar es la interacción: la forma en que los usuarios perciben, procesan e interactúan con la información que se encuentran en la página de inicio, así como en el sitio web en general. El siguiente conjunto de consejos se trata de eso.

Ver el escaneo y los modelos de mind eye tracking

No es un secreto que los usuarios escanean primero las páginas y solo toman una decisión si quieren profundizar en los detalles. Los diseñadores de interfaces son muy recomendables para estudiar modelos de seguimiento que ahora se han visto obligados a publicar, y la contribución más destacada de Nielsen Norman Blog es el intercambio de resultados de experimentos reales en esa esfera durante un par de décadas. En resumen, los investigadores mencionan tres modelos típicos de escaneo: Gutenberg Diagram, Z-Pattern y F-Pattern , así que ahora vamos a verificarlos en los esquemas.

El Patrón de Guttenberg es bastante típico de las páginas web con una presentación uniforme de la información y una jerarquía visual débil.
Z-pattern y la versión en zig-zag presentada es típico para páginas con bloques de contenido dividido visualmente.
F-pattern natural para páginas con presencia masiva de contenido de copia

La capacidad de escaneo de las páginas web se mejora con una jerarquía visual que permite a los diseñadores mostrar el contenido en los términos de su prioridad y navega desde las centrales hasta las secundarias. La capacidad de exploración es uno de los parámetros que pueden probar el tiempo perdido, que tiene un gran impacto en la usabilidad de la página y su potencial de resolución de problemas.

Recuerde que los patrones son amigos del usuario

Toda persona creativa siente la necesidad de aplicar las soluciones originales y exclusivas y de pensar todo el tiempo. Sin embargo, asegúrate de no ir demasiado lejos de esa manera. Recuerde que el sitio web no está hecho para concursos creativos o galerías de fama, sino para usuarios reales, el poder del hábito en los términos de la experiencia del usuario puede ser más fuerte que el deseo de la revolución. Sin duda, la dosis de efecto es necesaria, pero no tanto como para derribar al usuario. En la página de inicio, demasiada revolución en el diseño puede confundir y asustar: si la primera página es tan difícil de entender, ¿quién lo sigue? Estudie los hábitos de interacción y los productos típicos para esa audiencia específica para convertir sus hábitos en su poder. Esfuércese por el equilibrio entre la innovación y las tradiciones.

Haga que el campo de búsqueda sea fácilmente accesible

Como dijimos anteriormente, la búsqueda significa mucho, especialmente para los usuarios que acceden al recurso con una comprensión clara de lo que quieren. Las pruebas A / B pueden respaldar el análisis de su ubicación más productiva en el diseño de la página. Puede ser un campo de búsqueda pequeño, un icono en el encabezado, un campo horizontal largo en la página. Lo principal es hacer que el campo sea notable y claro para que los usuarios no pierdan el tiempo.

Usar diferentes menús y zonas de interacción

Las páginas de inicio pueden ofrecer una variedad de enlaces, pestañas, campos y botones, se deben agrupar en diferentes menús y áreas en lugar de aparecer como la lista de enlaces. Por ejemplo, el menú doble en el encabezado puede presentar dos capas de navegación. Hemos visto el ejemplo de este truco en el estudio de caso para un diseño de sitio web de panadería. El sitio web usa un encabezado fijo que tiene dos niveles de navegación. El menú superior muestra los enlaces a las redes sociales, el logotipo, la búsqueda, el carrito de compras y el botón de hamburguesas que oculta el menú extendido. La segunda línea de navegación ofrece una conexión instantánea a las áreas de interacción principales: catálogo de productos, ubicaciones para el punto de venta, noticias y ofertas especiales, información sobre el servicio y la sección de contacto. La jerarquía visual y tipográfica hace que todos los elementos sean claros y fáciles de escanear, un punto sólido para la selección rápida de la página de inicio.

Sitio web de panadería

Hacer que la página de inicio sea accesible desde cualquier punto del sitio web

El hogar suele ser la base de la estructura del sitio web. Por lo tanto, los usuarios deben tener la oportunidad de volver a casa de cualquier página en la que se encuentran. Compruébalo cuando todas las páginas estén aquí para no perder esta interacción obvia y vital.

No dirija todo el tráfico exterior a la página de inicio

Para sitios web simples de una sola página, esta pregunta no es real: de hecho, representan un solo nombre de página que cumple una función múltiple y ningún otro lugar donde el usuario puede acceder desde las fuentes externas. Lo mismo ocurre si el sitio web no es complejo, el home está sobrecargado con diversos enlaces y elementos de navegación, por lo que se puede llegar a la conversión directamente. En este caso, es una buena idea dirigir todo el tráfico a la parte más informativa del sitio, lo que también permite al usuario realizar las acciones necesarias y obtener lo que necesita.

Sin embargo, para sitios web y plataformas complejas, especialmente si satisface las múltiples necesidades de un público objetivo amplio, este enfoque puede ser el paso que elimina la rentabilidad y la reducción de las tasas de conversión. El usuario puede asustarse, distraerse o incluso molestarse con la cantidad de información que tiene que atravesar para encontrar lo que necesita, especialmente si se enfocó en un objetivo específico. Usar Landing Page en el caso de que sea concentrado la atención del usuario en algo específico, puede ser la manera más eficiente de resolver este problema. La Landing Page se centra en un elemento, para que se puede encontrar rápidamente y reducir las demoras cuando el usuario objetivo busca operaciones, servicios o artículos específicos. Este es el tema de especial importancia en el caso de los sitios web de comercio electrónico cuando las soluciones de diseño imprudentes fueron a la experiencia del usuario.

Página de destino de la agencia digital

Apariencia

El tercer conjunto de consejos se concentra en la apariencia de la página. Sin duda, las recomendaciones son para todos los sitios web, aún así, en la página de inicio, tienden a ser más influyentes.

Mar estricto en la elección del color

El color es poder que puede fortalecer o arruinar otras decisiones de diseño. Al elegir la paleta de colores, recuerde que los colores influyen en la percepción del usuario. Estudiar la psicología del color es útil para tomar decisiones que transfieran el mensaje correcto. La atención a la teoría del color tradicional se trata de combinaciones de colores que se venden elegantes y armónicas.

Un problema más popular es la elección entre un fondo claro y oscuro : la solución se basa principalmente en el tipo de contenido que presenta el sitio web. Los sitios web web en el idioma usualmente usan interfaces claras y espaciosas, mientras que los que están en la base de datos pueden afectar a un fondo oscuro para que las imágenes se vean más profundas y con más estilo.

Aplicar indicaciones visuales y asociaciones reconocibles

Al estar lleno de datos, las páginas de inicio suelen incluir la variedad de íconos e ilustraciones. Eligiéndolos, siempre prueba su reconocimiento y verificación si crean las asociaciones correctas.

Sitio web de Floreria E-Commerce

Tenga en cuenta los problemas de tipografía y legibilidad

La elección de las fuentes y su combinación determinan no solo el estilo, sino también la legibilidad de la página de inicio. Aún más, las fuentes, así como los colores, también poderosos para formar el ambiente de la página, desde el entretenimiento hasta el estilo de negocios. Así que, tómese el tiempo para probar varias combinaciones y encontrar la que corresponde a la naturaleza del sitio web, así como otros elementos de diseño.

Fortalece la página con un visual prominente

La mayoría de los usuarios son guiados visualmente y perciben los mensajes en imágenes más rápido que las palabras. Es por eso que la aplicación de ilustraciones de temas personalizados, fotos de alta calidad o banners es un paso rentable para una página de inicio. La imagen de ese tipo funcionará como un gancho rápido atrapando la atención de los usuarios y transfiriendo la idea necesaria. Sin embargo, la sobrecarga de la página de inicio con imágenes no hacen que ninguna de ellas sea efectiva.

Sitio web de servicio financiero

Piense en movimiento y video

Otra forma de apoyar experiencias interesantes en la página de inicio es aplicar videos y animaciones. Por un lado, el movimiento de la vida a la página, la más dinámica y viva, siempre llama la atención. Por otro lado, puede aumentar el tiempo de carga. Además, demasiada animación molesta a los usuarios. Por lo tanto, el movimiento debe agregarse de manera discreta y verificar minuciosamente en los términos de su efecto en la funcionalidad de la página.

Prueba la velocidad de carga

Independientemente de lo brillante, elegante y sorprendente que sea la página diseñada, lo que sea genial e intuitivo es la arquitectura de navegación e información, todas esas cosas no funcionarán si los usuarios tienen que esperar mientras se carga. Para la página de inicio llena de varios datos, demasiado tiempo de carga significa perder la parte del público objetivo. Por lo tanto, verifique la velocidad, optimice las imágenes, asegúrese de que el video y la animación se carguen correctamente. Al preocuparse por este aspecto, respetar el tiempo y el esfuerzo de los usuarios y preparar el terreno para la experiencia positiva del usuario.

Sitio web de hielo

Obviamente, toda la lista de consejos para cada proyecto: los ajustes pueden diferir tanto como la audiencia y los objetivos de los sitios web creados. Sin embargo, puede convertirse en una herramienta para la herramienta de la página de inicio.

Originalmente escrito para tubikstudio.com

--

--