Presentación sobre estrategia multidispositivo en el UXSpain 2014

1. Pensar en multidispositivo @nosoy1mas

2. WTF MOBILE

3. ¿Cuántos de aquí no tenéis
smartphone y tablet?

4. QUÉ ESTA PASANDO

7. http://tecnologia.elpais.com/tecnologia/2012/04/30/actualidad/1335790843_403953.html

8. El último año, el uso
de smartphone
creció un 81%
http://www.slideshare.net/Placester/how-mobile-killed-the-desktop-33-stats-that-tell-a-stroy

9. … el número de
tablets creció un
250% hasta los
195 millones…
http://www.slideshare.net/Placester/how-mobile-killed-the-desktop-33-stats-that-tell-a-stroy

10. … y el tráfico
móvil mundial
creció un 70%
http://www.slideshare.net/Placester/how-mobile-killed-the-desktop-33-stats-that-tell-a-stroy

11. Ventas de PC vs Mobile devices
http://www.slideshare.net/bge20/2013-11-mobile-eating-the-world

12. Algunos crecimientos para 2017
http://www.slideshare.net/bge20/2013-11-mobile-eating-the-world

13. Y en España…

14. Informe App Date

16. USOS Y CONTEXTOS

17. La gente hace lo que le da la gana con
el cacharro que le da la gana

18. De las búsquedas en móvil
suceden en lugares (casa o
trabajo) donde la gente tiene un
PC a mano
77%
tp://www.thinkwithgoogle.com/

19. http://www.thinkwithgoogle.com/

20. https://www.flickr.com/photos/aditza121/
… esto ya no
es la web

21. TIPOS DE SOLUCIONES

22. WEBAPPS

23. ¿ Cuándo
desarrollar una app ?
Uso repetitivo
Funcionalidades
Marca
www.wello.com

24. OK, pero…

26. ¡SIEMPRE!
UNA VERSIóN WEB

27. Las posibilidades web:
¿exclusiva por dispositivo o responsive?
EXCLUSIVA RESPONSIVE

28. Es una solución exclusiva para dispositivos móviles.
Mediante una técnica llamada useragent, el navegador detecta que
dispositivo se conecta y se “pinta” la versión concreta.
Versión exclusiva o m.

29. Responsive design es una técnica que consiste en conocer que tamaño
de dispositivo se conecta a nuestra web, y adaptar dicha web en diseño
e interacción al dispositivo, con un único HTML.
Responsive design

30. “There is no Mobile Web.
There is only The Web, which
we view in different ways.
There is also no Desktop Web.
Or Tablet Web. Thank you.” —
Stephen Hay, on twitter

31. Soluciones web multidispositivo
La experiencia
Captación
Negocio y medición
Metodología, tiempos y tecnología
Mantenimiento y organización: nueva forma
de pensar

32. El mundo se complica…
4

33. ¿Qué quieren los usuarios?…

34. ¿ ?
¿Qué quieren los usuarios?…

35. ¿Qué pasa en las tablets?…

37. Pesos y carga de la página
¡19 peticiones al servidor, 246.7Kb!
@brad_frost

38. Experiencias…
• Las soluciones pensadas para cada dispositivo siempre
dan más libertad para llegar a conseguir una experiencia
mejor y más rápida.
• Sin embargo, los usuarios demandan experiencias
completas y homogéneas independientes al dispositivo
(algo que puede ser más fácil de conseguir y mantener
con responsive)
Resumen

39. Soluciones web multidispositivo
La experiencia
Captación
Negocio y medición
Metodología, tiempos y tecnología
Mantenimiento y organización: nueva forma
de pensar

41. http://googlewebmastercentral.blogspot.com.es/2012/06/recommendations-for-building-smartphone.html

42. @brad_frost

43. Captación…
• Una solución responsive es más sencilla de gestionar
(urls y redirecciones) y posicionará mejor según Google.
• Para los usuarios, aunque es transparente, compartir
siempre la misma url es lo ideal (social sharing).
Resumen

44. Soluciones web multidispositivo
La experiencia
Captación
Negocio y medición
Metodología, tiempos y tecnología
Mantenimiento y organización: nueva forma
de pensar

45. Los test por defecto son
multidispositivo
• Herramientas actuales: tienen
limitaciones
• Mayor tiempo para realizar los test
• Las decisiones y posibles cambios
afectan a todos los dispositivos
Los test se realizan por dispositivo.
Las deciciones y posibles cambios
solo afectan a un dispositivo.
Medición, Test A/B

46. Medición, Test A/B
• La solución separada por dispositivos permite agilidad en
los test y toma de decisiones algo más rápidas que la
solución responsive.
Resumen

47. Soluciones web multidispositivo
La experiencia
Captación
Negocio y medición
Metodología, tiempos y tecnología
Mantenimiento y organización: nueva forma
de pensar

48. móvil
tablet
desktop
responsive
Versiones
separadas Versión responsive
Tiempos
Diseño y desarrollo
Vs

49. Tecnología y mantenimiento
Responsive Desktop Tablet Móvil
VS
1 CMS
HTML HTML HTML HTML
* Lo más sencillo para una empresa de desarrollo seria realizar CMS separados

50. Tiempos, desarrollo y tecnología (1 de 2)
• Si bien los esfuerzos globales de diseño y desarrollo son
similares en ambas, la solución exclusiva permite
paralelizar dichos tiempos en equipos paralelos.
Resumen: Desarrollo del proyecto

51. Tiempos, desarrollo y tecnología (2 de 2)
• A nivel de mantenimiento sin embargo, una versión
responsive es más fácil de mantener, ya que es un único
desarrollo.
Resumen: Mantenimiento del proyecto

52. Soluciones web multidispositivo
La experiencia
Captación
Negocio y medición
Metodología, tiempos y tecnología
Mantenimiento y organización: nueva forma
de pensar

53. ,,,cuando le dicen que la
web va a ser responsive
Responsable
móvil de la
empresa
ACME

54. Mantenimiento y organización
• La solución responsive simplifica la organización y la
solución específica la sofistica.
• La decisión es de la empresa
Resumen

55. 1. ¿Queue está pasando?
2. Imaginemos
3. Qué hacen los demás
4. Enfoque, soluciones
¿Qué hacemos…?

56. • Rápido para el usuario
• Ágil para el equipo técnico
• Más ágil para test A/B
• ¿Tablets? 3 versiones al menos
• Contenido duplicado
• Mantenimiento técnico
• SEO
• Social sharing
• Necesidad Organizativa
• 1 site! = Mantenimiento
• SEO
• Tendencia natural
• Multidispositivo
• Conocimiento Técnico
• Tiempos desarrollo y
cambios
• Test A/B
Solución específica por
dispositivo
Solución Responsive
Parece que la balanza se decanta ligeramente responsive

57. CASOS REALES

58. Porcentaje de rebote:
-30%
Páginas por visita:
+75%
Visitas:
+25%
Conversión:
+20%
Precio Medio:
+140%

59. Transacciones
+130%
Conversión:
+50%
Facturación:
+80%

62. Qué hemos aprendido…

63. Coherencia

64. Elástico

65. Táctil

66. Mobile First

67. Testing

68. ¿ Smart TV ?

70. Vimeo en smart TV es web

71. Smart TV
• Sin estándares
• Con navegadores que cumplen parcialmente con
html y CSS
• Procesadores y almacenamiento relativo
• Interacción muy variable
• Sin soluciones web fáciles, ni RWD ni User Agent
“La tecnología esta para disfrutarla,
no para sufrirla”
Jesús Real Muñoz
“The inmobile Web”, Jason Grisby

72. ESTRATEGIA
MULTIDISPOSITIVO

73. @globalmoxie

74. @grigs

75. @brad_frost

76. @lukew

77. ¿Y EL FUTURO?

78. Google GLASS

79. Android Wear

83. ¡DISFRUTEMOS!

86. ¡GRACIAS!
@nosoy1mas