Mejorando WP por

medio de UX
Una mirada a técnicas de usabilidad y marketing para mejorar las
experiencias de nuestros usuarios
UI y UX: ¿de qué estamos hablando?
UI y UX: ¿de qué estamos hablando?
Definición de UX
La experiencia de usuario es la suma de
percepciones subjetivas que una persona
tiene sobre un producto, servicio o sistema
diseñado para crear o satisfacer una
necesidad.
Intencionalidad
 Organización y Teoría
General

Distintos elementos y técnicas para saber cómo se construye una

interfaz efectiva y cómo aplicamos los principios de UX
Tipos de Sitio
● Comerciales
● Institucionales
● Medios
● Educativos
● Técnicos
● Personales
● Recreacionales
Definiendo Metas
 Objectives and key results
Objetivos y Resultados Claves

1. ¿Dónde tienes que ir?

2. ¿Cómo sabrás que estás ahí?

3. ¿Qué debemos hacer para

llegar a la meta?
Objetivo: Mejorar la Experiencia de Usuario de nuestro sitio

● Reducir la cancelación de compras de X% a Y%.

● Mejorar el promedio de visitas semanales por usuario
activo de X a Y.
● Aumente el tráfico orgánico de X a Y.
● Mejorar el compromiso o engagement de X a Y.
 Key Performance Indicator
Indicador clave de rendimiento

Método de medición del desempeño,

cuyo objetivo es evaluar el éxito de un
proceso continuo o actividad en
particular.
Objetivo: Mejorar la Experiencia de Usuario de nuestro sitio

Ventas
● Costo de adquisición de cliente
● Tasa de conversión de landing pages
● Tasa de retención de clientes

Soporte
● Tickets por mes
● Tiempo promedio de respuesta
● Satisfacción de clientes (por ejemplo por NPS Net Promoter Score)
 Llegamos a UI!

El diseño de interfaz de usuario o ingeniería de la interfaz es el

diseño de computadoras, aplicaciones, máquinas, dispositivos de
comunicación móvil, aplicaciones de software, y sitios web enfocado en
la experiencia de usuario y la interacción.
 Wireframes
Pueden ser de alta o baja
fidelidad
Mockups o
Borradores
Diseño de interfaz sin
contenido real
 Prototipos
Interactivos
Son versiones previas al
lanzamiento de la aplicación
Jerarquía de la Información
Y DEJAMOS ESTO PARA EL FINAL

SIGUIENDO POR ESTO

PRIMERO VAS A
LEER ESTA PARTE
Y LUEGO ESTO DE ACÁ
Herramientas de Testeo y Optimización

● Tests A/B - Google Optimize

● Hotjar
● Google Analytics
● Google Optimize
● Crazy Egg
● Usabilia
Psicología del
Usuario
En Experiencia de
Usuario, y contrario a lo
que podría pensarse,
diseño o programación
no son las principales
disciplinas, sino
psicología y
estadística (y en menor
grado, marketing)
Estrategias Cognitivas
Patrones de tendencias psicológicas que hacen que el cerebro humano saque conclusiones incorrectas.

Aversión a la pérdida
Nuestro miedo a perder nos motiva más que la perspectiva de ganar algo de
igual valor.

Necesidad de cierre
Tenemos el deseo de un cierre cognitivo definido en lugar de una
ambigüedad duradera.

Escasez
Si algo se promociona como escaso, lo percibimos como más deseable y más
valioso.
WP y UX: El matrimonio
perfecto
Creando una
“página de
destino”
(landing page)
Producto: Subscripción a un Newsletter sobre moda

Target: 85% femenino

Edad: 20-30 → 40% ; 30-40 → 30% ; 40-50 → 20% ; 50 o más → 10%

Audiencia: Nuestra audiencia se compone de personas interesadas

en la última tendencia en moda. Su composición es de clase media
aspiracional, con uso habitual de tecnología mobile y hábitos de
compra online. Aproximadamente el 45% son madres.
¿No nos falta nada?
 Fórmula Mágica

Verb + Beneficio + Urgencia

o

Sea Feliz Ya Mismo!

Definiendo el layout
Implementando en ACF

● Hero (Group)
○ Logo (Image)
○ Background (Image)
○ Contenido (WYSIWYG)
○ Formulario (WYSIWYG)
● Bloque de Contenido (WYSIWYG)
● CTA (Text)
● Bloque de Confianza (Repeater)
○ Imagen (Image)
● Testimoniales (Repeater)
○ Avatar (Image)
○ Contenido
<?php $hero_background = get_field( 'hero_background' ); ?>
<?php if ( $hero_background ) { ?>
<img src="<?php echo $hero_background['url']; ?>" alt="<?php echo $hero_background['alt']; ?>" />
<?php } ?>

<?php the_field( 'contenido' ); ?>

<?php the_field( 'posicion_contenido' ); ?>

<?php the_field( 'agregar_formulario' ); ?>

<?php if ( have_rows( 'bloques_flexibles' ) ): ?>

<?php while ( have_rows( 'bloques_flexibles' ) ) : the_row(); ?>
<?php if ( get_row_layout() == 'contenido_comun' ) : ?>
<?php the_sub_field( 'contenido' ); ?>
<?php elseif ( get_row_layout() == 'testimonial' ) : ?>
<?php if ( get_sub_field( 'incluir_testimonial' ) == 1 ) {
// echo 'true';
} else {
// echo 'false';
} ?>
<?php elseif ( get_row_layout() == 'bloque_de_confianza' ) : ?>
<?php if ( get_sub_field( 'incluir_bloque' ) == 1 ) {
// echo 'true';
} else {
// echo 'false';
} ?>
<?php endif; ?>
<?php endwhile; ?>
<?php else: ?>
<?php // no layouts found ?>
<?php endif; ?>
<<?php if (get_row_layout() == 'hero_zone') : ?>
<?php
$hero_background = get_sub_field('hero_background');
$align = get_sub_field('posicion_contenido');
?>
<?php if ($hero_background) {
echo '<section class="hero" style="background:#555555 url(' . $hero_background . ') no-repeat 50%;
background-size:cover">';
} else {
echo '<section class="noHero">';
} ?>
<div class="container">
<div class="row <?php echo '' . $align . ''; ?>">
<div class="hero-inner">
<?php the_sub_field('contenido'); ?>
</div>
</div>
</div>
</section>
Definiendo Posiciones
Herramientas Adicionales

● Google Analytics
● Google Tag Manager
● Google Optimize
○ Test A/B
○ Test Redirección
○ Test Multivariado
● Hotjar
Tráfico y Audiencia
¿Tenemos tráfico sin identificar o segmentado? ¿Propio o comprado?
Analizamos las conversiones por medio de Optimize, y el tráfico con
Analytics.

Patrones de comportamiento con Hotjar heatmaps y grabaciones de

flujo de usuario
Analizamos resultados de campaña: se cumplió el objetivo?

Tenemos muchos emails, usando Mailchimp, Aweber o eMercury

podemos crear una campaña de mailing usando retargeting, por
ejemplo enviando catálogos o selección de productos “hand picked”
 Muchas Gracias

@UX_panol
uxpanol/