Luke w primero móvil

439 views
382 views

Published on

Mobile first la presentación en español

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
439
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Luke w primero móvil

  1. 1. Primero móvil en GoogleLos programadores de Googleestán haciendo un trabajo enaplicaciones móviles en primerlugar, porque son mejoresaplicaciones, y eso es lo quelos programadores top quierendesarrollar.-Eric Schmidt, CEO de Google
  2. 2. Primero móvil en FacebookRecién ahora estamos empezando a pensar en los móviles primero y en loscomputadores de escritorio en segundo lugar, para muchos de nuestros productos. ”-Kate Aronowitz, director de diseño de Facebook
  3. 3. Primero móvil en AdobeRealmente tenemos que cambiar ahora para empezar a pensar en laconstrucción móvil en primer lugar. Este es un cambio aún más grande que larevolución del PC.-Kevin Lynch, CTO de Adobe
  4. 4. Primero móvil1 .- Crecimiento = oportunidad2 .- Limitaciones = enfoque3 .- Capacidad = innovación
  5. 5. Consideraciones en el diseño demó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
  6. 6. Primero móvil1 .- Crecimiento = oportunidad2 .- Limitaciones = enfoque3 .- Capacidad = innovación
  7. 7. 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
  8. 8. 27% de las búsquedas provienen de un4% 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
  9. 9. Facebook paraiPhone 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
  10. 10. "Mi objetivo era inicialmente sólo hacer un sitio portátil, pero meconvencí de que era posible crear una versión de Facebook mejorque el sitio web ".-Joe Hewitt
  11. 11. Primero móvil1 .- Crecimiento = oportunidad2 .- Limitaciones = enfoque3 .- Capacidad = innovación
  12. 12. Tamaño de la pantalla• Centrarse en las acciones básicas• Conozca a sus usuarios• Utilizar el diseño escalable
  13. 13. Tamaño de pantalla
  14. 14. 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
  15. 15. Conoce a tuaudiencia
  16. 16. Diseña para diferentes tamaños depantallas
  17. 17. Tamaño de las pantallas de losSmartPhones
  18. 18. El impacto del Pixel por Pulgada
  19. 19. El impacto del Pixel por Pulgada
  20. 20. Diseña para diferentes tamaños depantallas1.- Define grupos de dispositivos
  21. 21. Diseña para diferentes tamaños depantallas1.- Define grupos de dispositivos2.- Crear un diseño de referencia pordefecto
  22. 22. Diseña para diferentes tamaños depantallas1.- Define grupos de dispositivos2.- Crear un diseño de referencia por defecto3.- Definir las reglas para el contenidos y la adaptación deldiseño
  23. 23. Diseña para diferentes tamaños depantallas1.- Define grupos de dispositivos2.- Crear un diseño de referencia por defecto3.- Definir las reglas para el contenidos y la adaptación deldiseño4.- Optar por los estándares web y un diseño flexible
  24. 24. Controles visibles de la aplicación
  25. 25. El controlador de hardware para elmenú
  26. 26. El contenido de la acciónTu no debes ver la pantalla grande del iPad como una invitación arecuperar toda la funcionalidad que podamos desde la aplicación paraiPhone.- Directrices para la interfaz de iPad
  27. 27. Velocidad• Mantener el rendimiento al nivel de la mente• Aproveche las ventajas de HTML 5
  28. 28. Velocidad de conexión
  29. 29. Sugerencias de rendimientoReducir 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 desdeYahoo!, 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 loposible
  30. 30. 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%
  31. 31. Contexto• Ráfagas rápidas… en todas partes• Con una sola mano
  32. 32. Durante un día normal84% En el hogar80% En misceláneos durante el día74% De espera en las líneas64% En el trabajo
  33. 33. 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.
  34. 34. 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
  35. 35. Manejar el SmartPhone con unamano
  36. 36. Primero móvil1 .- Crecimiento = oportunidad2 .- Limitaciones = enfoque3 .- Capacidad = innovación
  37. 37. Touch• Simplifica la experiencia de usuario• No puntero de mouse en las pantallas táctiles
  38. 38. Mix de smartphones Nokia
  39. 39. Objetivos del Touch Apple recomienda un tamaño objetivo mínimo: 29px de ancho 44px de alto
  40. 40. 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
  41. 41. Gestos touch básicos
  42. 42. 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.
  43. 43. 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
  44. 44. 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.
  45. 45. 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.
  46. 46. Gestos touch básicosRotación:Toque la superficie con dos dedos y muévalos en un sentido circular u otrosentido anti horario
  47. 47. Acciones relacionadas con el sistema Tocar la superficie por largo período de tiempo Tocar rápidamente dos veces la superficie Un toque breve
  48. 48. 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
  49. 49. 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
  50. 50. Gestos como entrada
  51. 51. Menús emergentes en el iPhone
  52. 52. Menús emergentes en el Android
  53. 53. Campos múltiples en los menús emergentes deliPhone
  54. 54. Campos múltiples en los menús emergentes deAndroid
  55. 55. Flotar detalles y acciones
  56. 56. Tooltip flotante
  57. 57. UBICACIÓN• Posicionamiento• Filtrado
  58. 58. Localización es laentrada
  59. 59. Localización es laentrada
  60. 60. Localización es laentrada
  61. 61. Sistemas de localización
  62. 62. Y MÁS ...• Orientación• Audio y Video• La lista sigue ...
  63. 63. 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
  64. 64. • 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 entredispositivos• 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 identificadorestransmitidos• Haptic feedback: "se sienten" diferentes superficies en unapantalla• Biometría: huellas de retina, etc
  65. 65. Múltiples orientaciones
  66. 66. Orientación estándar
  67. 67. Girar su orientación
  68. 68. Detección de la orientación en Firefox 3,6
  69. 69. Inclinación de la orientación enInstantpaper
  70. 70. Voz es la entrada
  71. 71. Localización y orientación son laentrada
  72. 72. Localización y orientación son laentrada 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
  73. 73. Escanear para hacer checkaout
  74. 74. Imágenes son la entrada
  75. 75. SanpTell en el iPhone
  76. 76. Imágenes son la entrada
  77. 77. Imágenes son la entrada
  78. 78. Imágenes son la entrada
  79. 79. Registrar la ubicación
  80. 80. Presencia de Facebook
  81. 81. Capacidad de los dispositivos móvilesAplicació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
  82. 82. • 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
  83. 83. Primero móvil1 .- Crecimiento = oportunidad2 .- Limitaciones = enfoque3 .- Capacidad = innovación
  84. 84. 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
  85. 85. Más información• @lukew• www.lukew.com

×