Creando páginas que si le sirvan a tus usuarios — El UX de una web exitosa

A un usuario le toma menos de 3 segundos decidir si la página web en la que invertiste horas, dinero y esfuerzo en construir satisface sus necesidades. De los usuarios que se quedan, 66% va a hacer scroll porque considera que la información importante no está en la primer pantalla que les ofreciste y 22% va a llegar al fondo de la página sin importar qué tan “larga” sea. La usabildiad de las páginas web modernas es terrible, y los usuarios lo saben. ¿Quieres construir páginas web que realmente sirvan? En este programa vamos a hablar de la función de una página y cómo construir algo que realmente le de valor a la inversión en tiempo, dinero y esfuerzo de construir una.

Contexto

90% del tiempo que un usuario promedio pasa en su teléfono, lo pasa usando aplicaciones. Hay 6.6mil millones de usuarios con un smartphone (el 83% de la población global). Podríamos decir que prácticamente la totalidad de la interacción que tenemos con el universo “digital”, con el mundo al que solo podemos acceder a través de una pantalla y un dispositivo con conectividad, la hacemos a través de software especializado.

Pero, he aquí el problema.

Si ustedes hablan con alguien que hace tecnología, te dirá que el problema con hacer una app es que es mucho más caro, lento y complicado que hacer una página. También tienes que tener una versión para distintos sistemas operativos (Android, IOs, Desktop, TVs, etc) y tienes que darles mantenimiento y actualizarlos porque cada que hay un nuevo sistema operativo hay que asegurar la compatibilidad.

En muchos casos, lo que las empresas terminan haciendo es haciendo una aplicación que lo que hace es cargar una página web por dentro. Ellos creen que esto es ingenioso, pero el problema con eso es que, si recurren a esta solución, muy probablemente su experiencia va a ser horrible, porque entonces no se entiende exactamente para qué sirve una página y para qué sirve una app.

No sé si ustedes puedan recordar cuál fué la última página web a la que entraron, pero puedo asegurarles que su experiencia fue algo así.

1. Su experiencia comenzó en Google, o en una página nueva y escribieron en la barra del navegador una pregunta, un producto, una recomendación y obtuvieron una lista de resultados.
2. Ignoraron los primeros 2 o 3 resultados (porque esos siempre son anuncios) y apostaron por el tercer o cuarto enlace, que parece relevante.
3. Llegas a una página, que tarda 10 o 15 segundos en cargar, solo para que te aparezca una imagen gigante que cubre toda la pantalla de tu teléfono, y un texto en negritas diciendo “Bienvenido”
4. Tu, inmediatamente tratas de quitar esa pantalla y te desplazas ahí abajo, porque estás tratando de buscar la respuesta que Google te prometió que ibas a encontrar aquí
5. Comienzas a hacer scroll, y te aparece un pop-up “acepta nuestras cookies”, “suscríbete a nuestro newsletter”. Cierras esas ventanas, y empiezas a escanear rápidamente la página. Solo parece haber muchos cuadros con imágenes irrelevantes, cosas que no sabes si son botones, secciones, si abren en esa misma página o te llevan a otro lado.
6. En tu desesperación, regresas a la parte de arriba y buscas algo que parezca un menú, a ver si ahí puedes ver un listado de productos o de artículos o alguien que te explique qué chingados
7. Si de verdad necesitas mucho esta información, muy probablemente vas a estar avanzando y retrocediendo hasta que por suerte encuentres lo que buscabas.
8. Si no, muy probablemente ya estás intentado otra búsqueda en Google o de plano mejor ya buscas en Amazon o Mercadolibre

¿Por qué es tan horrible la experiencia de las páginas web?

¿Por qué cuando llegas a una página te recibe todo menos la información que de hecho estás buscando? Por eso la gente prefiere Apps. Si quieres mandar un mensaje por Whatsapp no tienes que entrar a una página y leer cosas que no te interesan. Abres la app, escoges un contacto, mandas el mensaje, listo.

Las apps son funcionales. Las páginas web no, y lo sabemos. Estamos acostumbrados a ello. Al grado de que 70% de los usuarios abandonan una página si no encuentran información en los primeros 3 segundos.

Hasta tenemos parodias de lo terribles que son las páginas:

https://userinyerface.com/

Y lo peor es que TODAS LAS PÁGINAS SON IGUALES (incluso a nivel técnico)

Todas. Las. Páginas. Son. Iguales.

Pero no todas las apps son iguales… ¿Qué raro no? Es casi como si las hicieran personas diferentes.

Pues, déjenme contarles una historia.

Definición

Una página web es el nombre que le asignamos a un concepto que de hecho heredamos del mundo físico, las páginas de un libro, una revista o un periódico, pero lo digitalizamos en la web y la convertimos en una página web.

Este nombre viene de que la primera iteración del internet, era para literalemente navegar documentos. A finales de los 80s el internet solo podía procesar texto, y las universidades que participaban en él. Se quedó el nombre de página aunque con el tiempo ese concepto ha dejado de hacer sentido.

En ese entonces necesitabas una infraestructura muy particular para poder usar internet, así que no tenía mucho caso que empresas dedicaran recursos a construir ese espacio. Para 1990 había 2.6 millones de usuarios de Internet. 2.6 millones es apenas la cantidad de gente que vive en la ciudad de Los Ángeles hoy.

Pero para el 2000, ya había 412 millones. Y para 2005 había 1,000 millones. El número de usuarios de Internet. Para 2015 había 3 mil 400 millones. Para ponerlo en perspectiva, hoy en el mundo hay 1 millón 700 mil casas con televisión. Entonces las marcas empezaron a darse cuenta que Internet era un canal cada vez más popular, que incluso era rival de otras plataformas que sirven para comunicar ideas a la gente.

Conforme más gente usó internet, la infraestructura mejoró. Con mejor infraestructura podemos transmitir más información en menos tiempo. Lo que implica que esa idea de la página que teníamos a principios de los 2000, con mucho texto, ahora podía incluir más imágenes, videos, código más sofisticado y complejo.

El problema es que 99.9% de las empresas no -nació- con el Internet. Lo adoptó.

Imaginen que son un alto ejecutivo de una empresa internacional, y leen un reporte de esta cosa llamada “internet” y que es muy importante y hay mucha gente haciendo dinero con él. Pero tu eres un alto ejecutivo, tu no tienes ni puta idea de qué es el Internet ni como funciona, así que solo le dices a tu gente que lo cheque y que quieres algo en Internet.

Tu equipo se voltea a ver la cara y piensa “Pues la página es como un medio de comunicación ¿No? entonces debe llevarlo Marketing” y se lo asignan. Pero marketing está lleno de gente que solo sabe medir rating de televisión y fechas de cierres de periódicos y revistas. No son gente de tecnología, eso es para ñoños y nerds. Marketing es cool, conocen actores de cine y gente famosa y hacen eventos en Cannes y se dan premios y así.

Entonces la gente de Marketing busca a un programador que les haga una página y el programador les dice ¿Y qué le pongo a la página?. Marketing le da todo el material que tienen y le pide que lo ponga ahí.

El tiempo pasa, la página se empieza a hacer cada vez más importante y le empiezan a dedicar más presupuesto. Eso no hace que la página sea mejor, solo que ahora se lo asignan no a un programador, sino a una agencia de publicidad, que no solo les hace los comerciales sino que además les hace la página también (para que diga lo mismo que el comercial)

¿Porque a qué otra cosa va a entrar la gente a una página sino a ver un comercial?

O entrar a la página de una marca para que me expliquen la marca a la que estoy entrando

O que la pieza más importante de comunicación, la que tiene colores y texto y cambia, sea para anunciar un video podcast. Claramente parte de la audiencia principal de la segunda marca de telefonía más grande del país.

Todas estas son páginas que están bajo el dominio de un área de Marketing, y todas dicen una cosa “No me importa para qué la gente está llegando a mi página, lo único que importa es lo que yo tengo que decir”

Imagínate que vas a hacer el súper a un Walmart, Falabela, Soriana, lo que tengas. Y que en la entrada se te atraviese alguien y te detenga:

¡Hola! Bienvenide a Wolmar, conoce nuestro nuevo podcast

Somos una empresa que vende cosas!

Lee las historias de nuestros empleados

Conoce nuestra política de privacidad!

Y tu pensando… señora, solo quiero entrar y comprar unos calzones e irme. Así serían las tiendas si estuvieran hechas por gente de marketing, no por gente que hace tiendas.

Las aplicaciones suelen ser construidas por equipos de producto, que están utilizando la app para ofrecer un servicio o habilitar que el usuario haga algo, pero por alguna razón la misma gente que trabaja en esas empresas no entiende que las páginas también son una herramienta, son un destino para alguien que está buscando una solución.

Pero bueno, entonces cómo se hace una página

¿Cómo se hace?

Hay casi 2mil millones de páginas web, y nadie navega ese listado de páginas una por una. Lo que eso significa es que es imposible que alguien llegue a una página web por accidente, solo hay dos maneras de llegar a una página:

• Alguien se sabe la dirección
• Alguien usó un buscador o un anuncio para encontrar la dirección

Es como tener una tienda física. O sea la única manera de que alguien llegue ahí es que sepa que está ahí. Puede enterarse porque preguntó, porque pasó por ahí, porque le dijeron dónde es. El punto es que el usuario ya tiene una razón para ir a la tienda.

O sea nadie se para en una tienda y dice “Qué es esto? Dónde estoy? Cuál es la misión y visión de esta tienda en la que estoy? Qué está haciendo esta tienda por el hambre en el mundo?

Lo primero que alguien que está haciendo una página tiene que entender es que las páginas son herramientas, la gente entra a las páginas a hacer algo. De la misma manera que la gente baja una app para hacer algo. La gente ya llega a un sitio con una expectativa

¿Página de restaurantes? Ver el menú, la dirección, el horario o pedir comida

¿Página de coches? Ver cuanto cuesta un coche y por qué tan caro y dónde verlo físicamente

¿Banco? Abrir una cuenta, encontrar una sucursal, operar dinero, contratar un producto

¿Tienda? Ver qué hay, cuánto cuesta y comprar

¿Página personal? Quién eres y cómo contactarte

O sea, es tan sencillo como pensar: Alguien va a invertir tiempo en encontrarme. No pueden llegar a mi por accidente, van a llegar porque buscaron algo relacionado conmigo, o porque directamente les interesa mi sitio. ¿Por qué la gente llegaría a ver tu comercial? SEGURAMENTE EL COMERCIAL LOS LLEVÓ A LA PÁGINA!

Si entiendes por qué la gente te está buscando y qué necesita, entonces no tienes que llenar espacio en blanco con una imagen de stock que a nadie le importa

Cada pixel en esa pantalla es importante. La idea de que esa primer pantalla es una cartelera es justo lo que piensa alguien de marketing. ¿La gente entra a tu página a ver una foto? ¿Tu call to action es “Conoce más”? ¿Por qué quiero conocer más? Por qué no me das la información aquí?

Lo primero que haces al entrar a Airbnb es reservar

Lo primero que haces cuando entras a Nu es pedir una tarjeta

Lo primero que haces cuando entras a Mailchimp es inscribirte.

Lo primero que haces en Virgin es comprar un boleto.

Nada de “conoce más”. Nada de “Lee más”.

El usuario ya está ahí ¿Por qué lo primero que ve no es algo que puede hacer?

Es super interesante como se nota la diferencia entre páginas hechas por gente de producto, como una extensión al servicio que ofrecen; y páginas hechas por gente de marketing que ven en la página solo un espacio dónde poner anuncios.

Marketing mide visitas, clicks. Lo que miden es que gente vea cosas, pero en un mundo donde puedes pagar para interrumpir a la gente, que la gente te vea no significa nada. A Producto lo miden por conversiones, por que la gente que llega haga algo, porque traer a gente que no va a comprar es desperdiciar dinero. Eso es una página exitosa, una página que da resultados al usuario y al negocio, no una página construída alrededor del ego.

Y es que eso es la fórmula que quiero compartirles hoy. La receta para construir una página exitosa es imaginar que estás diseñando es un espacio en el cual la gente transita para llegar a su destino deseado

Si entiendes el propósito que tiene la gente de llegar a tu página, de entrar a tu tienda, entonces puedes

La gente ya llegó ¿A dónde quieres llevarlos? Imagina un espacio físico.

Cuando yo estoy Diseñando un sitio, me gusta hacer un ejercicio de Storytelling.

Toda historia necesita un protagonista, y ese protagonista ya tiene ciertas características que definien cómo le va a hacer frente a la historia que estamos por experimentar.

Todo esto que les voy a contar es un ejemplo, por favor no lo usen de información para hacer un sitio:

• Quiero hacer un sitio para que emprendedores tengan servicios financieros para su gente.

¿Cómo es mi personaje? Hablando con emprendedores, lo que los motiva y lo que necesitan, me doy cuenta que son personas con tiempo limitado, que necesitan ayuda pero ultimadamente les gusta tomar decisiones ellos. Les gusta tener mucha información, y detestan que les vendan cosas, siempre todo tiene que ir en función de lo que es relevante para su negocio.

Entonces mi personaje ya está motivado, ya sabe que necesita servicios financieros, pero necesita guía para entender no solo la oferta, sino el beneficio que le ofrece la oferta.

Entonces, lo primero que mi personaje necesita ver, es un configurador para conocer cómo es exactamente su empresa. Después de todo hay emprendedores de empresas muy chicas, y empresas muy grandes; pero cada uno sabe que lo que necesita es una solución personalizada.

Me estoy imaginando como cuando entras a una tienda de algo que sabes que necesitas, pero no conoces. Tal vez como una ferretería, en dónde le puedes explicar a alguien en el mostrador el problema que tienes, tal ves tu presupuesto, y esa persona te explica cómo arreglarlo.

Cuando tienes claro esa estructura y cual es el resultado que estás queriendo habilitar el usuario, entonces puedes traducir ese flujo en pantallas, botones y componentes. Sabes que no necesitas poner imágenes gigantes para llenar el espacio porque no sabes qué hacer con él.

Hacer una página es escribir una historia. Es pensar qué va a ver primero, qué va a hacer con eso que ve. Si toma ese camino, y si no lo toma ¿Qué pasa? ¿Por qué no lo tomaría?

Por ejemplo, siguiendo con mi historia. Imaginemos que mi usuario aún no confía en mí para darme infomación. Entonces puedo explicarle no lo que hace mi plataforma, sino los beneficios que puedo ofrecerle al individuo.

Un sitio no es un monumento al ego. A nadie le interesa que tu te autodenomines la mejor solución para algo. Lo qué quiere entender la gente es de qué le sirve a ellos tu producto. Entonces no es solo decir “te permito hacer X Y Z”. Igual y mi usuario ni sabe que eso es algo que se debe o puede hacer, pero si le puedo decir “aumenta X% este indicador” “Haz esto que ya haces 10 veces más rápido”, esta solución es más conveniente porque te acompaña, o te asesora. Le dices las cosas que puedes cumplir y el valor desde el punto de vista de el usuario. El protagonista es el usuario, la historia únicamente hace sentido desde el protagonista.

En resumen, para hacer un excelente sitio:

1. Define el propósito de existir del sitio
2. Define el objetivo que va a definir el éxito del sitio
3. Define el protagonista que va a hacer uso de ese sitio, que va a ayudar a cumplir el objetivo que hace exitoso el sitio
4. Define el camino que ese protagonista debe recorrer, desde el principio, medio y final
5. Considera caminos alternos, en caso de que ese mismo protagonista necesite desviarse de ese camino, siempre pensando en lo que es relevante desde su punto de vista

¿Para qué sirve?

Tener un buen sitio no solo genera una gran experiencia de usuario, la mayoría de las veces tener un sitio que tiene un propósito claro te va a ayudar a optimizarlo para la mejor experiencia y a evitar tirar recursos dando mantenimiento a cosas que nadie le importa.

Un buen sitio además te da beneficios de SEO, retiene más y convierte más. Entender quién es tu usuario, en qué contexto te usa y para qué te usa te asegura que puedas mejorar la accesibilidad del sitio y adaptar la usabilidad al perfil que requiere de tu producto o servicio; que puedas explicar cosas en términos que ese usuario entienda y valore.

Un sitio bien implementado es mucho más fácil de mantener que una app, además de que solo tienes que optimizarlo para navegadores independiente a la configuración de Hardware. Además de que es la herramienta más valiosa que tienes para posicionarte y alcanzar una audiencia que potencialmente puede estar interesada en tu producto.

Así que ya no hay excusas para hacer sitios horribles que no sirven para nada. Y en especial no hay excusas para seguir haciendo sitios que solo son una imagen y un texto que no dice nada.

Notas del programa

10 Useful Findings About How People View Websites

https://cxl.com/blog/10-useful-findings-about-how-people-view-websites/

The 15 Second Rule: 3 Reasons Why Users Leave a Website
https://www.crazyegg.com/blog/why-users-leave-a-website/

Carousel Usability: Designing an Effective UI for Websites with Content Overload
https://www.nngroup.com/articles/designing-effective-carousels/

How Scrolling Can Make (Or Break) Your User Experience

https://usabilitygeek.com/how-scrolling-can-make-or-break-your-user-experience/

UX Myth: Myth #3: People don’t scroll

https://uxmyths.com/post/654047943/myth-people-dont-scroll

User Inyerface
https://userinyerface.com/

ALL WEBSITES LOOK THE SAME
http://www.novolume.co.uk/blog/all-websites-look-the-same/

Science confirms it: Websites really do all look the same
https://www.fastcompany.com/90501691/science-confirms-it-web-sites-really-do-all-look-the-same

Understanding the Aesthetic Evolution of Websites: Towards a Notion of Design Periods
http://vision.soic.indiana.edu/papers/webevolution2017chi.pdf

Timing for bringing page experience to Google Search
https://developers.google.com/search/blog/2020/11/timing-for-page-experience

Si quieres saber más de mí y de mi trabajo puedes Leerme en Medium: https://medium.com/@adriansolca Visitar mi sitio web: http://adriansolca.com/ Escribirme por Twitter: https://twitter.com/AdrianSolca Escribirme por LinkedIn: https://www.linkedin.com/in/adriansolca/ ¡Invítame un café!: https://www.buymeacoffee.com/adriansolca ¡Felices trazos!