No maltrates a tus usuarios /
clientes
w w w.lan g p rovin g .com
1 6 - 2 4 J u n i o , 2 0 1 4
Bu en a s prá c tic a s en...
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 ...
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, ...
¿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.lan g p rovin g .com
Bu en a s prá c tic a s en dis eñ o de in terf a c es we...
Próximos SlideShares
Carregando em…5
×

Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 2 - Peores y Mejores Prácticas en UX

509 visualizações

Publicada em

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
509
No SlideShare
0
A partir de incorporações
0
Número de incorporações
22
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 2 - Peores y Mejores Prácticas en UX

  1. 1. No maltrates a tus usuarios / clientes w w w.lan g p rovin g .com 1 6 - 2 4 J u n i o , 2 0 1 4 Bu en a s prá c tic a s en dis eñ o de in terf a c es web / mó viles y la impo rta n c ia de la s métric a s de u s o # 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
  2. 2. 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
  3. 3. PEORES PRÁCTICAS EN UX INTRODUCCIÓN
  4. 4. ¿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
  5. 5. ¿CÓMO DISEÑAR PARA OBTENER PEOR UX? A DEBATIR
  6. 6. ¿CÓMO DISEÑAR PARA OBTENER PEOR UX? A DEBATIR
  7. 7. ¿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
  8. 8. ¿CÓMO DISEÑAR PARA OBTENER MEJOR UX? A DEBATIR
  9. 9. ¿CÓMO DISEÑAR PARA OBTENER MEJOR UX? A DEBATIR
  10. 10. 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.
  11. 11. CASO 1
  12. 12. CASO 1
  13. 13. 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
  14. 14. LANDING PAGE: DIME QUÉ ERES PEOR
  15. 15. LANDING PAGE: DIME QUÉ ERES PEOR
  16. 16. LANDING PAGE: DIME QUÉ ERES MEJOR
  17. 17. LANDING PAGE: DIME QUÉ ERES MEJOR
  18. 18. CASO 2
  19. 19. 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
  20. 20. NO ME SALUDES / ABURRAS, CONVÉNCEME PEOR
  21. 21. NO ME SALUDES / ABURRAS, CONVÉNCEME MEJOR
  22. 22. CASO 3
  23. 23. 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
  24. 24. MENSAJE CLARO Y CONCISO EN TU LANDING PAGE PEOR
  25. 25. MENSAJE CLARO Y CONCISO EN TU LANDING PAGE MEJOR
  26. 26. CASO 4
  27. 27. 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
  28. 28. MÁS CLARIDAD Y BREVEDAD AÚN EN MÓVIL PEOR
  29. 29. MÁS CLARIDAD Y BREVEDAD AÚN EN MÓVIL MEJOR
  30. 30. CASO 5
  31. 31. 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
  32. 32. ¿ME RECUERDAS QUÉ ERAS? PEOR
  33. 33. ¿ME RECUERDAS QUÉ ERAS? MEJOR
  34. 34. CASO 6
  35. 35. 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
  36. 36. ¿QUÉ HAGO? DEMASIADOS CALLS-TO-ACTION PEOR
  37. 37. ¿QUÉ HAGO? DEMASIADOS CALLS-TO-ACTION MEJOR
  38. 38. CASO 7
  39. 39. 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
  40. 40. CTAS EN MÓVILES PEOR
  41. 41. CTAS EN MÓVILES MEJOR
  42. 42. CASO 8
  43. 43. 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
  44. 44. INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES PEOR
  45. 45. INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES MEJOR
  46. 46. CASO 9
  47. 47. 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
  48. 48. ¿QUIÉN ES EL LINK? PEOR
  49. 49. ¿QUIÉN ES EL LINK? MEJOR
  50. 50. CASO 10
  51. 51. 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
  52. 52. NAVEGACIÓN: MENÚ, NIVELES, BREADCRUMBS, SEARCH PEOR
  53. 53. NAVEGACIÓN: MENÚ, NIVELES, BREADCRUMBS, SEARCH MEJOR
  54. 54. CASO 11
  55. 55. 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
  56. 56. ALINEAMIENTO, ESPACIO Y SIMETRÍA PEOR
  57. 57. ALINEAMIENTO Y SIMETRÍA MEJOR
  58. 58. CASO 12
  59. 59. 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
  60. 60. BARRERAS DE ENTRADA: EVITA CREAR MUROS PEOR
  61. 61. BARRERAS DE ENTRADA: EVITA CREAR MUROS MEJOR
  62. 62. BARRERAS DE ENTRADA: EVITA CREAR MUROS MEJOR
  63. 63. CASO 13
  64. 64. 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
  65. 65. READY-TO-USE VS MANUALES PEOR
  66. 66. READY-TO-USE VS MANUALES MEJOR
  67. 67. CASO 14
  68. 68. 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
  69. 69. DISEÑO BONITO NO IMPLICA MEJOR UX PEOR
  70. 70. DISEÑO BONITO NO IMPLICA MEJOR UX MEJOR
  71. 71. CASO 15
  72. 72. 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
  73. 73. PERO LA ESTÉTICA IMPORTA PEOR
  74. 74. PERO LA ESTÉTICA IMPORTA MEJOR
  75. 75. CASO 16
  76. 76. 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
  77. 77. EMPTY STATES PEOR
  78. 78. EMPTY STATES MEJOR
  79. 79. CASO 17
  80. 80. 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
  81. 81. CUIDA PEQUEÑOS DETALLES… ¡EL TEXTO ES CLAVE! PEOR
  82. 82. CUIDA PEQUEÑOS DETALLES… ¡EL TEXTO ES CLAVE! MEJOR
  83. 83. CASO 18 2 0 11
  84. 84. 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
  85. 85. EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE PEOR 2 0 11
  86. 86. EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE MEJOR
  87. 87. 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
  88. 88. ¿QUÉ ES UX?
  89. 89. 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
  90. 90. 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)
  91. 91. ¿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:
  92. 92. No maltrates a tus usuarios / clientes w w w.lan g p rovin g .com Bu en a s prá c tic a s en dis eñ o de in terf a c es web / mó viles y la impo rta n c ia de la s métric a s de u s o # 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

×