No maltrates a tus usuarios / clientes

w w w. l a n g p r o v i n g . c o m

1 6 - 2 4 J u n i o , 2 0 1 4

Buenas prác t i ca s en di s eño de in ter face s web / móvi le s y la impor tancia de la s métr ica s de uso

# u x t e n e r i f e

Romén Rodr íguez C E O – L a n g p r o v i n g

@ r o m e n r g

PEORES PRÁCTICAS EN UX

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

PEORES PRÁCTICAS EN UX INTRODUCCIÓN

¿CÓMO DISEÑAR PARA OBTENER PEOR UX?

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

¿CÓMO DISEÑAR PARA OBTENER PEOR UX? A DEBATIR

¿CÓMO DISEÑAR PARA OBTENER PEOR UX? A DEBATIR

¿CÓMO DISEÑAR PARA OBTENER MEJOR UX?

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

¿CÓMO DISEÑAR PARA OBTENER MEJOR UX? A DEBATIR

¿CÓMO DISEÑAR PARA OBTENER MEJOR UX? A DEBATIR

CASOS DE EJEMPLO ANÁLISIS DE LOS DIFERENTES ASPECTOS QUE INFLUYEN EN UX

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

NOTA (DISCLAIMER):

SE HAN RECOPILADO EJEMPLOS REALES DE FORMAS DE ABORDAR MEJOR O PEOR 18 ASPECTOS QUE CREO QUE INFLUYEN CONSIDERABLEMENTE EN LA EXPERIENCIA DE USUARIO (UX). ALGUNOS EJEMPLOS DE LOS PROPUESTOS COMO “PEOR” PARA UN DETERMINADO CASO PUEDEN TENER MÁS DE UN ASPECTO MEJORABLE Y/O MUCHOS OTROS BUENOS ASPECTOS QUE NO SE MENCIONAN; PUES EN CADA CASO SE RESALTA UN ÚNICO ASPECTO (CON FIN ACADÉMICO). DE LA MISMA FORMA, ALGUNOS EJEMPLOS QUE SE RESALTAN COMO “MEJOR” PARA UN DETERMINADO ASPECTO PUEDEN TENER OTROS ASPECTOS QUE SON MEJORABLES Y QUE NO SE RESALTAN POR EL MISMO MOTIVO.

EN TODO CASO, CABE DESTACAR QUE SE REALIZARÁ UNA CRÍTICA CONSTRUCTIVA DE CADA CASO CON FIN ESTRICTAMENTE ACADÉMICO.

CASO 1

CASO 1

CASO DE EJEMPLO 1 LANDING PAGE: DIME QUÉ ERES

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

LANDING PAGE: DIME QUÉ ERES PEOR

LANDING PAGE: DIME QUÉ ERES PEOR

LANDING PAGE: DIME QUÉ ERES MEJOR

LANDING PAGE: DIME QUÉ ERES MEJOR

CASO 2

CASO DE EJEMPLO 2 NO ME SALUDES / ABURRAS, CONVÉNCEME

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

NO ME SALUDES / ABURRAS, CONVÉNCEME PEOR

NO ME SALUDES / ABURRAS, CONVÉNCEME MEJOR

CASO 3

CASO DE EJEMPLO 3 MENSAJE CLARO Y CONCISO EN TU LANDING PAGE

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

MENSAJE CLARO Y CONCISO EN TU LANDING PAGE PEOR

MENSAJE CLARO Y CONCISO EN TU LANDING PAGE MEJOR

CASO 4

CASO DE EJEMPLO 4 MÁS CLARIDAD Y BREVEDAD AÚN EN MÓVIL

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

MÁS CLARIDAD Y BREVEDAD AÚN EN MÓVIL PEOR

MÁS CLARIDAD Y BREVEDAD AÚN EN MÓVIL MEJOR

CASO 5

CASO DE EJEMPLO 5 ¿ME RECUERDAS QUÉ ERAS?

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

¿ME RECUERDAS QUÉ ERAS? PEOR

¿ME RECUERDAS QUÉ ERAS? MEJOR

CASO 6

CASO DE EJEMPLO 6 ¿QUÉ HAGO? DEMASIADOS CALLS-TO-ACTION

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

¿QUÉ HAGO? DEMASIADOS CALLS-TO-ACTION PEOR

¿QUÉ HAGO? DEMASIADOS CALLS-TO-ACTION MEJOR

CASO 7

CASO DE EJEMPLO 7 CTAS EN MÓVILES

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

CTAS EN MÓVILES PEOR

CTAS EN MÓVILES MEJOR

CASO 8

CASO DE EJEMPLO 8 INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES PEOR

INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES MEJOR

CASO 9

CASO DE EJEMPLO 9 ¿QUIÉN ES EL LINK?

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

¿QUIÉN ES EL LINK? PEOR

¿QUIÉN ES EL LINK? MEJOR

CASO 10

CASO DE EJEMPLO 10 NAVEGACIÓN: MENÚ, NIVELES, BREADCRUMBS, SEARCH

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

NAVEGACIÓN: MENÚ, NIVELES, BREADCRUMBS, SEARCH PEOR

NAVEGACIÓN: MENÚ, NIVELES, BREADCRUMBS, SEARCH MEJOR

CASO 11

CASO DE EJEMPLO 11 ALINEAMIENTO, ESPACIO Y SIMETRÍA

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

ALINEAMIENTO, ESPACIO Y SIMETRÍA PEOR

ALINEAMIENTO Y SIMETRÍA MEJOR

CASO 12

CASO DE EJEMPLO 12 BARRERAS DE ENTRADA: EVITA CREAR MUROS

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

BARRERAS DE ENTRADA: EVITA CREAR MUROS PEOR

BARRERAS DE ENTRADA: EVITA CREAR MUROS MEJOR

BARRERAS DE ENTRADA: EVITA CREAR MUROS MEJOR

CASO 13

CASO DE EJEMPLO 13 READY-TO-USE VS MANUALES

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

READY-TO-USE VS MANUALES PEOR

READY-TO-USE VS MANUALES MEJOR

CASO 14

CASO DE EJEMPLO 14 DISEÑO BONITO NO IMPLICA MEJOR UX

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

DISEÑO BONITO NO IMPLICA MEJOR UX PEOR

DISEÑO BONITO NO IMPLICA MEJOR UX MEJOR

CASO 15

CASO DE EJEMPLO 15 PERO LA ESTÉTICA IMPORTA

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

PERO LA ESTÉTICA IMPORTA PEOR

PERO LA ESTÉTICA IMPORTA MEJOR

CASO 16

CASO DE EJEMPLO 16 EMPTY STATES

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

EMPTY STATES PEOR

EMPTY STATES MEJOR

CASO 17

CASO DE EJEMPLO 17 CUIDA PEQUEÑOS DETALLES… ¡EL TEXTO ES CLAVE!

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

CUIDA PEQUEÑOS DETALLES… ¡EL TEXTO ES CLAVE! PEOR

CUIDA PEQUEÑOS DETALLES… ¡EL TEXTO ES CLAVE! MEJOR

CASO 18

2 0 11

CASO DE EJEMPLO 18 EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE PEOR

2 0 11

EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE MEJOR

RESUMEN DE LAS COMPARATIVAS ¿QUÉ ES UX?

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

¿QUÉ ES UX?

COSAS QUE PODEMOS APRENDER EN UX DE LOS EJEMPLOS QUE HEMOS VISTO

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

AUTOCRÍTICA + MEJORA CONTÍNUA

¿QUÉ SOY? ¿POR QUÉ YO?

DISEÑO BONITO != MEJOR UX

…EVITA INFORMACIÓN SOBRANTE (FECHA DE HOY, BIENVENIDO A…)

CTA PRINCIPAL …PERO NO ABUSAR DE LOS CTAS

…PERO NO INVENTES DEMASIADO

MÓVIL: + ICONOS - TEXTO

UN LINK DEBE PARECERLO

¿DÓNDE ESTOY? MENÚ, BREADCRUMBS… ALINEAMIENTO, ESPACIO Y SIMETRÍA

EVITA CREAR MUROS

+ READY-TO-USE Y - MANUALES

…PERO DISEÑO FEO ES PERJUDICIAL

CUIDA LOS EMPTY-STATES

MENSAJES CLAROS Y CONCISOS

CUIDA EL TEXTO EL COLOR Y SU MENSAJE

COSAS QUE PODEMOS APRENDER DE LOS EJEMPLOS VISTOS

USA ESTÁNDARES (EJ. ICONOS)

¿QUÉ DOS PRINCIPIOS APLICARÍAS? (EN TU PROYECTO)

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

ACTIVIDAD:

No maltrates a tus usuarios / clientes

w w w. l a n g p r o v i n g . c o m

Buenas prác t i ca s en di s eño de in ter face s web / móvi le s y la impor tancia de la s métr ica s de uso

# u x t e n e r i f e 1 6 - 2 4 J u n i o , 2 0 1 4

Romén Rodr íguez C E O – L a n g p r o v i n g

@ r o m e n r g