10 tips que pueden mejorar drásticamente la experiencia del usuario en tu página web

10 tips 1

En el panorama cambiante del marketing de hoy, como nunca tu sitio web se ha convertido en la herramienta tan poderosa, como un vendedor de 24 horas los siete días de la semana tu website tiene el potencial de ser el activo con mayor poder y la pieza central de tus esfuerzos en marketing.

Sin embargo, los rápidos cambios tecnológicos pueden hacer parecer a tu site viejo y desactualizado; algunas veces hacer un rediseño resulta ideal, pero puedes no tener el tiempo o el dinero requerido para invertir en un proyecto de esa magnitud. Si este fuera tu caso, hemos organizado esta lista de las 10 maneras simples mediante las cuales puedes mejorar tu sitio web y hacerlo más servicial y útil.

1) Utiliza espacios en blanco

En más de una ocasión he escuchado a clientes quejándose de que hay demasiados espacios en blanco en sus sites y que todo este activo sin uso debería ser utilizado para más publicidad de sus servicios; sin embargo, el espacio en blanco es esencial para lograr un buen diseño, ya que hacen que los contenidos sean más legibles permitiendo además que los usuarios pueden concentrarse en los elementos que se hallan alrededor del texto.

De acuerdo a Crazy Egg, los espacios en blanco que circundan los textos y los títulos incrementan la atención del usuario en un 20%; asimismo los espacios en blanco transmiten la sensación de apertura, frescura y modernidad al site y si esta es la imagen que desea proyectar la marca, entonces ellos te permitirán comunicar esta sensación a los usuarios; sin embargo, uno de los inconvenientes a tener en mente es que efectivamente éstos toman espacio.

Si de lo que se trata es de colocar mucho contenido hacia abajo en la página (debajo de la parte que es inmediatamente visible sin iniciar el recorrido de la página), la posibilidad de colocar mucho espacio en blanco podría ocasionar el remplazo de alguna información de valor; la clave es encontrar el balance entre lo que es lo más importante a comunicar que debe ir en la parte alta y alrededor de este contenido algo de espacio que resalte la imagen o/y el texto.

Un buen ejemplo de uso efectivo del espacio en blanco está en http://www.sessionm.com/; en este ejemplo el espacio en blanco alrededor del título: “Una Plataforma, Muchas Aplicaciones” permite al lector concentrar su atención en el significado de la frase y en lo que se muestra en la pantalla, el párrafo de apoyo permite al lector sentir una sensación de apertura y claridad.

- Engagement + Lealtad para la velocidad del móvil - Comencemos - Una plataforma. Muchas aplicaciones

– Engagement + Lealtad para la velocidad del móvil
– Comencemos
– Una plataforma. Muchas aplicaciones

2) La velocidad de la página

Una de las experiencias más frustrantes para el usuario de la web es esperar demasiado tiempo a que la página se cargue, con el incremento del uso de los dispositivos móviles la gente ingresa a contenidos en todas partes del mundo y en muchas plataformas diferentes, si se está navegando online en Starbuck o viendo televisión a través de una laptop, las personas esperan obtener resultados rápidos del contenido que desean.

En el caso de no lograr resultados rápidamente, esto normalmente se traduce en rebote; las páginas que cargan lentamente resultan siendo una experiencia interrumpida del usuario y puede ser la fuente de frustración ya que el usuario simplemente no dispone de tiempo para esperar; ¿necesitas una prueba de esto? Un retraso de carga de 2 segundos durante una visita termina en una tasa de abandono superior al 87%

Entonces, ¿qué debes hacer? Obtén tu score o puntaje de tu site, Google ofrece un servicio gratis con el cual puedes conseguir información sobre la velocidad de tu página, además otorga algunas sugerencias para mejorar los tiempos de carga en dispositivos móviles y desktops.

Un buen ejemplo de velocidad de carga es “Barnes and Noble”, sin importar el dispositivo que tengas este site se carga rápidamente, se debe tener cuidado en cargar primero algunos elementos importantes de manera de saber que los contenidos están en camino; haz la prueba mismo: http://www.barnesandnoble.com/.

Si quieres analizar la velocidad de tu página, te recomendamos esta guía completa de Mr Dupon sobre Google Analytics, donde podrás encontrar como analizar varios aspectos sobre las visitas de una página web.

3) Utiliza CTA (llamadas a la acción) atractivas

Los clientes están ya acostumbrados a seguir ejemplos visuales para determinar cuál es el contenido que les es importante, CTAs que estén marcados con claridad con una palabra de acción permite a los usuarios navegar más fácilmente a través de tu site y conseguir lo que ellos desean.

Cuando estés en el proceso de crear los botones para tu website debes pensar sobre los colores y la psicología que éstos implican. En este sentido, un estudio realizado por Maxymiser, los investigadores quedaron impresionados al encontrar que el site de Laura Ashley logró un incremento de 11% de clicks en el área de “checkout “y pago mediante una prueba que realizaron de variaciones de colores y mensajes de acción; diferentes colores evocan a diferentes mensajes por lo tanto debes pensar en el mensaje que deseas transmitir a los usuarios (confianza, experiencia, inteligencia) y escoger con consciencia tus colores.

Una segunda consideración son las palabras que se utilizan en los botones, las palabras a utilizar deben incluir un verbo o una palabra de acción que incite al usuario a hacer ALGO; la selección de las palabras correctas o los “gatillos” psicológicos está altamente determinado por el nivel de identificación emocional que las palabras producen; la falta de conexión emocional significa que no haya acción, por lo tanto se debe hacer que las palabras resalte, sean sensible al tiempo y orientadas a la acción.

Un buen ejemplo del uso de CTA es WUFOO (link), su página completa está orientada a la acción y utiliza botones que estimulan al usuario a ir al próximo paso; al final de la página también podrá ver el uso de un lenguaje sensible al tiempo como: “Suscríbete ahora”, y orientado a la acción como: “COMENCEMOS”, éstas son palabras de acción que incitan y guían al usuario.

- Cree y comparte tus formularios Suscripción profesional / Suscripción gratis - Construir formularios online puede ser duro. Wufoo lo hace más fácil Pruebe nuestro constructor de formularios - Wufoo tiene los aspectos que te gustan. Ve más aspectos - Tenemos planes desde gratis hasta ilimitados. Suscríbete ahora - ¿Quieres saber más? Comencemos

– Crea y comparte tus formularios
Suscripción profesional / Suscripción gratis
– Construir formularios online puede ser duro. Wufoo lo hace más fácil
Pruebe nuestro constructor de formularios
– Wufoo tiene los aspectos que te gustan.
Ve más aspectos
– Tenemos planes desde gratis hasta ilimitados.
Suscríbete ahora
– ¿Quieres saber más?
Comencemos

4) Utiliza la diferenciación de los “Hyperlinks”

Cuando se agrega un link a cualquier página se le dice al usuario que tú deseas que el usuario pinche allí, hay que asegurarse que los links son con facilidad identificables visualmente; subrayar y ponerle colores diferentes a los textos llama la atención de los lectores y les permite saber que se trata de un link.

En un estudio elaborado por Karyn Graves, ella muestra que los usuarios regulares de la web ven los textos subrayados y azules como un link y saben que deben pinchar sobre ellos; explotar las expectativas de los usuarios y lo que ya ellos saben sobre el uso de la web resulta ser equivalente a obtener éxito. Cuando hablamos de la diferenciación de los “hyperlinks” nadie necesitará reinventar la rueda, apegarse a lo que ya es convencional puede ser el mejor aliado, una manera simple de probar la efectividad de tus links es borrar y eliminar el color del diseño y ver qué aparece.

Cuando se hacen los “hyperlinks” se debe dejar de pensar en su tamaño, pues en la medida en que los títulos de los links sean más grandes, en esa misma medida serán más fáciles de identificar.

Por ejemplo, para revisar el website de GE pincha aquí vs Revisa aquí el website de GE.

5) Utiliza viñetas, viñetas, viñetas

Las viñetas permiten al usuario obtener rápidamente toda la información que desea: beneficios, cómo resolver problemas, aspectos claves de un producto o servicio, todo en corto tiempo; esto hará que tus propuestas sean más atractivas y poner a la disposición de los usuarios to lo que ellos necesitan.

Existe una variedad de iconos que te ayudarán a ser creativo con las viñetas y apoyarán al lector más allá de las imágenes que representarán el tema a tratar; también resultan de utilidad porque obligan al redactor a separar los puntos más importantes sin ser atrapado por la terminología o especificidades.

Un buen ejemplo de las viñetas no-convencionales los podemos ver en http://www.one.org/us/about/, en esta página se utilizan iconos como viñetas para resaltar los cumplimientos de esta organización de manera de facilitar la lectura; observa además el espacio en blanco alrededor de los viñetas que ayudan al lector a concentrarse en cada una de las secciones.

Algunos de nuestros cumplimientos de los cuales nos sentimos más orgullosos incluyen:

Algunos de nuestros cumplimientos de los cuales nos sentimos más orgullosos incluyen:

6) Utiliza las imágenes, pero conscientemente

La gente en internet es cada vez más inteligente y rápida en hacer juicios de los websites de compañías, desde la primera oportunidad de visita al site pueden tener en mente aquellas fotos genéricas que ellos mismos han visto en otros lugares o que por lo menos no parecen tener un estilo muy personalizado; el uso de estas fotografías en stock pueden hacer disminuir la confianza y mostrarse como meramente genéricas y no únicas, desafortunadamente esta misma asociación se aplicará también a tu negocio.

En un caso de estudio hecho por Spectrum, Inc sobre la compañía Harrington Movers, dedicada a mudanzas y ubicada en New Jersey y la ciudad de New York, ésta pudo aumentar las conversiones en su página mediante la sustitución simple de un stock de fotos por imágenes reales del equipo de mudanzas; igualmente obtuvieron el mismo incremento de conversión y confianza de la página con sólo incluir una foto de sus camiones de mudanza actuales (esta es la historia completa). Como este mismo caso, hay muchos otros casos de estudio que apoyan la aseveración sobre que las imágenes de alta calidad fallan en el objetivo fundamental de crear conexión entre el usuario y la compañía o marca.

Definitivamente, ninguna de estas fotografías de stock y alta calidad será capaz de transmitir tu marca, servicios y productos de la manera que tú mismo lo deseas, solo tus propias imágenes reales lo pueden hacer de la misma manera que lo haces cuando le hablas con claridad a los clientes potenciales; usa las imágenes estratégicamente y ubícalas en el website como un medio de apoyo a los contenidos que ofrezca a los usuarios una ruptura visual y refrescante del texto pero siempre asegurándote de que éstas son de relevancia y no genéricas . Revisa estas infografías de imágenes reales en comparación con fotografías de stock.

10 tips 5

7) Incluye títulos bien diseñados y escritos

Tus títulos y contenidos deben tener como guía las necesidades de los clientes potenciales, incluir palabras claves en los títulos es muy importante también para que el mensaje esté bien dirigido al objetivo y poder atraer a la audiencia correcta.

Los motores de búsqueda normalmente otorgan a los títulos más peso que a los contenidos, por lo tanto la selección correcta de los títulos y hacerlos resaltar puede mejorar de forma significativa tu habilidad de búsqueda, pero lo que es más importante es el hecho de que los títulos sirven de guía al usuario a lo largo del site ofreciendo una visión más fácil y permitiendo encontrar directamente los contenidos que sean requeridos.

Un buen ejemplo de títulos bien diseñados con contenidos coherentes, lo podemos ver en: http://www.tilde.io/, allí los títulos se resaltan en tamaño y color y describen con precisión el contenido que sigue.

Vivimos y respiramos código.

Vivimos y respiramos código.

8) Mantén la coherencia de tu website

La coherencia significa hacer que todo encaje bien, el tamaño de los títulos, el tipo de letra, el color, los estilos de los botones, el espaciado, elementos de diseño, estilos de ilustración, selección de fotos, etc. todo debe girar alrededor del tema para hacer que el diseño sea coherente entre cada una de las páginas. Al proporcionar al usuario una bella experiencia de navegación a lo largo del site, resulta importante de que éstos se enteren de que aún están en tu site; los cambios de diseño drásticos de una página a otra, pueden crear en el usuario el sentimiento de estar perdido y confundido, creando así una pérdida de confianza en tu site.

¿Estoy en el lugar correcto? Es la pregunta que siempre me hago al navegar por sites incoherentes, y cuando lo hago, usualmente termino por abandonarlos. Las inconsistencias en diseño reducen la calidad de los productos y servicios que has colocado ante los ojos del visitante

La Fundación Winshape es un buen ejemplo de diseño coherente, todas las páginas siguen un patrón común: navegación a la derecha, grandes títulos, subtítulos con fondo de imágenes y algún contenido debajo, por lo tanto, sé que sin importar donde pinche todavía estoy en el mismo website ya que el estilo es coherente. Revísalo aquí: http://www.winshape.org

WinShape le da forma a los hogares

WinShape le da forma a los hogares

9) Atrapa tus 404s

Si bien los motores de búsqueda no aplican penalizaciones severas por los errores conocidos como 404 (página no encontrada), un usuario que desee pinchar el link o imagen sí lo hará, pues él espera que el link lo lleve hasta el próximo lugar donde quiere ir.

El hecho de encontrar un mensaje 404 hará que el usuario se moleste y que piense al menos dos veces gastar su tiempo en ese website, teniendo la posibilidad de poder ir a cualquier otro lugar y conseguir una solución más rápida. Además de lentitud en cargar de las páginas, caer en un error 404 es otro evento altamente frustrante para el usuario ya que interrumpe completamente su recorrido a través del site.

Si deseas revisar si tienes cualquier 404 puedes configurar la herramienta de “Google Webmaster” en tu sitio web y revisa la presencia de estos errores (aquí verás cómo) también puedes usar este: Revisión gratis 404.

Como recurso adicional, puedes también asegurarte que cuando un usuario se encuentra con un 404, se ofrezca la opción de poder regresar a la página anterior. Revisa aquí ejemplos creativos de páginas 404.

10 tips 8

10) Sé receptivo y amigable a dispositivos móviles

Las tecnologías han avanzado para cumplir con las necesidades de los dispositivos móviles, en este sentido los websites han sido una parte significativa de esta evolución, por lo tanto, es ya un imperativo que tu sitio web sea amigable a estos dispositivos, así como presentar facilidades para navegar sin importar el tipo de pantalla que se utilice para ingresar a la página.

Recientemente, Google ha iniciado la penalización de aquellos sites que no estén optimizados para móviles, presionando aún más así al cumplimiento de esta necesidad; esta es probablemente la manera más valiosa y sencilla de mejorar la utilidad de tu website. Si no estás seguro de que tu sitio web es compatible con aparatos móviles, puedes usar esta herramienta gratis .

Espero que estos tips te hayan dado algunas ideas sobre cómo puedes reformar tu website y hacerlo más amigable a los usuarios sin tener que mal gastar tu dinero. Para ver más ejemplos de sitios webs que pueden ser de utilidad, revisa nuestra guía gratis abajo.

.

 

 

 

.

*Versión original artículo en inglés: Darling Jiminez – http://blog.hubspot.com/marketing/improve-your-websites-user-experience