Diseño de interfaces enfocadas para un mejor compromiso del usuario

Compromiso del usuario es una métrica difícil que se puede lograr de diferentes maneras para diferentes proyectos. La mayoría de los diseñadores piensan en el interfaz cuando hablan de interactividad, pero contenido de página También puede fomentar la interacción del usuario. Para una mejor participación del usuario, es importante escribir contenido atractivo, y presentar ese contenido en un diseño pegadizo.

Es mucho más fácil decirlo que hacerlo, pero si aprendes algunos fundamentos, no tendrás ningún problema en crear un UI enfocada con gran contenido para tus proyectos.

En este post, te mostraré cómo aumentar. interacción del usuario y compromiso de contenido en las interfaces basadas en web. Estas son las dos formas más comunes de atraer a un visitante, y si puede optimizar la experiencia No tendrá ningún problema en aumentar ese tiempo lucrativo en la métrica de la página..

Capturar la novedad

El concepto de novedad define un evento o cosa que es generalmente nuevo, a menudo muy nuevo y único según el contexto. Nuevos eventos atrapar nuestra atención porque destacar. Esto también se aplica al diseño de interfaces con elementos novedosos que representan elementos que parecen salta de la pagina.

Recientemente encontré una excelente publicación en la que se discute la importancia de la novedad en lo que respecta al compromiso. Los usuarios parecen gravitan hacia nuevas experiencias, interfaces y elementos UI porque son diferentes El único hecho de ser diseñado de manera diferente a menudo llama la atención.

Un ejemplo común es el botón de llamada a la acción que se encuentra en la mayoría de las páginas de destino. También puedes construir la novedad con Imágenes de fondo, ilustraciones o capturas de pantalla de aplicaciones., como en la página de inicio de Uber para empresas.

Esta página tiene un botón de llamada a la acción, pero mi atención es inmediata va a las capturas de pantalla. Se animan cuando se cargan por primera vez por lo que este combina Novedad del diseño con movimiento. para llamar la atención.

Una alternativa sería utilizar GiftRocket iconos ilustrados como enlaces para profundizar en el sitio.

Estos dos ejemplos Utiliza la novedad a su favor.. No siempre puede atraer a la gente al sitio, pero verá mejores resultados si capta su atención. a nivel visceral primero.

El diseño es la primera cosa Los visitantes ven, y hay que llamar su atención. en segundos para fomentar un mayor compromiso.

Tipografía skimmable

Los estudios han encontrado que la mayoría de los usuarios escanear una página web En lugar de leerlo palabra por palabra. Probablemente querrá atraer a la gente a leer su contenido, pero solo puede hacer mucho..

La mejor alternativa es crear. contenido skimmable con titulares, texto en negrita e imágenes que ilustran lo que intenta decir. Se me ocurre al menos Tres poderosas técnicas de escritura. Usted puede emplear en su contenido para aumentar la legibilidad:

1. Dividir contenido con subtitulos claros
2. Separar los párrafos para hacerlos más pequeños
3. Utilizar listas con viñetas para compartir tus puntos más rápido

El objetivo es mantener a tus lectores. bajando la pagina por cualquier medio necesario. Manteniendo contenido pequeño en trozos pequeños Tendrá un tiempo mucho más fácil para captar la atención y llevar a las personas más lejos en el sitio.

Echa un vistazo al blog Quick Sprout para ver un ejemplo de este estilo de escritura. El contenido está escrito por Neil Patel y, a menudo, escribe contenido de forma muy larga, pero rompe los párrafos en 1-3 oraciones cada una.

Si usted tiene titulares apropiados, y use imágenes / puntos de bala A lo largo del contenido, conseguirás que las personas hojeen y lean mucho más. También asegúrese de aumentar la cantidad de espacios en blanco entre párrafos. Márgenes y rellenos Ambos juegan un papel muy importante en el diseño y la legibilidad del diseño..

Diseño de texto para que sea en realidad divertido leer. La copia aburrida no atraerá, pero tampoco una copia divertida que sea demasiado pequeña o que carezca de contraste.

Imágenes llamativas

Un estudio de caso reciente de Backlinko sugiere que las páginas con al menos una imagen generalmente rango más alto que las páginas sin imágenes. Esto es genial desde una perspectiva SEO.

Pero ¿qué pasa con el compromiso del usuario? Si puedes mantener esa única imagen. encima de la tapa o cerca de la cima También atraerá la atención de los visitantes antes de que reboten. Recuerda que los nuevos elementos de la página tienden a atraer..

Cuando tenga una imagen (o muchas imágenes) intercaladas en toda la página, romper la monotonia de aburridos bloques de texto. Los usuarios pueden tomar un descanso de la lectura para apreciar la imagen, o hacer una conexión entre la imagen y el contenido escrito. Pero como con la mayoría de las técnicas de diseño, la calidad es más valiosa que la cantidad..

Un estudio de caso de Moz encontró que las imágenes de alta calidad tienden a mantener a los visitantes en la página por mucho más tiempo. Por otro lado, las imágenes de baja calidad. no trabajes tan bien y en algunos casos causaron que los visitantes rebotar más rápido que sin imágenes. Debes intentar incluir al menos una imagen que sea relevante para el contenido y eso proporciona valor al lector.

TechCrunch hace esto con imágenes destacadas en sus artículos donde a menudo encontrará una foto destacada sobre el pliegue.

WordPress facilita la adición de imágenes destacadas con la función de publicación de miniaturas. Puedes establecer una foto distinta para cada publicación que escribas y forzarlas a aparecer en la parte superior de la página. Esta es una manera perfecta de dar a los visitantes un vistazo de de qué se trata el contenido, y para aumentar CTR para widgets de publicaciones relacionadas que también contienen la miniatura de la publicación.

Elementos de página contrastantes

Si necesita llamar la atención sobre un área en particular en una página, asimetría es tu mejor amigo. Contraste impulsa una cuña dura entre áreas específicas de un diseño o ciertos bloques de contenido.

El visitante es naturalmente Ravitar hacia el contraste. porque es diferente Las grandes yuxtaposiciones de color, tamaño o espacio en blanco llaman la atención porque rompe el molde de todo lo demas en el diseño.

Mi ejemplo favorito para contrastar elementos de página es quizás la página de inicio de Sketch. Hay mucho contraste encontrado entre los dos botones de llamada a la acción, uno para descargar una versión de prueba de Sketch y el otro para comprar una copia.

El botón de compra utiliza un color de fondo completo. mucho más brillante que otros colores en el encabezado. El texto del botón también es más brillante en comparación con el botón de prueba gratuita. Esto lleva a los visitantes hacia el botón Comprar ahora únicamente a partir de estímulos visuales.

Notarás un técnica similar En la página de inicio de Optin Monster. Este encabezado solo tiene un botón etiquetado Obtener OptinMonster ahora. Es un botón verde brillante sobre un fondo azul sin otros elementos verdes a la vista.

El color, el tamaño y la forma atraen toda su atención porque contrasta con todo lo demas en el encabezado. Directamente al lado del botón hay un pequeño enlace de texto para una vista previa de video. Probablemente sea un gran video y merezca atención, pero no tanto como el botón de prueba / registro CTA..

Para un blog, es posible que tenga diferentes calificaciones para la participación del usuario. Una opción común es una boletín de noticias como el ejemplo en Aeolidia.

Si se desplaza hasta la parte inferior del contenido, notará un caja de registro de lujo-shmancy Diseñado sólo para el formulario de boletín. Destaca del resto de la página con un color de fondo único, una tipografía divertida y un lindo icono de King Triton.

La mejor manera de diseñar con contraste es estudiar ejemplos y simplemente experimentar. Vea lo que funciona y lo que no funciona. seguimiento de métricas con pruebas A / B. Si está buscando más ejemplos, eche un vistazo a este artículo de Codrops repleto de consejos y pantallas de sitios web asimétricos en vivo.

Fomentar la interacción del usuario

Hay muchas maneras de mantener a los visitantes interesados ​​en un sitio, pero la más común es haz que hagan cosas. Esto es cierto tanto para los blogs estáticos como para los sitios sociales dinámicos. No hay trucos de talla única para esto. Puedes hacer lo que sea necesario para que los usuarios sentirse comprometido con la página.

en un sitio estático, usted podría agregar un montón de enlaces relacionados para leer más, o incluir presentaciones de imágenes. Tú también puedes añadir formularios para comentarios de usuarios o un boletín electrónico.

Cuando se trata de interfaces dinamicas, El propósito del sitio es generalmente alentar el compromiso del usuario. El mayor obstáculo es enseñar a los usuarios Cómo funciona el sitio y cómo interactuar adecuadamente con la interfaz..

Echa un vistazo a esta publicación de KissMetrics que habla sobre las técnicas de participación del usuario. Una de las mejores estrategias que he encontrado es diseñar una visita guiada que lleva a los visitantes a través cada una de las características principales.

Piensa en lo confuso que sería la posibilidad de Twitter para un nuevo usuario. Si no siguen a nadie y no tienen seguidores, ¿por qué twittearían??

los “Seguir sugerencias” cuadro durante el registro ayuda a los nuevos usuarios familiarizarse con cómo funciona Twitter. Esta característica prepara a los nuevos usuarios para empezar a participar con la plataforma, y ​​para experimentar con características Como los siguientes, tweets y mensajes privados..

Aparte de una visita guiada también querrás hacer la interfaz sencilla. Las características principales deben ser 1-2 clics de distancia Desde el panel de control del usuario o la página principal. Interfaces intuitivas necesita explicación, y simplicidad capta la atención mucho mas rapido.

Al comprender todas estas técnicas, tendrá un tiempo más fácil de construir interfaces que resolver problemas de los usuarios, y animar a los nuevos usuarios a unirse. Si buscas mas Consejos de diseño de UX Revisa estas publicaciones relacionadas:

• Una táctica de usuario para aumentar el compromiso (thinkapps.com)
• Una lección de compromiso gradual (uxbooth.com)
• No asuma que los nuevos usuarios quieren aprender a usar su producto (uxdesign.cc)