Mobile first la presentación en español

3. Primero móvil en Google
Los programadores de Google
están haciendo un trabajo en
aplicaciones móviles en primer
lugar, porque son mejores
aplicaciones, y eso es lo que
los programadores top quieren
desarrollar.
-Eric Schmidt, CEO de Google

4. Primero móvil en Facebook
Recién ahora estamos empezando a pensar en los móviles primero y en los
computadores de escritorio en segundo lugar, para muchos de nuestros productos. ”
-Kate Aronowitz, director de diseño de Facebook

5. Primero móvil en Adobe
Realmente tenemos que cambiar ahora para empezar a pensar en la
construcción móvil en primer lugar. Este es un cambio aún más grande que la
revolución del PC.
-Kevin Lynch, CTO de Adobe

6. Primero móvil
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación

7. Consideraciones en el diseño de
móviles:
• Múltiples tamaños de pantalla y densidades
• Optimización del rendimiento
• Los objetivos de tacto, los gestos y las acciones
• Ubicación de sistemas
• Capacidades del aparato

8. Primero móvil
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación

9. CRECIMIENTO = OPORTUNIDAD
El crecimiento de Internet móvil ha superado el crecimiento de computadores
de escritorio. Ventas de teléfonos inteligentes pasarán las ventas de PC en
2012

12. 27% de las búsquedas provienen de un
4% de los usuarios
• 27% de todas las búsquedas
provienen de Yelp aplicación
para iPhone que tenía 1,4
millones de usuarios únicos
mayo 2010
• Ese mes Yelp tuvo 32 millones
de usuarios únicos en todo el
mundo

13. Facebook para
iPhone
Crear un producto, no re-
imaginar uno para
pantallas pequeñas. Gran
cantidad de productos
móviles se crean, nunca
deben ser portabilizados.
-Brian Fling

14. "Mi objetivo era inicialmente sólo hacer un sitio portátil, pero me
convencí de que era posible crear una versión de Facebook mejor
que el sitio web ".
-Joe Hewitt

15. Primero móvil
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación

16. Tamaño de la pantalla
• Centrarse en las acciones básicas
• Conozca a sus usuarios
• Utilizar el diseño escalable

17. Tamaño de pantalla

18. Se centran en elementos básicos
En las aplicaciones del iPhone,
la principal función debe ser
inmediatamente evidente.
Minimizar el número de controles
que los usuarios tienen que
elegir.
- Directrices para la interfaz de
iPhone

21. Conoce a tu
audiencia

22. Diseña para diferentes tamaños de
pantallas

23. Tamaño de las pantallas de los
SmartPhones

24. El impacto del Pixel por Pulgada

25. El impacto del Pixel por Pulgada

26. Diseña para diferentes tamaños de
pantallas
1.- Define grupos de dispositivos

27. Diseña para diferentes tamaños de
pantallas
1.- Define grupos de dispositivos
2.- Crear un diseño de referencia por
defecto

28. Diseña para diferentes tamaños de
pantallas
1.- Define grupos de dispositivos
2.- Crear un diseño de referencia por defecto
3.- Definir las reglas para el contenidos y la adaptación del
diseño

29. Diseña para diferentes tamaños de
pantallas
1.- Define grupos de dispositivos
2.- Crear un diseño de referencia por defecto
3.- Definir las reglas para el contenidos y la adaptación del
diseño
4.- Optar por los estándares web y un diseño flexible

30. Controles visibles de la aplicación

31. El controlador de hardware para el
menú

32. El contenido de la acción
Tu no debes ver la pantalla grande del iPad como una invitación a
recuperar toda la funcionalidad que podamos desde la aplicación para
iPhone.
- Directrices para la interfaz de iPad

33. Velocidad
• Mantener el rendimiento al nivel de la mente
• Aproveche las ventajas de HTML 5

34. Velocidad de conexión

35. Sugerencias de rendimiento
Reducir las peticiones y tamaño del archivo
• Eliminar las redirecciones
• Utilizar sprites CSS para servir a múltiples imágenes
• Consolidar la CSS y Javascript en un solo archivo
• Minify su código (Minify es una aplicación de PHP5 que le ayuda a seguir desde
Yahoo!, regla de rendimiento web)
Tome ventaja del HTML5
• Utilizar caché de la aplicación para el almacenamiento de contenido local
• Use CSS3 y la etiqueta de tela en lugar de imágenes en la medida de lo
posible

36. Un alto rendimiento
100ms de demora resulta en la pérdida de un 1% de ventas.
(potencial de $ 191 millones en pérdidas de ingresos en 2008)
400ms de demora resulta en 5.9% menos en el tráfico de
página completa.
500 ms de demora disminuye el tráfico de búsqueda en un 20%.
El costo de rendimiento más lento aumenta con el tiempo.
Retraso de 1s en los resultados genera una caída de un 4% en
los ingresos
El 10% más rápido de los usuarios esta un 50% más lento que el
10%

37. Contexto
• Ráfagas rápidas… en todas partes
• Con una sola mano

38. Durante un día normal
84% En el hogar
80% En misceláneos durante el día
74% De espera en las líneas
64% En el trabajo

39. Casos de uso para aplicaciones móviles
• El acceso a Facebook a través del navegador
móvil creció 112% en el último año a 25,1
millones de usuarios en Enero de 2010.
• El acceso a Twitter a través de navegador móvil
experimentó un salto de 347% a 4,7 millones de
usuarios en enero de 2010.

40. La gente no permanece mucho tiempo
25% de todos los documentos
fueron exhibidos por menos de
4 segundos
• El 52% de todas las visitas
fueron más cortos de 10
segundos
• El valor máximo se encuentra
entre 2 y 3 segundos

41. Manejar el SmartPhone con una
mano

42. Primero móvil
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación

43. Touch
• Simplifica la experiencia de
usuario
• No puntero de mouse en las
pantallas táctiles

44. Mix de smartphones Nokia

45. Objetivos del Touch
Apple recomienda un
tamaño objetivo mínimo:
29px de ancho
44px de alto

46. Objetivos del Touch
Touch recomendado:
Tamaño de destino es 9mm/34px
Objetivo mínimo de contacto
Es de 7mm/26px
Espacio mínimo entre elementos
2mm/8px
El tamaño visual es de 60-100% del objetivo de toque

48. Gestos touch básicos

49. Gestos touch básicos
Toque:
Tocar brevemente la superficie con yema
de los dedos
Doble toque:
Rápidamente tocar la superficie dos
veces con la yema del dedo.

50. Gestos touch básicos
Arrastrar:
Mover los dedos sobre la
superficie sin perder el
contacto
Golpe rápido:
Mover el dedo rápidamente
sobre la superficie

51. Gestos touch básicos
Pellizco:
Tocar la superficie con dos dedos
y llevarlos más cerca.
Propagación:
Tocar la superficie con dos dedos y
sepáralos.

52. Gestos touch básicos
Presión: Presión y toque:
Toque la superficie durante Pulse la superficie con un
un periodo largo de tiempo dedo y brevemente la
superficie con el segundo
dedo.
Presionar y arrastrar:
Pulse la superficie con un dedo y con el otro
dedo muévase sobre la superficie, sin perder de
contacto.

53. Gestos touch básicos
Rotación:
Toque la superficie con dos dedos y muévalos en un sentido circular u otro
sentido anti horario

54. Acciones relacionadas con el sistema
Tocar la superficie por largo período de
tiempo
Tocar rápidamente dos veces la superficie
Un toque breve

55. Objetos relacionados con las acciones
Arrastrar a Mover los dedos sobre la superficie
través o
fuera de la
sin perder contacto
pantalla
Toque en el Tocar el primero objetivo y luego el
origen y en
el destino
otro
Arrastrar y Mover los dedos sobre la superficie
soltar
sin perder contacto
Multiples
dedos para Mover 2 o 5 dedos sobre la
arrastrar superficie sin perder contacto

56. Navegación relacionada con acciones
Mover los dedos o la palma de una mano, sobre
la superficie sin perder contacto
Mover el dedo sobre la barra de scroll sin perder
contacto
Tocar la barra de scroll por un largo período de
tiempo
Mover como un cepillo sobre la superficie sin
perder contacto

57. Gestos como entrada

58. Menús emergentes en el iPhone

59. Menús emergentes en el Android

60. Campos múltiples en los menús emergentes del
iPhone

61. Campos múltiples en los menús emergentes de
Android

62. Flotar detalles y acciones

63. Tooltip flotante

64. UBICACIÓN
• Posicionamiento
• Filtrado

65. Localización es la
entrada

66. Localización es la
entrada

67. Localización es la
entrada

68. Sistemas de localización

70. Y MÁS ...
• Orientación
• Audio y Video
• La lista sigue ...

71. Capacidad de los dispositivos
móviles
• Aplicación de caché para el almacenamiento local
• CSS3 y Canvas para la optimización del rendimiento
• Sensores Multi-touch
• Detección de localización
• Dispositivo de posicionamiento y movimiento: un acelerómetro
• Orientación: la dirección de una brújula digital
• Audio: entrada de un micrófono, salida para altavoces

72. • Video e imagen: captura / entrada de una cámara
• Push: notificaciones en tiempo real "instantánea" para el usuario
• Conexiones de dispositivo: a través de Bluetooth entre
dispositivos
• La proximidad: la proximidad del dispositivo a los objetos físicos
• Luz ambiente: luz / oscuridad de sensibilización ambiental
• RFID: identificar y rastrear objetos con identificadores
transmitidos
• Haptic feedback: "se sienten" diferentes superficies en una
pantalla
• Biometría: huellas de retina, etc

73. Múltiples orientaciones

74. Orientación estándar

75. Girar su orientación

76. Detección de la orientación en Firefox 3,6

77. Inclinación de la orientación en
Instantpaper

78. Voz es la entrada

79. Localización y orientación son la
entrada

80. Localización y orientación son la
entrada
Cuando fue descubierto por los usuarios
aumentaron su tráfico sostenido un 40 y un
50 por ciento.
"Fue más allá de nuestras expectativas.
No teníamos ni idea ".
Yelp CEO,
Jeremy Stoppelman

81. Escanear para hacer checkaout

82. Imágenes son la entrada

83. SanpTell en el iPhone

84. Imágenes son la entrada

85. Imágenes son la entrada

86. Imágenes son la entrada

89. Registrar la ubicación

90. Presencia de Facebook

91. Capacidad de los dispositivos móviles
Aplicación de caché para el almacenamiento local:
• CSS3 y Canvas para la optimización del rendimiento
• Sensores Multi-touch
• Detección de localización
• Dispositivo de posicionamiento y movimiento: de un acelerómetro
• Giroscopio: 360 grados de movimiento
• Cámaras doble: frente y parte trasera

92. • Push: notificaciones en tiempo real "instantáneas" para el usuario
• Conexiones de dispositivo: entre dispositivos a través de Bluetooth
• La proximidad: la proximidad del dispositivo a los objetos físicos
• Luz ambiente: luz / oscuridad de sensibilización ambiental
• RFID: identificar y rastrear objetos con identificadores transmitidos
• Haptic feedback: "se sienten" diferentes superficies en una pantalla
• Biometría: huellas de retina, etc

93. Primero móvil
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación

94. Consideraciones de móviles de diseño
• Múltiples tamaños de pantalla y densidades
• Optimización del rendimiento
• Los objetivos de tacto, los gestos y las acciones
• Ubicación de sistemas
• Capacidades del aparato

95. Más información
• @lukew
• www.lukew.com