NUEVOS MEDIOS

PRINCIPIOS DEL MOBILE DESIGN

1. MOBILE BIG BANG

91% de los jóvenes en Iberoamérica son dependientes de los smartphone

70% de los usuarios admiten que usan el móvil en el baño

75% de los usuarios no sale de casa sin su dispositivo

25% de los usuarios no pueden recordar la última vez que no tuvieron el móvil cerca

Un dispositivo móvil es el internet para mucha gente

Susannah
Fox,
Pew
Research
Center

2005

2013

Más estadísticas/Estado de la cuestión:

The state of the mobile web

Our mobile planet

2. ¿QUÉ ES UN MÓVIL?

LOS DISPOSITIVOS

¿Tableta?

¿Portátil?

????

Portátiles

!!!!!!!!????

A tener en cuenta:

Diseñar para multidipositivos.
Favorecer el continuum de pantallas.
Optimizar para interacción táctil.
Permitir cursor&teclado.

LAS PERSONAS

Móvil se refiere para la persona, y no al dispositivo o la aplicación.

Bárbara Ballard

BárbaraBallard

Propiedades:

Personal.
Comunicativo.
Handheld.
Wakeable (Despertable).
The carry principle (Llevable)

The carry

principle

Implicaciones en el dispositivo:

Dimensiones:
- Pantalla pequeña.
- Teclado pequeño (Si hay)
  - Limitaciones ergonómicas.
Autonomía:
- Uso de batería.
  - Interruptibilidad.
  - Priorización técnica de poco consumo.
    - CPUs poco potentes.
    - Aplicaciones lentas.
Comunicación inalámbrica.

RESTRICCIONES

Velocidad de conexión

Velocidad de acceso

Cobertura

Medidas:

Descargar solo lo necesario: focalizarse en lo que necesita el usuario
Evitar descargar elementos o imagenes meramente decorativos.
Optimizar peso de archivos.

COMO LO USAMOS

A diferencia del contexto del PC estático y predecible, el contexto mobile es en gran medida como la vida misma. Es impredecible, ambiguo...y está en todas partes.

Rachel Hinman

Uso:

En movimiento.
Susceptibles a distracciones e interrupciones.
Disponibles.

Medidas:

Ofrecer claridad y foco.
Dar prioridad al contenido sobre la navegación.
Focalizarse en tareas principales (1 por pantalla).
Conocer lo más importante (del negocio y el usuario).
Autoguardar.
Multitarea.
Facilitar retomar la tarea (en mismo dispositivo, en otro)

Lugares de uso de smartphones

Las tabletas se usan en el sofá y en la cama

Los smartphones se usan mientras se interactúa con otros medios

Preferencia de tipo de dispositivo a lo largo del día

Frecuencia de uso del dispositivo

Tiempo por interacción en diferentes dispositivos

Tiempo de lectura con tablet y móviles

Cuando necesito profundizar más, empiezo a usar mi tablet. La otra parte es cuando desconecto de mi vida laboral y voy donde quiero estar en ese momento...me abstraigo de mi realidad de hoy. No puedo coger una llamada, responder un e-mail, es mi mundo de sueños.

Nina

Actitud móvil

SOLOMO

Segmentación

APROXIMACIONES DISPONIBLES

Tipologías:

Aplicaciones nativas.
Sitios web móviles (Mobile webs).
Aplicaciones híbridas.

Aplicaciones nativas:

Se descargan desde el store y residen en el dispositivo.
Son específicas de la plataforma y el S.O. (Ej.: iOS, Android, Windows Mobile...).
Construidas con el lenguaje de la plataforma SDK.
Tienen pleno acceso a sensores del dispositivo (GPS, acelerómetro, cámara...), a los componentes del SO, como a los elementos de UI (botones, pestañas, sliders, pestañas y otros controles), patterns (gestos, transiciones) y otras funcionalidades (Contactos...).
Integradas en el sistema de notificaciones.

Sitios web móbiles/Aplicaciones web:

Corren en el navegador web.
Escritas en HTML, CSS y Javascript.
Las web apps parecen aplicaciones nativas, pero no se implementan como tal, son efectivamente webs.
Pueden incorporar los gestos y transiciones que HTML5 soporta.
No tienen la calidad de experiencia de las nativas (rendimiento, fluidez, gestos naturales...).
Ciertas características del SO nativo, como el sistema de notificaciones, algunos sensores y gestos avanzados, no están todavía disponibles.

Aplicaciones híbridas:

Son una combinación de apps nativas y web.
Son esencialmente aplicaciones HTML5 empaquetadas en contenedores de nativas.
Residen en el dispositivo.
Se instalan desde el store.
El propósito es reunir lo mejor de los dos mundos:
- Código único para todas las plataformas.
- Tener acceso a funcionalidades del dispositivo, como acelerómetro, GPS, cámara...

¿Cúal elegir?

Depende:

Producto.
Negocio.
Usuario.
Capacidades técnicas y recursos disponibles.
Tiempo disponible.

Define un problema. Entonces, resuelve ese problema y decide con qué canales tiene sentido conducir la solución.

Brad Frost

PARADIGMA MÓVIL EMERGENTE

Luke Wrobleski

Principios:

Diseñar para tocar.
Al alcance de la mano.
Al alcance de los dedos.
Interacción multitactil.
Interacción y manipulación directa.
Sensación de realismo.
Feedback inmediato.
Animación.
Disfrutar tocando.

DISEÑAR PARA TOCAR

Estás diseñando un dispositivo físico.

Josh Clark

Definir y organizar la interface, también para tocar.

¿Cómo sujetamos el móvil?

49%

36%

15%

90%

10%

¿Áreas de interacción?

Luke Wroblewski

Rachel Hinman

Josh Clark

Sabemos que este diagrama está equivocado.

Steven Hoober

Los usuarios prefieren tocar el centro de la pantalla

Consecuencias:

Situar las acciones principales en el centro.
Situar acciones secundarias arriba y abajo.

Diseñar en función de como sostienen el dispositivo los usuarios

Postura tableta

Áreas de interacción

Mal (Botones superiores)

Bien (Botones laterales)

Lectura cómoda

AL ALCANCE DE LA MANO

Facilitar el movimiento de la mano

AL ALCANCE DE LOS DEDOS

Adecuación de los elementos de la interface al tamaño de los dedos

Tamaño del objetivo

Tocar es impreciso

Implicaciones:

Los objetivos táctiles deben ser lo más grandes posibles.
Tap el contenedor entero.
Diseñar con listas y cajas grandes.

Espacio en blanco entre objetivos

INTERACCIÓN MULTITACTIL

Gestures (Gestos)

Usar la pantalla como control

Para definir gestos:

Asegurarse que el acceso a contenidos y funcionalidades principales utiliza gestos básicos.
Añadir gestos más complejos como atajos a funcionalidades más usadas.

Escala intutitiva de gestos

El buen mobile UI/UX explota la habilidad que hemos adquirido durante toda una vida de vivir en el mundo

Bill Buxton (Microsoft)

INTERACCIÓN Y MANIPULACIÓN DIRECTA

Menos pasos para misma acción

Chrome son los elementos que dan a los usuarios información sobre el contenido y permiten operar con él, sin constituir el contenido propiamente dicho. Estos elementos de diseño son proporcionados por el sistema subyacente y rodean la información del usuario.

Jacob Nielsen

Interactuar directamente con el contenido

SENSACIÓN DE REALISMO

Cuando sea apropiado, añade una realista, dimensión física a tu aplicación. Con frecuencia, cuanto más cerca de la vida tu aplicación se parezca y comporte, más fácil para es para la gente entender como funciona y más disfrutará usandola.

iOS Guidelines