Mejorando WP por medio de UX Una mirada

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 Verbo + Beneficio + Urgencia 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="no. Hero">'; } ? > <div class="container"> <div class="row <? php echo ''. $align. ''; ? >"> <div class="hero-inner"> <? php the_sub_field('contenido'); ? > </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 e. Mercury 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/