Hay decisiones de dise\u00f1o que valen millones y otras que cuestan millones \u2014 y lo curioso es que desde fuera parecen id\u00e9nticas. El dise\u00f1o de interfaz no consiste en \u00abque quede bonito\u00bb. Es la diferencia entre un visitante que completa una compra y otro que abandona el carrito, entre un formulario que se rellena y uno que se cierra. En esta gu\u00eda: las historias reales detr\u00e1s de los n\u00fameros y qu\u00e9 puede aprender de ellas cualquier negocio.<\/p>\n
El investigador de experiencia de usuario Jared Spool public\u00f3 uno de los casos m\u00e1s famosos del sector: un gran minorista (identificado posteriormente como Best Buy) exig\u00eda a cada cliente registrarse en el sitio antes de pagar. La l\u00f3gica sonaba razonable \u2014 \u00abas\u00ed tenemos los datos del cliente\u00bb. En la pr\u00e1ctica, el an\u00e1lisis de los datos revel\u00f3 que los clientes nuevos abandonaban en masa ante el formulario de registro, y los clientes recurrentes no recordaban la contrase\u00f1a: el 45% ped\u00eda restablecerla y muchos simplemente desist\u00edan.<\/p>\n
El equipo cambi\u00f3 un solo bot\u00f3n: en lugar de \u00abRegistrarse\u00bb \u2014 \u00abContinuar como invitado\u00bb. El resultado fue un aumento del 45% en las compras, que se tradujo en 300 millones de d\u00f3lares el primer a\u00f1o. Una palabra, en un bot\u00f3n.<\/p>\n
Piense en un restaurante. La UX es toda la experiencia: lo f\u00e1cil que resulta aparcar, la rapidez con la que le sientan, si la carta se entiende, cu\u00e1nto se espera el plato. La UI es el dise\u00f1o de la carta en s\u00ed \u2014 las tipograf\u00edas, los colores, las fotograf\u00edas. Una carta espectacular no salvar\u00e1 una noche en la que el plato tard\u00f3 una hora; y en una web, un dise\u00f1o precioso no salvar\u00e1 un formulario con 12 campos obligatorios. Primero se arregla la experiencia, despu\u00e9s se pule la apariencia.<\/p>\n
El ingeniero de Amazon Greg Linden revel\u00f3 un experimento interno: ralentizar artificialmente la carga de la p\u00e1gina en 100 milisegundos reduc\u00eda las ventas alrededor de un 1%. A la escala de Amazon eso son miles de millones de d\u00f3lares. Para un negocio peque\u00f1o el principio es id\u00e9ntico \u2014 una web lenta quema dinero en silencio. La velocidad no es una caracter\u00edstica t\u00e9cnica, forma parte del dise\u00f1o.<\/p>\n
En 2010 la compa\u00f1\u00eda estaba estancada. Los fundadores se dieron cuenta de que los apartamentos de Nueva York se fotografiaban con el m\u00f3vil \u2014 oscuros, borrosos, poco atractivos. Contrataron fot\u00f3grafos profesionales y volvieron a fotografiar los pisos. Las reservas de los apartamentos refotografiados se multiplicaron por dos o tres, y la iniciativa se extendi\u00f3 a toda la plataforma. La lecci\u00f3n: a veces el \u00abproblema de conversi\u00f3n\u00bb es en realidad un problema de contenido visual, no de c\u00f3digo.<\/p>\n
El sitio de reservas ten\u00eda un campo innecesario en el formulario de pago: \u00abNombre de la empresa\u00bb. Los clientes se confund\u00edan, escrib\u00edan el nombre de su banco, fallaba la verificaci\u00f3n de la direcci\u00f3n y la transacci\u00f3n se ca\u00eda. Eliminar ese \u00fanico campo a\u00f1adi\u00f3 12 millones de d\u00f3lares de beneficio anual a Expedia. Cada campo de su formulario debe justificar su existencia.<\/p>\n
1. Una acci\u00f3n principal por p\u00e1gina.<\/strong> Cuando todo grita, no se oye nada. Un bot\u00f3n destacado, el resto secundarios.<\/p>\n 2. M\u00f3vil primero.<\/strong> En la mayor\u00eda de los sitios el grueso del tr\u00e1fico llega desde el m\u00f3vil. Si el formulario funciona bien en el ordenador y se rompe en el tel\u00e9fono, ha perdido a la mayor\u00eda de sus clientes.<\/p>\n 3. La velocidad es dise\u00f1o.<\/strong> Objetivo: carga del contenido principal (LCP) por debajo de 2,5 segundos. Adem\u00e1s es un criterio de posicionamiento de Google.<\/p>\n 4. Formularios cortos.<\/strong> Cada campo adicional reduce la conversi\u00f3n. Nombre, tel\u00e9fono \u2014 y ya est\u00e1. El resto se pregunta en la conversaci\u00f3n.<\/p>\n 5. Textos a la altura de los ojos.<\/strong> \u00abSoluciones sin\u00e9rgicas de extremo a extremo\u00bb no dice nada. \u00abLe construimos una web que trae consultas\u00bb \u2014 eso s\u00ed.<\/p>\n 6. La accesibilidad es una obligaci\u00f3n legal.<\/strong> En Espa\u00f1a y la UE, la Directiva europea de accesibilidad y el est\u00e1ndar EN 301 549 obligan a cumplir WCAG 2.1 AA; en Israel rige la norma IS 5568. M\u00e1s all\u00e1 de la ley \u2014 una web accesible es sencillamente m\u00e1s f\u00e1cil de usar para todos.<\/p>\n 7. Coherencia.<\/strong> Los mismos colores, los mismos botones, el mismo lenguaje en todas las p\u00e1ginas. La incoherencia se percibe como falta de profesionalidad \u2014 y el cliente lo nota aunque no sepa explicar por qu\u00e9.<\/p>\n Google mide la experiencia de usuario de forma oficial mediante las Core Web Vitals \u2014 velocidad de carga, estabilidad visual y capacidad de respuesta \u2014 y las incorpora al posicionamiento. Es decir: un sitio con mala experiencia se penaliza dos veces, en conversi\u00f3n y en la cantidad de visitantes que llegan de entrada. En nuestro propio sitio, tras la optimizaci\u00f3n, la puntuaci\u00f3n de velocidad es de 92 con un LCP de 1,4 segundos. No es un lujo, es infraestructura.<\/p>\n Los visitantes entran y salen en segundos; hay quien empieza a rellenar un formulario y no lo termina; hay tr\u00e1fico pero no consultas; y la tasa de conversi\u00f3n en m\u00f3vil es notablemente inferior a la de escritorio. Cada una de estas se\u00f1ales se mide gratis en Google Analytics \u2014 y ah\u00ed es donde hay que empezar, antes de invertir un euro en un redise\u00f1o.<\/p>\n El rango es amplio: una landing page suelta puede costar unos pocos miles, y la definici\u00f3n y el dise\u00f1o de un sistema completo, decenas de miles en adelante. La variable principal es la profundidad de la definici\u00f3n: cu\u00e1ntas pantallas, cu\u00e1ntos casos de uso y si hace falta investigaci\u00f3n de usuarios. Bien hecha, la inversi\u00f3n se devuelve en conversi\u00f3n.<\/p>\n Para una web corporativa: entre dos semanas y un mes. Para un sistema o una aplicaci\u00f3n: de uno a tres meses, seg\u00fan la complejidad. Un proceso que se salta la fase de definici\u00f3n termina casi siempre en un redise\u00f1o m\u00e1s caro.<\/p>\n Si el problema es puntual \u2014 un formulario largo, una p\u00e1gina lenta, una navegaci\u00f3n confusa \u2014 una reforma focalizada da un resultado r\u00e1pido y barato. Si la web no est\u00e1 adaptada a m\u00f3vil, es cr\u00f3nicamente lenta o est\u00e1 construida sobre una infraestructura antigua, rehacerla casi siempre compensa m\u00e1s.<\/p>\n Una prueba en la que a la mitad de los visitantes se les muestra una versi\u00f3n y a la otra mitad otra, y se mide cu\u00e1l convierte mejor. Es la \u00fanica forma de saber de verdad \u2014 en lugar de suponer \u2014 si un cambio de dise\u00f1o funciona. As\u00ed se descubri\u00f3 el bot\u00f3n de los 300 millones de d\u00f3lares.<\/p>\n En Rainz empezamos por una definici\u00f3n basada en datos \u2014 qui\u00e9nes son los usuarios, qu\u00e9 los detiene, qu\u00e9 conviene arreglar primero \u2014 y solo despu\u00e9s dise\u00f1amos. Eche un vistazo a nuestro servicio de dise\u00f1o UX\/UI<\/a> y a la especificaci\u00f3n de sistemas<\/a>, o simplemente hable con nosotros<\/a>.<\/p>\nUX y Google: la experiencia tambi\u00e9n influye en el posicionamiento<\/h2>\n
4 se\u00f1ales de que tiene un problema de UX<\/h2>\n
Preguntas frecuentes sobre dise\u00f1o UX\/UI<\/h2>\n
\u00bfCu\u00e1nto cuesta el dise\u00f1o UX\/UI de una web o un sistema?<\/h3>\n
\u00bfCu\u00e1nto dura un proceso de definici\u00f3n y dise\u00f1o?<\/h3>\n
\u00bfEs mejor reformar una web existente o construir una nueva?<\/h3>\n
\u00bfQu\u00e9 es un test A\/B y por qu\u00e9 importa?<\/h3>\n
\u00bfQuiere una interfaz que venda?<\/h2>\n
Gu\u00edas relacionadas<\/h3>\n