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
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
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
10.
11.
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
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
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
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
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%
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
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
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.
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
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
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
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
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