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