¿Lo necesitas?  ¿Cómo conseguirlos?

¿Lo necesitas? ¿Cómo conseguirlos?

Esta publicación sobre Sticky UI Elements en WordPress es de Lexie Lu.

Cuando comience a crear un sitio web, escuchará muchas opiniones diferentes sobre los elementos pegajosos de la interfaz de usuario. Algunos dicen que, que pueden incluir todo, desde opciones para compartir en las redes sociales hasta información de la empresa, crean una mala experiencia de usuario. Sin embargo, incluso los detractores admiten que estas pueden ser opciones de diseño muy efectivas cuando se hacen correctamente.

Los elementos fijos (botones, bloques de contenido y otras formas de “navegación fija”) son elementos fijos en la página que permanecen en su lugar cuando el usuario se desplaza hacia abajo. Cuando los elementos pegajosos de la interfaz de usuario están bien diseñados y tienen un propósito claro, las investigaciones muestran[1] son una excelente manera de obtener la acción deseada por el visitante en su sitio web.

En resumen, su sitio de WordPress puede utilizar elementos de interfaz de usuario adhesivos para maximizar el valor de cada visita a su sitio. Estos elementos pueden contribuir a suscripciones a boletines, seguimientos de redes sociales y otras importantes llamadas a la acción.

Quizás lo más importante es que pueden mejorar la experiencia del usuario. Con todos estos beneficios, no es de extrañar que la navegación continua esté ganando popularidad.

Nota del editor. También crecimos para aprovechar varios elementos fijos del sitio. El propio blog de CodeinWP utiliza uno de estos elementos, y también hemos hecho de la navegación fija una de las características principales de Neve, nuestro tema más popular (ver la demo). ¿Por qué? Simplemente funciona para el usuario. Pero deja que Lexie explique esto en detalle:

Por qué funcionan los elementos Sticky UI en WordPress

El uso eficaz de elementos adhesivos en WordPress puede ayudar a transmitir información importante y facilitar el viaje del visitante a través de su sitio. Un sitio web de comercio electrónico descubrió que la incorporación de la navegación continua puede aumentar las conversiones entre un 30% y un 33%.

Una prueba A / B separada realizada con fines de investigación encontró que el 100% de los visitantes[2] prefería los elementos de diseño pegajosos, aunque muchos no estaban seguros exactamente de por qué.

Para aprovechar el poder de los elementos pegajosos de la interfaz de usuario en WordPress, no puede simplemente descargar un complemento de WordPress y ver cómo mejoran sus números en todos los niveles. Debe planificar cuidadosamente qué funcionará mejor para su sitio. También debe asegurarse de que estas cosas, que a veces pueden ser complicadas si no tiene experiencia en programación, funcionen según lo previsto.

Afortunadamente, hay varios tipos diferentes de elementos de interfaz de usuario y complementos para ayudarlo a integrarlos en su sitio de WordPress:

Botones adhesivos para compartir en las redes sociales

La forma en que las personas descubren sitios web ha cambiado. Atrás quedaron los días en que la mayoría de los visitantes llegaban escribiendo una URL y luego buscando el contenido. Si bien a veces todavía lo es, ahora proviene mucho más tráfico de las redes sociales.

En promedio, las redes sociales generan el 31% de todo el tráfico.[3] a sitios web. Si bien este número es indudablemente más bajo para algunos sitios web (y más alto para otros), subraya la importancia de crear contenido atractivo.

(Gráfico de Gráficos y gráficos de WordPress Lite.)

Sin embargo, un buen contenido es solo el primer paso. También puede alentar a los usuarios y aumentar el tráfico de referencias haciendo que sea ridículamente fácil para las personas compartir su contenido. Una buena forma de lograrlo es utilizar botones adhesivos de redes sociales para acompañar su contenido.

WordPress no tiene escasez de complementos para agregar botones de redes sociales fijos / flotantes. Lo importante es elegir uno que se comporte de forma intuitiva con el diseño de tu tema. Hay tantos ejemplos de botones flotantes de redes sociales que comportarse de manera bastante extraña en dispositivos móviles o cuando se cambia el tamaño de las ventanas del navegador de escritorio.

Un diseño deficiente puede tener el efecto contrario al esperado, ya que los botones de redes sociales pegajosos que oscurecen el texto y las fotos no conducirán a que se compartan las redes sociales. Eche un vistazo a los sitios que logran ofrecer una buena experiencia de usuario.

Experimente con los muchos complementos de WordPress en tantos dispositivos y sistemas operativos como sea posible, para asegurarse de que sus botones de redes sociales se comporten como se espera.

Hay una lista de dos partes de más de 30 complementos de redes sociales publicados aquí en CodeinWP. Estoy seguro de que encontrará el complemento perfecto para usted allí.

Usted también puede estar interesado en:

Caja de información adhesiva

Dependiendo de su sitio web, a veces su elemento fijo solo necesita transmitir información adicional en la barra lateral. Colocar la información de contacto en un lugar destacado en su sitio es una llamada a la acción simple pero eficaz. 12Keys hace esto de manera muy eficiente al proporcionar información de contacto de un vistazo, lo cual es especialmente importante para los visitantes que pueden estar en crisis.

12 llaves rehabilitación

También puede ser un lugar donde puede ayudar a generar confianza al destacar sus credenciales, recompensas y cualquier otra cosa en ese sentido. También es un gran lugar para agregar un toque personal al explicar un poco más sobre usted o su sitio web.

Afortunadamente, este es el tipo de elemento más fácil de implementar en su sitio. No tiene que preocuparse por nada excepto por el texto y tal vez un hipervínculo a su correo electrónico. Este complemento debería poder ayudarlo a:

El objetivo es no hacer que el elemento de la barra lateral sea demasiado llamativo o que distraiga. Permanecerá allí mientras el visitante esté en el sitio, por lo que no querrá apagarlo con algo mal diseñado o demasiado intrusivo. Erra por el lado de la simplicidad, ya que la barra lateral flotante debería ser la guinda del pastel para el contenido que la acompaña.

Menús pegajosos

Los menús adhesivos son quizás el tipo más práctico de todos los elementos de la interfaz de usuario adhesiva de WordPress, pero también son uno de los más útiles.

La idea es sencilla. Cuando el usuario se desplaza hacia abajo, el menú permanece firme en su lugar.

Pero puedes implementarlo de diferentes formas:

a) Puede optar por la ubicación estándar en la parte superior.

Esto es lo que hizo el equipo de ThemeIsle con su Tema Zerif, por ejemplo (puede ver el demostración en vivo aquí):

Elementos adhesivos Zerif

Un beneficio adicional aquí es que el menú no es un simple menú de una línea, sino un mega menú: cuando pasas el cursor sobre cada uno de los elementos, revelan una estructura más elaborada:

mega menú

b) Deje el menú a un lado.

Esta es una buena opción para algunos diseños, y especialmente para sitios con muchas fotografías que apuestan por lo visual para contar su historia.

He aquí un ejemplo de RichBrown.info:

RichBrown

El menú se fija a la derecha cuando se desplaza hacia abajo.

c) Déjalo.

La parte inferior es otro gran lugar para una ventana acoplable, y especialmente si desea que el menú sea un poco más grande que una sola línea de texto.

He aquí un ejemplo de pelota:

pelota

Como puede ver, el menú presenta imágenes + texto, por lo que se ha colocado en la parte inferior para no ocupar un espacio valioso en el encabezado del sitio.

Suscripciones de correo electrónico persistentes

Como probablemente sepa, una de las mejores formas de llegar a su audiencia es a través del correo electrónico. Un correo electrónico enviado a su lista de suscriptores tiene cinco veces más probabilidades[4] para ver una publicación en Facebook.

Crear una lista de calidad de suscriptores de correo electrónico es esencial para llevar su negocio al siguiente nivel. Con los formularios adhesivos, conseguir seguidores es más fácil de lo que piensas.

Hay muchas formas de alentar al visitante del sitio a que se suscriba a su lista de correo. Un formulario fijo, ya sea en la barra lateral o en la parte superior de su página, puede ser de gran ayuda. Un sitio que hace esto bien es Doce, una empresa de medios digitales. Su llamado a la acción en la parte superior de la página es claro y atrae la atención sin estar demasiado al frente o distraer.

twelveskip

La parte superior de tu barra lateral es otro buen lugar para obtener suscriptores por correo electrónico. A veces no está de más tener varios lugares en los que la gente puede registrarse. Los suscriptores de correo electrónico son tan valiosos que vale la pena hacer un esfuerzo adicional para crear su lista.

CodeinWP, por ejemplo, utiliza varios formularios para este propósito y muchos más. Como éste:

codeinwp

Anuncios fijos

Seamos realistas: los anuncios son un mal necesario para la mayoría de nosotros. A nuestros lectores no les gustan y tampoco a muchos creadores de sitios web. Sin embargo, son esenciales para pagar las facturas, y ahí es donde entra la publicidad digital.

Time Magazine usa su anuncio como un bloque adhesivo, por lo que se desplaza hacia abajo cuando tu lees cualquier articulo.

hora

Es mucho menos intrusivo que un anuncio gigante o una ventana emergente, por lo que no es una mala manera de generar ingresos sin desanimar a demasiados lectores.

Como toda publicidad, esto solo debe hacerse con moderación. Un muro de anuncios a la izquierda o derecha de un artículo es una desactivación inmediata. Uno o dos, combinados con enlaces a varios artículos, es una buena forma de publicidad.

Elementos de interfaz de usuario adhesivos creativos en WordPress

Además de los elementos enumerados anteriormente, puede ser mucho más creativo con el uso de elementos de interfaz de usuario adhesivos en WordPress, pero también significará potencialmente más trabajo para implementarlos.

Aquí hay un ejemplo, para Gavick.com:

Isla

Si visita este sitio, notará que toda la isla permanece en gran parte en el centro a medida que se desplaza hacia abajo. Va del primer plano al fondo, pero sigue estando en el centro. Este tipo de cosas realmente llama la atención del usuario.

Parece que realmente no hay límite para los usos creativos de los elementos pegajosos de la interfaz de usuario en WordPress … ya que alguien puede haber hecho una isla pegajosa.

¿Cómo encuentro el complemento adecuado?

Hay no hay escasez de complementos en WordPress.org que puede ayudarlo a implementar elementos adhesivos en su tema. Algunos pueden funcionar muy bien con su tema, mientras que otros pueden no estar optimizados para su sitio. Se necesitará un poco de prueba y error para encontrar cuáles funcionan mejor.

El resultado final valdrá la pena, ya sea que desee generar tráfico en las redes sociales o transmitir información importante a los lectores. Solo asegúrese de probar sus complementos a fondo para asegurarse de que no haya peculiaridades de diseño.

Lexie lu Sobre el Autor: Lexie Lu es diseñadora independiente y bloguera. Le encanta investigar las últimas tendencias y siempre tiene una taza de café cerca. Ella gestiona Diseño de asado y se puede seguir en Twitter @lexieludesigner.

Todas las ediciones y reescrituras ingeniosas de Karol K.

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. ¡Únete a él ahora es gratis!

Deja un comentario

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

Ir arriba