El documento presenta varios casos de ejemplo que ilustran buenas y malas prácticas de diseño de interfaz de usuario (UX). Analiza 18 aspectos que influyen en la experiencia del usuario, como el mensaje claro en la página de aterrizaje, la navegación, los botones de acción, el uso del color, etc. Para cada caso, muestra un ejemplo considerado como "peor" y otro como "mejor" para ese aspecto particular. El objetivo es fomentar un debate sobre cómo diseñar interfaces que brinden la mejor experiencia de usuario.

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. 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. PEORES PRÁCTICAS EN UX
INTRODUCCIÓN

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. ¿CÓMO DISEÑAR PARA OBTENER PEOR UX?
A DEBATIR

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

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. ¿CÓMO DISEÑAR PARA OBTENER MEJOR UX?
A DEBATIR

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

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. CASO 1

12. CASO 1

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. LANDING PAGE: DIME QUÉ ERES
PEOR

15. LANDING PAGE: DIME QUÉ ERES
PEOR

16. LANDING PAGE: DIME QUÉ ERES
MEJOR

17. LANDING PAGE: DIME QUÉ ERES
MEJOR

18. CASO 2

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. NO ME SALUDES / ABURRAS, CONVÉNCEME
PEOR

21. NO ME SALUDES / ABURRAS, CONVÉNCEME
MEJOR

22. CASO 3

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. MENSAJE CLARO Y CONCISO EN TU LANDING PAGE
PEOR

25. MENSAJE CLARO Y CONCISO EN TU LANDING PAGE
MEJOR

26. CASO 4

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. MÁS CLARIDAD Y BREVEDAD AÚN EN MÓVIL
PEOR

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

30. CASO 5

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. ¿ME RECUERDAS QUÉ ERAS?
PEOR

33. ¿ME RECUERDAS QUÉ ERAS?
MEJOR

34. CASO 6

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. ¿QUÉ HAGO? DEMASIADOS CALLS-TO-ACTION
PEOR

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

38. CASO 7

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. CTAS EN MÓVILES
PEOR

41. CTAS EN MÓVILES
MEJOR

42. CASO 8

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. INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES
PEOR

45. INVENTAR DEMASIADO VS SEGUIR ESTÁNDARES
MEJOR

46. CASO 9

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. ¿QUIÉN ES EL LINK?
PEOR

49. ¿QUIÉN ES EL LINK?
MEJOR

50. CASO 10

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. NAVEGACIÓN: MENÚ, NIVELES, BREADCRUMBS, SEARCH
PEOR

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

54. CASO 11

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. ALINEAMIENTO, ESPACIO Y SIMETRÍA
PEOR

57. ALINEAMIENTO Y SIMETRÍA
MEJOR

58. CASO 12

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. BARRERAS DE ENTRADA: EVITA CREAR MUROS
PEOR

61. BARRERAS DE ENTRADA: EVITA CREAR MUROS
MEJOR

62. BARRERAS DE ENTRADA: EVITA CREAR MUROS
MEJOR

63. CASO 13

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. READY-TO-USE VS MANUALES
PEOR

66. READY-TO-USE VS MANUALES
MEJOR

67. CASO 14

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. DISEÑO BONITO NO IMPLICA MEJOR UX
PEOR

70. DISEÑO BONITO NO IMPLICA MEJOR UX
MEJOR

71. CASO 15

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. PERO LA ESTÉTICA IMPORTA
PEOR

74. PERO LA ESTÉTICA IMPORTA
MEJOR

75. CASO 16

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. EMPTY STATES
PEOR

78. EMPTY STATES
MEJOR

79. CASO 17

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. CUIDA PEQUEÑOS DETALLES… ¡EL TEXTO ES CLAVE!
PEOR

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

83. CASO 18
2 0 11

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. EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE
PEOR
2 0 11

86. EL COLOR TIENE SIGNIFICADO SUBCONSCIENTE
MEJOR

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. ¿QUÉ ES UX?

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. 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. ¿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. 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