Para un mejor diseño de UX: ¿Puedo hacer clic aquí?

Cómo los cambios sutiles pueden aumentar su CTR

Todo el mundo quiere más clics. Más toques. Más usuarios diciendo 'sí, estoy en lo que sea que me estás dando'. Queríamos ver algunas formas que realmente hacen que los usuarios quieran hacer más clics, ¡aquí es donde entra en juego el diseño de UX !

Está bastante bien plasmado en toda la web: cuando logra que los usuarios hagan clic, un cambio sutil puede ser muy útil. Analizamos cuáles podrían ser exactamente esos cambios sutiles y el efecto que podrían tener en sus conversiones.

fuentes

Las fuentes pueden tener un efecto enorme y loco. Por ejemplo, en 2009, Tropicana cambió de marca a lo grande, y una gran parte de eso fue rehacer su fuente. Recuerda que la tipografía Tropicana también es su logo.

Imagen a través de Vital Design

Las ventas rápidamente cayeron un 20%.

Las fuentes también son una de las cosas más estables en las que puede confiar cuando hace que las personas hagan clic.

En general, una fuente sans serif en negrita con alto contraste funcionará muy bien.

¿Por qué? Es el más fácil de leer. Ejemplos de esto están en todo el Internet. Basecamp, BaseCRM, Evernote, mHelpDesk: todas estas empresas tienen los mismos CTA: fuente sans serif en negrita y alto contraste. Es fácil de ver, es fácil de leer. Es por eso que las empresas tienden a usarlo sobre las fuentes serif. (Lo mismo ocurre con los carteles: puedes leerlo desde hace mucho tiempo). Además, sans serif es más fácil de leer en una computadora, razón por la cual desea usarlo cuando desea que el lector haga clic; necesitan saber lo que está diciendo antes que cualquier otra cosa.

Sombras paralelas + efectos 3D

Es sorprendente cómo las sombras paralelas y hacer algo en 3D pueden hacer que la gente haga clic en él. Es realmente el principal inconveniente del diseño plano. (Actualmente. La otra es que, con el tiempo, tendrá una fecha loca). Cuando las cosas son realmente planas, se ven geniales, pero no es tan fácil saber qué se puede hacer clic y qué no. Jakob Nielsen discutió esto cuando evaluó Windows 8 en 2012.

Debido a que las personas hacen más clic cuando las cosas realmente parecen botones, los bordes redondeados o una sombra hacen que sea muy fácil saber qué se puede hacer clic y qué no.

(Consejo profesional: estos se llaman botones estilo quiosco).

Esto en realidad presenta un problema interesante. Los botones estilo quiosco se usaron originalmente en salas de juegos y otros lugares en el pasado. Entonces, cuando nos volvimos digitales, esa norma se mantuvo. Eso tiene sentido, pero en algún momento, se vuelven botones biselados y 3D por el simple hecho de ser botones 3D biselados, no porque alguien realmente recuerde de dónde vienen. Es como el icono de guardar del disquete: la raíz skeuomorphic finalmente se vuelve arbitraria y ya no es skeuomorphic.

Todo esto para decir que las personas se sienten más cómodas haciendo clic en los botones estilo quiosco en este momento, pero es posible que veamos un alejamiento constante si un diseño plano puede aguantar algunos años más.

Movimienot

Mucha gente asocia el movimiento con la creación de algo en 3D en el que se pueda hacer clic, pero creo que es lo suficientemente importante como para justificar una categoría propia, primero desde una perspectiva de UX y segundo por lo que significa para el diseño plano.

Desde una perspectiva de UX

Los usuarios necesitan retroalimentación para sus acciones. Es la forma número 1 de ayudar a los usuarios a comprender dónde están y qué hacer.

El primer trabajo para hacer que se pueda hacer clic en algo es decirle a los usuarios que se puede hacer clic en él.

Cuando se trata de botones, por ejemplo, el más mínimo cambio de gradiente puede hacer maravillas. Por ejemplo, la página de inicio de Eventbrite utiliza un ligero cambio de degradado en sus iconos para mostrar que se puede hacer clic en ellos y reforzar la ubicación del usuario:

Otro gran ejemplo es la página de inicio del sitio web de eTecc/Interactive. En realidad, usan un relleno para que el usuario sepa que se puede hacer clic en algo.

Es una manera tan fácil de averiguar cómo informar a los usuarios en qué se puede hacer clic y en qué no. Y a medida que las cosas se vuelven más y más planas, esta retroalimentación visual es cada vez más importante. Curiosamente, esto es algo en lo que Apple podría mejorar. Echa un vistazo a la página de inicio de Apple.ca.

Parece que se puede hacer clic en los enlaces en la parte superior, lo cual es cierto, y hay un pequeño cambio de gradiente para reafirmar ese conocimiento para el usuario. También podemos suponer que también se puede hacer clic en la opción de ver la galería, y nuevamente hay un cambio de color para reforzar eso.

¡Pero el problema es que se puede hacer clic en toda la pantalla! Es extremadamente poco intuitivo para el usuario y, como alguien que hace clic mucho , me tomó un tiempo descubrir por qué la página seguía cambiando. No es en absoluto una interfaz de usuario intuitiva.

Desde una perspectiva plana

Entonces, si bien Apple no lo ha logrado el 100% del tiempo, están bastante cerca. Y el movimiento permite a los diseñadores crear las interfaces planas que desean y al mismo tiempo les permite a los usuarios saber qué se puede hacer clic y qué no. ¿Te das cuenta de que todos los ejemplos eran diseños excepcionalmente planos? Divulgación completa que planeé eso. Ilustra que el diseño plano puede funcionar para un botón, siempre que haya comentarios.

Aquí hay un ejemplo de diseño plano (más o menos) sin retroalimentación: aunque para mí está claro que es un botón, sin retroalimentación se siente un poco como si mi computadora no funcionara.

Contraste + Color

Lamentablemente, no hay un código RGB particular que garantice que las personas hagan clic. Pero hay algunas reglas excelentes a seguir que te ayudarán. Si desea que los usuarios hagan clic en algo, desea que se destaque. Eso significa que necesita que contraste dramáticamente con cualquier otra cosa que lo rodee, incluso si eso significa romper con la paleta de colores de una marca.

Por ejemplo, David Hamill recomienda usar un color para los hipervínculos que no se use para nada más. En su sitio, cada enlace está hecho en rosa. Es fácil como usuario saber qué es un enlace y qué no lo es. Combinado con un cambio cuando pasa el cursor sobre él, es realmente obvio para el usuario cuándo puede hacer clic en algo.

Este tipo de problema de color y contraste suele surgir con llamadas a la acción (CTA) y botones, y un pequeño cambio en el color puede generar un gran cambio en las ganancias. Por ejemplo, Vibethink escribió sobre CTA y botones, e informó que cambiar el color y la forma de un botón aumentó las conversiones (léase: clics) en un 35 %. Sintieron que el aumento del contraste facilitaba que los usuarios hicieran clic.

Pero cambiaron dos cosas, por lo que no es absolutamente científico. Hubspot en 2011 publicó los resultados de algunas pruebas A/B en los botones rojo y verde y descubrió que el botón rojo superaba al verde en un 21 %.

Por lo tanto, el color y el contraste pueden desempeñar un papel muy importante para lograr que los usuarios hagan clic en las cosas.

Envolver

El diablo está en los detalles. Como diseñadores, desarrolladores, UXers y marketers, cada vez que hacemos clic en algo, le estamos pidiendo al usuario que haga algo. Haga clic aquí. Presentar la solicitud. Contáctenos. Comprar ahora. Sea lo que sea, es algo que ellos tienen y que nosotros necesitamos. Entonces, ¿por qué no simplificar eso? La mejor manera de ayudar a sus usuarios a hacer clic (y, por lo tanto, probablemente lo ayude a usted) es hacer que sea fácil hacer clic. Al hacer que los botones se ajusten a las expectativas con un diseño de estilo quiosco, al hacer que las fuentes sean fáciles de leer en una pantalla (incluso si son pequeñas) y al proporcionar comentarios sobre los botones y el contenido en el que se puede hacer clic, facilita la vida de sus usuarios.

Eso es todo, de verdad. Cuando esté haciendo que se pueda hacer clic en algo, haga la vida de sus usuarios más fácil al mismo tiempo.

¿Disfrutaste esta publicación? También es posible que desee leer nuestra publicación Comprenda a sus usuarios para mejorar el diseño de UX de su sitio web o nuestros ¡ Grandes productos que todo diseñador de UX debe tener !