Los sitios web específicamente móviles pueden ser construidos con varias combinaciones de HTML, JavaScript, o la tecnología Adobe Flash. Este artículo se enfoca en explorar algunas de las oportunidades de diseño ofrecidas como son los sitios web. Describo que es una RIA móvil y porque deberías construir una. Después daré algunos consejos para hacer tu RIA móvil  con una experiencia de usuario atractiva.

RIA Mobile

Las oportunidades y las limitaciones de la experiencia móvil han estado en constante cambio durante los últimos años. En algunos momentos parecía que los navegadores se convertirían en el medio principal para la entrega de contenido. Entonces el desarrollo de “tiendas de aplicaciones” llego a definir lo que es esperado de una experiencia móvil. En gran parte, estas tendencias fueron conformadas por la tecnología disponible en el momento. Esto ha sido especialmente cierto cuando se trata de ofrecer experiencias móviles a través de los navegadores. Inicialmente, debido a las limitaciones de la red, muy pocos sitios web con un estilo WAP fueron posibles. Entonces los navegadores con puro HTML ofrecieron la posibilidad de acceder los mismos sitios web desde los dispositivos móviles. Sin embargo, mientras que los sitios web de escritorio ofrecen un mayor grado de riqueza, son más difíciles de navegar en un dispositivo.

Con la proliferación de los smartphones, muchos sitios están ahora ofreciendo sitios HTML que son específicamente diseñados para dispositivos móviles. Mientras estos sitios ofrecen una mejora sobre los sitios WAP, creo hay una oportunidad al construir sitios que entreguen la riqueza de experiencias de escritorio que el usuario espera, pero son diseñadas para dispositivos móviles.

¿Qué es una RIA móvil?

Una aplicación rica de internet (RIA) móvil es una experiencia entregada para un dispositivo móvil, usualmente a través de un navegador, pero con la riqueza, las capacidades y estilos de interacción usualmente encontrados en una aplicación instalada. Con la liberación del Adobe Flash Player 10.1 y el trabajo realizado por el Proyecto de Pantalla Abierta (OSP), experiencias Flash completas son finalmente accesibles en una amplia gama de dispositivos.

Creo que esto representa un punto de inflexión en la tecnología que llevara a una nueva clase de RIAs móviles. Esto no tomara el lugar de las aplicaciones instaladas, pero las complementara como otra avenida para entregar experiencias móviles ricas a los usuarios. Esto se traduce como un nuevo canal para los propietarios de contenido para distribuir contenido Flash a través de una aplicación AIR en los móviles, algo que los consumidores están demandando ahora más que nunca. Últimamente, los distribuidores de contenido quieren tomar ventaja de cada canal disponible para ellos, y creo que construyendo RIAs móviles sobre la Plataforma Flash se les ofrece una prometedora alternativa.

¿Por qué RIAs móviles?

Mientras que las aplicaciones instaladas ofrecen la ventaja de una integración profunda con el dispositivo, también presentan varias desventajas.

  • Con el fin de llegar a diferentes dispositivos y plataformas, se necesita desarrollar varias versiones de la aplicación, usualmente en su código nativo. Esto impone un gran costo general en términos de trabajo con diferentes herramientas y conjunto de habilidades.
  • El usuario debe descubrir, instalar, y ejecutar tu aplicación. Esto puede presentar una enorme barrera, especialmente para la entrega de contenido al que los usuarios no quieran acceder necesariamente y continuamente desde su dispositivo.
  • Su distribución depende de las tiendas de aplicaciones. Algunas requieren de un proceso de aprobación, el cual lo hace difícil para el distribuidor de contenido ya que depende de las fechas de lanzamiento concretas.
  • El desarrollador debe depender de las actualizaciones del software a ser instalado con el fin de garantizar que los usuarios encuentren la última versión del software.

Sin embargo, la línea entre las RIAs móviles y las aplicaciones móviles instaladas es cada vez más borrosa. Más y más aplicaciones instaladas están haciendo uso de recursos de datos conectados, y las aplicaciones del navegador están integrándose con las capacidades del dispositivo. De hecho, diseñando RIAs móviles para la Plataforma Flash te permitite volver a empaquetar tu contenido con una tecnología como Adobe AIR y distribuir tus aplicaciones a través de las tiendas de aplicaciones. Como las RIAs móviles están fundamentalmente basadas en las tecnologías web, pueden también ser más fácilmente adaptadas a la variedad de los nuevos factores de forma, tales como las netbooks, tabletas, y otras computadoras basadas en el tacto.

¿Por qué la Adobe Flash Platform?

La tecnología Flash ha revolucionado la experiencia del contenido rico en la web. Ahora puede ofrecer muchas de las mismas capacidades cuando se entrega contenido para smartphones. Total, un tiempo de ejecución consistente brinda control a los diseñadores y desarrolladores a través de una gran variedad de dispositivos y sistemas operativos. Por ejemplo, el contenido de video puede ser entregado con una reproducción fiable, los efectos de movimiento hacen más atractivas y dinámicas las experiencias, y los juegos pueden incluso ser creados para ejecutarse en los navegadores móviles.

Además de la habilidad de entregar experiencias más ricas, la Plataforma Flash permite a los diseñadores y desarrolladores tomar ventaja de sus herramientas existentes, habilidades, y assets. Adobe ofrece un conjunto de herramientas de clase mundial que permiten a los diseñadores y desarrolladores tener como objetivo los dispositivos móviles así como también las experiencias de escritorio. Esto permite que los recursos de un proyecto así como su código sean compartidos cuando se tiene como objetivo una gran variedad de dispositivos. Usando herramientas comunes y recursos permite a los equipos de diseño aprovechar sus habilidades y procesos actuales con el fin de dirigirlos hacia smartphones en su desarrollo.

Con AIR disponible para crear contenidos para diferentes plataformas móviles como iOS, Android o BlackBerry Tablet OS, Adobe tiene como objetivo capacitar a los desarrolladores en la creación de aplicaciones ricas como experiencias dentro del navegador. En el transcurso del próximo año, millones de smartphones serán vendidos con las nuevas versiones del Flash Player, el cual hará más atractivo el crear RIAs móviles basadas en la Plataforma Flash.

Tips para diseñar RIAs Móviles

Dadas las ventajas de la Plataforma Flash, es fácil ver porque deberías querer desarrollar RIAs móviles. Pero ¿cuál es la mejor forma de asegurar que tu aplicación proporcione la experiencia más irresistible posible? Aquí hay algunos tips para lograr aplicaciones móviles:

  • Trata tu sitio como un lienzo
  • Refuerza las relaciones espaciales con el movimiento
  • Llenar la pantalla con el escenario
  • Verdadero uso de pantalla completa para video y juegos
  • Diseño para el tacto, pero representado por cinco vías
  • Segmento de contenidos
  • Proporcionar la estructura de navegación de la aplicación
  • Revelar progresivamente
  • Diseño de latencia
  • Considera la densidad de pixeles y el tamaño de la pantalla
  • Toma ventaja de la orientación de la pantalla
  • Crea una experiencia inmersiva
  • Crea un ecosistema multipantalla
  • Adaptar y personalizar

Trata tu sitio como un lienzo

Los sitios web tradicionales, de escritorio y móviles, usan una metáfora de la página para todo el contenido. Esto requiere que el usuario pase mucho tiempo navegando por las páginas con el fin de obtener el contenido que quiere. La tecnología Flash permite a los diseñadores pensar en su sitio en términos de superficies. Estas superficies se pueden extender mas allá de la pantalla, invitando a los usuarios a interactuar con ellas. De esta forma, el usuario puede interactuar con el contenido en más de una forma directa sin tener que navegar diferentes páginas.

Un ejemplo de esto puede ser encontrado en la RIA móvil del New York Times. Cuando está viendo una historia, los usuarios pueden desplazarse hacia abajo para ver más de esta historia, pero también pueden navegar horizontalmente al recorrer la vista y así ver la siguiente o la historia anterior. Esto crea la impresión de que las historias están establecidas a través de una gran superficie a lo ancho. Los usuarios pueden hojear estas historias, como lo hacen con las impresiones tradicionales, resultando en una experiencia más atractiva.

RIA móvil del New York Times

Refuerza las relaciones espaciales con el movimiento

A medida que tu sitio incorpore varias superficies, podrás definir las formas físicas en que interactuaran unas con otras. Mientras el movimiento en tu sitio pueda reforzar la relación física con sus elementos, más natural lo sentirá el usuario.

En el ejemplo del New York Times, el arreglo horizontal de las historias esta reforzado por una animación de desplazamiento horizontal. Si el usuario recorre la pantalla de derecha a izquierda, la superficie se desplazara para mostrar la siguiente historia. Los botones izquierdo y derecho también se proporcionan en la parte inferior para su descubrimiento, pero la animación aun ocurre en la misma forma. Esto introduce a los usuarios a la relación física de las historias, invitándolos también a interactuar directamente con la interfaz usando gestos.

Llenar la pantalla con el escenario

Una de las características distintivas de las RIAs móviles es que el área entera dentro del navegador es tomada por la aplicación. El usuario aun experimenta tu sitio en el contexto del navegador, con la barra de estado del dispositivo y la apariencia del navegador. Los navegadores móviles están llegando a ser más y más minimalistas, con barras de dirección que desaparecen a menudo, de modo que tus usuarios experimentaran esencialmente tu contenido como en pantalla completa sin poner en modo de “pantalla completa” el Flash Player. Deberías ser consciente de que algunos navegadores aun mantendrán un tipo de UI persistente como los botones de zoom-in y zoom-out, lo cual puede oscurecer algo de tu contenido. Además, se cuidadoso ya que algunas plataformas pueden tener teclados sobre la pantalla que se muestren en la parte inferior, así que puedes necesitar es evitar cuadros de texto en la parte inferior de la pantalla o hacer que se desplacen hacia arriba cuando sean seleccionados.

El contenido como una lista puede ser creado teniendo el contenido extendido más allá del escenario visible y proporcionando tus propios mecanismos de desplazamiento, ya sea con gestos táctiles o con las teclas de dirección. Esto te permite crear listas ricas que se comportan como quieres que lo hagan.

Verdadero uso de pantalla completa para video y juegos

Para muchas RIAs móviles, querrás mantener el contexto del navegador ya que los usuarios esperan mantener el control sobre sus dispositivos. Sin embargo, hay algunas instancias donde el usuario será mejor servido con una experiencia mas inmersiva. Para estos casos, puedes usar la habilidad del Flash Player para entrar en el modo de pantalla completa.

Los candidatos más probables para este tipo de experiencia son los videos y los juegos. En ambos casos, el usuario necesitara tomar algunas medidas con el fin de ejecutar la experiencia de pantalla completa; tu sitio no puede automáticamente cargarse en pantalla completa. Para videos, puedes brindar un botón de play largo sobre el video, el cual ejecutara el modo de pantalla completa. Si el dispositivo tiene un acelerómetro, rotando el dispositivo también se rotara el video. Para juegos, el usuario puede presionar el botón “Comenzar Juego” o algo similar. Es una buena práctica brindar una forma en que los usuarios puedan salir del modo de pantalla completa, como con un botón cerrar (“X”).

Vídeo en landscape y en pantalla completa

Diseño para el tacto, pero representado por cinco vías

Hoy día los smartphones están llegando a ser los dispositivos de pantalla táctil predominantes, especialmente por la tarea de búsqueda en la web. Desde que los sitios web de escritorio son usualmente largos que la pantalla de un smartphone, los navegadores móviles usualmente emplean una “llave vacía” como estrategia de búsqueda, mediante la cual el usuario usa el zoom para leer el texto y se desliza para ver otras partes de la página. Desde que tú RIA móvil se adaptara a un dispositivo móvil y el escenario será igual a la ventana del navegador, tus usuarios tendrán una mejor experiencia; pero aun puedes tomar ventaja de la experiencia táctil directa que las pantallas táctiles permiten. Esto significa que deberás estar seguro primero de que tu sitio trabajara bien con la interacción táctil. Por ejemplo, tus botones deberán medir de 7 a 10 milímetros en la pantalla de forma que sean un objetivo adecuado para los dedos. Puedes hacer los botones más pequeños, pero solo si no hay otro botón cerca. Deberá también soportar gestos básicos como deslizar, agitar y paneo. Estos métodos directos trabajan muy bien para la interacción con interfaces que se comportan como una serie de superficies, cada con su propia relacione espacial.

Mientras estés seguro de que la interacción táctil trabaja bien, deberás también tener en cuenta que muchos dispositivos son “híbridos”, ofreciendo ambos una pantalla táctil y teclas de dirección o una bola. A veces puede ser más fácil para los usuarios solo usar el hardware de entrada, ya sea para no tener que mover su mano alrededor de la pantalla o para facilitar el uso con una sola mano.  Esto es especialmente cierto para interacciones como el desplazamiento a través de una lista. Por lo tanto, es una buena idea soportar hardware como botones de dirección. La tecnología Flash te permite usar riquezas visuales para indicar objetivos en la pantalla. Por ejemplo, los elementos de una lista pueden tener el fondo que cambien de color y los botones pueden tener un borde y brillo. Esta es una gran mejora sobre las páginas web tradicionales, donde las listas o los enlaces muestran un borde de puntos débiles para indicar que ellos están siendo enfocados. Si tú haces un buen trabajo diseñando los estados y la navegación de tu aplicación, entonces tu diseño será debería también ser fácil de usar en dispositivos no-táctiles como aquellos con teclados físicos.

Segmento de Contenidos

La primera vez que un usuario llega a tu sitio, debes presentarlo con una orientación clara que le permita ver que está disponible para interactuar y hacer simples las opciones  acerca de dónde quiere ir y que es lo que quiere hacer. Dos formas comunes y efectivas de hacerlo son dividir tu sitio jerárquicamente o categóricamente.

La organización jerárquica presenta a los usuarios una lista simple de las áreas principales o actividades que tu sitio le ofrece. Esto se ve a menudo en las aplicaciones móviles cuando un usuario selecciona un elemento y una nueva pantalla se desliza encima de derecha a izquierda. Se trata esencialmente de una estructura hub-and-spoke y trabaja muy bien con las aplicaciones móviles, ya que reduce el enfoque estrecho del usuario hacia un pequeño conjunto de opciones en un momento dado.

Para permitir a los usuarios accesos directos a diferentes partes de tu RIA móvil en un momento dado, puedes usar una navegación categórica con una estructura de pestañas. Esto permite a los usuarios cambiar fácilmente de una área hacia otra. La pestaña actualmente seleccionada también sirve como cabecera y permite a los usuarios saber donde están.

Por ejemplo, la RIA móvil del New York Times permite una navegación jerárquica, permitiendo a los usuarios deslizar la lista de historias a leer una por una individualmente. Además tiene una navegación categórica que provee un menú deslizable que muestra los diferentes tipos de historias disponibles.

Navegación Categórica

Proporcionar la estructura de navegación de la aplicación

Si eliges una navegación jerárquica estratégica, deberás además proveer una forma fácil en que los usuarios puedan volver a través de la jerarquía. Si tu RIA móvil tiene una jerarquía profunda, debes considerar además tener un botón de Home, especialmente si el usuario quiere comenzar de nuevo desde la punta de la jerarquía para hacer algo más.

Por ejemplo, con la RIA móvil del New York Times, una vez que el usuario navega hacia un nivel bajo para leer una historia, se presenta la opción que permite al usuario navegar hacia atrás.

Si tu sitio tiene una navegación categórica, debes considerar dejar estos elementos de UI en la pantalla mientras se desplazan otros contenidos en ella. Separando los elementos de navegación como la propia superficie que permita al usuario saber que sección esta seleccionada, y navegar directamente a alguna otra parte de tu sitio sin desplazarse. Las historias en la RIA móvil del New York Times se deslizan debajo de los elementos de navegación superiores, permitiendo a los usuarios cambiar a una categoría diferente en cualquier tiempo.

Estructura y Navegacion

Revelar progresivamente

Al igual que con el diseño de aplicaciones móviles, visualizar la cantidad de información correcta en el momento correcto es un elemento crítico para las RIAs móviles. Otra forma de segmentar el contenido, pero presentando mas detalles cuando son requeridos por el usuario, es utilizar una estrategia de divulgación progresiva como los acordeones.

Reforzando la apertura de un acordeón con movimiento puede ser una manera muy efectiva de expandir la superficie disponible mientras se mantiene el contexto para el usuario. El área dentro de un acordeón abierto puede además ser usada creativamente para incorporar un deslizamiento vertical propio o incluso un deslizamiento horizontal.

Además de los elementos de UI como los acordeones, hay muchas otras formas de visualizar contenido bajo demanda y en contexto. Por ejemplo, los iconos pueden mostrar las opciones del menú, ventanas de ayuda pueden ser visualizadas cuando los iconos de información son seleccionados, y pequeños menús con opciones contextuales específicas pueden ser visualizadas cuando un botón es presionado. La RIA móvil del New York Times muestra un menú de opciones cuando el usuario selecciona el cambio del tamaño de letra.

Menú que muestra las opciones de personalización del tamaño de letra

Diseño de latencia

Has escuchado acerca de muchas limitaciones de los dispositivos móviles, como el tamaño limitado de la pantalla, poder de procesamiento, y velocidad de conexión. Uno de los factores más importantes para determinar cómo percibe el usuario una conexión inalámbrica es la latencia. Para simplificar un poco las cosas, le toma más tiempo  una solicitud de red ser transmitida a la torre, después al servidor, y de vuelta al dispositivos del usuario. El resultado es una cantidad significativa de retraso involucrado cada vez que los datos se recuperan, a pesar que la velocidad de descarga de datos sea muy rápida en muchas de las redes y smartphones actuales. Con cada solicitud de red se crea una cierta cantidad de sobrecarga, pero puedes también descargar más datos a la vez, especialmente si esto significa que puedes evitar una solicitud futura. Esto lo hace la opción perfecta para el desarrollo de RIAs móviles.

Por la descarga de datos un poco más que por la aplicación inicial, puedes hacer uso del contenido ya descargado para soportar algunas interacciones del usuario. En una página web móvil tradicional, cada una de estas interacciones tiene que hacer una conexión a la red con el fin de descargar una nueva página. Considerando una RIA móvil con varias pestañas. Cada pestaña puede responder inmediatamente cuando el usuario la selecciona. Si el tamaño de la descarga es demasiado grande, el contenido puede ser cargado en su lugar cuando la pestaña es seleccionada. Dado que el contenido de la pestaña es precargado y almacenado, la percepción del usuario será que la aplicación es más sensible porque la pestaña responde de inmediato. Si una cantidad suficiente de la aplicación es almacenada temporalmente, el usuario podrá incluso ser capaz de utilizarla sin una conexión a internet.

Considera la densidad de pixeles y el tamaño de la pantalla

Puede parecer un poco contradictorio, pero la densidad de pixeles, también llamada tono y que normalmente se mide en pixeles por pulgada (dpi), puede tener un impacto más dramático en la UI que el tamaño de la pantalla solo. La densidad de pixeles es la combinación de la resolución de la pantalla y el tamaño físico de la pantalla. Muchos de los dispositivos móviles están teniendo una densidad de pixeles más grande que los monitores, así que todo se verá diferente en un dispositivo. Esto debido a que es crítico probar tus diseños en un dispositivo real. Esto puede ser tan simple como hacer composiciones con las mismas dimensiones del dispositivo de prueba y visualizando aquellas imágenes en la galería de fotografías den dispositivo en pantalla completa.

No solo la densidad de pixeles será diferente entre tu computadora y un dispositivo, la densidad de pixeles entre dispositivos puede variar mucho más. Por ejemplo, la Palm Pre tiene una resolución de 320 x 480 con una pantalla de 3.1 pulgadas diagonalmente. Para obtener el ppi, primero necesitas encontrar cuantos pixeles hay diagonalmente. Esta es la raíz cuadrada de cada lado cuadrado, ambos sumados (a2 + b2 = c2). Así que la raíz cuadrada de 3202 + 4802 = 576.89. Divide este número de pixeles por la dimensión diagonal de la pantalla (3.1) para llegar a un ppi de unos 186. Compáralo con el Google Nexus One cuya resolución es de 480 x 800 con una pantalla de 3.7 pulgadas; eso es 252 ppi!

Puedes pensar inicialmente que con una pantalla más grande, el contenido se verá mucho más grande, pero los mismos assets se verán 35% más pequeños comparados con la Pal Pre. Como referencia, el Nokia n900 y el Motorola Droid tienen un tamaño de pantalla similar al Nexus One, con un ppi de 267 y 265 respectivamente. Busca el ppi de los dispositivos que son tu objetivo y adapta la UI de modo que las cosas se visualicen bien en el tamaño apropiado.

Diagrama Ilustrando los diferentes tamaños de pantalla y resoluciones, relacionadas unas con otras

Toma ventaja de la orientación de la pantalla

Los cambios de orientación de la pantalla dispararan un cambio automático a modo landscape con el acelerómetro-para los smartphones que lo tengan. Además hay APIs para cambiar la orientación del contenido respecto a la reorientación, la cual puede ser disparada automáticamente o manualmente. Esto puede ser un reto para el diseño, pero también representa  algunas oportunidades. Lo bueno es que la UI se podrá ajustar horizontalmente. Si tus pestañas fueron apretadas en el modo portrait, puedes esturarlas en el modo landscape para hacerlas más fáciles de tocar. Para listas, tú querrás considerar las oportunidades más allá de simplemente extender el tamaño de tus elementos. Por ejemplo, es posible que ahora tengas espacio para una vista en miniatura o un icono al lado del texto, teniendo en cuenta el ancho adicional.

Crea una experiencia inmersiva

Una de las ventajas de las RIAs móviles es la capacidad de sumergir a los usuarios en tu marca. Con más control sobre los elementos visuales, puedes atar el aspecto de tu RIA móvil con el de tus otros sitios y aplicaciones. Elementos de la marca como los colores, logos, tipos de letra pueden ser embebidos en la experiencia, creando una identidad de tu marca coherente.

Crea un ecosistema multipantalla

Para los servicios que estén relacionados con los sistemas de back-end, considera como se integrara tu RIA móvil con los sitios de escritorio, aplicaciones instaladas, televisiones, y otros dispositivos. Al mover el eje del contenido en la nube le permitirás a tu RIA móvil funcionar como una sola pieza de un sistema integrado.

Por ejemplo, considerando una aplicación que toma notas y las almacena junto con otro contenido en un repositorio en línea. La RIA móvil puede ser usada para acceder o modificar el contenido para su posterior uso, o para generar nuevo contenido. O pensando en un lector de RSS que permite a los usuarios acceder a contenido a través de una RIA móvil o en una aplicación de escritorio. Los usuarios podrán administrar sus subscripciones en sus computadoras de escritorio pero crear listas personalizadas de tus feeds favoritos para verlos en sus RIAs móviles.

Para más información sobre aplicaciones contextuales, por favor consulta la siguiente nota de Adobe:

Diseñando soluciones y aplicaciones contextuales (PDF, 500 KB)

Adaptar y personalizar

Otra forma de hacer tu RIA móvil más irresistible y útil es brindar a los usuarios la opción de adaptar la experiencia a sus necesidades. Esto puede variar desde las preferencias que les permitan filtrar información o la capacidad de crear personajes personalizados en un juego. Preferencias como estas pueden ser almacenadas como objetos locales compartidos en el Flash Player de modo que la próxima vez que el usuario regrese al sitio, sus preferencias serán preservadas. Esto también puede ser usado como una forma de regresar al usuario a un estado en particular de la aplicación la próxima vez que regrese. Es posible que los usuarios borren los datos almacenados y se graben nuevos, así que asegúrate de tener una copia de respaldo para tratar con estas posibilidades.

En la RIA móvil del New York Times,  los usuarios tienen la posibilidad de personalizar el tamaño de letra usado en las historias. Esto es además útil en caso de que los usuarios estén en un dispositivo con una densidad de pixeles alta.

A donde vamos desde aquí

Como puedes ver, las RIAs móviles ofrecen una amplia gama de oportunidades para construir experiencias irresistibles y expresivas. Los sitios web específicamente móviles pueden ofrecer ventajas sobre los sitios web de escritorio, y las RIAs móviles pueden basarse en este concepto para ofrecer experiencias cada vez más ricas. Construyendo RIAs móviles puedes pavimentar el camino para la creación de ambas, aplicaciones instaladas y experiencias para otros equipos emergentes y factores de forma. Finalmente, te he brindado varios tips sobre como pensar acerca del diseño de RIAs móviles usando la Adobe Flash Platform. Espero estas recomendaciones sean útiles para que crees tus propias RIAs móviles atractivas.

Este articulo esta publicado en Adobe Developer Connnetion(devnet) bajo licencia Creative Commons, escrito originalmente por Dave Zuverink Senior Mobile Experience Designer en Adobe Systems y traducido en este blog por Jesús Macedo