ESTRATEGIA DIGITAL MÓVIL. Giro54. Giro54. Parte 1. Principales desafíos en el diseño de sitios y aplicaciones móviles. Junio 2014

Transcripción

1 ESTRATEGIA DIGITAL MÓVIL Parte 1. Principales desafíos en el diseño de sitios y aplicaciones móviles Junio 2014

2 03 INTRODUCCIÓN 05 APLICACIONES NATIVAS VS. WEB MÓVIL 08 PRINCIPALES DESAFÍOS 09 VARIEDAD DE DISPOSITIVOS 10 TAMAÑO DE PANTALLA 11 VELOCIDAD DE CONEXIÓN 12 COMPATIBILIDAD CON OTRAS TECNOLOGÍAS 13 CONTENIDOS PROBLEMÁTICOS 14 FORMULARIOS 15 CONTENIDO FLASH 16 IMÁGENES 17 VIDEOS 18 DESCARGAS 19 MAPAS 20 TEXTO COMO IMAGEN 21 REFERENCIAS

3 LOS DISPOSITIVOS MÓVILES TIENEN ACCESO A UNA GRAN CANTIDAD DE FUENTES DE INFORMACIÓN (GEOLOCALIZACIÓN, CÁMARA, SENSORES) QUE ABREN NUEVAS POSIBILIDADES PARA MEJORAR LA EXPERIENCIA DEL USUARIO. El avance en las prestaciones de los dispositivos móviles como smartphones y tablets junto a las mayores velocidades de conexión disponibles han creado las condiciones necesarias para que cada vez más personas usen la web más allá de sus computadoras de escritorio y laptops. Algunos datos que ilustran esta situación: A PARTIR DE DICIEMBRE DE 2010, EL ACCESO DESDE SMARTPHONES SE TRIPLICÓ, DE 131 MIL MILLONES DE MINUTOS A 442 MIL MILLONES EN DICIEMBRE DE EN 2013, LOS USUARIOS MULTI-PLATAFORMA (PERSONAS QUE USAN LA WEB INDISTINTAMENTE DESDE DISPOSITIVOS MÓVILES Y DE ESCRITORIO) SE CONVIRTIERON EN LA MAYORÍA DE LA AUDIENCIA DIGITAL 1 La creación de un sitio web para móviles no debe abordarse sólo como una versión reducida de un sitio web de escritorio. El espacio móvil difiere enormemente de la web tradicional en términos de tamaños de pantalla, velocidades de descarga, y métodos de entrada. Además, los dispositivos móviles tienen acceso a una mayor cantidad de fuentes de datos e información del contexto (ubicación geográfica, cámara, sensores de movimiento, etc.) que abren nuevas posibilidades para mejorar la Experiencia del Usuario.

4 +7% Sólo móviles 36% 38% 39% 39% Sólo escritorio % +237% 124 8% 40% 40% 131 7% 7% 7% 6% 6% 6% 6% 6% 6% 6% 40% 42% 42% 45% 46% Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic Dic Dic % 49% 52% Escritorio Smartphone Tablet 52% 54% 54% 54% 54% 54% 55% 56% Multi-plataforma B. Tiempo total por plataforma en EE.UU. (en miles de millones de minutos). Fuente: comscore Media Metrix Multi-Platform, U.S., Diciembre A. Los usuarios multi-plataforma son mayoría en EE.UU. desde Abril Fuente: comscore Media Metrix Multi-Platform, U.S., Feb - Dic

5 APLICACIONES NATIVAS vs.web MÓVIL

6 LAS APPS NATIVAS PUEDEN ACCEDER A INFORMACION DE OTRAS APLICACIONES, DEL SISTEMA OPERATIVO Y DEL HARDWARE DEL DISPOSITIVO. Una aplicación nativa o app es un tipo de software con el que podemos, por ejemplo, intercambiar mensajes, guardar información o tomar y compartir fotos. Algunas apps vienen pre-instaladas con el sistema operativo (Contactos, Brújula) y es posible agregar nuevas apps (WhatsApp, Instagram) al teléfono o tablet descargándolas de una tienda online como App Store (Apple ios) o Google Play (Android). La principal ventaja de las apps nativas es su capacidad para acceder a información de otras aplicaciones, del sistema operativo y del hardware del dispositivo como cámara, micrófono, servicios de geolocalización. Otras ventajas incluyen: Estabilidad y performance de funcionamiento. Integración con el sistema de notificaciones. Mayor libertad para diseñar una experiencia del usuario más interactiva, rica y pulida. Mejores oportunidades de monetización 2. Posibilidad de usar gestos complejos. A. B. A. Las apps nativas pueden acceder a funciones del sistema operativo como la cámara o el GPS. App: Waze. B. La integración con el sistema de Notificaciones es una de las principales ventajas de las apps. S.O.: ios7. Sin embargo, las aplicaciones deben ser programadas específicamente para cada plataforma usando diferentes lenguajes: Objective-C para Apple ios, Java para Google Android,.NET para Microsoft Windows Phone. Otras desventajas de las apps nativas son: 06

7 Deben ser descargadas e instaladas en el dispositivo. Distribución limitada a los canales oficiales (App Store, Google Play). Los buscadores no encuentran contenido de las apps. Mayores costos de desarrollo y mantenimiento. Los sitios web móviles, en cambio, se acceden desde el navegador web y se desarrollan utilizando las mismas tecnologías web estándar que se vienen empleando para los sitios web tradicionales (HTML, CSS, JavaScript). Las principales ventajas de los sitios móviles son: Disponibilidad inmediata via el navegador web. Mayor compatibilidad. Los navegadores web de todas las plataformas se basan en los mismos estándares. Distribución libre e independiente. Menores costos de desarrollo, por utilizar tecnologías estándar. Integración más sencilla con sistemas de gestión de contenido (CMS) existentes. A. B. A. Los sitios móviles aseguran mayor compatibilidad por utilizar tecnologías web estándar. Sitio: nike.com. B. El acceso via el navegador evita la necesidad de instalación. Sitio: hyundaiusa.com Las desventajas de los sitios web móviles son: Dependencia de las capacidades navegador: menor libertad para controlar detalles de funcionamiento y diseño. Menor exactitud para detectar la ubicación del dispositivo. Mayor exposición a problemas de latencia e interrupciones del servicio. Imposibilidad para funcionar en modo offline. Acceso limitado a información del sistema. 07

8 PRINCIPALES DESAFÍOS

9 LOS DISPOSITIVOS CONTINUARÁN MEJORANDO SU CAPACIDAD DE PROCESAMIENTO, CALIDAD DE PANTALLA Y MÉTODOS DE INGRESO DE DATOS. El acceso a internet desde dispositivos móviles se incrementó de manera exponencial en los últimos años y continuará haciéndolo. Para planificar adecuadamente el lanzamiento de un sitio móvil, deben tenerse en cuenta los siguientes desafíos. VARIEDAD DE DISPOSITIVOS Los dispositivos móviles utilizados para acceder a la web varían enormemente en cuanto a capacidades y características: Capacidad de procesamiento Tamaño de pantalla Sistema operativo Métodos de entrada (teclado físico, pantalla táctil, comandos de voz) La buena noticia es que todos estos dispositivos, independientemente de su hardware o software, cuentan con un navegador que cumple (cada vez en mayor medida) con los estándares web. 09

10 LOS DISPOSITIVOS MÓVILES, DADO EL TAMAÑO DE SUS PANTALLAS, REQUIEREN DE UNA NUEVA ARQUITECTURA DE LA INFORMACIÓN, NAVEGACIÓN Y DISEÑO FOCALIZADO. TAMAÑO DE PANTALLA El tamaño de pantalla de los dispositivos móviles es mucho menor que el de una computadora, incluso para los teléfonos y tablets de alta gama. Esto impacta directamente en el diseño de cada página del sitio y en la estructura de navegación. Surge entonces la necesidad de contar con una nueva arquitectura de la información, navegación y un diseño más liviano y focalizado. Comparación de tamaños: BlackBerry Bold 9000, Nokia Lumia 800, iphone 5S, Google Nexus

11 LOS GRÁFICOS, EL CONTENIDO Y EL CÓDIGO DEBEN SER OPTIMIZADOS PARA REDUCIR LA TRANSFERENCIA DE DATOS Y LOS TIEMPOS DE ESPERA. VELOCIDAD DE CONEXIÓN Las redes móviles como Edge y 3G/4G tienen menor capacidad que las conexiones a internet hogareñas, corporativas, o wi-fi. Los gráficos, el contenido y el código deben ser optimizados para reducir la transferencia de datos y evitar tiempos de espera excesivos. Mbps Mbps 4G 3G Velocidad móvil promedio 2G Mbps 3 Mbps 92 Kbps Las conexiones 4G serán 6 veces más rápidas que la velocidad promedio en Fuente: Cisco VNI Mobile

12 COMPATIBILIDAD CON OTRAS TECNOLOGÍAS Los navegadores móviles evolucionan año a año, sin embargo muchos aún cuentan con un soporte limitado para ciertas tecnologías (algunas son directamente descartadas). Los problemas típicos incluyen el contenido desarrollado en Flash, y el uso excesivo de código o frameworks de JavaScript. Los contenidos Flash sufren problemas de compatibilidad en los dispositivos móviles. Sitio: citroen.com.ar 12

13 CONTENIDOS PROBLEMÁTICOS

14 LOS FORMULARIOS, ASÍ COMO LA MAYORÍA DE LOS CONTENIDOS, DEBEN SER ADAPTADOS AL MEDIO MÓVIL TENIENDO EN CUENTA LAS LIMITACIONES DE LOS DISPOSITIVOS Y EL CONTEXTO DE USO. Deben evitarse los formularios largos que requieran completar gran cantidad de texto. Sitio: icbc.com.ar Ciertos tipos de contenido generarán la mayor cantidad de problemas al encarar un sitio móvil. A continuación listamos los más comunes. FORMULARIOS Los formularios, por ejemplo los usados para registración, contacto o solicitud de información, necesitan ser adaptados al medio móvil debido a las limitaciones de los dispositivos y el contexto de uso: pantallas y teclados pequeños, métodos de entrada de información complicados, velocidades de conexión lentas, etc. Como regla general, deben evitarse los formularios largos que requieran completar gran cantidad de texto. Son preferibles los formularios cortos que usen métodos de selección rápida como los check-boxes, botones y menúes de selección. Es recomendable también utilizar los nuevos estándares para formatos de entrada presentados con HTML5: número (number), y URL. Cuando se define uno de estos formatos, el teclado virtual del teléfono mostrará la configuración correcta para el uso, por ejemplo: un teclado numérico cuando se necesite ingresar un número telefónico; o un teclado que incluya el cuando se solicite una dirección de correo electrónico. 14

15 CONTENIDO FLASH La utilización de contenido Flash no es soportada en ninguno de los dispositivos de Apple ios (iphone, ipad, ipod). Otros sistemas como Android y Blackberry tienen un soporte limitado, pero el futuro es definitivamente poco promisorio para esta tecnología, por lo que la recomendación es remplazarla por el estándar de HTML5. Algunos ejemplos típicos de contenido Flash son: A. Instrucciones paso a paso Recorridos o tours virtuales en 3D o 360º Calculadoras (por ej., para estimar impuestos o hipotecas) Avisos publicitarios Reproductores de video B. A. Página principal visualizada en un navegador web de escritorio. B. La misma página, visualizada en un smartphone. Sitio: citroen.com.ar 15

16 PARA EVITAR ENVIAR ARCHIVOS DE GRAN TAMAÑO ES NECESARIO APLICAR TÉCNICAS PARA PRE- PROCESAR LAS IMÁGENES EN EL SERVIDOR, DETECTAR EL ANCHO DE BANDA Y LA CLASE DE DISPOSITIVO. IMÁGENES Las imágenes en sí mismas son compatibles con el 100% de los navegadores web móviles. La cuestión a considerar en estos casos es el tamaño en kilobytes (KB) o megabytes (MB) de los archivos que se envían a los dispositivos. Los sitios web actuales, gracias a las conexiones rápidas de banda ancha, no suelen optimizar sus imágenes como se hacía años atrás, por lo que no es extraño que las fotos tengan tamaños generosos, con archivos que superan los 500 KB. Para evitar enviar archivos de gran tamaño a los dispositivos pequeños o que acceden por conexiones de baja capacidad deberán ponerse en práctica técnicas tales como el pre-procesamiento de imágenes en el servidor, la detección de ancho de banda y la clase de dispositivo. El pre-procesamiento de imágenes es una opción para no enviar archivos de gran tamaño a los dispositivos. Sitio: audiusa.com 16

17 LOS VIDEOS PUEDEN SER CREADOS Y DISTRIBUIDOS EN MUCHAS VARIEDADES DE FORMATOS QUE NO SIEMPRE SON COMPATIBLES CON LOS DISPOSITIVOS MÓVILES. VIDEOS Los videos pueden ser creados y distribuidos en muchas variedades de formatos que no siempre son compatibles con los dispositivos móviles. Entre los formatos recomendados está MPEG-4 3, un contenedor multimedia de audio y video que permite streaming. Es multiplataforma y es compatible con los navegadores web móviles más populares. H.264 /AVC 4 es un códec de video que ofrece una gran relación entre calidad de imagen y compresión de datos. Este estándar fue desarrollado en conjunto entre el Video Coding Experts Group (VCEG) y el Moving Picture Expert Group (MPEG). La mayoría de los navegadores móviles modernos soportan la etiqueta (tag) video introducida con HTML5. Sin embargo, aún existen muchos reproductores de video que dependen de Flash como tecnología base para su funcionamiento. 17

18 CIERTOS TIPOS DE ARCHIVOS NO SON LEGIBLES POR ALGUNOS SISTEMAS OPERATIVOS SIN LA INSTALACIÓN DE APLICACIONES EXTRA. DESCARGAS Los usuarios que acceden a los sitios desde sus móviles son menos proclives a descargar archivos como consecuencia de las conexiones más lentas, la limitada capacidad de almacenamiento del dispositivo y la dificultad para leer información en pantallas pequeñas. Por otro lado, ciertos tipos de archivos como por ejemplo Word o Excel no son legibles por algunos sistemas operativos sin la instalación de aplicaciones extra. Los usuarios de dispositivos móviles son menos proclives a descargar archivos por los problemas de legibilidad en pantallas pequeñas. 18

19 MAPAS Muchos sitios dependen de proveedores externos como Google Maps para mostrar mapas e indicaciones de cómo llegar. Aunque la mayoría de los servicios ofrecen APIs modernas que tienen en consideración soluciones para móviles, muchos mapas aún dependen de tecnologías poco compatibles como Flash y Java. La mayoría de los dispositivos móviles de última generación ofrecen funcionalidades para la detección de la ubicación geográfica como los GPS. Estas características deben tenerse en cuenta para evitar que el usuario tenga que ingresar información que podría detectarse automáticamente. La mayoría de los servicios de mapas ofrecen APIs modernas que incluyen soluciones para móviles. Sitio: tenaris.com 19

20 UTILIZAR TEXTO COMO IMÁGEN NO ES RECOMENDABLE YA QUE GENERA PROBLEMAS DE ACCESIBILIDAD. TEXTO COMO IMAGEN Algunos sitios priorizan la estética de una familia tipográfica por encima del estándar de utilizar texto plano para componer títulos y párrafos. La utilización de imágenes para mostrar textos es un problema de muchos años en la web por los perjuicios en relación a la accesibilidad del contenido para personas con problemas de visión. En los sitios móviles la situación se agrava aún más, ya que las imágenes impedirían que el dispositivo utilice funcionalidades nativas para reconocer un número telefónico para realizar una llamada o que el usuario copie los datos fácilmente. La utilización de texto en imágenes impide que el dispositivo pueda reconocer el número telefónico para realizar una llamada. Sitio: desarrollosocial. gov.ar 20