Marketing Digital y Metricas Unidad 6 Experiencia de Usuarios

Marketing Digital y Métricas
Unidad 6 "Experiencia de usuarios"
Objetivos Unidad 6
Revisa los objetivos propuestos para esta
unidad.
Objetivos de aprendizaje
Conocer los principales conceptos, de niciones y herramientas que debe contemplar una estrategia de
experiencia de usuario.
Entender cómo la experiencia de usuario es determinante para la actividad de una organización y, en general, para
una mayor conversión.
Copyright Todos los derechos reservados
Los recursos alojados en enlaces y códigos QR presentes en este documento podrían no estar disponibles a partir del 29 de julio del 2024

1 de 44
¿Cómo diseñar una experiencia

de usuario?
El marketing digital se caracteriza por centrarse
en el usuario, buscando nuevas formas de hacer
su experiencia positiva e impactando en la
delización del cliente. ¿Cómo lograrlo? Aquí te
contamos.
Puedes escuchar este audio en la versión online de tu clase o escaneando este código QR
La cantidad de medios y plataformas web a las que accedemos diariamente es enorme. Al buscar noticias
o información de actualidad, revisar la cuenta del banco, mirar las redes sociales e incluso recibir
publicidad, estamos consumiendo acciones de marketing digital puestas en marcha para invitarnos a iniciar
una interacción.
Sea que lleguemos a esas páginas de forma directa o por casualidad, nuestra permanencia en ellas será
dictada por la experiencia que vivamos como usuarios y su correcto diseño. ¿A qué nos referimos con esto?
Esta situación desagradable es más común de lo que se piensa y ocurre cuando se pasa por alto el diseño
de la experiencia del usuario, punto fundamental que, al estar bien desarrollada, aumenta las posibilidades
de delización.

2 de 44
UX: diseñando experiencias positivas

La experiencia de usuario, arquitectura de información o diseño de experiencia son conceptos y disciplinas
que pueden ayudar a las empresas a potenciar la experiencia del usuario, la cual impacta en la rentabilidad
del negocio a través de los siguientes resultados especí cos:
El desafío es conjugar las necesidades de los usuarios con las necesidades del negocio.
Vemos a nuestros clientes como invitados a una esta, y

nosotros somos los an triones. Es nuestro trabajo hacer
que cada aspecto importante de la experiencia del cliente
mejore diariamente”.
Jeff Bezos, CEO Amazon.
Una gran di cultad para el desarrollo de estas herramientas tiene que ver con el alto desconocimiento que
existe respecto a los bene cios y oportunidades de negocio que trae la experiencia de usuario. Por ejemplo,
el uso de campañas publicitarias adaptadas a las necesidades de los usuarios en el momento indicado. A
nivel latinoamericano, estas son herramientas poco explotadas en general, pero existe un amplio terreno de
crecimiento. El problema es que muchas veces para las instituciones hay intereses encontrados entre el
ahorro de recursos y el gasto en el usuario.
Para no contribuir al desconocimiento mencionado, lo primero es entender, en palabras de sus creadores,

qué signi can los conceptos de experiencia de usuario y arquitectura de la información y por qué son
fundamentales para la estrategia de Marketing Digital.

3 de 44
De niendo la Experiencia de usuario

El trabajo de la mejora de la experiencia de los usuarios en
sitios web lo realiza una persona que organiza los patrones
inherentes a la información, haciendo entendible lo
complejo. Se crea un mapa de información que permite a
otros encontrar su vía personal hacia el conocimiento”.
Richard Saul Wurman, Arquitecto y diseñador grá co, creador de TED Talks.
Entonces, la experiencia de usuario es el conjunto de factores y elementos relativos a su interacción con un

entorno o dispositivo concreto, dando como resultado una percepción positiva o negativa de dicho servicio,
producto o dispositivo.
El punto clave de esta experiencia dentro de la estrategia de marketing de una empresa está en la
información que entrega sobre el “verdadero viaje del consumidor (customer journey)”, evidenciando las
interacciones del cliente en cada uno de los puntos de contacto del plan digital.
Veamos un ejemplo:
El video a continuación explica cómo hacer un mapa de experiencia de usuario, el que te permitirá
determinar si el diseño cumple con todas las expectativas o necesita modi caciones.

4 de 44
Puedes ver este recurso interactivo en la versión online de tu clase o escaneando este código QR
De niendo la Arquitectura de la información

La arquitectura de información es principalmente sobre la
adopción del conocimiento... sobre cómo las personas
procesan la información y construyen relaciones entre las
diferentes piezas de información(…). El diseño de
información es principalmente sobre la percepción y
sobre cómo la gente transforma lo que ve y escucha en
conocimiento”.
Jesse James Garret, diseñador de experiencia de usuario, cofundador de Adaptive Path.
Jesse James Garret propone uno de los tantos modelos de arquitectura de información que se puede
aplicar a cualquier plataforma digital, ya que ha permitido unir el lenguaje de su disciplina con las
necesidades de las instituciones.
Este modelo se compone de diferentes capas que se deben resolver de manera consecutiva, respondiendo
a los requerimientos de cada una de las etapas de creación de un sitio web, partiendo por la de nición de
objetivos y terminando en la propuesta de diseño visual:

5 de 44
1. Objetivos de sitio: en esta primera etapa se crean los objetivos de negocios, de carácter creativo, y otros
generados de manera interna para el sitio.
2. Necesidades de usuario: en esta etapa se plantean los objetivos para el sitio externamente derivados,
identi cados a través de la investigación de los usuarios en el ámbito etnográ co, tecnográ co, psicográ co,
etc.
3. Especi caciones funcionales: esta etapa consiste en un "set de herramientas" con descripciones detalladas de las
funcionalidades que el sitio debe incluir para satisfacer las necesidades del usuario.
4. Diseño de la interacción: en esta fase se desarrolla el ujo de las aplicaciones para facilitar las tareas del usuario,
de niendo cómo este interactúa con la funcionalidad del sitio.
5. Diseño de la información: en esta etapa se realiza el diseño de la presentación de la información para facilitar el
entendimiento.
6. Diseño de la interfaz: es el estudio de interacción humano-computador tradicional, donde se diseñan los

elementos de la interfaz, facilitando así la interacción del usuario con la funcionalidad.
7. Diseño Visual: nalmente, se realiza el tratamiento grá co de los elementos de la interfaz.
El modelo de Garrett busca fundamentar el planteamiento estratégico que hay detrás de la arquitectura de
información o experiencia de usuario planteada en la estrategia de marketing digital. Esto permitirá
asegurar:
El entendimiento rápido, fácil y sin esfuerzo respecto al sitio web u otra plataforma digital.
Encontrar la información de manera simple.
Que quienes crean la plataforma puedan incluir nueva información sin afectar la estructura de esta.
Que quienes dirigen la plataforma puedan incorporar nuevas iniciativas sin tener que intervenir o partir desde cero.
En el siguiente video podrás ver algunos ejemplos de diseños de interfaces y experiencias de usuario que
gra can de forma tangible los conceptos aprendidos:

6 de 44
Finalmente, podemos señalar que la experiencia de usuario o User Experience (UX) es la manera en que un
usuario interactúa con los contenidos y funcionalidades que ofrece la marca en las plataformas digitales,
permitiendo que el cliente marque la percepción y opinión acerca de la marca, sus productos y/o servicios a
través de su viaje de usuario.
En este sentido es importante no confundir la experiencia de usuario (UX) con la experiencia de cliente
(CX). Como vimos, el User Experience (UX) se enfoca en la experiencia individual del usuario al interactuar
con un producto o servicio en un contexto especí co, asegurándose de que sea fácil de usar y satisfactorio.
Por otro lado, el Customer Experience (CX) engloba la experiencia completa del cliente en todas sus
interacciones con una empresa, desde la primera impresión hasta la retención a largo plazo, considerando
cada punto de contacto para crear una percepción positiva de la marca y fomentar la lealtad del cliente.
Ambos aspectos son cruciales para el éxito empresarial, ya que una buena experiencia de usuario puede
in uir en la experiencia general del cliente con la marca.
Referencias
Del Prado, J. A. (2020, 29 septiembre). La Arquitectura de Información Web y sus tipos. UXABLES | Blog.
http://www.uxables.com/diseno-ux-ui/la-arquitectura-de-informacion-web-y-sus-tipos/
Gonzalez, S. (2023, 14 noviembre). Tendencias en branding, diseño y UX para 2024.

https://www.cyberclick.es/numerical-blog/tendencias-en-branding-diseno-y-ux-para-2024
Media Impact. (2023, 2 noviembre). 5 tips para mejorar la experiencia de usuario en tu página web.
https://es.linkedin.com/pulse/5-tips-para-mejorar-la-experiencia-de-usuario-en-tu?trk=article-ssr-frontend-
pulse_more-articles_related-content-card
Moreno, J. (2023, 7 noviembre). UX: guía completa sobre la experiencia de usuario. Hubspot.es.
https://blog.hubspot.es/website/experiencia-de-usuario-ux
Serrano, S. (2020, 15 septiembre). Cómo de nir la arquitectura de la información de un proyecto. Blog de Hiberus
Tecnología. https://www.hiberus.com/crecemos-contigo/como-de nir-la-arquitectura-de-la-informacion-de-un-
proyecto
Torresburriel Estudio. (2023, 26 enero). Arquitectura de la información, la importancia en UX | TorresBurriel Estudio.

Blog - UX Torresburriel Estudio. https://torresburriel.com/weblog/arquitectura-de-la-informacion-que-es-y-por-
que-es-importante-en-ux/

7 de 44
Comparte tu experiencia
¿Se utilizaron estos conceptos fundamentales al diseñar la página de tu negocio? ¿Qué aspecto crees que
podría mejorarse?

8 de 44
Arquitectura de la Información
Una buena experiencia de usuario en un sitio web
se de ne por una estructura atractiva donde los
contenidos que se buscan sean fáciles de
encontrar. ¿Cómo lograrlo? Con la arquitectura
de la información.
Hacer un platillo especí co sin receta y sin noción alguna de cómo se prepara; buscar una dirección en una
ciudad desconocida sin la posibilidad de ver un mapa; construir una casa sin los planos del arquitecto: eso
sería la experiencia digital sin la arquitectura de la información.
Como aprendimos en el artículo anterior, esta disciplina está encargada del estudio, análisis, organización y
estructuración de la información en plataformas digitales, a través de sistemas de información interactivos
y no interactivos.
Ahora bien, existen diferentes maneras de enfrentarse a la de nición de una estrategia de arquitectura de
información y, por lo mismo, se conocen numerosos modelos de distintos expertos que explican cómo
organizar la generación de una plataforma digital, desde la creación del sitio hasta la visualización nal,
para mejorar la experiencia del usuario.

9 de 44
Ya conocimos el modelo de Jesse James Garret, y en este artículo revisaremos el modelo que plantea Juan
Carlos Camus, experto en usabilidad y académico de diferentes universidades, quien propone realizar un
análisis previo sobre cómo se dispondrá la información y cuáles serán las funcionalidades de esos recursos.
Modelo Camus
El modelo de Juan Carlos Camus se basa en cinco etapas:
Conozcamos más detalladamente estos pasos:

10 de 44
Paso 1: Identi car el contenido

● Todo contenido pertenece a una “familia”
Se deben descubrir los patrones de esa familia, para presentarlos ordenadamente.
Se deben establecer las relaciones entre todos los contenidos, para apoyar la experiencia del usuario.
● Jerarquizar
Todo contenido tiene un grado de importancia relacionado con:
Su contexto (estrategia, novedad).
Su prominencia (autor, tema).
Su desarrollo (multimedia, fotos, texto).
●Agrupar y etiquetar el contenido

11 de 44
Paso 2: Identi car las funcionalidades

● Ejemplos de funcionalidades o interacciones
Envío de mails con contenidos.
Formularios de autenticación de usuarios.
Suscripción a newsletters.
Personalización de contenidos.
Compartir contenido.
● Árbol de Contenidos
De nición y jerarquización de los contenidos del sitio, distribuidos a nivel de secciones y subsecciones. Algo así
como el mapa del sitio.
● Estructura del Sitio
Creación de la estructura, conjunto de elementos que permitirán generar la experiencia del usuario en un sitio,
haciéndolo navegable y funcional. Es básicamente la forma en que el usuario avanzará o navegará a través del
sitio.

12 de 44
Paso 3: Generar el contenido

● ¿Cómo elegir el contenido?
Actualidad, Proximidad, Prominencia o Preeminencia y Consecuencia, Con icto, Cultura, Rareza, Interés Humano,
etc.
● ¿Cómo presentar el contenido?
Necesidad de jerarquizar la información.
Lo más importante primero: más grande, más destacado, con frases directas.
● ¿Cómo escribir para el sitio?
Se lee mediante saltos entre los temas más importantes, no palabra a palabra.
● Por ello es necesario:

13 de 44
● Al publicar:
Usar una pantalla de largo.
Utilizar enlaces al nal para que haya una lectura completa.
Combinar texto, imágenes, sonido y video.
Para gestionar el contenido podemos utilizar un sistema de gestión de contenido

para páginas web, mejor conocido como CMS, siglas en ingles de “Content
Management System”. Entre sus muchas funciones, este sistema permite crear el
sitio web, gestionarlo, mantenerlo y administrarlo.

14 de 44
Paso 4: Diseño de interfaz

Plantear un diseño que se conceptualiza como una consecuencia de los objetivos, contenidos y funcionalidades
planteadas.
Se desarrolla un wireframe (representación grá ca y simple de los elementos del sistema) y luego se aplica el
diseño visual de la plataforma.
Ejemplo de Wireframe de Youtube:

15 de 44
Ejemplo de Diseño visual de Youtube:

16 de 44
Paso 5: Medición y análisis de resultados

De nada sirve todo el trabajo realizado en los pasos anteriores si no se repara en entender los resultados de
la estrategia de experiencia de usuario.
● De nir KPI’s (identi cadores claves de performance). Encontramos tres KPI’s claves:
Usabilidad: se centra en la facilidad con que las personas logran lo que se propusieron.
Compromiso: se centra en las interacciones de los usuarios.
Conversión: es la más relevante, y se puede interpretar en la cantidad de ingresos, registros, uso de aplicaciones,
etc.
● De nir metas de los KPI’s
● Aplicar herramientas de medición de la experiencia de usuario
Test heurístico: metodología que implica un análisis en profundidad de la plataforma realizado por un experto en
usabilidad.
Test de usabilidad: permite revisar en terreno la forma en que un sitio web es percibido por los usuarios.
Revisión de métricas de las plataformas digitales. Existen diferentes herramientas, la más usada es Google
Analytics.
Otra manera de analizar la experiencia del usuario es el Test A/B, que consiste en
desarrollar y lanzar dos versiones de un mismo elemento y medir cuál funciona
mejor. Es una prueba que nos sirve para optimizar una estrategia de email
marketing o mejorar la efectividad de una landing page.

17 de 44
Arquitectura de información de una plataforma: consejos de

expertos
¿Necesitas más datos? Para sacar aún más provecho a tu sitio web con respecto a su arquitectura, otros
expertos en el tema proponen los siguientes consejos a aplicar en el diseño UX:
Jakob Nielsen
Este ingeniero danés es considerado uno de los referentes a nivel mundial en cuanto a usabilidad web. Ha
trabajado en grandes empresas como Bellcore, IBM y Sun Microsystems. Actualmente, gura como co-
fundador de Nielsen Norman Group con Donald Norman, otro experto en usabilidad.
Sus consejos para plantear la arquitectura de información de una plataforma son:

18 de 44
Steve Krug
Es otro destacado gurú en el ámbito de la arquitectura de la información y la experiencia de usuario, quien
se ha hecho conocido por su libro “No me hagas pensar, que trata la interacción humano-computadora y la
usabilidad web. El experto dirige una rma de consultoría llamada Advanced Common Sense.
Sus consejos para una arquitectura de información efectiva son:
Con estos consejos, podemos concluir que la esencia de la arquitectura de la información es tener una
metodología coherente, conocer las funciones de cada recurso, priorizar los elementos de más relevancia y
nalmente, ponerse en el lugar del usuario. Esto permitirá que la navegación sea simple, intuitiva y lógica,
logrando que el usuario encuentre lo que busca, obteniendo una experiencia exitosa.
Referencias
Amazon.com: Cien elementos que debe tener un sitio web (Spanish edition): 9789563937169: Camus, Juan
Carlos: Libros. (2023). https://www.amazon.com/-/es/Juan-Carlos-Camus/dp/9563937163
Arenzana, D. (2022, marzo 25). Principios de usabilidad Web de Jacob Nielsen y el diseño UX. Semrush Blog.
https://es.semrush.com/blog/usabilidad-web-principios-jakob-nielsen/
Bohigas, M. (2023, 30 septiembre). Guía rápida para entender ¿qué es la la arquitectura de la Información (AI)?
TeaCup Lab. https://www.teacuplab.com/es/blog/guia-rapida-para-entender-que-es-la-la-arquitectura-de-la-
informacion-ai/
Del Prado, J. A. (2020, 29 septiembre). La Arquitectura de Información Web y sus tipos. UXABLES | Blog.
http://www.uxables.com/diseno-ux-ui/la-arquitectura-de-informacion-web-y-sus-tipos/
González, P. (2023, 28 abril). Un viaje hacia la usabilidad perfecta con el libro «No me hagas pensar» de Steve Krug.
https://es.linkedin.com/pulse/un-viaje-hacia-la-usabilidad-perfecta-con-el-libro-me-paolo-gonz%C3%A1lez
Las 10 heurísticas de usabilidad en diseño de interfaz. (2023, 23 abril). Gluo. https://www.gluo.mx/blog/las-10-

heuristicas-de-usabilidad-en-diseno-de-interfaz

19 de 44
Serrano, S. (2023, 28 de noviembre). Cómo de nir la arquitectura de la información de un proyecto. Blog de

Hiberus Tecnología. https://www.hiberus.com/crecemos-contigo/como-de nir-la-arquitectura-de-la-informacion-
de-un-proyecto/
Tienes 5 segundos. (2023). Google Books. https://books.google.cl/books?

id=qC3DCgAAQBAJ&printsec=frontcover&redir_esc=y#v=onepage&q&f=false
De todos los pasos y consejos vistos, ¿cuál te parece vital a la hora generar un sitio web que proporcione
una destacable experiencia del usuario?

20 de 44
Herramientas para evaluar

errores en la experiencia del
usuario
Al conocer las herramientas que distinguen los
problemas de los sitios webs y los típicos errores
que se cometen en su diseño, podremos obtener
resultados y mejorar nuestras plataformas.
Luego de tener claras las distintas metodologías que se pueden utilizar para generar una arquitectura de la
información más efectiva, llega la hora de evaluar nuestro sitio desde la perspectiva del visitante. Para
esto, existen herramientas que ayudan a los diseñadores de experiencias a analizar la web y hacerla mucho
más amigable para todo tipo de usuario.
Identi car los problemas UX: test heurístico

La heurística es un concepto que signi ca hallar o inventar, y se usa para referirse a la disciplina del
descubrimiento. En ese sentido, el test heurístico es una evaluación o análisis técnico que busca identi car
los errores de usabilidad y mostrar oportunidades de optimización.
Estas pruebas son una forma e ciente y accesible de asegurar la usabilidad de una interfaz, permitiendo
encontrar hasta un 80% de los errores más frecuentes, gracias a una serie de veri caciones y
consecuciones de objetivos.
¿Qué se evalúa?
Teniendo en cuenta aspectos generales del proyecto, podemos evaluar el nivel de adaptación de la
arquitectura de información según las necesidades de los usuarios, y analizar en profundidad los
contenidos y estilo; las etiquetas y llamados a la acción; la estructura y elementos de navegación; el diseño
visual de la interfaz; los recursos para realizar búsquedas en el sitio web y la accesibilidad web, entre otros.

21 de 44
Nielsen, maestro de la usabilidad a quien ya conocemos, creó diez sugerencias o “heurísticas” para
identi car y resolver los posibles problemas en las interacciones de los usuarios con los sistemas. Estas
sugerencias o normas se dieron a partir del estudio de 249 problemas.
En el siguiente video podrás ver una mejor explicación de cada heurística:
Nielsen recomienda usar un sistema de valorización que va del 0 al 4, donde “cero” signi ca que no existe
un problema y “cuatro” indica que el error tiene una in uencia determinante para los objetivos del proyecto.
El trabajo de valorizar los errores encontrados tiene como objetivo determinar la

prioridad de las tareas, ya que esta herramienta no busca rediseñar una plataforma, sino
solucionar problemas concretos y proponer mejoras especí cas.

22 de 44
Herramientas UX
Hotjar
Esta es una herramienta que permite grabar la experiencia del usuario en tu página web. También muestra
el comportamiento de las visitas con el n de entender la necesidad o insight de las personas que ingresan
al sitio virtual. Además de grabar, te permite generar mapas de calor, ya sea por movimiento del ratón o por
retención del usuario, es decir, donde más se quedan los visitantes mirando.
Mouse ow
Esta herramienta permite entender la necesidad del usuario a través de un mapa de calor que muestra el
movimiento del ratón o la cantidad de clics que se hacen en la página. Igualmente, con Mouse ow puedes
obtener grabaciones de lo que hacen quienes ingresan al sitio y te permite tener un embudo de conversión
con el n de mejorar el ROI de tus carritos de compras.

23 de 44
CrazyEgg
Esta es una herramienta muy usada para el análisis de la usabilidad y experiencia de usuario. A través de
ella se pueden visualizar mapas de calor de diferentes tipos que muestran información de los clics, la
atención de los usuarios y su scroll.

24 de 44
Optimizely
Herramienta que permite conocer mejor a los usuarios de un sitio web, para mejorar su experiencia a
través de los cambios realizados en el diseño.
Con Optimizely se puede aumentar el engagement y los bene cios, gracias a un test A/B. Además, analiza
la web o cualquier dispositivo móvil.

25 de 44
Opentext
Es otra de las herramientas de diseño UX que incluye todos los elementos de medición, análisis y diseño
necesarios para la creación de una estrategia de experiencia de usuario.
Esta herramienta considera:
Gestión de contenidos web (WCM).
Autoría de contenido.
Entrega multicanal.
Diseño web y herramientas grá cas layout.
Pruebas múltiples.
Selección de contenidos.
Gestión de medios.
Análisis avanzado.
Gestión de contenido social.
Flujo de trabajo y apropiación.
Administración de archivos.

26 de 44
El correcto análisis de la usabilidad web, el conocimiento del viaje del usuario y el interés por simpli car la
navegación son elementos clave a la hora de generar un sitio web e ciente y exitoso. Saber medir y valorar
los resultados que nos arrojan las herramientas para realizar el test heurístico también nos permitirá
entender, de forma integral, el comportamiento de los usuarios y cómo adaptar el sitio web de acuerdo a
sus necesidades.
Experiencia de usuario y problemas de usabilidad web

Entendiendo que todas las personas son distintas, ¿cómo vamos a hacer para que la experiencia de usuario
sea buena para todos? ¿Cómo haremos un diseño a prueba de errores que logre que los usuarios se sientan
cómodos al utilizar una app o sitio web? Es natural que al analizar la experiencia de usuario surjan estas
preguntas.
Por ejemplo, hoy en día los usuarios se jan bastante en la

seguridad de los sitios web a los que acceden e ingresan sus
datos personales, y una manera de brindarles una buena
experiencia de usuario es con rmándoles que tu sitio es
auténtico, real y con able. Esto se puede conseguir con los
certi cados SSL (Secure Socket Layer), o su sucesor mejorado
TLS (Transport Layer Security), tecnologías que sirven para
brindar seguridad a los visitantes de tu página web, ya que
protegen la conexión.
En la realidad, aunque muchas de las necesidades de los usuarios son conocidas, los responsables de
elaborar este tipo de interfaces siguen cometiendo errores en su desarrollo. La buena noticia es que toda
experiencia de usuario puede ser corregida y optimizada constantemente, por lo que conocer estos errores
comunes nos ayudará a la hora de mejorar nuestro sitio.
Errores en el diseño:
Conoce los errores más frecuentes en temas de diseño en el siguiente video:
Errores comunes en el diseño web
Algunos errores en el diseño web pueden tener un impacto signi cativo en la experiencia del usuario y, por lo tanto, en el éxito de
un sitio. ¡Te invitamos a conocerlos para que, justamente, los evites!
1. La optimización para móviles es esencial en un mundo donde la mayoría de las personas navega por internet desde sus
teléfonos. Ignorar esta optimización puede resultar en una mala experiencia para la mayoría de los visitantes.
2. Color en los enlaces: para mejorar la usabilidad, es fundamental diferenciar los enlaces visitados de los no visitados
mediante colores distintos.
3. Exceso de pop-ups: estos elementos pueden ser molestos y frustrantes para los usuarios. Si se utilizan, deben
implementarse con moderación y consideración.
4. Las ventanas emergentes no solicitadas suelen ser molestas y perjudiciales para la usabilidad, ya que los usuarios pre eren
tener control sobre cuándo aparecen nuevos elementos.
5. Nuevas pestañas: abrir enlaces en nuevas pestañas puede ser confuso para los usuarios, especialmente cuando ya tienen
varias ventanas abiertas en su navegador. Por eso, lo mejor es que estos se abran en el mismo lugar.
. Elementos que parecen publicidad: diseñar elementos que se asemejen a anuncios publicitarios puede confundir a los
usuarios y disminuir su con anza en el sitio. Es importante diferenciar claramente entre contenido y publicidad.

27 de 44
7. Lectura con obstáculos: factores como la falta de jerarquía visual, colores de texto inapropiados, letras pequeñas y múltiples
estilos de fuente y colores que no combinan pueden di cultar la lectura.
. Omitir breadcrumbs: las pistas visuales, como las “migas de pan”, son esenciales para que los usuarios sepan en qué parte
del sitio se encuentran. Omitirlos puede llevar a una navegación confusa y menos satisfactoria.
En de nitiva, evitar errores de diseño es crucial para asegurar una experiencia de usuario positiva y así aumentar las posibilidades
de éxito de un sitio web. Recuerda: un diseño centrado en el usuario es esencial para retener visitantes y alcanzar los objetivos de
la página.
Puedes ver este video en la versión online de tu clase o escaneando este código QR
Errores de contenido:
Errores en las funcionalidades:

Ahora es momento de explorar qué errores son comunes en cuanto a las funcionalidades.

28 de 44
Bloquear el botón para retroceder

También es una mala práctica inhabilitar este botón en mi página y
no permitir al usuario volver atrás. Los usuarios acostumbran a
ocupar esa función y al no estar disponible demoran su
navegación cuando buscan un sitio o página anterior que carga
muy rápido debido al caché, de estar habilitada la función.
Desactivar el zoom
Este error se comete en ocasiones. Hay que tener conciencia que
parte de nuestros usuarios pueden necesitarlo para ver algún
detalle de la página.
Convenciones Web
Los usuarios están acostumbrados a la navegación de las páginas
más populares y, por lo tanto, esperan que tu página sea similar en
cuanto a la funcionalidad. De no seguir los estándares, el poco
tiempo que tienes para llamar la atención del usuario que navega
en tu sitio, lo gastarán peleando con la funcionalidad de tu
plantilla.
Reproducción automática de sonido o video

¿Te ha pasado que entras a una página y comienza a sonar una
música o a reproducirse un video que no quieres ver? Y lo peor, es
que no encuentras cómo detenerlo. Evita este tipo de
reproducciones automatizadas.

29 de 44
Links que expulsan al usuario de la web

Si pones links a otras páginas debes asegurarte que estas abran en
otra pestaña, en forma independiente. Si no lo haces, te expones a
que el usuario te abandone y no siga navegando en tu página.
Mostrar páginas de errores

Si el usuario llega a alguna de estas páginas (404 o errores no
personalizados) en tu web, lo más probable es que te deje, debido a
que no hay incentivo para que continúe navegando por tu sitio, y
todo gracias a una redirección de la misma página.
Una visita satisfactoria puede signi car conseguir un usuario regular o incluso, una conversión a cliente, por
lo que estas herramientas y consejos serán tus principales aliados a la hora de mejorar la experiencia del
usuario.
Referencias
Arenzana, D. (2022, 25 marzo). Principios de usabilidad Web de Jacob Nielsen y el diseño UX. Semrush Blog.
https://es.semrush.com/blog/usabilidad-web-principios-jakob-nielsen/
Crazy Egg. (2023). Crazy Egg Website — Optimization | Heatmaps & A/B Testing. https://www.crazyegg.com/
Econsultoria. (2023, 11 agosto). 7 herramientas para medir la usabilidad de tu web | eConsultoria. Econsultoria:
Agencia de Growth y marketing online en Madrid. https://econsultoria.net/blog/7-herramientas-para-medir-la-
usabilidad-de-tu-web/
Hotjar, (2023, 28 noviembre). 10 errores comunes en el diseño UX y cómo solucionarlos. (2023, 28 noviembre).
https://www.hotjar.com/es/diseno-ux/errores/
Maldonando, J. (2023, 22 noviembre). Errores más comunes en el diseño UX. MUX Studio.
https://muxstudio.com/errores-mas-comunes-en-el-diseno-ux/
Nielsen, J., & Norman, D. (2023). Nielsen Norman Group: UX Training, Consulting, & Research. Nielsen Norman
Group. https://www.nngroup.com/

30 de 44
Santi. (2023, 19 julio). 5 errores comunes de UX cómo evitarlos en tu página web. StartGo.
https://www.startgoconnection.es/5-errores-comunes-ux-y-como-evitarlos/
Sothis. (2023). OpenText, ¿qué es y para qué sirve? https://www.sothis.tech/opentext-que-es-y-para-que-sirve/
Vásquez, F. (2023, 27 marzo). Pruebas de usuario: el arte de ver a la gente equivocarse y aprender de los errores.
https://es.linkedin.com/pulse/pruebas-de-usuario-el-arte-ver-la-gente-equivocarse-y-f%C3%A9lix-
v%C3%A1squez
¿Qué error de sitio web has experimentado y fue un verdadero dolor de cabeza?

31 de 44
Diseño responsive vs. Diseño

adaptativo
Adaptarse: palabra clave en el mundo del
contenido digital. Un sitio que se adapta a las
necesidades del usuario garantiza una buena
experiencia, y aquí encontrarás las claves para
conseguirlo.
Al diseñar un sitio web, es fundamental entregar al usuario la mejor experiencia visual posible, además de
garantizar una buena accesibilidad y usabilidad. Para conseguirlo, es primordial que nuestro diseño web se
adapte al público y pueda visualizarse correctamente en cualquier dispositivo, sin importar su tamaño o
tipo de sistema.
La gente no quiere leer mucho, ni pensar mucho, solo

quieren ver una página y poder usarla con facilidad”.
Steve Krug.
Diseño responsivo vs. Adaptativo

El diseño web adaptativo y el responsive han generado confusión en el diseño web. Por un lado, el diseño
adaptativo ajusta el contenido a pantallas móviles, pero usa tamaños prede nidos para cada dispositivo.
Por su parte, el diseño responsive reorganiza elementos según el dispositivo, garantizando una experiencia
óptima. Para lograrlo, utiliza medidas de ancho, márgenes proporcionales, media queries y hojas de estilo
adaptativas a diferentes tamaños de pantalla. En la actualidad, esta técnica es la más usada, ya que ofrece
una experiencia de usuario más consistente.
En resumen, el diseño web adaptativo usa distintos diseños para dispositivos, mientras que el responsive
usa un único diseño que se visualiza correctamente en cualquier tecnología, adaptándose al tamaño de
pantalla de PC, laptop, tablet o smartphone, siendo la misma versión para todos.

32 de 44
En la siguiente imagen se gra ca más claramente la diferencia entre ambos diseños.
Puedes ver este video en la versión online de tu clase o escaneando este código QR
El diseño web adaptativo puede ser ideal para proyectos con un tiempo limitado y un bajo presupuesto. Con
ayuda de datos de Google Analytics se puede veri car cuáles son los dispositivos y sistemas operativos que
emplean la mayoría de los visitantes, y así priorizar el diseño en los dispositivos más populares.
Por otro lado, el diseño responsive puede ser ideal si se crea un sitio web desde cero, ya que se debe tener
en cuenta que suele tomar más tiempo que el diseño adaptativo, puesto que el diseñador debe veri car que
cada layout se adapte adecuadamente a la pantalla. Este diseño ofrece una experiencia más óptima, sin
importar el tipo de dispositivo que utilice el usuario.
En la siguiente infografía podemos ver las características de cada diseño:

33 de 44
El nuevo paradigma que estamos viviendo en los tiempos del Marketing Digital consiste en sacar del centro
de la estrategia al producto o servicio y poner en ese lugar al usuario, es decir, hoy día todos los esfuerzos y
estrategias deberían estar pensados para el usuario y no en el producto.
Siempre debes pensar en el usuario y en cómo utilizan la

información”.
Jakob Nielsen.
Para lograr este objetivo, la clave está en trabajar con un equipo experto (diseñador UX, programador,
generador de contenido, analista y director de proyecto, entre otros), dispuesto a alinearse con el negocio y
las necesidades del usuario, así como disponer de herramientas que se apliquen a las diferentes etapas del
proceso de la arquitectura de la información.
Referencias
Coppola, M. E. (2023, 7 noviembre). Diseño responsive: qué es, cómo funciona y cómo implementarlo. HubSpot.
https://blog.hubspot.es/website/diseno-responsive
Holcombe, J. (2022, 25 octubre). Responsive vs Adaptive: Cómo Elegir el Enfoque de Diseño Correcto. Kinsta®.
https://kinsta.com/es/blog/responsive-vs-adaptive/

34 de 44
Mosquera, A. P. (2023, 5 abril). Diseño adaptativo vs responsive: ¿son lo mismo? Deusto.

https://www.deustoformacion.com/blog/programacion-tic/diseno-adaptativo-vs-responsive-son-lo-mismo
Nats Saucedo. (2023, 12 febrero). Diseño web: adaptativo vs responsive [Vídeo]. YouTube.
https://www.youtube.com/watch?v=7yJZEJ1yslU
¿Qué modelo es tu favorito y por qué?

35 de 44
Un palacio que hay que renovar

El centro de eventos Plaza Mayor decidió
seguirle el paso a las necesidades de sus
usuarios y renovar su sitio web, siguiendo las
tendencias de diseño web y arquitectura de la
información. ¿Cómo les fue?
"Hasta 10 millones se invertirán en un Palacio para Exposiciones”. Así se tituló en 1971 la nota del periódico
El Colombiano que daba cuenta de un proyecto que se construiría en Medellín y que consistía en un gran
centro de eventos que potenciaría la economía, la cultura y el turismo de la ciudad.
Así comienza la historia del Centro Internacional de Convenciones de Medellín, hoy Plaza Mayor, que antes
de la pandemia por el COVID-19 destacaba por ser un lugar ideal para todas aquellas empresas que
buscaban realizar eventos de gran magnitud, tanto a nivel nacional como internacional como fueron la
Asamblea General de la OEA, la Comic Con, el Medellín Fashion Week y Lego Serious play, entre otros, y que
hoy en día ha tenido que adaptarse, creando un espacio de webinars con distintos temas y eventos de
actualidad.

36 de 44
Demasiada información
Como buen centro de eventos, Plaza Mayor se caracteriza por exhibir constantemente una cantidad
increíble de información en su sitio web, ya que, por una parte, debe preocuparse por mantener al público
informado respecto a la gran diversidad de eventos que se realizan durante el mes en sus instalaciones, y,
por otra, debe levantar contenidos de empresas que desean utilizar su espacio para realizar sus
encuentros.
Frente a esta gran cantidad de información surgió el desafío:

¿Cómo organizar y jerarquizar los contenidos para mejorar la
experiencia de los usuarios? ¿Cómo conseguir un diseño web
que se adaptara a sus necesidades, re ejara el objetivo de la
compañía y permitiera una expedita navegación a la hora de
buscar información?
Frente a estas interrogantes, en 2017, el Centro de Convenciones Plaza Mayor decidió rehacer su sitio web
y cambiar la tecnología que tenían a WordPress. Dicha modi cación permitió la posibilidad de realizar
varias mejoras al sitio y resolver problemas que llevaban tiempo queriendo solucionar, entre los que se
encontraban:

37 de 44
El sitio no se ajustaba completamente a la variedad de dispositivos (diseño responsivo).
Tenía problemas de seguridad (ausencia de certi cado SSL y vulnerabilidades).
No contaba con una buena experiencia de navegación para el usuario.
Por otro lado, se sumaba el problema de que era un sitio de difícil administración, ya que el sistema de
gestión de contenidos (CMS) tenía una tecnología compleja y obsoleta que en su momento tuvo vigencia,
pero que claramente precisaba un cambio.
Así, los directivos de Plaza Mayor, al entender que se trataba de un trabajo que requería de conocimientos
expertos, decidieron contratar una empresa externa experta en diseño web, llamada BTODigital.
A actualizar se ha dicho
Plazamayor.com.co necesitaba convertirse en una página amigable para el usuario, con contenido valioso y
que se ajustara a todos los dispositivos, permitiendo así no solo el fácil acceso a la información, sino
también un alcance mayor. Esto se traduciría en mejor visibilidad, aumento de su posicionamiento en
Google, más leads y, consecuentemente, mayores ventas nales.
Con esos objetivos en mente, la empresa de diseño web comenzó a trabajar. El mayor reto correspondía a
la gran cantidad de información que contenía el sitio, por lo que, para acelerar el proceso, utilizaron el
concepto de Growth Driven Design (GDD), que en español signi ca “diseño que promueve el crecimiento”.

38 de 44
De esta forma, este rediseño que promueve el crecimiento ofrece un modelo más exible, donde las
empresas pueden cambiar sus planes de acción de marketing basándose en las condiciones y los
obstáculos que encuentran sus visitantes o clientes potenciales.
Para la Subdirectora de BTODigital y líder del proyecto, Susana Álvarez, la etapa de pre-producción fue de
gran importancia para buscar referentes y generar un mapa del sitio que diera pie al diseño orientado al
crecimiento.
Fue gracias a este sistema que la agencia digital logró terminar el proyecto de actualización de
Plazamayor.com.co en tiempo récord, tras ocho meses para ser exactos, cumpliendo así con todas las
expectativas:
El proceso supuso un aprendizaje constante sobre

programación, usabilidad, diseño y cultura ciudadana,
tanto por parte del equipo de expertos como de los
encargados de subir contenidos de Plaza Mayor”.
Laura Cardona, Jefa de diseño Plaza Mayor.
Mildrey Pino, Jefe de Programación Web de la agencia digital, agrega que la clave para lograr la tarea se
centró en la constancia, el compromiso y la capacidad para establecer objetivos claros. Cualidades que
deberían primar en todo proyecto de estas características.
El esperado renacer del palacio

Tras esta gran renovación en el año 2018, la página web de Plaza Mayor tuvo una increíble mejoría no solo
en el crecimiento de número de visitas, sino también en el incremento de eventos (ventas), que
aumentaron 52% con respecto del año anterior.

39 de 44
Gracias a la nueva plataforma, Plaza Mayor amplió su agenda de eventos propios, creando distintas
experiencias y explorando diferentes formatos que apuntaban a nichos particulares.

40 de 44
Además, como parte de la modernización y actualización de sus herramientas digitales, y con el objetivo de
seguir posicionando el Centro de Convenciones y Exposiciones de Medellín en el ámbito internacional,
Plazamayor.com.co generó un sistema de traducción al inglés del contenido en su sitio. Esta nueva
posibilidad se dio como respuesta al análisis de estadísticas de visitas, que arrojó que el segundo lugar
correspondía a estadounidenses.
Con estrategias como estas queremos generar un

excelente trá co de personas a nuestro sitio web y seguir
posicionándonos como un centro de convenciones a la
vanguardia de los grandes recintos feriales del mundo”.
Laura Cardona, Jefa de diseño Plaza Mayor.
Gracias al nuevo servicio implementado y a los múltiples cambios en el renovado sitio web, hoy en día los
visitantes de PlazaMayor.com.co pueden acceder con con anza a todos los servicios y obtener una gran
experiencia de usuario, donde las mejoras son impartidas por parte del equipo de manera ágil y constante.
Referencias
Betancur, C. (2020, 8 diciembre). Caso de éxito Plaza Mayor: una gran web, amigable y en tiempo record.
BTODigital Colombia. https://btodigital.com/caso-de-exito-plaza-mayor-una-gran-nueva-web-navegable-y-
amigable-en-tiempo-record/
Plaza Mayor Medellín. (2023, 6 diciembre). Plaza Mayor Medellín - Convenciones y exposiciones.
https://plazamayor.com.co/
¿Cuál crees que fue la mejora que logró que Plaza Mayor incrementara sus ventas en un 52%?

41 de 44
Resumen y Glosario Unidad 6

Aquí encontrarás un resumen con los puntos
más importantes de la unidad, y un glosario con
conceptos centrales para tu aprendizaje.
Resumen
El diseño de experiencia y la correspondiente arquitectura de información son conceptos y disciplinas que pueden
ayudar a las empresas a potenciar la experiencia del usuario.
Es esencial distinguir entre la experiencia de usuario (UX) y la experiencia de cliente (CX). La UX se centra en la
experiencia individual del usuario al interactuar con un producto o servicio en un contexto especí co,
asegurándose de que sea fácil de usar y satisfactoria. Por otro lado, la CX abarca la experiencia global del cliente
en todas sus interacciones con una empresa, desde la primera impresión hasta la retención a largo plazo,
considerando cada punto de contacto para crear una percepción positiva de la marca y fomentar la lealtad del
cliente.
Jesse James Garret propone un modelo de arquitectura de información que se compone de diferentes capas que
se deben resolver de manera consecutiva, respondiendo a los requerimientos de cada una de las etapas de
creación de un sitio web, partiendo por la de nición de objetivos y terminando en la propuesta de diseño visual.
Estos son: Objetivos del sitio, Necesidades de usuario, Especi caciones Funcionales, Diseño de la Interacción,
Diseño de la Información, Diseño de la Interfaz, Diseño Visual.
Juan Carlos Camus, experto en usabilidad y académico de diferentes universidades, propone realizar un análisis
previo sobre cómo se dispondrá la información y cuáles serán las funcionalidades de esos recursos.
Las etapas del modelo que Camus propone son: Identi car el contenido, identi car las funcionalidades, generar el
contenido, diseño de interfaz, y nalmente, la medición y análisis de resultados.

42 de 44
Algunos consejos para plantear la arquitectura de información de una plataforma son: Incluir un lema, agrupar
información corporativa, enfatizar en mensaje principal, utilizar enlaces con la palabra más útil, incluir sistema de
búsqueda, mostrar ejemplos de contenidos, mantener visibles temas pasados, no apoyar demasiado con grá cos,
usar grá cos signi cativos.
Los 10 principios de la usabilidad de Nielsen son: visibilidad del estado del sistema, coincidencia entre el sistema y
el mundo real, control y libertad del usuario, consistencia y estándares, prevención de errores, reconocimiento en
lugar de recuerdo, exibilidad y e ciencia de uso, estética y diseño minimalista, ayuda y documentación y
nalmente prevención de errores graves.
El diseño adaptativo y el diseño responsive son dos enfoques en el diseño web para optimizar la experiencia en
diferentes dispositivos. El diseño adaptativo se basa en crear diferentes versiones del sitio para dispositivos
especí cos, mientras que el diseño responsive utiliza un solo diseño que se ajusta automáticamente al tamaño de
la pantalla del dispositivo, garantizando una experiencia uniforme en todos ellos.
El diseño responsive es más ampliamente adoptado en la actualidad debido a su capacidad para adaptarse de
manera e ciente a diversas pantallas y su enfoque en un único diseño adaptable.

43 de 44
Glosario
Usabilidad: es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o
sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas y quienes las
utilizan. El objetivo es determinar la e ciencia en el uso de los diferentes elementos ofrecidos en las pantallas y la
efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.
Interfaz: la interfaz permite que la persona pueda controlar efectivamente las acciones de la plataforma y que la
persona reciba respuestas de la máquina que le permitan saber si la interacción es correcta y cómo seguir
actuando.
Layout: en español, Layout o “lay out” signi ca diseño, disposición, plan. Cuando se habla de layout en marketing,
se está haciendo referencia al diseño o disposición de los productos/servicios en sectores o categorías en los
puntos de venta de una empresa.

44 de 44

Marketing Digital y Metricas Unidad 6 Experiencia de Usuarios

Cargado por

Copyright:

Formatos disponibles

Marketing Digital y Metricas Unidad 6 Experiencia de Usuarios

Cargado por

Información del documento

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

Marketing Digital y Metricas Unidad 6 Experiencia de Usuarios

Cargado por

Copyright:

Formatos disponibles

Marketing Digital y Métricas

Unidad 6 "Experiencia de usuarios"

Copyright Todos los derechos reservados

Marketing Digital y Métricas

¿Cómo diseñar una experiencia

Marketing Digital y Métricas

UX: diseñando experiencias positivas

Vemos a nuestros clientes como invitados a una esta, y

Jeff Bezos, CEO Amazon.

Para no contribuir al desconocimiento mencionado, lo primero es entender, en palabras de sus creadores,

Marketing Digital y Métricas

De niendo la Experiencia de usuario

Entonces, la experiencia de usuario es el conjunto de factores y elementos relativos a su interacción con un

Marketing Digital y Métricas

De niendo la Arquitectura de la información

Jesse James Garret, diseñador de experiencia de usuario, cofundador de Adaptive Path.

Marketing Digital y Métricas

6. Diseño de la interfaz: es el estudio de interacción humano-computador tradicional, donde se diseñan los

7. Diseño Visual: nalmente, se realiza el tratamiento grá co de los elementos de la interfaz.

Encontrar la información de manera simple.

Marketing Digital y Métricas

Gonzalez, S. (2023, 14 noviembre). Tendencias en branding, diseño y UX para 2024.

Torresburriel Estudio. (2023, 26 enero). Arquitectura de la información, la importancia en UX | TorresBurriel Estudio.

Marketing Digital y Métricas

Copyright Todos los derechos reservados

Marketing Digital y Métricas

Marketing Digital y Métricas

Conozcamos más detalladamente estos pasos:

Marketing Digital y Métricas

Paso 1: Identi car el contenido

Se deben descubrir los patrones de esa familia, para presentarlos ordenadamente.

Su contexto (estrategia, novedad).

Su prominencia (autor, tema).

Su desarrollo (multimedia, fotos, texto).

●Agrupar y etiquetar el contenido

Marketing Digital y Métricas

Paso 2: Identi car las funcionalidades

Envío de mails con contenidos.

Formularios de autenticación de usuarios.

● Estructura del Sitio

Marketing Digital y Métricas

Paso 3: Generar el contenido

● ¿Cómo presentar el contenido?

Necesidad de jerarquizar la información.

● ¿Cómo escribir para el sitio?

● Por ello es necesario:

Marketing Digital y Métricas

Usar una pantalla de largo.

Utilizar enlaces al nal para que haya una lectura completa.

Combinar texto, imágenes, sonido y video.

Para gestionar el contenido podemos utilizar un sistema de gestión de contenido

Marketing Digital y Métricas

Paso 4: Diseño de interfaz

Ejemplo de Wireframe de Youtube:

Marketing Digital y Métricas

Ejemplo de Diseño visual de Youtube:

Marketing Digital y Métricas

Paso 5: Medición y análisis de resultados

Compromiso: se centra en las interacciones de los usuarios.

● De nir metas de los KPI’s