Landing Page & UX

Diplomatura en Marketing Digital
Módulo / Landing pages y diseño

Índice
Módulo / Landing pages y diseño
Presentación 03
Objetivos 03
Programa 04
Material 06
Glosario 07
Unidad 1 08
Universidad Blas Pascal Derechos Reservados – Prohibida la distribución y difusión de este material de manera parcial o total.
Unidad 2 11
Unidad 3 31
Unidad 4 43
Evaluación 57
Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 2

| presentación
A lo largo del módulo, el alumno aprenderá a desarrollar una landing page de

punta a punta y a comprender por qué es importante ofrecer una muy buena
experiencia de uso en cada pieza digital.
Si bien el diseño visual es importante, hoy en día no garantiza la conversión

por sí solo. Hace falta ir más allá de lo lindo y lo feo, de lo que es tendencia y
lo que no. Hay que trabajar la estructura misma de los mensajes y producirlos
teniendo en cuenta la manera en que son consumidos en contextos digitales.
Por eso, este módulo se adentra en el aspecto funcional del diseño, para lograr
que la comunicación sea eficiente, cumpla con los objetivos del negocio y la
satisfacción del usuario.
El alumno encontrará conceptos y buenas prácticas para lograr que las piezas
digitales que produzca sean fáciles de usar, tengan buena conversión y dejen
una huella positiva en la memoria del cliente.
| objetivos
• Comprender qué es una landing page y cuál es la mejor manera de

diseñar los contenidos de modo que cumplan con los objetivos del
negocio, logrando desarrollar la estrategia comunicacional y las ideas
principales de una landing page.
• Comprender cuáles son las buenas prácticas de diseño y usabilidad,

para desarrollar landing pages eficaces en conjunto con perfiles profe-
sionales de IT.
• Analizar si una landing page cuenta con los elementos básicos para
lograr conversión y poder ejecutar acciones para mejorarla.
• Comprender por qué es importante diseñar con el foco puesto en las

personas: en su humanidad (psicología, comportamientos, emociones.)
• Enfocarse en el problema que quieren resolver con una landing page u

otra pieza digital para luego comprender cómo hacerlo.
• Comprender qué es usabilidad y cuáles son sus nociones básicas apli-

cadas a interfaces digitales, para poder juzgar una pieza o un sistema
completo.
• Comprender que el diseño de experiencia de usuario es una actividad

proyectual y una actitud de diseño.

| programa
Unidad 1 - Introducción a la conversión: Landing pages

● Conversión.
● Definición de landing page.
Unidad 2 - Landing pages avanzado

Los 4 componentes de una landing:
1. Audiencia
a. Fuentes de tráfico
b. La audiencia son usuarios: Cómo se consume la información
en pantalla.
c. Tips para definir a la audiencia.
2. Contenido
a. El contenido es el alma y el cuerpo de la landing. Texto y

diseño.
b. Elementos del contenido.
i. La landing es parte de una historia.
ii. Arquitectura básica:
1. Hero - Imagen con headline, descripción y
CTA.
2. Beneficios
3. Call to action
c. Cómo pensar el mensaje
i. Armar un mini briefing.
ii. Tips para trabajar el texto.
iii. Tips para las fotografías.
3. Acción
a. La acción
i. Call to action.
ii. Recomendaciones de usabilidad para los componentes
que toman datos o ejecutan una acción.
iii. Recomendaciones de texto para los call to action.
b. Probar e iterar.
i. Importancia de probar antes de salir al aire y cómo
hacerlo.
ii. Recomendaciones para testear. Qué la clase de test de
usabilidad podemos usar.
4. Métricas
a. Por qué es importante medir.
b. Qué medir y para qué.
c. Herramientas.
Análisis de la experiencia de una landing.

● Revisamos puntos buenos y malos a lo largo de toda la historia, no
solo de la landing.
Checklist para una landing exitosa

● Puntos a tener en cuenta antes, durante y después de haber lanzado la
landing.
Equipo ideal para desarrollar una landing

● Lista de perfiles ideales para tener contempladas todas las aristas,
lograr calidad y efectividad.

Herramientas para armar landings
● Lista y recomendaciones de algunas plataformas sencillas.
Unidad 3 - UX: Diseño centrado en el usuario

Introducción
● Qué es una experiencia
● Qué es UX.
○ Por qué es importante en marketing digital.
● Quiénes hacen UX y cuál es su rol.
3 ejes que componen el diseño de experiencias

● Resolver problemas
● Disciplina antropocéntrica
○ Los usuarios.
○ Repaso sobre cómo se consume la información en pantalla.
■ La influencia de la intuición.
■ La atención.
■ Modelos mentales.
Actividad proyectual
○ Proceso de diseño centrado en el usuario.
Unidad 4 - UX: Diseño de experiencia de usuario. Usabilidad y la conexión

emocional.
3 niveles para evaluar una experiencia
1. Funcional y comprensible
2. Usable
3. Disfrutable
● Arquitectura de la información.
● Usabilidad.
Metodología para diseñar la experiencia:

1. Entender el problema
2. Crear soluciones prototipando
3. Elegir la mejor solución
4. Armar un prototipo funcional
5. Validar con usuarios

| material de estudio
Material básico
Contenidos desarrollados en las unidades.
Material complementario
Libros
• Steve Krug, No me hagas pensar Una aproximación a la usabilidad en la

Web, Segunda edición, Ed. Pearson,
• Paz, Lorena Pioneros y hacedores: fundamentos y casos de diseño

de interacción con estándares de accesibilidad y usabilidad. - 1ª ed. -
Ciudad Autónoma de Buenos Aires: EGodot Argentina, 2013.
• Donald A. Norman, La psicología de los objetos cotidianos, 1988, New

York, Editorial NEREA, ISBN: 84-86763-38-X
• Daniel Kahneman, (2015) Pensar rápido, pensar despacio, Editorial:

DEBATE, 672 págs. ISBN: 9788483068618
• Hassan-Montero, Y.; Ortega-Santamaría, S. (2009). Informe APEI

sobre Usabilidad. Gijón: Asociación Profesional de Especialistas en
Información, 2009, 73pp. ISBN: 978-84-692-3782-3. Disponible online:
http://www.nosolousabilidad.com/manual/index.htm
• Copyblogger, Landing pages. How to turn traffic into money.
Artículos
• Jon Yablonski, Cognitive load (En inglés)
• Copyblogger, 6 maneras de mejorar la conversión de los botones (En

inglés) Disponible en: http://www.copyblogger.com/call-to-action-
buttons/
• Copyblogger, 8 maneras simples hacer más escaneable el contenido (En

inglés) http://www.copyblogger.com/scannable-content/
• Norman Nielsen Group, Qué tan poco leen los usuarios (En inglés)
https://www.nngroup.com/articles/how-little-do-users-read/
• Norman Nielsen Group, Estudio sobre lectura en dispositivos móviles

(En inglés)
• https://www.nngroup.com/articles/mobile-content/
• Crayon, Reporte de tendencias de diseño en landing pages (En inglés)

https://www.crayon.co/success/landing-page-trends
• No solo usabilidad: revista sobre personas, diseño y tecnología.

(Español) http://www.nosolousabilidad.com/index.htm
• Daniel Mordecki, Miro. Leo. Luego pienso http://www.mordecki.com/

html/miroleopienso.php

| glosario
Hero: Encabezado de la landing page. En general está compuesto por una

imagen de fondo, un título, una bajada y un botón de llamado a la acción.
Eye tracking: Es una tecnología que permite seguir el movimiento ocular para
entender dónde se posa la mirada.
Headline: Del inglés: título o titular.
Layout: Se refiere al dibujo estructural de una página web.
KPIs: Del inglés: Key Performance Indicator. Son medidas clave que se estable-
cen para entender si una landing page o otra pieza digital está cumpliendo con
los objetivos propuestos.
Stakeholder: Una expresión en inglés que podemos traducir como la parte inte-
resada del negocio. Por ejemplo, si uno presta servicios de consultoría para una
empresa, las personas con las que interactuamos y nos hacen una bajada de
lineamientos u objetivos, son nuestros stakeholders.
UX: Acrónimo del inglés para simplificar el término User Experience (experiencia
de usuario).

| unidad 1 | contenidos
Si buscamos “conversión” en el diccionario, encontramos las siguientes

acepciones, según la Real Academia Española:
Hacer que alguien o algo se transforme en algo distinto de lo que era. Ej.:
La convivencia los convirtió en buenos amigos. La piedra se ha convertido
en polvo.
Ganar a alguien para que profese una religión o la practique. Ej.: Se ha

convertido al budismo.
Detengámonos un poco sobre estos dos conceptos marcados en negrita.

Hagamos el ejercicio de colocarlos juntos: ganar a alguien para que se
transforme en algo distinto a lo que era.
Desde el punto de vista del marketing, ese es un buen resumen de la actividad

o del objetivo que queremos lograr. Se trata de persuadir a alguien a que
satisfaga una necesidad o cumpla un objetivo con lo que le ofrecemos
bajo la promesa de que después no será el mismo.
Convertimos a un posible cliente en un cliente que paga. Si bien, el cliente que

paga es en general un objetivo final, existen variantes: podemos proponernos
un objetivo de conversión que apunte a transformar a un curioso en un
interesado. Y, más adelante, sí en un cliente recurrente. Las posibilidades
son muchas y siempre van de acuerdo a lo que estamos vendiendo.
Pero, a lo que vamos es que, en definitiva, hablamos de conversión cuando

logramos un objetivo de negocio y, al mismo tiempo, logramos satisfacer
una necesidad de un cliente.
Podríamos sintetizar gráficamente este concepto, de la siguiente manera:
Gráfico diseñado por Emiliano Cosenza.
En este módulo, haremos foco sobre una pieza digital particular sobre la
vamos a apoyar nuestra promesa: las landing pages. Y hablaremos sobre
cómo lograr que tengan buena conversión, es decir, cumplan los objetivos
del negocio y del usuario-cliente.

¿Qué es una landing page?
Copyblogger, una plataforma de enseñanza de marketing digital, define a

una landing page como una página de un sitio web a la que le enviamos
tráfico para un propósito específico o resultado. Para ampliar en relación a
este tema, se puede visitar el siguiente enlace: http://www.copyblogger.com/
content-marketing-glossary/#landing-page
Su objetivo será persuadir al cliente a tomar una acción: registrarse, comprar,

leer o descargar algo, puede ser cualquier cosa. Para que tenga éxito, el
contenido y el diseño tendrán que ser funcionales a ese propósito.
El concepto landing se aplica a cualquier página o pieza de contenido en el

que “aterriza” el usuario y se intenta lograr algo particular.
En este sentido, vamos a encontrar que un usuario puede tener como landing:
Home page de un sitio
Con uno o varios objetivos.
Para una variedad de público.
Página a medida
Con un propósito u objetivo. ¡Uno y solo uno!
Para un público particular.
Pero, en este módulo nos vamos a concentrar en las landing pages, es decir,
en las páginas a medida que tienen un solo objetivo y son para un público
bien segmentado.
En el siguiente video de Copyblogger (en inglés), se explica qué es una

landing page en 1 minuto. Para ello usan una metáfora, proponen imaginar a
una landing como el campo de golf, en el que la pequeña bola es el potencial
cliente al que deberemos llevar hasta el hoyo.
Qué es una landing page en 1 minuto(En inglés) https://youtu.be/cAtWEZrr3

qg?list=PLak1tyLkJGrE4TY8nJhrv135bnnrnJQv_
Al final del video, destacan que no importa el tipo de objetivo que persigamos,
lo único importante a recordar es que debe ser sólo uno y en una página.
Hay excepciones para la cantidad de páginas. Si es necesario que lleve más

de una página, no es problema siempre y cuando fragmentar la información
sea la mejor estrategia para no atosigar al usuario.
La pregunta clave es: todo lo que mostramos y decimos, ¿está trabajando

para el objetivo que queremos conseguir? Si vemos que hay algo que no
está en función del objetivo, es que en realidad sobra.

| unidad 1 | actividades
actividad 1
Revisando conceptos
Indica si las siguientes afirmaciones son verdaderas o falsas.
Hablamos de una landing page que convierte cuando cumple con el objetivo de
negocio y, al mismo tiempo, satisface la necesidad de un cliente.
Verdadero
Falso
El objetivo de conversión siempre tiene que ver con lograr que un cliente pague.
Verdadero
Falso
Una landing page tiene varios objetivos de conversión.
Verdadero
Falso
El diseño y el contenido de una landing page deben ser funcionales al objetivo

de conversión.
Verdadero
Falso

Landing pages avanzado
Elementos de una landing
Para empezar a ver cómo vamos a desarrollar una landing, primero vamos a
fragmentarla en 4 componentes y hacer zoom en cada uno, para pensarlos en
profundidad:
Audiencia
Contenido
Acción
Métricas
1. Audiencia, clientes o usuarios
Las landings funcionan bien para un público específico, bien segmentado y con
la mayor certeza posible sobre sus necesidades.
Para que lo tengamos en cuenta, el público puede venir de múltiples fuentes de

tráfico, que funcionan como punto de entrada:
Publicidad paga (Google, Facebook, Twitter, etc).
Tráfico orgánico en buscadores.
Referentes y shares en redes sociales.
Correo electrónico.
Cualquier pieza no digital (cartel en vía pública, etc.).
Cualquiera sea la fuente, lo primero que tenemos que tener en cuenta es que a
nuestra landing llegan, por supuesto, seres humanos.
Pero tienen una particularidad importante: son usuarios, consumen nuestro

mensaje a través de una interfaz digital, que implica una experiencia de uso.
¿Por qué es importante tener en cuenta que son usuarios? Porque el consumo
de la información es diferente a los medios no digitales y, en consecuencia, los
modos de producción y diseño del mensaje, también lo son.
Algunos conceptos sobre cómo consumimos la información en pantallas
Dijimos que trabajamos con seres humanos que son usuarios. Esto implica que
debemos tener en cuenta nuestra biología a la hora de pensar los mensajes,
porque determina la manera en que consumimos y entendemos la información
en artefactos e interfaces digitales.

El consumo funciona gracias a estos dos engranajes principales:
La atención
La lectura no lineal.
La atención
Podríamos definir a la atención como una energía. Una energía psíquica que
logra que la información llegue a la conciencia y tomemos registro de ella.
¿Por cuánto se mantiene esa energía? Por menos de 8 segundos. Tomemos cada
uno de esos segundos como una oportunidad para transmitir nuestro mensaje.
Por eso, la única forma de lograr que nuestro mensaje llegue y motive a una
acción, es ganándonos la atención del usuario. Aquí la idea de ganar no es
casual, sino que tenemos que tener en cuenta que, desde el inicio, no tenemos
la atención de una persona, sino que debemos conseguirla con contenido de
valor, alineado a las necesidades del cliente.
Más adelante, en la siguiente unidad sobre diseño centrado en el usuario

hablaremos un poco más sobre cómo funciona la atención.
La lectura no lineal
Quizás, alguna vez hayas escuchado la premisa: “En la web, el usuario no lee”.
Y quizás te suene un poco exagerado, después de todo, seguramente estás
leyendo esto en tu pantalla.
Pero, lo cierto es que cada vez que llegamos a una página no comenzamos a
leer por el principio, sino que nuestro ojo busca lo que le llama la atención según
el objetivo por el cual nos propusimos visitar el sitio.
Por ejemplo: Cuando visito un sitio de noticias, en general tengo el objetivo de

ver qué pasó o tal vez estoy buscando saber algo sobre un tema en particular. Si
entro a esa página y en menos de 3 segundos mi ojo no encuentra aquello por
lo que llegué, lo más probable es que me vaya frustrado.
De esta manera el usuario escanea rápidamente la página y se detiene en lo que le

interesa. Y al detenerse lee rápidamente apenas las primeras dos o tres palabras.
Esa ventana pequeña es nuestra única chance de conectarnos con el usuario. Ya
volvemos sobre eso en breve, cuando hablemos sobre recomendaciones para
escribir el contenido de la landing page.
Por ahora, quedémonos con este concepto: el usuario no lee, escanea.
En el siguiente video vas a poder observar cómo lee un usuario en acción,

gracias a la tecnología del eyetracking.
Los círculos rojos representan el lugar donde se detiene la mirada. Si el círculo

crece en tamaño es que el ojo está fijando la vista en ese punto.
Prestá atención en:
La velocidad. El video parece acelerado, pero no lo está.
Los saltos, la lectura casi nunca es lineal.

Texto e imagen. Durante el escaneo, ¿el ojo se detiene más en el texto o en la
imagen?
https://youtu.be/i_isRNibX1I
Conclusión
La landing perfecta será aquella que tenga un mensaje alineado con las
necesidades del usuario o cliente, diseñado de acuerdo a cómo es consumido
el artefacto en cualquier contexto.
Eso nos mete de lleno en el componente que sigue, el contenido.
2. Contenido - Mensaje
El contenido es el alma de nuestra landing page, sin contenido no habría nada.

¿A qué nos referimos cuando hablamos de contenido? Nos referimos tanto a

texto como a diseño visual, dos elementos que se complementan el uno con el
otro, al punto que necesitan estar en armonía para que la landing sea efectiva.
Decimos esto, porque muchas veces se cree que lo más importante en una
landing es el diseño, que incluir imágenes atractivas y un diseño vistoso es
suficiente para que convierta. Es un error conceptual, el diseño más hermoso no
es nada si el texto está vacío de sentido. Y viceversa, el mejor texto queda en casi
nada, si el diseño no genera una sensación placentera.
Texto y diseño deben trabajar juntos, siempre, en función del objetivo que
queremos lograr.
Elementos clave del contenido
La historia
Nunca debemos pensar una landing page como una isla. Si bien, en general,
tienen una unidad de sentido y un objetivo bien definido, la landing siempre es
parte de una historia, es decir, que se conecta con un flujo que empieza antes
y sigue después.
Al momento de definir qué vamos a contar, tenemos que contemplar todas las
piezas y momentos de la historia.
Por ejemplo: si el punto de partida es un e-mail, pero también puede ser un ad

en redes sociales o una búsqueda orgánica, tenemos que diseñar el mensaje
para que se conecte fluidamente desde cualquiera de esos puntos. La historia
debe ser coherente, no importa cuál haya sido el punto de partida. Sino, por el
contrario, debemos crear variables del mensaje para que una landing responda
al e-mail y otra al ad en redes sociales, por ejemplo.
Recordemos que la landing no termina en la landing, sino en lo que hayamos

definido como conversión. Por eso es importante siempre dar pistas sobre lo que
vendrá después, para que no haya sorpresas. Por ejemplo, si se trata de una
registración, digámoslo; si se trata de la descarga de un reporte, digamos cuánto
pesa y en qué formato está.
En el gráfico a continuación mostramos esquemáticamente cómo es la historia

que vive un usuario desde cualquier fuente de tráfico, pasando por la landing
page, hasta el final de la historia.

Fuente: Gráfico diseñado por Emiliano Cosenza
Tengamos en cuenta que el look de la landing debe ser también consistente

con el look del punto de entrada. Si esto no sucede, el usuario sentirá un salto y
corremos el riesgo de que crea que hubo un error y se vaya. Siempre tratemos
de mantener la misma paleta de colores durante toda la historia.
Arquitectura básica de una landing
Si bien la estructura del contenido depende mucho del producto y del objetivo
que queramos conseguir, en ninguna landing pueden faltar estos tres elementos:
Hero con una imagen, headline y descripción.
En pocos segundos debemos contar qué ofrecemos y cuál es la propuesta

de valor. Este es el momento de llamar la atención con una promesa
de solución al problema o satisfacción de la necesidad del usuario.
Tratemos de responder por qué el usuario debería hacer lo que le proponemos

hacer.
Beneficios o features.
Se trata de desarrollar la propuesta de valor. El foco tiene que estar puesto más
en los beneficios que en las funcionalidades. Centrá el mensaje en qué podrá
hacer el usuario y no en lo increíble que es el producto o servicio.
Call to action. Le pedimos al usuario que haga algo: se registre, compre, nos
deje sus datos, etc.
Usaremos el componente adecuado para lo que necesitemos que haga. Por

ejemplo: un botón para descargar algo o ir a otra página; un formulario para que
deje datos.
Siempre podremos agregar más elementos, pero no lo hagamos si nos desviamos

del objetivo. En la imagen que sigue se muestra un ejemplo de una estructura
común de landing page, que armó el diseñador Pedro Cortés para el caso de un
software (prestá atención a las referencias, que explicaremos abajo):

Fuente: Pedro Cortés, diseñador. How To Make a Conversion-driven SaaS Landing

Page (2017 edition) Jun 26, 2017, disponible en: https://blog.prototypr.io/how-to-
make-a-conversion-driven-saas-landing-page-2017-edition-9ad4434c9bc2
Hero: Headline y descripción con la propuesta de valor y un call to action,

acompañado de una imagen.
A veces necesitamos una prueba de empresas que son clientes, para generar
confianza. El objetivo es trasladar la imagen de esas empresas a nuestro
producto. El efecto a conseguir es: “Si ellos confían en este producto, debe ser
bueno”.
Lista de features que le muestran al usuario qué es todo lo que ofrece.
Video que muestre cómo funciona o los features en acción. Ojo, no siempre el
video es el mejor recurso, porque muchos prefieren enterarse de lo mismo sin
tener que prestar atención por uno o más minutos. En un análisis sobre 1000
landing pages, que hizo Crayon, solo el 14% incluye videos.
Features adicionales, para satisfacer la curiosidad de si hay más o generar

sorpresa de que existen otras cosas. Ojo, solo incluyamos algo de este estilo si
se alinea con el objetivo que queremos conseguir.
Testimonios. Vamos a ver muchas landings con testimonios y en general son

muy útiles. Asegurémonos de que sean reales y cumplan con el mismo efecto
que buscamos al incluir empresas que usan nuestro producto o servicio.
Un CTA (call to action) de cierre. Es una repetición del primero, para que el
usuario no tenga que tratar de buscar cómo seguir.

¿Debemos siempre seguir esta estructura? No, es solo un ejemplo de una layout
común, que sabemos que ayuda a estructurar el contenido en pos del objetivo.
Cómo pensar el mensaje
Armá un briefing
El primer paso para definir qué vamos a contar en nuestra landing tiene que ver
con entender mínimamente los objetivos del negocio y el público al que nos
vamos a dirigir.
Para poder bajar toda es información, antes de escribir o diseñar, lo ideal es

hacer un briefing.
¿Qué es un briefing? Es un documento que funciona como un marco para

trabajar el diseño de la landing. Se trata de hacernos las preguntas necesarias
para definir los contenidos en función del objetivo y, al mismo tiempo, dejarlas
registradas en un documento que nos sirva para trabajar en equipo.
Podés usar este modelo de briefing https://docs.google.com/document/

d/1X0AnWPabtTnTO5SIA0skP0FNk7Hx_a2otc6OW8zv_do/edit?usp=sharing
con las preguntas básicas para armarlo. Hacé una copia y editalo a tu gusto,
adaptalo a lo que necesites para bajar a tierra lo que querés comunicar.
Tips para trabajar el texto
Tengamos en cuenta que los usuarios consumirán nuestro contenido escaneando

el texto y con la menor atención posible.
El título es la pieza de texto más importante, porque es lo primero que ve el

usuario al aterrizar. Recordemos que tenemos muy pocos segundos para
engancharlo, que siga viendo de qué se trata y haga una acción.
Debe ser lo más claro posible y debe estar conectado con el mensaje anterior
que vio el usuario y con lo que sigue en la landing.
Apelar a la emoción del usuario, generar imágenes mentales que toquen alguna
fibra, puede ser útil, pero si y sólo si no sacrificamos la claridad de la promesa.
La descripción o bajada debe complementarse perfectamente con el título,

debe ampliar la promesa. Tratemos de que no supere las dos líneas y que los
conceptos o palabras clave queden alineados a la izquierda.
El objetivo es mantener la atención del usuario en lo que le estamos contando y

llevarlo a la acción.
Frases claras y naturales:
Cuando Ernest Hemingway entró a los 18 años a trabajar al Kansas Star, se

encontró en su escritorio un mensaje del editor: “Escriba frases claras y concisas,
no se haga el artista.”
No se trata de expresar nuestro arte o mostrar la frase inteligente que se nos

ocurrió, sino de hacer negocios. Seamos simples al expresarnos, no usemos
frases rimbombantes.

Si la landing recibirá tráfico orgánico, asegurémonos de haber sembrado
las keywords en el contenido, sobre todo en el título (h1), el title del HTML, la
metadescription y la URL.
Tips para las imágenes
Las imágenes tienen que servir a un propósito, no deben ser decoración. Lo

ideal es que complementen el mensaje textual. Las ilustraciones sintéticas son
muy buenas para eso.
Fotografías
Incluir personas no está mal, pero evitemos las fotografías en las que se nota
claramente que son de banco de imágenes, donde la situación es muy posada y
no se conecta bien con nuestro público.
Es preferible que la fotografía transmita una atmósfera en lugar de una

escenografía, donde todo se nota que está armado.
Evitemos el eje O-O (ojo con ojo), porque distrae y desvía la atención del
contenido.
Miremos este ejemplo de la fotografía de un bebé. La versión en que mira al

usuario tuvo más fijaciones (punto cálido en el mapa de calor) que el mensaje.
Fuente: https://blog.kissmetrics.com/eye-tracking-studies/
Fuente: Blog de Kissmetrics. Disponible en: https://blog.kissmetrics.com/eye-

tracking-studies/

Fuente: Blog de Kissmetrics Disponible en: https://blog.kissmetrics.com/eye-

tracking-studies/
3. Acción
Este componente se divide en dos partes, una dedicada a la acción y la otra

dedicada a probar si la acción se ejecuta como lo diseñamos, antes de que la
landing comience a funcionar con usuarios reales.
La acción
Se puede decir que es uno de los elementos más importantes de la landing,

porque de él depende la conversión. Si el usuario no hace la acción que le
proponemos que haga, la landing habrá fallado.
A este elemento lo llamamos call to action (CTA) e, independientemente del

dispositivo, puede ser de las siguientes formas:
Botón » Cuando queremos que vaya a otro lugar para hacer la acción principal.
Link »Cuando queremos que vaya a otro lugar, para hacer una acción secundaria.
Formulario » Cuando queremos que nos deje datos.
Para pensar el CTA es conveniente que tengamos en cuenta el objetivo del

negocio. Por ejemplo, si el objetivo del negocio es que el usuario compre más
zapatillas deportivas, el CTA de la landing no lo llevará directo a comprar una,
sencillamente porque no sabemos si es la que quiere, si es el talle, etc.
En estos casos, el objetivo de la landing va a ser contarle al usuario que hay

zapatillas deportivas de todos los tipos y el CTA lo llevará de la mano al lugar
donde puede elegir la que prefiera.
La ilusión de las opciones

La acción que nuestra landing le pide al usuario, sea cual fuere, se trata de una
decisión.
Muchas veces se cree que es mejor mostrar muchas opciones, porque el cliente
se siente atraído ante tanta oferta. Si bien la atracción es cierta, ante más
opciones, menos conversión.
Cuando enfrentamos al usuario a más opciones de las que puede procesar

con su memoria a corto plazo (menos de 5 elementos), se produce una carga
cognitiva que genera una suerte de parálisis en la elección.
En pocas palabras, es significa que como no es posible procesar rápidamente

lo que ofrecemos, al usuario le cuesta elegir y, es muy probable, que termine no
eligiendo nada.
Los que sí se deciden y eligen una opción, no demuestran luego un buen nivel
de satisfacción con su elección. A este fenómeno se lo conoce como la paradoja
de la elección. Para saber más recomiendo ver la charla TED del psicólogo Barry
Schwartz, autor de The paradox of choice. Disponible en https://www.ted.com/
talks/barry_schwartz_on_the_paradox_of_choice#t-68936
En definitiva, tengamos siempre en cuenta que menos es más. Menos elementos

es igual a más acción, más conversión y más satisfacción.
En este ejemplo, prestemos atención a cuántos elementos debe omitir el usuario

para hacer foco en la acción:
Captura de pantalla de Udemy - Angular 2+. Disponible en: https://www.udemy.

com/angular-2-fernando-herr
Recomendaciones para un call to action fácil de identificar:
Lo ideal es tener el camino despejado, ningún elemento menos importante debe

competir contra el CTA. El objetivo es que el usuario haga clic o tap sin haber
tenido que pensar dónde debía hacerlo.

¿Cómo reconocer si el CTA es claro?
Como habíamos hablado antes, hay que tener en cuenta que los usuarios
escanean las páginas, es decir que la mirada casi nunca es posada o fija y
muchos elementos se pasan por alto.
Por eso, para que el CTA sea claro, debemos lograr que haya:
Niveles de lectura bien claros.
Contraste bien definido.
Niveles de lectura:
Le llamaremos niveles de lectura a las diferentes jerarquías de contenido.

Por ejemplo, la jerarquía o el nivel más alto está dado por el título principal o
headline.
Los niveles de lectura guían al ojo en el escaneo por el contenido. Sin pensar, el
usuario puede pasear su mirada y distinguir qué es lo más importante y lo menos
importante.
El call to action tiene el mismo nivel de lectura que un título, es una de las
jerarquías principales.
Captura de pantalla de la home de SalesForce –disponible en: https://www.

salesforce.com/mx/?ir=1
En este ejemplo, Salesforce no tiene buenos niveles de lectura, porque pareciera

que todo es importante. El botón verde nos propone probarlo gratis, pero si
queremos antes saber de qué se trata, hay demasiadas opciones para elegir y
cuesta entender cuál es la más importante.
Contraste:
Para revisar si el contraste está en función de hacer claro el CTA, basta con
entrecerrar los ojos y chequear que el mensaje principal y el CTA se vengan
adelante.

Fuente: Pedro Cortés, diseñador. Disponible en: https://blog.prototypr.

io/how-to-make-a-conversion-driven-saas-landing-page-2017-edition-
9ad4434c9bc2?gi=b3579b6fff3a
Fuente: Pedro Cortés, diseñador. How To Make a Conversion-driven SaaS Landing

Page [2017 edition] Jun 26, 2017, disponible en : https://blog.prototypr.io/how-
to-make-a-conversion-driven-saas-landing-page-2017-edition-9ad4434c9bc2
En este ejemplo de Oracle, cuando entrecerramos los ojos o blureamos la

imagen, el CTA se pierde por la competencia del isologo.
Lo ideal es que el CTA se vea claramente y, a simple vista, no queden dudas de

que está ahí, aún cuando la imagen esté blureada o nuestros ojos entrecerrados.
Recomendaciones para los botones, formularios o links

Dijimos que un CTA puede ser:
Botón » Cuando queremos que vaya a otro lugar para hacer la acción principal.
Link » Cuando queremos que vaya a otro lugar, pero a hacer una acción
secundaria.
Formulario » Cuando queremos que nos deje datos.
Veamos algunas pautas para que estos componentes sean fáciles de usar.
Botones:
Los botones son un componente común de cualquier interfaz, es decir que los
encontramos en sitios o aplicaciones y en todos los dispositivos.
Esto que parece obvio, en realidad no está de más recordarlo. Porque un botón
mal diseñado, que no pueda ser reconocido sin pensar, no convierte.
Sobre el texto:
El contenido debe transmitir de forma clara y concisa qué ocurrirá cuando el

usuario lo accione.
Algunas recomendaciones:
Los botones siempre incluyen verbos, porque representan una acción.
Es preferible evitar las palabras como “ahora”, “ver más”, porque son vagas y no
aportan al objetivo de saber qué va a pasar cuando se accione.
Usar la primera persona suele ser útil para persuadir: [Quiero aprender rápido]
Son parte del relato de toda la landing, evitemos que suenen desconectados. Lo
ideal es que el botón sea lo que esperamos como respuesta: Regalate verlo feliz.
[Ver regalos para papá]
Revisá que haya un buen balance con los verbos en imperativo, para que no
suene muy autoritario.
No llevan punto final, y no recomiendo incluir signos de exclamación (¡!), porque

sobrecarga el mensaje.
Lo recomendable es que tengan un máximo de 30 caracteres, sobre todo para

que no queden en 2 líneas en mobile.
¿Debemos repetir el botón a lo largo de la landing? Si es necesario, sí.
En algunas ocasiones, el usuario avanza en el contenido y el CTA quedó fuera de

su vista. Para estos casos hay dos opciones: dejamos fijo el botón mientras ve el
contenido o repetimos el CTA en momentos claves de la historia, donde creamos
que puede ya estar convencido para tomar una decisión.
Links:
El CTA siempre debe ser la acción principal, pero a veces necesitamos darle al
usuario una salida extra, que resulta útil para darle más información a los que
aún no se decidieron. Para eso podemos echar mano a los links.

Recomendaciones para escribir links fáciles de usar:
Deben tener un sentido cerrado, es decir, entenderse por sí solos, sin necesidad
de leer el contexto. Por ejemplo: Es mejor escribir “Guía para escribir landings
pages” en vez de “Para ver la guía para escribir landings pages, clic aquí.”
El texto del link debe anticiparle al usuario una idea de qué va a ver al cliquearlo.
No es recomendable usar negritas, porque el link ya tiene el mismo nivel de

lectura. Si le agregamos negrita lo estamos sobrecargando.
Si el link convive con un botón, la jerarquía de cada componente va a dar una

idea de que el botón es principal y el link es secundario. Pero, también debemos
asegurarnos de que eso quede claro a nivel texto.
Formularios:
En general, los formularios tienen una connotación negativa. Nos recuerdan a

trámites y existe cierta resistencia a completarlos.
Pero, no está nada perdido. Los formularios bien hechos, que piden solo lo justo
y necesario y transmiten claramente el propósito del pedido, son fáciles de usar
y se completan sin problemas.
Algunas buenas prácticas para crear formularios fáciles de usar:
Los nombres de los campos deben ser cortos y claros, pero sin abreviar, porque
puede generar confusión.
Lo recomendable es que siempre sean de una sola columna.
La secuencia de los datos debe ser lógica y seguir el sentido común.
Los datos que le pediremos al usuario deben ser consistentes con el objetivo o
promesa. Es decir, no hagamos preguntas descolocadas.
Debe quedar claro si alguno de los campos es opcional.
Siempre debemos incluir un botón para enviar los datos.
Siempre debemos incluir un mensaje que le confirme al usuario que

se enviaron los datos, que salió todo bien y qué más va a pasar.
(Retomaremos este punto cuando hablemos más adelante de las heurísticas de
usabilidad)
Si bien el formulario es un CTA de la landing, tengamos en cuenta que la historia

no termina. Es un buen ejercicio preguntarse:
¿Qué pasará después?
¿Qué haremos con los datos?
Probar e iterar
Si es posible, antes de poner al aire nuestra landing page y darle tráfico, probemos
si todo se entiende o hay algún ruido que atente contra el objetivo de conversión.

Se trata de fallar rápido y antes de que sea demasiado tarde. Hay dos metodologías
de testeo que nos ayudan a lograrlo:
Prueba de los cinco segundos
Testeo de guerrilla.
First clic test.
La prueba de los cinco segundos consiste en mostrarle a alguien la landing, en

pantalla o papel, durante ese tiempo y luego preguntarle qué entendió.
Ese resultado nos va a indicar si la propuesta de valor se entiende rápidamente

o se pierde. Es una prueba para ver si el contenido que proponemos guía la
atención hacia el objetivo en el tiempo mínimo en que lo haría en la realidad.
Un testeo de “guerrilla” nos permitirá darnos cuenta de todo aquello que no se

entiende.
¿Cómo funciona? Se trata de pedirle a alguien (ajeno al proyecto) que vea la

landing y nos cuente qué entiende y qué no entiende.
Algunos puntos a tener en cuenta para hacerlo:
Necesitaremos conseguir un mínimo de 3 y un máximo de 7 personas.
Las personas que elijamos, idealmente, deben ser target del contenido.
Si lo anterior no es posible, debemos reponer esa información antes de mostrarle

la landing y pedirle un ejercicio de imaginación o de rol. Por ejemplo: Imaginá
que tenés una ferretería y buscás un software que te ayude con la contabilidad.
Luego de googlear llegás a esta landing page. Contame qué vas entendiendo de
lo que ves y usala. Ojo, como no es el target, tendremos que discernir si lo que
no se entiende tiene que ver con eso o con algo que objetivamente no está claro.
Nunca debemos condicionar, todas las consignas deben ser abiertas. No

guiemos al usuario a cumplir el objetivo, porque en la realidad no habrá nadie
para hacerlo y es justamente lo que necesitamos probar.
En el video siguiente hay una ejemplo de un fragmento de test de guerrilla de

un boceto de landing para un software de control de stock. La usuaria dice que
necesita más información sobre cómo funciona para tomar una decisión.
https://youtu.be/IV_tbkuJEoY
Un first clic test es una prueba que nos permitirá ver si el primer clic del usuario
es en el CTA que diseñamos o en otro lado.
Nos permitirá deducir si el CTA se entiende y convierte sin fricciones, sin desvíos.
A su vez, nos deja ver cuánto tarda en hacerlo.
En definitiva, es una manera de probar la primera impresión de la landing, antes

de ponerla al aire.
Una herramienta muy buena para hacerlo online es Chalkmark de Optimal

Workshop.

En el siguiente video sobre Chalkmark, se explica cómo esa herramienta es
útil para probar el primer clic del usuario. Ellos señalan que si el primer clic
es correcto, si coincide con el objetivo que nos propusimos, hay un 87% de
posibilidad de que la tarea que hace el usuario sea exitosa.
https://youtu.be/GTi55c_60pc
En el siguiente Demo se presenta un proveedor ficticio de telecomunicaciones

que permite analizar los diseños de las páginas:
Demo de un first clic: https://bananacom.optimalworkshop.com/chalkmark/

bananacom-demo-survey
Resultados del test: https://www.optimalworkshop.com/chalkmark/bananacom/

bananacom-demo-results/shared-results#/t/analysisTools/taskResults
4. Métricas
Una vez que el usuario completó la acción o nos dejó sus datos y logramos el
objetivo, ¿se termina todo el trabajo? No. Porque si una vez que la landing está
en el aire, no hacemos más nada, todo lo que trabajamos antes no valdrá nada.
Llegó el momento de medir, de ver cómo está convirtiendo la landing y ver si

podríamos mejorar algo.
¿Cómo sabremos si está convirtiendo bien o mal? Previamente, al comienzo

del proceso de construcción de la landing, es fundamental que establezcamos
un objetivo a conseguir que sea medible. A ese objetivo medible (por ejemplo:
Duplicar la cantidad de suscriptos al newsletter) lo llamamos KPI (Key Performance
Indicator).
Los KPI que hayamos establecido van a funcionar como indicadores de si

estamos cumpliendo el objetivo del negocio o necesitamos hacer alguna mejora.
Según el objetivo de la landing, esos indicadores pueden ser:
Cantidad de descargas.
Cantidad de suscriptos.
Tasa de cierre (visitas que terminan comprando).
Cantidad de formularios completos.
Cantidad de potenciales clientes.
Para simplificar, podemos decir que el KPI sólo nos dice si estamos cumpliendo
el objetivo o no. Pero, no nos dice nada sobre por qué no se alcanza. Para
despejar esa incógnita, primero hay que entender dónde está el problema o qué
es lo que está funcionando mal o no tan bien como nos gustaría.
Lo siguiente es un listado de métricas clave para diagnosticar cómo está

funcionando la landing, independientemente del objetivo que tenga:

Herramientas que nos ayudan a medir:
Sugerimos algunas herramientas simples para analizar si está funcionando bien

y si está convirtiendo bien:
Google Analytics » La herramienta ideal para las métricas clave.
Hotjar » Entre otras cosas, permite crear mapas de calor para

entender si los clics se concentran en el CTA o hay desvíos.
Ejemplos del mapa de calor de Mercado Pago Point H en Brasil, versión mobile,
creado con Hotjar

:
Fuente: Mapa de calor generado por Hotjar para Mercado Pago.
El CTA “Comprar” logra taps, pero el menú de navegación también es una zona
caliente y en muchos casos parece desviarse el objetivo.
Uno de los objetivos de medir es tener la posibilidad de cambiar algo y mejorar,

por más chico que sea. A veces, con cambiar de lugar el botón del CTA, o
el texto, logramos aumentar la conversión. El denominador común es probar;
probar, probar y probar hasta llegar al objetivo que pretendemos.

La manera de probar si un cambio o ajuste es mejor que lo que está al aire, es
hacer un A/B testing.
El A/B testing es una prueba de comparación. Comparamos una versión contra

otra y vemos cuál funciona mejor. Muchos usan esta prueba de forma constante:
Se compara una versión nueva contra la existente.
Se evalúa si se derrotó la existente.
Se coloca un nuevo contrincante que intente mejorar la nueva existente.
Google Analytics ofrece una forma de hacerlo. En su sitio de Ayuda se pueden

seguir los pasos para crear un experimento de A/B testing. https://support.
google.com/analytics/answer/1745147
En esta instancia recomendamos que resuelva la actividad de esta unidad que

trata sobre el análisis de un caso concreto.
Checklist para una landing exitosa
Repasamos puntos clave que debemos tener en cuenta antes, durante y después
de desarrollar la landing.
El objetivo es que nos aseguremos rápidamente de que estamos contemplando

lo necesario para que funcione como esperamos.
Antes de desarrollar la landing…
Sabemos todo lo posible sobre quién es el usuario y las necesidades del
Negocio.
Tenemos claro cuáles son las principales ideas a comunicar.
Entendemos por qué deberían aceptar la oferta que le proponemos.
Entendemos por qué no lo harían, qué los detiene y cómo podríamos allanar
ese camino.
Definimos un objetivo, uno y solo uno.
La landing satisface los objetivos del usuario y del negocio. (Ver ejercicio de
yuxtaposición de objetivos en el briefing, disponible en: https://docs.google.
com/document/d/1X0AnWPabtTnTO5SIA0skP0FNk7Hx_a2otc6OW8zv_do/
edit#heading=h.2ail7q2gb0h)
Durante el desarrollo de la landing…
La historia está bien conectada, al punto que el usuario fluye desde donde
viene, hasta la conversión.
La arquitectura de la landing tiene un hero con una propuesta de valor, cuenta

los beneficios y tiene una acción.

La velocidad de carga en dispositivos móviles debe ser lo más rápida posible.
Según un análisis de Google de abril de 2017, por cada segundo de demora, la
conversión baja un 20%, porque aumenta el rebote. ¿Cómo evitarlo? Testeala
con Think with Google y ajustá lo que haga falta. El sitio es el siguiente: https://
testmysite.thinkwithgoogle.com/intl/es-419
El contenido es funcional al objetivo de la landing, ningún mensaje y ningún

recurso (video, testimonio, etc.) está de más. El título y la bajada proponen de
entrada una promesa clara.
El contenido es escaneable, está producido según la manera en que los

usuarios leen en pantalla.
Las imágenes ayudan a cerrar el mensaje, se complementan con el texto y no

se perciben como una decoración.
El CTA se identifica sin pensar, no tiene problemas de contraste ni de niveles

de lectura. El componente (botón, link o formulario) cumple con las buenas
prácticas de usabilidad.
El usuario no tiene fricciones para llegar al objetivo. Si no estamos seguros,

podemos hacer pruebas de usabilidad: “Prueba de los 5 segundos”, “Test de
guerrilla” o “First clic test”.
Después de ponerla al aire…
Tener a mano los KPIs y revisar las métricas clave para entender cómo va
funcionando.
Si hay problemas de conversión, con las métricas clave podemos diagnosticar

por qué no se alcanza el objetivo y, a partir de eso, hacer una propuesta de
mejora.
Estar todo el tiempo dispuestos a cambiar y mejorar en pos de la conversión.
El equipo ideal para desarrollar una landing
Si tuviéramos que pensar en un dreamteam para desarrollar la landing, estaría

armado por estos tres perfiles:

Diseñador Con perfil visual, capaz de sintetizar ideas en expresiones
visuales, de persuadir con la imagen y de diseñar con
criterios de usabilidad.
Desarrollador de Capaz de poder maquetar la landing de modo que
frontend cargue rápido y se vea bien en cualquier dispositivo.
Es ideal que sepa de buenas prácticas a nivel markup,

para que la landing tenga un HTML prolijo y SEO friendly.
Debe poder conectar la landing con el resto de la historia

o flujo. Y es necesario que implemente los scripts de la
herramienta que usemos para medir.
Editor de Expresar textualmente la propuesta de valor de manera
contenidos clara, persuasiva, SEO friendly y adaptado a la lectura
en pantalla.
Herramientas para crear landing pages
Las siguientes son herramientas para crear landing pages por uno mismo, sin
que haga falta armar un equipo de desarrollo:
Lander (https://landerapp.com/es/)
Wix (https://es.wix.com/)
Instantpage (https://instapage.com/)
actividad 1
Análisis de una experiencia
Lee el siguiente análisis:
https://docs.google.com/presentation/d/1ZgKTm2Ys3LL_5n-
eEtdAWLHb1qdA3Kty-HrdYRznOCA/edit#slide=id.g24ae7a31c4_0_0
Responde: ¿Hay algo más que quieras agregar al análisis, que no haya sido
comentado? Fundamenta tu respuesta.

UX: Diseño centrado en el usuario
En esta unidad, y en la que sigue, vamos a hablar del diseño de experiencias

centrado en las personas.
¿Qué es una experiencia de uso?
Una forma sencilla de pensar qué es una experiencia es tomarla como un camino.
En el fondo, una experiencia de uso implica ir de un punto A a un punto B. En ese
recorrido, en ese uso, experimentamos diferentes sensaciones que podemos
juzgar preguntándonos: ¿cómo estaba el camino?
¿Era un camino difícil y complicado como escalar una montaña? O, tal vez, ¿era
un camino fácil e incluso divertido de atravesar?
En el contexto de productos digitales interactivos, una buena experiencia de

usuario (o su acrónimo UX, tomado del inglés User Experience) significa que ese
producto sea percibido como:
Útil y eficiente
Porque todos los públicos objetivos encuentran de forma rápida sencilla la

información que consideran relevante.
Claro y encontrable
Porque cuenta con una arquitectura y diseño de información centrado en las

personas que lo usarán.
Usable
Porque puede ser usado sin esfuerzo.
Deseable y confiable
Porque ofrece un alto grado de satisfacción.
Entonces, cuando hablamos de diseño de experiencia de usuario, estamos

hablando de diseñar algo que tenga valor para el usuario. Pero, no cualquier
valor, sino un valor más allá de lo común.
Hoy en día, podemos decir que el mundo está lleno de productos digitales
similares, que hacen las mismas cosas. Pero, sólo es exitoso, aquel que se
diferencia del resto. Quizás hace lo mismo, pero lo hace mucho mejor, porque
ofrece una experiencia que se conecta emocionalmente con el usuario de un
modo que el de al lado no lo hace.
En ese punto, en la conección emocional, es donde el diseño de experiencia

tiene valor. Se trata de convertir algo ordinario en extraordinario.
Pensemos en el café de Starbucks. El café es algo completamente común,

muchos ofrecen café. Sin embargo, hay personas que prefieren ir a Starbucks,
aunque lo paguen más caro.

Con el chocolate pasa algo similar. Pensemos en los chocolatines Jack; en el
fondo es un chocolate con leche que sabe bien, pero tiene algo más: una figura
sorpresa de colección.
¿Qué tienen en común ambos ejemplos? Son productos, no digitales, que

convirtieron algo ordinario en extraordinario. En el caso de Starbucks, como
dijimos, las personas están dispuestas a pagar más que lo que vale un café
promedio, porque disfrutan de la bebida y todo lo que implica: un lugar cómodo
como el living del hogar, una atención amable, etc. Todos los detalles de
Starbucks están diseñados para que tomar café sea una experiencia diferente.
Y en el caso de Jack, no sólo genera una sensación de disfrute con la sorpresa

coleccionable, sino que generó fanáticos alrededor de eso. El famoso conductor
y periodista, Guillermo Andino, es un coleccionista que tiene entre sus tesoros
muchas de las sorpresas de Jack.
El diseño de experiencia de usuario es una instancia superior del diseño del

artefacto o producto, porque se enfoca en la experiencia de punta a punta que
tendrá una persona, al punto que podemos guiar positivamente cómo se va a
sentir en el uso.
El objetivo es que los productos sean fáciles de usar, pero también que sean
capaces de deleitar y motivar a los usuarios.
Como venimos viendo, no estamos hablando de tecnología, porque lo cierto es

que la funcionalidad del producto, que resuelva el problema o las necesidades
que promete, es también una commoditie. En general, la mayoría da por sentado
de que el producto funciona.
Por eso, al hablar de diseño de experiencia, estamos hablando de:
Emociones
Placer
Sensaciones.
¿No se parece al amor? Mientras el amor es algo mágico que nos sucede;
caemos enamorados y no entendemos bien por qué. Cuando hablamos de
productos digitales interactivos, hablamos de diseñar el amor. Sí, ¡podemos
diseñar el amor! Siendo más precisos, podemos diseñar un producto para que
los usuarios se enamoren y nunca les den ganas de abandonarlo.
Mirá con atención esta vieja imagen de un tweet que expresa amor por Pocket,
una aplicación que te ayuda a guardar artículos para leerlos después, y en un
formato amigable. ¿Qué tiene de particular? Que ese tweet es espontáneo, no es
publicitario. Esa persona necesitó expresar su amor por el producto.

Fuente: captura de pantalla de Twitter.
Si no nos abocamos en diseñar la experiencia con el objetivo de lograr ese

vínculo emocional, no lo conseguiremos.
Por eso, decimos que la experiencia se diseña o se comete. Cuando se

diseña, nos involucramos en desarrollar la manera en que se va a usar y las
probabilidades de que sea disfrutable son altas. En cambio, cuando se comete,
simplemente incurrimos en darle un producto cuya experiencia de uso está en
manos de nadie.
¿Quiénes hacen experiencia de usuario?
El diseñador de experiencias es un rol particular, pero la formación de raíz puede

ser diferente. Si bien hay avances académicos en formalizar la disciplina, en
general aparece como una especialización de algo más.
Como formación de base del diseñador de experiencia de usuario, en general,

encontramos: diseñadores gráficos orientados a interfaces (a diferencia de
los editoriales), comunicadores y/o periodistas (para conocer más, propongo
leer “Por qué algunos periodistas cruzaron el puente hacia UX” Disponible en:
https://medium.com/@ecosenza/por-qu%C3%A9-algunos-periodistas-cruzan-el-
puente-hacia-ux-decacbce92f9) y desarrolladores.
¿Por qué el diseño de UX es importante en el ámbito del marketing?
Porque todo lo que hacemos en Marketing tiene como objetivo cambiar el

comportamiento del usuario, de guiarlo positivamente, de que nos compre lo
que le estamos vendiendo y de hacerlo sentir bien.
Empezar a pensar en la experiencia del usuario en este contexto, es sumamente

útil para ponerse en en los zapatos del usuario y lograr comunicaciones efectivas
y lo suficientemente persuasivas como para dejar una huella en el cliente; una
buena sensación que inmediatamente asociará a la marca. Imaginá qué dañino
sería para el negocio si esa sensación no fuera buena.

3 ejes que componen el diseño de experiencias
Para comprender los aspectos más importantes del diseño de experiencias como
disciplina, vamos a dividirla en 3 ejes.
El diseño de experiencias:
Se trata de resolver problemas.
Es una disciplina antropocéntrica.
Es una actividad proyectual.
Veamos ahora cada uno de ellos.
1 - Resolver problemas
Cuando diseñamos la experiencia de un producto digital, estamos diseñando

la experiencia de uso de una herramienta tecnológica, que alguien usa para
resolver un problema o hacer algo que de otra manera no podría.
Esa herramienta jamás podría ser buena si no está diseñada a partir de un

entendimiento profundo del problema que va a intentar resolver.
Ahí encontramos una de los grandes desafíos del diseño, dar en la tecla con el
problema a resolver y, por supuesto, resolverlo.
Un producto digital o tecnología que resuelve perfecto el problema, tiene muchas

probabilidades de ofrecer una excelente experiencia de uso. Porque cuando el
uso de la tecnología se siente natural, es decir que su funcionamiento resuelve
todo lo que tiene que resolver sin pedirle esfuerzo al usuario, la sensación es
placentera y, a su vez, mejora nuestras vidas.
Tomemos de ejemplo el producto que creó Nest.
Nest es una empresa, que fue adquirida por Google, que empezó fabricando
termostatos de calefacción central inteligentes y mucho, pero mucho, más
fáciles de usar.
En esta imagen se ve una comparación del control común (a la derecha) y de

Nest (a la izquierda), sin botones, mucho más fácil de aprender a usar y con la
promesa de que en un mes aprende los hábitos de calefacción del hogar y luego
ya no hay que ni quisiera preocuparse en subir o bajar la temperatura en algún
momento del día.

Fuente: Artículo de Michael Wong. https://medium.com/hackerpreneur-
magazine/4-invisible-user-experiences-you-d13cc9c3c7ab
¿Hay manera de identificar incorrectamente el problema? ¿Qué pasa en ese

caso?
Sí, a veces no logramos identificar bien el problema que queremos resolver y

eso genera una complicación a la hora de diseñar el producto y la experiencia.
Veamos un caso.
Jeremy Utley, Director of Executive Education at Hasso Plattner Institute of Design

at Stanford, compartió en un workshop del Instituto de Diseño de la Universidad
de Standford la historia de Embrace.
Embrace (sitio: http://extreme.stanford.edu/projects/embrace) es una empresa

social que se propuso en 2007 bajar el costo de las incubadoras de U$D 20.000
a U$D 2.000, para evitar la mortalidad infantil de los bebés prematuros en países
subdesarrollados, en los que las incubadoras son escasas y no alcanzan a cubrir
la cantidad de nacimientos.
Empezaron por un hospital de Nepal, en su capital Katmandú. Pero, al visitar el

lugar, se dieron cuenta de que la mayoría de los nacimientos se daban en zonas
rurales y, en esos hospitales, muchos bebés ni siquiera llegaban al hospital,
porque los caminos son intransitables la mayoría del tiempo.
A partir de ese descubrimiento, decidieron darle una vuelta al proyecto y

diseñaron una incubadora portátil, para resolver el problema de la imposibilidad
de llegar al hospital. Cuando era el momento de nacer, los padres ya tenían algo
para mantenerlos protegidos hasta poder llegar al hospital. Y, a su vez, lograron
que apenas cueste el 1% de lo que costaría una incubadora.
¿Qué nos enseña este caso?
Empezaron a diseñar con foco en el problema del costo de la incubadora, pero al

empezar a investigar con más profundidad, se dieron cuenta de que el problema
no era sólo económico. Si se hubieran quedado solo con la primera parte del
problema, hubieran invertido tiempo y dinero de desarrollo en algo que no
hubiera reducido la mortalidad infantil.

El problema debe ser observado
Podríamos directamente preguntarle a nuestros usuarios cuáles son sus

problemas o qué necesidades quieren satisfacer, darles una solución y listo.
Pero, eso nos daría una visión sesgada de sus deseos, de lo que ellos creen o
consideran que necesitan, por sobre lo que realmente necesitan. Tengamos en
cuenta que, muchas veces, los usuarios no son conscientes de lo que necesitan,
ni tendrían por qué serlo.
Por ese motivo, el trabajo de un diseñador de experiencia es observar lo que las

personas hacen, cómo lo hacen, dónde lo hacen y sacar en limpio los problemas
que deberá resolver el producto a diseñar.
2 - Disciplina antropocéntrica
Pensemos un segundo qué hay dentro del concepto de usuario. Allí está implícita
la dialéctica entre persona y máquina. A fin de cuentas, el usuario es alguien que
usa un artefacto.
Sin embargo, cuando hablamos de productos digitales es muy común que

mencionemos a “los usuarios” y nos olvidemos de que en realidad se trata de
seres humanos.
El diseño de experiencia es una disciplina antropocéntrica porque pone en el

centro el lado biológico del usuario. Las personas no solo son parte del proceso
de diseño, son el centro.
Hay tres aspectos que debemos tener en cuenta sobre el lado biológico del
usuario:
Procesamos la información con el menor esfuerzo posible.
Usamos la atención en forma selectiva.
Vemos el mundo a través de modelos que nos construimos en base a

experiencias previas.
Desarrollaremos un poco de cada uno de ellos y, seguramente, podrás notar

luego cómo todos parecen desprenderse del primero.
1 - El menor esfuerzo posible:
A lo largo de su libro Pensar rápido, pensar despacio, el psicólogo Daniel

Kahneman, señala que nuestra mente intenta procesar información utilizando
siempre la menor cantidad de recursos cognitivos posibles. En términos sencillos,
podemos decir que a nuestra mente le encanta la ley del menor esfuerzo, porque
es la manera de ser eficiente en todo momento.
Para explicar cómo funciona la mente, Kahneman la divide metafóricamente

en dos personajes, o tipos de pensamiento, que se disputan todo el tiempo el
control de la atención, los llama: Sistema 1 y Sistema 2.
Sistema 1: pensamiento rápido o intuitivo.
Todo pasa primero por este sistema, intenta percibir rápido el mundo que nos
rodea y dar una respuesta con el menor esfuerzo posible.

Es un pensamiento rápido y automático con el que tomamos decisiones muy
frecuentemente, sin sensación de control voluntario.
Cuando tenemos que responder cuánto es dos más dos, lo hace rápidamente.
Del mismo modo que entiende frases sencillas. Pero, también, puede determinar
si alguien tiene orientación al detalle o es profesional, con apenas ver una
expresión en su cara.
“El Sistema 1 hace continuas sugerencias al Sistema 2: impresiones, intuiciones,

intenciones y sensaciones. Si cuenta con la aprobación del Sistema 2, las
impresiones e intuiciones se tornan creencias y los impulsos, acciones
voluntarias. Si todo se desarrolla sin complicaciones, como ocurre la mayor parte
del tiempo, el Sistema 2 acepta las sugerencias del Sistema 1 con escasa o
ninguna modificación. Generalmente damos crédito a nuestras impresiones y
cumplimos nuestros deseos, y eso está bien… por lo común.” (Kahneman, Daniel:
Pensamiento rápido, pensamiento lento. Buenos Aires, Debate, 2016. Pág.: 39)
El comportamiento del Sistema 1 representa la manera en que nuestra mente

intenta ahorrar recursos al momento de percibir o procesar información. Cuando
diseñamos una experiencia de uso, debemos que tener en cuenta que en cierta
medida trabajamos para este personaje de la mente, el personaje de la intuición.
Sistema 2: pensamiento lento
El Sistema 2 es movilizado cuando el Sistema 1 encuentra algún problema que

no puede resolver. Por ejemplo, si tuviéramos que responder cuánto es 125 x
40, el Sistema 1 necesitará pasarle el problema al Sistema 2, porque no puede
responder intuitivamente y requiere más recursos cognitivos.
El Sistema 2 implica más esfuerzo y atención o directamente la tarea no se hará.

Si bien el esfuerzo per sé no es malo, en el contexto de un producto digital lo es.
La sensación de que nos cuesta usar algo o las cosas no son tan fáciles como
esperábamos, siempre es negativa y, a la larga, termina incluso afectando a la
marca de ese producto.
Por ejemplo, imaginá el esfuerzo que implica comparar las características de dos
o tres lavarropas para tomar una decisión de compra. Si nuestro producto digital
no facilita todo lo posible esa comparación, es probable que el usuario busque
en otro lado una manera más sencilla de hacerlo.
2 - La atención es selectiva
En la unidad anterior (Unidad 2: Landing pages avanzado) definimos a la atención

como una energía psíquica que logra que la información llegue a la conciencia
y la registremos.
Ahora detengámonos en qué información llega y cuál no. Como venimos viendo,
nuestra mente funciona bajo la ley del menor esfuerzo. Por ese motivo, la
atención es selectiva y sólo registra lo importante y nada más que lo importante.
Pero, ¿qué es lo importante? Lo importante siempre es aquello que tiene que ver
con el objetivo que quiere lograr el usuario; sólo le va a prestar atención a lo que
crea que le permite cumplir ese objetivo.

Por ejemplo, recordá la última vez que entraste a leer una nota periodística y lo
primero que apareció fue una publicidad. ¿Cuánto tardaste en encontrar la cruz
o el ícono que la cerraba? Podríamos decir que la mayoría tarda realmente muy
poco en cerrar la publicidad, al punto que ni sabe de qué era, porque mientras
su atención estaba enfocada en otra cosa, algo inesperado se interpuso en el
camino.
3 - Modelos mentales para ver el mundo
Volvamos de nuevo a la premisa de usar la menor cantidad de recursos cognitivos

posibles, que nuestra mente sigue al pie de la letra. Para lograrlo, vimos que nos
valemos muchas veces de la intuición y concentramos la energía de la atención
en lo que es realmente importante para lo que estamos intentando hacer o
resolver.
La tercera manera de ahorrar recursos es utilizar modelos previos, es

decir, interpretar lo que tenemos enfrente a partir del conocimiento dado por
experiencias previas. A esos modelos previos se los llama modelos mentales,
que según el psicólogo Donald Norman, no son otra cosa más que teorías que
nos formamos para explicar lo que observamos.
En su libro La psicología de los objetos cotidianos, Donald Norman señala que

los modelos mentales están compuestos por tres tipos de memorias que usamos
para interpretar información:
Memoria de las cosas arbitrarias:
Conocimiento y datos que no tienen relación con otros, no forman parte de un

sistema.
Ej.: acordarse del DNI en diferentes situaciones; acordarse del comando del
teclado para “deshacer” - Ctrl -Z.
Requieren un alto nivel de memorización y debemos evitarlos cuando diseñamos

un sistema. El usuario no tiene que aprender de memoria.
Memoria de las relaciones significativas:
Utiliza el significado. Se encuadra en otros conocimientos adquiridos antes. Es

la forma más fácil de aprender.
Ej.: cuando vemos un componente o icono que es similar a otro, le asociamos

esa función. Un botón. Un volante.
Memoria mediante explicación:
Cuando finalmente empezamos a comprender cómo funciona una interfaz, la

sistematizamos y utilizamos ese modelo mental para otras interfaces que nos
parezcan similares.
Ej.: Damos por sentado que el login (ingreso al sistema con una cuenta de
usuario) tiene que estar arriba a la derecha de la pantalla, si estamos en una
computadora.

Para cerrar este eje del diseño de experiencias como una disciplina
antropocéntrica, veamos la siguiente lista de premisas a tener en cuenta, que la
diseñadora Verónica Traynor armó en base al artículo “UX Reality Check: 14 Hard
Truths About Users” disponible en: https://www.fastcodesign.com/3059921/
ux-reality-check-14-hard-truths-about-users (Check de realidad UX: 14 verdades
duras sobre los usuarios) de Robert Hoekman Jr.
Verónica lo llamó: “Decálogo del usuario para los humanos que diseñan
interfaces”.
Los usuarios son más inteligentes de lo que tú crees; simplemente no les

interesa aprender tu sistema.
Los usuarios tienen otras cosas que hacer; su objetivo no es pasar su tiempo
en tu web.
Los usuarios hacen las cosas de un modo automático, como si condujeran un

automóvil. No van leyendo tu web.
Los usuarios – en la mayoría de los casos – se dan por satisfechos con lo

mínimo que puedan aprender.
Los usuarios no usarán la plataforma de la forma en que tú la diseñaste.
Los usuarios se guían por los patrones para comprender de antemano cómo
hacer las cosas en un nuevo sitio y para calcular cuánto tiempo les llevará
aprenderlo.
La atención de los usuarios compite con un millón de cosas. Forzarlos a seguir

una secuencia serial y clara, ayuda a concentrarlos y que terminen la tarea.
Los usuarios sólo ven lo que hay en la pantalla, no adivinan lo que el diseñador
no puso dándolo por sabido.
Los usuarios mienten si les preguntan qué hicieron o qué percibieron.
Los usuarios no saben contestar si les preguntan cómo solucionar algo

digital.
Cambiar de app les requiere un esfuerzo tal, que debe valer la pena para que
lo hagan. Si la solución no es una solución real, a los usuarios no les interesará
el racional del diseñador; sino que volverán a resolver las cosas como las hacían
antes.
Los usuarios tienen preguntas y si no son resueltas de forma clara, fácil y

contundente, muy posiblemente abandonarán tu web.
Cuando los usuarios no comprenden o no logran hacer algo (por culpa del
diseñador) se culpan a sí mismos y la experiencia es nefasta.
La experiencia del usuario se articula a partir de una sumatoria de elementos:

interacciones, sentimientos, dudas, etc. El escenario completo y holístico es
el que impacta al usuario.

3 - Actividad proyectual
El diseño de experiencia no es una técnica concreta que se aplique sobre un

producto y no se consigue un nivel de excelencia de un día para el otro.
Se trata de un proceso y por eso es una actividad proyectual y metodológica. Lo

ideal es que sea parte del desarrollo del producto, esté dentro de la planificación
del proyecto e involucre a los diferentes roles o áreas que participan en
él. En general: áreas de negocio, comunicaciones, diseñadores visuales,
desarrolladores, etc.
Teniendo en cuenta de que hablamos de una disciplina antropocéntrica, el

diseño de experiencia se apoya en la metodología del diseño centrado en
el usuario.
Definición de Diseño centrado en el usuario
En los siguientes extractos del libro Informe APEI de Usabilidad, los diseñadores
de interacción y consultores UX, Yusef Hassan Montero y Sergio Ortega Santa
María, plantean una definición de Diseño Centrado en el Usuario y un resumen
del proceso.
El Diseño Centrado en el Usuario (DCU), o User Centered Design (UCD), es

definido por la Usability Professionals Association [http://www.upassoc.org/]
(UPA) como un enfoque de diseño cuyo proceso está dirigido por información
sobre las personas que van a hacer uso del producto.
El origen de esta visión se enmarca en el diseño industrial y militar de la década

de los cincuenta. Por entonces, los diseñadores estaban convencidos de que la
optimización y adaptación al ser humano del diseño de productos respondía a un
minucioso proceso de investigación en antropometría, ergonomía, arquitectura o
biomecánica. (...)
El DCU es un proceso cíclico en el que las decisiones de diseño están dirigidas

por el usuario y los objetivos que pretende satisfacer el producto, y donde la
usabilidad del diseño es evaluada de forma iterativa y mejorada incrementalmente.
De acuerdo a la norma ISO 13407, podemos desgranar este proceso en cuatro

fases:
Entender y especificar el contexto de uso: Identificar a las personas a las que se

dirige el producto, para qué lo usarán y en qué condiciones.
Especificar requisitos: Identificar los objetivos del usuario y del proveedor del
producto que deberán satisfacerse.
Producir soluciones de diseño: Esta fase se puede subdividir en diferentes etapas

secuenciales, desde las primeras soluciones conceptuales hasta la solución final
de diseño.
Evaluación: Es la fase más importante del proceso, en la que se validan las

soluciones de diseño (el sistema satisface los requisitos) o por el contrario se
detectan problemas de usabilidad, normalmente a través de test con usuarios.

Fuente: No solo usabilidad http://www.nosolousabilidad.com/manual/3.htm
(...)
La evolución de los productos y herramientas ha estado basada históricamente

en procesos que en pocas ocasiones hacían partícipe al usuario final. En
nuestra historia más reciente, en cambio, hemos experimentado un cambio de
paradigma, fruto de la confluencia de disciplinas y caracterizado por una filosofía
que convierte al usuario en el foco central del proceso de diseño.
De aquellos orígenes, y gracias al aporte de estudios e investigaciones

posteriores, hoy en día contamos con un marco metodológico que nos permite
diseñar productos interactivos que previsiblemente ofrecerán experiencias de
uso satisfactorias.
[Extractos de Hassan Montero, Yusef y Ortega Santamaría: Informe APEI sobre

usabilidad. Gijón, Asociación Profesional de Especialistas en Información, 2009.
(Cap. 4)]
Si bien los autores hablan de que las decisiones de diseño están dadas por
el usuario, no se refiere a que debemos preguntarles directamente al usuario
cómo lo haría y que nos resuelva el problema. En realidad se refiere a que todas
las decisiones de diseño deben estar apoyadas en lo que el usuario necesita,
independientemente de lo que el diseñador quiera.
En el proceso de DCU, y por ende en nuestro proceso de diseño de experiencia,

el usuario es un interlocutor que tiene dos funciones clave: propone ideas a
partir de lo que observamos y hablamos con ellos. Y, por otro lado, ayuda a
validar las soluciones de diseño usándolas.

actividad 1
Indagar sobre el problema
“A veces el cliente pide un puente, cuando lo que necesita es cruzar el río.”

(Knut Yran, ilustrador y diseñador noruego)
Descripción:
Si uno estuviera ante ese cliente que pide un puente, podría preguntarle: ¿para
qué el puente? ¿Hace falta un puente o con otra cosa se podría cumplir el
mismo objetivo? Muchas veces los clientes llegan con soluciones y el trabajo del
diseñador es extraer el objetivo de fondo para proponer una solución.
A través de este ejercicio vamos a pensar en cómo podríamos indagar a un

cliente hipotético, para llegar a una definición más concreta del problema y del
objetivo que quiere conseguir.
Se recomienda haber estudiado como mínimo el primer eje de diseño de

experiencias.
Introducción:
Sos el diseñador de experiencias de una empresa que ofrece soluciones

tecnológicas a empresas. Ahora estás reunido con cliente.
Se llama Carlos Kraimer y es el dueño de Kraimer Events, una empresa familiar

de catering para eventos, que fundó su padre hace 35 años.
Kraimer te cuenta que quiere entrar en el mundo digital. La empresa siempre

adquirió sus clientes a través de recomendación, de boca en boca, entre un
público de alto poder adquisitivo y empresas de organización de eventos.
Ahora quiere ampliar sus operaciones y dice que hay que ir a lo digital o dejás de
existir. Se le ocurrió que podrían crear una app que tiene un bot que le pregunta
al usuario qué necesita y automáticamente le da una cotización. El cliente –
continúa diciéndote Kraimer–, se fija si está de acuerdo y paga ahí mismo una
reserva. Está muy entusiasmado, está seguro de que con eso va a conseguir
muchos más pedidos y clientes.
Consigna:
Tu primer objetivo en la reunión es entender bien qué problema va a resolver

Kraimer y qué valor le va a aportar a sus clientes desde lo digital.
Consigna
¿Qué preguntas le harías para entender bien todo eso? Justificar cada una de
ellas, incluyendo qué esperás conseguir con la respuesta.

UX: Diseño de experiencia de usuario. Usabilidad y la conexión emocional
En la unidad anterior vimos que el diseño de experiencia está compuesto por 3

ejes: resolver problemas, disciplina antropocéntrica y actividad proyectual.
Esos ejes hacen foco en el diseño de experiencia como disciplina, como práctica.
Ahora, vamos a empezar a fijarnos en el producto digital y en lo importante de
generar una conexión emocional con el usuario.
Para que podamos evaluar rápidamente la experiencia de un producto digital,

usaremos los siguientes niveles representados en una pirámide, que muestra
que uno no puede sostenerse sin el otro:
Fuente: Gráfico diseñado por Emiliano Consenza.
Los primeros niveles –Funcional y comprensible; Usable– refieren al

funcionamiento, se enfocan en que el producto digital mínimamente sea
comprensible y fácil de usar.
Cualquier producto que quiera satisfacer las necesidades de sus usuarios debe
cumplir con estos dos primeros niveles. Pero, si queremos lograr que el producto
se destaque del resto que hace lo mismo y de la misma manera, tenemos que
lograr que el usuario no solo use fácilmente el producto, sino que disfrute al
hacerlo.
Para bien o para mal, cada vez que un usuario se enfrenta a nuestro producto
digital, pasan cosas en el plano emocional. La percepción siempre es más
visceral que racional y son esas sensaciones las que determinan la conexión o
desconexión emocional con el producto.
Por eso, es útil pensar la experiencia de uso como un camino que uno recorre y
luego evalúa cómo se sintió durante el trayecto. El resultado de esa evaluación
dependerá de si fue complicado, lleno de obstáculos o fluido como una autopista
vacía.

Analicemos cada uno de los niveles.
Nivel funcional y comprensible
Este nivel es el grado cero, la base de la pirámide que sostiene al resto de los
niveles. Un producto con una interfaz que funciona de una manera difícil de
comprender, no tienen posibilidades de prosperar, es abandonado rápidamente.
La interfaz del producto tiene que estar alineada a sus objetivos y necesidades,
y debe estar dentro de los parámetros de su modelo mental. Es decir, en un nivel
funcional, debe ser fácilmente relacionable con otras interfaces, para que no
exista casi una curva de aprendizaje.
Ejemplo: El usuario que llegaba a esta página de AFIP con el objetivo de pagar
su monotributo, probablemente haya terminado perdido. Tiene información que
no aporta a ese objetivo y muchos de los componentes (como los íconos arriba
a la derecha) no se entienden a simple vista.
Fuente: Captura de pantalla una página de AFIP en 2015.
La Arquitectura de la Información (AI) es una de las disciplinas para asegurarnos

que el nivel de comprensión sea óptimo.
En su libro Information Architecture for the World Wide Web 2nd Edition, Louis
Rosenfeld y Peter Morville definen a la AI de la siguiente manera. Ellos se refieren
a sitios web, pero la definición se puede aplicar a cualquier producto digital.
Es el arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de

ayudar a los usuarios a encontrar y manejar la información.
Imaginá una librería con estantes del piso al techo. Entrás y querés encontrar
Cien años de soledad y el resto de las novelas de Gabriel García Márquez. ¿Por
dónde empezarías? ¿Cómo podrías encontrarlo más rápido?
Para hacerlo sin esfuerzo y rápidamente, necesitamos un orden. Pero, hay un

orden, solo que no está sistematizado. Necesitamos pistas, clasificaciones y
datos que estructuren la información y faciliten entender el orden y recorrer la
información.
De eso se trata en definitiva la AI, de clasificar y nominalizar para facilitar el

entendimiento a la hora de navegar la información.

Nivel usable
¿Cómo usamos las interfaces?
El experto en usabilidad, Daniel Mordecki, en su artículo Miro. Leo. Luego pienso

(Para ampliar sobre este artículo puede acceder en este enlace: http://www.
mordecki.com/html/miroleopienso_mov.php), plantea que existen tres niveles
simultáneos de interacción con las interfaces, que requieren atención y esfuerzo
cognoscitivo diferente: mirar, leer y pensar.
Miro y entiendo: Es el nivel más básico, no requiere esfuerzo para entender

elementos. Comprendemos inmediatamente los patrones que nos facilitan el
uso. Entra muy en juego la familiaridad y los modelos mentales. Es el terreno
de lo intuitivo.
Por ejemplo:
Es simple reconocer cuál es el título en una página.
A simple vista podemos saber que hubo un error, solo por ver el color del mensaje.
Leo y entiendo: Requiere más esfuerzo, porque se trata de una lectura

autoexplicativa. Escaneo rápido los mensajes subyacentes y debo entender si
coincide con el objetivo por el que viene a este lugar.
Pienso y entiendo: Requiere aún más esfuerzo que el anterior. Si estoy entre el
público al que se dirige el contenido, debería entender todo. Pero si tengo que
razonar para entender, me voy a sentir más frustrado si el esfuerzo no valió la
pena.
Cuánto más cerca del nivel de Miro y entiendo esté lo que le proponemos al
usuario, más fácil de usar será. Y, por el contrario, será más difícil si requiere
pensar para entender.
Usabilidad
La usabilidad es un atributo de calidad de los productos digitales interactivos

(aunque no exclusivamente) que refiere a la facilidad de uso.
No se trata de un concepto abstracto, porque se puede probar y evaluar de

manera empírica.
En la ISO 9241-11 (Requerimientos ergonómicos para trabajo de oficina con

terminales visuales, 1997), está definida de la siguiente manera:
Es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar

objetivos específicos en un contexto de uso específico.
En su artículo Usability 101: Introduction to Usability (Se puede acceder al sitio

haciendo clic en el siguiente enlace: https://www.nngroup.com/articles/usability-
101-introduction-to-usability), Jakob Nielsen describe cinco componentes a
través de los cuales podemos medir la usabilidad de un producto o interfaz:
Facilidad de aprendizaje: Qué tan fácil es completar una tarea, cuando el

usuario se encuentra por primera vez con el diseño.
Eficiencia: Una vez que aprendieron la forma básica de usarlo, ¿qué tan rápido
pueden completar las tareas?

Capacidad de ser recordado: Cuando los usuarios vuelven al diseño, después
de un periodo sin usar, ¿qué tan fácilmente recuperan el conocimiento para
volver a usarlo?
Errores: ¿Cuántos errores cometen los usuarios? ¿Qué tan graves son? ¿Qué tan
fácilmente pueden recuperarse?
Satisfacción: ¿Qué tan agradable le ha parecido el uso al usuario?
¿Cómo podemos asegurarnos un nivel aceptable de usabilidad?
Lo ideal es probar con usuarios reales, para entender si es tan fácil como
pensamos al momento de diseñar o debemos ajustar algo. Sin embargo, hay
algunas recetas, a modo de buenas prácticas, que nos aseguran un nivel
aceptable de usabilidad, si las aplicamos desde el comienzo del diseño.
A esas recetas se las llama Heurísticas de Usabilidad. Fueron escritas en 1995

por Jakob Nielsen en el artículo 10 Usability Heuristics for User Interface Design
(Para ampliar se puede acceder al siguiente sitio: https://www.nngroup.com/
articles/ten-usability-heuristics/) pero hasta hoy siguen estando vigentes.
En lo que sigue, veremos una por una.
1- Mostrar estado del sistema
Proveer información sobre el sistema y en qué estado se encuentra, teniendo en

cuenta: tiempo, espacio, cambio, acción, finalización.

Fuente: captura de pantalla de Google Drive (2016).
En el captura de Google Drive vemos que indican de manera gráfica en qué

carpeta está parado el usuario y le da visibilidad sobre la cantidad de GB usados.

2- Hablar el lenguaje del usuario
Proveer Información sobre el sistema y en qué estado se encuentra, teniendo en

cuenta:
Metáforas e iconos que el usuario ya conozca.
Hablar con los términos que el usuario utilice.
Seguir las convenciones del sistema.
Utilizar patrones de diseño.

Fuente: Good UI, disponible en: http://goodui.org/
3- Control y libertad del usuario
Libertad para deshacer
Libertad para explorar
Fuente: captura de pantalla de Gmail.
4- Consistencia y estándares
Estructura (layout) visual consistente.
Uso consistente de nombres y términos.
Elecciones consistentes.

Fuente: captura de pantalla de dos secciones de Mercado Pago (2016).
En estos dos fragmentos de dos secciones de Mercado Pago, vemos que el

menú de navegación no es consistente y no cumple la heurística. Puede generar
problemas de usabilidad.
5- Prevenir Errores
Ayudar a los usuarios a no caer en errores.
Prevenir la pérdida de datos.
Prevenir las duplicaciones innecesarias.
Prevenir salidas de un flujo.
Prevenir errores en el ingreso de datos.
Eliminar elecciones innecesarias.
Fuente: Captura de pantalla de Google Doc (2016)
En el ejemplo vemos cómo Google Doc nos advierte sobre la posibilidad de que
el link que estamos agregando no sea correcto. Antes de que luego falle, nos
permite recuperarnos.

6- Aliviar la carga en memoria del usuario
Evitar códigos o codificación.
Evitar pasos extra.
Usar “previews”, mostrar antes de ejecutar el cambio.
Prevenir errores en el ingreso de datos.
Eliminar elecciones innecesarias.

Fuente: Captura de pantalla de Any.do (2016)

En el ejemplo de la registración de Any.do, vemos cómo aliviana la carga de
memoria del usuario ofreciendo una registración rápida, sin completar un
formulario, conectándose con la cuenta de Google o Facebook.
7- Atajos, Flexibilidad y Eficiencia
Atajos de teclado
Recomendaciones
Fuente: Captura de pantalla de Google Chrome (2014)
En el ejemplo vemos cómo Google Chrome le ofrece una recomendación al

usuario para lograr el mismo resultado (navegar sin que se registre el historial)
de manera más fácil.
8- Estética y minimalismo
Mantener lo más importante “above the fold”.
Señal vs. ruido. Dar pistas claras y evitar los ruidos que desvíen.
Usar el color de forma adecuada (armonía/contraste).
Minimalismo en la funcionalidad.

Fuente: Captura de pantalla de Google y Yahoo (2016)
La comparación de Google y Yahoo son un ejemplo de cómo impacta el

minimalismo.
9- Comunicar los errores con claridad
Que sean fáciles de reconocer visualmente.
Explicar el problema con claridad.
Proveer una solución o camino a seguir.
Proponer una alternativa

.
Fuente: Captura de pantalla de Google (2015)
En el mensaje de Google vemos que se cumple la heurística: se identifica

visualmente como error, explica qué pasó y ofrece una solución. Pero, no provee
una alternativa.
10- Ayuda y Documentación
Ofrecer ejemplos:
Foco en las tareas de los usuarios.
Concretos y sencillos.
Tour en pantalla.
Fuente: Captura de pantalla de Google Drive (2015)
En el ejemplo vemos cómo Google Drive ofrece un tour y una explicación en

video de los cambios que acaban de lanzar.

Nivel disfrutable
Este es el nivel de experiencia que requiere más trabajo y atención al detalle.

A diferencia del nivel usable, no tiene heurísticas sobre las que podamos echar
mano para asegurarnos un nivel de calidad mínimo.
Pero, podemos trabajar mucho los mensajes de la interfaz para darle alma y
que se distinga del resto. Pensá en la películo Yo, robot [https://youtu.be/_
ok3nGo0mTc]. Allí vemos que de todos los robots Ns-5 que se producen en
masa, uno es particular y se distingue del resto, porque tiene personalidad.
Cuando diseñamos experiencias apuntamos a lo mismo, a lograr que el producto

se distinga del resto en el uso, aunque luzca similar. Está llegando un punto en
que la facilidad de uso es una commodity, es una cualidad común que todos
los usuarios esperan de mínima. Por eso, lo que va a distinguir un producto o
una pieza digital de otra, será la experiencia que ofrezca.
Hay algunos puntos que debemos tener en cuenta para que el producto se
conecte emocionalmente con el usuario:
Debe sentirse personal, como un diálogo entre interfaz y usuario. La interfaz

no tiene que ser dura como una máquina, lo ideal es demostrar que detrás hay
personas.
Fuente: Captura de pantalla de Slack. (2016)
En este ejemplo de Slack, la aplicación para comunicarse entre equipos, vemos

cómo festeja que no hay nada para leer. Más allá de lo personal y humano
del mensaje, lo interesante es que Slack no usa siempre el mismo, sino que
sorprende al usuario con algún otro.
La sorpresa es un muy buen recurso, porque logra captar la atención y convierte

algo que suele ser común en una sensación buena. Hay que ser precavidos y
usarla en el momento justo, porque una sorpresa en el contexto inadecuado
puede ser contraproducente.

El siguiente es un ejemplo del aviso en Facebook promocionando la serie
Stranger Things. Cuando el usuario iba mirando su timeline, se encontraba con
algo disruptivo:
Fuente: Captura de pantalla de Facebook. (2016)
En definitiva, se trata de generar un diálogo de la interfaz con el usuario, de

acuerdo a sus feelings y al contexto. Debemos lograr una comunicación con
emoción que se perciba humana y, por qué no, por momentos mágica.

Si sólo nos enfocáramos en la facilidad de uso, eso estaría simplemente bien.
Pero, como señala Jared Spool en Pleasure, Flow, and Meaning. The 3 Approaches
to Designing for Delight (s i le interesa ampliar en este artículo, puede acceder
a través del enlace: https://articles.uie.com/pleasure_flow_and_meaning/), si
tuviéramos una escala que va desde la frustración al deleite, estaríamos parados
en el medio, un punto neutral que no nos genera nada extraordinario, no nos
saca siquiera una sonrisa o un “esto me encanta”.
Fuente: Emiliano Cosenza.
Si llegamos al nivel del deleite, lograremos imprimir una huella emocional muy
difícil de borrar, porque el usuario estará vinculado con nuestro producto. Así, es
más probable que nos preste más atención, nos prefiera y recomiende.
actividad 1
Identificar qué heurística no se cumple
Se sugiere haber estudiado los niveles para evaluar una experiencia.
Descripción:
Verás un fragmento de una escena de una película y tendrás que tratar de

identificar cuál es la heurística que no se cumplió en la interfaz que usa el
protagonista.
Consigna:
Mira atentamente la escena de la película Her. Está situada en el el futuro,

Theodore, el protagonista tiene una relación con un software inteligente, diseñado
para acompañar a las personas. En la escena, el sistema operativo no funciona y
él intenta recuperarlo desesperadamente, hasta que lo logra y el sistema le dice
que había estado apagado para no distraerlo en el trabajo y que le había avisado
con un e-mail, que él jamás había visto.

Escena de la película: https://youtu.be/XLs-ljBuOTk
Theodore no debería haber llegado a ese punto de desesperación, si el diseñador

del sistema hubiera cumplido una de las heurísticas. Respondé cuál seria.
| evaluación
La evaluación del módulo se encuentra disponible en la sección destinada a tal

fin dentro de la plataforma.

Landing Page & UX

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Landing Page & UX

Cargado por

Copyright:

Formatos disponibles

Diplomatura en Marketing Digital

Módulo / Landing pages y diseño

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 2

A lo largo del módulo, el alumno aprenderá a desarrollar una landing page de

Si bien el diseño visual es importante, hoy en día no garantiza la conversión

• Comprender qué es una landing page y cuál es la mejor manera de

• Comprender cuáles son las buenas prácticas de diseño y usabilidad,

• Comprender por qué es importante diseñar con el foco puesto en las

• Enfocarse en el problema que quieren resolver con una landing page u

• Comprender qué es usabilidad y cuáles son sus nociones básicas apli-

• Comprender que el diseño de experiencia de usuario es una actividad

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 3

Unidad 1 - Introducción a la conversión: Landing pages

Unidad 2 - Landing pages avanzado

a. El contenido es el alma y el cuerpo de la landing. Texto y

Análisis de la experiencia de una landing.

Checklist para una landing exitosa

Equipo ideal para desarrollar una landing

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 4

Unidad 3 - UX: Diseño centrado en el usuario

3 ejes que componen el diseño de experiencias

Unidad 4 - UX: Diseño de experiencia de usuario. Usabilidad y la conexión

Metodología para diseñar la experiencia:

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 5

• Steve Krug, No me hagas pensar Una aproximación a la usabilidad en la

• Paz, Lorena Pioneros y hacedores: fundamentos y casos de diseño

• Donald A. Norman, La psicología de los objetos cotidianos, 1988, New

• Daniel Kahneman, (2015) Pensar rápido, pensar despacio, Editorial:

• Hassan-Montero, Y.; Ortega-Santamaría, S. (2009). Informe APEI

• Copyblogger, Landing pages. How to turn traffic into money.

• Jon Yablonski, Cognitive load (En inglés)

• Copyblogger, 6 maneras de mejorar la conversión de los botones (En

• Copyblogger, 8 maneras simples hacer más escaneable el contenido (En

• Norman Nielsen Group, Estudio sobre lectura en dispositivos móviles

• Crayon, Reporte de tendencias de diseño en landing pages (En inglés)

• No solo usabilidad: revista sobre personas, diseño y tecnología.

• Daniel Mordecki, Miro. Leo. Luego pienso http://www.mordecki.com/

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 6

Hero: Encabezado de la landing page. En general está compuesto por una

Headline: Del inglés: título o titular.

Layout: Se refiere al dibujo estructural de una página web.

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 7

Si buscamos “conversión” en el diccionario, encontramos las siguientes

Ganar a alguien para que profese una religión o la practique. Ej.: Se ha

Detengámonos un poco sobre estos dos conceptos marcados en negrita.

Desde el punto de vista del marketing, ese es un buen resumen de la actividad

Convertimos a un posible cliente en un cliente que paga. Si bien, el cliente que

Pero, a lo que vamos es que, en definitiva, hablamos de conversión cuando

Podríamos sintetizar gráficamente este concepto, de la siguiente manera:

Gráfico diseñado por Emiliano Cosenza.

Diplomatura en Marketing Digital | Módulo: Landing pages y diseño 8

Copyblogger, una plataforma de enseñanza de marketing digital, define a

Su objetivo será persuadir al cliente a tomar una acción: registrarse, comprar,

El concepto landing se aplica a cualquier página o pieza de contenido en el

Home page de un sitio

Con uno o varios objetivos.

Para una variedad de público.

Con un propósito u objetivo. ¡Uno y solo uno!

Para un público particular.

En el siguiente video de Copyblogger (en inglés), se explica qué es una

Qué es una landing page en 1 minuto(En inglés) https://youtu.be/cAtWEZrr3

Hay excepciones para la cantidad de páginas. Si es necesario que lleve más

La pregunta clave es: todo lo que mostramos y decimos, ¿está trabajando