Upload
reinaldo-caceres-veliz
View
357
Download
3
Embed Size (px)
DESCRIPTION
Mobile first la presentación en español
Citation preview
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
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
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
Primero móvil en Adobe
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación
Primero móvil
• 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
Consideraciones en el diseño de
móviles:
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación
Primero móvil
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
CRECIMIENTO = OPORTUNIDAD
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
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
Facebook para
iPhone
"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
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación
Primero móvil
• Centrarse en las acciones básicas
• Conozca a sus usuarios
• Utilizar el diseño escalable
Tamaño de la pantalla
Tamaño de pantalla
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
Se centran en elementos básicos
Conoce a tu
audiencia
Diseña para diferentes tamaños de
pantallas
Tamaño de las pantallas de los
SmartPhones
El impacto del Pixel por Pulgada
El impacto del Pixel por Pulgada
Diseña para diferentes tamaños de
pantallas
1.- Define grupos de dispositivos
Diseña para diferentes tamaños de
pantallas
1.- Define grupos de dispositivos
2.- Crear un diseño de referencia por
defecto
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
Diseña para diferentes tamaños de
pantallas
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
Controles visibles de la aplicación
El controlador de hardware para el
menú
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
• Mantener el rendimiento al nivel de la mente
• Aproveche las ventajas de HTML 5
Velocidad
Velocidad de conexión
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
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%
• Ráfagas rápidas… en todas partes
• Con una sola mano
Contexto
84% En el hogar
80% En misceláneos durante el día
74% De espera en las líneas
64% En el trabajo
Durante un día normal
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.
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
Manejar el SmartPhone con una
mano
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación
Primero móvil
Touch
• Simplifica la experiencia de
usuario
• No puntero de mouse en las
pantallas táctiles
Mix de smartphones Nokia
Objetivos del Touch
Apple recomienda un
tamaño objetivo mínimo:
29px de ancho
44px de alto
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
Gestos touch básicos
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.
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
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.
Gestos touch básicos
Presión:
Toque la superficie durante
un periodo largo de tiempo
Presión y toque:
Pulse la superficie con un
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.
Gestos touch básicos
Rotación:
Toque la superficie con dos dedos y muévalos en un sentido circular u otro
sentido anti horario
Acciones relacionadas con el sistema
Tocar la superficie por largo período de
tiempo
Tocar rápidamente dos veces la superficie
Un toque breve
Objetos relacionados con las acciones
Arrastrar a
través o
fuera de la
pantalla
Toque en el
origen y en
el destino
Arrastrar y
soltar
Multiples
dedos para
arrastrar
Mover los dedos sobre la superficie
sin perder contacto
Tocar el primero objetivo y luego el
otro
Mover los dedos sobre la superficie
sin perder contacto
Mover 2 o 5 dedos sobre la
superficie sin perder contacto
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
Gestos como entrada
Menús emergentes en el iPhone
Menús emergentes en el Android
Campos múltiples en los menús emergentes del
iPhone
Campos múltiples en los menús emergentes de
Android
Flotar detalles y acciones
Tooltip flotante
UBICACIÓN
• Posicionamiento
• Filtrado
Localización es la
entrada
Localización es la
entrada
Localización es la
entrada
Sistemas de localización
Y MÁS ...
• Orientación
• Audio y Video
• La lista sigue ...
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
• 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
Múltiples orientaciones
Orientación estándar
Girar su orientación
Detección de la orientación en Firefox 3,6
Inclinación de la orientación en
Instantpaper
Voz es la entrada
Localización y orientación son la
entrada
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
Escanear para hacer checkaout
Imágenes son la entrada
SanpTell en el iPhone
Imágenes son la entrada
Imágenes son la entrada
Imágenes son la entrada
Registrar la ubicación
Presencia de Facebook
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
• 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
1 .- Crecimiento = oportunidad
2 .- Limitaciones = enfoque
3 .- Capacidad = innovación
Primero móvil
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
Más información
• @lukew
• www.lukew.com